/*
Theme Name: CoveyLaw
Theme URI: https://covey.law/
Template: hello-elementor
Author: CoveyLaw
Description: Custom child theme for CoveyLaw (covey.law) — ACF flexible-content page builder, Tailwind styling, Contact Form 7 intake forms. Requires the Hello Elementor parent theme and ACF Pro.
Version: 1.3.0
Updated: 2026-08-28

*/
/* ============================================================
   Visually-hidden (screen-reader only) text
   ============================================================ */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Global responsive typography guards
   JetBrains Mono is monospace — wide words (e.g., "Entertainment")
   easily overflow narrow containers. These rules prevent cutoffs
   at all viewport sizes.
   ============================================================ */

/* Words wrap only at natural word boundaries (spaces) — never mid-word.
   overflow-wrap: break-word only kicks in for truly unbreakable content
   (long URLs, IDs) as a last-resort safety net so text doesn't overflow. */
h1, h2, h3, h4, h5, h6,
p, span, li, a {
    overflow-wrap: break-word;
    word-break: normal;   /* NOT break-word — that splits mid-word */
    hyphens: manual;      /* NOT auto — auto injects hyphens mid-word */
}

/* Prevent text-heavy flex/grid children from forcing overflow */
main > section > div,
.grid > div,
.flex > div {
    min-width: 0;
}

/* Fluid heading sizes for the known display headings — scale smoothly
   from mobile up to widest desktop instead of jumping at breakpoints. */

/* Practice areas heading (home-2-col-section) — the "Arts & Entertainment Law" cutoff.
   Font size sized so the longest single word ("Entertainment", 13 chars) always
   fits inside the 40%-wide text column (minus 2×32px padding) at every viewport
   from md (768) up. Words wrap at spaces — never break mid-word.
   Margin below the heading is set in em, so it scales with the font. */
.home-2col-content h3,
.home-2col-content h1,
.home-2col-content h2 {
    font-size: clamp(1.5rem, 3.5vw, 3.75rem) !important;
    line-height: 1.05;
    word-break: normal;
    hyphens: manual;
    max-width: 100%;
    margin: 0;             /* clear default; use container padding for spacing */
}

/* Fluid spacing for the heading + body cells inside the practice areas column.
   Padding scales from 0.75rem (12px) at narrow viewports up to 2rem (32px) at
   wide desktops — matching how the heading font itself scales. */
.home-2col-heading-cell,
.home-2col-body-cell {
    padding: clamp(0.75rem, 2vw + 0.25rem, 2rem);
}

/* Body copy inside the practice areas cell — bottom margin scales with viewport */
.home-2col-body-cell > div {
    margin-bottom: 0;
}
.home-2col-body-cell {
    padding-bottom: clamp(1.5rem, 3vw, 3rem);
}

/* Same treatment for the 2-column-with-2-images layout heading */
.sec-news h3.font-mono {
    font-size: clamp(1.5rem, 3.5vw, 3.75rem) !important;
    line-height: 1.05;
    word-break: normal;
    hyphens: manual;
    max-width: 100%;
}

