/*
 ============================================================
 OUTSHINE — BLF  |  css/client.css  |  CLIENT-SPECIFIC SECTIONS
 ============================================================
 The Betz Law Firm  |  St. Louis, MO  |  family law, divorce-focused
 Everything here is BLF-only. Shared components live in base.css
 and are not redefined here. Colors and fonts are tokens from style.css.

 Conventions
 - Prefix BLF-only classes with .os-blf- so they are obvious in markup.
 - To vary a base component, add a modifier class (.os-hero--blf) or a
   page wrapper class, never edit base.css.
 - Page sections below are scaffolded in priority order (Pillar 1 divorce
   intent first). Fill each as the page is built; delete any block that
   ends up unused.
 - Copy compliance lives in the content, not here, but no component in
   this file may imply outcomes (no "win" badges, no ranking stars other
   than the Google aggregate).

 TABLE OF CONTENTS
  1.  BRAND: wordmark logo sizing
  2.  SHARED BLF PATTERNS (consultation callout, attorney profile card,
      MO-law note, disclaimer line)
  3.  HOME (Pillar 1: St. Louis divorce intent)
  4.  /st-louis-divorce-lawyers
  5.  /st-louis-uncontested-divorce-lawyer
  6.  /st-louis-name-change-lawyer (Missouri-framed conversion asset)
  7.  /st-louis-custody-lawyers (custody, parenting plans, parenting time)
  8.  /st-louis-mediation
  9.  /st-louis-legal-separation-lawyer
 10.  /st-louis-spousal-support-lawyer
 11.  /st-louis-child-support-lawyer
 12.  /st-louis-paternity-lawyer
 13.  /st-louis-relocation-lawyer
 14.  /st-louis-contempt-of-court-lawyer
 15.  /st-louis-temporary-restraining-order-lawyer
 16.  /st-louis-emancipation-lawyer
 17.  /firm-profile
 18.  /contact
 19.  BLOG (single post + category archive)
 ============================================================
*/

/* ============================================================
   1. BRAND — horizontal wordmark, standard height
   ============================================================ */
.site-logo img { height: 56px; width: auto; }
@media (max-width: 768px) { .site-logo img { height: 48px; } }
@media (max-width: 480px) { .site-logo img { height: 40px; } }
.os-footer__logo img { max-width: 180px; }

/* ============================================================
   2. SHARED BLF PATTERNS
   ============================================================ */
/* Confidential consultation callout. Pairs the phone and form CTAs in one
   quiet band. Used near the top of every service page (CTA-first house style). */
.os-blf-consult {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
    background: var(--os-surface);
    border-left: 4px solid var(--os-brand-2);
    border-radius: var(--os-radius);
    padding: 20px 24px;
    margin: 28px 0;
}
.os-blf-consult p { margin: 0; font-size: 1rem; color: var(--os-ink); }
.os-blf-consult strong { color: var(--os-brand); }
.os-blf-consult__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Attorney profile card (David S. Betz on home and firm-profile). Photo left,
   credentials right. Credentials are facts only: bar admission, founded 2012. */
.os-blf-attorney {
    display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start;
    background: var(--os-chrome);
    border: 1px solid var(--os-line);
    border-radius: var(--os-radius);
    padding: 24px;
    margin: 32px 0;
}
.os-blf-attorney img { width: 100%; height: auto; border-radius: var(--os-radius); display: block; }
.os-blf-attorney h3 { margin: 0 0 4px; font-size: 1.5rem; }
.os-blf-attorney__role { font-family: var(--os-font-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--os-brand-2-hover); margin: 0 0 12px; display: block; }
.os-blf-attorney p { margin: 0 0 10px; }
.os-blf-attorney ul { margin: 12px 0 0; padding-left: 18px; color: var(--os-muted); font-size: 0.95rem; }
@media (max-width: 680px) {
    .os-blf-attorney { grid-template-columns: 1fr; }
    .os-blf-attorney img { max-width: 220px; }
}

/* Missouri-law note. For statute references and "in Missouri, courts..."
   context blocks. Informational tone, never a promise. */
.os-blf-mo-note {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--os-surface-2);
    border-radius: var(--os-radius);
    padding: 16px 18px;
    margin: 24px 0;
    font-size: 15px; line-height: 1.55; color: var(--os-ink);
}
.os-blf-mo-note svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--os-brand); margin-top: 2px; }
.os-blf-mo-note strong { color: var(--os-brand); }

