/**
 * gwt-tokens — Green Wheels Tanzania
 * FluentSnippets → CSS snippet. Load FIRST (priority before gwt-components).
 *
 * SCOPE: spacing, layout and radius tokens ONLY.
 *
 * Colours and typography deliberately live in Elementor Global Colors /
 * Global Fonts (Rules 5–6) and are referenced as var(--e-global-color-*)
 * and var(--e-global-typography-*). Do NOT redeclare them here — Elementor
 * is the single source of truth so the palette stays editable in the UI.
 *
 * All values are clamp() of rem (Rule 8). px appears once, for a hairline.
 * Fluid range calculated against a 320px → 1440px viewport.
 */

:root {
  /* ---- Spacing scale ---- */
  --space-3xs: clamp(0.25rem,  0.2411rem + 0.0446vw, 0.3125rem);
  --space-2xs: clamp(0.5rem,   0.4821rem + 0.0893vw, 0.625rem);
  --space-xs:  clamp(0.75rem,  0.7143rem + 0.1786vw, 1rem);
  --space-sm:  clamp(1rem,     0.9286rem + 0.3571vw, 1.5rem);
  --space-md:  clamp(1.5rem,   1.3571rem + 0.7143vw, 2.5rem);
  --space-lg:  clamp(2.25rem,  1.9750rem + 1.3750vw, 4rem);
  --space-xl:  clamp(3.5rem,   2.9286rem + 2.8571vw, 6rem);
  --space-2xl: clamp(5rem,     4.2857rem + 3.5714vw, 9rem);

  /* ---- Fluid type scale ----
     Elementor's Global Font size field takes a unit+number and will not
     accept clamp(), so per Rule 6 family/weight/line-height live in
     Global Fonts and the fluid sizes live here, applied to the same
     roles below. Range calculated against 320px → 1440px. */
  --step-display: clamp(2.25rem,  1.6857rem + 2.8571vw, 4rem);
  --step-h2:      clamp(1.75rem,  1.4643rem + 1.4286vw, 2.625rem);
  --step-h3:      clamp(1.375rem, 1.2321rem + 0.7143vw, 1.8125rem);
  --step-sub:     clamp(1.125rem, 1.0714rem + 0.2679vw, 1.28125rem);
  --step-body:    clamp(1rem,     0.9821rem + 0.0893vw, 1.0546875rem);
  --step-small:   clamp(0.8125rem,0.8025rem + 0.0500vw, 0.84375rem);

  /* ---- Layout ---- */
  --wrap:        78rem;   /* 1248px — main content max width */
  --wrap-narrow: 46rem;   /* 736px  — long-form reading measure */
  --wrap-wide:   90rem;   /* 1440px — full-bleed sections */

  /* ---- Radius ---- */
  --radius-sm: 0.375rem;
  --radius:    0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 62.5rem;

  /* ---- Hairline: px is correct here, it must never scale (Rule 8) ---- */
  --hairline: 1px;

  /* ---- Motion (Rule 15) ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
}

/* =========================================================
   Fluid typography — binds the clamp() sizes above to the
   Elementor Global Font roles created in Site Settings.
   Family and weight come from Elementor; only size is set here.
   ========================================================= */

body {
	font-family: var(--e-global-typography-gwtBody-font-family, "DM Sans", sans-serif);
	font-size: var(--step-body);
	color: var(--e-global-color-gwtInk, #101312);
}

h1, .h1 {
	font-family: var(--e-global-typography-gwtDisplay-font-family, "Lexend Deca", sans-serif);
	font-weight: var(--e-global-typography-gwtDisplay-font-weight, 700);
	font-size: var(--step-display);
	line-height: 1.08;
}

h2, .h2 {
	font-family: var(--e-global-typography-gwtHeading-font-family, "Lexend Deca", sans-serif);
	font-weight: var(--e-global-typography-gwtHeading-font-weight, 600);
	font-size: var(--step-h2);
	line-height: 1.18;
}

h3, .h3 {
	font-family: var(--e-global-typography-gwtHeading-font-family, "Lexend Deca", sans-serif);
	font-weight: var(--e-global-typography-gwtHeading-font-weight, 600);
	font-size: var(--step-h3);
	line-height: 1.25;
}

h4, h5, h6, .h4 {
	font-family: var(--e-global-typography-gwtSubheading-font-family, "Lexend Deca", sans-serif);
	font-weight: var(--e-global-typography-gwtSubheading-font-weight, 500);
	font-size: var(--step-sub);
	line-height: 1.3;
}

small, .text-small {
	font-size: var(--step-small);
}

/* =========================================================
   Spacing utilities — apply via Elementor Advanced → CSS Classes
   ========================================================= */

.p-2xs { padding: var(--space-2xs); }
.p-xs  { padding: var(--space-xs); }
.p-sm  { padding: var(--space-sm); }
.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }

.pb-sm { padding-block: var(--space-sm); }
.pb-md { padding-block: var(--space-md); }
.pb-lg { padding-block: var(--space-lg); }

.mb-2xs { margin-block-end: var(--space-2xs); }
.mb-xs  { margin-block-end: var(--space-xs); }
.mb-sm  { margin-block-end: var(--space-sm); }
.mb-md  { margin-block-end: var(--space-md); }
.mb-lg  { margin-block-end: var(--space-lg); }

.gap-2xs { gap: var(--space-2xs); }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }

/* Standard vertical rhythm for a page section */
.section-pad   { padding-block: var(--space-xl); }
.section-pad-l { padding-block: var(--space-2xl); }

/* Reading-width constraint for long-form copy (Mission, Story, posts) */
.measure { max-width: var(--wrap-narrow); margin-inline: auto; }

/* =========================================================
   Baseline safety net
   The current site has 31 elements overflowing a 375px viewport.
   These two rules make that class of bug structurally impossible.
   ========================================================= */

html { overflow-x: hidden; }

img,
video,
iframe,
svg,
table { max-width: 100%; }

img,
video { height: auto; }

/* Wide content scrolls inside its own container, never the page body */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   Accessibility baseline (Rule 17)
   Visible focus everywhere. Never removed without replacement.
   ========================================================= */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--e-global-color-gwtGreen, #2EA836);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip link — keep it reachable, not display:none */
.skip-link:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}