/* dhyarisfoundation.org: layout and components. Colours, type and spacing come from tokens.css.
   Optional tokens (set by themes B and C, defaulted here): --header-bg, --header-ink, --header-top,
   --hero-bg, --hero-ink, --button-bg, --button-ink, --stat-number, --heading-rule. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--paper);
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 var(--space-2); letter-spacing: -0.005em; text-wrap: balance; font-optical-sizing: auto; }
h1 { font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 var(--space-2); max-width: var(--measure); }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--space-2); top: -4rem; background: var(--surface); color: var(--ink); padding: var(--space-1) var(--space-2); border-radius: var(--radius); z-index: 10; }
.skip:focus { top: var(--space-2); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
@media (min-width: 48em) { :root { --gutter: 2rem; } }

.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; }
/* Inherited stock illustrations were re-coloured to ink and kumkum (see BRAND.md). Photographs stay in colour. */
.ill { }

/* ---------- buttons and links ---------- */
.button {
  display: inline-block; padding: 0.8em 1.5em; border: 0; border-radius: var(--radius);
  background: var(--button-bg, var(--ink)); color: var(--button-ink, var(--on-dark)); font: 600 1rem var(--font-body); text-decoration: none; cursor: pointer;
}
.button:hover { filter: brightness(1.15); }
.link { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.link:hover { color: var(--accent-deep); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }

/* ---------- header ---------- */
.site-header { background: var(--header-bg, var(--paper)); color: var(--header-ink, var(--ink)); border-top: var(--header-top, 0); border-bottom: 1px solid var(--line); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 6.5rem; }
/* Lockup at least 140 px wide (logo rule); below that the wordmark. */
.brand__lockup { height: 5.5rem; width: auto; }
.brand__wordmark { display: none; height: 3.25rem; width: auto; }
@media (max-width: 47.99em) { .brand__lockup { display: none; } .brand__wordmark { display: block; } .site-header__bar { min-height: 5rem; } }
.site-nav ul { display: flex; gap: var(--space-3); }
.site-nav a { color: inherit; text-decoration: none; font: 600 0.95rem var(--font-body); padding: 0.5em 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--line); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.nav-toggle { display: none; background: none; border: 1px solid currentColor; border-radius: var(--radius); color: inherit; padding: 0.5rem; cursor: pointer; }
.nav-toggle .icon { width: 1.5rem; height: 1.5rem; }
.nav-toggle .icon-x, .nav-toggle[aria-expanded="true"] .icon-menu-2 { display: none; }
.nav-toggle[aria-expanded="true"] .icon-x { display: block; }
@media (max-width: 47.99em) {
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; flex-basis: 100%; padding-bottom: var(--space-2); }
  .site-nav.is-open { display: block; }
  .site-header__bar { flex-wrap: wrap; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: 0.75em 0; border-bottom: 1px solid var(--line); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
}

/* ---------- hero ---------- */
.hero { background: var(--hero-bg, var(--paper)); color: var(--hero-ink, var(--ink)); padding: var(--space-5) 0; }
.hero.hero--short { padding: var(--space-4) 0 var(--space-3); }   /* beats the desktop .hero padding below */
.hero--short .lede { margin-bottom: 0; }
.hero--short + .section { padding-top: var(--space-3); }
.hero__grid { display: grid; gap: var(--space-4); align-items: center; }
.hero__art { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-photo); }
.hero__art--contain { aspect-ratio: auto; object-fit: contain; max-width: 24rem; margin-inline: auto; background: #fff; border-radius: var(--radius-lg); }
.hero .lede { font-size: 1.2rem; max-width: none; }
@media (min-width: 48em) { .hero__grid { grid-template-columns: 1.1fr 1fr; } .hero { padding: var(--space-6) 0; } }

/* ---------- sections ---------- */
.section { padding: var(--space-5) 0; }
.section--tint { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section h2 { padding-bottom: var(--space-1); border-bottom: var(--heading-rule, 0); display: inline-block; }
.split { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 48em) { .split { grid-template-columns: 1fr 1fr; } }

/* SDG tiles (home): hover or tap a tile to read what the goal stands for */
.sdg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.sdg-tiles button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: default; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-photo); transition: transform 150ms ease, box-shadow 150ms ease; }
.sdg-tiles img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.sdg-tiles button:hover, .sdg-tiles button:focus-visible, .sdg-tiles button[aria-pressed="true"] { transform: translateY(-1px) scale(1.03); box-shadow: var(--shadow-photo-hover); }
.sdg-note { margin: var(--space-2) 0 0; height: 3.4em; overflow: hidden; color: var(--ink-soft); max-width: none; font-size: 0.95rem; line-height: 1.6; }
.sdg-note.is-set { color: var(--ink); }

