/* =========================================================
   PASchoolStages • Global Styles
   Primary: Blue  |  Secondary: Emerald
   Fonts: Montserrat (headings) + Poppins (body)
   ========================================================= */

/* ---------- Design Tokens (Light) ---------- */
:root {
  /* Base */
  --bg: #f7f7f8;
  --surface: #ffffff;
  --ink: #1b1e23;
  --muted: #6b7280;
  --rule: #e7e8eb;

  /* Primary brand (Blue) */
  --accent: #3b82f6;      /* main blue */
  --accent-ink: #1d4ed8;  /* darker blue for hover/ink */

  /* Secondary brand (Emerald) */
  --accent-2: #10b981;     /* emerald */
  --accent-2-ink: #059669; /* darker emerald for hover/ink */

  /* States */
  --success: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;

  /* Effects */
  --shadow: 0 10px 30px rgba(17,24,39,.06);
  --shadow-sm: 0 2px 10px rgba(17,24,39,.06);
  --radius: 14px;
  --radius-lg: 16px;

  /* Typography scale helpers */
  --h1: clamp(28px, 5vw, 40px);
  --h1-hero: clamp(32px, 6vw, 62px);
  --h2: 20px;
  --body: 16px;
  --small: 14px;
}

/* ---------- Auto Dark (respects user preference) ---------- 
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --surface: #0b1224;
    --ink: #e5e7eb;
    --muted: #94a3b8;
    --rule: #1e293b;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --shadow-sm: 0 2px 10px rgba(0,0,0,.25);
  }
} ----*/

/* ---------- Resets / Base ---------- */
* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  font-size: var(--body);
  line-height: 1.55;
}

/* Improve focus visibility */
:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent) 65%, white);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Typography */
h1, h2, h3 {
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
}
h1 { font-size: var(--h1); line-height: 1.1 }
h2 { font-size: var(--h2) }

/* Links */
a { color: var(--accent-ink); text-decoration: none }
a:hover { text-decoration: underline }

/* Utilities */
.hidden { display: none !important }
.muted { color: var(--muted) }

/* ---------- Layout: Header / Nav ---------- */
header.site, header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(120%) blur(8px);
  background: color-mix(in oklab, white 86%, transparent);
  border-bottom: 1px solid var(--rule);
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 14px 20px }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px }

.brand { display: inline-grid; grid-auto-flow: column; gap: 10px; align-items: center }
.logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: conic-gradient(from 210deg, var(--accent), #60a5fa 60%, var(--accent));
  box-shadow: 0 8px 18px rgba(59,130,246,.25);
}
.brand-name { font-family: Montserrat, sans-serif; font-weight: 800; letter-spacing: .2px }

nav a {
  color: var(--ink); font-weight: 600; font-size: 14px;
  padding: 8px 12px; border-radius: 10px;
}
nav a:hover { background: #eef2ff; color: var(--accent-ink) }

.brand-logo {
  height: 40px;   /* adjust as needed */
  margin-right: 8px;
  vertical-align: middle;
}
.brand-name {
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}

/* ---------- Hero / Page Heading Blocks ---------- */
.page-head, .page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px 12px;
}
.subtle { color: var(--muted); margin-top: 6px }

