/* ============================================================================
   GSC-TEMPC — SECTION NAVIGATION · "EXPLORE GSC-TEMPC" (EDITORIAL INDEX)
   File: assets/css/homepage-navigation.css   (REPLACE THE WHOLE FILE)

   Concept
   The panel is a printed table of contents. A white sheet fading to very pale
   green, a short gold-and-leaf rule over the eyebrow, and a hairline-ruled
   index. Each row has a gold-ringed numeral (the same ring as the trust icons
   in About Us); the current section fills its numeral with action green and
   takes a pale-green field and a forest bar. Arrows sit in the champagne disc
   used by the About CTA. One shape language: 12px rows inside a 22px sheet.

   Alignment guides (one number each, reused everywhere)
     --gsn-pad   content edge of the panel, header, toolbar, progress and list
     --gsn-num   30px numeral column; titles and descriptions start at the
                 same x because they share grid column 2.

   Scope: .gsc-home-section-nav (desktop panel), .gsc-home-section-jump
   (mobile/tablet bar), .gsn-toast, .gsn-dlg-back (added by
   homepage-navigation-plus.js). Tokens are --gsn-* only (this file's own
   namespace). Preserved hooks: .is-visible .is-active .is-open .is-kbd
   .is-compact .is-show, body.gsc-nav-push, body.gsc-nav-compact, --gsn-top.

   Layout note: the panel is position:fixed, so its width follows --gsn-w and
   the page offset follows --gsn-push; container queries do not apply here.

   Themes: default (white + logo green) · forest (alias of default) ·
   midnight · royal · charcoal · deepforest. Dark themes only change tokens.
   ============================================================================ */

/* ---------- Design tokens ------------------------------------------------- */
:root {
    --gsn-w: clamp(264px, 20vw, 288px);
    --gsn-w-compact: 72px;
    --gsn-left: 20px;
    --gsn-pad: 18px;
    --gsn-num: 30px;

    /* Champagne gold: rules, rings, disc fills. Never used for text on white. */
    --gsn-acc: 214, 181, 109;
    --gsn-accent: #D6B56D;
    --gsn-gold-light: #F6E3AE;
    --gsn-accent-ink: #173E29;

    /* Greens, as used by the approved About Us section */
    --gsn-brand: #30AA28;
    --gsn-brand-rgb: 48, 170, 40;
    --gsn-leaf: #B9DDB5;
    --gsn-action: #27883A;       /* filled controls; white text = 4.5:1 */
    --gsn-brand-deep: #1B6A2E;   /* hover and small green text */
    --gsn-title: #1F5A2D;        /* forest: titles */
    --gsn-on-brand: #FFFFFF;
    --gsn-num-ink: #27883A;      /* numerals on white */
    --gsn-focus: #1F5A2D;

    --gsn-bg1: #FFFFFF;
    --gsn-bg2: #F3F8F2;
    --gsn-text: #173E29;
    --gsn-muted: #53625A;
    --gsn-line: rgba(48, 170, 40, .16);
    --gsn-card: transparent;
    --gsn-card-hover: rgba(48, 170, 40, .06);
    --gsn-field: #F3F8F2;
    --gsn-tip-bg: #173E29;

    --gsn-r-lg: 22px;
    --gsn-r: 12px;
    --gsn-r-sm: 9px;
    --gsn-shadow: 0 26px 55px rgba(23, 62, 41, .14), 0 5px 16px rgba(48, 170, 40, .08);
    --gsn-ease: cubic-bezier(.22, 1, .36, 1);
    --gsn-dur: .4s;
    --gsn-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, Helvetica, sans-serif;
    --gsn-serif: var(--hp-display-font, 'Fraunces', Georgia, 'Times New Roman', serif);
}

