/* =========================================================================
   Schoolio — Rails-specific components (flashes, errors, skip-link,
   page shell layout). Design tokens come from tokens.css.
   ========================================================================= */

/* Skip link for keyboard/screen-reader users ------------------------------ */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font: var(--fw-600) var(--fs-16) var(--font-educating);
  z-index: 9999;
}
.skip-link:focus { left: 1rem; top: 1rem; outline: 3px solid var(--highlighter); }

/* Page shell ------------------------------------------------------------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-educating);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
main { min-height: 60vh; }

/* Header / Footer -------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--container-max); margin: 0 auto;
  padding: 1rem var(--container-gutter);
}
.site-header__logo {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: var(--ink);
}
.site-header__logo img { height: 40px; width: auto; }
.site-header__logo .wordmark {
  font: var(--fw-700) var(--fs-22)/1 var(--font-display);
  letter-spacing: .02em;
}

/*
 * The `.nav` rule in tokens.css was designed for a standalone, full-width
 * header in the style guide. Inside `.site-header__inner` we need to neutralize
 * its padding, border, and background, and give the flex children real spacing
 * (space-between does nothing on a shrink-to-fit flex item).
 */
.site-header__inner .nav {
  padding: 0;
  background: transparent;
  border-bottom: 0;
  justify-content: flex-end;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.site-header__inner .nav a {
  padding: .25rem .1rem;
}

/* Dropdown nav groups -----------------------------------------------------
   A NavItem with children renders as <details><summary>…</summary><ul>…</ul></details>.
   Default <details> styles are ugly; we hide the marker and roll our own. */
.site-header__inner .nav .nav-group {
  position: relative;
  display: inline-block;
}
.site-header__inner .nav .nav-group__label {
  list-style: none;        /* Firefox marker */
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .1rem;
  color: var(--ink);
  font: inherit;
}
.site-header__inner .nav .nav-group__label::-webkit-details-marker { display: none; }
.site-header__inner .nav .nav-group__caret {
  font-size: .8em;
  opacity: .6;
  transition: transform .12s ease;
}
.site-header__inner .nav .nav-group[open] .nav-group__caret { transform: rotate(180deg); }

.site-header__inner .nav .nav-group__menu {
  position: absolute;
  top: 100%;
  margin-top: .35rem;          /* visual gap below the label */
  right: 0;
  min-width: 18rem;
  padding: .75rem 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px -16px rgba(28, 28, 28, .35);
  z-index: 50;
}
/* Invisible bridge across the visual gap above the menu — without it
   the cursor briefly leaves :hover when crossing from the label down
   into the menu, and the dropdown collapses. */
.site-header__inner .nav .nav-group__menu::before {
  content: "";
  position: absolute;
  top: -.35rem;
  left: 0;
  right: 0;
  height: .35rem;
}
.site-header__inner .nav .nav-group__menu a {
  display: block;
  padding: .35rem 1rem;
  text-decoration: none;
  color: var(--ink);
}
.site-header__inner .nav .nav-group__menu a:hover,
.site-header__inner .nav .nav-group__menu a:focus {
  background: var(--paper-2, #F3ECD6);
}

/* Second-level grouping inside the dropdown (e.g. "Team", "What science
   says is the Right Problem"). The label is non-clickable when its path is
   "#", or a link when it carries its own path; children indent slightly. */
.site-header__inner .nav .nav-group__section {
  padding: .35rem 0;
}
.site-header__inner .nav .nav-group__section + .nav-group__section {
  border-top: 1px solid var(--rule);
  margin-top: .35rem;
  padding-top: .6rem;
}
.site-header__inner .nav .nav-group__section-label {
  display: block;
  padding: 0 1rem .15rem;
  font: var(--fw-600, 600) var(--fs-14, .875rem) var(--font-display, "Fraunces", serif);
  letter-spacing: .01em;
  opacity: .65;
  text-transform: uppercase;
  font-size: .72rem;
}
/* When a section header carries its own path it renders as a link; keep the
   muted header look but add a hover/focus affordance so it reads as clickable. */
.site-header__inner .nav a.nav-group__section-label {
  color: inherit;
  text-decoration: none;
}
.site-header__inner .nav a.nav-group__section-label:hover,
.site-header__inner .nav a.nav-group__section-label:focus-visible {
  opacity: 1;
  text-decoration: underline;
}
.site-header__inner .nav .nav-group__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header__inner .nav .nav-group__sublist a {
  padding-left: 1.5rem;
}

/* Linked variant — About is a real link with a hover-revealed dropdown
   beside it AND a separate toggle button so touch users can open the
   dropdown without giving up the link's own tap target. */
.site-header__inner .nav .nav-group--linked {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;                       /* button supplies its own breathing room */
  padding: .25rem .1rem;
}
.site-header__inner .nav .nav-group--linked .nav-group__label {
  /* Override the .nav a padding above so the link sits flush with the
     toggle button in the same baseline. */
  padding: 0;
}
/* The tap-to-toggle button beside the link. Sized at 44×44 minimum for
   touch (Apple/Google guidelines) so the caret has a real target on
   phones. On desktop the hover behavior still works without ever
   needing to click — the button is just a redundant affordance. */
.site-header__inner .nav .nav-group--linked .nav-group__toggle {
  background: transparent;
  border: 0;
  margin: 0;
  padding: .25rem .35rem;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.site-header__inner .nav .nav-group--linked .nav-group__toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hidden by default; the JS controller flips .is-open on tap, and the
   hover media query below also reveals it on hover/focus. */
.site-header__inner .nav .nav-group--linked > .nav-group__menu {
  display: none;
}
.site-header__inner .nav .nav-group--linked.is-open > .nav-group__menu {
  display: block;
}
.site-header__inner .nav .nav-group--linked.is-open .nav-group__caret {
  transform: rotate(180deg);
}

/* Hover-to-open on devices that actually have hover. Touch devices get
   tap-to-toggle via <details> on the non-linked variant. */
@media (hover: hover) and (pointer: fine) {
  .site-header__inner .nav .nav-group:hover > .nav-group__menu,
  .site-header__inner .nav .nav-group:focus-within > .nav-group__menu {
    display: block;
  }
  .site-header__inner .nav details.nav-group:not([open]) > .nav-group__menu {
    display: none;
  }
  .site-header__inner .nav .nav-group:hover .nav-group__caret,
  .site-header__inner .nav .nav-group:focus-within .nav-group__caret {
    transform: rotate(180deg);
  }
}

/* Mobile / narrow viewports — anchor every dropdown to the full width
   of the header instead of the small .nav-group wrapper, otherwise the
   panel (min-width 18rem, right:0) extends off the LEFT edge of the
   screen when its parent sits near the left of the (now left-aligned,
   wrapped) nav bar. Applies to both the <details> variant (About,
   Guides) and the .nav-group--linked variant. The wrappers go
   position:static on small screens so the absolute menu picks up
   .site-header__inner as its positioning context. */
@media (max-width: 720px) {
  .site-header__inner {
    position: relative;
  }
  .site-header__inner .nav .nav-group,
  .site-header__inner .nav .nav-group--linked {
    position: static;
  }
  .site-header__inner .nav .nav-group > .nav-group__menu,
  .site-header__inner .nav .nav-group--linked > .nav-group__menu {
    top: 100%;
    margin-top: .35rem;
    left: var(--container-gutter, 1rem);
    right: var(--container-gutter, 1rem);
    min-width: 0;
    max-width: none;
    width: auto;
    /* Distinguish the panel from the header's paper bg so the
       dropdown reads as a discrete surface on a phone where it
       spans the full width. Slightly warmer paper + a heavier ink
       border + a deeper shadow do the work. */
    background: var(--paper-2, #F3ECD6);
    border: 1px solid var(--ink);
    box-shadow: 0 16px 40px -18px rgba(28, 28, 28, .55);
  }
  /* Hover bridge is unnecessary on touch (no hover) and would land in
     the wrong place once the anchor changes. */
  .site-header__inner .nav .nav-group > .nav-group__menu::before,
  .site-header__inner .nav .nav-group--linked > .nav-group__menu::before {
    display: none;
  }
}

.site-footer {
  background: var(--ink);
  color: var(--paper);
  margin-top: 5rem;
  padding: 2.5rem var(--container-gutter);
}
.site-footer__inner {
  max-width: var(--container-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between;
}
.site-footer a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--highlighter); }
.site-footer small { color: color-mix(in srgb, var(--paper) 70%, transparent); }

/* Flash messages --------------------------------------------------------- */
.flash {
  max-width: var(--container-max); margin: 1rem auto;
  padding: .85rem 1rem; border-radius: var(--radius-md);
  font: var(--fw-600) var(--fs-16) var(--font-educating);
}
.flash--notice { background: color-mix(in srgb, var(--chalkboard) 18%, var(--paper)); color: var(--chalkboard-ink); border: 1px solid var(--chalkboard); }
.flash--alert  { background: color-mix(in srgb, var(--rose) 22%, var(--paper)); color: color-mix(in srgb, var(--rose) 80%, black); border: 1px solid var(--rose); }

/* Error summary in forms ------------------------------------------------- */
.error-summary {
  background: color-mix(in srgb, var(--rose) 18%, var(--paper));
  border-left: 4px solid var(--rose);
  padding: 1rem 1.25rem; border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
}
.error-summary h3 { margin: 0 0 .5rem; font: var(--fw-700) var(--fs-18) var(--font-display); }
.field--invalid .field-input,
.field--invalid .field-textarea { border-color: var(--rose); outline-color: var(--rose); }
.field-error { color: color-mix(in srgb, var(--rose) 80%, black); font-size: var(--fs-14); margin-top: .25rem; }

/* Admin bridge (minimal — enough to feel like an admin, not a public page) */
.admin-body { background: color-mix(in srgb, var(--paper) 85%, var(--chalkboard) 15%); }
.admin-shell {
  display: grid; grid-template-columns: 220px 1fr; min-height: 100vh;
}
.admin-sidebar {
  background: var(--ink); color: var(--paper);
  padding: 1.25rem 1rem; position: sticky; top: 0; height: 100vh;
}
.admin-sidebar h1 { font: var(--fw-700) var(--fs-22)/1 var(--font-display); margin: 0 0 1rem; }
.admin-sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.admin-sidebar a {
  display: block; color: var(--paper); text-decoration: none;
  padding: .45rem .6rem; border-radius: var(--radius-sm);
}
.admin-sidebar a:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); }
.admin-sidebar a.is-active { background: var(--highlighter-soft); color: var(--ink); }

.admin-main { padding: 2rem; max-width: 1100px; }
.admin-main h1 { font: var(--fw-700) var(--fs-32) var(--font-display); margin: 0 0 1rem; }
.admin-main table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden; }
.admin-main th, .admin-main td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--rule); }
.admin-main th { background: color-mix(in srgb, var(--paper) 92%, var(--ink) 8%); font-weight: var(--fw-700); }
.admin-main .actions { display: flex; gap: .5rem; }

