/* ========================================================
   UTILITIES — Reusable layout/color/spacing helpers
   Replaces inline style="" attributes in templates
   ======================================================== */

/* ─── Scroll-triggered Animations ──────────────────────── */
/* Elements are only hidden once scroll-animations.js marks <html>
   as 'anim-ready'. If the module ever fails to load (or the browser
   lacks IntersectionObserver), all .animate-on-scroll content stays
   visible so pages can never render blank. */
html.anim-ready .animate-on-scroll {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
html.anim-ready .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.stagger-children.is-visible > * { transition-delay: calc(var(--stagger-index) * 0.1s); }
/* ========================================================
   UTILITIES — Reusable layout/color/spacing helpers
   Replaces inline style="" attributes in templates
   ======================================================== */

/* ─── Page hero (shared header band) ─────────────────────── */
.page-hero {
  padding: 3rem 0 !important;
  min-height: 85vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  border-bottom: 1px solid var(--border);
  background: var(--border-focus); /* Blue background in light mode (matches index.html hero) */
  color: var(--bg); /* White text for dark blue background */
}
[data-theme="dark"] .page-hero {
  background: var(--bg-alt); /* Dark gray background in dark mode */
  color: var(--fg); /* Light text for dark background */
}
.page-hero .badge {
  display: inline-block !important;
  margin-bottom: 1.75rem !important;
}
.page-hero h1 {
  font-size: var(--text-display) !important;
  margin-bottom: 1.75rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}
.page-hero p {
  color: oklch(from var(--bg) l c h / 80%) !important;
  font-size: var(--text-h2-lg) !important;
  max-width: 800px !important;
  margin-bottom: 0 !important;
  line-height: 1.75 !important;
}
.page-hero .section-subtitle {
  text-align: left;
  max-width: 800px;
}

/* ─── Flex helpers ───────────────────────────────────────── */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start   { display: flex; align-items: center; }
.flex-wrap    { flex-wrap: wrap; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.5rem; }
.gap-6 { gap: 2rem; }
.gap-7 { gap: 3rem; }

/* ─── Alignment helpers ─────────────────────────────────── */
.items-start     { align-items: start; }
.items-end       { align-items: end; }
.items-center    { align-items: center; }
.items-stretch   { align-items: stretch; }
.align-items-start  { align-items: start; }
.align-items-center { align-items: center; }
.self-start  { align-self: start; }
.d-inline    { display: inline; }
.d-block     { display: block; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ─── Text colors ────────────────────────────────────────── */
.text-muted   { color: var(--muted); }
.text-primary { color: var(--primary); }
.text-accent  { color: var(--accent); }
.text-white   { color: #fff; }
.text-body    { color: var(--fg-2); }

/* ─── Backgrounds ────────────────────────────────────────── */
.bg-surface        { background: var(--surface); }
.bg-surface-2      { background: var(--surface-2); }
.bg-alt            { background: var(--bg-alt); }
.bg-primary-subtle { background: var(--primary-subtle); }
.bg-accent-subtle  { background: var(--accent-subtle); }

/* ─── Spacing (margin) ───────────────────────────────────── */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.5rem; }
.mt-6 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.5rem; }
.mb-6 { margin-bottom: 2rem; }
.mt-auto { margin-top: auto; }
.mt-7 { margin-top: 2.5rem; }
.mt-8 { margin-top: 4rem; }
.mb-7 { margin-bottom: 2.5rem; }
.mb-8 { margin-bottom: 4rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ─── Spacing (padding) ──────────────────────────────────── */
.p-4 { padding: 1rem; }
.p-5 { padding: 1.5rem; }
.p-6 { padding: 2rem; }
.p-7 { padding: 2.5rem; }
.p-8 { padding: 3rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-6 { padding-top: 2rem; padding-bottom: 2rem; }
.py-7 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-8 { padding-top: 3rem; padding-bottom: 3rem; }
.px-5 { padding-left: 1.5rem; padding-right: 1.5rem; }

/* ─── Borders & dividers ────────────────────────────────── */
.border     { border: 1px solid var(--border); }
.border-t   { border-top: 1px solid var(--border); }
.border-b   { border-bottom: 1px solid var(--border); }
.rounded-sm { border-radius: var(--r-sm); }
.rounded-md { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-xl); }

/* ─── Shadows ───────────────────────────────────────────── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ─── Typography helpers ────────────────────────────────── */
.font-weight-bold   { font-weight: 700; }
.font-weight-medium { font-weight: 500; }
.text-uppercase     { text-transform: uppercase; }
.tracking-wider     { letter-spacing: 0.05em; }
.text-lg            { font-size: var(--text-lead); }

/* ─── Buttons / form helpers ─────────────────────────────── */
.btn-block { width: 100%; }
.btn-block + .btn-block { margin-top: 0.75rem; }
.btn-inline-mt { margin-top: 1rem; }

/* ─── Form grid wrappers (admin forms) ───────────────────── */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* ─── Content card surfaces (old --surface-color etc.) ───── */
.surface-card {
  background: var(--surface);
  border: 1px solid var(--border);
}
.surface-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.surface-panel-lg {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
}

/* ─── Program/avatar icon boxes (shared) ─────────────────── */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--primary-subtle);
  color: var(--primary);
  flex-shrink: 0;
}
.icon-box-sm { width: 44px; height: 44px; font-size: var(--text-title); }
.icon-box-md { width: 48px; height: 48px; font-size: var(--text-h3); }

