/* ==========================================================================
   Reset + base element styles + typography utility classes.
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-body-on-light);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

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

/* Hello Elementor's reset.css carries `a:active, a:hover { color: #336 }`.
   That is one class more specific than the rule above, so it wins no matter
   which stylesheet loads last, and every link on the site turned navy on
   hover — blended by the opacity fades into a muddy #5C5C85. Matching its
   specificity here hands hover colour back to the components that ask for it. */
a:hover,
a:active,
a:focus {
  color: inherit;
}

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

input {
  font-family: inherit;
  font-size: inherit;
}

/* Visually hidden but accessible to assistive tech. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visibility, kept consistent across every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---- Layout primitives ----
   `--hef-` prefixed so Elementor's own `--container-*` variables, which it sets
   on every flexbox container, cannot leak in — see the note in style.css. */
.container {
  width: 100%;
  max-width: var(--hef-container-max-width);
  margin-inline: auto;
  padding-inline: var(--hef-container-padding);
}

@media (max-width: 1024px) {
  .container { padding-inline: var(--hef-container-padding-tablet); }
}
@media (max-width: 640px) {
  .container { padding-inline: var(--hef-container-padding-mobile); }
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

/* ---- Typography roles ----
   One class per named Figma text style. Never split a heading's colour
   mid-string — an accent word is its own element with its own class
   instead (see .text-accent). */

.text-display {
  font-family: var(--font-heading);
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-ls);
  font-weight: var(--text-display-weight);
  color: var(--color-heading);
}

.text-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  font-weight: var(--text-h1-weight);
  color: var(--color-heading);
}

.text-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: var(--text-h2-weight);
  color: var(--color-heading);
}

.text-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: var(--text-h3-weight);
  color: var(--color-heading);
}

.text-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: var(--text-h4-weight);
  color: var(--color-heading);
}

/* Gradient-coloured accent word/phrase — always its own element, never a
   partial-heading colour override.

   Inline, not inline-block: an inline-block opens a line-break opportunity
   beside it, which sent the "?" after the accent in "Who is Lady Fatima
   Zahra?" onto a line of its own. */
.text-accent {
  display: inline;
  background: var(--gradient-accent-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: var(--text-body-lg-weight);
  color: var(--color-body-muted);
}

.text-body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: var(--text-body-weight);
}

.text-small {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  font-weight: var(--text-small-weight);
}

.text-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow-size);
  line-height: var(--text-eyebrow-lh);
  letter-spacing: var(--text-eyebrow-ls);
  font-weight: var(--text-eyebrow-weight);
  color: var(--color-body-on-dark);
  text-transform: uppercase;
}

.text-quote {
  font-family: var(--font-editorial);
  font-size: var(--text-quote-size);
  line-height: var(--text-quote-lh);
  letter-spacing: var(--text-quote-ls);
  font-weight: var(--text-quote-weight);
  color: var(--color-body-muted);
}

.text-category-label {
  font-family: var(--font-editorial);
  font-size: var(--text-category-size);
  line-height: var(--text-category-lh);
  letter-spacing: var(--text-category-ls);
  font-weight: var(--text-category-weight);
  color: var(--color-accent);
}