@charset "UTF-8";

/* ==========================================================================
   UNIVERSAL / BASE CSS for Educational Websites – 2026 Edition
   ========================================================================== */

/* ── 1. Modern CSS Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
  vertical-align: baseline;
}

/* Remove list styles */
ul,
ol {
  list-style: none;
}

/* Media elements */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Forms */
input,
button,
textarea,
select {
  font: inherit;
}

/* Text wrapping */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

pre,
code,
kbd,
samp {
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── 2. Root & Typography Defaults ──────────────────────────────────────── */
:root {
  /* Fluid typography */
  --font-size-min: 15px;
  --font-size-max: 19px;
  --font-size-body: clamp(var(--font-size-min), 2.5vw + 0.8rem, var(--font-size-max));

  --line-height-body: 1.62;
  --line-height-heading: 1.25;

  /* ── Color Palette : Classic Trust Blue (DEFAULT) ── */
  --color-bg:      hsl(0 0% 100%);
  --color-surface: hsl(220 40% 98%);
  --color-text:    hsl(220 10% 15%);
  --color-text-light: hsl(220 10% 35%);
  --color-primary: hsl(221 83% 53%);
  --color-primary-dark: hsl(221 83% 45%);
  --color-accent:  hsl(221 83% 60%);
  --color-success: hsl(152 69% 31%);
  --color-warning: hsl(38 92% 50%);
  --color-error:   hsl(0 84% 60%);

  /*
  ── Option 2: Growth Green – Uncomment to switch ──
  --color-bg:      hsl(0 0% 100%);
  --color-surface: hsl(120 40% 98%);
  --color-text:    hsl(120 10% 15%);
  --color-text-light: hsl(120 10% 35%);
  --color-primary: hsl(152 69% 31%);
  --color-primary-dark: hsl(152 69% 25%);
  --color-accent:  hsl(152 69% 45%);
  --color-success: hsl(152 69% 31%);
  --color-warning: hsl(38 92% 50%);
  --color-error:   hsl(0 84% 60%);
  */

  /* Neutrals */
  --color-border:  hsl(220 13% 28%);
  --color-shadow:  hsl(220 3% 15% / 0.07);

  /* Focus */
  --focus-ring: 0 0 0 3px hsl(221 83% 53% / 0.4);
}

/* ── Dark Mode ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:      hsl(220 30% 8%);
    --color-surface: hsl(220 25% 12%);
    --color-text:    hsl(220 10% 95%);
    --color-text-light: hsl(220 10% 75%);
    --color-border:  hsl(220 13% 28%);
    --color-shadow:  hsl(220 3% 15% / 0.12);

    --color-primary: hsl(221 83% 65%);
    --color-accent:  hsl(221 83% 70%);
  }
}

/* ── Base HTML / Body ───────────────────────────────────────────────────── */
html {
  font-size: 100%;
  scroll-behavior: smooth;
  background-color: var(--color-bg);
  color: var(--color-text);
}

body {
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-heading);
  font-weight: 700;
  margin-block: 1.4em 0.6em;
}

h1 { font-size: clamp(2.2rem, 5vw + 1rem, 3.8rem); }
h2 { font-size: clamp(1.8rem, 4vw + 0.8rem, 3rem); }
h3 { font-size: clamp(1.5rem, 3.5vw + 0.6rem, 2.4rem); }
h4 { font-size: clamp(1.3rem, 3vw + 0.5rem, 1.9rem); }

/* Links */
a {
  color: var(--color-primary);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-primary-dark);
  text-decoration-thickness: 2px;
}

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

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

/* ── Layout Helpers ─────────────────────────────────────────────────────── */
.container {
  width: min(90%, 1280px);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Card / Surface */
.surface {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px var(--color-shadow);
  padding: 1.5rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.5em;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
  border: none;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   End of universal/base CSS
   Add component & page-specific styles below
   ========================================================================== */