/**
 * /mdr-content/css/public.css — public (frontend) area palette and components
 *
 * The area file (third CSS layer) for the public frontend: loads after essential and
 * structure and defines the frontend palette on :root (--navy, --tomato signal-red
 * accent, --royal, --card, --muted, --accent, --radius, --border), with --max-w aliased
 * to the central --w-page token so a single width change propagates everywhere.
 *
 * Covers the shared dark site header (nav.site-header): a CSS grid arranging logo,
 * brand title, language bar, search bar and the hamburger menu across two rows, with a
 * responsive breakpoint at 900px that stacks the zones and makes search full-width. Also
 * styles: the .nav-logo/.nav-brand block with fluid clamp()-scaled titles; .container,
 * .pagination, the fixed back-to-top button, and the footer with its column nav; the
 * shared .page-hero; a full long-form article typography system (formerly entry.css,
 * merged so generated static pages need only public.css) covering headings, links,
 * lists, blockquotes, code/pre, scrollable tables, images and hr, with mobile / mid /
 * full-HD / print media variants; the language-switch modal (.lang-*, pure-CSS :target,
 * no JS); the seamless search pill (.hsearch*); the breadcrumb (.breadcrumb*); the
 * home-page tile colouring (.home-tile via color-mix on a per-tile accent, .home-news);
 * the hamburger menu panel (.hmenu*, pure-CSS :target, no JS); and the top notice bar
 * (.site-notice-announce amber heads-up / .site-notice-preview red closed-archive marker).
 * It also defines the central --c-link/-hover/-visited tokens that colour every unclassed
 * link (a:not([class])), so link colour is owned here rather than left to the browser.
 *
 * @package    TaNaSi-MDR
 * @author     Keylam Folker
 * @co-author  Claude (Anthropic)
 * @copyright  2026 TaNaSi
 * @license    proprietary — see RULES.md
 * @link       https://ta-na-si.eu
 * @since      1.0.0
 */

/* ── TOKENS ── */
:root {
    --bg:       #eef4ee;
    --navy:     #1a2a3a;
    --navy-d:   #2c4a6a;
    --tomato:   #DC1E35;   /* Frontend accent: republic signal-red (was #ff6347 orange-red) */
    --tomato-d: #b3162a;   /* darker shade for hover/active; identical to tools.css --danger-d */
    --royal:    #4169e1;
    --royal-d:  #2c4a9e;
    --card:     #fff;
    --muted:    #777;
    --accent:   #3498db;
    --radius:   12px;
    --border:   #dde;
    /* Container width: now derives from the central token --w-page (essential.css).
       Change the content width there in ONE place for all areas. */
    --max-w:    var(--w-page);
    /* Central link colours — used by every public link WITHOUT its own class (see a:not([class])
       below), so link colour is defined by US, not the browser. Placeholder currentColor keeps the
       current look (links inherit the text colour, as before); set a real colour here later. */
    --c-link:         currentColor;
    --c-link-hover:   currentColor;
    --c-link-visited: currentColor;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: #333;
    min-height: 100vh;
    /* Footer pinned to the viewport bottom even on short pages (same behaviour
       the admin/member shells already have): the body becomes a column and the
       footer's margin-top:auto absorbs the leftover height. Fixed overlays
       (language panel, back-to-top) are out of flow and unaffected. */
    display: flex;
    flex-direction: column;
}
body > footer { margin-top: auto; }
a { color: inherit; }
/* Unclassed links route through the central --c-link* tokens (currentColor for now = no change).
   Links WITH a class (nav, article, footer …) keep their own styling. Hover before visited so a
   visited link keeps its visited colour on hover (equal specificity → last rule wins). */
a:not([class])          { color: var(--c-link); }
a:not([class]):hover    { color: var(--c-link-hover); }
a:not([class]):visited  { color: var(--c-link-visited); }

/* ── NAV — Fixed two-row layout ───────────────────────────────────────────
 *
 * Row 1: Logo (fixed) | Brand title (full remaining width)
 * Row 2: empty (logo width) | Buttons right-aligned
 *
 * Title and buttons NEVER share the same row → title is always fully visible.
 * Buttons wrap onto multiple lines if needed, always right-aligned.
 * On small screens (< 600px): buttons become left-aligned to avoid overflow.
 */
