/* ==========================================================================
   site.css — the shared design system for every page of eslparatodos.com:
   color tokens, the teal page header, the site nav tabs, and the footer.
   Page-specific styles live with each page (css/styles.css for the
   calendar; inline <style> blocks for Standards and Flipbook).
   ========================================================================== */

:root {
  /* palette */
  --green: #044E4F;
  --green-light: #076869;
  --green-pale: #e8f4f4;
  --coral: #E85D4A;
  --coral-light: #f08070;
  --sand: #F4E4C1;
  --sand-dark: #e8d4a8;
  --cream: #FFF8EC;
  --text-dark: #1a2a2a;
  --text-mid: #3a5050;
  --text-muted: #7a9090;
  --border: rgba(4, 78, 79, 0.15);

  /* calendar-page aliases (same colors, the calendar css uses these names) */
  --purple: #E85D4A;
  --navy: #044E4F;
  --page-bg: #FFF8EC;
  --card-bg: #FFFFFF;
  --adjacent-bg: #F0F2F0;
  --text: #1a2a2a;
  --muted: #3a5050;
  --muted-light: #7a9090;
  --adjacent-text: #9FAEAE;
  --chip-bg: #e8f4f4;
  --radius: 10px;
  --cell-min-h: 104px;

  /* district calendar day colors (see SPECIAL_DAYS in js/lessons.js) */
  --ev-blue: #2A5CA8;      /* Professional Development */
  --ev-blue-bg: #E4EBF6;
  --ev-yellow: #F8B23C;    /* Teacher Workday */
  --ev-yellow-bg: #FDF1DC;
  --ev-purple: #9A7EC8;    /* Staff / Student Holiday */
  --ev-purple-bg: #F0EBF7;
  --ev-red: #E02B39;       /* Fall Break */
  --ev-red-bg: #FBE4E6;
  --ev-green: #63C793;     /* Early Release Day */
  --ev-green-bg: #E6F6EE;
}

/* ------------------------------------------------------------ page header */

header {
  background: var(--green);
  padding: 2.5rem 2rem 2rem;
  position: relative;
  overflow: hidden;
}

header::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

header::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 30%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(232, 93, 74, 0.12);
}

.header-inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.header-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-light);
  margin-bottom: 0.5rem;
}

header h1 {
  margin: 0 0 0.5rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}

header h1 span { color: var(--sand); }

.header-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
}

.header-byline {
  margin-top: 1.25rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------- site nav */

.site-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
}

.site-tab {
  padding: 0.7rem 1.5rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}

.site-tab:hover { color: var(--green); }
.site-tab.active { color: var(--green); border-bottom-color: var(--coral); }

@media (max-width: 600px) {
  .site-tab { padding: 0.6rem 1rem; font-size: 0.78rem; }
}

/* ----------------------------------------------------------------- footer */

footer {
  text-align: center;
  padding: 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  border-top: 1px solid var(--border);
}