/*
Theme Name:  Jack Flynn
Theme URI:   https://clickuplocal.com
Author:      ClickUpLocal
Author URI:  https://clickuplocal.com
Description: Per-client child theme for Jack Flynn / Fairway Independent Mortgage, built on the ClickUpLocal parent. Brand tokens match Fairway's corporate palette so the starting look matches the reference Fairway site; customize further here as Jack's own content and design direction come in.
Version:     1.0.0
Template:    clickuplocal
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clickuplocal-jackflynn
*/

/* =============================================================================
   PER-CLIENT CUSTOMIZATION
   -----------------------------------------------------------------------------
   RULE 1: NEVER edit the parent theme (clickuplocal) or the plugin on a client
   site. They are shared product code, updated centrally across every client.

   RULE 2: never copy a parent template (header.php, single-event.php, etc.) into
   this child. Keep this child to CSS (+ at most one truly-bespoke template).
   ========================================================================== */

:root {
    /* Patriotic red/white/blue (Derek, 2026-08-20), replacing the Fairway
       navy/green corporate palette. These are the same Old Glory values the
       ClickUpLocal parent ships as its own defaults, so the site now runs
       closer to stock product tokens than it did before. The header logo is
       switched to the white Fairway lockup (brand_logo option) and the
       header bar goes navy, since the green corporate mark clashed against
       this palette and is brand art that can't be recolored. */
    --container:       1280px;  /* ClickUpLocal standard content width (parent default is 1200) */
    --color-primary:   #293A51; /* Old Glory Blue */
    --color-dark:      #293A51; /* footer band */
    --color-accent:    #80C33D; /* Old Glory Red */
    --color-accent-dk: #4A7324; /* deeper red for hover/links */
    /* Real type stack from the reference Fairway site (inspected, not guessed):
       headings = Montserrat 700, body copy = Poppins 400. */
    --font-heading:    "Montserrat", sans-serif;
    --font-body:       "Poppins", sans-serif;

    /* Gradients built from tones already in the palette, not new colors:
       blue bands deepen toward #001B46 (the parent's own --color-hover-dark);
       circles/pills run from a lifted blue into the --color-primary base;
       the CTA gradient runs between the two established red accent tones.
       Applied to every solid blue/red fill site-wide for texture, kept out
       of white/neutral surfaces (cards, panels) by design.

       --jf-green keeps its name only because it is referenced in 9 places
       across this theme; it now holds the RED call-to-action gradient. */
    --jf-navy-band:   linear-gradient(135deg, var(--color-primary) 0%, #001B46 100%);
    --jf-navy-circle: linear-gradient(145deg, #123A7D 0%, var(--color-primary) 100%);
    --jf-green:       linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dk) 100%);
}

/* Body copy baseline from the reference site: Poppins 400 at 20px/30px. The parent
   sets a smaller default, so state it here once and let it cascade. */
body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
}

/* Headings: Montserrat 700 (the parent applies var(--font-heading) already,
   but its weight scale is lighter than Fairway's). */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Fairway's tertiary accent, used sparingly (badges, small highlights) — not a
   parent design token, so applied directly where needed rather than through
   --color-accent (which drives buttons/links site-wide). */
.jf-orange { color: #FF523C; }

/* Every solid green CTA site-wide (header GET STARTED, FAQ card, contact
   form, footer CTA…) gets the same texture as the rest of the page. Hover
   stays the parent's flat --color-accent-dk, which now reads as a "pressed"
   state against the gradient default rather than a plain color swap. */
.button-primary { background: var(--jf-green); }

/* =============================================================================
   "SITE UPDATED, REFRESH" BANNER (logged-in reviewers only)
   Bottom-center so it never covers the header, nav, or hero being reviewed.
   ========================================================================== */
.jf-update-bar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px 12px 18px;
    border-radius: 999px;
    background: var(--jf-navy-band, #293A51);
    color: #fff;
    font-family: var(--font-body, "Poppins"), sans-serif;
    font-size: 16px;
    line-height: 1.3;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    animation: jf-update-in .28s cubic-bezier(.2, .7, .2, 1) both;
}
.jf-update-bar[hidden] { display: none; }
@keyframes jf-update-in {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.jf-update-bar__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent, #80C33D);
    flex-shrink: 0;
    animation: jf-update-pulse 1.8s ease-in-out infinite;
}
@keyframes jf-update-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}
.jf-update-bar__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jf-update-bar__refresh {
    flex-shrink: 0;
    border: 0;
    cursor: pointer;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--jf-green, #80C33D);
    color: var(--color-primary, #293A51);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
}
.jf-update-bar__refresh:hover { filter: brightness(1.06); }
.jf-update-bar__close {
    flex-shrink: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .65);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.jf-update-bar__close:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .jf-update-bar, .jf-update-bar__dot { animation: none; }
}
@media (max-width: 560px) {
    .jf-update-bar { font-size: 16px; padding: 10px 12px 10px 14px; gap: 8px; }
    .jf-update-bar__text { white-space: normal; }
}