/* Dark themes (optional) — only tokens change */
html[data-pub-theme="midnight"],
html[data-pub-theme="royal"],
html[data-pub-theme="charcoal"],
html[data-pub-theme="deepforest"] {
    --gsn-accent: rgb(var(--gsn-acc));
    --gsn-brand: rgb(var(--gsn-acc));
    --gsn-brand-rgb: var(--gsn-acc);
    --gsn-action: rgb(var(--gsn-acc));
    --gsn-brand-deep: rgb(var(--gsn-acc));
    --gsn-title: var(--gsn-text);
    --gsn-num-ink: rgb(var(--gsn-acc));
    --gsn-focus: rgb(var(--gsn-acc));
    --gsn-on-brand: var(--gsn-accent-ink);
    --gsn-leaf: rgba(255, 255, 255, .22);
    --gsn-line: rgba(255, 255, 255, .10);
    --gsn-card: rgba(255, 255, 255, .045);
    --gsn-card-hover: rgba(255, 255, 255, .095);
    --gsn-field: rgba(0, 0, 0, .24);
    --gsn-tip-bg: rgba(0, 0, 0, .78);
    --gsn-shadow: 0 22px 50px rgba(3, 14, 8, .38), 0 6px 16px rgba(3, 14, 8, .22);
}
html[data-pub-theme="deepforest"] {
    --gsn-acc: 230, 185, 77; --gsn-accent-ink: #2c1f00;
    --gsn-bg1: #0f3d26; --gsn-bg2: #0a2b1a; --gsn-text: #eef7ef; --gsn-muted: rgba(238, 247, 239, .72);
}
html[data-pub-theme="midnight"] {
    --gsn-acc: 230, 185, 77; --gsn-accent-ink: #2c1f00;
    --gsn-bg1: #10214a; --gsn-bg2: #0a1533; --gsn-text: #eaf0ff; --gsn-muted: rgba(234, 240, 255, .72);
}
html[data-pub-theme="royal"] {
    --gsn-acc: 45, 212, 191; --gsn-accent-ink: #032b26;
    --gsn-bg1: #35196a; --gsn-bg2: #1f0f42; --gsn-text: #f3edff; --gsn-muted: rgba(243, 237, 255, .74);
}
html[data-pub-theme="charcoal"] {
    --gsn-acc: 52, 211, 153; --gsn-accent-ink: #032a1c;
    --gsn-bg1: #262c2a; --gsn-bg2: #151918; --gsn-text: #eef1ef; --gsn-muted: rgba(238, 241, 239, .72);
}

.gsc-home-section-nav,
.gsc-home-section-jump,
.gsn-toast,
.gsn-dlg-back {
    box-sizing: border-box;
    font-family: var(--gsn-font);
}
.gsc-home-section-nav *,
.gsc-home-section-nav *::before,
.gsc-home-section-nav *::after,
.gsc-home-section-jump *,
.gsc-home-section-jump *::before,
.gsc-home-section-jump *::after,
.gsn-toast *,
.gsn-dlg-back *,
.gsn-dlg-back *::before,
.gsn-dlg-back *::after {
    box-sizing: border-box;
}

/* Visually hidden, but announced by screen readers */
.gsn-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.gsn-hidden { display: none !important; }

/* ============================================================================
   DESKTOP PANEL
   Sits BELOW the site header (JS keeps --gsn-top in sync).
   ============================================================================ */
.gsc-home-section-nav {
    position: fixed;
    left: var(--gsn-left);
    top: var(--gsn-top, 92px);
    z-index: 420;
    width: var(--gsn-w);
    max-height: calc(100vh - var(--gsn-top, 92px) - 18px);
    max-height: calc(100dvh - var(--gsn-top, 92px) - 18px);
    display: flex;
    flex-direction: column;
    padding: 22px 10px 12px var(--gsn-pad);
    color: var(--gsn-text);
    background: linear-gradient(180deg, var(--gsn-bg1) 0%, var(--gsn-bg2) 100%);
    border: 1px solid var(--gsn-line);
    border-radius: var(--gsn-r-lg);
    box-shadow: var(--gsn-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-26px);
    transition: opacity .55s var(--gsn-ease), transform .55s var(--gsn-ease),
                visibility .55s, width .45s var(--gsn-ease), top .3s var(--gsn-ease);
}
.gsc-home-section-nav.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* Eyebrow: gold-and-leaf rule + green label, the same pairing as every
   section eyebrow on the page */