/* cards: the three program types */
.cards { display: grid; gap: var(--space-3); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); }
.card img { height: 7rem; width: auto; margin-bottom: var(--space-2); }
.card p { margin: 0; }
@media (min-width: 48em) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* gallery: click a photo to open it in the lightbox */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.gallery a { display: block; border-radius: var(--radius-lg); cursor: pointer; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-photo); transition: transform 150ms ease, box-shadow 150ms ease; }
.gallery a:hover img, .gallery a:focus-visible img { transform: translateY(-1px) scale(1.02); box-shadow: var(--shadow-photo-hover); }
@media (min-width: 48em) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 72rem); width: auto; max-height: 96vh; color: var(--on-dark); }
.lightbox::backdrop { background: rgba(30, 30, 30, 0.94); }
.lightbox img { max-height: 82vh; max-width: 100%; width: auto; margin-inline: auto; border-radius: var(--radius); display: block; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 0 0 var(--space-1); }
.lightbox__caption { margin: 0; font-size: 0.95rem; max-width: none; }
.lightbox button { background: rgba(30, 30, 30, 0.6); border: 1px solid rgba(247, 244, 238, 0.4); border-radius: 50%; color: var(--on-dark); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; cursor: pointer; padding: 0; }
.lightbox button:hover { background: rgba(30, 30, 30, 0.9); }
.lightbox button .icon { width: 1.5rem; height: 1.5rem; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 0.5rem; }
.lightbox__nav--next { right: 0.5rem; }
@media (max-width: 47.99em) { .lightbox__nav { top: auto; bottom: 0.5rem; transform: none; } }

/* ---------- about ---------- */
.goals { display: grid; gap: var(--space-3); }
.goals li { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-photo); }
.goals img { width: 100%; }
.goals img:not(.goals__banner) { aspect-ratio: 3 / 2; object-fit: cover; }
.goals p { margin: 0; padding: var(--space-2) var(--space-3); font-weight: 600; font-family: var(--font-display); font-size: 1.1rem; }
@media (min-width: 48em) { .goals { grid-template-columns: repeat(3, 1fr); } }
.mission h2 { margin-bottom: var(--space-1); }
.mission h3 { color: var(--ink-soft); font-weight: 500; }
.mission__areas { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.mission__areas li { display: grid; gap: var(--space-2); align-content: start; justify-items: start; }
.mission__areas img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-photo); }
.mission__areas li { justify-items: stretch; }
.mission__areas span { font-weight: 600; }
@media (min-width: 48em) { .mission__areas { grid-template-columns: repeat(3, 1fr); } }

