/* ==========================================================================
   Dawat-e-Islami Bangladesh — base.css
   Reset, design tokens, typography
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }

/* Safety-net default for bare <svg><use></svg> icon instances that carry
   no sizing class of their own (equal-specificity, so any later same-weight
   rule in layout/components.css still wins by cascade order). */
svg:not([class]) { width: 24px; height: 24px; flex: 0 0 auto; }

/* <use> instantiates a symbol's content into a shadow tree, so CSS written
   against the light DOM (".foo path", or presentation attributes on the
   symbol's defs wrapper) never reaches the cloned nodes. Inherited SVG
   properties DO flow from the <use> element into that shadow tree, so the
   default icon look is set here, on <use> itself, and overridden per icon
   only where a symbol's own sub-path carries an explicit fill (dots,
   triangles) — an element's own specified value always beats inheritance. */
svg use { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------- */
:root {
  /* Color */
  --forest-950:  #062E24;
  --forest-900:  #073B2D;
  --forest-800:  #0B4535;
  --emerald-600: #147A59;
  --emerald-500: #1B8A66;
  --emerald-700: #0F674D;
  --gold-100:    #F8EAC5;
  --gold-200:    #F1D79B;
  --gold-500:    #C99A43;
  --gold-600:    #A97828;
  --gold-300:    #E8D5A2;
  --gold-700:    #75531A; /* text-on-light only — gold-500 fails WCAG as text on ivory/sand */
  --ivory-50:    #FCFAF4;
  --ivory-100:   #F8F4E9;
  --sand-100:    #F3EBDD;
  --ink-900:     #14251E;
  --ink-600:     #58645D;
  --ink-500:     #6B766F;

  --on-dark-90: rgba(251, 248, 241, .92);
  --on-dark-60: rgba(251, 248, 241, .62);
  --hairline-dark: rgba(230, 205, 151, .22);
  --hairline-light: rgba(23, 33, 29, .12);
  --card-border: rgb(47 122 141 / 48%);
  --card-border-gold: rgba(201, 154, 67, .52);
  --card-surface: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(252, 250, 244, .82));

  /* Type */
  --font-bn-display: 'Tiro Bangla', 'Noto Serif Bengali', serif;
  --font-bn-body:    'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
  --font-en-accent:  'Fraunces', Georgia, serif;
  --font-en-body:    'Inter', -apple-system, sans-serif;
  --font-ar:         'Lateef', 'Scheherazade New', serif;
  --font-display:    var(--font-bn-display);
  --font-ui:         var(--font-en-body);

  /* Spacing / radii / shadow */
  --container-w: 1240px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --card-radius: 16px;
  --control-h: 52px;
  --section-space: clamp(3.5rem, 3rem + 2vw, 5.5rem);
  --shadow-sm: 0 4px 18px rgba(6, 46, 36, .07);
  --shadow-md: 0 14px 34px rgba(6, 46, 36, .11);
  --shadow-lg: 0 24px 56px rgba(6, 46, 36, .16);

  /* Motion */
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 500ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);

  --header-h: 80px;
  --header-h-compact: 64px;
  --topbar-h: 34px;
}

/* --------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------- */
body {
  font-family: var(--font-bn-body);
  background: var(--ivory-50);
  color: var(--ink-900);
  line-height: 1.68;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* not "hidden" — that would make body the containing
    block for position:fixed children below, breaking their viewport anchoring */
  position: relative;
}

/* Ambient page texture — soft gold/emerald bloom + hairline lattice, fixed
   to the viewport so it reads consistently behind every section rather than
   stretching across the full scroll height. Sections with a solid bg
   (.bg-sand, .bg-forest) paint over it as normal; .bg-ivory is transparent
   so this bleeds through. Kept extremely subtle — texture, not decoration. */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 86% -8%, rgba(198, 161, 91, .10), transparent 60%),
    radial-gradient(820px 640px at -8% 18%, rgba(22, 98, 74, .05), transparent 55%),
    radial-gradient(760px 600px at 60% 105%, rgba(198, 161, 91, .07), transparent 60%);
}
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .028;
  background-image: url('../assets/icons/star-pattern.svg');
  background-size: 130px;
}