/* Page-level disclaimer line (the "general information, not legal advice"
   note that closes every service page). */
.os-blf-disclaimer { font-size: 13px; color: var(--os-muted); font-style: italic; margin: 32px 0 0; }

/* ============================================================
   3. HOME (Pillar 1: St. Louis divorce intent)
   ============================================================ */


/* ============================================================
   4. /st-louis-divorce-lawyers (Pillar 1 supporting page)
   ============================================================ */


/* ============================================================
   5. /st-louis-uncontested-divorce-lawyer (Pillar 2)
   ============================================================ */


/* ============================================================
   6. /st-louis-name-change-lawyer (Pillar 3, Missouri-framed, cost/process intent)
   ============================================================ */


/* ============================================================
   7. /st-louis-custody-lawyers (Pillar 4: custody, parenting plans, parenting time)
   ============================================================ */


/* ============================================================
   8. /st-louis-mediation (weakest pillar, supportive)
   ============================================================ */


/* ============================================================
   9. /st-louis-legal-separation-lawyer
   ============================================================ */


/* ============================================================
   10. /st-louis-spousal-support-lawyer
   ============================================================ */


/* ============================================================
   11. /st-louis-child-support-lawyer (never lead with this)
   ============================================================ */


/* ============================================================
   12. /st-louis-paternity-lawyer
   ============================================================ */


/* ============================================================
   13. /st-louis-relocation-lawyer
   ============================================================ */


/* ============================================================
   14. /st-louis-contempt-of-court-lawyer
   ============================================================ */


/* ============================================================
   15. /st-louis-temporary-restraining-order-lawyer
   ============================================================ */


/* ============================================================
   16. /st-louis-emancipation-lawyer
   ============================================================ */


/* ============================================================
   17. /firm-profile (About Us)
   ============================================================ */


/* ============================================================
   18. /contact
   ============================================================ */


/* ============================================================
   19. BLOG (single post + /category/blog/)
   ============================================================ */


/* ---- end client.css ---- */

/* ---- HOME (appended 2026-10-08) ---- */
.os-hero--photo .os-hero__photo img { object-position: center top; }
.os-promise a { color: var(--os-brand-2); text-decoration: underline; text-underline-offset: 3px; }
.os-promise a:hover { color: var(--os-on-dark); }
.os-final-cta .os-blf-disclaimer { margin-top: 28px; color: var(--os-cta-band-text); opacity: 0.8; }

/* ---- FOOTER + HEADER (appended 2026-10-08) ---- */
.os-footer__legal { font-size: 12.5px; line-height: 1.6; color: var(--os-on-dark-faint); margin: 0 0 28px; max-width: 980px; }
.os-footer__search { display: flex; gap: 0; margin: 0 0 16px; }
.os-footer__search input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 14px; background: rgba(255,255,255,0.06); border: 1px solid var(--os-on-dark-line); border-right: 0; color: var(--os-on-dark); border-radius: var(--os-radius) 0 0 var(--os-radius); }
.os-footer__search input::placeholder { color: var(--os-on-dark-faint); }
.os-footer__search button { padding: 0 14px; background: var(--os-brand-2); color: var(--os-brand-2-text); border: 0; border-radius: 0 var(--os-radius) var(--os-radius) 0; cursor: pointer; display: inline-flex; align-items: center; }
.os-footer__search button:hover { background: var(--os-brand-2-hover); }
.os-footer__col--guides a { line-height: 1.4; display: inline-block; }

/* ---- HEADER CTA FIT (appended 2026-10-08): 6 nav items + CTA must hold one row at desktop ---- */
@media (max-width: 1500px) {
    .os-header-cta__phone-text { display: none; }
    .os-header-cta__phone-icon { width: 40px; height: 40px; }
    .main-navigation .main-nav ul li a { padding: 10px 11px; }
}

/* ---- HEADER FIT 2 (appended 2026-10-08) ---- */
/* Desktop under 1500px: button-only CTA (phone lives in hero, footer, and the mobile bar); the nav row is 940px */
@media (min-width: 769px) and (max-width: 1500px) {
    .os-header-cta__phone { display: none !important; }
    .os-header-cta { margin-left: 10px; }
}
/* GP search modal trigger is off in the Customizer; this guards the render until the setting is confirmed */
.menu-bar-item:has(> a[data-gpmodal-trigger="gp-search"]) { display: none; }

/* ---- HEADER FIT 3 (appended 2026-10-08): six items + button on one 940px row ---- */
@media (min-width: 769px) {
    .main-navigation .inside-navigation { flex-wrap: nowrap; }
    .main-navigation .main-nav ul li a { font-size: 13px; padding: 10px 9px; letter-spacing: 0.05em; }
    .main-navigation .main-nav ul li.menu-item-has-children > a { padding-right: 20px; }
    .os-header-cta { margin-left: 8px; }
    .os-header-cta__btn { padding: 11px 14px; font-size: 12px; white-space: nowrap; }
}

/* ---- NAV BELOW HEADER (BLF variant, 2026-10-08). Scoped to GP's body class; releases the HEADER FIT rules above ---- */
body.nav-below-header .site-header { padding: 14px 0; border-bottom: 1px solid var(--os-line); }
body.nav-below-header .inside-header > .os-header-cta { margin-left: auto; gap: 18px; }
body.nav-below-header .os-header-cta__phone { display: inline-flex !important; }
body.nav-below-header .os-header-cta__btn { padding: 13px 20px; font-size: 13px; }
body.nav-below-header .main-navigation { margin-left: 0; background: var(--os-brand); }
body.nav-below-header .main-navigation .inside-navigation { max-width: var(--os-wrap); margin-inline: auto; padding-inline: var(--os-gutter); flex-wrap: nowrap; }
body.nav-below-header .inside-navigation > .main-nav, body.nav-below-header .inside-navigation > #primary-menu { margin-left: 0 !important; } /* #primary-menu: base.css targets the ID, so the class-only override loses on specificity (2026-10-08) */
body.nav-below-header .main-navigation .main-nav > ul { gap: 2px; }
body.nav-below-header .main-navigation .main-nav ul li a { color: var(--os-on-dark); font-size: 13.5px; padding: 19px 16px; letter-spacing: 0.06em; }
body.nav-below-header .main-navigation .main-nav ul li a::after { left: 16px; right: 16px; bottom: 10px; }
body.nav-below-header .main-navigation .main-nav ul li:hover > a,
body.nav-below-header .main-navigation .main-nav ul li:focus-within > a,
body.nav-below-header .main-navigation .main-nav ul li.current-menu-item > a { color: var(--os-brand-2); }
body.nav-below-header .main-navigation ul ul { background: var(--os-brand); border-color: rgba(255,255,255,0.14); box-shadow: 0 16px 32px rgba(0,0,0,0.25); }
body.nav-below-header .main-navigation ul ul li a { color: var(--os-on-dark) !important; padding: 11px 18px !important; }
body.nav-below-header .main-navigation ul ul li a:hover { color: var(--os-brand-2) !important; background: rgba(255,255,255,0.06); }
body.nav-below-header .main-navigation .menu-toggle,
body.nav-below-header .main-navigation .menu-toggle:hover { color: var(--os-on-dark); background: transparent; }
@media (min-width: 769px) and (max-width: 1500px) {
    body.nav-below-header .os-header-cta__phone-text { display: block; }
}
@media (max-width: 1180px) {
    body.nav-below-header .main-navigation .main-nav ul li a { padding: 17px 12px; font-size: 13px; }
}
@media (max-width: 768px) {
    body.nav-below-header .os-header-cta__phone-text { display: none; }
    body.nav-below-header .os-header-cta__btn { padding: 10px 12px; font-size: 11px; }
}

/* ---- FIXES 2026-10-08: dark-band body text, hero photo edge ---- */
.os-promise p, .os-promise li { color: var(--os-on-dark-soft); }
.os-promise .os-sub { color: var(--os-on-dark-muted); }
.os-hero--photo .os-hero__photo::before { display: none; }

/* ---- HEADER LOGO (2026-10-08): 2:1 badge logo needs height to anchor the row ---- */
body.nav-below-header .site-header { padding: 10px 0; }
body.nav-below-header .site-logo img { height: 84px; width: auto; }
body.nav-below-header .inside-header { align-items: center; }
@media (max-width: 768px) { body.nav-below-header .site-logo img { height: 56px; } }

/* ---- UTILITY BAR + HEADER ROOM (2026-10-08) ---- */
.os-util-bar { background: var(--os-brand-3); }
.os-util-bar__item svg { color: var(--os-brand-2); opacity: 1; }
body.nav-below-header .site-header { padding: 18px 0; }
@media (max-width: 768px) { .os-util-bar__right { display: none; } .os-util-bar { font-size: 12.5px; } }

