/*
 * School Console — base reset & typography.
 * Loaded after sc-theme.css; before sc-components.css.
 * Intentionally narrow — does NOT replace bootstrap.css in v1 because some legacy
 * pages still rely on Bootstrap-4 grid. The .sc-* namespace below is the new system;
 * .container / .row / .col-* remain available for legacy pages until they migrate.
 */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--sc-font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sc-ink-2);
    background: var(--sc-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headings */
h1, h2, h3, h4, h5, h6, .sc-h {
    font-family: var(--sc-font-sans);
    color: var(--sc-ink);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 var(--sc-s-4) 0;
}

h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }

p { margin: 0 0 var(--sc-s-4) 0; }

a {
    color: var(--sc-primary);
    text-decoration: none;
    transition: color 120ms ease;
}
a:hover { color: var(--sc-primary-700); text-decoration: underline; }
a:focus-visible {
    outline: 2px solid var(--sc-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip-link for keyboard users (a11y) */
.sc-skip-link {
    position: absolute;
    left: -9999px;
    z-index: 9999;
}
.sc-skip-link:focus {
    left: var(--sc-s-4);
    top: var(--sc-s-4);
    padding: var(--sc-s-3) var(--sc-s-5);
    background: var(--sc-ink);
    color: white;
    border-radius: var(--sc-radius);
}

/* Container */
.sc-container {
    width: 100%;
    max-width: var(--sc-container);
    margin: 0 auto;
    padding: 0 var(--sc-s-5);
}
.sc-container--narrow {
    max-width: var(--sc-container-narrow);
}

/* Section spacing */
.sc-section {
    padding: var(--sc-s-9) 0;
}
.sc-section--tight {
    padding: var(--sc-s-7) 0;
}
.sc-section--alt {
    background: var(--sc-surface-2);
}
/* CtaBanner sits at the bottom of every page, sandwiched between the previous
   section (which already has its own bottom padding) and the footer. Tight both
   sides so the gradient block doesn't float in a sea of white — full sc-s-9
   spacing top+bottom adds up to ~192 px above and ~96 px below, which reads as
   "disconnected promo strip" instead of "final call to action." Top is sc-s-6
   (32 px) for visual grouping with the preceding content; bottom is sc-s-2 (8 px)
   so the gradient hugs the dark footer immediately below. */
.sc-section--cta-last { padding-top: var(--sc-s-6); padding-bottom: var(--sc-s-2); }

/* Layout helpers */
.sc-grid {
    display: grid;
    gap: var(--sc-s-5);
}
.sc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Strict variants — exactly N columns on desktop, downgraded responsively.
   Use when item count is fixed and you want to avoid the auto-fit overflow
   that turns "6 items in a 3-col grid" into "4-col + 2 empty cells" on wide screens. */
.sc-grid--3-strict { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .sc-grid--3-strict { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sc-grid--3-strict { grid-template-columns: 1fr; } }

.sc-stack > * + * { margin-top: var(--sc-s-4); }
.sc-stack--lg > * + * { margin-top: var(--sc-s-6); }

/* Visually hide but keep accessible */
.sc-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;
}

/* Images */
img { max-width: 100%; height: auto; display: block; }

/* Honeypot — visually hidden, present in DOM (§9.9.3) */
.sc-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ============================================================
 * Responsive — explicit mobile-first breakpoints.
 * Targets: 320 / 480 / 768 (tablet portrait) / 960 (tablet landscape) / 1200 (desktop).
 * Largest desktop assumed (sc-container max 1200px); below 1200 we shrink padding,
 * type, and spacing tokens.
 * ============================================================ */

/* Tablet (≤ 960px) */
@media (max-width: 960px) {
    body { font-size: 15.5px; }
    .sc-container { padding-inline: var(--sc-s-4); }
    .sc-section { padding: var(--sc-s-8) 0; }
    .sc-section--tight { padding: var(--sc-s-6) 0; }
}

/* Mobile (≤ 760px) */
@media (max-width: 760px) {
    body { font-size: 15px; line-height: 1.55; }
    .sc-container { padding-inline: var(--sc-s-4); }
    .sc-section { padding: var(--sc-s-7) 0; }
    .sc-section--tight { padding: var(--sc-s-6) 0; }
    h6 { letter-spacing: 0.03em; }
    /* Tighten grid gaps on mobile */
    .sc-grid { gap: var(--sc-s-4); }
    /* Make all grids single-column by default on phones; specific components opt back into multi-col */
    .sc-grid--3, .sc-grid--4 { grid-template-columns: 1fr; }
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {
    .sc-container { padding-inline: var(--sc-s-3); }
    .sc-section { padding: var(--sc-s-6) 0; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.625rem; }
    h3 { font-size: 1.25rem; }
}

/* Touch-friendly tap targets — every interactive element ≥ 44×44 on coarse pointers */
@media (pointer: coarse) {
    .sc-btn { min-height: 44px; padding-block: var(--sc-s-3); }
    .sc-topnav__link { min-height: 44px; }
    .sc-topnav__menu a { min-height: 44px; }
    .sc-faq summary { padding-block: var(--sc-s-2); min-height: 44px; }
    a, button, [role="button"] { -webkit-tap-highlight-color: rgba(124, 58, 237, .12); }
}

/* Respect users' reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print — minimal, marketing-site-friendly */
@media print {
    .sc-topnav, .sc-footer, .sc-cta-banner, .sc-skip-link { display: none !important; }
    body { color: black; background: white; font-size: 12pt; }
    a { color: black; text-decoration: underline; }
}