/* =========================================================================
   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 ("Team" / "Guides" sub-headers).
   The label is non-clickable; the children below it 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;
}
.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 the dropdown to the full width of
   the header instead of the small .nav-group--linked wrapper, otherwise
   the panel (min-width 18rem) extends off the left edge of the screen
   when About sits near the right side of the bar. The wrapper goes
   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--linked {
    position: static;
  }
  .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--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; }

/* 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; }