/* ---------- our work ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-3); margin-top: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-3); background: var(--dark); color: var(--on-dark); border-radius: var(--radius-lg); }
.stats li { display: grid; gap: 0.25rem; align-content: start; padding-top: var(--space-2); border-top: 1px solid rgba(247, 244, 238, 0.18); }
.stats strong { display: flex; align-items: baseline; gap: 0.1em; font: 600 2.25rem var(--font-display); line-height: 1; color: var(--stat-number, var(--on-dark)); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stats__plus { font-family: var(--font-body); font-weight: 600; font-size: 0.55em; color: var(--accent); transform: translateY(-0.55em); }
.stats li > span:last-child { font-size: 0.9rem; opacity: 0.85; line-height: 1.3; }
@media (min-width: 48em) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 64em) { .stats { grid-template-columns: repeat(7, 1fr); gap: var(--space-2); } .stats strong { font-size: 2rem; } }
.programs { display: grid; gap: var(--space-4); }
.program { display: grid; gap: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.program:first-of-type { border-top: 0; padding-top: 0; }
.program__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-photo); }
.program__logo { height: 2.5rem; width: auto; max-width: 11rem; object-fit: contain; object-position: left; margin-bottom: var(--space-2); }
.program h2 { font-size: 1.6rem; }
.program__facts { margin: 0; display: grid; gap: 0.6rem; }
.program__row { display: grid; grid-template-columns: 1.25em auto 1fr; gap: 0.6em; align-items: start; }
.program__row .icon { margin-top: 0.15em; color: var(--ink-soft); }
.program__row dt { font-weight: 600; }
.program__row dt::after { content: ":"; }
.program__row dd { margin: 0; }
@media (min-width: 48em) {
  .program { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .program:nth-of-type(even) .program__photo { order: 2; }
}

/* ---------- our programs ---------- */
.course-group { display: grid; gap: 0; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-3); }
.course-group { --tone-tint: var(--accent-tint); --tone-deep: var(--accent-deep); --tone-rule: var(--accent); }
.course-group[data-tone="neel"] { --tone-tint: var(--neel-tint); --tone-deep: var(--neel); --tone-rule: var(--neel); }
.course-group[data-tone="haldi"] { --tone-tint: var(--haldi-tint); --tone-deep: var(--haldi-deep); --tone-rule: var(--haldi); }
.course-group[data-tone="neem"] { --tone-tint: var(--neem-tint); --tone-deep: var(--neem-deep); --tone-rule: var(--neem); }
.course-group[data-tone="ink"] { --tone-tint: var(--paper); --tone-deep: var(--ink); --tone-rule: var(--ink); }
.course-group__art { display: grid; place-items: center; padding: var(--space-3); background: var(--tone-tint); min-height: 17rem; }
.course-group img { max-height: 12rem; max-width: 85%; width: auto; height: auto; object-fit: contain; }
.course-group > div:last-child { padding: var(--space-3); }
.course-group h3 { font-size: 1.5rem; margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid color-mix(in srgb, var(--tone-rule) 35%, transparent); display: inline-block; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chips li { background: var(--tone-tint, var(--accent-tint)); color: var(--tone-deep, var(--accent-deep)); font-weight: 600; border-radius: var(--radius); padding: 0.35em 0.8em; font-size: 0.95rem; }
.course-group[data-tone="ink"] .chips li { border: 1px solid var(--line); }
.card--art { padding-top: 0; }
.card--art .card__art { margin: 0 calc(-1 * var(--space-3)) var(--space-2); height: 12rem; overflow: hidden; }
.card--art .card__art img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
@media (min-width: 48em) {
  .course-group { grid-template-columns: 2fr 3fr; }
  .course-group:nth-of-type(even) .course-group__art { order: 2; }
}

/* ---------- contact ---------- */
.split--contact { align-items: start; }
.contact-details p { display: flex; gap: 0.5em; }
.form { display: grid; gap: var(--space-2); background: var(--surface); border: 1px solid var(--line); padding: var(--space-3); border-radius: var(--radius-lg); }
.form h2 { font-size: 1.4rem; margin: 0; }
.form label { display: grid; gap: 0.35rem; font-weight: 600; }
.form input, .form textarea { font: inherit; padding: 0.6em 0.75em; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); width: 100%; color: var(--ink); }
.form input:focus, .form textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(224, 69, 42, 0.2); }
.form .button { justify-self: start; }

/* ---------- prose (policies) ---------- */
.prose { max-width: var(--measure); }
.prose h2 { font-size: 1.4rem; margin-top: var(--space-4); }
.prose .meta { color: var(--ink-soft); }
.prose a { color: var(--accent-deep); }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: var(--on-dark); margin-top: var(--space-4); padding: var(--space-5) 0 var(--space-3); }
.site-footer__grid { display: grid; gap: var(--space-4); }
.site-footer__brand img { height: 5.5rem; width: auto; margin-bottom: var(--space-2); }
.site-footer nav ul { display: grid; gap: 0.5rem; }
.site-footer a { color: inherit; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer address { font-style: normal; }
.site-footer address p, .site-footer address a { display: flex; gap: 0.5em; align-items: flex-start; text-decoration: none; }
.site-footer address a:hover span { text-decoration: underline; }
.social { gap: var(--space-2) !important; }
.social a { border: 1px solid currentColor; border-radius: 50%; padding: 0.5rem; }
.site-footer__legal { margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid rgba(247, 244, 238, 0.2); font-size: 0.9rem; }
.site-footer__legal p { margin: 0; }
@media (min-width: 48em) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1.4fr; } }