.gsc-home-section-nav__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 6px 16px 0;
    flex-shrink: 0;
}
.gsc-home-section-nav__header-line {
    flex: 0 0 auto;
    width: 40px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gsn-accent) 0 60%, var(--gsn-leaf) 60% 100%);
}
.gsc-home-section-nav__header-text {
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gsn-brand-deep);
    white-space: nowrap;
}

/* ---------- Toolbar: search + theme + compact + shortcuts (built by JS) --- */
.gsn-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px 14px 0;
    flex-shrink: 0;
}
.gsn-search { position: relative; flex: 1 1 auto; min-width: 0; }
.gsn-search > i {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: .76rem;
    color: var(--gsn-brand-deep);
    pointer-events: none;
}
.gsn-search input {
    width: 100%;
    height: 38px;
    padding: 0 30px 0 32px;
    font: inherit;
    font-size: .82rem;
    color: var(--gsn-text);
    background: var(--gsn-field);
    border: 1px solid var(--gsn-line);
    border-radius: var(--gsn-r-sm);
    transition: border-color .25s var(--gsn-ease), box-shadow .25s var(--gsn-ease), background .25s;
    -webkit-appearance: none; appearance: none;
}
.gsn-search input::placeholder { color: var(--gsn-muted); opacity: 1; }
.gsn-search input::-webkit-search-cancel-button { display: none; }
.gsn-search input:focus {
    outline: none;
    border-color: var(--gsn-action);
    background: var(--gsn-bg1);
    box-shadow: 0 0 0 3px rgba(var(--gsn-brand-rgb), .18);
}
.gsn-kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    font: 700 .66rem/1 var(--gsn-font);
    color: var(--gsn-muted);
    background: var(--gsn-bg1);
    border: 1px solid var(--gsn-line);
    border-bottom-width: 2px;
    border-radius: 6px;
}
.gsn-search .gsn-kbd { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.gsn-search input:focus ~ .gsn-kbd,
.gsn-search input:not(:placeholder-shown) ~ .gsn-kbd { opacity: 0; }

.gsn-toolwrap { position: relative; flex-shrink: 0; }
.gsn-tool {
    position: relative;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    color: var(--gsn-brand-deep);
    font-size: .84rem;
    background: var(--gsn-bg1);
    border: 1px solid var(--gsn-line);
    border-radius: var(--gsn-r-sm);
    cursor: pointer;
    transition: background .25s var(--gsn-ease), border-color .25s var(--gsn-ease),
                transform .25s var(--gsn-ease), color .25s;
}
.gsn-tool i { transition: transform .3s var(--gsn-ease); }
.gsn-tool:hover { background: var(--gsn-card-hover); border-color: rgba(var(--gsn-brand-rgb), .45); }
.gsn-tool:hover i { transform: scale(1.12); }
.gsn-tool:active { transform: scale(.96); }
.gsn-tool[aria-pressed="true"],
.gsn-tool[aria-expanded="true"] {
    background: rgba(var(--gsn-brand-rgb), .10);
    border-color: rgba(var(--gsn-brand-rgb), .5);
}

/* Tooltips for icon-only buttons */
.gsn-tool[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px); left: 50%;
    transform: translate(-50%, 4px);
    padding: 6px 10px;
    font: 600 .7rem/1.2 var(--gsn-font);
    white-space: nowrap;
    color: #fff;
    background: var(--gsn-tip-bg);
    border-radius: 7px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .25s var(--gsn-ease);
    z-index: 9;
}
.gsn-tool[data-tip]:hover::after,
.gsn-tool[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Theme popover */
.gsn-pop {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    z-index: 8;
    width: 180px;
    padding: 8px;
    background: var(--gsn-bg1);
    border: 1px solid var(--gsn-line);
    border-radius: 14px;
    box-shadow: var(--gsn-shadow);
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    transform-origin: top right;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .22s ease, transform .3s var(--gsn-ease), visibility .22s;
}
.gsn-pop.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.gsn-pop__title {
    padding: 4px 8px 8px;
    font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--gsn-muted);
}
.gsn-pop__opt {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 38px; padding: 6px 8px;
    font: 600 .82rem var(--gsn-font);
    color: var(--gsn-text);
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--gsn-r-sm);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s var(--gsn-ease);
}
.gsn-pop__opt:hover { background: var(--gsn-card-hover); transform: translateX(2px); }
.gsn-pop__opt[aria-checked="true"] { background: rgba(var(--gsn-brand-rgb), .10); border-color: rgba(var(--gsn-brand-rgb), .4); }
.gsn-pop__opt:active { transform: scale(.97); }
.gsn-swatch {
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.gsn-pop__opt i { margin-left: auto; font-size: .72rem; color: var(--gsn-brand-deep); opacity: 0; }
.gsn-pop__opt[aria-checked="true"] i { opacity: 1; }

/* ---------- Progress strip ------------------------------------------------ */
.gsn-progress { padding: 0 6px 14px 0; flex-shrink: 0; }
.gsn-progress__row {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 8px;
    font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--gsn-muted);
}
.gsn-progress__count { color: var(--gsn-brand-deep); font-variant-numeric: tabular-nums; }
.gsn-progress__bar { height: 3px; border-radius: 3px; background: rgba(var(--gsn-brand-rgb), .14); overflow: hidden; }
.gsn-progress__bar > span {
    display: block; height: 100%; width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gsn-brand), var(--gsn-accent));
    transition: width .6s var(--gsn-ease);
}

