/**
 * gwt-components — Green Wheels Tanzania
 * FluentSnippets → CSS snippet. Loads AFTER gwt-tokens (priority 6).
 *
 * SCOPE: BEM component styles for site chrome (header/footer) and the
 * home page blocks. Layout structure itself is built with Elementor
 * Flex/Grid Containers (Rule 2) — this file styles the components those
 * containers hold, and never re-implements what a container already does.
 *
 * NO raw colour, font or spacing values below. Everything resolves to:
 *   --e-global-color-*      (Elementor Global Colors  — Rule 5)
 *   --e-global-typography-* (Elementor Global Fonts   — Rule 6)
 *   --space-* / --step-*    (gwt-tokens               — Rules 7–8)
 *
 * Hex fallbacks appear only inside var() as a second argument, so the page
 * degrades sanely if the kit CSS fails to load — the failure mode we hit in
 * deployment when a .htaccess blocked the cached stylesheet.
 */

/* ---------------------------------------------------------------------------
 * 1. SITE HEADER
 * Ink surface, because the only logo asset Green Wheels has is white-on-transparent.
 * ------------------------------------------------------------------------- */

.site-header {
  background-color: var(--e-global-color-gwtInk, #101312);
  border-block-end: var(--hairline) solid rgba(255, 255, 255, 0.1);
}

.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
}

/* Nav links. Raised specificity deliberately: Hello Elementor ships
 * `.page-content a` (0,2,0), which beat a bare class and underlined our links. */
