/*
 * TEKii custom styles -- layered after Pico's classless base (custom overrides
 * Pico; delivered as a separate, later <link>). Scope is deliberately minimal:
 * the brand wordmark font, the two logo color blocks, and the single navigation
 * mechanism (off-canvas drawer below 768px, static sidebar rail at/above it).
 * Everything else falls to Pico's defaults.
 */

/* Brand wordmark font, self-hosted (the page makes zero external font requests).
   Same-origin by construction: layout.html's __DASSET copies the woff2 into each
   domain's DOC root -- the same directory this stylesheet is served from -- so a
   bare-filename url() resolves relative to the stylesheet under both build and
   file:// preview. */
@font-face {
    font-family: 'Days One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("days-one-latin.woff2") format("woff2");
}

/* Brand-name text opts into the wordmark font via this class. Kept general (a
   class, not a one-off selector) so any inline brand-name instance can use it,
   not only the header isologo -- see the brand-font goal in the migration. */
.text-isologo {
    font-family: 'Days One', sans-serif;
    font-size: 1.75rem;
}

/* Logo color tokens, consumed by layout.html's inline SVG `style` attributes
   (fill:var(--logo-text-color) / var(--logo-bird-color)). --pico-muted-color
   auto-flips with Pico's light/dark scheme, replacing the old fixed #666666
   that was tuned against Water's backgrounds; the bird keeps its brand blue,
   legible on both schemes. The footer logo is monochrome and lives in the
   full-viewport billboard, so its tokens are set there (see the FOOTER
   BILLBOARD block below), not here. */
#header-layout-logo {
    --logo-text-color: var(--pico-muted-color);
    --logo-bird-color: #5582f3;
}
.layout-logo {
    inline-size: 8rem;
    block-size: 8rem;
}

/*
 * NAVIGATION -- one markup source (layout.html's #sidebar), two presentations.
 * The rules here are the mobile/drawer state; the >=768px media query at the
 * bottom promotes #sidebar to a static, always-visible left rail.
 */

/* the drawer's focusable-but-invisible checkbox control (the labels drive it);
   keyed to its id -- the element's one name -- like every other rule that
   drives it */
#nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* mobile top bar: hamburger + brand, sticky so the toggle stays reachable */
.topbar {
    display: flex;
    align-items: center;
    gap: var(--pico-spacing);
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background: var(--pico-background-color);
}
.nav-open, .nav-close {
    cursor: pointer;
}
.nav-open svg, .nav-close svg {
    inline-size: 2rem;
    block-size: 2rem;
}

/* #sidebar as an off-canvas drawer, hidden until #nav-toggle is checked */
#sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 20;
    inline-size: min(80vw, 18rem);
    overflow-y: auto;
    padding: var(--pico-spacing);
    background: var(--pico-background-color);
    border-inline-end: 1px solid var(--pico-muted-border-color);
    transform: translateX(-100%);
    transition: transform .25s ease;
}
body:has(#nav-toggle:checked) #sidebar {
    transform: translateX(0);
}

/* dimming backdrop behind the open drawer; page scroll is locked while open.
   NB the `label.` qualifier is load-bearing: Pico styles checkbox-adjacent
   labels ([type=checkbox] ~ label, specificity 0,1,1) as form labels, which
   outranks a bare .nav-backdrop (0,1,0). The backdrop is the one nav label
   that is a sibling of #nav-toggle, so without matching that specificity it
   would render over the whole page permanently, swallowing every click. */
label.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(0, 0, 0, .5);
}
body:has(#nav-toggle:checked) label.nav-backdrop {
    display: block;
}
body:has(#nav-toggle:checked) {
    overflow: hidden;
}

/* nav list: vertical, block links, marker-free (overrides Pico's horizontal
   nav ul so the sidebar reads as a stacked menu) */
#sidebar nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    margin: 0;
}
#sidebar nav li {
    list-style: none;
    padding: 0;
}
#sidebar nav a {
    display: block;
}

/* The locale entries are rendered as ordinary #sidebar nav items (see
   layout.html), so they inherit the nav list's layout/alignment -- no separate
   .lang-switch styling. Only their flag image and the shared current highlight
   below are language-specific. */
/* Current locale AND current-page nav item share ONE highlight: bold weight
   only (Devon, 2026-07-21 -- keep Pico's link color + underline). Keyed to
   aria-current so the accessibility state is the single source of truth
   (the former parallel .selected class could drift from it); same vocabulary
   as Pico's own a[aria-current] rules, and only font-weight is set, so
   Pico's aria-current color/underline still applies untouched. */
#sidebar a[aria-current="true"] {
    font-weight: bold;
}
/* decorative region flag beside each language name. Fixed uniform box (the
   source flags have different aspect ratios -- 1.9:1, 1.6:1, 1.43:1 -- so
   `inline-size:auto` rendered visibly different widths); `object-fit:cover`
   fills the box identically for every flag. Sized to the text so the row height
   is unchanged; nudged onto the text baseline and spaced from the name. */
.lang-flag {
    inline-size: 1.5em;
    block-size: 1em;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: -0.15em;
    margin-inline-end: 0.4em;
}

/* keyboard focus lands on the invisible #nav-toggle -- surface it on the
   visible labels so keyboard users see the affordance (WCAG 2.4.7) */
