/* =========================================================================
   YHV Divi Child - reconcile layer
   Puts the YHV design back over Divi 5's default rendering. Loads AFTER
   css/site.css and every rule is scoped under body.yhv-site (added by
   functions.php), so nothing here can touch non-YHV pages.

   Divi stamps its own widths, padding, margins, fonts and display modes on
   sections/rows/columns/modules. This file kills those inside YHV layouts and
   re-asserts the site's own classes at matching-or-higher specificity, so
   css/site.css remains the single source of truth for the design.

   Layout Style baked into the page JSON is STRIPPED ON IMPORT (sections reset
   to Block, rows to Flex) - every grid/flex decision below is deliberately
   re-stated here because it cannot live in the JSON.
   ========================================================================= */

/* ---- Base: body, links, type -------------------------------------------- */

body.yhv-site {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  overflow-x: clip;
}

body.yhv-site h1,
body.yhv-site h2,
body.yhv-site h3,
body.yhv-site h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

body.yhv-site h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

body.yhv-site a { color: inherit; text-decoration: none; }

body.yhv-site img,
body.yhv-site svg { display: block; max-width: 100%; }

/* Divi's text module styles (p/ul/ol margins, list bullets) must not leak in. */
.yhv-site .et_pb_text_inner p,
.yhv-site .et_pb_code_inner p { margin: 0 0 1.15em; max-width: var(--measure); }
.yhv-site .et_pb_text_inner p:last-child,
.yhv-site .et_pb_code_inner p:last-child { margin-bottom: 0; }

.yhv-site .et_pb_text_inner ul,
.yhv-site .et_pb_text_inner ol,
.yhv-site .et_pb_code_inner ul,
.yhv-site .et_pb_code_inner ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yhv-site .et_pb_text_inner strong { font-weight: 600; }

/* ---- Sections: kill Divi's padding, re-assert ours ----------------------- */

.yhv-site .et_pb_section { padding-top: 0; padding-bottom: 0; }

