/* ==========================================================================
   Beyond Typical Training — sitewide foundations, header and footer
   Tokens taken from the original Elementor global kit (post-1063.css).
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Inter Tight variable, latin subset, self-hosted. One file covers 400–800. */
@font-face {
  font-family: 'Inter Tight';
  src: url('/fonts/inter-tight-roman.woff2?v=77fefe8ca1') format('woff2-variations'),
       url('/fonts/inter-tight-roman.woff2?v=77fefe8ca1') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/fonts/inter-tight-italic.woff2?v=26da6578cb') format('woff2-variations'),
       url('/fonts/inter-tight-italic.woff2?v=26da6578cb') format('woff2');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

/* --- Design tokens ------------------------------------------------------- */
:root {
  --c-accent:      #5B8C85;
  --c-accent-dark: #4D7771;
  --c-accent-darker: #3F625D;   /* button hover, now that the base is #4D7771 */
  --c-ink:         #171717;
  --c-ink-soft:    #2F2F2F;
  --c-cream:       #F7F5EF;
  --c-sage:        #A3BFA8;
  --c-sage-pale:   #D7DDD5;
  --c-grey:        #A3A3A3;
  --c-white:       #FFFFFF;

  --font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1280px;
  --gutter: 24px;

  /* Type scale — the exact values from the Elementor kit, at the same
     breakpoints the original uses (desktop >=1025, tablet <=1024, mobile <=767).
     Deliberately not fluid: the original steps, so this steps too. */
  --fs-h1:      72px;    --lh-h1: 1.2;
  --fs-h2:      56.5px;  --lh-h2: 1.2;
  --fs-h3:      24.5px;  --lh-h3: 1.4;
  --fs-stat:    29.5px;  --lh-stat: 1.4;
  --fs-card:    27px;    --lh-card: 1.4;
  --fs-eyebrow: 18px;    --lh-eyebrow: 1.6;
  --fs-lead:    18px;    --lh-lead: 1.6;
  --fs-body:    16px;    --lh-body: 1.8;
  --fs-nav:     17px;
  --fs-btn:     16px;
  --fs-summary: 20px;

  --header-h: 95px;
}

@media (max-width: 1024px) {
  :root {
    --fs-h1: 47.78px;
    --fs-h2: 39.81px;
    --fs-h3: 19.2px;
    --fs-stat: 23.04px;
    --fs-card: 23.04px;
    --fs-eyebrow: 16px;
    --fs-lead: 16px;
  }
}
@media (max-width: 767px) {
  :root {
    --fs-body: 14px;
    --fs-btn: 14px;
    --fs-summary: 19.2px;
    --gutter: 25px;   /* the original's mobile container padding */
  }
}

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

html { -webkit-text-size-adjust: 100%; }

/* Small offset so in-page anchors don't butt against the viewport edge */
html { scroll-padding-top: 16px; }

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink-soft);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1px;
  /* The original renders all headings capitalised via CSS; the underlying
     copy is left exactly as written so it stays faithful to the source. */
  text-transform: capitalize;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

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

a { color: inherit; }

ul { margin: 0; padding: 0; }

/* --- Layout primitives --------------------------------------------------- */
/* The original's container is 1280px of CONTENT with the gutter on the
   section, so .wrap carries no padding of its own. */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.section {
  padding-block: clamp(56px, 7vw, 100px);
  padding-inline: var(--gutter);
}
.section--cream { background: var(--c-cream); }
.section--dark  { background: var(--c-ink); color: var(--c-white); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-white); }
.section--dark .eyebrow { color: var(--c-white); }

.eyebrow {
  margin: 0 0 12px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: var(--lh-eyebrow);
  letter-spacing: normal;
  text-transform: capitalize;
  color: var(--c-accent-dark);   /* 5.01:1 on white - WCAG AA */
}

.eyebrow--tight { letter-spacing: -1px; }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* --- Accessibility ------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 200;
  transform: translateY(-150%);
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--c-ink);
  color: var(--c-white);
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease;
}
.skip-link:focus-visible { transform: translateY(0); }