.site-header .site-header__nav .elementor-item {
  font-family: var(--e-global-typography-gwtButton-font-family), sans-serif;
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--e-global-color-gwtSurface, #ffffff);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.site-header .site-header__nav .elementor-item:hover,
.site-header .site-header__nav .elementor-item:focus-visible,
.site-header .site-header__nav .elementor-item.elementor-item-active {
  /* Brand Green on Ink measures 6.02:1 — AA at any size. */
  color: var(--e-global-color-gwtGreen, #2ea836);
}

/* Elementor's mobile dropdown panel inherits the light kit background by
 * default, which would put white nav text on white. Pin it to Ink. */
.site-header .site-header__nav .elementor-nav-menu--dropdown {
  background-color: var(--e-global-color-gwtInk, #101312);
}

.site-header__logo img {
  width: auto;
  max-height: clamp(1.75rem, 1.5714rem + 0.8929vw, 2.5rem);
}

/* ---------------------------------------------------------------------------
 * 2. MOBILE CTA BAR
 * Fixed to the bottom on small screens only. Hidden from ≥768px, where the
 * header CTA is already visible — a structural change clamp() cannot express,
 * so a breakpoint is the correct tool here (Rule 14).
 * ------------------------------------------------------------------------- */

body .mobile-cta {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 99;
  background-color: var(--e-global-color-gwtInk, #101312);
  border-block-start: var(--hairline) solid rgba(255, 255, 255, 0.14);
  padding-block: var(--space-2xs);
  padding-inline: var(--space-xs);
  /* Clear the iOS Safari home indicator. */
  padding-block-end: calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  body .mobile-cta {
    display: none;
  }
}

/* Stop the fixed bar covering the end of the page. */
@media (max-width: 767px) {
  html body {
    padding-block-end: clamp(3.5rem, 3rem + 2.5vw, 4.5rem);
  }
}

/* ---------------------------------------------------------------------------
 * 3. SECTION HEADS
 * ------------------------------------------------------------------------- */

.section-head__eyebrow {
  font-family: var(--e-global-typography-gwtSmall-font-family), sans-serif;
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e-global-color-gwtGreenDeep, #1e7a28);
}

/* Headings share the lead's measure. A heading set across the full 1248px wrap
 * has no visual relationship to the 736px paragraph beneath it — the section
 * head reads as two unrelated widths instead of one block. */
.section-head__title,
.section-head__lead {
  max-width: var(--wrap-narrow);
}

/* ---------------------------------------------------------------------------
 * 4. HERO
 * ------------------------------------------------------------------------- */

.hero {
  background-color: var(--e-global-color-gwtInk, #101312);
  /* Subtle brand lift behind the product cutout, not a decorative gradient
   * for its own sake — it separates the bike from the flat Ink panel. */
  background-image: radial-gradient(
    ellipse at 72% 55%,
    rgba(46, 168, 54, 0.28),
    transparent 62%
  );
  overflow: hidden;
}

.hero__eyebrow {
  font-family: var(--e-global-typography-gwtSmall-font-family), sans-serif;
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e-global-color-gwtGreen, #2ea836);
}

.hero__sub {
  max-width: 34rem;
}

.hero__media img {
  /* Explicit ratio so the eager hero image reserves its box and cannot
   * shift layout while decoding (Rule 16). */
  aspect-ratio: 2560 / 1569;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * 5. PROOF STRIP
 * ------------------------------------------------------------------------- */

.proof-strip__stat {
  border-inline-start: 0.1875rem solid var(--e-global-color-gwtGreen, #2ea836);
  padding-inline-start: var(--space-sm);
}

.proof-strip__value {
  display: block;
  font-family: var(--e-global-typography-gwtDisplay-font-family), sans-serif;
  font-weight: 700;
  font-size: var(--step-h2);
  line-height: 1.05;
  color: var(--e-global-color-gwtInk, #101312);
}

.proof-strip__label {
  display: block;
  margin-block-start: var(--space-3xs);
  font-family: var(--e-global-typography-gwtBody-font-family), sans-serif;
  font-size: var(--step-small);
  color: var(--e-global-color-gwtSlate, #5a6360);
}

.proof-strip__source {
  font-size: var(--step-small);
  color: var(--e-global-color-gwtSlate, #5a6360);
}

/* ---------------------------------------------------------------------------
 * 6. BIKE CARD  (Loop Item → motorcycle)
 * ------------------------------------------------------------------------- */

.bike-card {
  background-color: var(--e-global-color-gwtSurface, #ffffff);
  border: var(--hairline) solid var(--e-global-color-gwtLine, #e3e7e5);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.bike-card:hover,
.bike-card:focus-within {
  border-color: var(--e-global-color-gwtGreen, #2ea836);
  transform: translateY(-0.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .bike-card:hover,
  .bike-card:focus-within {
    transform: none;
  }
}

.bike-card__media {
  background-color: var(--e-global-color-gwtSurfaceAlt, #f5f7f6);
}

.bike-card__media img {
  aspect-ratio: 16 / 10;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* The Panda 1000 has no photograph anywhere in Green Wheels' own asset
 * library. An empty box reads as a broken image, so the card states the
 * fact instead of hiding it. */
.bike-card__media--empty {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background-color: var(--e-global-color-gwtSurfaceAlt, #f5f7f6);
  border-block-end: var(--hairline) dashed var(--e-global-color-gwtLine, #e3e7e5);
  font-family: var(--e-global-typography-gwtSmall-font-family), sans-serif;
  font-size: var(--step-small);
  color: var(--e-global-color-gwtSlate, #5a6360);
  text-align: center;
  padding: var(--space-sm);
}

.bike-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bike-card__spec {
  font-family: var(--e-global-typography-gwtSmall-font-family), sans-serif;
  font-size: var(--step-small);
  color: var(--e-global-color-gwtInk, #101312);
  background-color: var(--e-global-color-gwtGreenWash, #eaf7ec);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-xs);
  white-space: nowrap;
}

.bike-card__price {
  font-family: var(--e-global-typography-gwtDisplay-font-family), sans-serif;
  font-weight: 700;
  font-size: var(--step-h3);
  color: var(--e-global-color-gwtInk, #101312);
}

.bike-card__price-note {
  display: block;
  font-family: var(--e-global-typography-gwtSmall-font-family), sans-serif;
  font-size: var(--step-small);
  font-weight: 400;
  color: var(--e-global-color-gwtSlate, #5a6360);
}

/* Never render "TZS 0". An absent price is stated as absent. */
.bike-card__price--missing {
  font-size: var(--step-sub);
  color: var(--e-global-color-gwtSlate, #5a6360);
}

/* ---------------------------------------------------------------------------
 * 7. TEASERS (workshop / rent & ride) + LOCATION + STORY cards
 * ------------------------------------------------------------------------- */

.teaser {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: clamp(18rem, 14rem + 20vw, 26rem);
  display: flex;
  align-items: flex-end;
}

.teaser__media,
.teaser__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teaser__body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-md);
  /* Scrim carries the text contrast — white on this over any photo frame
   * measures well past 4.5:1 at the darkest end of the gradient. */
  background-image: linear-gradient(
    to top,
    rgba(16, 19, 18, 0.92),
    rgba(16, 19, 18, 0.72) 45%,
    rgba(16, 19, 18, 0) 100%
  );
  color: var(--e-global-color-gwtSurface, #ffffff);
}

.location-card,
.story-card {
  background-color: var(--e-global-color-gwtSurface, #ffffff);
  border: var(--hairline) solid var(--e-global-color-gwtLine, #e3e7e5);
  border-radius: var(--radius);
  height: 100%;
  overflow: hidden;
}

.location-card__media img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.location-card__meta {
  font-family: var(--e-global-typography-gwtBody-font-family), sans-serif;
  font-size: var(--step-small);
  color: var(--e-global-color-gwtSlate, #5a6360);
}

.story-card__quote {
  /* blockquote carries a 40px UA inline margin by default, which ate 80px of a
   * 375px screen and left the quote at 214px. */
  margin: 0;
  font-family: var(--e-global-typography-gwtSubheading-font-family), sans-serif;
  font-size: var(--step-sub);
  line-height: 1.45;
  color: var(--e-global-color-gwtInk, #101312);
}

.story-card__rider {
  font-family: var(--e-global-typography-gwtSmall-font-family), sans-serif;
  font-size: var(--step-small);
  color: var(--e-global-color-gwtSlate, #5a6360);
}

/* ---------------------------------------------------------------------------
 * 8. PLACEHOLDER
 * Blocks whose real content does not exist yet. Deliberately unmistakable:
 * these must never be mistaken for finished content, and must never carry
 * invented prices, rider names or figures.
 * ------------------------------------------------------------------------- */

.placeholder {
  border: 0.125rem dashed var(--e-global-color-gwtGreenDeep, #1e7a28);
  border-radius: var(--radius);
  background-color: var(--e-global-color-gwtGreenWash, #eaf7ec);
  padding: var(--space-md);
}

.placeholder__tag {
  display: inline-block;
  margin-block-end: var(--space-2xs);
  font-family: var(--e-global-typography-gwtSmall-font-family), sans-serif;
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Green Deep on Green Wash measures 4.71:1 — AA for normal text. */
  color: var(--e-global-color-gwtGreenDeep, #1e7a28);
  border: var(--hairline) solid var(--e-global-color-gwtGreenDeep, #1e7a28);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-xs);
}

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

/* ---------------------------------------------------------------------------
 * 8b. SINGLE TESTIMONIAL
 * One story in a three-column grid leaves two visible holes and reads as
 * broken. While there is only one, it spans the grid and presents as a
 * pull-quote rather than a card. `:only-of-type` means this reverts to normal
 * cards on its own the moment a second story is published — no edit needed.
 * (The loop container's other child is a style element — a different tag name,
 * so it does not defeat the selector. Note: FluentSnippets' CSS sanitiser
 * rejects a literal style tag anywhere in a snippet, comments included.)
 * ------------------------------------------------------------------------- */

.stories__grid .elementor-loop-container > .e-loop-item:only-of-type {
  grid-column: 1 / -1;
  max-width: var(--wrap-narrow);
}

.stories__grid .elementor-loop-container > .e-loop-item:only-of-type .story-card {
  border: 0;
  background-color: transparent;
}

.stories__grid .elementor-loop-container > .e-loop-item:only-of-type .story-card__quote {
  font-size: var(--step-h3);
  line-height: 1.35;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
 * 8c. RANGE-PROOF MEDIA
 * ------------------------------------------------------------------------- */

.film__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ---------------------------------------------------------------------------
 * 9. SITE FOOTER
 * ------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--e-global-color-gwtInk, #101312);
  color: var(--e-global-color-gwtSurface, #ffffff);
}

.site-footer__heading {
  font-family: var(--e-global-typography-gwtSmall-font-family), sans-serif;
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e-global-color-gwtGreen, #2ea836);
}

.site-footer__body,
.site-footer__body p {
  font-family: var(--e-global-typography-gwtBody-font-family), sans-serif;
  font-size: var(--step-small);
  line-height: 1.7;
  /* Pure white at small size on Ink is harsh; this sits at 13.9:1. */
  color: rgba(255, 255, 255, 0.82);
}

.site-footer a,
.site-footer__body a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--e-global-color-gwtGreen, #2ea836);
  text-decoration: underline;
}

.site-footer__cause {
  border: var(--hairline) solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: var(--space-sm);
}

.site-footer__bar {
  border-block-start: var(--hairline) solid rgba(255, 255, 255, 0.12);
}

.site-footer__bar,
.site-footer__bar p {
  font-family: var(--e-global-typography-gwtSmall-font-family), sans-serif;
  font-size: var(--step-small);
  color: rgba(255, 255, 255, 0.62);
}