h1, h2, h3, h4 {
  font-family: var(--font-bn-display);
  color: var(--forest-950);
  line-height: 1.28;
  font-weight: 400;
}

[lang="en"] { font-family: var(--font-en-body); }
[lang="ar"] { font-family: var(--font-ar); direction: rtl; }

p { color: var(--ink-600); }
/* A <p> on a dark surface must not keep the light-bg ink color it inherits
   from the bare `p` rule above — this is what silently broke the topbar
   mission text (`.topbar` had no `bg-forest`/`on-dark` ancestor rule to
   override it with). Every dark surface should carry `.on-dark`. */
.on-dark p { color: var(--on-dark-60); }

/* --------------------------------------------------------------------
   Bilingual heading pattern — the site's recurring rhythm
   -------------------------------------------------------------------- */
.bl-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem;
  margin: 0;
}
.bl-bn {
  font-family: var(--font-bn-display);
  color: var(--forest-950);
  font-size: clamp(1.9rem, 1.55rem + 1.4vw, 2.6rem);
  letter-spacing: .01em;
  line-height: 1.2;
}
.bl-en {
  font-family: var(--font-en-accent);
  font-style: italic;
  color: var(--gold-700); /* gold-500 reads ~2:1 as text on ivory/sand — too low */
  font-size: clamp(1.05rem, .95rem + .4vw, 1.35rem);
  font-weight: 500;
  font-optical-sizing: auto;
}
.on-dark .bl-en { color: var(--gold-300); }
.on-dark .bl-bn { color: var(--ivory-50); }

/* Standalone section title — used once the English name has moved up into
   the .eyebrow pretitle, leaving the Bangla heading to stand alone (so it
   can run larger than the shared .bl-bn size instead of sharing a row). */
.section-title {
  margin: 0;
  font-family: var(--font-bn-display);
  color: var(--forest-950);
  font-size: clamp(2.05rem, 1.6rem + 1.8vw, 2.9rem);
  letter-spacing: .01em;
  line-height: 1.2;
}
.on-dark .section-title { color: var(--ivory-50); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-en-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--emerald-600);
  margin-bottom: .9rem;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 26px;
  height: 1.5px;
  display: inline-block;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}
.eyebrow::after { background: linear-gradient(90deg, var(--gold-500), transparent); }
.on-dark .eyebrow { color: var(--gold-300); }

/* Diamond-dot flourish — a quiet rule under select section heads */
.flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.1rem;
  color: var(--gold-500);
}
.flourish__line {
  width: 44px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}
.flourish__line--r { background: linear-gradient(90deg, var(--gold-500), transparent); }
.flourish__dot {
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(198, 161, 91, .14);
  flex: 0 0 auto;
}
.on-dark .flourish__dot { box-shadow: 0 0 0 4px rgba(228, 205, 151, .16); }

.section-head {
  max-width: 640px;
  margin: 0 0 3rem;
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p {
  margin-top: 1rem;
  font-size: 1.05rem;
  color: var(--ink-600);
}
.on-dark .section-head p { color: var(--on-dark-60); }

/* --------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--container-w));
  margin-inline: auto;
}

@media (max-width: 640px) {
  .container { width: min(100% - 2rem, var(--container-w)); }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.bn-num { font-variant-numeric: normal; }

::selection { background: var(--gold-300); color: var(--forest-950); }

/* --------------------------------------------------------------------
   Focus states — visible on every interactive element
   -------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid var(--gold-700); /* gold-500 is ~2.3:1 on ivory/sand — under the 3:1 UI-component minimum */
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark a:focus-visible,
.on-dark button:focus-visible {
  outline-color: var(--gold-300);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem; top: -60px;
  background: var(--forest-950);
  color: var(--ivory-50);
  padding: .8rem 1.2rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 1rem; }