/* ==========================================================================
   TurbonX BD — Base: reset, elements, typography, a11y, utilities
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
  /* On a phone the browser flashes a grey box over whatever you tap (the menu
     icon, a link, a card). The buttons already show their own pressed state,
     so that grey flash is only noise. (Inherited, so this covers every element.) */
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-weight: 400;
  font-feature-settings: "ss01", "cv05";
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}

:root[lang="bn"] body { font-family: var(--font-bangla); letter-spacing: 0; }
:root[lang="bn"] .u-display,
:root[lang="bn"] h1, :root[lang="bn"] h2, :root[lang="bn"] h3 { font-family: var(--font-bangla); letter-spacing: 0; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--media-bg); }

input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }

button { background: none; border: 0; cursor: pointer; color: inherit; }

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

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

:target { scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }

/* --- Headings ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: var(--tracking-tight); }

/* The wide (expanded) cut of Archivo is reserved for statement headings —
   the one bold move. Utility/label headings keep the normal width. */
.u-display,
.hero__title,
.page-hero__title,
.section-head__title,
.about__title,
.newsletter__title,
.pdp__name,
.qv__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
}
.hero__title,
.page-hero__title,
.pdp__name { font-stretch: 122%; }

:root[lang="bn"] .u-display,
:root[lang="bn"] .hero__title,
:root[lang="bn"] .page-hero__title,
:root[lang="bn"] .section-head__title,
:root[lang="bn"] .about__title,
:root[lang="bn"] .newsletter__title,
:root[lang="bn"] .pdp__name,
:root[lang="bn"] .qv__name {
  font-family: var(--font-bangla);
  font-stretch: normal;
  letter-spacing: 0;
}

p { text-wrap: pretty; max-width: 68ch; }

/* --- Selection ------------------------------------------------------- */
::selection { background: var(--text-primary); color: var(--bg-primary); }

/* --- Focus --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* --- Scrollbar (subtle) ------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 3px solid var(--bg-primary); }
*::-webkit-scrollbar-track { background: transparent; }

/* --- Accessibility helpers ------------------------------------------- */
.u-visually-hidden {
  position: absolute !important;
  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;
}

.skip-link {
  position: fixed;
  top: var(--sp-3); left: var(--sp-3);
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  background: var(--button-bg);
  color: var(--button-text);
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

[hidden] { display: none !important; }
[aria-busy="true"] { cursor: progress; }

/* icon slots get hydrated with inline SVG by ui.js */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
[data-icon] svg { display: block; }

/* --- Layout primitives --------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.section + .section { border-top: 1px solid var(--border-faint); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: clamp(1.1rem, 0.7rem + 1.5vw, 1.75rem);
  flex-wrap: wrap;
}
.section-head__title { font-size: var(--step-2); }
.section-head__lead { color: var(--text-secondary); font-size: var(--step--1); margin-top: 4px; max-width: 46ch; }
.section-head__link {
  font-size: var(--step--1);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .section-head__link:hover { color: var(--text-primary); border-color: var(--text-primary); }
}

/* --- Display type utility ----------------------------------------- */
.u-display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-stretch: 125%;
}
.u-muted { color: var(--text-secondary); }
.u-nowrap { white-space: nowrap; }
.u-tabular { font-variant-numeric: tabular-nums; }

/* --- Scroll reveal (opt-in, one gentle move) ---------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* --- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}