/* Visible focus on everything interactive */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--c-accent-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Header -------------------------------------------------------------- */
/* The original header is static and scrolls away with the page - not sticky. */
.site-header {
  position: relative;
  z-index: 100;
  background: var(--c-white);
  border-bottom: 1px solid rgba(23, 23, 23, .08);
  padding-inline: 12px;
}
/* Original: 1240px inner, space-between, 300px logo column, 10px gaps. */
.site-header__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding: 15px 0;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.site-logo { flex: 0 0 auto; width: 300px; display: inline-flex; line-height: 0; }
.site-logo img { width: 138px; height: 54px; }

.site-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.site-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 30px);
  list-style: none;
}
.site-nav a {
  display: inline-block;
  padding: 6px 2px;
  font-size: var(--fs-nav);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.5px;
  text-transform: capitalize;
  text-decoration: none;
  color: var(--c-ink-soft);
}
.site-nav a:hover { color: var(--c-accent-dark); text-decoration: underline; text-underline-offset: 4px; }
/* Current page: AA-safe green plus an underline, so colour is not the only
   cue (WCAG 1.4.1 Use of Colour). */
.site-nav a[aria-current='page'] {
  color: var(--c-accent-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.site-header .btn { flex: 0 0 auto; }

/* Mobile menu toggle - a solid brand pill (white on #4D7771 is 5.01:1) whose
   bars morph into a cross when the panel is open, so the control's state is
   obvious without relying on the label alone. */
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  margin-left: auto;
  align-items: center;
  gap: 11px;
  padding: 15px 22px;   /* keeps the tap target at 45px tall */
  border: 0;
  border-radius: 100px;
  background: var(--c-accent-dark);
  color: var(--c-white);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(77, 119, 113, .3);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.nav-toggle:hover { background: var(--c-accent-darker); }
.nav-toggle[aria-expanded='true'] { background: var(--c-ink); box-shadow: none; }

.nav-toggle__bars { position: relative; flex: 0 0 auto; width: 18px; height: 14px; }
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: top .28s cubic-bezier(.4, 0, .2, 1),
              transform .28s cubic-bezier(.4, 0, .2, 1),
              opacity .16s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* .site-nav a is more specific than .btn, so the in-menu CTA was inheriting
   the dark link colour instead of the button's white. */
.site-nav .btn { color: var(--c-white); }
.site-nav .btn:hover { color: var(--c-white); text-decoration: none; }
.site-nav .btn--ghost { color: var(--c-accent-dark); }
.site-nav .btn--ghost:hover { color: var(--c-white); }

/* Email button at the foot of the mobile menu */
.nav-email { display: none; }
.nav-email .icon { flex: 0 0 auto; width: 18px; height: 18px; }

/* On a phone the header sticks and hides as you scroll down, coming back the
   moment you scroll up - so the menu is always one gesture away without
   permanently eating vertical space. Desktop keeps the original static bar. */
@media (max-width: 940px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--c-white);
    transition: transform .3s ease;
  }
  body.head-hidden .site-header { transform: translateY(-100%); }
  /* A transform on the header makes it the containing block for the fixed
     menu panel inside it, which leaves the panel clipped to the header box.
     Clear it outright (no transition) while the menu is open. Note: do NOT
     add will-change: transform here - that has the same effect permanently. */
  body.nav-open .site-header { transform: none; transition: none; }
  /* the sticky bar must not cover the target of an in-page link */
  [id] { scroll-margin-top: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* Photographs get a soft placeholder tint so a lazily-loaded image shows a
   warm grey while it decodes rather than a white flash. Scoped to photo
   containers only - the icon and illustration images have transparency and
   would show a grey box behind them. */
.split__media img,
.split2__media img,
.cards img,
.card img,
.post-card img,
.recent img,
.tiles img,
.athlete img,
.stats img,
.course-card img,
.article__hero {
  background-color: rgba(23, 23, 23, .05);
}

/* Full-screen mobile menu ---------------------------------------------------
   Below 940px the nav becomes a panel that slides in from the right and
   covers the viewport. It carries its own logo and close control, so the
   visitor is never left without a way out, and it is hidden with visibility
   rather than a transform alone so its links stay out of the tab order while
   it is closed. */
.site-nav__bar { display: none; }
.nav-close {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(77, 119, 113, .3);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-accent-dark);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nav-close .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.nav-close:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: var(--c-white); }

@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .nav-email { display: block; }
  .site-logo { width: auto; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: block;
    visibility: hidden;
    transform: translateX(100%);
    background: var(--c-white);
    padding: 18px 25px 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility .35s;
  }
  .site-nav[data-open='true'] { visibility: visible; transform: none; }
  body.nav-open { overflow: hidden; }

  .site-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto 22px;
  }
  /* .site-nav a carries the row divider, which would otherwise draw a rule
     above the panel's logo too */
  .site-nav__bar .site-nav__logo { display: inline-flex; line-height: 0; padding: 0; }
  .site-nav__logo img { width: 138px; height: 54px; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 480px;
    margin-inline: auto;
    padding-bottom: 16px;
  }
  /* The row dividers sit on the <li>. Putting them on the <a> meant they
     also matched the two action buttons and wiped out the top edge of their
     outlines. */
  .site-nav ul li { border-top: 1px solid rgba(23, 23, 23, .08); }
  .site-nav ul li:first-child,
  .site-nav ul li.nav-cta,
  .site-nav ul li.nav-email { border-top: 0; }
  .site-nav ul a { display: block; padding: 18px 4px; font-size: 22px; }

  .site-header .btn--header-desktop { display: none; }
  /* closes the list and separates the two actions from the navigation */
  .site-nav ul li.nav-cta {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(23, 23, 23, .08);
  }
  .site-nav .nav-email { margin-top: 16px; }
  .site-nav .nav-cta a,
  .site-nav .nav-email a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--fs-btn);
    text-transform: none;
  }
  .site-nav .nav-email a { word-break: break-word; }
}
@media (min-width: 941px) { .site-header .site-nav .nav-cta, .site-header .site-nav .nav-email { display: none; } }