/* ---------- Index list: hairline-ruled table of contents ------------------ */
.gsc-home-section-nav__list {
    list-style: none;
    margin: 0;
    padding: 2px 6px 22px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--gsn-brand-rgb), .35) transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.gsc-home-section-nav__list::-webkit-scrollbar { width: 5px; }
.gsc-home-section-nav__list::-webkit-scrollbar-thumb { background: rgba(var(--gsn-brand-rgb), .3); border-radius: 4px; }
.gsc-home-section-nav__list li {
    margin: 0; padding: 3px 0;
    border-bottom: 1px solid var(--gsn-line);
}
.gsc-home-section-nav__list li:last-child { border-bottom: 0; }
/* The hairlines above and below the current row give way to its field */
.gsc-home-section-nav__list li:has(.is-active) { border-bottom-color: transparent; }
.gsc-home-section-nav__list li:has(+ li .is-active) { border-bottom-color: transparent; }

.gsn-empty {
    padding: 22px 10px 18px;
    text-align: center;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--gsn-muted);
}
.gsn-empty i { display: block; margin-bottom: 8px; font-size: 1.2rem; color: var(--gsn-brand-deep); opacity: .85; }
.gsn-empty[hidden] { display: none; }

/* Row: [numeral] [title / description] */
.gsc-home-section-nav__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--gsn-num) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    width: 100%;
    min-height: 60px;
    padding: 10px 8px 10px 10px;
    color: var(--gsn-text);
    text-decoration: none;
    background: var(--gsn-card);
    border: 1px solid transparent;
    border-radius: var(--gsn-r);
    cursor: pointer;
    overflow: hidden;
    transition: background var(--gsn-dur) var(--gsn-ease), border-color var(--gsn-dur) var(--gsn-ease),
                transform var(--gsn-dur) var(--gsn-ease);
}
/* Forest bar: marks the current row, a faint echo on hover */
.gsc-home-section-nav__item::before {
    content: '';
    position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--gsn-action);
    opacity: 0;
    transform: scaleY(.4);
    transition: opacity var(--gsn-dur) var(--gsn-ease), transform var(--gsn-dur) var(--gsn-ease);
}
.gsc-home-section-nav__item:hover,
.gsc-home-section-nav__item.is-kbd {
    background: var(--gsn-card-hover);
    transform: translateX(2px);
}
.gsc-home-section-nav__item:hover::before,
.gsc-home-section-nav__item.is-kbd::before { opacity: .5; transform: scaleY(.7); }
.gsc-home-section-nav__item.is-kbd { box-shadow: 0 0 0 2px rgba(var(--gsn-brand-rgb), .42) inset; }
.gsc-home-section-nav__item:active { transform: translateX(2px) scale(.985); }
.gsc-home-section-nav__item:focus-visible { outline: 3px solid var(--gsn-focus); outline-offset: 2px; }

