/* Base layer (T018): the self-hosted font, the dark page, typography, the
   header. No colour literals here — everything comes from tokens.css. The font
   files are served from our own /fonts, so a child's browser makes no
   third-party request. */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/baloo2-400.woff2") format("woff2");
}

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/baloo2-700.woff2") format("woff2");
}

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/baloo2-800.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-body);
  line-height: 1.5;
  touch-action: manipulation;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 1.05rem;
}

h1 {
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

h2 {
  font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin: 0 0 var(--space-4);
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--color-primary-light);
  font-weight: 700;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* Accessibility utilities (T053). ------------------------------------------- */

/* Hide from sight but keep for a screen reader (a skip target's name, a heading
   that carries the page but isn't drawn, a label). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Skip to content": off-screen until it takes keyboard focus, then it drops
   into view at the top-left so the first Tab press can jump past the header. */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  /* Fully hidden until focus: a translate by more than its own height clears the
     viewport whatever the link's height (a fixed negative `top` used to leave a strip
     peeking, because the link is taller than that offset — T104 rule 5). */
  transform: translateY(-200%);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-nav);
  font-weight: 700;
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  text-decoration: none;
}

/* Anyone who asks for less motion gets no transitions or animations, anywhere
   (T053). The tiny non-zero time keeps callbacks that wait for transitionend/
   animationend from hanging. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Header: the brand mark on the left; language, parent nav and "sign out" on the
   right. A raised dark bar over the page. */
.site-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-raised);
  border-bottom: 1px solid var(--color-line);
}

/* The brand lock-up (T044): the emblem, then the wordmark — "Minds" in cream,
   "&" and "Moves" in warm orange — with the motto beneath (hidden on a phone). */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
  color: var(--color-text);
}

.brand:hover {
  text-decoration: none;
}

.brand-emblem {
  width: var(--brand-emblem-size);
  height: var(--brand-emblem-size);
  flex: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-word {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.bw-1 {
  color: var(--brand-word-1);
}

.bw-amp,
.bw-2 {
  color: var(--brand-word-2);
}

.brand-tagline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-tagline);
}

/* On a phone the header shows just the emblem and the name. */
@media (max-width: 32rem) {
  .brand-tagline {
    display: none;
  }
}

/* The admin header's small mark. */
.admin-emblem {
  width: 1.4rem;
  height: 1.4rem;
  vertical-align: -0.25em;
  margin-right: var(--space-1);
}

/* The public footer's motto sits above the legal links (T044). */
.footer-tagline {
  color: var(--brand-tagline);
  font-weight: 700;
}

.footer-links {
  display: inline-flex;
  gap: var(--space-4);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Nav links: quiet pills. The current page is a filled green pill. */
.navl {
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-nav);
  color: var(--color-muted);
}

.navl:hover {
  background: var(--color-card);
  text-decoration: none;
}

.navl.is-active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.navl.is-active:hover {
  background: var(--color-primary);
}

/* The "sign out" nav item is a form button; strip its native chrome. */
.navl--btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  min-height: var(--tap);
}

.lang-switch {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.lang-switch a {
  margin-left: var(--space-2);
  color: var(--color-muted);
  font-weight: 700;
}

.logout-form {
  margin: 0;
}

/* The page column. On a phone everything is one column with a comfortable
   gutter; on a wider screen each kind of page gets its own reading width, chosen
   by the layout from the view name (T051). The widths come from the PM's table:
   public site 1200, parent area / board 1100, other child pages 1000, admin
   1280, forms 480. The default (a page the layout hasn't classified) keeps the
   old reading width, so nothing new is ever thrown too wide. */
.site-main {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-8);
}

.site-main.main--public { max-width: 75rem; }   /* 1200px */
.site-main.main--parent { max-width: 68.75rem; } /* 1100px */
.site-main.main--board  { max-width: 68.75rem; } /* 1100px */
.site-main.main--kid    { max-width: 62.5rem; }  /* 1000px */
.site-main.main--admin  { max-width: 80rem; }    /* 1280px */
.site-main.main--form   { max-width: 30rem; }    /* 480px  */

/* On a phone the side gutter shrinks so the content — and the board — can use
   the full width, and never enough to force a sideways scroll. */
@media (max-width: 48rem) {
  .site-main {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    padding-top: var(--space-4);
  }
}

/* Light theme (T059): on the cream header a nav-link hover needs a warm tint,
   because the card colour it uses on dark is now the same ivory as the bar. */
:root[data-theme="light"] .navl:hover {
  background: var(--color-line-soft);
}