/*
 * chrome.css — the marketing site's header and footer, on our pages
 * (DD 2026-09-13).
 *
 * Loaded on EVERY page, outside the theme block, because the seam this
 * removes is between her pages and ours: a visitor who clicks "Sign in" on
 * the Lovable home page should not feel the site change underneath them.
 * Keeping it out of the theme means the header still looks right if someone
 * selects a different theme in Site Theme Settings.
 *
 * Colours are hers (the v4 token values, repeated here rather than inherited
 * so the chrome survives a theme swap), type comes from css/fonts-lovable.css.
 * Everything is scoped under .bl-chrome so none of it reaches page content —
 * Bootstrap owns that, and two systems fighting over .container is how the
 * 07-29 contrast regression happened.
 */

.bl-chrome {
    --bl-primary: #0091D7;
    --bl-accent: #FF630A;
    --bl-fg: #0D2436;
    --bl-muted: #556C7D;
    --bl-bg: #F5FBFF;
    --bl-cream: #E6F6FF;
    --bl-border: #D1E1EB;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- measure (DD 2026-09-15) ----
 * Her header is `mx-auto max-w-6xl px-5 h-16`: a 72rem column with 1.25rem
 * gutters, 4rem tall. Bootstrap's .container is 1320px at >=1400px, so at
 * desktop width our header (and the page under it) ran ~170px wider than
 * hers and the wordmark sat in a different place on every "Sign in" click.
 * Page content shares the column so the header lines up with what is under
 * it — this is measure only, no colour, so the 07-29 caveat above holds. */

.container {
    max-width: 72rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* ---- header ---- */

.bl-header.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0;
    background-color: rgba(245, 251, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bl-border);
}

.bl-header > .container {
    min-height: 4rem;
}

/* Her wordmark: text-2xl (1.5rem), Fraunces 700, -0.045em. Same numbers
   here; brand_tags puts no size inline so these are the only ones. */
.bl-chrome .navbar-brand,
.bl-wordmark {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.045em;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bl-fg);
    padding: 0;
    margin: 0;
}

.bl-wordmark .wordmark {
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
}

.bl-wordmark img,
.bl-wordmark .brand-mark-logo {
    height: 2rem;
    width: auto;
}

/* Her nav: text-sm (0.875rem) font-medium, gap-7 (1.75rem). */
@media (min-width: 992px) {
    .bl-header .navbar-nav {
        gap: 1.75rem !important;
    }
}

.bl-chrome .nav-link {
    color: var(--bl-muted) !important;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0;
}

.bl-chrome .nav-link:hover,
.bl-chrome .nav-link:focus,
.bl-chrome .nav-link.active {
    color: var(--bl-fg) !important;
}

/* ---- "you are here" (DD 2026-09-20) ----
 * The signed-in header is a tab bar in everything but name, and it said
 * nothing about which page you were on. Marked the way her CTA already
 * speaks: the accent, under the label, on the item's own baseline. Colour
 * is not the only signal (the weight changes too), and every marked item
 * also carries aria-current="page" in the template, so a screen reader and
 * a colour-blind eye both get it. position:relative + a pseudo-element
 * rather than border-bottom: a border would add 2px to the item's box and
 * nudge the row, and these sit in a 4rem-tall header measured to hers.
 * ::before, NOT ::after — Bootstrap draws the dropdown caret with ::after,
 * and the bizluv toggle is one of the items that can be current, so an
 * ::after underline would swallow its caret. */

.bl-chrome .nav-link.active {
    position: relative;
    font-weight: 600;
}

.bl-chrome .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.15rem;
    height: 2px;
    border-radius: 2px;
    background-color: var(--bl-accent);
}

/* The bizluv toggle is a <button> whose box includes the caret; stop the
   rule short of it so the underline sits under the word, not the arrow. */
.bl-chrome .dropdown-toggle.nav-link.active::before {
    right: 1.1rem;
}

/* Inside a menu, Bootstrap's .active paints the row solid blue; her menus
   are quiet, so mark it the same way the bar does — weight and the accent. */
.bl-chrome .dropdown-item.active,
.bl-chrome .dropdown-item.active:focus {
    background-color: transparent;
    color: var(--bl-fg);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--bl-accent);
}

.bl-chrome .dropdown-item.active:hover {
    background-color: var(--bl-cream);
    color: var(--bl-fg);
}

