/**
 * Index chrome — header, footer, CTA band.
 * Ported from wp-content/index.html so the theme's global chrome matches the
 * GSVMC index design (teal + gold + paper, viewfinder motif, 2px corners).
 * Enqueued LAST so it wins over the legacy ConvertSite header/footer CSS.
 */

/* ==========================================================================
   Shared wrap
   ========================================================================== */
.lp-wrap {
    max-width: var(--maxw, 1180px);
    margin: 0 auto;
    padding: 0 20px;
}
@media (min-width: 720px) {
    .lp-wrap { padding: 0 40px; }
}

/* ==========================================================================
   Page canvas — match index.html (paper background, ink text)
   ========================================================================== */
body.lp-ux-modern {
    background: var(--paper);
    color: var(--ink);
}

/* ==========================================================================
   Announcement bar (optional)
   ========================================================================== */
.lp-announce {
    background: var(--teal-deep);
    color: rgba(245, 247, 246, 0.85);
    font-size: 0.78rem;
    text-align: center;
}
.lp-announce .lp-wrap { padding-top: 8px; padding-bottom: 8px; }
.lp-announce a { color: var(--magenta-light); }

/* ==========================================================================
   Header
   ========================================================================== */
.lp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(245, 247, 246, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
/* Logged-in: stick below the fixed WP admin bar instead of under it. */
body.admin-bar .lp-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .lp-header { top: 46px; }
}
@media screen and (max-width: 600px) {
    /* The admin bar scrolls away (position: absolute) at this width. */
    body.admin-bar .lp-header { top: 0; }
}
.lp-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

/* Logo mark */
.lp-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--headings-font);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--ink);
}
.lp-logo img { max-height: 42px; width: auto; }
.lp-logo .ap {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.lp-logo .ap::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--magenta);
    border-radius: 50%;
}
.lp-logo small {
    display: block;
    font-family: var(--body-font);
    font-weight: 500;
    font-size: 0.62rem;
    color: var(--ink-soft);
    letter-spacing: 0.03em;
}

/* Desktop nav */
.lp-desktop-nav { display: none; }
@media (min-width: 960px) {
    .lp-desktop-nav {
        display: flex;
        gap: 28px;
        font-size: 0.92rem;
        font-weight: 500;
    }
    .lp-desktop-nav > ul {
        display: flex;
        gap: 28px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .lp-desktop-nav a {
        position: relative;
        padding: 4px 0;
        color: var(--ink);
    }
    .lp-desktop-nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 0;
        background: var(--magenta);
        transition: width 0.25s ease;
    }
    .lp-desktop-nav > ul > li > a:hover::after,
    .lp-desktop-nav .current-menu-item > a::after {
        width: 100%;
    }

    /* Parent items anchor their dropdown */
    .lp-desktop-nav li { position: relative; }

    /* Dropdown panel (new design format: paper, gold top rule, 2px corners) */
    .lp-desktop-nav .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        display: block;
        min-width: 216px;
        margin: 0;
        padding: 6px 0;
        list-style: none;
        background: var(--paper);
        border: 1px solid var(--line);
        border-top: 2px solid var(--magenta);
        box-shadow: 0 12px 34px rgba(10, 31, 30, 0.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        z-index: 60;
    }
    .lp-desktop-nav li:hover > .sub-menu,
    .lp-desktop-nav li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .lp-desktop-nav .sub-menu li { border: 0; }
    .lp-desktop-nav .sub-menu a {
        display: block;
        padding: 9px 18px;
        font-size: 0.86rem;
        font-weight: 500;
        white-space: nowrap;
        color: var(--ink);
    }
    .lp-desktop-nav .sub-menu a::after { display: none; }
    .lp-desktop-nav .sub-menu a:hover {
        background: var(--paper-dim);
        color: var(--teal);
    }
    /* Third-level flyout to the side */
    .lp-desktop-nav .sub-menu .sub-menu {
        top: -8px;
        left: 100%;
    }
    /* Caret rotates when its dropdown is open */
    .lp-desktop-nav li:hover > a .lp-nav-caret { transform: rotate(180deg); }
}

