/**
 * @file        site-chrome.css
 * @description Site header (C-01), language switcher (C-02), footer and the chip primitive
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         8d34a6f1-5c07-4b92-ae61-70f3982bd4c5
 * @version     0.0.0.2
 * @created     2026-09-14
 * @updated     2026-09-14
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* --- The chip primitive --------------------------------------------------
 *
 * MOVED HERE FROM book-detail.css, WHICH IS WHY THIS FILE EXISTS AT ALL.
 *
 * `.chip-list` and `.chip` were defined in a stylesheet that exactly ONE
 * template loads, and used by six: the site header, the site footer, the
 * article page, the webinar page, and the shared components/chips.html.twig
 * that the topic browser, the article index, the webinar index and the 404 all
 * include. So the book detail page had chips and every other page had a
 * bulleted list or a row of bare links — for every page view since Sprint 2,
 * with nothing failing, because a missing rule is not an error.
 *
 * Site chrome is on every page, so its rules belong in a sheet on every page.
 * topic.css still owns `.chip--active`, `.chip--tag` and `.chip__remove`: those
 * are filter-state modifiers that only the browsing surfaces need, and they
 * load after this file, so they still win where they apply. */

.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--text-link);
}

/* --- C-01 Site header ----------------------------------------------------
 *
 * The band default is --space-8 (48px each side), which is right for a content
 * band and far too much for chrome; the old markup said so with an inline
 * style attribute. Stated here instead, on the rhythm scale. */

.masthead {
  padding-block: var(--space-3);
}

@media (min-width: 768px) {
  .masthead { padding-block: var(--space-4); }
}

/* Wraps rather than collapsing behind a control. At 375px the brand and the
 * language switcher share the first line and the nav takes the second; from
 * 768px all three sit on one. No breakpoint hides anything — everything in
 * this header is reachable at every width, which is what C-01's "Full
 * function" column asks for. */
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}

.masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  color: var(--text-on-dark);
  text-decoration: none;
}

/* width/height are also on the element, so the row reserves its space before
 * the PNG arrives and the header does not jump (CLS). */
.masthead__mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.masthead__wordmark {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  white-space: nowrap;
}

/* The language switcher sits hard right on every width. On mobile that puts it
 * beside the brand on line one, which costs nothing, rather than on a third
 * line of its own. */
.masthead__lang {
  margin-inline-start: auto;
}

/* The nav takes a full line of its own below the brand, and joins the row at
 * the first breakpoint. Placed here rather than with `order`, because DOM order
 * is visual order in this layout and a positive reordering would break focus
 * order (SC 2.4.3). */
.masthead__nav {
  flex: 1 0 100%;
}

@media (min-width: 768px) {
  .masthead__nav {
    flex: 0 1 auto;
  }

  /* From here the nav follows the brand and the switcher is pushed to the end
   * by the auto margin above. */
  .masthead__lang {
    margin-inline-start: auto;
  }
}

/* The horizontal gap is --space-4 rather than --space-5 for one measured
 * reason: German. "Bücher · Leistungen · Einblicke · Veranstaltungen" runs ~30%
 * longer than its English equivalent, and at 375px the wider gap pushed it onto
 * a third line — a 216px header against 172px for English. The narrower gap
 * costs nothing on desktop and keeps both languages to the same shape. */
.masthead__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
}

@media (min-width: 768px) {
  .masthead__links { gap: 0 var(--space-5); }
}

/* EVERY CHROME LINK CLEARS THE 44px TARGET FLOOR (SC 2.5.5). An inline link in
 * a list is about 20px tall, which the old header and footer both were. */
.masthead__links a,
.masthead__lang a,
.masthead__lang [aria-current],
.sitefoot .chip-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

/* DELIBERATE DEVIATION FROM `.band--inverse a`, which underlines every link on
 * a dark surface. That rule exists so colour never carries meaning alone
 * (NFR21) — a real concern for a link inside a paragraph, where the underline
 * is the only thing separating it from the prose around it. A navigation list
 * has no prose around it: every item is a link, so nothing is being
 * distinguished by colour. The underline returns on hover and on focus. */
.masthead__links a,
.masthead__brand {
  text-decoration: none;
}

.masthead__links a:hover,
.masthead__links a:focus-visible,
.masthead__brand:hover,
.masthead__brand:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.masthead__lang [aria-current] {
  color: var(--text-on-dark);
  opacity: 0.75;
}

/* --- Site footer ---------------------------------------------------------
 * The footer already had real navigation; what it lacked was the `.chip-list`
 * rule, which lived in a stylesheet no footer-bearing page loads. So it had
 * been rendering as a bulleted column on every page since Sprint 2. */

.sitefoot .chip-list {
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
}

.sitefoot p {
  margin-block: 0;
  color: var(--text-on-dark);
  font-size: var(--text-sm);
}

/* The copyright / version line. Flex rather than inline text so the dashboard
 * link can carry a 44px target without the line-height of the sentence around
 * it growing to match (SC 2.5.5) — and so the whole line wraps as words, not as
 * a stretched row, at 375px. */
.sitefoot__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* The one-letter dashboard link. Sized to the target floor in BOTH directions:
 * everywhere else in the chrome a link is wide because its label is, and this
 * one's label is a single character. It keeps the underline that
 * `.band--inverse a` gives it — the deviation above is scoped to the masthead
 * and footer NAV lists, where every sibling is a link; here the link sits in a
 * sentence, which is exactly the case that rule protects. */
.sitefoot__dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}