.yhv-site .et_pb_section.section { padding-block: var(--section-y); }
.yhv-site .et_pb_section.chapter { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.yhv-site .et_pb_section.hero {
  background: var(--white);
  padding-top: clamp(2.25rem, 4.6vw, 4.25rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
  overflow-x: clip;
}

.yhv-site .et_pb_section.page-hero {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.yhv-site .et_pb_section.marks {
  padding-top: clamp(1rem, 2vw, 1.75rem);
  padding-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
  overflow-x: clip;
}

.yhv-site .et_pb_section.about {
  padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
  overflow-x: clip;
}

/* Contact's white block carried an inline padding-top override in the static
   build; that becomes a class here. */
.yhv-site .et_pb_section.contact-white { padding-top: clamp(2rem, 4vw, 3rem); }

/* The per-page closing CTA. In the static build it lives inside the footer;
   here it is the last section of each page, styled to blend seamlessly into
   the Theme Builder footer that follows it. */
.yhv-site .et_pb_section.footer-pre {
  background: var(--navy-900);
  color: var(--on-dark-muted);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: 0;
  overflow: hidden;
}
.yhv-site .et_pb_section.footer-pre .label { color: var(--navy-200); }
.yhv-site .footer-pre .footer__cta-title { color: var(--white); }
.yhv-site .footer-pre .footer__cta-text { color: var(--on-dark-muted); }
.yhv-site .footer-pre .footer__cta { border-bottom-color: var(--rule-dark); }
.yhv-site .footer-pre .btn--light,
.yhv-site .footer-pre .btn--light:hover { color: var(--navy-800); }
.yhv-site .footer-pre .btn--ghost-dark { color: var(--on-dark); }
.yhv-site .footer-pre .btn--ghost-dark:hover { color: var(--navy-800); }
.yhv-site .footer-pre a { color: var(--on-dark-muted); }
.yhv-site .footer-pre a:hover { color: var(--white); }

/* ---- Rows: full width, no Divi padding ----------------------------------- */

.yhv-site .et_pb_row:not(.et_pb_row_nested),
.yhv-site .et_pb_row_nested {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-top: 0;
  padding-bottom: 0;
}

/* The container inset comes back only where the row carries .wrap. */
.yhv-site .et_pb_row.wrap { padding-inline: var(--gutter); }

/* ---- Columns: free them from Divi's gutters everywhere ------------------- */

.yhv-site .et_pb_row > .et_pb_column,
.yhv-site .et_pb_row_nested > .et_pb_column {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  min-width: 0;
  padding: 0 !important;
}

/* ---- Module defaults ------------------------------------------------------ */

.yhv-site .et_pb_module { margin-bottom: 0; }
/* Spacing between stacked modules comes from the inner elements' own margins,
   exactly as in the static build (they collapse through the module wrappers). */

/* Divi 5 stamps text-align on rows/columns/modules (hero must be centred, the
   marks note centred, everything else inheriting from the section). Re-tie the
   chain to the section so the site CSS owns alignment. */
.yhv-site .et_pb_row,
.yhv-site .et_pb_row_nested,
.yhv-site .et_pb_column,
.yhv-site .et_pb_module,
.yhv-site .et_pb_text_inner { text-align: inherit !important; }

/* Divi's flex-row display must not override the site's grid/flex containers.
   Templates, gaps and placement keep coming from css/site.css - only the
   contested `display` property is re-asserted here. */
.yhv-site .et_pb_row.labelled,
.yhv-site .et_pb_row.chapter__grid,
.yhv-site .et_pb_row.split,
.yhv-site .et_pb_row.contact-layout,
.yhv-site .et_pb_row.footer__cta,
.yhv-site .et_pb_row.grid,
.yhv-site .et_pb_row.tile-grid,
.yhv-site .et_pb_row_nested.about__top,
.yhv-site .et_pb_row_nested.profile { display: grid; }

.yhv-site .et_pb_row.trainers__sticky {
  display: flex;
  flex-direction: column;
}

.yhv-site .et_pb_row.marks__strip { display: flex; }

.yhv-site .et_pb_row_nested.trainers__track { display: flex; }

/* Card columns keep their flex-column layout. */
.yhv-site .et_pb_column.card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.yhv-site .et_pb_column.card--solid { gap: 0.85rem; }

/* ---- Chapter media column -------------------------------------------------- */
/* The chapter image column carries the design (5:8 frame, inset absolute img
   for the scroll parallax). Divi's image module wrapper sits between the
   column and the img, so the positioning ancestor and the img rules are
   re-asserted here at body-scoped specificity. */

.yhv-site .et_pb_column.chapter__media {
  position: relative;
  aspect-ratio: 5 / 8;
  overflow: hidden;
  background: var(--navy-100);
}

.yhv-site .et_pb_column.chapter__media img {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  max-width: none;
  object-fit: cover;
  margin: 0;
}

/* Divi's image module and its wrap are position:relative, which makes THEM the
   containing block for the absolutely positioned img (a 0x0 wrap collapses the
   image to nothing). Hand positioning back to the column. */
.yhv-site .et_pb_column.chapter__media .et_pb_image,
.yhv-site .et_pb_column.chapter__media .et_pb_image_wrap {
  position: static;
  display: block;
  height: 100%;
}

/* Divi's per-row padding rule strips the track's gutter inset, leaving the
   cards flush against the viewport edge. */
.yhv-site .et_pb_row.trainers__track { padding-inline: var(--gutter); }

@media (max-width: 760px) {
  .yhv-site .et_pb_column.chapter__media { aspect-ratio: 3 / 2; }
}

/* ---- Theme Builder header ------------------------------------------------- */
/* A sticky header inside the TB header layout is trapped in Divi's stacking
   context (.et_pb_column gets position:relative; z-index:2, and page content
   paints over it). Lift the whole header layout instead - below the WP admin
   bar's 99999. */

.et-l--header { position: relative; z-index: 9999; }

.et-l--header .et_pb_section { padding: 0; }
.et-l--header .et_pb_row { width: 100%; max-width: none; padding: 0; margin: 0; }
.et-l--header .et_pb_column { width: auto !important; padding: 0 !important; margin: 0 !important; }

/* ---- Theme Builder footer ------------------------------------------------- */
/* The footer body is one Code module of static markup; only Divi's own
   container padding needs killing. The closing-CTA spacing lives in each
   page's .footer-pre section, so the footer itself starts at zero. */

.et-l--footer .et_pb_section { padding: 0; }
.et-l--footer .et_pb_row { width: 100%; max-width: none; padding: 0; margin: 0; }
.et-l--footer .et_pb_column { width: auto !important; padding: 0 !important; margin: 0 !important; }
.yhv-site .et-l--footer .footer { padding-top: 0; }

/* ---- Motion --------------------------------------------------------------- */
/* Reveal initial states are set ONLY by JS (never in CSS), so content can
   never be stranded invisible. CSS only declares the transition for the
   IntersectionObserver tier and disables it once GSAP owns the properties. */

.yhv-reveal {
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.yhv-reveal.is-visible { opacity: 1; transform: none; }

.gsap .yhv-reveal { transition: none; }

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

/* ---- Tile colour classes --------------------------------------------------- */
/* The static build passed --tile via inline style attributes, which the Divi
   JSON cannot carry on a column. Class equivalents, appended here. */

.yhv-site .et_pb_column.card--navy-900 { --tile: var(--navy-900); }
.yhv-site .et_pb_column.card--navy-800 { --tile: var(--navy-800); }
.yhv-site .et_pb_column.card--navy-700 { --tile: var(--navy-700); }
.yhv-site .et_pb_column.card--navy-600 { --tile: var(--navy-600); }

/* ---- Admin nicety ---------------------------------------------------------- */
/* The white background of the visual builder can make the .wrap rows hard to
   place; keep the paper canvas visible while editing. */
.et-fb .yhv-site .et_pb_section { background-color: inherit; }