/* Numeral: Fraunces in a gold-ringed disc */
.gsc-home-section-nav__number {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: var(--gsn-num);
    height: var(--gsn-num);
    display: grid;
    place-items: center;
    font-family: var(--gsn-serif);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    color: var(--gsn-num-ink);
    font-variant-numeric: tabular-nums;
    background: var(--gsn-bg1);
    border: 1px solid rgba(var(--gsn-acc), .85);
    border-radius: 50%;
    transition: background var(--gsn-dur) var(--gsn-ease), color var(--gsn-dur) var(--gsn-ease),
                transform var(--gsn-dur) var(--gsn-ease);
}
.gsc-home-section-nav__item:hover .gsc-home-section-nav__number { transform: scale(1.06); }

.gsc-home-section-nav__title-row {
    grid-column: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-width: 0;
}
.gsc-home-section-nav__title {
    display: flex; align-items: center; gap: 9px;
    min-width: 0;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--gsn-text);
    transition: color var(--gsn-dur) var(--gsn-ease);
}
.gsc-home-section-nav__title i {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: .8rem;
    color: var(--gsn-brand);
    transition: transform var(--gsn-dur) var(--gsn-ease);
}
.gsc-home-section-nav__item:hover .gsc-home-section-nav__title i { transform: scale(1.15); }
.gsc-home-section-nav__description {
    grid-column: 2;
    padding-left: 25px; /* icon (16) + gap (9): aligns under the title text */
    font-size: .76rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--gsn-muted);
}
.gsc-home-section-nav__arrow {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    font-size: .62rem;
    color: var(--gsn-brand-deep);
    background: rgba(var(--gsn-brand-rgb), .10);
    border-radius: 50%;
    transition: background var(--gsn-dur) var(--gsn-ease), color var(--gsn-dur) var(--gsn-ease),
                transform var(--gsn-dur) var(--gsn-ease);
}
.gsc-home-section-nav__item:hover .gsc-home-section-nav__arrow { transform: translateX(3px); }

/* Search highlight */
.gsc-home-section-nav mark {
    padding: 0 2px;
    color: inherit;
    background: rgba(var(--gsn-acc), .45);
    border-radius: 3px;
}

/* Current section: pale-green field, forest bar, filled numeral, gold arrow disc */
.gsc-home-section-nav__item.is-active {
    background: rgba(var(--gsn-brand-rgb), .10);
    border-color: rgba(var(--gsn-brand-rgb), .26);
    transform: translateX(3px);
}
.gsc-home-section-nav__item.is-active::before { opacity: 1; transform: scaleY(1); }
.gsc-home-section-nav__item.is-active .gsc-home-section-nav__number {
    background: var(--gsn-action);
    color: var(--gsn-on-brand);
}
.gsc-home-section-nav__item.is-active .gsc-home-section-nav__title { color: var(--gsn-title); }
.gsc-home-section-nav__item.is-active .gsc-home-section-nav__description { color: var(--gsn-text); }
.gsc-home-section-nav__item.is-active .gsc-home-section-nav__arrow {
    background: var(--gsn-gold-light);
    color: var(--gsn-accent-ink);
}

/* ---------- Compact ("rail") mode ---------------------------------------- */
.gsc-home-section-nav.is-compact { width: var(--gsn-w-compact); padding: 16px 10px 8px; }
.gsc-home-section-nav.is-compact .gsc-home-section-nav__header { justify-content: center; padding: 0 0 12px; }
.gsc-home-section-nav.is-compact .gsc-home-section-nav__header-text,
.gsc-home-section-nav.is-compact .gsn-search,
.gsc-home-section-nav.is-compact .gsn-progress,
.gsc-home-section-nav.is-compact .gsc-home-section-nav__number,
.gsc-home-section-nav.is-compact .gsc-home-section-nav__description,
.gsc-home-section-nav.is-compact .gsc-home-section-nav__arrow,
.gsc-home-section-nav.is-compact .gsn-t { display: none; }
.gsc-home-section-nav.is-compact .gsn-toolbar { flex-direction: column; padding: 0 0 12px; }
.gsc-home-section-nav.is-compact .gsc-home-section-nav__list { padding-right: 0; }
.gsc-home-section-nav.is-compact .gsc-home-section-nav__item {
    display: flex; min-height: 46px; padding: 10px; align-items: center; justify-content: center;
}
.gsc-home-section-nav.is-compact .gsc-home-section-nav__title-row { justify-content: center; }
.gsc-home-section-nav.is-compact .gsc-home-section-nav__title { gap: 0; }
.gsc-home-section-nav.is-compact .gsc-home-section-nav__title i { font-size: 1.05rem; width: auto; }
.gsc-home-section-nav.is-compact .gsn-tool[data-tip]::after {
    top: 50%; left: calc(100% + 10px);
    transform: translate(4px, -50%);
}
.gsc-home-section-nav.is-compact .gsn-tool[data-tip]:hover::after,
.gsc-home-section-nav.is-compact .gsn-tool[data-tip]:focus-visible::after { transform: translate(0, -50%); }
.gsc-home-section-nav.is-compact .gsn-pop { top: 0; right: auto; left: calc(100% + 12px); transform-origin: top left; }

@media (max-width: 1280px) {
    .gsc-home-section-nav { display: none; }
}
@media (pointer: coarse) {
    .gsn-tool { width: 44px; height: 44px; }
    .gsn-search input { height: 44px; }
    .gsn-pop__opt { min-height: 44px; }
}

/* ---------- Content push (kept in sync with the panel width) ------------- */
@media (min-width: 1281px) {
    body.gsc-nav-push { --gsn-push: calc(var(--gsn-left) + var(--gsn-w) + 18px); }
    body.gsc-nav-push.gsc-nav-compact { --gsn-push: calc(var(--gsn-left) + var(--gsn-w-compact) + 18px); }

    body.gsc-nav-push {
        padding-left: var(--gsn-push);
        transition: padding-left .55s var(--gsn-ease, ease);
    }
    body.gsc-nav-push .hero,
    body.gsc-nav-push #hp-main-content {
        margin-left: calc(var(--gsn-push) * -1);
        width: calc(100% + var(--gsn-push));
    }
}

/* ============================================================================
   MOBILE / TABLET — "Jump to a Section"
   Same language as the desktop index: gold-ringed numerals, hairline rows,
   green current row, gold arrow disc.
   ============================================================================ */
.gsc-home-section-jump { display: none; }

@media (max-width: 1280px) {
    .gsc-home-section-jump {
        display: block;
        position: fixed;
        left: 12px; right: 12px;
        top: max(12px, env(safe-area-inset-top), var(--gsn-top, 12px));
        z-index: 430;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-14px);
        transition: opacity .5s var(--gsn-ease), transform .5s var(--gsn-ease), visibility .5s, top .3s var(--gsn-ease);
    }
    .gsc-home-section-jump.is-visible {
        opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    }
    .gsc-home-section-jump.is-open::before {
        content: '';
        position: fixed; inset: 0; z-index: -1;
        background: rgba(10, 30, 14, .35);
        -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
        pointer-events: none;
        animation: gsnFade .3s ease both;
    }
}

.gsc-home-section-jump__toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    min-height: 56px;
    padding: 0 12px 0 20px;
    color: var(--gsn-text);
    font-family: var(--gsn-font);
    background: var(--gsn-bg1);
    border: 1px solid rgba(var(--gsn-acc), .75);
    border-radius: 999px;
    box-shadow: var(--gsn-shadow);
    cursor: pointer;
    transition: transform .25s var(--gsn-ease), border-color .25s;
}
.gsc-home-section-jump__toggle:active { transform: scale(.985); }
.gsc-home-section-jump__toggle:focus-visible { outline: 3px solid var(--gsn-focus); outline-offset: 3px; }
.gsc-home-section-jump__toggle-label {
    display: flex; align-items: center; gap: 12px;
    font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gsn-brand-deep);
}
.gsc-home-section-jump__toggle-label i { color: var(--gsn-brand); font-size: 1rem; }
.gsc-home-section-jump__chevron {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    color: var(--gsn-accent-ink);
    font-size: .8rem;
    background: var(--gsn-gold-light);
    border-radius: 50%;
    transition: transform var(--gsn-dur) var(--gsn-ease);
}
.gsc-home-section-jump__toggle[aria-expanded="true"] .gsc-home-section-jump__chevron { transform: rotate(180deg); }