/* --- Footer ---------------------------------------------------------------
   Original structure: centred logo, rule, three link columns, rule,
   centred social icons, centred legal links, centred copyright. */
.site-footer {
  background: var(--c-ink);
  color: var(--c-white);
  padding-block: clamp(48px, 6vw, 88px) 40px;
  padding-inline: var(--gutter);
}
.site-footer__logo {
  display: block;
  text-align: center;
  margin-bottom: 32px;
}
.site-footer__logo img { width: 232px; height: 110px; margin-inline: auto; }

.site-footer hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin: 0 0 48px;
}
.site-footer hr + .site-footer__cols { margin-top: 0; }

.site-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 48px;
}
.site-footer__cols > * { flex: 1 1 260px; }
.site-footer__cols { justify-content: center; }

/* Original footer headings are 29.5px/800, centred, same token as the stats */
.site-footer h2 {
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: var(--lh-stat);
  letter-spacing: normal;
  text-transform: capitalize;
  margin-bottom: 20px;
  color: var(--c-white);
}
.site-footer__cols > * { text-align: center; }
.site-footer ul { list-style: none; }
/* Only the stacked link columns get vertical spacing - not the
   horizontal social and legal rows. */
.site-footer__cols li + li { margin-top: 12px; }
.site-footer a {
  color: var(--c-grey);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -.4px;
}
.site-footer a:hover { color: var(--c-accent-dark); text-decoration: underline; text-underline-offset: 4px; }

.site-footer__legal { text-align: center; }
.site-footer__legal .social { justify-content: center; margin: 0 0 24px; }
.site-footer__legal ul.inline {
  list-style: none;
  display: flex;
  align-items: center;      /* without this the items sit on the text baseline */
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.site-footer__legal ul.inline li { display: flex; }
.site-footer__legal ul.inline a { font-weight: 700; }
.site-footer__copyright {
  text-align: center;
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.4px;
  text-transform: capitalize;
  color: var(--c-cream);
}

@media (max-width: 767px) {
  .site-footer__cols { gap: 32px; }
  .site-footer__cols > * { flex: 1 1 100%; }
}

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

/* --- Mobile logo sizes (kept last so they win on source order) ----------- */
@media (max-width: 767px) {
  .site-logo img { width: 120px; height: 47px; }
  .site-footer__logo img { width: 196px; height: 93px; }
}