/* ==========================================================================
   Sierra Action Planner — audience switcher.

   ONE copy of these rules, shared by every page that mounts the control
   (index, toolkit, agents, agents/plan, plans, fire, fire/plan). The markup is
   rendered by /planner/audience-switch.js into a mount element that SHIPS WITH
   REAL LINKS INSIDE IT:

       <div class="aud-switch" data-current="loghome">
         <a href="/" aria-current="page">Log home Action Planner</a>
         <a href="/agents">Realtor Action Plan</a>
         <a href="/fire">Fire Action Plan</a>
       </div>

   Those links are the no-JS and crawler baseline, and they are the reason this
   control exists: /agents previously had no inbound internal link anywhere on
   the site, and a link that appears only after a script runs is a poor
   substitute for one in the HTML. The script empties the mount and builds the
   dropdown, so a JS user never sees both. The rules under
   `.aud-switch:not([data-aud-ready])` below style that brief pre-script state
   so it reads as a small row of links rather than unstyled text.

   Palette: every colour below goes through an --aud-* custom property that is
   declared once on .aud-switch itself. A page (or a header skin) re-tints the
   control by redefining those few properties — see the .fire-header block at
   the bottom — instead of copying the rules. The default tint is the green
   site-header chrome used by planner.css / home.css; the values fall back to
   literals so the control still looks right if it is ever mounted on a page
   that does not load one of those stylesheets.
   ========================================================================== */

.aud-switch {
    /* ---- tint hooks (override these, not the rules below) ---- */
    --aud-btn-fg: var(--green-2, #1E4636);
    --aud-btn-bg: rgba(20, 52, 42, 0.06);
    --aud-btn-bg-hover: rgba(20, 52, 42, 0.12);
    --aud-btn-border: rgba(20, 52, 42, 0.18);
    --aud-menu-bg: var(--card, #FFFDF8);
    --aud-menu-border: var(--border, #E9E1D2);
    --aud-menu-shadow: 0 24px 48px -22px rgba(16, 45, 34, 0.5);
    --aud-item-fg: var(--ink-soft, #5C564C);
    --aud-item-hover-bg: var(--green-tint, #EAF1EA);
    --aud-current-fg: var(--forest-green, #163C2E);
    --aud-focus-ring: var(--green-mid, #24614A);

    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* ---- trigger ---------------------------------------------------------- */

.aud-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 44px floor: comfortable touch target on phones. */
    min-height: 44px;
    max-width: 15rem;
    padding: 8px 14px;
    background: var(--aud-btn-bg);
    color: var(--aud-btn-fg);
    border: 1.5px solid var(--aud-btn-border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.aud-switch-btn:hover { background: var(--aud-btn-bg-hover); }

.aud-switch-btn:focus-visible {
    outline: 2px solid var(--aud-focus-ring);
    outline-offset: 2px;
}

.aud-switch-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aud-switch-chev {
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.aud-switch[data-open="true"] .aud-switch-chev { transform: rotate(180deg); }

/* ---- menu ------------------------------------------------------------- */

.aud-switch-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    padding: 6px;
    background: var(--aud-menu-bg);
    border: 1px solid var(--aud-menu-border);
    border-radius: 14px;
    box-shadow: var(--aud-menu-shadow);
    z-index: 90;
    animation: aud-switch-in 0.14s ease-out;
}

.aud-switch-menu[hidden] { display: none; }

@keyframes aud-switch-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.aud-switch-item {
    display: flex;
    align-items: center;
    gap: 9px;
    /* 44px floor again: menu rows are tap targets too. */
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--aud-item-fg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.aud-switch-item:hover { background: var(--aud-item-hover-bg); }

.aud-switch-item:focus-visible {
    background: var(--aud-item-hover-bg);
    outline: 2px solid var(--aud-focus-ring);
    outline-offset: -2px;
}

/* The audience you are already in. Styled off the ARIA state so the visual and
   the assistive-tech state can never drift apart. */
.aud-switch-item[aria-current] {
    background: var(--aud-item-hover-bg);
    color: var(--aud-current-fg);
    font-weight: 800;
}

/* Tick reserves its space on every row so labels stay on one baseline grid. */
.aud-switch-tick {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    visibility: hidden;
}

.aud-switch-item[aria-current] .aud-switch-tick { visibility: visible; }

/* Visually hidden, still read aloud: makes the button's accessible name
   "Viewing as Log home owner" rather than a bare audience label. */
.aud-switch-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- small screens ---------------------------------------------------- */

/* The caps below are sized to the LONGEST label in AUDIENCES ("Log home Action
   Planner"); they grew with the labels so the trigger reads in full rather than
   ellipsing to "Log home Action Pl…". Keep them in step if a longer name lands. */
@media (max-width: 768px) {
    .aud-switch-btn { max-width: 13rem; padding: 8px 12px; font-size: 12.5px; }
    .aud-switch-menu { min-width: 220px; }
}

/* On the narrowest phones the header is brand + switcher + hamburger, so let
   the menu hang off the right edge rather than overflow the viewport. */
@media (max-width: 480px) {
    .aud-switch-btn { max-width: 11rem; }
    .aud-switch-menu { left: auto; right: 0; }
}

/* ---- fire pages: same rules, warm paper tint -------------------------- */

/* fire.html / fire-plan.html use the .fire-header skin on the #F1EBDF paper
   palette, not the green site-header chrome. Only the tint hooks change here —
   the rules above are still the single source of truth. */
.fire-header .aud-switch {
    --aud-btn-fg: var(--ink-soft, #5C564C);
    --aud-btn-bg: transparent;
    --aud-btn-bg-hover: #EDE5D6;
    --aud-btn-border: var(--border-2, #DDD3C1);
    --aud-menu-border: var(--border-2, #DDD3C1);
    --aud-menu-shadow: 0 22px 44px -24px rgba(90, 74, 44, 0.55);
    --aud-item-hover-bg: #F4EFE3;
    --aud-current-fg: var(--forest-green, #163C2E);
    --aud-focus-ring: var(--gold, #C7913F);
}

/* .fire-header-inner is a 2-up space-between row (wordmark | links); pushing the
   switcher off auto margin keeps it grouped with the links on the right. */
.fire-header-inner .aud-switch { margin-left: auto; }

/* ---- motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .aud-switch-btn,
    .aud-switch-chev,
    .aud-switch-item { transition: none; }
    .aud-switch-menu { animation: none; }
    .aud-switch[data-open="true"] .aud-switch-chev { transform: rotate(180deg); }
}

/* ---- print ------------------------------------------------------------ */

@media print {
    .aud-switch { display: none !important; }
}

/* ==========================================================================
   Pre-script / no-JS baseline.

   The mount ships with real <a> links so a crawler and a reader without
   JavaScript both get a working way into every audience. audience-switch.js
   empties the mount before building the dropdown, so these rules only ever
   apply before the script runs, or if it never does. Kept deliberately plain:
   a small row of underlined links, sized to the same 44px touch target the
   button uses, so nothing jumps when the control upgrades.
   ========================================================================== */

.aud-switch:not([data-aud-ready]) {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.aud-switch:not([data-aud-ready]) > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--aud-btn-fg, #3E5A4E);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.aud-switch:not([data-aud-ready]) > a[aria-current="page"] {
    text-decoration: none;
    opacity: 0.72;
    cursor: default;
}