.gsc-home-section-jump__menu {
    margin-top: 8px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--gsn-bg1), var(--gsn-bg2));
    border: 1px solid var(--gsn-line);
    border-radius: 18px;
    box-shadow: var(--gsn-shadow);
    transition: max-height .4s var(--gsn-ease), opacity .3s ease;
}
.gsc-home-section-jump.is-open .gsc-home-section-jump__menu {
    max-height: min(70vh, 620px);
    max-height: min(70dvh, 620px);
    opacity: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: gsnPop .4s var(--gsn-ease) both;
}
.gsc-home-section-jump__option {
    display: flex; align-items: center; gap: 16px;
    width: 100%; min-height: 62px;
    padding: 11px 20px;
    font-family: var(--gsn-font);
    color: var(--gsn-text);
    text-align: left;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--gsn-line);
    cursor: pointer;
    transition: background .25s ease;
}
.gsc-home-section-jump__option:first-child { border-top: 0; }
.gsc-home-section-jump__option:hover,
.gsc-home-section-jump__option:focus-visible { background: var(--gsn-card-hover); }
.gsc-home-section-jump__option:focus-visible { outline: 3px solid var(--gsn-focus); outline-offset: -3px; }
.gsc-home-section-jump__option:active { background: rgba(var(--gsn-brand-rgb), .12); }
.gsc-home-section-jump__option.is-active { background: rgba(var(--gsn-brand-rgb), .10); }
.gsc-home-section-jump__option-num {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--gsn-serif);
    font-size: .82rem; font-weight: 600;
    color: var(--gsn-num-ink);
    background: var(--gsn-bg1);
    border: 1px solid rgba(var(--gsn-acc), .85);
    border-radius: 50%;
}
.gsc-home-section-jump__option.is-active .gsc-home-section-jump__option-num {
    color: var(--gsn-on-brand);
    background: var(--gsn-action);
}
.gsc-home-section-jump__option-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gsc-home-section-jump__option-copy strong { font-size: .92rem; font-weight: 700; color: var(--gsn-text); }
.gsc-home-section-jump__option.is-active .gsc-home-section-jump__option-copy strong { color: var(--gsn-title); }
.gsc-home-section-jump__option-copy small { font-size: .78rem; font-weight: 400; color: var(--gsn-muted); }

@media (max-width: 480px) {
    .gsc-home-section-jump { left: 10px; right: 10px; }
    .gsc-home-section-jump__toggle { min-height: 52px; padding: 0 10px 0 16px; }
    .gsc-home-section-jump__toggle-label { font-size: .74rem; gap: 9px; letter-spacing: .1em; }
    .gsc-home-section-jump__option { padding: 11px 16px; gap: 14px; }
}

/* ============================================================================
   TOAST + SHORTCUTS DIALOG (created by homepage-navigation-plus.js)
   ============================================================================ */
.gsn-toast {
    position: fixed;
    left: 50%; bottom: 26px;
    z-index: 9996;
    max-width: min(92vw, 420px);
    padding: 12px 20px;
    font-size: .86rem; font-weight: 600;
    color: var(--gsn-text);
    background: var(--gsn-bg1);
    border: 1px solid rgba(var(--gsn-acc), .75);
    border-radius: 999px;
    box-shadow: var(--gsn-shadow);
    opacity: 0;
    transform: translate(-50%, 18px);
    pointer-events: none;
    transition: opacity .3s ease, transform .4s var(--gsn-ease);
}
.gsn-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

