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

.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; }