/* =============================================================================
   SERVICES PAGE
   Parent ships a 2-column text-heavy card list. Restyled here to 3-across
   (house rule: odd groupings), with the illustration leading each card and
   the whole card behaving as one hover target.
   ========================================================================== */
.post-type-archive-service .services-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 980px) { .post-type-archive-service .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .post-type-archive-service .services-grid { grid-template-columns: 1fr; } }

/* Parent underlines the section head in --cul-blaze (orange); Fairway green. */
.post-type-archive-service .services-section-head {
    border-bottom-color: var(--color-accent, #80C33D);
    font-size: 28px;
}
/* One unnamed "Services" group is just noise above a single grid. */
.post-type-archive-service .services-sections > .services-section:only-child > .services-section-head { display: none; }

.post-type-archive-service .svc-card {
    border-radius: 16px;
    border-color: #e3e8ef;
    box-shadow: 0 6px 24px rgba(19, 41, 75, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.post-type-archive-service .svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(19, 41, 75, .14);
}
/* Illustrations are line art on a light field: contain, not cover, so the
   drawing is never cropped, and no navy backfill behind it. */
.post-type-archive-service .svc-card-img {
    background: #F4F5F6;
    object-fit: contain;
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid #e3e8ef;
}
.post-type-archive-service .svc-card-name {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--color-primary, #293A51);
}
.post-type-archive-service .svc-card-desc { color: #55627a; font-size: 17px; line-height: 1.6; }
.post-type-archive-service .svc-card-body { padding: 26px; gap: 10px; }
.post-type-archive-service .svc-card-foot { padding-top: 16px; }

/* Live still prints this note from its own functions.php, which is the copy
   from before the engine port. The note is gone from the theme here, so this
   rule looks unused locally; it is not, it is what keeps that paragraph from
   rendering as raw full width text on live. Delete it when live moves onto
   Brain Box and stops printing the note. */
.jf-svc-note {
    max-width: 820px;
    margin: 40px auto 0;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: #6b7688;
}

/* =============================================================================
   OFFER PAGE — the VA Playbook lead magnet.

   Redesigned 2026-07-21 to match the site's signature move: a navy band with
   the book straddling the seam into white, the way Jack's photo bridges the
   homepage hero into the FAQ band. The parent styles this hero for a promo
   (navy-to-lime gradient, blaze border, crimson claim button via
   --cul-claim-accent), none of which belongs here.

   The sections below the hero (What's inside / Who wrote this / Closer) are
   appended from functions.php on the get_footer hook — the offer page has no
   FAQs, so that hook fires directly after the hero. No parent template is
   copied (child RULE 2 keeps front-page.php as the only bespoke template).
   ========================================================================== */
.page-template-offer {
    /* Claim button: Fairway green, not the plugin's default crimson. */
    --cul-claim-accent: var(--color-accent-dk, #4A7324);
}
.page-template-offer .offer-landing-hero {
    background: var(--jf-navy-band, #293A51);
    color: #fff;
    border-bottom: 0;
    /* No bottom padding: the book's overhang provides the visual base, and
       any padding here would push the seam below the book and kill it. */
    padding: 72px 0 0;
    overflow: visible;
}
/* Even columns so the book gets real width, and both columns start at the
   same y — the book's top edge lines up with the "Free guide" flag. */
.page-template-offer .offer-landing-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: stretch;
}
.page-template-offer .offer-landing-copy { align-self: start; }
/* Top-aligned so the book's top edge lines up with the "Free guide" flag.
   The negative margin shrinks what this cell contributes to the row height,
   so the image's natural height spills past the navy — that spill IS the
   seam overlap. */
.page-template-offer .offer-landing-photo {
    align-self: start;
    margin-bottom: -140px;
}
.page-template-offer .offer-flag {
    font-size: 0;
    background: var(--jf-green, #80C33D);
    letter-spacing: normal;
}
/* Template hardcodes "Limited Time Offer" — wrong for an evergreen free
   guide. Swapped visually; the flag is decorative beside the <h1>. */
.page-template-offer .offer-flag::before {
    content: "Free guide";
    font-size: 16px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}
.page-template-offer .offer-title {
    font-family: var(--font-heading);
    color: #fff;
    text-shadow: none;
}
.page-template-offer .offer-desc {
    color: rgba(255, 255, 255, .88);
    font-size: 22px;
    line-height: 32px;
    max-width: 34ch;
}
.page-template-offer .offer-when { color: rgba(255, 255, 255, .7); }
/* NATURAL ASPECT — do not force a height here.
   This is a photograph of a book in a room, not a cutout. Forcing a height
   with object-fit:cover stretched and cropped the photo into a tall slab of
   tabletop and blurred sofa with the book buried in it. At its own aspect
   ratio it reads as what it is: a book, presented as a clean photo card. */
.page-template-offer .offer-landing-photo img {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    border: 0;
    background: none;
    border-radius: 14px;
    box-shadow: 0 34px 70px rgba(0, 0, 0, .42);
}
@media (max-width: 880px) {
    /* Single column: book sits under the copy, smaller, gentler overlap. */
    .page-template-offer .offer-landing-photo { margin-bottom: -60px; }
    .page-template-offer .offer-landing-photo img { max-width: 420px; margin: 0 auto; }
}
/* Capture card: white and lifted so the ask is the brightest thing on the
   navy. Parent styles it translucent-white for a dark hero, which reads as a
   grey ghost with pale labels. */
.page-template-offer .offer-landing-hero .cul-claim-card {
    background: #fff;
    border-color: transparent;
    color: var(--color-text, #293A51);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    max-width: 520px;
}
.page-template-offer .offer-landing-hero .cul-claim-heading { color: var(--color-primary, #293A51); }
.page-template-offer .offer-landing-hero .cul-claim-sub { color: #55627a; }
.page-template-offer .offer-landing-hero .cul-claim-fineprint { color: #6b7688; font-size: 16px; }
.page-template-offer .offer-landing-hero .cul-claim-success-title { color: var(--color-primary, #293A51); }
.page-template-offer .offer-landing-hero .cul-claim-success-body { color: #55627a; }

/* ── Appended sections (functions.php) ────────────────────────────────── */
.jf-offer-inside { padding: 190px 0 84px; background: #fff; }
@media (max-width: 880px) { .jf-offer-inside { padding-top: 130px; } }
.jf-eyebrow {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent-dk, #4A7324);
    margin: 0 0 10px;
}
.jf-offer-inside h2 { font-size: clamp(30px, 3.6vw, 42px); margin: 0 0 40px; max-width: 22ch; }
/* Two columns, four items (Derek's call) — gives each line room to breathe
   across the full 1280 instead of three cramped columns. */
.jf-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 56px; }
@media (max-width: 900px) { .jf-checks { grid-template-columns: 1fr; } }
.jf-check { display: flex; gap: 14px; align-items: flex-start; }
.jf-check svg { flex: 0 0 28px; width: 28px; height: 28px; margin-top: 2px; }
.jf-check b { display: block; font-family: var(--font-heading); font-size: 19px; margin-bottom: 4px; }
.jf-check span { font-size: 17px; line-height: 26px; color: #55627a; }

.jf-offer-author { background: #F4F5F6; padding: 72px 0; }
.jf-author-grid { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; }
@media (max-width: 760px) { .jf-author-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.jf-author-photo {
    width: 220px; height: 220px; border-radius: 50%;
    object-fit: cover; object-position: top;
    background: var(--jf-navy-circle);
    box-shadow: 0 16px 40px rgba(19, 41, 75, .22);
}
.jf-offer-author h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 12px; }
.jf-offer-author p { margin: 0 0 22px; font-size: 19px; line-height: 30px; color: #55627a; }
.jf-facts { display: flex; gap: 34px; flex-wrap: wrap; }
@media (max-width: 760px) { .jf-facts { justify-content: center; } }
.jf-fact b { display: block; font-family: var(--font-heading); font-size: 22px; color: var(--color-accent-dk, #4A7324); }
.jf-fact span { font-size: 16px; color: #55627a; }

.jf-offer-closer { padding: 76px 0; text-align: center; background: #fff; }
.jf-offer-closer h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 14px; }
/* Named class, not a generic "> .container > p" descendant selector — that
   selector's specificity (2 classes + 1 tag) was HIGHER than .jf-offer-fine
   (1 class) below and matched it too, since both paragraphs sit at the same
   level. Its margin:0 0 26px (no auto) beat .jf-offer-fine's centering
   margin and won, which is why the fine print rendered flush left instead
   of centered — not an inheritance issue, a specificity collision. */
.jf-offer-lede { margin: 0 0 26px; color: #55627a; font-size: 19px; }
.jf-btn-ghost {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    border: 2px solid var(--color-primary, #293A51);
    color: var(--color-primary, #293A51);
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.jf-btn-ghost:hover { background: var(--jf-navy-band, #293A51); color: #fff; }
.jf-offer-fine { max-width: 760px; margin: 64px auto 0; font-size: 16px; line-height: 26px; color: #6b7688; }

/* =============================================================================
   NEWSLETTER BAND (blog index + single posts, rendered in functions.php)
   Navy band matching the homepage's FAQ section, benefit copy left, form right.
   ========================================================================== */
.jf-news {
    background:
        radial-gradient(circle at 88% 15%, rgba(128, 195, 61, 0.35) 0%, rgba(128, 195, 61, 0) 55%),
        var(--jf-navy-band, #293A51);
    color: #fff;
    padding: 64px 0;
}
.jf-news-inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
}
@media (max-width: 820px) { .jf-news-inner { grid-template-columns: 1fr; gap: 28px; } }
.jf-news-kicker {
    margin: 0 0 8px;
    /* accent-dk, not accent: this is 16px bold on a light ground, which WCAG
       treats as body text (4.5:1). Fairway green is 2.14:1 on white and fails
       badly. Green stays for large display text, icons, borders and navy. */
    color: var(--color-accent-dk, #4A7324);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.jf-news h2 {
    color: #fff;
    margin: 0 0 12px;
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.2;
}
.jf-news-benefit {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 18px;
    line-height: 1.6;
    max-width: 620px;
}
.jf-news-form form { display: flex; gap: 10px; flex-wrap: wrap; }
.jf-news-form input[type="email"] {
    flex: 1 1 220px;
    min-width: 0;
    padding: 14px 16px;
    font-size: 16px;
    font-family: var(--font-body);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.jf-news-form input[type="email"]::placeholder { color: rgba(255, 255, 255, .55); }
.jf-news-form input[type="email"]:focus {
    outline: 2px solid var(--color-accent, #80C33D);
    outline-offset: 2px;
    background: rgba(255, 255, 255, .14);
}
.jf-news-form .button-primary { flex: 0 0 auto; }
.jf-news-fine { margin: 12px 0 0; font-size: 16px; color: rgba(255, 255, 255, .6); }
.jf-news-flash { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.jf-news-flash.ok { color: var(--color-accent, #80C33D); }
.jf-news-flash.err { color: #FF523C; }
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.jf-news-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Hours are blanked in the site-facts filter until Jack confirms them, which
   leaves the parent's "HOURS" heading standing over an empty list. Hide that
   column until real hours exist; it comes back on its own the day they're
   saved in Business Info.

   Two rules, not one, because CSS forbids nesting :has() inside :has() — the
   earlier `:has(.footer-hours:not(:has(li)))` was invalid and silently
   dropped, which is why the empty column kept rendering. `:empty` doesn't
   work either: the parent prints the <ul> across several lines, so it always
   holds whitespace text nodes. So: hide any column containing an hours list,
   then un-hide it when that list actually has an <li>. */
.site-footer .footer-col:has(.footer-hours) { display: none; }
.site-footer .footer-col:has(.footer-hours li) { display: block; }

/* Flex, not grid. With hours hidden there are only two columns left, and any
   fr-based grid gives each one an equal half and centers its content inside
   that half — leaving the two blocks stranded at the quarter marks with a
   dead gap between them. Flex sizes each column to its content and centers
   the group, so the footer stays balanced whether there are two columns or
   three (hours returning changes nothing). */
/* Centered mathematically ≠ looks designed. With only two columns left, the
   parent's generous cross-column gap (meant for a full 3-column spread) read
   as a dead gap between two stranded islands, they didn't line up
   vertically (flex-start left Explore's longer list hanging ~70px lower
   than Contact), and the parent's 72px top padding (--sp-6, sitewide token —
   not touched here) added to the empty feel. Tightened gap, centered the
   pair vertically so both read as one balanced block, and pulled the
   section in closer to the divider above it. */
/* Parent's --sp-6 top padding was sized for a full 3-column footer; with two
   columns the band reads over-tall, so tighten top and bottom together. */
.site-footer { padding-top: 32px; padding-bottom: 16px; }
/* Flat, not the --jf-navy-band gradient.
   That token is a 135deg diagonal. It works on a contained band, but the footer
   and .fw-compliance are SIBLINGS (compliance sits after </footer>), so each one
   started the diagonal over again: a visible smear across the width plus a hard
   horizontal seam where the second gradient restarted lighter than the first
   ended. Two stacked full-width siblings cannot share one gradient, so both are
   flat and they now read as a single navy block. */
.site-footer { background: var(--color-dark, #293A51); }
/* Layout itself is defined once, further down, with the editorial-split
   grid. This rule only clears the parent's borders/padding. */
.site-footer .footer-grid {
    /* Divider removed: the grid's own bottom border plus the compliance
       bar's top border stacked into two lines a few pixels apart. One
       separator (added on .fw-compliance below) is enough. */
    border-bottom: 0;
    padding-bottom: 0;
    padding-top: 8px;
}
.site-footer .footer-hours li { gap: 8px; }
/* Small green accent under each column heading — the same "brand underline"
   language used on the Services page section heads, so the footer reads as
   designed rather than plain uppercase labels floating in navy. */
.site-footer .footer-col h4 {
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-accent, #80C33D);
    margin-bottom: 16px;
}
/* "Editorial split" footer (Derek picked this over a compact bar and a
   centered stack, 2026-08-20): brand + contact on the left, the Get-in-touch
   CTA as a bordered card on the right. Left-aligned throughout so the whole
   band lines up with the compliance block directly beneath it, and the two
   halves fill the container instead of shrinking toward the middle. */
.site-footer .footer-grid {
    display: grid;
    /* Three across (house rule: 3 or 5, never 2 or 4): brand and contact,
       then hours, then the Get in touch card that functions.php appends.
       The card was landing on a second row because this grid only declared
       two tracks. Top aligned so the three column headings share a line. */
    grid-template-columns: 1.15fr 0.8fr 1fr;
    gap: 44px;
    align-items: start;
    text-align: left;
}
.site-footer .footer-col { min-width: 0; }
.site-footer .footer-logo-img { margin: 0 0 20px; }
.site-footer .footer-social { justify-content: flex-start; }
.site-footer .footer-hours li { justify-content: flex-start; }
/* The "Contact" heading + its green rule are redundant once this column is
   the only contact content and sits under the brand lockup. */
.site-footer .footer-contact h4 { display: none; }
.site-footer .footer-contact .footer-phone { font-size: 20px; }

/* Get-in-touch card, injected client-side (see functions.php). */
.jf-footer-touch {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 28px 30px;
}
.jf-footer-touch h4 { display: none; }
.jf-footer-touch-title {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 21px;
    line-height: 1.25;
    margin: 0 0 8px;
}
.jf-footer-touch-sub { margin: 0 0 18px; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.5; max-width: none; }
.jf-footer-touch .button-primary { display: inline-block; }

@media (max-width: 1080px) {
    .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 820px) {
    .site-footer .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Copyright / Privacy / Terms / login are re-rendered at the BOTTOM of the
   compliance bar (see jackflynn_compliance_bar) so they close out the page.
   Hide the parent's copy rather than editing the parent template. */
.site-footer .footer-disclosures { display: none; }

/* Mortgage compliance disclosure bar (rendered via wp_footer in functions.php).
   Structure mirrors the reference Fairway build; Jack's own NMLS/license numbers are
   placeholders below until he supplies them, do not treat as final. */
.fw-compliance {
    /* Matches .site-footer exactly, see the note there. */
    background: var(--color-dark, #293A51);
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-body, "Poppins"), sans-serif;
    /* Jack asked for the legal boilerplate below to read as true fine print;
       .fw-compliance__eho keeps the 16px floor, the legal/links/copyright
       lines below are explicitly sized down from it (see those rules). */
    font-size: 16px;
    line-height: 1.6;
    /* Horizontal padding moved to __inner so the block shares the exact box
       model as .container above it. The old 20px here sat OUTSIDE the 1280px
       inner, so the legal text aligned to the container's border edge while
       the logo, phone and address aligned to its content edge — a 24px step
       between the two halves of the same footer. */
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fw-compliance__inner {
    max-width: 1280px; /* house standard — was 1100px, narrower than every other section */
    margin: 0 auto;
    /* Matches .container exactly (1280px + 24px gutters) so every left-aligned
       item in the footer shares one left edge. */
    padding-left: 24px;
    padding-right: 24px;
    /* Left-aligned throughout (EHO line included) so it reads as one
       consistently-aligned block with the two legal columns below it,
       instead of a centered banner sitting on top of left-aligned text. */
    text-align: left;
}

/* =============================================================================
   SINGLE BLOG POST — body copy width
   The parent's single.php caps .post-content at 760px via an INLINE <style>
   block in the template body (not its main.css), while the post's own hero
   image/title correctly spans the full 1280 container above it — so every
   post reads as a wide hero sitting over a much narrower, left-adrift text
   column. That inline block is both parent-owned (can't edit it, RULE 1) and
   rendered AFTER this stylesheet in document order, so an equal-specificity
   override here would lose on source order alone. "body.single-post" adds
   one extra type selector, which is genuinely higher specificity (not just
   later in the cascade) and wins regardless of load order. body_class()
   already puts "single-post" on <body> for every single post, so this needs
   no markup change.
   ========================================================================== */
body.single-post .post-content {
    max-width: 1280px;
}
/* margin-top/bottom only — NOT the "margin: 0 0 8px" shorthand that was here.
   That 3-value form also zeroes left/right on every <p> in this block,
   which silently overrode .fw-compliance__legal's margin:auto centering
   (a class+tag selector outranks a single class no matter source order) and
   left that whole paragraph sitting flush-left instead of centered. */
.fw-compliance__inner p { margin-top: 0; margin-bottom: 8px; }
.fw-compliance__inner p:last-child { margin-bottom: 0; }
.fw-compliance__eho { font-size: 16px; color: #fff; }
.fw-compliance__eho-icon {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    margin-right: 4px;
    vertical-align: -1px;
}
/* Two labeled columns (Entity/Licensing, Customer Service/Reporting) instead
   of two unlabeled flowing paragraphs — easier to scan for the one line you
   actually need. Left-aligned within each column; the grid itself stays
   centered as a block via .fw-compliance__inner. */
.fw-compliance__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
    /* No max-width/auto-margin of its own — inherits the exact same left
       edge as .fw-compliance__inner (and the EHO line above it) instead of
       centering itself narrower inside that container and drifting right. */
    margin: 0 0 8px;
    text-align: left;
}
.fw-compliance__col-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e2e8f0;
    margin: 0 0 6px;
}
.fw-compliance__legal { font-size: 13px; margin: 0; }
.fw-compliance__legal a { color: inherit; text-decoration: underline; }
.fw-compliance__legal a:hover { color: #fff; }
@media (max-width: 700px) {
    .fw-compliance__cols { grid-template-columns: 1fr; text-align: center; }
}

/* Bottom bar: copyright left, legal page links right, separated from the
   two-column block above by its own divider. */
.fw-compliance__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    /* Same full-width rationale as .fw-compliance__cols above — stay flush
       with the container's real left/right edges, not a narrower centered
       box that drifts the copyright line inward. */
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fw-compliance__copyright { color: rgba(255, 255, 255, 0.5); font-size: 13px; margin: 0; }
.fw-compliance__copyright a { color: var(--jf-green, #80C33D); }
.fw-compliance__bottom-links { font-size: 13px; margin: 0; }
.fw-compliance__bottom-links a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.fw-compliance__bottom-links a:hover { border-bottom-color: #fff; }
@media (max-width: 700px) {
    .fw-compliance__bottom { justify-content: center; text-align: center; }
}

/* =============================================================================
   NAVY HEADER BAR (patriotic overhaul, 2026-08-20)
   The header logo is now the WHITE Fairway lockup, which is invisible on the
   parent's white header — so the bar itself goes Old Glory Blue and the nav
   links flip to white. Red is reserved for the CTA button so it stays the
   single loudest thing in the bar.
   ========================================================================== */
.site-header {
    /* Flat, not --jf-navy-band. That token is a 135deg diagonal, and on a bar
       this wide and short it renders as a streak: visibly lighter at the left
       edge than the right, which reads as a rendering fault rather than
       texture. Same fix as the footer. */
    background: var(--color-dark, #293A51);
    border-bottom: 3px solid var(--color-accent, #80C33D);

    /* Not sticky. The parent sets position:sticky;top:0 and nothing overrode it
       here, so the bar was pinned on every page. House rule is that the header
       scrolls away with the page. */
    position: static;
}

/* The logo was 75px inside a bar with only 10px of padding, so it filled 79%
   of the height and sat almost edge to edge. Giving the bar more vertical room
   and easing the lockup down lets it breathe without shrinking it so far that
   the "HeroesWayHome.com" line stops being legible. */
.site-header .site-header-inner {
    padding-top: 18px;
    padding-bottom: 18px;
}
.site-header #primary-menu > li > a { color: #fff; }
.site-header #primary-menu > li > a:hover { color: var(--color-accent, #80C33D); text-decoration: none; }
/* CTA keeps the red gradient and white label against the navy bar. */
.site-header #primary-menu > li.cta > a { color: #fff; }
.site-header .nav-more-btn { color: #fff; }
/* The "More" overflow menu is a white panel, so its links stay dark. */
.site-header .nav-more-menu a { color: var(--color-primary, #293A51); }
/* The "More" panel hung open whenever it appeared (about 1024px wide). Parent
   main.css hides it with .nav-more-menu{display:none} (0,1,0), but its own
   .primary-nav ul{display:flex} (0,1,1) matches the same element and wins.
   This outranks both and leaves the parent's .is-open rule to show it. */
.primary-nav .nav-more:not(.is-open) .nav-more-menu { display: none; }
/* Mobile menu toggle lines. */
.site-header .menu-toggle span,
.site-header .menu-toggle::before,
.site-header .menu-toggle::after { background: #fff; }

/* Owner studio bar: hide the "Edit page"/context-action button and the "View
   as visitor" toggle for this site. Hidden here (child CSS) rather than
   removed in the shared plugin's studiobar.php, so every other client site
   keeps the full owner toolbar. */
.cul-adminbar__spacer ~ .cul-adminbar__link,
.cul-adminbar__visitor { display: none !important; }

/* Blog post hero: parent's single.php sets this in an inline <style> block
   rendered after this stylesheet in document order, so an equal-specificity
   override here would lose on source order alone (same issue as the
   .post-content width fix above). "body.single-post" adds one extra type
   selector, which wins regardless of load order. Taller image + centered
   title/date instead of the parent's bottom-left default. */
body.single-post .post-hero-image { min-height: min(78vh, 680px); align-items: center; }
body.single-post .post-hero-image > .container { text-align: center; }
body.single-post .post-hero-image h1 { margin-left: auto; margin-right: auto; }