/* ==========================================================================
   Branch Out Learning Hive — shared stylesheet
   Loaded on every page. Tailwind handles layout; this file owns the
   design system: type scale, rhythm, focus states, and shared components.
   ========================================================================== */

:root {
  --brand-50:  #f0f9f1;
  --brand-100: #dcf0de;
  --brand-200: #bbdfc0;
  --brand-300: #8cc896;
  --brand-400: #5aab68;
  --brand-500: #3d9050;
  --brand-600: #2d7a3e;
  --brand-700: #266434;
  --brand-800: #1f512b;
  --brand-900: #1a4224;

  --ink-900: #14231a;
  --ink-700: #3d4a42;
  --ink-500: #63736a;

  /* Spacing rhythm — section padding steps up once at md */
  --section-y: 4rem;
  --section-y-lg: 6rem;

  --radius-card: 1rem;
  --radius-pill: 999px;

  /* One shadow ramp, used everywhere, so depth reads consistently */
  --shadow-sm: 0 1px 2px rgba(20, 35, 26, .04), 0 1px 3px rgba(20, 35, 26, .06);
  --shadow-md: 0 4px 6px -1px rgba(20, 35, 26, .07), 0 2px 4px -2px rgba(20, 35, 26, .05);
  --shadow-lg: 0 12px 20px -6px rgba(20, 35, 26, .10), 0 4px 8px -4px rgba(20, 35, 26, .06);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   1. Base & typography
   Fluid type so headings scale smoothly instead of jumping at breakpoints.
   Body sits at 17px minimum — this audience includes parents reading on
   phones, and 16px default is a floor, not a target.
   -------------------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-700);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: Georgia, Cambria, 'Times New Roman', serif;
  color: var(--ink-900);
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: balance;          /* stops orphan words in headings */
}

h1 { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }

p  { text-wrap: pretty; }

/* Cap measure on body copy — long lines are the single biggest
   readability failure on wide screens. */
.prose-measure { max-width: 68ch; }

/* Section rhythm helper — replaces ad-hoc py-16 sm:py-24 repetition */
.section      { padding-block: var(--section-y); }
@media (min-width: 768px) {
  .section    { padding-block: var(--section-y-lg); }
}

/* --------------------------------------------------------------------------
   2. Focus & motion — accessibility baseline
   -------------------------------------------------------------------------- */

/* Visible focus for keyboard users only, never a dead outline on mouse click.
   3px at 2px offset clears WCAG 2.2 focus-appearance comfortably. */
:focus-visible {
  outline: 3px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link — first tab stop on every page */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--brand-700);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 .5rem 0;
}
.skip-link:focus { left: 0; }

/* Honour reduced-motion. Animations become instant rather than removed,
   so nothing that depends on transitionend breaks. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Larger tap targets on touch devices — 44px is the WCAG 2.5.5 floor */
@media (pointer: coarse) {
  a, button, [role="button"], input[type="submit"] { min-height: 44px; }
  nav a { display: flex; align-items: center; }
}

/* --------------------------------------------------------------------------
   3. Components
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px); }   /* tactile press, no bounce */

.btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover  { background: var(--brand-700); box-shadow: var(--shadow-md); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background: var(--brand-200);
  color: var(--brand-700);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: #fff;
  color: var(--ink-900);
  border-color: #dfe5e1;
}
.btn-secondary:hover { border-color: var(--brand-400); background: var(--brand-50); }

.card {
  background: #fff;
  border: 1px solid #eef1ef;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease),
              border-color .22s var(--ease);
}
.card-interactive:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--brand-200);
}

/* Form controls — consistent height, clear invalid state.
   :not(:placeholder-shown) means the red ring only appears after the user
   has actually typed something, not while the field sits empty. */
.field {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid #d6ddd8;
  border-radius: .75rem;
  background: #fff;
  font-size: 1rem;
  color: var(--ink-900);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field:hover { border-color: #b9c4bd; }
.field:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.field:user-invalid:not(:placeholder-shown) {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px #fdecea;
}

.field-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: .375rem;
}
.field-hint { font-size: .8125rem; color: var(--ink-500); margin-top: .375rem; }

/* Underline-grow link, used in body copy */
.link {
  color: var(--brand-700);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--brand-400), var(--brand-400));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .25s var(--ease);
}
.link:hover { background-size: 100% 2px; }

/* Nav active state — replaces the inline colour-only cue, which was the
   only signal for the current page and failed on colour alone. */
.nav-link { position: relative; }
.nav-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--brand-600);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. Instagram feed
   -------------------------------------------------------------------------- */

.ig-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width: 640px) { .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px){ .ig-grid { grid-template-columns: repeat(6, 1fr); } }

.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: .75rem;
  background: var(--brand-50);
}
.ig-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.ig-tile:hover img { transform: scale(1.06); }

.ig-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,35,26,.55), transparent 55%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.ig-tile:hover::after, .ig-tile:focus-visible::after { opacity: 1; }

.ig-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: .625rem .75rem;
  color: #fff;
  font-size: .75rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.ig-tile:hover .ig-caption,
.ig-tile:focus-visible .ig-caption { opacity: 1; transform: translateY(0); }

/* Skeleton shown while the feed loads */
.ig-skeleton {
  aspect-ratio: 1;
  border-radius: .75rem;
  background: linear-gradient(100deg, #eef4ef 30%, #f7faf8 50%, #eef4ef 70%);
  background-size: 200% 100%;
  animation: ig-shimmer 1.4s infinite linear;
}
@keyframes ig-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   5. Booking wizard
   -------------------------------------------------------------------------- */

.step-rail { display: flex; align-items: center; gap: .5rem; }
.step-dot {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  font-size: .875rem; font-weight: 700;
  background: #eef1ef; color: var(--ink-500);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.step-dot[data-state="active"] { background: var(--brand-600); color: #fff; }
.step-dot[data-state="done"]   { background: var(--brand-100); color: var(--brand-700); }
.step-bar { flex: 1; height: 2px; background: #eef1ef; }
.step-bar[data-state="done"] { background: var(--brand-300); }

/* Selectable option card (founder / service) */
.choice {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem;
  border: 2px solid #e6eae7;
  border-radius: var(--radius-card);
  background: #fff;
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              transform .18s var(--ease);
}
.choice:hover { border-color: var(--brand-300); transform: translateY(-2px); }
.choice[aria-pressed="true"] {
  border-color: var(--brand-600);
  background: var(--brand-50);
}

/* Time slots */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: .5rem;
}
.slot {
  padding: .625rem .5rem;
  border: 1px solid #dfe5e1;
  border-radius: .625rem;
  background: #fff;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.slot:hover:not(:disabled) { border-color: var(--brand-500); background: var(--brand-50); }
.slot[aria-pressed="true"] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.slot:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

/* --------------------------------------------------------------------------
   6. Admin — stat cards & bar chart
   -------------------------------------------------------------------------- */

.stat-card { padding: 1.25rem; border-radius: var(--radius-card); background: #fff; border: 1px solid #eef1ef; }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--ink-900); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .8125rem; color: var(--ink-500); font-weight: 500; }
.stat-delta-up   { color: #1e7a45; }
.stat-delta-down { color: #b03a2e; }

.bar-track { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.bar {
  flex: 1;
  min-height: 2px;
  background: var(--brand-300);
  border-radius: 3px 3px 0 0;
  transition: background-color .15s var(--ease);
}
.bar:hover { background: var(--brand-600); }

/* Print — parents do print policy pages */
@media print {
  header, footer, .no-print { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}