/* Breadcrumb banner giant heading — full-width area, more room to breathe */
.header_heading_breadcrumb h1,
.header_heading_breadcrumb h2 {
    font-size: clamp(2rem, 5vw + 0.5rem, 6rem) !important;
    line-height: 1;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* CTA section heading */
.performance-sec p.font-bold {
    font-size: clamp(1.75rem, 4.5vw, 4.5rem) !important;
    line-height: 1.05;
    overflow-wrap: break-word;
}

/* Team section heading — target only the BIG heading (has max-w-[14em] marker),
   not the subtitle h2s on other sections that share font-mono + text-covey-neutral. */
main > section h2.font-mono.text-covey-neutral.max-w-\[14em\] {
    font-size: clamp(1.5rem, 3.5vw, 3rem) !important;
    line-height: 1.15;
}

/* Latest news heading */
.our-letest-content p.font-bold {
    font-size: clamp(1.75rem, 4vw, 3.75rem) !important;
    line-height: 1.05;
}

/* Press section heading */
.press_auto ~ * ,
main > section .text-covey-neutral.font-mono.leading-tight {
    font-size: clamp(1.25rem, 2.5vw, 2rem) !important;
}

/* Navigation: allow menu links to wrap at cramped tablet widths */
@media (min-width: 1024px) and (max-width: 1180px) {
    header nav .hidden.lg\:flex a {
        font-size: 12px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Header: keep contact button visible even on cramped screens */
@media (max-width: 1180px) {
    .parent-login {
        gap: 1rem !important;
        padding-right: 1rem !important;
    }
    .parent-login .contact-btn {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Mobile: ensure image columns render at reasonable height everywhere */
@media (max-width: 767px) {
    /* Practice area image column (already handled via .mobile-none rule) */
    /* Hero image column already handled */
    /* Additional: content_section body doesn't get squeezed */
    .homer_banner_cont h1,
    .homer_banner_cont h2,
    .homer_banner_cont h3 {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    }
}

/* Prevent horizontal scroll on the entire site (any accidental overflow) */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ============================================================
   Web fonts — Inter (body) + JetBrains Mono (headings)
   Loaded via Google Fonts in functions.php. These variable
   overrides cascade into every .font-sans / .font-mono Tailwind
   utility used across the theme (no per-element edits needed).
   ============================================================ */
:root {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Override the hardcoded body font (was NB International, which never loaded) */
body,
input, textarea, select, button {
    font-family: var(--font-sans);
}

/* All headings default to JetBrains Mono for the technical/legal-brand feel */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
}

/* Links inherit their parent font (was hardcoded to Apercu Mono Pro) */
a {
    font-family: inherit;
}

/* ============================================================
   Skip-to-content link (a11y / SEO landmark navigation)
   ============================================================ */
.covey-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 0.75rem 1rem;
    background: #1c3069;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 14px;
}
.covey-skip-link:focus {
    left: 0;
    top: 0;
}

/* ============================================================
   Layout — fixed header + admin bar offsets
   ============================================================ */
:root {
    --covey-header-h: 49px; /* header h-12 (48px) + 1px border */
}

/* Sticky-footer flex layout: body fills the viewport, main grows to eat any
   leftover space, footer stays pinned at the bottom. No gap under short pages,
   no html-bg peek-through, footer never floats.
   !important throughout because WP/plugins/Elementor sometimes inject body
   styles late in the cascade that would otherwise clobber the layout. */
html {
    background-color: var(--color-covey-neutral) !important;
    min-height: 100% !important;
}
body {
    padding-top: var(--covey-header-h) !important;
    box-sizing: border-box !important;
    background-color: var(--color-covey-neutral) !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}
body > main {
    flex: 1 0 auto !important;   /* grows to fill space above the footer */
    display: flex !important;
    flex-direction: column !important;
}
/* Pass main's growth down: the last section absorbs any leftover viewport
   space, so its background (and left border rail) runs all the way to the
   footer instead of leaving a dead strip on short pages. */
body > main > section {
    flex-shrink: 0;
}
body > main > section:last-of-type {
    flex-grow: 1;
}
body > footer {
    flex-shrink: 0 !important;
    margin-top: auto !important; /* extra safety: pushes footer to end */
}

/* (main growth handled by the sticky-footer flex layout above — no
   min-height needed here. Removing the redundant rule.) */
.admin-bar body {
    padding-top: calc(var(--covey-header-h) + 32px);
}
@media screen and (max-width: 782px) {
    .admin-bar body {
        padding-top: calc(var(--covey-header-h) + 46px);
    }
}

/* Push fixed header below the WP admin bar when logged in */
.admin-bar header.fixed {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar header.fixed {
        top: 46px;
    }
}

/* ============================================================
   Base typography
   ============================================================ */
body p {
    font-size: 18px;
    line-height: 1.6;
}

/* ============================================================
   Simple Page template (template-name "Simple Page")
   ============================================================ */
.simple-page-body {
    color: var(--color-covey-navy);
    font-size: 18px;
    line-height: 1.65;
}
.simple-page-body > * + * {
    margin-top: 1.25rem;
}
.simple-page-body h2 {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
    margin-top: 2.5rem;
}
.simple-page-body h3 {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.3;
    margin-top: 2rem;
}
.simple-page-body h4 {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.125rem;
    margin-top: 1.5rem;
}
.simple-page-body a {
    color: var(--color-covey-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.simple-page-body a:hover {
    opacity: 0.8;
}
.simple-page-body ul,
.simple-page-body ol {
    padding-left: 1.5rem;
}
.simple-page-body ul { list-style: disc; }
.simple-page-body ol { list-style: decimal; }
.simple-page-body li + li {
    margin-top: 0.5rem;
}
.simple-page-body strong { font-weight: 700; }
.simple-page-body em     { font-style: italic; }
.simple-page-body blockquote {
    border-left: 3px solid var(--color-covey-navy);
    padding-left: 1rem;
    font-style: italic;
}

/* ============================================================
   Contact Form 7 — generic styles (work for any form ID, on any environment)
   Original rules were hardcoded to staging form ID #wpcf7-f676-o1.
   ============================================================ */
.wpcf7-form {
    color: var(--color-covey-navy);
}
.wpcf7-form label {
    display: block;
    font-family: var(--font-mono);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;    /* label sits right above its field */
    margin-top: 0.25rem;
}
/* Kill any auto <br> or spacing between a label and its input */
.wpcf7-form label + br { display: none; }
.wpcf7-form label + input,
.wpcf7-form label + select,
.wpcf7-form label + textarea {
    margin-top: 0;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select {
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    border: 1px solid rgba(28, 48, 105, 0.2); /* covey-navy 20% */
    background: transparent;
    font-family: var(--font-sans);
    font-size: 18px;
    color: var(--color-covey-navy);
    border-radius: 0;
    box-sizing: border-box;
}
.wpcf7-form textarea {
    width: 100%;
    height: 200px;
    padding: 1rem;
    border: 1px solid rgba(28, 48, 105, 0.2);
    background: transparent;
    font-family: var(--font-sans);
    font-size: 18px;
    color: var(--color-covey-navy);
    border-radius: 0;
    box-sizing: border-box;
    resize: vertical;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    outline: none;
    border-color: var(--color-covey-navy);
}
.wpcf7-form ::placeholder {
    color: rgba(28, 48, 105, 0.5);
}
.wpcf7-form p {
    margin-bottom: 1.5rem;      /* spacing between distinct fields */
    margin-top: 0;
}

/* Space above the form (separates it from the paragraph text above) */
.wpcf7 {
    margin-top: 3rem;
    max-width: 100%;
}

/* Desktop: form container caps at 75% of viewport width, centered */
@media (min-width: 768px) {
    .wpcf7 {
        max-width: 75vw;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (min-width: 1400px) {
    .wpcf7 {
        max-width: 900px;       /* stop growing on very wide screens */
    }
}

/* Content section body: tighter top padding so it sits closer to the H1 banner
   above. Applies to EVERY content_section (identified by its small_font /
   big_font body class) — consistent H1→paragraph gap across all pages that
   use the breadcrumb_image_banner + content_section pattern. */
.flex.justify-center.small_font,
.flex.justify-center.big_font {
    padding-top: 1.5rem !important;
    padding-bottom: 3rem !important;
}
@media (min-width: 768px) {
    .flex.justify-center.small_font,
    .flex.justify-center.big_font {
        padding-top: 3rem !important;
        padding-bottom: 5rem !important;
    }
}

/* Submit button — Covey red brand color */
.wpcf7-form .wpcf7-submit,
input.wpcf7-form-control.wpcf7-submit {
    display: inline-block;
    padding: 0.875rem 2.5rem;
    font-family: var(--font-mono);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background-color: var(--color-covey-red);
    color: var(--color-covey-neutral);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.wpcf7-form .wpcf7-submit:hover {
    opacity: 0.9;
}

/* CF7 status messages (validation, success, error) */
.wpcf7-not-valid-tip {
    color: var(--color-covey-red);
    font-size: 14px;
    margin-top: 0.25rem;
}
.wpcf7-response-output {
    margin-top: 1.5rem !important;
    padding: 1rem !important;
    border-width: 1px !important;
}

/* ============================================================
   Gravity Forms — same visual language as the CF7 styles above.
   Production runs Gravity Forms, so both plugins get identical brand
   styling. !important is needed where GF's bundled themes (2.5+/Orbital)
   would otherwise out-rank these rules.
   ============================================================ */
.gform_wrapper {
    margin-top: 3rem;
    max-width: 100%;
    color: var(--color-covey-navy);
}
@media (min-width: 768px) {
    .gform_wrapper {
        max-width: 75vw;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (min-width: 1400px) {
    .gform_wrapper {
        max-width: 900px;
    }
}
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
    display: block;
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-covey-navy) !important;
    margin-bottom: 0.35rem;
}
.gform_wrapper .gfield_required {
    color: var(--color-covey-red) !important;
}
/* Sub-labels under Name-style multi-input fields */
.gform_wrapper .ginput_complex label,
.gform_wrapper .gform-field-label--type-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(28, 48, 105, 0.7);
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper select {
    width: 100%;
    height: 50px !important;
    padding: 0 1rem !important;
    border: 1px solid rgba(28, 48, 105, 0.2) !important;
    background: transparent !important;
    font-family: var(--font-sans) !important;
    font-size: 18px !important;
    color: var(--color-covey-navy) !important;
    border-radius: 0 !important;
    box-sizing: border-box;
}
.gform_wrapper textarea {
    width: 100%;
    height: 200px !important;
    padding: 1rem !important;
    border: 1px solid rgba(28, 48, 105, 0.2) !important;
    background: transparent !important;
    font-family: var(--font-sans) !important;
    font-size: 18px !important;
    color: var(--color-covey-navy) !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    resize: vertical;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    outline: none !important;
    border-color: var(--color-covey-navy) !important;
    box-shadow: none !important;
}
.gform_wrapper ::placeholder {
    color: rgba(28, 48, 105, 0.5);
}
/* Vertical rhythm between fields (GF 2.5+ grid; margin stays 0 to avoid
   double-spacing on top of the grid gap) */
.gform_wrapper .gform_fields {
    grid-row-gap: 1.5rem;
}
/* Section break ("Where are you located?") styled like a plain field label */
.gform_wrapper .gsection {
    border-bottom: none;
    padding: 0;
    margin: 0;
}
.gform_wrapper .gsection .gsection_title {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-covey-navy);
    margin: 0;
}
.gform_wrapper .gfield-choice-input {
    accent-color: var(--color-covey-navy);
}
/* Submit button — Covey red, matching the CF7 submit */
.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper .gform-theme-button {
    display: inline-block;
    padding: 0.875rem 2.5rem !important;
    font-family: var(--font-mono) !important;
    font-size: 18px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background-color: var(--color-covey-red) !important;
    color: var(--color-covey-neutral) !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
    opacity: 0.9;
}
/* Validation + confirmation messages */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    color: var(--color-covey-red);
    font-size: 14px;
    margin-top: 0.25rem;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.gform_wrapper .gform_validation_errors {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--color-covey-red);
    background: transparent;
    box-shadow: none;
}
.gform_wrapper .gform_validation_errors h2 {
    color: var(--color-covey-red);
    font-size: 16px;
    margin: 0;
}
.gform_confirmation_message {
    display: block;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--color-covey-navy);
    font-family: var(--font-mono);
    color: var(--color-covey-navy);
}

/* ============================================================
   Missing Tailwind utilities used by single-team.php
   (compiled stylesheet is hand-output; these aren't generated)
   ============================================================ */
.md\:w-2\/5 { width: 100%; }
.md\:w-3\/5 { width: 100%; }
@media (min-width: 768px) {
    .md\:w-2\/5 { width: 40%; }
    .md\:w-3\/5 { width: 60%; }
}
.tracking-widest { letter-spacing: 0.1em; }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
.underline-offset-4 { text-underline-offset: 4px; }
.pr-6 { padding-right: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }
@media (min-width: 768px) {
    .md\:pb-24 { padding-bottom: 6rem; }
}

/* Color with opacity (Tailwind /N syntax not in pre-built CSS) */
.text-covey-navy\/70 { color: rgba(28, 48, 105, 0.7); }
.text-covey-navy\/60 { color: rgba(28, 48, 105, 0.6); }
.text-covey-navy\/10 { color: rgba(28, 48, 105, 0.1); }
.bg-covey-navy\/10  { background-color: rgba(28, 48, 105, 0.1); }

/* ============================================================
   Team member single page (single-team.php)
   ============================================================ */

/* Banner name — fluid display size */
.team-name {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    letter-spacing: -0.02em;
}

/* Image column: show whole image (contain), not crop, anchored to top */
.team-image {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--color-covey-neutral);
}
.team-image img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
@media (min-width: 768px) {
    .team-main {
        align-items: stretch;
    }
    .team-image {
        padding: 2rem;
    }
}

/* Bio prose — typography for the_content() output */
.team-bio {
    font-size: 18px;
    line-height: 1.65;
    color: var(--color-covey-navy);
    max-width: 65ch;
}
.team-bio > * + * { margin-top: 1.25rem; }
.team-bio h2,
.team-bio h3,
.team-bio h4 {
    font-family: var(--font-mono);
    font-weight: 700;
    line-height: 1.25;
    margin-top: 2rem;
    color: var(--color-covey-navy);
}
.team-bio h2 { font-size: 1.5rem; }
.team-bio h3 { font-size: 1.25rem; }
.team-bio h4 { font-size: 1.125rem; }
.team-bio a {
    color: var(--color-covey-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.team-bio a:hover { opacity: 0.85; }
.team-bio strong { font-weight: 700; }
.team-bio em     { font-style: italic; }
.team-bio ul, .team-bio ol { padding-left: 1.5rem; }
.team-bio ul { list-style: disc; }
.team-bio ol { list-style: decimal; }
.team-bio li + li { margin-top: 0.5rem; }
.team-bio blockquote {
    border-left: 3px solid var(--color-covey-navy);
    padding-left: 1rem;
    font-style: italic;
}

/* Media gallery — smaller thumbnails, denser grid */
.media-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .media-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
}
@media (min-width: 1024px) {
    .media-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
}
@media (min-width: 1280px) {
    .media-gallery { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.media-gallery .media-item {
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(28, 48, 105, 0.15);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.media-gallery .media-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-covey-navy);
}

/* ============================================================
   Side rotated CoveyLaw logo (left vertical column on inner pages)
   SVG, ~3.9:1 aspect.
   Position + rotation handled entirely by Tailwind classes in markup
   (absolute, top-32, left-6, origin-left, -rotate-90 = bottom-to-top).
   ============================================================ */

/* Widen the side column from Tailwind's w-12 (48px) to 120px so the
   logo has breathing room. Responsive: shrinks on tablets, grows on
   wider viewports. */
.CoveyLawAppend {
    width: clamp(96px, 8vw, 144px) !important;
}

/* script.js moves .CoveyLawAppend (position:absolute; height:100%) into the
   second section of <main>. Without a positioned ancestor its height resolves
   against the viewport, so on short pages the strip juts past the footer and
   creates scrollable dead space BELOW it. Make that section its containing
   block so the strip is sized to the section instead. */
main > section:nth-of-type(2) {
    position: relative;
}

.coveylaw-sidelogo {
    height: 60px;        /* readable, slight column overflow we accept */
    width: auto;         /* aspect → ~234px reading length */
    display: block;
}

/* ============================================================
   Per-page overrides (use body class .page-{slug})
   ============================================================ */

/* arts-entertainment: force the second section (the content_section) to fill viewport */
.page-arts-entertainment main > section:nth-of-type(2) {
    min-height: 100vh;
}

/* about: relax the line-height on the intro paragraph */
.page-about .review-intro {
    line-height: 1.5;
}

/* about: promote the "Media & Archives" link from inline to prominent button */
.page-about a.read-more-btn,
.page-about .read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.875rem 2rem;
    background-color: var(--color-covey-red);
    color: var(--color-covey-neutral) !important;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}
.page-about a.read-more-btn::after {
    content: "→";
    display: inline-block;
    font-size: 1.1em;
}
.page-about a.read-more-btn:hover {
    opacity: 0.9;
    color: var(--color-covey-neutral) !important;
}

/* ============================================================
   Table section (Advisories / Updates on homepage)
   — scrollable lists, prominent center divider
   ============================================================ */

/* Each list scrolls independently after 4 items.
   Item height: py-3 (12+12) + ~24px content + 1px border ≈ 49px → 4 items ≈ 196px. */
.table-list-scroll {
    max-height: 200px;
    overflow-y: auto;
    /* Custom scrollbar — match brand */
    scrollbar-width: thin;
    scrollbar-color: var(--color-covey-navy) transparent;
}
.table-list-scroll::-webkit-scrollbar {
    width: 6px;
}
.table-list-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.table-list-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-covey-navy);
    border-radius: 3px;
}

/* More prominent vertical separation between the two columns on desktop.
   The first column already has md:border-r; bumping its width and tinting
   keeps it part of the design language but makes it read as a real divider. */
@media (min-width: 768px) {
    .table-section-grid > div:first-child {
        border-right-width: 2px;
    }
}

/* (Mobile: the outer wrapping div now has py-4 in the template, giving the
   bordered grid breathing room below it before the next section.) */

/* Single-column list layout (table_section with empty second column).
   Used on Performing Artist Visas: heading + stacked links, no bordered
   table chrome. Icons and hover states come from .table-list-item styles.
   Left-aligned with the content_section copy above (wrapper padding set in
   table_section.php). When this is the page's last section it flex-grows,
   so its background runs down to the footer. */
.single-col-list {
    max-width: 720px;
    padding-bottom: 3rem;     /* breathing room before the footer (doubled) */
}
.single-col-heading {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-covey-navy);
}
.single-col-links .table-list-item {
    padding-left: 0;      /* flush-left list, no boxed look */
    padding-right: 0;
}
.single-col-links .table-list-item:first-child {
    border-top: 1px solid var(--color-covey-navy);
}

/* Lazy-reveal: items beyond the first 4 start invisible and fade in as they
   scroll into view inside the .table-list-scroll container (driven by JS
   IntersectionObserver in script.js). */
.table-list-item.is-lazy {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.table-list-item.is-lazy.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Practice Areas (2-column layout) — collapse adjacent padding
   When two .home-2col-section blocks stack, the bottom padding of the
   first + top padding of the second would visually double. Zero out
   the top padding when preceded by another Practice Area section.
   ============================================================ */
.home-2col-section + .home-2col-section .home-2col-content {
    padding-top: 0 !important;
}

/* ============================================================
   Hero section
   ============================================================ */
.home-hero-sec {
    min-height: 50vh;
}

/* Cascade hero min-height to inner columns so percentage-height children compute */
@media (min-width: 768px) {
    .home-hero-sec > div,
    .home-hero-sec > div > div {
        min-height: 50vh;
    }
}

/* Mobile: give image columns explicit height so absolutely-positioned <img>
   elements actually have a box to fill (otherwise the column collapses to 0). */
@media (max-width: 767px) {
    /* Hero image column (col-span-2 on desktop, full width on mobile) */
    .home-hero-sec .md\:col-span-2 {
        min-height: 50vh;
        padding-top: 0;
    }
    /* Practice areas image cell (the "mobile-none" class is just a hook here) */
    .home-2col-section .mobile-none {
        min-height: 30vh;
        height: 30vh;
        display: block;
        /* Always render image FIRST on mobile, then text + buttons below.
           Overrides any desktop image_position (left/right) ACF setting. */
        order: -1;
    }
}

/* Giant "coveyLaw" title block */
.coveylaw-banner-titel {
    padding: 1.5rem 1rem;
}
@media (min-width: 768px) {
    .coveylaw-banner-titel {
        padding: 2rem 2rem;
    }
}
.coveylaw-banner-titel p,
.coveylaw-banner-titel h1,
.coveylaw-banner-titel h2 {
    font-family: var(--font-mono);
    color: var(--color-covey-navy);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.04em;
    font-size: clamp(3rem, 9vw, 8rem);
    margin: 0;
    text-transform: lowercase;
}

/* Homepage hero — vector logo (replaces the text wordmark) */
.coveylaw-banner-titel .home-hero-logo {
    display: block;
    width: clamp(280px, 45vw, 720px);
    height: auto;
    margin: 0 auto;
}

/* Content area — heading + body */
.homer_banner_cont {
    gap: 1.25rem;
    justify-content: center !important; /* override the inline `justify-between` */
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.homer_banner_cont h1,
.homer_banner_cont h2,
.homer_banner_cont h3,
.homer_banner_cont h4 {
    font-family: var(--font-mono);
    color: var(--color-covey-navy) !important;
    font-weight: 700 !important;
    line-height: 1.05;
    letter-spacing: -0.015em;
    font-size: clamp(1.75rem, 3.6vw, 3.25rem) !important;
    margin: 0;
    max-width: none;
}
.homer_banner_cont p {
    color: var(--color-covey-navy);
    font-size: clamp(1.05rem, 1.25vw, 1.25rem);
    line-height: 1.55;
    max-width: none;
    margin: 0;
    opacity: 0.85;
}
/* Let the hero text wrapper fill more of the column (was md:w-4/5 = 80%) */
.homer_banner_cont > div {
    width: 100%;
    max-width: none;
}
@media (min-width: 1024px) {
    .homer_banner_cont {
        gap: 1.5rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}