/* The three colours scroll-color.js swaps per section are registered so they can
   animate. An UNREGISTERED custom property animates discretely — it jumps at the
   halfway point and never blends — so a transition on the variable does nothing
   and each consumer is left to declare its own timing. That is what put this
   page out of step with itself: body faded over 300ms while the foldout's fade
   snapped instantly, its toggle ran 200ms, and ~30 divider borders snapped too.
   Registered, the variable interpolates and every consumer re-resolves from the
   same animated value on the same frame — background-color, border-color, and
   colour stops inside a gradient alike. One timing, defined once, on :root below.
   Where @property is unsupported the variables simply cut instantly, which is
   the legensdag.dk behaviour rather than a broken one. */
@property --bg {
    syntax: '<color>';
    inherits: true;
    initial-value: #f9f6f2;
}
@property --fg {
    syntax: '<color>';
    inherits: true;
    initial-value: #3d5464;
}
@property --divider {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(61, 84, 100, 0.12);
}

:root {
    --bg: #f9f6f2;
    --fg: #3d5464;
    --divider: rgba(61, 84, 100, 0.12);
    /* No transition. These no longer change after load — each section owns its
       colours and paints its own background, so there is nothing to blend from.
       The 300ms page fade that used to live here existed only because a single
       body colour had to travel between sections; that mechanism is gone, and
       the fade was the very thing that stopped you seeing a section's colour
       arrive. Anything reading these still must NOT declare its own transition
       on them. */
}

:root {
    /* Height of the sticky header — sticky elements offset by this to stack
       below it (see .toc-subnav and the Sticky — Top group style).
       Only a fallback for before header-height.js runs: the real height is not a
       constant the theme can know. The header's padding is a block attribute set
       in the editor (so it differs per site, and the theme's own parts/header.html
       ships none), and the inline nav is dropped at <= 781px. header-height.js
       measures the rendered header and overwrites this. */
    --hthc-header-h: 58px;
    /* Layer for on-page sticky bars: above content, below the header (z 100). */
    --hthc-sticky-z: 90;
    /* Sticky bars have to clear the admin bar, which is fixed over the top of
       the viewport for logged-in users. Core publishes its height on <html>
       (32px, 46px below 782px); the variable is simply absent when logged out,
       so the fallback covers visitors. */
    --hthc-sticky-offset: var(--wp-admin--admin-bar--height, 0px);
    /* Diagonal outbound arrow from the design (membership_v1.html), as a mask so
       it takes currentColor. Stroke-only, matching the 16x16 source paths. */
    --hthc-external-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75'%3E%3Cpath d='M3 4L12 4L12 13' stroke-linecap='square'/%3E%3Cpath d='M4 12L12 4'/%3E%3C/svg%3E");
}

/* The hthc-sc-init class that used to live here is gone with the fade it
   suppressed: colours are settled once at load and never move, so there is
   nothing to hold back. */

/* enqueue_block_assets mirrors this file into wp-admin as well as the editor
   canvas, so a bare `body` rule painted the admin screen's own body in the
   theme's charcoal. Only wp-admin carries the .wp-admin class — the front end
   and the canvas iframe (.editor-styles-wrapper) do not — so excluding it keeps
   the rule everywhere it belongs and nowhere it doesn't. */
/* The switch fires as the next section starts to appear, so the section filling
   the screen takes the incoming colour whatever the duration is — how long that
   mismatch lasts is set by how far you scroll, not by this. A fade therefore
   costs nothing in contrast and reads as deliberate rather than as a glitch.
   (legensdag.dk uses 0s, but its text colour comes from the body and changes
   with the background, so an instant cut never looks broken there.)
   No transition here: the duration lives on the variables (:root above), so body
   fades on exactly the same curve as every other consumer. Restoring one would
   make body chase an already-animating value and lag the rest of the page. */
body:not(.wp-admin) {
    background-color: var(--bg);
}

/* Text colour hangs on the SECTION, not on <main>. scroll-color.js writes --fg
   onto each section from its own background luminance, and `color` has to be
   declared on the same element for that value to be the one that resolves —
   declared on main it would resolve main's --fg and every section would share
   one colour, which is the whole bug this replaced.
   Sections that set their own colour still win: has-text-color is !important.
   Template parts are untouched, so the newsletter band above the footer keeps
   theme.json's charcoal — the colour its design pins (.nl-h in ecosystem_f.html,
   which .nl-band-d deliberately does not override). */
body:not(.wp-admin) .hthc-sc-section {
    color: var(--fg);
}

/* The handover eases: when a section is repainted to the active section's
   colour, it fades rather than snapping. The section arriving from the bottom is
   still a hard edge, because that is a different element wearing its own colour —
   which is the whole point, and what a page-wide fade used to destroy.
   Gated on hthc-sc-ready, which scroll-color.js adds only after the opening
   paint, so a page loaded already scrolled does not ease in front of the
   visitor. Matches legensdag.dk's 0.6s on the same property. */
body.hthc-sc-ready .hthc-sc-section {
    transition: background-color 600ms ease, color 600ms ease;
}

/* Sticky bars keep their own background — scroll-color.js excludes them — but
   their text still inherits the morphing page --fg, so over a dark section the
   header turned beige-on-beige and the menu disappeared. Both bars pin their
   colour instead. Anything that opts into its own colour (the coral CTA, the
   active nav item) sets it explicitly and is unaffected. */
.hthc-header,
.toc-subnav {
    color: var(--wp--preset--color--charcoal);
}
/* Stick below the header (not under it) and layer above page content. */
.toc-subnav.is-position-sticky {
    top: calc(var(--hthc-header-h) + var(--hthc-sticky-offset, 0px));
    z-index: var(--hthc-sticky-z);
}

/* Below 600px core switches the admin bar to position: absolute — it scrolls
   away with the page, so offsetting for it would leave a permanent gap. */
@media screen and (max-width: 600px) {
    :root {
        --hthc-sticky-offset: 0px;
    }
}