.bl-chrome .btn.bl-cta,
.bl-chrome .btn.bl-cta:focus {
    background-color: var(--bl-primary);
    border-color: var(--bl-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0.625rem 1.25rem;   /* her px-5 py-2.5 */
    font-size: 0.875rem;         /* her text-sm */
    font-weight: 600;
    line-height: 1.25rem;
    box-shadow: 0 1px 2px rgba(37, 76, 100, 0.07), 0 12px 32px rgba(37, 76, 100, 0.10);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.bl-chrome .btn.bl-cta:hover {
    background-color: #007EC3;
    border-color: #007EC3;
    color: #fff;
    transform: translateY(-2px);
}

.bl-chrome .dropdown-toggle.nav-link {
    text-decoration: none;
}

.bl-chrome .dropdown-menu {
    border: 1px solid var(--bl-border);
    border-radius: 0.875rem;
    box-shadow: 0 2px 4px rgba(37, 76, 100, 0.09), 0 24px 56px rgba(37, 76, 100, 0.16);
    padding: 0.5rem;
}

.bl-chrome .dropdown-item {
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: var(--bl-fg);
}

.bl-chrome .dropdown-item:hover,
.bl-chrome .dropdown-item:focus {
    background-color: var(--bl-cream);
    color: var(--bl-fg);
}

.bl-chrome .dropdown-header {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bl-muted);
}

/* ---- the hamburger opens the site options directly ----
 * (Meghan, UAT 2026-10-02; issue log #73 "duplicate menu" — Track F.)
 * Below lg the signed-in header folds behind the hamburger, and inside it
 * sat two MORE menus — the "bizluv" dropdown and the name pill — so every
 * destination was two taps and the page looked like it had three menus.
 * In the collapsed header the two dropdowns render flat: the toggle is a
 * plain heading (no caret, not clickable) and its items sit open in the
 * flow beneath it. Above lg nothing changes — the dropdowns are the
 * desktop design (DD 2026-09-16). The markup is untouched, so the tests
 * that pin the header's links keep reading the same file.
 */
@media (max-width: 991.98px) {
    .bl-header .navbar-collapse .dropdown-toggle {
        pointer-events: none;
    }
    .bl-header .navbar-collapse .dropdown-toggle::after {
        display: none;
    }
    .bl-header .navbar-collapse .dropdown-menu {
        display: block;
        position: static;
        float: none;
        margin: 0;
        padding: 0 0 0.5rem 1rem;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
}

/* ---- footer ----
 * Element-plus-class selectors and !important here on purpose (DD
 * 2026-09-20): chrome.css loads BEFORE the theme block in base.html, and
 * every bizluv theme styles the bare element — theme-bizluv-v3* is
 * `footer { background: var(--bizluv-navy) !important; color: white
 * !important }`, with gold h6 and teal links. A logged-out Wagtail page
 * carries page_theme=theme-bizluv-v4 (cream footer, close to hers) so the
 * seam never showed there; the member pages have no `page`, fall through to
 * the site/db theme, and the SAME footer markup came out navy. The chrome is
 * hers, not the theme's, so it wins whichever theme is selected — matching
 * the intent already stated at the top of this file. Only the colour
 * declarations are forced; layout stays overridable. */

footer.bl-footer {
    margin-top: 6rem;
    background-color: var(--bl-cream) !important;
    border-top: 1px solid var(--bl-border) !important;
    color: var(--bl-fg) !important;
}

.bl-footer-mark {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.bl-footer .bl-footer-blurb {
    max-width: 24rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--bl-muted) !important;
}

.bl-footer .bl-footer-parent {
    font-size: 0.875rem;
    color: var(--bl-muted) !important;
    margin-bottom: 0;
}

.bl-footer .bl-footer-parent a {
    color: var(--bl-fg) !important;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

footer.bl-footer h5,
footer.bl-footer h6 {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bl-fg) !important;
    margin-bottom: 1rem;
}

.bl-footer-links li {
    margin-bottom: 0.625rem;
}

footer.bl-footer .bl-footer-links a {
    font-size: 0.875rem;
    color: var(--bl-muted) !important;
    text-decoration: none;
}

footer.bl-footer .bl-footer-links a:hover,
footer.bl-footer .bl-footer-links a:focus {
    color: var(--bl-fg) !important;
}

.bl-footer .bl-footer-fineprint {
    border-top: 1px solid var(--bl-border) !important;
    padding: 1.5rem 0;
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--bl-muted) !important;
}

.bl-footer-fineprint p {
    margin-bottom: 0.5rem;
}

.bl-footer-fineprint p:last-child {
    margin-bottom: 0;
}

.bl-footer .bl-footer-fineprint code,
.bl-footer .bl-footer-fineprint a {
    color: var(--bl-muted) !important;
}

/* ---- print: the chrome is never part of a placard ---- */

@media print {
    .bl-header,
    .bl-footer {
        display: none !important;
    }
}