/* ---- SHARED: two-column prose grids on interior pages (2026-10-08) ----
   .os-area-grid centers its columns (built for photo + copy). Prose-only
   pairs (property page, hub) need top alignment so h3s line up. */
.os-area-grid.os-blf-cols { align-items: start; }

/* ---- /family-law-practice-areas hub: 3-up card grids (5 and 6 cards wrap as 3+2 / 3+3 instead of 4+1 / 4+2) ---- */
.os-blf-hub .os-service-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .os-blf-hub .os-service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .os-blf-hub .os-service-grid { grid-template-columns: 1fr; } }

/* ---- 19. BLOG CONTEXTS (ported from HLF 4.0.6 s.42, 2026-10-08) ----
   base.css zeroes .inside-article padding so pages run full-bleed bands.
   Posts, the posts page, archives and search use GP's default article layout
   and inherit that zeroing; restore it on blog body classes only. Titles come
   from GP (base.css hides .entry-header on body.page only, HLF rule). */
.single-post .inside-article,
.blog .inside-article,
.archive .inside-article,
.search-results .inside-article { padding: 48px 56px 56px; }
.single-post .site-main,
.blog .site-main,
.archive .site-main,
.search-results .site-main { padding-top: 32px; padding-bottom: 64px; }
.single-post .entry-title { font-family: var(--os-font-display); font-weight: var(--os-display-weight); font-size: clamp(32px, 4vw, 48px); line-height: 1.15; color: var(--os-ink); margin: 0 0 16px; }
.blog .entry-title, .archive .entry-title { font-family: var(--os-font-display); font-weight: var(--os-display-weight); font-size: 24px; line-height: 1.2; margin: 0 0 12px; }
.blog .entry-title a, .archive .entry-title a { color: var(--os-brand); text-decoration: none; }
@media (max-width: 768px) {
  .single-post .inside-article, .blog .inside-article, .archive .inside-article, .search-results .inside-article { padding: 28px 20px 32px; }
  .single-post .site-main, .blog .site-main, .archive .site-main, .search-results .site-main { padding-top: 16px; padding-bottom: 40px; }
}

/* 20. Contact page (17): Forminator form lives in the hero photo slot. Base hides .os-hero__photo on small screens and paints an ink gradient over it on desktop; this scoped block turns the slot into a white form card at every width. */
.os-blf-contact-hero .os-hero__photo{display:block;overflow:visible;min-height:0;background:#fff;color:var(--os-ink);padding:1.5rem;border-radius:4px;box-shadow:0 12px 32px rgba(0,0,0,.2)}
.os-blf-contact-hero .os-hero__photo::before{display:none}
.os-blf-contact-hero .os-hero__photo h2{margin:0 0 .75rem;font-size:1.4rem;color:var(--os-ink)}
.os-blf-contact-hero .os-blf-contact-form .forminator-row{margin-left:0;margin-right:0}
.os-blf-contact-hero .os-blf-disclaimer{margin:1rem 0 0;color:var(--os-muted)}
.os-blf-contact-hero .os-blf-contact-nap{margin-top:1.25rem;opacity:.9}
@media (max-width: 900px){.os-blf-contact-hero .os-hero__photo{margin:0 16px 24px}}
.os-blf-contact-hero .os-hero__grid{gap:2.5rem;align-items:center}
@media (min-width: 901px){.os-blf-contact-hero .os-hero__photo{margin:2.5rem 0}}
/* Links inside the dark .os-area band (office section on Contact) were brand-navy on navy; amber with underline. */
.os-area p a{color:var(--os-brand-2);text-decoration:underline;text-underline-offset:3px}
.os-area p a:hover{color:var(--os-on-dark)}
/* 21. Comments are closed sitewide (functions.php s.13); posts with legacy comments still printed the GP comments block and its "Comments are closed." line. Hide the block. */
.comments-area{display:none}
.site-main > article{margin-bottom:0}
/* 22. Forminator pre-init reveal (mobile performance standard): the form paints on frame one and never depends on delayed JS; self-disarms once Forminator adds .forminator-initialized. */
form.forminator-custom-form:not(.forminator-initialized){display:block!important}
/* 20b. Contact hero form card: paragraphs inside the card inherit the hero on-dark color (base .os-hero p), which made the consent sentence white on white. */
.os-blf-contact-hero .os-hero__photo p,.os-blf-contact-hero .os-hero__photo .forminator-consent__label p{color:var(--os-ink)}
.os-blf-contact-hero .os-hero__photo p.os-blf-disclaimer{color:var(--os-muted)}