/* Nav caret (added by Lenspo_Submenu_Arrow_Walker on parent items) */
.lp-nav-caret {
    font-size: 0.7em;
    margin-left: 4px;
    transition: transform 0.2s ease;
    display: inline-block;
}

.lp-nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-nav-cta { display: none; }
@media (min-width: 960px) {
    .lp-nav-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--teal);
        color: var(--paper);
        padding: 10px 20px;
        font-size: 0.85rem;
        font-weight: 600;
        border: 1px solid var(--teal);
        transition: background 0.2s ease;
    }
    .lp-nav-cta:hover { background: var(--teal-deep); color: var(--paper); }
}

/* Burger */
.lp-burger {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
}
@media (min-width: 960px) { .lp-burger { display: none; } }
.lp-burger span {
    width: 18px;
    height: 2px;
    background: var(--ink);
    display: block;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.lp-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-burger.open span:nth-child(2) { opacity: 0; }
.lp-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile dropdown menu */
.lp-mobile-menu {
    max-height: 0;
    overflow: hidden;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transition: max-height 0.35s ease;
}
.lp-mobile-menu.open {
    max-height: 80vh;
    overflow-y: auto;
}
.lp-mobile-menu ul {
    padding: 8px 20px 20px;
    margin: 0;
    list-style: none;
}
.lp-mobile-menu li { border-bottom: 1px solid var(--line); }
.lp-mobile-menu a {
    display: block;
    padding: 14px 4px;
    font-weight: 500;
    color: var(--ink);
}
/* Nested items: indented with a gold guide rule */
.lp-mobile-menu .sub-menu {
    padding: 0 0 0 14px;
    margin: 0 0 0 4px;
    border-left: 2px solid var(--paper-dim);
}
.lp-mobile-menu .sub-menu li:last-child { border-bottom: 0; }
.lp-mobile-menu .sub-menu a {
    padding: 11px 4px;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.lp-mobile-menu .lp-nav-caret { color: var(--magenta); }
@media (min-width: 960px) { .lp-mobile-menu { display: none; } }

/* ==========================================================================
   CTA band (before footer)
   ========================================================================== */
.lp-cta-band {
    background: var(--teal);
    color: var(--paper);
    padding: 52px 0;
    text-align: center;
}
.lp-cta-band h2 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    max-width: 20ch;
    margin: 0 auto;
    color: var(--paper);
}
.lp-cta-band p {
    margin-top: 14px;
    color: rgba(245, 247, 246, 0.85);
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}
.lp-cta-actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
/* The band is teal, so .lp-btn-dark (also teal) rendered teal-on-teal and was
   effectively invisible. On this band the primary action is gold — matching the
   hero and every other .lp-on-dark CTA — with a light ghost beside it. */
.lp-cta-band .lp-btn-dark,
.lp-cta-band .lp-btn-primary {
    background: var(--magenta) !important;
    border-color: var(--magenta) !important;
    color: var(--teal-deep) !important;
}
.lp-cta-band .lp-btn-dark:hover,
.lp-cta-band .lp-btn-primary:hover {
    background: var(--magenta-deep) !important;
    border-color: var(--magenta-deep) !important;
    color: var(--teal-deep) !important;
}
.lp-cta-band .lp-btn-ghost {
    background: transparent !important;
    border-color: rgba(245, 247, 246, 0.55) !important;
    color: var(--paper) !important;
}
.lp-cta-band .lp-btn-ghost:hover {
    border-color: var(--magenta-light) !important;
    color: var(--magenta-light) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.lp-footer {
    background: var(--teal-deep);
    color: rgba(245, 247, 246, 0.75);
    padding: 48px 0 26px;
}
.lp-foot-grid {
    display: grid;
    gap: 32px;
}
@media (min-width: 780px) {
    .lp-foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
/* Four columns once the Contact column is present (address needs the room). */
@media (min-width: 780px) {
    .lp-foot-grid:has(.lp-foot-contact) { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }
}
@media (min-width: 780px) and (max-width: 1080px) {
    .lp-foot-grid:has(.lp-foot-contact) { grid-template-columns: 1fr 1fr; }
}
.lp-foot-grid h5 {
    color: var(--paper);
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 0.85rem;
    margin: 0 0 14px;
}
.lp-foot-grid ul { margin: 0; padding: 0; list-style: none; }
.lp-foot-grid li { padding: 5px 0; font-size: 0.88rem; }
.lp-foot-grid a { color: rgba(245, 247, 246, 0.75); }
.lp-foot-grid a:hover { color: var(--magenta); }
.lp-foot-brand p { margin-top: 14px; max-width: 38ch; font-size: 0.9rem; }
.lp-foot-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--paper);
    font-family: var(--headings-font);
    font-size: 1.1rem;
    font-weight: 600;
}
.lp-foot-logo img { max-height: 40px; width: auto; }
.lp-foot-logo .ap {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--magenta);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.lp-foot-logo .ap::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--magenta);
    border-radius: 50%;
}
.lp-foot-social,
.lp-foot-social ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lp-foot-social li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
.lp-foot-social a {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-on-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 247, 246, 0.8);
    flex-shrink: 0;
}
.lp-foot-social a:hover { border-color: var(--magenta); color: var(--magenta); }
.lp-foot-bottom {
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid var(--line-on-dark);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    font-size: 0.78rem;
}
.lp-foot-credit { color: rgba(245, 247, 246, 0.55); }
.lp-foot-social-text { color: rgba(245, 247, 246, 0.6); }