/* ─── Team avatar (initial) ──────────────────────────────── */
.team-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), hsl(162, 55%, 40%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 auto 1.125rem;
  box-shadow: 0 4px 16px hsl(152 69% 31% / 0.25);
}

/* ─── Student avatar (initial) ───────────────────────────── */
.student-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), hsl(162, 55%, 40%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-foreground);
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 auto 1.125rem;
  position: relative;
}
.student-tag {
  position: absolute;
  bottom: -0.5rem;
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  background: var(--accent);
  color: var(--accent-foreground);
  border-radius: var(--r-full);
  white-space: nowrap;
}

/* ─── Program meta item / event date badge ──────────────── */
.program-meta-item {
  font-size: var(--text-xs);
  padding: 0.5rem 0.75rem;
  background: var(--bg-alt);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-weight: 500;
  margin-bottom: 0.375rem;
  border: 1px solid var(--border);
}
.event-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--warning);
  background: var(--warning-subtle);
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-full);
  margin-bottom: 0.875rem;
}
.blog-card-img {
  height: 190px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--muted);
}

/* ─── Project card header (inline flex heading) ──────────── */
.heading-with-icon {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.heading-with-icon h1 { margin: 0; }

/* ─── Text blocks (replace inline font-size/line-height) ─── */
.lead {
  font-size: var(--text-lead);
  line-height: 1.7;
}
.lead-lg {
  font-size: var(--text-lead);
  line-height: 1.8;
}
.text-sm { font-size: var(--text-small); }
.text-xs { font-size: var(--text-xs); }

/* ─── Misc layout helpers ────────────────────────────────── */
.container-narrow { max-width: 860px; margin: 0 auto; }
.container-sm     { max-width: 720px; margin: 0 auto; }
.sticky-top-100 { position: sticky; top: 100px; }
.position-relative { position: relative; }
.text-center { text-align: center; }

/* Responsive form grids */
@media (max-width: 640px) {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .heading-with-icon { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ─── SDG section title ──────────────────────────────────── */
.sdg-section-title {
  display: block;
  text-align: center;
  font-size: var(--text-h3);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

/* ─── SDG icons grid — horizontal on large screens, wraps on small ─── */
.sdg-grid-images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}

.sdg-grid-images img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* ─── Screen-reader-only content ───────────────────────────
   Announced by assistive tech, invisible on screen. Used for
   skip-link labels, form labels and hidden instructions. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Spacing utility additions ────────────────────────────────── */
.mb-0 { margin-bottom: 0; }

/* ─── Topic icon (Subjects & Topics grid) ────────────────────── */
.topic-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--r-lg);
  flex-shrink: 0;
}

/* Topic category background colors (replaces inline style="background-color:") */
.bg-topic-green  { background-color: #A5C98E; }
.bg-topic-orange { background-color: #ee9c64; }
.bg-topic-blue   { background-color: #A4C5E3; }
.bg-topic-gray   { background-color: #D9D9D9; }

/* ─── Topics grid — responsive grid, fills available width ──────── */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-4);
  justify-items: center;
  align-items: start;
}

/* ─── Topic grid item (icon + label) ───────────────────────────── */
.topic-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 120px;
}

@media (max-width: 768px) {
  .topics-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
  .topic-item {
    max-width: none;
  }
}
@media (max-width: 480px) {
  .topic-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ─── Concept images ────────────────────────────────────────── */
.concept-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}
.concept-graphic {
  max-width: 560px;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
}

/* ─── Characteristic icon container ──────────────────────────── */
.characteristic-icon-container {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  flex-shrink: 0;
}
.characteristic-icon-container img {
  width: 35px;
  height: 35px;
}

/* ─── Characteristic item (icon + label) ──────────────────────── */
.characteristic-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* ─── Theme-sensitive SVG icons (Our Concept section) ────────────
   The characteristic icons (group-78/79/8.svg) and topic icons
   (group-*.svg) are authored with fill="#FFFCFC" — a near-white
   colour that is invisible on the light backgrounds used in light
   mode.  We invert the SVGs in light mode so they render as dark
   shapes with sufficient contrast, then remove the filter in dark
   mode where the near-white fill is already visible on dark UIs. */

.characteristic-icon-container img {
  filter: invert(1);
}

[data-theme="dark"] .characteristic-icon-container img {
  filter: none;
}

/* Topic icons share the same near-white SVG source */
.topic-icon {
  filter: invert(1);
}

[data-theme="dark"] .topic-icon {
  filter: none;
}

/* Concept graphic (concept2.svg) — has white and light-colour fills;
   invert for dark-mode backgrounds so every path stays visible. */
.concept-graphic {
  filter: none;
}

[data-theme="dark"] .concept-graphic {
  filter: invert(1);
}

/* ─── Topic category background colours — theme-adaptive ─────────
   The hard-coded hex values look correct in light mode but are too
   bright on a dark UI.  We tone them down in dark mode while keeping
   the same hue family so the category meaning is preserved.  */

[data-theme="dark"] .bg-topic-green  { background-color: oklch(42% .14 130); }
[data-theme="dark"] .bg-topic-orange { background-color: oklch(48% .13  30); }
[data-theme="dark"] .bg-topic-blue   { background-color: oklch(50% .10 250); }
[data-theme="dark"] .bg-topic-gray   { background-color: oklch(42% .03 265); }