/* NOTE: The earlier generic "nav { … }" layout (blue grid) was
   removed. The new shared header uses "nav.site-header" (see the HEADER block at
   the end of the file). The generic rule would otherwise have coloured the
   breadcrumb (<nav class="breadcrumb">) too. Classes like .nav-logo and
   .nav-brand are kept. The old horizontal navigation (.nav-link, .dropdown,
   .drop-*) was replaced by the hamburger menu (.hmenu*) and is
   removed. */

.nav-logo {
    grid-area: logo;
    width: 84px; height: 84px;
    border-radius: 50%; object-fit: contain;
    align-self: center;
}
.nav-brand {
    grid-area: brand;
    color: #fff; line-height: 1.25;
    min-width: 0;
    align-self: center;
    font-family: var(--font-display);
}
.nav-brand a {
    color: #fff; text-decoration: none;
    /* +10% at 1080p vs old 2rem: clamp min 1.5rem → fluid → max 2.2rem */
    font-size: clamp(1.5rem, 1.6vw + .6rem, 2.2rem);
    display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-brand a:hover { color: #ccd; }
/* Row 1, two weights: "Ta-Na-Si" SemiBold 600, remainder Medium 500 */
.nav-brand .brand-name { font-weight: 600; font-size: 1.12em; }
.nav-brand .brand-rest { font-weight: 500; font-size: 0.88em; }
/* Row 2 as a shared bar: subline + page name side by side */
.nav-brand .brand-line2 {
    display: block;
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "INDEPENDENT MEDIA ARCHIVE" Oswald Regular 400, red */
.nav-brand .brand-archive {
    font-family: var(--font-display);
    font-weight: 400; color: var(--tomato);
    font-size: clamp(.94rem, .9vw + .35rem, 1.2rem);
    letter-spacing: .4px;
}
.nav-brand small {
    font-family: var(--font-display);
    font-size: clamp(.94rem, .9vw + .35rem, 1.2rem);
    font-weight: 400; color: var(--tomato); letter-spacing: .4px;
}

/* ── SMALL SCREENS < 600px ── */
@media (max-width: 599px) {
    .nav-logo { width: 56px; height: 56px; }
    .nav-brand a { font-size: 1.2rem; }
    .nav-brand small { font-size: var(--fs-md); }
}

/* ── CONTAINER ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 32px 20px 0; }

/* ── PAGINATION ── */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }

/* ── FIXED TOP BUTTON ── */
.btn-fixed-top {
    position: fixed; bottom: 22px; inset-inline-end: 22px;
    background: var(--royal); color: #fff; text-decoration: none;
    padding: 11px 18px; border-radius: 40px;
    font-size: .82rem; font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 500;
}

/* ── FOOTER ── */
footer {
    margin-top: 0; padding: 36px 20px;
    background: var(--navy); text-align: start;
    border-top: 1px solid #0f1924; color: #c5ced8;
    font-size: 1.07rem;
}
footer p { margin-bottom: 10px; }
footer p:last-child { margin-bottom: 0; font-size: var(--fs-lead); }
footer a { color: #aac4e0; text-decoration: none; margin: 0 10px; }
footer a:hover { color: #fff; text-decoration: underline; }

/* ── FOOTER: Gruppen nebeneinander (public) ── */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 32px 56px;
    max-width: var(--w-page);
    margin: 0 auto 24px;
    padding: 0 20px;
    text-align: start;
}
.footer-group { min-width: 150px; }
.footer-heading {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 10px;
    color: #ffffff;
}
.footer-group ul { list-style: none; margin: 0; padding: 0; }
.footer-group li { margin: 0 0 7px; }
.footer-group a { margin: 0; font-size: .92rem; }
/* Copyright line: same centred page-width container as .footer-nav, so the line
   starts flush with the first link column instead of sticking to the footer's
   left edge. A right-aligned line would vanish behind the fixed TOP button. */
.footer-copyright {
    max-width: var(--w-page);
    margin: 8px auto 0;
    padding: 0 20px;
}
.footer-copyright a { margin: 0; }   /* inline software-attribution link — NOT a spaced footer-nav link (kills the 0 10px side margin here) */

@media (max-width: 600px) {
    .footer-nav { gap: 24px 32px; }
    .footer-group { min-width: 130px; }
}

/* ── PAGE HERO (shared across all content pages) ── */
.page-hero {
    background: var(--card); border-radius: var(--radius);
    padding: clamp(22px, 3vw, 36px) clamp(18px, 3vw, 36px) clamp(18px, 2.5vw, 28px);
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    margin-bottom: 36px;
}
.page-hero h1 {
    font-size: clamp(1.5rem, 1.8vw + .4rem, 2.1rem);
    color: var(--navy); margin-bottom: 10px; line-height: 1.25;
}
.page-hero p {
    font-size: clamp(.9rem, .9vw + .3rem, 1rem);
    color: #3a3a3a; line-height: 1.8; margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTRY PAGE STYLES  (summaries_html/ and readings_html/ static pages)
   Formerly entry.css — integrated here so generated HTML only needs public.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ARTICLE TYPOGRAPHY ── */
article {
    font-family: var(--font-serif);
    line-height: 1.82;
    color: #2c2c2c;
    overflow-wrap: break-word;
    word-break: break-word;
}
article p { margin-bottom: 1.1em; font-size: var(--fs-body); line-height: 1.82; }
article strong { color: var(--navy); }
article em     { font-style: italic; color: #444; }
article a      { color: #1a56db; text-decoration: underline; text-underline-offset: 3px; }
article a:hover { color: var(--tomato-d); }

/* ── ARTICLE HEADINGS ── */
article h1, article h2, article h3,
article h4, article h5, article h6 {
    font-family: var(--font-sans);
    color: var(--navy); line-height: 1.3;
    margin-top: 1.8em; margin-bottom: .6em; font-weight: 700;
}
article h1 { font-size: var(--fs-h1);  border-bottom: 2px solid var(--tomato); padding-bottom: .3em; }
article h2 { font-size: var(--fs-h2);  border-bottom: 1px solid #eee; padding-bottom: .25em; }
article h3 { font-size: var(--fs-h3); }
article h4 { font-size: var(--fs-h4);  color: #444; }
article h5, article h6 { font-size: var(--fs-h5); color: #666; }

/* ── LISTS ── */
article ul, article ol { margin-block: .7em 1.1em; margin-inline: 1.6em 0; line-height: 1.78; }
article li { margin-bottom: .3em; }
article ul li::marker { color: var(--tomato); }
article ol li::marker { color: var(--royal); font-weight: 700; }

/* ── BLOCKQUOTE ── */
article blockquote {
    border-inline-start: 4px solid var(--tomato); background: #fef6f0;
    margin: 1.2em 0; padding: 12px 20px;
    border-radius: 0 8px 8px 0; color: #555; font-style: italic;
}
article blockquote p { margin-bottom: 0; }

/* ── CODE ── */
article code {
    background: #f3f4f6; padding: 2px 6px; border-radius: 4px;
    font-family: var(--font-mono); font-size: .88em; color: #c0392b;
}
article pre {
    background: var(--navy); color: #e0e6f0; padding: 16px 20px;
    border-radius: 8px; overflow-x: auto; font-size: var(--fs-sm);
    line-height: 1.6; margin: 1.2em 0; -webkit-overflow-scrolling: touch;
}
article pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* ── TABLES ── */
article table {
    width: 100%; border-collapse: collapse; font-size: var(--fs-md);
    margin: 1.2em 0; font-family: var(--font-sans);
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
}
article thead { background: var(--navy); color: #fff; }
article thead th { padding: 11px 16px; text-align: start; font-weight: 700; white-space: nowrap; }
article tbody tr:nth-child(odd)  { background: #f8f9fa; }
article tbody tr:nth-child(even) { background: #fff; }
article tbody td { padding: 9px 16px; border-bottom: 1px solid #e9ecef; color: #333; vertical-align: top; white-space: normal; }
article tbody tr:last-child td { border-bottom: none; }

/* ── IMAGES ── */
article img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 1em auto; }

/* ── HR ── */
hr { border: 0; height: 2px; background: #e0e0e0; margin: 22px 0; }

/* ── ENTRY PAGE MOBILE ── */
@media (max-width: 767px) {
    /* Heading sizes now scale fluidly via --fs-* (essential.css); only the
       table/pre density overrides remain per breakpoint. */
    article table { font-size: .82rem; }
    article thead th, article tbody td { padding: 7px 10px; }
    article pre { font-size: var(--fs-xs); padding: 12px 14px; }
}

/* ── ENTRY PAGE FULL-HD ── */
@media (min-width: 1280px) {
    /* Heading sizes reach their clamp() max here already, so no per-breakpoint
       heading overrides are needed — only the wider line-height and the table
       switch from scroll-block back to a full table. */
    article p  { line-height: 1.88; }
    article table { display: table; overflow-x: visible; white-space: normal; }
    article thead th, article tbody td { padding: 11px 18px; }
}

/* ── PRINT ── */
@media print {
    article a::after { content: " (" attr(href) ")"; font-size: .8em; color: #666; }
}

/* ============================================================================
   TaNaSi-MDR — LANGUAGE SWITCH (Zone 1)  —  styles for
   mdr-content/view/public/partials/lang-switch.view.php (B1 region-group box).
   Pure CSS, no JavaScript. Modal driven by :target.
   ============================================================================ */

/* Trigger link in the header */
.lang-trigger {
    display: inline-block;
    font-size: var(--fs-md);
    color: #0066cc;
    text-decoration: none;
    white-space: nowrap;
}
.lang-trigger:hover { text-decoration: underline; }

/* Overlay: hidden by default. Only becomes visible when the URL points at
   #lang-box (the visitor clicked the trigger). */
.lang-overlay {
    display: none;
    position: fixed;
    inset: 0;                       /* top/right/bottom/left: 0 */
    z-index: 1000;
}
.lang-overlay:target {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dimmed, clickable backdrop (closes the modal on click) */
.lang-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: block;
}

/* The centred modal box */
.lang-modal {
    position: relative;
    z-index: 1;
    width: min(720px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    padding: 24px 26px 20px;
    font-size: var(--fs-lead);
    line-height: 1.5;
}

/* Close cross, top right */
.lang-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 14px;
    font-size: 1.6rem;
    line-height: 1;
    color: #666;
    text-decoration: none;
}
.lang-close:hover { color: #000; }

.lang-modal-title {
    margin: 0 0 12px;
    font-size: 1.25rem;
}

/* Notice: own translations, on-site reload, legal docs stay as issued (ls_note) */
.lang-note {
    background: #f4f7fb;
    border-inline-start: 4px solid #0066cc;
    padding: 10px 14px;
    margin: 0 0 18px;
    font-size: 0.86rem;
    color: #333;
}

/* Scrollable middle part: keeps the modal compact even with 49 languages —
   only the region groups scroll, title/notice/cancel stay in place. */
.lang-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

/* Region groups */
.lang-group { margin-bottom: 16px; }
.lang-group-title {
    margin: 0 0 8px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}

/* Language list: CSS columns (3–4 columns, min 150 px each) that adapt to the
   available width; entries never break across a column. */
.lang-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 4 150px;
    column-gap: 1.5rem;
}
.lang-list li {
    margin: 0;
    break-inside: avoid;
    padding: 3px 0;
}
.lang-list a {
    color: #0066cc;
    text-decoration: none;
    display: inline-block;
    padding: 2px 0;
}
.lang-list a:hover { text-decoration: underline; }

/* Name in the current language, shown in parentheses after the endonym */
.lang-exo {
    font-size: 0.82rem;
    color: #5a6274;
}

/* Active language: bold navy plus a green check mark, like the B1 mock */
.lang-list li.is-current a {
    color: #1a2a3a;
    font-weight: 700;
}
.lang-list li.is-current a::after {
    content: " ✓";
    color: #1e7a48;
}

/* All languages uniformly left-aligned (including Arabic/Hebrew).
   Note: the script direction of the characters themselves stays correct; only
   the alignment within the columns is left. */

/* Bottom action row (cancel button) */
.lang-actions {
    margin-top: 18px;
    text-align: end;
    border-top: 1px solid #eee;
    padding-top: 14px;
}
.lang-cancel {
    display: inline-block;
    padding: 8px 18px;
    background: #eef0f2;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    font-size: var(--fs-md);
}
.lang-cancel:hover { background: #e0e3e6; }

/* ============================================================================
 *  TaNaSi-MDR — SEARCH (Zone 2)  —  styles for mdr-content/partials/search-bar.php
 *  Appended at the end of public.css. Reuses the existing variables
 *  (--royal, --royal-d, --border). Seamless pill: category pulldown + field + Go.
 *  ============================================================================ */

.hsearch {
    /* Fluid width: unchanged 460px up to 1280px, then a
       linear ramp to DOUBLE the old width at 1980px (920px cap). Anchors:
       65.7vw - 381px = 460px @1280 / 920px @1980. Set as a definite width (not
       max-width): the header grid column is auto-sized, so only a definite
       width makes the track grow. Below 900px the header media block still
       switches to full width. */
    width: clamp(460px, 65.7vw - 381px, 920px);
    max-width: 100%;
    min-width: 0;
}

/* Seamless pill: three elements joined into one rounded bar.
   Fluid type ramp: --hs-fs-ctrl is the ONE size for
   pulldown + Go button — it replaces the old 600px media jump and is
   pixel-identical to the old sizes at both ends (.82rem <=600px, .9rem >=1280px). */
.hsearch-pill {
    display: flex;
    align-items: stretch;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    min-width: 0;
    /* Two-segment ramp: steeper up to ~1280px (old values), flatter beyond —
       .9rem @1280 -> .95rem @1980 (a touch bigger on wide screens). */
    --hs-fs-ctrl: clamp(.82rem, min(.75rem + .19vw, .809rem + .114vw), .95rem);
}

/* Category pulldown (left) */
.hsearch-select {
    border: none;
    outline: none;
    background: #f3f5f9;
    color: #333;
    font-size: var(--hs-fs-ctrl);
    padding: 0 clamp(10px, 6.5px + .59vw, 14px);
    cursor: pointer;
    max-width: clamp(120px, 60px + 8.6vw, 170px);
    border-inline-end: 1px solid var(--border);
    /* custom dropdown arrow so it looks identical across browsers */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23666'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-inline-end: 30px;
}

/* Search input field (centre) */
.hsearch-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: clamp(8px, 6px + .33vw, 10px) clamp(12px, 8px + .66vw, 16px);
    font-size: clamp(.86rem, min(.81rem + .14vw, .829rem + .114vw), .97rem);   /* .92rem @1280 -> .97rem @1980 */
    background: #fff;
    color: #333;
}

/* Go button (right) */
.hsearch-go {
    border: none;
    cursor: pointer;
    background: var(--royal);
    color: #fff;
    font-weight: 700;
    font-size: var(--hs-fs-ctrl);
    padding: 0 clamp(16px, 9px + 1.18vw, 24px);
    transition: background .2s;
}
.hsearch-go:hover { background: var(--royal-d); }

/* (The former 600px media block is gone: all its values now scale fluidly via
   the clamp() ramps above — same endpoints, no jump.) */

/* ============================================================================
 *   TaNaSi-MDR — BREADCRUMB (Zone 4)  —  styles for mdr-content/partials/breadcrumb.php
 *   Appended at the end of public.css. Horizontal path line below the navigation.
 *   Reuses existing variables (--accent, --muted, --border).
 *   ============================================================================ */

.breadcrumb {
    font-size: var(--fs-sm);
}

.breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
}

/* Separator "›" before every item except the first */
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    margin: 0 8px;
    color: var(--muted);
    opacity: .7;
}

.breadcrumb-item a {
    color: var(--accent);
    text-decoration: none;
}
.breadcrumb-item a:hover { text-decoration: underline; }

/* Current page (last item): not linked, subtly emphasised */
.breadcrumb-item span[aria-current="page"] {
    color: #333;
    font-weight: 600;
}

@media (max-width: 599px) {
    .breadcrumb { padding: 8px 14px; font-size: var(--fs-xs); }
}
/* ============================================================================
 *   TaNaSi-MDR — SHARED HEADER (layout of zones 1–4)
 *   Appended at the end of public.css. Arranges logo, brand, language bar, search
 *   and navigation inside the dark nav block. Reuses the existing nav colour scheme.
 *   ============================================================================ */

/* Extended grid: logo on the left, brand + language bar (top) on the right,
 *   search below that, navigation below that — across the full width. */
nav.site-header {
    background: linear-gradient(90deg, var(--navy) 0%, #1e3a5a 40%, #1a3a3a 100%);
    position: relative;
    padding: 16px 28px 14px;
    display: grid;
    grid-template-columns: 84px 1fr auto auto;
    grid-template-areas:
        "logo brand  lang   lang"
        "logo brand  search menu";
    column-gap: 18px;
    row-gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    align-items: center;
    max-width: 100%;
}
nav.site-header > * { position: relative; z-index: 1; min-width: 0; }

nav.site-header .nav-logo   { grid-area: logo; }
nav.site-header .nav-brand  { grid-area: brand; align-self: center; }

/* Zone 1 — language bar, top right */
nav.site-header .header-lang {
    grid-area: lang;
    justify-self: end;
    align-self: center;
}
nav.site-header .header-lang .lang-trigger { color: #cdd6e2; }
nav.site-header .header-lang .lang-trigger:hover { color: #fff; }

/* Zone 2 — search, right, below the language bar */
nav.site-header .header-search {
    grid-area: search;
    justify-self: end;
    align-self: center;
    width: auto;
}

/* ============================================================================
   TaNaSi-MDR — HEADER FIXES
   Fixes: breadcrumb background/width, search row, overlay stacking.
   At the end of public.css. Deliberately overrides earlier rules.
   ============================================================================ */

/* (A) Breadcrumb is a <nav> but must NOT inherit the dark header layout.
   Fully reset it: light bar, no grid, full-width row. */
nav.breadcrumb {
    background: var(--bg);
    display: block;
    grid-template-columns: none;
    grid-template-areas: none;
    grid-template-rows: none;
    padding: 10px 0;
    box-shadow: none;
    border-bottom: 1px solid var(--border);
}
nav.breadcrumb .breadcrumb-list {
    max-width: 100%;
    margin: 0;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

/* (The header grid is consolidated in ONE nav.site-header definition above.
   The responsive 900px block sits at the end of the file.) */

/* (C) Language overlay now sits at the end of <body>; very high z-index for
   safety, so it reliably stacks above navigation/dropdowns. */
.lang-overlay { z-index: 9999; }
.lang-modal   { z-index: 10000; }

/* ============================================================================
   TaNaSi-MDR — HEADER RESPONSIVE (must sit at the VERY end so it overrides all
   earlier nav.site-header desktop definitions).
   At/below 900px: everything stacked, search full-width, left-aligned. Fixes the
   overflow and the missing line break.
   ============================================================================ */
@media (max-width: 900px) {
    nav.site-header {
        grid-template-columns: 56px 1fr auto;
        grid-template-areas:
            "logo  brand  menu"
            "lang  lang   lang"
            "search search search";
        padding: 12px 14px;
        row-gap: 10px;
        align-items: center;
    }
    nav.site-header .nav-logo      { width: 56px; height: 56px; }
    nav.site-header .header-lang   { justify-self: start; align-self: center; }
    nav.site-header .header-search { justify-self: stretch; align-self: center; width: 100%; }
    nav.site-header .header-search .hsearch { width: 100%; max-width: none; }
    nav.site-header .hmenu         { justify-self: end; align-self: center; }
}

/* ─── Home-page tiles (colour/character) ─────────────────────────────────────
   Structure/geometry lives in structure.css. Here only colour: the overlay uses
   the per-tile --tile-accent (set from home.json); text is white. */
.home-tile {
    /* Accent gradient (moved here from an inline style) over the dynamic background image
       (--tile-img, still set inline). The per-tile accent is the home-tile-a1…a5 class below;
       colour lives in CSS, structure carries only the accent NAME. Text stays white. */
    background-image:
        linear-gradient(135deg, var(--tile-cc, #02529Ccc), var(--tile-88, #02529C88)),
        var(--tile-img, none);
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.home-tile-a1 { --tile-cc: #02529Ccc; --tile-88: #02529C88; }
.home-tile-a2 { --tile-cc: #1C6FB0cc; --tile-88: #1C6FB088; }
.home-tile-a3 { --tile-cc: #3A86C8cc; --tile-88: #3A86C888; }
.home-tile-a4 { --tile-cc: #5C9CD6cc; --tile-88: #5C9CD688; }
.home-tile-a5 { --tile-cc: #7FB3E0cc; --tile-88: #7FB3E088; }
.home-tile:hover { box-shadow: 0 6px 20px rgba(0,0,0,.20); }

/* News block: light card in the frontend tone. */
.home-news { background: var(--card); border: 1px solid var(--border); }

/* ── HAMBURGER MENU (Zone 3, replaces .nav-buttons) ──────────────────────────
   Pure CSS (:target), no JS. Icon = three bars; a click opens the panel directly
   below it. Closes via the icon, the backdrop (.hmenu-scrim) or a menu item
   (navigation changes the URL, so :target no longer matches). */
.hmenu { position: relative; grid-area: menu; justify-self: end; align-self: center; }

.hmenu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 8px;
    text-decoration: none;
    background: rgba(255,255,255,.12);
}
.hmenu-btn:hover { background: rgba(255,255,255,.24); }
.hmenu-bars { display: inline-block; width: 22px; height: 16px; position: relative; }
.hmenu-bars span {
    position: absolute; inset-inline-start: 0; height: 2px; width: 100%;
    background: #fff; border-radius: 2px;
}
.hmenu-bars span:nth-child(1) { top: 0; }
.hmenu-bars span:nth-child(2) { top: 7px; }
.hmenu-bars span:nth-child(3) { top: 14px; }

/* Full-screen close surface behind the panel: only shown while the panel is open */
.hmenu-scrim {
    position: fixed; inset: 0;
    background: transparent;
    display: none;
    z-index: 90;
}

/* Dropdown panel: closed by default */
.hmenu-panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 260px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    border: 1px solid #d7dde4;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
    transition: max-height .2s ease, opacity .15s ease;
    z-index: 100;
}

/* Open state via :target (the trigger points at #hmenu-panel) */
#hmenu-panel:target { display: block; }
#hmenu-panel:target ~ .hmenu-panel {
    max-height: 80vh;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    padding: 10px 0 14px;
}

/* Panel top row: member-login link (left, only while the member area is on)
   and the close X (right) on ONE line. margin-inline-start:auto keeps the X on
   the right even when the login link is absent. */
.hmenu-top {
    display: flex;
    align-items: center;
    padding: 4px 14px 0;
}
.hmenu-login {
    font-size: .85rem;
    font-weight: 600;
    color: #2563eb;   /* the public function-link blue (cf. back links) */
    text-decoration: none;
}
.hmenu-login:hover { text-decoration: underline; }
.hmenu-close {
    display: block;
    margin-inline-start: auto;
    font-size: 1.4rem;
    line-height: 1;
    color: #8a97a3;
    text-decoration: none;
}
.hmenu-close:hover { color: var(--navy); }

.hmenu-section { padding: 4px 0; }
.hmenu-section + .hmenu-section { border-top: 1px solid #eef1f4; margin-top: 4px; }
.hmenu-title {
    margin: 0;
    padding: 8px 18px 4px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #8a97a3;
}
.hmenu-list { list-style: none; margin: 0; padding: 0; }
.hmenu-link {
    display: block;
    padding: 9px 18px;
    color: var(--navy);
    text-decoration: none;
    font-size: .98rem;
}
.hmenu-link:hover { background: #f1f5f9; }
.hmenu-link.active { font-weight: 700; color: var(--royal, #4169e1); }
/* Menu icons: inline SVG from mdr-content/images/icons/public/ (via tana_icon(...,'public')),
   sized HEIGHT-BASED like the admin icons — the SVG files are uniformly height 88, width
   follows the content, so a fixed height + auto width keeps every icon proportional. The icon
   keeps its own colours; a missing SVG falls back to the item's emoji (rendered as text). */
.hmenu-ico { display: inline-block; vertical-align: -0.22em; }
.hmenu-ico svg { height: 1.25em; width: auto; }

/* ── Top notice bar (public frame) ────────────────────────────────────────────
   One strip above the header, two meanings — deliberately told apart by colour, because
   confusing them would be the whole failure mode:
     .site-notice-announce  the archive is OPEN; this is a heads-up ("maintenance tonight").
     .site-notice-preview   the archive is CLOSED to everyone else and you are the operator
                            looking at it through your own token. Red, because taking a closed
                            archive for an open one is exactly the mistake this bar prevents. */
.site-notice {
    padding: .55rem 1rem;
    text-align: center;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
}
.site-notice-announce { background: #fff4d6; color: #6b4e00; border-bottom: 1px solid #e8c96a; }
.site-notice-preview  { background: #b3261e; color: #fff;    border-bottom: 1px solid #8c1d18; }