/* =====================
   ROOT & RESET
   ===================== */
:root {
  --nav-bg: #bcecff;
  --radius: 20px;
  --container: 1000px;
  --brand-bg: #14c4ca;
  --accent: #14c4ca;
}

body {
  background-color: rgb(255, 249, 160);
  font-family: 'Baloo 2', cursive;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

/* =====================
   BRAND BAR
   ===================== */
.brand {
  background-color: var(--brand-bg);
  padding: 15px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =====================
   HERO — with background image
   ===================== */
.hero {
  position: relative;          /* needed so .hero-bg can sit behind text */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 60px 30px;
  overflow: hidden;            /* keeps image clipped to the hero box */
  min-height: 200px;
}

/* The background image layer */
.hero-bg {
  position: absolute;
  inset: 0;                    /* shorthand for top:0 right:0 bottom:0 left:0 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;                /* 70% opacity as requested */
  z-index: 0;
}

/* Text sits on top of the image */
.hero-text {
  position: relative;
  z-index: 1;
}

.hero-text h1 {
  margin-bottom: 10px;
  font-size: 2.2rem;
  text-shadow: 0 1px 4px rgba(255,255,255,0.6); /* keeps text readable over image */
}

/* =====================
   NAV (navigation bar)
   ===================== */
.nav-bar {
  background: var(--nav-bg);
  border-radius: var(--radius);
  padding: 12px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  gap: 30px;
  max-width: var(--container);
}

/* =====================
   MAIN LAYOUT (homepage)
   ===================== */
.main-layout {
  display: flex;
  gap: 30px;
  margin: 40px;
  align-items: flex-start;
}

.left {
  flex: 2;
  background: #c7dde3;
  max-width: 700px;
}

.right {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* =====================
   BOXES (i like boxesss)
   ===================== */
.box {
  padding: 25px;
  border-radius: 25px;
}

.box h2 {
  margin-top: 0;
}

.box p {
  margin: 10px 0;
}

.media-box {
  background: #dcdcdc;
  border-radius: 20px;
  overflow: hidden;
  height: 220px;
  padding: 0;
}

.media-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.small-box {
  background: #efe7c7;
}

/* =====================
   SESSIONS SECTION
   ===================== */
.section {
  width: 100%;
  max-width: 700px;
  margin: 2rem 0 2rem 40px;
  padding: 2rem;
  border-radius: var(--radius);
  background: rgb(250, 255, 185);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  box-sizing: border-box;
}

/* =====================
   BUTTONS & LINKS
   ===================== */
.btn {
  display: inline-block;
  background: var(--accent);
  padding: 12px 20px;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.85;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: rgb(66, 148, 141);
}

/* =====================
   FOOTER
   ===================== */
footer {
  text-align: center;
  padding: 1.5rem;
  font-size: 0.9rem;
  margin-top: 2rem;
}

/* =====================
   UTILITIES
   ===================== */
.highlight {
  margin-top: 20px;
  padding: 15px;
  background: #fff7a0;
  border-radius: 12px;
  font-size: 1.1rem;
}

.caption {
  font-size: 0.9rem;
  text-align: center;
  margin-top: 5px;
}

/* =====================
   RESPONSIVE — mobile
   ===================== */
@media (max-width: 640px) {
  .main-layout {
    flex-direction: column;
    margin: 20px;
  }

  .left {
    max-width: 100%;
  }

  .section {
    margin: 1.5rem 20px;
    width: auto;
  }

  .hero-text h1 {
    font-size: 1.6rem;
  }

  .nav-bar {
    flex-wrap: wrap;
    gap: 14px;
    margin: 12px 16px;
  }
}

/* =====================
   EXPLANATION PAGE STYLES
   ===================== */

/* Hero banner */
.exp-hero {
  max-width: var(--container);
  margin: 3rem auto 2rem;
  padding: 0 40px;
  text-align: center;
}

.exp-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f6e56;
  margin-bottom: 0.5rem;
}

.exp-title {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.exp-dot {
  color: var(--accent, #14c4ca);
}

.exp-subtitle {
  font-size: 1.1rem;
  max-width: 640px;
  margin: 0 auto 2rem;
  line-height: 1.7;
  color: #333;
}

/* Jump links */
.exp-jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 1rem;
}

.exp-jump-links a {
  background: #14c4ca;
  color: white;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.exp-jump-links a:hover {
  opacity: 0.8;
  color: white;
}

/* =====================
   TECHNIQUE ARTICLES
   ===================== */
.technique {
  max-width: var(--container);
  margin: 3rem auto;
  padding: 0 40px;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* Big decorative number */
.technique-number {
  font-size: 5rem;
  font-weight: 800;
  color: #14c4ca;
  opacity: 0.25;
  line-height: 1;
  flex-shrink: 0;
  width: 80px;
  text-align: right;
  padding-top: 0.2rem;
}

.technique-content {
  flex: 1;
}

.technique-tag {
  display: inline-block;
  background: #bcecff;
  color: #0a6e7e;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 0.75rem;
}

.technique-content h2 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 1.25rem;
  color: #111;
}

.technique-hook {
  font-size: 1.2rem;
  font-weight: 600;
  color: #0f6e56;
  border-left: 4px solid #14c4ca;
  padding-left: 16px;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.technique-content p {
  line-height: 1.8;
  color: #222;
  margin-bottom: 1rem;
}

/* "Try it" box */
.try-it {
  background: rgb(255, 249, 160);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 1.5rem 0 1rem;
}

.try-it-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f6e56;
  margin-bottom: 8px;
}

.try-it p {
  margin: 0;
  font-size: 1rem;
  color: #333;
  line-height: 1.7;
}

/* Source links */
.technique-sources {
  font-size: 0.85rem;
  color: #666;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.technique-sources span {
  font-weight: 600;
  color: #444;
}

.technique-sources a {
  color: #0a6e7e;
  text-decoration: underline;
  font-size: 0.85rem;
}

.technique-sources a:hover {
  color: #14c4ca;
}

/* Divider between sections */
.technique-divider {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  border: none;
  border-top: 2px dashed #bcecff;
}

/* =====================
   SPACED REPETITION VISUAL
   ===================== */
.spaced-visual {
  background: #f0fdfc;
  border-radius: 16px;
  padding: 20px;
  margin: 1.5rem 0;
}

.spaced-row {
  margin-bottom: 10px;
}

.spaced-bar {
  background: #14c4ca;
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  display: inline-block;
  min-width: 130px;
  transition: width 0.4s ease;
}

.spaced-review {
  background: #0f6e56;
}

.spaced-caption {
  font-size: 0.82rem;
  color: #555;
  margin: 10px 0 0;
  font-style: italic;
}

/* =====================
   SUMMARY SECTION
   ===================== */
.exp-summary {
  background: #14c4ca;
  padding: 3rem 40px;
  text-align: center;
  margin-top: 4rem;
}

.exp-summary h2 {
  color: white;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  max-width: var(--container);
  margin: 0 auto 2rem;
}

.summary-card {
  background: white;
  border-radius: 20px;
  padding: 24px 20px;
  text-align: center;
}

.summary-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.summary-card strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #111;
}

.summary-card p {
  font-size: 0.9rem;
  color: #444;
  margin: 0;
  line-height: 1.5;
}

.exp-summary .btn {
  background: white;
  color: #0a6e7e;
  font-size: 1rem;
  padding: 14px 28px;
}

.exp-summary .btn:hover {
  opacity: 0.9;
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 640px) {
  .exp-title { font-size: 2rem; }
  .exp-hero { padding: 0 20px; }

  .technique {
    flex-direction: column;
    padding: 0 20px;
    gap: 10px;
  }

  .technique-number {
    font-size: 3rem;
    width: auto;
    text-align: left;
  }

  .technique-divider { padding: 0 20px; }
  .exp-summary { padding: 2rem 20px; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================
   FUN FACTS PAGE STYLES
   ===================== */

.ff-hero {
  text-align: center;
  padding: 3rem 40px 1rem;
  max-width: var(--container);
  margin: 0 auto;
}

.ff-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f6e56;
  margin-bottom: 0.4rem;
}

.ff-hero h1 {
  font-size: 2.6rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
}

.ff-sub {
  font-size: 1.05rem;
  color: #333;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* =====================
   FILTER BUTTONS
   ===================== */
.ff-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 1.5rem 40px 0.5rem;
  max-width: var(--container);
  margin: 0 auto;
}

.ff-filter {
  padding: 8px 20px;
  border-radius: 30px;
  border: 2px solid #14c4ca;
  background: white;
  color: #0a6e7e;
  font-family: 'Baloo 2', cursive;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ff-filter:hover,
.ff-filter.active {
  background: #14c4ca;
  color: white;
}

/* =====================
   FACTS GRID
   ===================== */
.ff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  max-width: var(--container);
  margin: 2rem auto;
  padding: 0 40px;
}

/* Standard card */
.ff-card {
  background: white;
  border-radius: 20px;
  padding: 24px 22px;
  border-top: 5px solid #14c4ca;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ff-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.09);
}

/* Large card — spans 2 columns on wide screens */
.ff-card--large {
  grid-column: span 2;
  background: #f0fdfc;
}

/* Wide card — also spans 2 columns */
.ff-card--wide {
  grid-column: span 2;
}

/* Accent card — yellow tint */
.ff-card--accent {
  background: rgb(255, 249, 160);
  border-top-color: #0f6e56;
}

/* Big stat number on the large card */
.ff-card-num {
  font-size: 4rem;
  font-weight: 800;
  color: #14c4ca;
  margin: 0 0 0.25rem;
  line-height: 1;
}

.ff-card h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 10px;
  color: #111;
  line-height: 1.35;
}

.ff-card p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #333;
  margin: 0 0 10px;
}

/* Category tags */
.ff-card-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
  background: #bcecff;
  color: #0a6e7e;
}

.ff-tag--sleep   { background: #d5e8ff; color: #1a5fa8; }
.ff-tag--brain   { background: #fde8ff; color: #7a1a99; }
.ff-tag--memory  { background: #bcecff; color: #0a6e7e; }
.ff-tag--habits  { background: #d5fbe8; color: #0a6e40; }

/* Source link */
.ff-source {
  display: inline-block;
  font-size: 0.78rem;
  color: #0a6e7e;
  text-decoration: underline;
  margin-top: 4px;
}

.ff-source:hover { color: #14c4ca; }

/* =====================
   BOTTOM CTA
   ===================== */
.ff-cta {
  text-align: center;
  background: #c7dde3;
  padding: 3rem 40px;
  margin-top: 1rem;
}

.ff-cta h2 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.ff-cta p {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1.5rem;
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 640px) {
  .ff-hero { padding: 2rem 20px 1rem; }
  .ff-hero h1 { font-size: 1.9rem; }
  .ff-grid { padding: 0 20px; grid-template-columns: 1fr; }
  .ff-card--large,
  .ff-card--wide { grid-column: span 1; }
  .ff-filters { padding: 1rem 20px 0; }
  .ff-cta { padding: 2rem 20px; }
}

/* =====================
   GLOSSARY PAGE STYLES
   ===================== */

.glos-hero {
  text-align: center;
  padding: 3rem 40px 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
}

.glos-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f6e56;
  margin-bottom: 0.4rem;
}

.glos-hero h1 {
  font-size: 2.6rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
}

.glos-sub {
  font-size: 1rem;
  color: #444;
  margin-bottom: 1.5rem;
}

/* Search bar */
.glos-search-wrap {
  max-width: 420px;
  margin: 0 auto 1.25rem;
}

.glos-search {
  width: 100%;
  padding: 12px 20px;
  font-size: 1rem;
  font-family: 'Baloo 2', cursive;
  border: 2px solid #14c4ca;
  border-radius: 40px;
  background: white;
  outline: none;
  box-sizing: border-box;
  transition: box-shadow 0.2s ease;
}

.glos-search:focus {
  box-shadow: 0 0 0 4px rgba(20,196,202,0.2);
}

/* Alphabet bar */
.alpha-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 0.5rem;
}

.alpha-bar a {
  background: #bcecff;
  color: #0a6e7e;
  font-weight: 700;
  font-size: 0.9rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.alpha-bar a:hover {
  background: #14c4ca;
  color: white;
}

/* =====================
   GLOSSARY ENTRIES
   ===================== */
.glos-main {
  max-width: var(--container);
  margin: 1.5rem auto 3rem;
  padding: 0 40px;
}

.glos-letter-group {
  margin-bottom: 2rem;
}

.glos-letter-badge {
  display: inline-block;
  background: #14c4ca;
  color: white;
  font-size: 1.4rem;
  font-weight: 800;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.glos-entry {
  background: white;
  border-left: 5px solid #14c4ca;
  border-radius: 0 14px 14px 0;
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.glos-entry:hover {
  transform: translateX(4px);
  box-shadow: 2px 4px 16px rgba(0,0,0,0.07);
}

.glos-term {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0a6e7e;
  margin-bottom: 6px;
}

.glos-def {
  font-size: 0.97rem;
  line-height: 1.75;
  color: #222;
}

.glos-source {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #0a6e7e;
  text-decoration: underline;
}

.glos-source:hover {
  color: #14c4ca;
}

.glos-noresult {
  text-align: center;
  font-size: 1.1rem;
  color: #666;
  padding: 3rem 0;
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 640px) {
  .glos-hero { padding: 2rem 20px 1rem; }
  .glos-hero h1 { font-size: 1.9rem; }
  .glos-main { padding: 0 20px; }
}

/* =====================
   RESOURCES PAGE STYLES
   ===================== */

.res-hero {
  text-align: center;
  padding: 3rem 40px 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
}

.res-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f6e56;
  margin-bottom: 0.4rem;
}

.res-hero h1 {
  font-size: 2.6rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
}

.res-sub {
  font-size: 1.05rem;
  color: #333;
  max-width: 560px;
  margin: 0 auto 1.75rem;
  line-height: 1.7;
}

/* =====================
   AUDIENCE TABS
   ===================== */
.res-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.res-tab {
  padding: 8px 22px;
  border-radius: 30px;
  border: 2px solid #14c4ca;
  background: white;
  color: #0a6e7e;
  font-family: 'Baloo 2', cursive;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.res-tab:hover,
.res-tab.active {
  background: #14c4ca;
  color: white;
}

/* =====================
   MAIN LAYOUT
   ===================== */
.res-main {
  max-width: var(--container);
  margin: 2rem auto 1rem;
  padding: 0 40px;
}

/* =====================
   SECTION HEADERS
   ===================== */
.res-section {
  margin-bottom: 3rem;
}

.res-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
  padding-bottom: 10px;
  border-bottom: 3px solid #14c4ca;
}

.res-section-icon {
  width: 44px;
  height: 44px;
  background: #14c4ca;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.res-section-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
}

/* =====================
   RESOURCE CARDS GRID
   ===================== */
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* Card base */
.res-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 18px;
  padding: 20px;
  border: 0.5px solid #d0eef0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.res-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.09);
  border-color: #14c4ca;
  color: inherit;
}

/* Video card — slightly different accent */
.res-card--video {
  border-top: 4px solid #7a1a99;
}

.res-card--video:hover {
  border-color: #7a1a99;
}

/* Card top row: badge + audience tags */
.res-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 8px;
  flex-wrap: wrap;
}

/* Type badges */
.res-type-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}

.res-badge--web   { background: #bcecff; color: #0a6e7e; }
.res-badge--video { background: #fde8ff; color: #7a1a99; }

/* Audience tags */
.res-audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.res-aud {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.res-aud--students { background: #d5fbe8; color: #0a6e40; }
.res-aud--parents  { background: #fff2cc; color: #7a5c00; }
.res-aud--teachers { background: #ede8ff; color: #4a2a99; }

/* Card heading */
.res-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #111;
  margin: 0 0 8px;
  line-height: 1.35;
}






.res-video-label {
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #555;
}

/* Visit link at bottom */
.res-visit {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0a6e7e;
  margin-top: auto;
}

.res-card--video .res-visit {
  color: #7a1a99;
}

/* No results */
.res-noresult {
  text-align: center;
  font-size: 1.1rem;
  color: #666;
  padding: 3rem 0;
}

/* =====================
   DISCLAIMER NOTE
   ===================== */
.res-note {
  background: rgb(250, 255, 185);
  border-top: 2px dashed #bcecff;
  padding: 1.25rem 40px;
  text-align: center;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.6;
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 640px) {
  .res-hero  { padding: 2rem 20px 1.25rem; }
  .res-hero h1 { font-size: 1.9rem; }
  .res-main  { padding: 0 20px; }
  .res-grid  { grid-template-columns: 1fr; }
  .res-note  { padding: 1.25rem 20px; }
}

/* ── SHARED SCIENCE SUB-NAV ──────────────────────────
   Used on overview, funfacts, explanation, glossary,
   resources pages to match the main site header.
   ─────────────────────────────────────────────────── */
.sci-subnav {
  background: var(--nav-bg);
  border-bottom: 2px solid var(--accent);
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  flex-wrap: wrap;
}

.sci-subnav-link {
  padding: 6px 16px;
  border-radius: 40px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0a6e7e;
  transition: background 0.18s, color 0.18s;
  text-decoration: none;
}

.sci-subnav-link:hover,
.sci-subnav-link.active {
  background: var(--accent);
  color: white;
}

/* ── SHARED SCIENCE HEADER ───────────────────────────
   Replaces the old .brand bar on all science sub-pages
   ─────────────────────────────────────────────────── */
.sci-header {
  background: var(--brand-bg);
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sci-header-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: white;
  margin: 0;
}

.sci-header-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  border-bottom: 1.5px solid rgba(255,255,255,0.4);
  transition: color 0.18s;
}

.sci-header-link:hover { color: white; }
/* =====================
   SITE SUMMARY STRIP
   ===================== */
.summary-strip {
  background: #c7dde3;
  padding: 3rem 40px;
  margin-top: 2rem;
}

.summary-strip-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f6e56;
  margin-bottom: 0.4rem;
}

.summary-strip h2 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
}

.summary-strip-sub {
  font-size: 1rem;
  color: #333;
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Four-column card grid */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  max-width: var(--container);
}

/* Base card */
.summary-card {
  background: white;
  border-radius: 20px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-top: 5px solid #14c4ca;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  color: inherit;
}

/* Individual accent colours per card */
.summary-card--facts       { border-top-color: #f5a623; }
.summary-card--explanation { border-top-color: #14c4ca; }
.summary-card--glossary    { border-top-color: #0f6e56; }
.summary-card--resources   { border-top-color: #7a1a99; }

/* Icon */
.summary-card-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

/* Card heading */
.summary-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: #111;
}

/* Card body */
.summary-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #444;
  flex: 1;
  margin: 0 0 14px;
}

/* "Go there" link at bottom */
.summary-card-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0a6e7e;
  margin-top: auto;
}

.summary-card--facts .summary-card-link       { color: #a06b00; }
.summary-card--explanation .summary-card-link { color: #0a6e7e; }
.summary-card--glossary .summary-card-link    { color: #0f6e56; }
.summary-card--resources .summary-card-link   { color: #7a1a99; }

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 640px) {
  .main-layout {
    flex-direction: column;
    margin: 20px;
  }

  .left {
    max-width: 100%;
  }

  .section {
    margin: 1.5rem 20px;
    width: auto;
  }

  .hero-text h1 {
    font-size: 1.6rem;
  }

  .nav-bar {
    flex-wrap: wrap;
    gap: 14px;
    margin: 12px 16px;
  }

  .summary-strip {
    padding: 2rem 20px;
  }

  .summary-cards {
    grid-template-columns: 1fr 1fr;
  }
}