/* Footer contact column — values come from Theme Settings → Contact Info.
   Each row is icon + text on a shared baseline; the icon column is a fixed
   width so the address, phone, email and hours all start at the same x. */
.lp-foot-contact li {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: start;
    gap: 10px;
    line-height: 1.55;
}
/* !important is required, not decorative: cards-filters.css carries a blanket
   `.lp-ux-modern .fa-location-dot { color: var(--lp-green) !important }` that
   paints every location pin on the site teal, so the address icon came out a
   different colour from the phone and envelope beside it. */
.lp-foot-contact li > i,
.lp-foot-contact li > i.fa-location-dot {
    color: var(--magenta) !important;
    font-size: 0.82rem;
    line-height: 1.55;
    width: 16px;
    text-align: center;
}
.lp-foot-contact span { color: rgba(245, 247, 246, 0.75); }
.lp-foot-contact .lp-foot-address { max-width: 34ch; padding-bottom: 10px; }
.lp-foot-contact .lp-foot-hours span { color: rgba(245, 247, 246, 0.55); font-size: 0.82rem; }

/* The fixed back-to-top button parks at right:30/bottom:30 and was landing on
   top of the address text once the contact column existed. Reserve the space. */
@media (max-width: 779px) {
    .lp-footer .lp-foot-bottom { padding-bottom: 46px; }
}
.lp-foot-bottom .lp-foot-social a {
    width: 30px;
    height: 30px;
}
.lp-foot-bottom a { color: rgba(245, 247, 246, 0.75); }
.lp-foot-bottom a:hover { color: var(--magenta); }

/* ==========================================================================
   Button normalisation (loads last sitewide, so this is the final word).

   Two sources of "same button, different colours":
   1. A submit button that is ALSO .header-btn1 — `button[type="submit"]`
      (0,1,1) outranks `.header-btn1` (0,1,0), so the contact form's button
      came out teal while every other .header-btn1 is gold.
   2. The bespoke .btn-award-* / .btn-notice-* families, which duplicate
      lp-btn-primary / lp-btn-ghost but with their own colours — including
      dark ink text on a teal fill, which also fails contrast.
   Map them all onto the three canonical treatments.
   ========================================================================== */