/* Optional hero background (no image) */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(800px 400px at 20% -10%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(800px 400px at 90% 20%, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(180deg,#fafafa 0%, var(--bg) 60%, var(--bg) 100%);
}
.hero::after {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 14px 14px; opacity:.5; pointer-events:none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 60%);
}

/* === Hero logo beside heading (square logo) === */
.hero-intro .hero-top {
  display: flex;
  align-items: center;   /* center logo with text block */
  gap: 20px;
  margin-bottom: 20px;
}
.hero-logo {
  height: 150px;   /* good starting size for square logo */
  width: auto;
  flex-shrink: 0;
}
.hero-text { flex: 1; }

/* Stack on mobile */
@media (max-width: 680px) {
  .hero-intro .hero-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-logo { height: 72px; }
}


/* ---------- Info Bars / Callouts ---------- */
.callout,
.coming-soon {
  max-width:1120px; margin:12px auto 28px; padding:16px 20px;
  background:#eef2ff; color:#1d4ed8; border:1px solid #c7d2fe;
  border-radius: 12px; box-shadow: var(--shadow-sm); font-weight: 600;
}
.callout.accent2 {
  background: color-mix(in oklab, var(--accent-2) 10%, white);
  color: var(--accent-2-ink);
  border-color: color-mix(in oklab, var(--accent-2) 55%, #c7d2fe 0%);
}

/* ---------- Controls (Filters / Search) ---------- */
.controls {
  max-width:1120px; margin:0 auto; padding:12px 20px 18px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.controls input, .controls select {
  padding:10px 12px; border:1px solid var(--rule); border-radius:12px;
  background:#fff; min-width:180px; font:600 14px/1 Poppins, sans-serif;
  color:var(--ink); box-shadow: var(--shadow-sm);
}
.controls input { flex: 1 1 260px; min-width:240px }

/* ---------- Sections & Underlines ---------- */
.section { max-width: 1120px; margin: 0 auto; padding: 14px 20px 6px }
.section h2 { font-size: var(--h2) }

.underline {
  height: 2px; background: var(--rule);
  margin: 10px 0 16px; width: 240px; max-width: 100%;
}
.underline.accent2 { background: var(--accent-2); opacity: .9 }

/* Heading underline utility */
.h2-underline {
  display: inline-block;
  position: relative;
  padding-bottom: 8px;     /* space between text and line */
  margin-bottom: 20px;     /* space between heading+line and content below */
}

.h2-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent-2);   /* emerald accent */
}


/* ---------- Grids ---------- */
.grid {
  max-width:1120px; margin:0 auto; padding:0 20px 8px;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px;
}
@media (max-width:860px){ .grid { grid-template-columns:1fr } }

/* Shared container to standardize widths */
.container { max-width:1120px; margin:0 auto; padding:0 20px; }

/* When a grid lives inside a container, let the container control width */
.container > .grid { max-width: none; margin: 0; padding: 0; }

/* FAQ list = single-column cards */
.grid.faq { grid-template-columns: 1fr; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.card.split {
  display:grid; grid-template-columns:140px 1fr; gap:16px; align-items:center;
}

/* Show Card specific bits */
.date {
  background:#f3f4f6; border:1px solid var(--rule); border-radius:12px; padding:10px 12px;
}
.date .label { font:700 12px/1 Poppins, sans-serif; color:#6b7280; margin-bottom:6px }
.date .value { font:700 16px/1.2 Montserrat, sans-serif }

.meta .school { font:800 18px/1.2 Montserrat, sans-serif; margin-bottom:6px }
.meta .title  { color:#4b5563; margin-bottom:8px; font-weight:600 }
.meta .line   { font-size:14px; color:#374151; margin-top:6px }
.meta .row    { font-size:14px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px }
.meta .row a  { color: var(--accent-ink); text-decoration: none; font-weight: 600 }
.meta .row a:hover { text-decoration: underline }

/* Chips (tags / socials) */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--rule); border-radius:999px;
  padding:6px 10px; font-size:13px; color:#6b7280; text-decoration:none; background:#fff;
}
.chip:hover { border-color:#cfd6df }
.chip.accent2 {
  border-color: color-mix(in oklab, var(--accent-2) 35%, var(--rule));
  color: var(--accent-2-ink);
}
.chip.accent2:hover { border-color: var(--accent-2-ink) }

.dot { width:12px; height:12px; border-radius:50% }
.dot.fb { background:#3b5998 }
.dot.ig { background:#c13584 }

/* ---------- Buttons ---------- */
.btn {
  appearance:none; border:1px solid #c7d2fe; border-radius:12px;
  background:#fff; color:var(--accent-ink);
  padding:10px 14px; font:700 14px/1 Poppins, sans-serif;
  cursor:pointer; box-shadow: var(--shadow-sm);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover { background:#f8fafc }

.btn.primary {
  background: var(--accent); color:#fff; border-color: transparent; box-shadow: var(--shadow);
}
.btn.primary:hover { background: var(--accent-ink) }

/* Secondary accent button variants (use sparingly) */
.btn.accent2 {
  border-color: var(--accent-2-ink);
  color: var(--accent-2-ink);
}
.btn.accent2:hover {
  background: color-mix(in oklab, var(--accent-2) 12%, white);
}
.btn.accent2-solid {
  background: var(--accent-2);
  color:#fff;
  border-color: transparent;
}
.btn.accent2-solid:hover { background: var(--accent-2-ink) }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--rule);
  background: #fff;
  margin-top: 20px;
}
.foot {
  max-width:1120px; margin:0 auto; padding:18px 20px;
  color:#4b5563; font-size:14px;
}
footer a { color: var(--accent-ink); text-decoration:none; font-weight:700 }
footer a:hover { text-decoration: underline }

/* === HOMEPAGE 3‑COLUMN OVERRIDE — keep this at the very end === */
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
@media (max-width: 860px) {
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 680px) {
  .grid.cols-3 { grid-template-columns: 1fr !important; }
  
}

/* === Mobile polish === */

/* Stack split cards (dates + meta) on narrow phones */
@media (max-width: 560px) {
  .card.split { 
    display: grid;
    grid-template-columns: 1fr; 
  }
}

/* Let the top nav breathe & wrap on smaller tablets */
@media (max-width: 740px) {
  .nav { 
    flex-wrap: wrap; 
    gap: 8px; 
  }
  nav[aria-label="Primary"] { 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
  }
}

/* ===== Hamburger header ===== */
header.site { position: sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid #eee; }
.wrap.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo { height:28px; width:auto; }
.brand-name { font-family: Montserrat, sans-serif; font-weight:800; letter-spacing:.2px; color:#1b1e23; }

/* Desktop nav */
.primary-nav { display:flex; gap:14px; }
.primary-nav a { font-weight:600; text-decoration:none; color:#1b1e23; padding:8px 10px; border-radius:10px; }
.primary-nav a:hover { background:#eef2ff; color:#1d4ed8; }

/* Mobile hamburger */
.nav-toggle { display:none; background:transparent; border:0; padding:8px; border-radius:10px; }
.nav-toggle .bar { display:block; width:22px; height:2px; background:#111; margin:4px 0; transition:.2s transform; }
.nav-toggle:focus-visible { outline:3px solid #9ac3ff; }

/* Mobile drawer */
.mobile-nav { display:none; flex-direction:column; gap:6px; padding:12px 20px 16px; border-top:1px solid #eee; }
.mobile-nav a { padding:10px 8px; border-radius:10px; color:#1b1e23; text-decoration:none; font-weight:600; }
.mobile-nav a:hover { background:#f5f7ff; }

/* Breakpoint: switch to hamburger */
@media (max-width: 800px) {
  .primary-nav { display:none; }
  .nav-toggle { display:block; }
  .mobile-nav.is-open { display:flex; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity:0; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* Splash hero (homepage only) */
.splash-hero {
  background: url('assets/hero.jpg') center/cover no-repeat; /* swap in your image */
  padding: 60px 20px;   /* white-space around */
}

/* Inner container */
.splash-inner { ... }

.splash-top { ... }
.splash-logo { ... }
.splash-text h1 { ... }
.splash-text .tagline { ... }

.splash-inner .controls { ... }


/* === Homepage splash image (scoped; no global color changes) === */
.splash-hero {
  background-image: url('assets/hero.jpg'); /* update path if needed */
  background-size: cover;
  background-position: center;
}

/* Make ONLY the hero’s text white on top of the image */
.splash-hero h1,
.splash-hero .subtle,
.splash-hero p {
  color: #fff;
}

/* Mobile header behavior — place LAST in the file */
.primary-nav { display: flex; }   /* desktop default */
.nav-toggle { display: none; }    /* desktop default */

/* Hide desktop links / show hamburger on mobile */
@media (max-width: 860px) {
  .primary-nav { display: none !important; }
  .nav-toggle  { display: inline-flex !important; }
  .mobile-nav  { display: none; }               /* closed by default */
  .mobile-nav.is-open { display: flex; }        /* toggled via JS */
}

/* Hamburger visuals */
.nav-toggle {
  display: none;                /* shown via media query */
  background: transparent;
  border: 0;
  padding: 8px;
  border-radius: 10px;
  line-height: 0;               /* remove extra inline height */
}

.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #111;
  margin: 5px 0;                /* vertical gap = three distinct lines */
  transition: transform .2s ease, opacity .2s ease;
}

/* Show hamburger on mobile, hide desktop links */
@media (max-width: 860px) {
  .primary-nav { display: none !important; }
  .nav-toggle  { display: inline-flex !important; }
  .mobile-nav  { display: none; }
  .mobile-nav.is-open { display: flex; }
}

/* Animate into “X” when open */
.nav-toggle[aria-expanded="true"] .bar:nth-of-type(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .bar:nth-of-type(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .bar:nth-of-type(3) {
  transform: translateY(-7px) rotate(-45deg);
}