/* ==========================================================================
   Elken Africa — base
   Fonts, reset, typography primitives, layout containers.
   ========================================================================== */

/* Gotham, licensed to Elken. Files live in assets/fonts/.
   Montserrat is the documented fallback and is loaded from Google Fonts
   in the page head, so the layout holds if the Gotham files are absent. */
/* Montserrat, self-hosted.
   Gotham was the brand face and is licensed. Elken BC moved the site to
   Montserrat on 2 Sep 2026, which also settles the webfont licence question:
   Montserrat is SIL OFL, free for commercial use, and the licence travels with
   the files in assets/fonts/LICENSE-Montserrat.txt.

   Self-hosted rather than pulled from Google Fonts, so the site now makes **no
   external request at all** — faster first paint, no third-party dependency,
   and nothing to declare in a privacy notice. Subset to Latin plus punctuation,
   currency (the naira sign is used on every product page) and the arrow glyph:
   26KB a face instead of 87KB.

   **Only 400, 500 and 700 exist, and that is deliberate.** The site sets
   `font-weight: 600` in 22 rules. Gotham also shipped as three faces — 400,
   500, 700 — so CSS weight matching resolved every one of those 600s up to
   Bold, and Bold is the weight the whole site was designed and signed off at.
   Add a real SemiBold and all 22 get *lighter* than the version Elken approved.
   Measured before the switch: at 100px, Gotham at 600 and at 700 both set
   "Handgloves 123" to 788px — the same face.

   So there is no 600 face here, and 600 keeps resolving to 700 exactly as
   before. If a true semibold is ever wanted, add Montserrat-SemiBold.woff2 and
   a 600 @font-face; the 22 rules become real 600s on their own. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ek-white);
  color: var(--ek-charcoal);
  font-family: var(--ek-font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--ek-blue); text-decoration: none; transition: color var(--ek-fast) var(--ek-ease); }
a:hover { color: var(--ek-aqua); }

:focus-visible { outline: 2px solid var(--ek-aqua); outline-offset: 3px; }

/* Clipped rather than pushed off-canvas, so it cannot widen the document. */
.ek-skip {
  position: absolute; left: 0; top: 0; z-index: 100;
  background: var(--ek-blue); color: var(--ek-white); padding: 12px 20px;
  clip-path: inset(50%); white-space: nowrap;
}
.ek-skip:focus { clip-path: none; color: var(--ek-white); }

.ek-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Containers ------------------------------------------------------------- */
.ek-container {
  width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2));
  margin-inline: auto;
}
.ek-container--nav {
  width: min(var(--ek-nav-max), 100% - (var(--ek-page-pad) * 2));
  margin-inline: auto;
}

/* Type primitives -------------------------------------------------------- */
.ek-h1 {
  margin: 0; font-size: var(--ek-h1); font-weight: 700;
  line-height: var(--ek-h1-lh); letter-spacing: var(--ek-h1-ls);
  text-wrap: pretty;
}
.ek-h2 {
  margin: 0; font-size: var(--ek-h2); font-weight: 700;
  line-height: var(--ek-h2-lh); color: var(--ek-charcoal); text-wrap: pretty;
}
.ek-h3 { margin: 0; font-size: var(--ek-h3); font-weight: 700; line-height: var(--ek-h3-lh); }
.ek-h4 { margin: 0; font-size: var(--ek-h4); font-weight: 700; line-height: var(--ek-h4-lh); }

.ek-lead  { font-size: var(--ek-lead);  line-height: var(--ek-lead-lh);  color: var(--ek-body-ink); }
.ek-text  { font-size: var(--ek-text);  line-height: var(--ek-text-lh);  color: var(--ek-body-ink); }
.ek-small { font-size: var(--ek-small); line-height: var(--ek-small-lh); color: var(--ek-body-ink); }

.ek-eyebrow {
  font-size: var(--ek-eyebrow); font-weight: 400;
  line-height: 1.5; color: var(--ek-blue-hover);
}

/* Title with the pink marker, as on the Figma home page ------------------- */
.ek-marktitle { display: flex; align-items: flex-start; gap: var(--ek-16); }
.ek-marktitle__square {
  flex: 0 0 auto; width: 26px; height: 26px;
  background: var(--ek-pink); margin-top: 6px;
}
@media (max-width: 767px) {
  .ek-marktitle { gap: 14px; }
  .ek-marktitle__square { width: 22px; height: 22px; margin-top: 5px; }
}

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