body:has(#nav-toggle:focus-visible) .nav-open svg,
body:has(#nav-toggle:focus-visible) .nav-close svg {
    outline: 2px solid var(--pico-primary);
    outline-offset: 2px;
}

/* R1 guarantee: the content region is at least one viewport tall, so the
   full-viewport footer billboard below it always starts off-screen and is
   reached only by scrolling -- on every page and at every viewport height
   (fixed content/mock height alone can't promise that, since a taller viewport
   always outgrows it). svh = small viewport height, so it holds even with
   mobile URL bars shown. */
body > main {
    min-block-size: 100svh;
}

/* Brand color pair -- ONE definition point, consumed by the footer billboard,
   its monochrome logo, and the scroll-to-top control. Light: blue field /
   white mark; the dark block below is the exact inversion. Neither layout sets
   data-theme, so Pico follows prefers-color-scheme and this query stays in sync
   with Pico's scheme choice. Re-theming the whole set is a two-line edit here. */
:root {
    --footer-bg: #5582f3;
    --footer-fg: #ffffff;
}
@media (prefers-color-scheme: dark) {
    :root {
        --footer-bg: #ffffff;
        --footer-fg: #5582f3;
    }
}

/*
 * FOOTER BILLBOARD -- the last screen of every content page (all domains,
 * desktop and mobile) is a full-viewport flat-color block holding only the
 * isologo, centered and monochrome. It supersedes the fixed desktop rail and
 * the sticky mobile topbar as it scrolls in (position + z-index above both),
 * and full-bleeds past Pico's centered body>footer container (max-width/padding
 * reset). The viewer must scroll to reach it: 100svh on the last flow element
 * keeps it out of the initial viewport.
 */
body > footer {
    min-block-size: 100svh;
    display: grid;
    place-items: center;
    margin: 0;
    max-width: none;
    padding: 0;
    position: relative;
    z-index: 30;
    background: var(--footer-bg);
}
/* monochrome: both logo tokens collapse to the single foreground, inherited
   from body > footer. The header logo keeps its own two-tone tokens. */
#footer-layout-logo {
    --logo-text-color: var(--footer-fg);
    --logo-bird-color: var(--footer-fg);
}
/* billboard logo is far more dominant than the 8rem header mark */
body > footer .layout-logo {
    inline-size: min(50vw, 50vh);
    block-size: min(50vw, 50vh);
}

/* Scroll-to-top: a site-wide fixed control (promoted from the old tekii.ar
   page and rebuilt to current standards). Colors come from the shared brand
   pair -- the field is the logo color, the chevron the billboard color -- so
   it flips with the scheme. A thin ring of the chevron color plus a soft shadow
   keeps the light-scheme button (a near-white disc over mostly-white content)
   legible mid-scroll (R6). z-index 40 sits above the billboard (30) so it stays
   reachable over the footer. Reveal is scroll-driven progressive enhancement --
   no JS; browsers without scroll-timelines keep it always visible. */
.scroll-to-top {
    position: fixed;
    inset-block-end: var(--pico-spacing);
    inset-inline-end: var(--pico-spacing);
    z-index: 40;
    inline-size: 3rem;
    block-size: 3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--footer-fg);
    color: var(--footer-bg);
    border: 1px solid var(--footer-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.scroll-to-top svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
}
.scroll-to-top:focus-visible {
    outline: 2px solid var(--footer-bg);
    outline-offset: 2px;
}
@supports (animation-timeline: scroll()) {
    .scroll-to-top {
        opacity: 0;
        animation: reveal-scroll-to-top linear both;
        animation-timeline: scroll();
        animation-range: 400px 500px;
    }
    @keyframes reveal-scroll-to-top {
        to { opacity: 1; }
    }
}

@media (min-width: 768px) {
    /* drawer machinery is inert at desktop width: hide the toggle (dropping it
       from the tab order), the backdrop, the close button and the mobile topbar */
    #nav-toggle,
    .nav-close,
    .topbar {
        display: none;
    }
    /* backdrop is a checkbox-adjacent label (see the note above), so hiding it
       at desktop -- including the resized-while-open case -- needs the
       label-qualified selectors, not a bare .nav-backdrop */
    label.nav-backdrop,
    body:has(#nav-toggle:checked) label.nav-backdrop {
        display: none;
    }
    /* #sidebar becomes a fixed, always-visible left rail; main (still a direct
       body child, so Pico's container applies) is pushed clear of it with a
       matching inline-start margin. The footer billboard is intentionally NOT
       hidden here -- it now renders on desktop too, full-bleed over the rail.
       The drawer's edge border is dropped at desktop (Devon, 2026-07-21): rail
       and content share Pico's background, no separator line. */
    #sidebar {
        inline-size: 18rem;
        transform: none;
        border-inline-end: none;
    }
    body > main {
        margin-inline-start: 18rem;
        /* cap the content column to the space left of the rail: Pico's fixed-px
           max-width (up to 1200px) plus an 18rem left margin would otherwise
           overflow the viewport and clip text on the right. custom.css loads
           after Pico, so this wins over Pico's body > main max-width. */
        max-width: calc(100% - 18rem);
    }
}