.gsn-dlg-back {
    position: fixed; inset: 0;
    z-index: 9995;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    background: rgba(10, 30, 14, .45);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .25s ease;
}
.gsn-dlg-back.is-open { opacity: 1; }
.gsn-dlg {
    width: min(440px, 100%);
    max-height: 88vh; max-height: 88dvh;
    overflow-y: auto;
    padding: 28px 26px 20px;
    color: var(--gsn-text);
    background: linear-gradient(180deg, var(--gsn-bg1), var(--gsn-bg2));
    border: 1px solid var(--gsn-line);
    border-radius: var(--gsn-r-lg);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
    transform: translateY(16px) scale(.96);
    transition: transform .4s var(--gsn-ease);
}
.gsn-dlg-back.is-open .gsn-dlg { transform: none; }
.gsn-dlg h2 {
    margin: 0 0 4px;
    font-family: var(--gsn-serif);
    font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em;
    color: var(--gsn-title);
}
.gsn-dlg > p { margin: 0 0 16px; font-size: .85rem; line-height: 1.55; color: var(--gsn-muted); }
.gsn-keys { list-style: none; margin: 0; padding: 0; }
.gsn-keys li {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 0;
    font-size: .88rem;
    border-top: 1px solid var(--gsn-line);
}
.gsn-keys li:first-child { border-top: 0; }
.gsn-keys .gsn-combo { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gsn-dlg__close {
    display: block; width: 100%; min-height: 46px; margin-top: 16px;
    font: 800 .8rem var(--gsn-font);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--gsn-on-brand);
    background: var(--gsn-action);
    border: 1px solid rgba(var(--gsn-acc), .75);
    border-radius: 999px;
    cursor: pointer;
    transition: transform .2s var(--gsn-ease), background .2s;
}
.gsn-dlg__close:hover { background: var(--gsn-brand-deep); }
.gsn-dlg__close:active { transform: scale(.97); }
.gsn-dlg__close:focus-visible,
.gsn-tool:focus-visible,
.gsn-pop__opt:focus-visible { outline: 3px solid var(--gsn-focus); outline-offset: 2px; }

@keyframes gsnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gsnPop  { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ============================================================================
   FOCUS-OUTLINE FIX
   Clicking a nav item moves focus to the target section; only the oversized
   outline is removed (sections stay focusable).
   ============================================================================ */
[id^="section-"]:focus,
[id^="section-"]:focus-visible,
#future-plans:focus,
#future-plans:focus-visible { outline: none; }

/* ============================================================================
   PREFERENCES
   ============================================================================ */
@media (prefers-contrast: more) {
    :root { --gsn-line: rgba(0, 0, 0, .45); --gsn-muted: #2f3b33; }
    .gsc-home-section-nav__item.is-active { border-width: 2px; }
}

@media (forced-colors: active) {
    .gsc-home-section-nav,
    .gsc-home-section-jump__menu,
    .gsn-dlg,
    .gsn-toast { border: 1px solid CanvasText; }
    .gsc-home-section-nav__item.is-active,
    .gsc-home-section-jump__option.is-active { border: 2px solid Highlight; }
    .gsc-home-section-nav__item.is-active .gsc-home-section-nav__number,
    .gsc-home-section-jump__option.is-active .gsc-home-section-jump__option-num {
        border: 2px solid Highlight;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gsc-home-section-nav,
    .gsc-home-section-nav *,
    .gsc-home-section-nav *::before,
    .gsc-home-section-nav *::after,
    .gsc-home-section-jump,
    .gsc-home-section-jump *,
    .gsc-home-section-jump::before,
    .gsn-toast,
    .gsn-dlg-back,
    .gsn-dlg,
    body.gsc-nav-push {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .gsc-home-section-nav,
    .gsc-home-section-jump,
    .gsn-toast,
    .gsn-dlg-back { display: none !important; }
    body.gsc-nav-push { padding-left: 0 !important; }
    body.gsc-nav-push .hero,
    body.gsc-nav-push #hp-main-content { margin-left: 0 !important; width: 100% !important; }
}