/* =========================================================
   Swiss Digital Commons — custom layer on top of Pico CSS
   Brand colors, font and a few layout helpers only.
   Pico (assets/css/pico.min.css) does the heavy lifting.
   ========================================================= */

:root {
  /* Brand accent + neutral ink */
  --swiss-red: #da291c;
  --ink: #20262e;        /* neutral dark slate for solid chrome (buttons, links) */

  /* Typography: Manrope on top of Pico's system stack */
  --pico-font-family-sans-serif: "Manrope", system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pico-font-family: var(--pico-font-family-sans-serif);

  /* Pico primary -> neutral ink; Swiss red is kept as the accent (hover, focus, .accent-text) */
  --pico-primary: var(--ink);
  --pico-primary-background: var(--ink);
  --pico-primary-border: var(--ink);
  --pico-primary-underline: rgba(32, 38, 46, 0.4);
  --pico-primary-hover: var(--swiss-red);
  --pico-primary-hover-background: var(--swiss-red);
  --pico-primary-hover-border: var(--swiss-red);
  --pico-primary-hover-underline: var(--swiss-red);
  --pico-primary-focus: rgba(218, 41, 28, 0.25);
  --pico-primary-inverse: #fff;

  --pico-border-radius: 0.8rem;
}

/* Smooth in-page anchor scrolling (respects users who prefer reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Keep jumped-to headings clear of the top edge. */
.reading-main :is(h1, h2, h3) { scroll-margin-top: 1.5rem; }

/* ---------- Global type scale ----------
   Shrink everything 10% by overriding Pico's responsive root font-size
   (Pico: 100 / 106.25 / 112.5 / 118.75 / 125 / 131.25% — each ×0.9). */
:root { --pico-font-size: 90%; }
@media (min-width: 576px)  { :root { --pico-font-size: 95.625%; } }
@media (min-width: 768px)  { :root { --pico-font-size: 101.25%; } }
@media (min-width: 1024px) { :root { --pico-font-size: 106.875%; } }
@media (min-width: 1280px) { :root { --pico-font-size: 112.5%; } }
@media (min-width: 1536px) { :root { --pico-font-size: 118.125%; } }

/* Warm page background with a faint red glow, top-left */
body {
  background:
    radial-gradient(55rem 38rem at -10% -8%, rgba(218, 41, 28, 0.06), transparent 60%),
    var(--pico-background-color);
}

/* ---------- Header / nav ---------- */
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.site-header .brand img { width: 40px; height: 40px; border-radius: 10px; }
.site-header .brand strong { font-size: 1.1rem; letter-spacing: -0.03em; }
.site-header nav { --pico-nav-element-spacing-horizontal: 0.6rem; }
/* Top-nav links match the footer links: muted grey, Swiss red on hover */
.site-header nav a { font-weight: 600; text-decoration: none; color: var(--pico-muted-color); }
.site-header nav a:hover { color: var(--swiss-red); }
/* Active page link stays red (set server-side in header.html). */
.site-header nav a.active { color: var(--swiss-red); }
/* keep the brand (logo + wordmark) neutral, including on hover */
.site-header .brand, .site-header .brand:hover { color: inherit; }

/* Language switcher: a small bordered pill, set apart from the nav links */
.site-header nav a.lang-switch {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--swiss-red);
}
.site-header nav a.lang-switch:hover {
  border-color: var(--swiss-red);
  background: rgba(218, 41, 28, 0.08);
}

/* ---------- Kicker (uppercase eyebrow) ---------- */
.kicker {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(96, 107, 121, 0.12);
  color: var(--pico-muted-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.accent-text { color: var(--swiss-red); }
/* gitn.run wordmark: the first "n" carries the brand purple. */
.gitn-n { color: rgb(141, 55, 195); }

/* ---------- Section rhythm ---------- */
main > section { margin-top: 4.5rem; }
main > section:first-child { margin-top: 1.5rem; }
.section-head { max-width: 48rem; margin-bottom: 2rem; }
.section-head h2 { font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.5rem; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
/* When the preview card is absent, let the text span the full width */
.hero:has(> :only-child) { grid-template-columns: 1fr; }
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.03;
  margin-bottom: 1rem;
}
.hero .lead { font-size: 1.1rem; color: var(--pico-muted-color); margin-bottom: 1.5rem; }
.hero .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero .actions a { margin: 0; }

/* ---------- Cards / grids ---------- */
/* Pico packs .grid into a single row; use a fixed column count per breakpoint
   so cards wrap into even rows (e.g. 6 cards -> 3 x 2, 3 cards -> 3 x 1). */
.grid { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.grid > article { margin: 0; height: 100%; }

/* Split layout: cards on the left, intro text on the right (desktop).
   Section head stays first in the DOM so it leads on mobile. */
.split { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .split > .grid { grid-column: 1; grid-row: 1; grid-template-columns: repeat(2, 1fr); }
  .split > .section-head { grid-column: 2; grid-row: 1; margin-bottom: 0; }
}

/* feature icon */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--swiss-red);
  color: #fff;
  margin-bottom: 1rem;
}
.icon svg { width: 24px; height: 24px; }

/* ---------- Legal / reading pages ---------- */
/* Single column on small screens; TOC sidebar + content on wide screens. */
.reading-layout { display: block; }
.reading-main { max-width: 46rem; min-width: 0; margin-inline: auto; }

.toc { display: none; }                 /* hidden on small screens */
@media (min-width: 1024px) {
  .reading-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 46rem);
    gap: 3rem;
    justify-content: center;
    align-items: start;
  }
  .reading-main { margin-inline: 0; }
  /* Pin the TOC to the top while the content scrolls. Sticky lives on the
     aside itself: the grid's align-items:start shrinks it to content height,
     so it can travel the full height of the (taller) content column. */
  .toc {
    display: block;
    position: sticky;
    top: 1.5rem;
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}
.toc-title {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--pico-muted-border-color); }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 0.28rem 0 0.28rem 0.9rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--pico-muted-color);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.3;
}
.toc a:hover, .toc a:focus { color: var(--swiss-red); border-left-color: var(--swiss-red); }
/* Active section (set by the scroll-spy in the legal layout) stays red. */
.toc a.active { color: var(--swiss-red); border-left-color: var(--swiss-red); font-weight: 600; }

.doc-meta {
  display: flex; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem;
}
.doc-meta .kicker { margin-bottom: 0; }
.doc-meta .updated { color: var(--pico-muted-color); font-size: 0.9rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--pico-muted-border-color); margin-top: 4.5rem; }
.site-footer .footer-row {
  display: flex; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding-block: 1.5rem;
  color: var(--pico-muted-color); font-size: 0.9rem;
}
.site-footer .footer-links a { color: var(--pico-muted-color); text-decoration: none; margin-left: 1.2rem; }
.site-footer .footer-links a:hover { color: var(--swiss-red); }
/* Active page link stays red (set server-side in footer.html). */
.site-footer .footer-links a.active { color: var(--swiss-red); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; }

  /* Stack nav: brand on its own row, links wrap below (no clipping) */
  .site-header nav { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .site-header nav > ul { flex-wrap: wrap; padding: 0; margin: 0; }
  .site-header nav > ul:last-child { gap: 0 0.3rem; }

  .site-footer .footer-row { flex-direction: column; }
  .site-footer .footer-links a { margin-left: 0; margin-right: 1.2rem; }
}