/* Guides prev/next pager -------------------------------------------------- *
 * Rendered at the bottom of every Guides page via app/views/pages/_guide_pager.
 * Source of truth for the order is the nav menu (lib/tasks/nav.rake) — the
 * GuidesHelper walks the "Guides" header dropdown and skips placeholder ("#")
 * entries.
 * --------------------------------------------------------------------- */
.guide-pager {
  width: min(100%, var(--container-max));
  margin: clamp(48px, 6vw, 96px) auto 0;
  padding: clamp(28px, 3vw, 40px) var(--gutter, 1.25rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1.5rem;
}
.guide-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--ink);
  max-width: 28rem;
  /* Big tappable target on mobile, but no visual chrome unless hovered. */
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.guide-pager__link--next {
  text-align: right;
  align-items: flex-end;
}
.guide-pager__link:hover,
.guide-pager__link:focus-visible {
  color: var(--link, var(--ink-blue));
  border-bottom-color: var(--link-underline, currentColor);
}
.guide-pager__link:focus-visible {
  outline: 2px solid var(--focus-ring, var(--ink-blue));
  outline-offset: 4px;
}
.guide-pager__direction {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: var(--fs-12, 0.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.guide-pager__title {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}

@media (max-width: 600px) {
  .guide-pager {
    flex-direction: column;
    gap: 1.25rem;
  }
  .guide-pager__link--next {
    text-align: left;
    align-items: flex-start;
  }
}

/* Lead statement --------------------------------------------------------- */
/* An oversized standout line (e.g. the "already been done" promise that
   sits above the Hope video). Larger than body prose, and its bold words
   pick up the terracotta accent for extra emphasis. */
.lead-statement {
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  line-height: 1.3;
  margin: 0;
}
.lead-statement strong {
  color: var(--terracotta);
}
/* Narrow variant — pulls the left/right margins in for a tighter column. */
.lead-statement--narrow {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* Tiny utilities --------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }