/*
 * Paligo Base — theme stylesheet.
 *
 * assets/css/main.css owns the design tokens, the app-shell grid and the chrome
 * structure (.topbar, aside.site-nav, .site-footer, .portal-*). This file adds
 * only what the Twig markup needs on top of it:
 *   1. styling for the accessible default markup the paligo_*() component
 *      functions emit (the .paligo-* classes), so it sits correctly inside the
 *      main.css layout;
 *   2. the small style hooks assets/js/theme.js needs on top of the classes
 *      main.css already styles (scroll-spy active state, a visually-hidden live
 *      region), plus a CSS-only mobile navigation fallback for when that script
 *      is absent (JS off: the off-canvas drawer is replaced by a static tree,
 *      gated on html:not(.pl-js) so the drawer takes over the moment JS runs).
 * Everything below is expressed in the --paligo-* tokens main.css defines, so a
 * rebrand via theme options / token overrides flows through unchanged.
 */

/* Search is NOT styled here any more. paligo_search_box() used to render a
   three-element form of its own (.paligo-search-box + input + submit button) and
   this file dressed it; the component emits the same .site-search markup a theme
   writes by hand, so main.css's Search section covers both and there is one rule
   set instead of two describing the same control. */

/* ===== Breadcrumbs (paligo_breadcrumbs) =================================== */
/* Rendered at the top of <main> (not in the header crumb row), so styled as a
   quiet inline trail above the heading. Mirrors main.css .breadcrumb. */
.paligo-breadcrumbs { font-size: 13px; color: var(--paligo-faint); margin: 0 0 1.25rem; }
.paligo-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; }
.paligo-breadcrumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.paligo-breadcrumbs li + li::before { content: var(--paligo-breadcrumb-sep); color: var(--paligo-faint); }
.paligo-breadcrumbs a { color: var(--paligo-muted); text-decoration: none; }
.paligo-breadcrumbs a:hover { color: var(--paligo-primary); text-decoration: underline; }
.paligo-breadcrumbs [aria-current="page"] { color: var(--paligo-muted); }

/* ===== On-page TOC (paligo_toc) =========================================== */
/* Rendered as a boxed "On this page" panel at the top of the content. theme.js
   adds scroll-spy: the link for the section currently in view is marked
   aria-current="location" (also .is-active), highlighted below. */
.paligo-toc {
  margin: 0 0 2rem; padding: 1rem 1.25rem;
  background: var(--paligo-surface); border: 1px solid var(--paligo-border);
  border-radius: var(--paligo-radius); font-size: 13.5px;
}
.paligo-toc::before {
  /* The visible heading, from the same string as the landmark's accessible
     name (theme.strings.onThisPage). It cannot be written literally here:
     CSS content is not translatable, so a Swedish build used to show a
     Swedish accessible name above an English visible heading. The property
     is declared on <html> by base.html.twig; the literal stays as the
     fallback, so a theme that declares nothing renders exactly as before. */
  content: var(--paligo-s-on-this-page, "On this page"); display: block;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--paligo-faint); margin-bottom: .5rem;
}
.paligo-toc ul { list-style: none; margin: 0; padding: 0; }
.paligo-toc ul ul { padding-left: 1rem; }
.paligo-toc li { margin: .15rem 0; }
.paligo-toc a { color: var(--paligo-muted); text-decoration: none; }
.paligo-toc a:hover { color: var(--paligo-primary); text-decoration: underline; }
/* Scroll-spy active link (theme.js). */
.paligo-toc a.is-active,
.paligo-toc a[aria-current="location"] { color: var(--paligo-primary); font-weight: 650; }

/* ===== Pager (paligo_pager) =============================================== */
/* Two-column prev/next, mirroring main.css .pager (whose markup differs). */
.paligo-pager { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 3rem 0 0; }
.paligo-pager a {
  padding: .75rem 1rem; border: 1px solid var(--paligo-border); border-radius: var(--paligo-radius);
  color: var(--paligo-text); font-weight: 600; text-decoration: none;
}
.paligo-pager a:hover { border-color: var(--paligo-primary); background: var(--paligo-surface); text-decoration: none; color: var(--paligo-primary); }
.paligo-pager .paligo-pager-prev { grid-column: 1; }
.paligo-pager .paligo-pager-next { grid-column: 2; text-align: right; }

/* ===== Language switcher (paligo_language_switcher) ======================= */
/* The component returns <nav><ul><li><a>, and base.html.twig renders it inside
   the header's .langswitch-menu drawer - so all this file owes it is the list
   reset. main.css styles .langswitch-menu a for that drawer: a full-width row
   each, page-text ink, hover fill, the current language in the accent.

   It used to do more, from when the component was rendered in the FOOTER: an
   inline flex row, muted ink and its own aria-current rule. In the drawer the
   row laid the languages out side by side instead of stacked, and because this
   file loads after main.css and both selectors weigh the same, the row won. The
   ink rules were the same collision more quietly - one overriding main.css,
   one duplicating it exactly. A theme that puts the switcher somewhere else
   styles it there; this file no longer guesses where that is. */
.paligo-language-switcher ul { list-style: none; margin: 0; padding: 0; }

/* ===== Content article ==================================================== */
/* The fragment already carries the content vocabulary (headings, admonitions,
   code blocks, tables); main.css styles all of it under `main`. The wrapper only
   needs to not interfere. */
.paligo-content { min-width: 0; }

/* ===== Search page (paligo_search_results) ================================ */
/* Scaffold around the opaque mount. The injected backend widget (Pagefind UI /
   InstantSearch / Coveo) renders inside [data-paligo-search-mount]; its own
   assets style the widget. We only set the page frame. */
.paligo-search-page { width: 100%; }
.paligo-search-results { margin-top: 1.5rem; }

/* ===== Mobile navigation fallback (no-JS only) ============================ */
/* main.css turns aside.site-nav into an off-canvas drawer at <=860px
   (position:fixed; transform:translateX(-102%), revealed by body.nav-open + the
   .menu-toggle hamburger). site-nav.js wires exactly that, so when it runs (html
   carries .pl-js) the drawer is the mobile navigation. This block is the no-JS
   fallback: without the script the drawer would be unreachable (nothing sets
   body.nav-open), so gate it on html:not(.pl-js) and replace the drawer with a
   static, always-visible tree that flows below the header. */
@media (max-width: 860px) {
  html:not(.pl-js) body:not(.portal):not(.searchpage) {
    grid-template-columns: minmax(0, 1fr);
    /* Five areas need five row tracks. main.css declares four
       (header-h / auto / minmax(0,1fr) / auto) for its four-area layout; adding
       a "sidebar" row without re-declaring them lands the minmax(0,1fr) growth
       track on the SIDEBAR and leaves content on `auto`, so the nav tree
       stretches to fill the viewport and pushes the body off-screen. Content
       keeps the growth track. */
    grid-template-rows: var(--paligo-header-h) auto auto minmax(0, 1fr) auto;
    grid-template-areas: "header" "crumb" "sidebar" "content" "footer";
  }
  html:not(.pl-js) body:not(.portal):not(.searchpage) > aside.site-nav {
    position: static; transform: none; width: auto; height: auto;
    max-height: none; box-shadow: none; z-index: auto;
    border-bottom: 1px solid var(--paligo-border);
  }
  html:not(.pl-js) body:not(.portal):not(.searchpage) > aside.site-nav > .nav-inner { position: static; max-height: none; }
  /* The hamburger only opens the drawer this block replaces, and nothing wires
     it without JS: main.css reveals it at this width, so hide it again here
     rather than leaving a dead control in the bar. */
  html:not(.pl-js) body:not(.portal):not(.searchpage) .menu-toggle { display: none; }
}