/* ==========================================================================
   Editorial look for the SITE CHROME: top bar, sidebar drawer, footer (Feature G, Step 7a).
   The chrome (header, .hfe-sidebar, footer) is built entirely from the --hfe-* tokens declared on
   :root in site.css, but the Editorial pages only re-point those tokens on their own wrapper
   (.pf-ed / .hfe-page[data-pf-template="editorial"]), which the chrome sits OUTSIDE of. So the
   same token values are also set on <body>, whenever the page contains an Editorial wrapper
   (:has, same trick as the body background in pf-editorial.css). Everything inside the body then
   inherits them with no change to _Layout.cshtml or to Default pages: a page without an
   Editorial wrapper never matches, so Default pages and the rest of the site are untouched.
   In the portfolio editor the picker flips the wrapper's attributes, so the chrome follows live.
   Token values are copied from pf-editorial-editor.css / pf-editorial.css (the approved look).
   Loaded by _EditorialHead (public pages) and _EditorialEditorHead (editors) only.
   ========================================================================== */

/* ---- Tokens on <body> ---------------------------------------------------------------- */
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) {
    --hfe-bg: #0c0b0a; --hfe-ink: #efe3d0; --hfe-ink-soft: #a39a8a; --hfe-muted: #a39a8a;
    --hfe-border: rgba(217,185,138,.35); --hfe-surface: rgba(217,185,138,.05); --hfe-surface-soft: rgba(217,185,138,.08);
    --hfe-accent: #d9b98a; --hfe-accent-fg: #0c0b0a; --hfe-accent-soft: rgba(217,185,138,.14);
    --hfe-highlight: #d9b98a; --hfe-highlight-fg: #0c0b0a;
    --hfe-radius-lg: 14px; --hfe-radius-md: 14px; --hfe-radius-sm: 10px;
    --hfe-font-display: 'Anton', 'Impact', sans-serif; --hfe-font-body: 'DM Sans', sans-serif; --hfe-font-mono: 'DM Sans', sans-serif;
}
body:has(:is(.pf-ed[data-pf-style="crimson"], .hfe-page[data-pf-template="editorial"][data-pf-style="crimson"])) {
    --hfe-bg: #0d0707; --hfe-ink: #f1e5d3; --hfe-ink-soft: #a69590; --hfe-muted: #a69590;
    --hfe-border: rgba(217,66,76,.45); --hfe-surface: rgba(217,66,76,.06); --hfe-surface-soft: rgba(217,66,76,.09);
    --hfe-accent: #e65660; --hfe-accent-fg: #0d0707; --hfe-accent-soft: rgba(217,66,76,.16);
    --hfe-highlight: #e65660; --hfe-highlight-fg: #0d0707;
}
body:has(:is(.pf-ed[data-pf-style="glitch"], .hfe-page[data-pf-template="editorial"][data-pf-style="glitch"])) {
    --hfe-bg: #050805; --hfe-ink: #e9ece9; --hfe-ink-soft: #8fa68d; --hfe-muted: #8fa68d;
    --hfe-border: rgba(57,255,20,.4); --hfe-surface: rgba(57,255,20,.04); --hfe-surface-soft: rgba(57,255,20,.07);
    --hfe-accent: #39ff14; --hfe-accent-fg: #050805; --hfe-accent-soft: rgba(57,255,20,.13);
    --hfe-highlight: #39ff14; --hfe-highlight-fg: #050805;
    --hfe-radius-lg: 0px; --hfe-radius-md: 0px; --hfe-radius-sm: 0px;
    --hfe-font-body: 'JetBrains Mono', ui-monospace, monospace; --hfe-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---- Chrome rules (only while an Editorial wrapper is on the page) ------------------------ */
/* The surface tokens are translucent in Editorial, so the pieces that float over content
   (top bar, drawer, dropdowns, footer) get the solid page color instead. */
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-navbar,
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-footer,
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-sidebar,
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-nav-dropdown-menu,
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .dropdown-menu {
    background: var(--hfe-bg);
    border-color: var(--hfe-border);
    color: var(--hfe-ink);
    transition: background .4s, border-color .4s;
}

/* brand wordmark in the Anton display type, like the page titles */
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-nav-brand,
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-sidebar-mobile-brand {
    font-weight: 400; text-transform: uppercase; letter-spacing: .04em;
}

/* footer text + links */
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-footer a { color: var(--hfe-ink-soft); text-decoration: none; }
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-footer a:hover { color: var(--hfe-accent); }

/* focus rings that hard-code the Default teal in site.css */
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-sidebar-toggle:focus,
body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-nav-toggler:focus { box-shadow: 0 0 0 .2rem var(--hfe-accent-soft); }

@media (prefers-reduced-motion: reduce) {
    body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-navbar,
    body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-footer,
    body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-sidebar,
    body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .hfe-nav-dropdown-menu,
    body:has(:is(.pf-ed, .hfe-page[data-pf-template="editorial"])) .dropdown-menu { transition: none; }
}