/* 1. .header-btn1 is gold even when it is a <button type="submit">. */
button.header-btn1,
button.headbtn4,
input[type="submit"].header-btn1,
a.header-btn1,
a.headbtn4 {
    background: var(--magenta) !important;
    border-color: var(--magenta) !important;
    color: var(--teal-deep) !important;
}
button.header-btn1:hover,
button.headbtn4:hover,
input[type="submit"].header-btn1:hover,
a.header-btn1:hover,
a.headbtn4:hover {
    background: var(--magenta-deep) !important;
    border-color: var(--magenta-deep) !important;
    color: var(--teal-deep) !important;
}

/* 2. Legacy award/notice families -> canonical primary / ghost. */
.btn-award,
.btn-notice {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 22px !important;
    border: 1px solid transparent !important;
    border-radius: var(--lp-radius) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    transition: background var(--lp-transition), border-color var(--lp-transition), color var(--lp-transition);
}

.btn-award-primary,
.btn-notice-primary {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
    color: var(--paper) !important;
}
.btn-award-primary:hover,
.btn-notice-primary:hover {
    background: var(--teal-deep) !important;
    border-color: var(--teal-deep) !important;
    color: var(--paper) !important;
}

.btn-award-outline,
.btn-notice-outline {
    background: var(--paper) !important;
    border-color: var(--ink) !important;
    color: var(--ink) !important;
}
.btn-award-outline:hover,
.btn-notice-outline:hover {
    background: var(--paper) !important;
    border-color: var(--magenta-deep) !important;
    color: var(--magenta-deep) !important;
}

/* ==========================================================================
   Responsive corrections (shared components, sitewide)
   ========================================================================== */

/* 2. Pull-quote / any lp-* aside must not inherit the blog sidebar's gap.
   style.css has `aside, .blog-post-single aside { margin-top: 100px }` at
   <=992px — meant for a stacked blog sidebar, but .lp-pull is an <aside>,
   so the About pull-quote got 100px of dead space above it on every tablet
   and phone. The grid's own gap already provides the separation. */
.lp-pull,
.lp-about-grid > aside,
.lp-page aside.lp-frame { margin-top: 0; }

/* Same leak, different victim: the news/blog sidebar is also an <aside>, so it
   picked up the same arbitrary 100px once it stacked under the article list.
   It does want separation when stacked — just on the normal spacing scale. */
.lp-sidebar { margin-top: 0; }
@media (max-width: 992px) {
    .lp-sidebar { margin-top: 48px; }
}

/* 3. Award/notice card meta: keep every line on the same left edge.
   `.lp-award-date { margin-left: auto }` right-aligns the date beside the
   badges. That reads fine while they share a line, but under ~620px the row
   wraps and the date lands alone on line 2 still shoved right, so the card
   had one left-aligned line and one indented one. Below that width the date
   takes its own full-width line at the normal left edge.
   Specificity (0,2,0) so this wins over the .lp-award-date rules in BOTH
   lp-pages.css and home-index.css regardless of which loads last. */
@media (max-width: 620px) {
    .lp-badge-row .lp-award-date {
        margin-left: 0;
        flex: 0 0 100%;
        order: -1;
    }
    .lp-badge-row { row-gap: 6px; }
    .lp-award-card--center .lp-badge-row .lp-award-date { text-align: center; }
}

/* 4. Filter chips: show them all instead of hiding them in a scroller.
   .lp-chip-row is `overflow-x: auto` with the scrollbar hidden, so on a
   phone only the first 3-4 filters were visible with no affordance that
   more existed. Wrapping puts every filter on screen. */
@media (max-width: 768px) {
    .lp-chip-row,
    .lp-ux-modern .lp-chip-row {
        flex-wrap: wrap;
        overflow-x: visible;
        padding-bottom: 0;
        row-gap: 10px;
    }
    .lp-chip-row > * { flex-shrink: 1; }
    .lp-chip { padding: 8px 14px; }
}