/*
 * Typography — @font-face declarations and reusable text classes.
 * Class names mirror Figma styles: .t-heading-3xl, .t-paragraph-base, .t-button-sm, .t-accent-lg.
 *
 * Font files live in /assets/fonts/. Keep `font-display: swap` so first paint
 * is never blocked on font download.
 */

/* ====================================================================== *
 * @font-face — Jonova
 * ====================================================================== */
@font-face {
  font-family: 'Jonova';
  src: url('../fonts/Jonova/Jonova-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jonova';
  src: url('../fonts/Jonova/Jonova-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Jonova';
  src: url('../fonts/Jonova/Jonova-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jonova';
  src: url('../fonts/Jonova/Jonova-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ====================================================================== *
 * @font-face — Jonova Condensed (separate family)
 * ====================================================================== */
@font-face {
  font-family: 'Jonova Condensed';
  src: url('../fonts/Jonova/JonovaCondensed-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jonova Condensed';
  src: url('../fonts/Jonova/JonovaCondensed-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Jonova Condensed';
  src: url('../fonts/Jonova/JonovaCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jonova Condensed';
  src: url('../fonts/Jonova/JonovaCondensed-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ====================================================================== *
 * @font-face — Ezerovo (accent / display)
 * ====================================================================== */
@font-face {
  font-family: 'Ezerovo';
  src: url('../fonts/Ezerovo/Ezerovo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ezerovo';
  src: url('../fonts/Ezerovo/Ezerovo-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Ezerovo';
  src: url('../fonts/Ezerovo/Ezerovo-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ezerovo';
  src: url('../fonts/Ezerovo/Ezerovo-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Ezerovo';
  src: url('../fonts/Ezerovo/Ezerovo-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ezerovo';
  src: url('../fonts/Ezerovo/Ezerovo-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Ezerovo';
  src: url('../fonts/Ezerovo/Ezerovo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ezerovo';
  src: url('../fonts/Ezerovo/Ezerovo-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ====================================================================== *
 * Base body typography
 * ====================================================================== */
body {
  font-family: var(--font-primary);
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  color: var(--color-text-900);
  /* Default page bg is white. Pages can opt into other bgs explicitly. */
  background-color: var(--color-bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

/*
 * Home page bg.
 * The whole home page sits on solid blue-50 — sections that want a
 * different surface (a future "white card" variant, etc.) opt in
 * locally. The Hero/Trust-strip area gets an additional richer-blue
 * tint via body.home::before that fades to transparent over the top
 * ~1100px so the upper portion reads "deeper blue", and below it the
 * page just shows the base blue-50.
 */
body.home {
  background-color: var(--color-bg-blue-50);
}

/*
 * Inner-page bg.
 * Pages using the default page template (Success Stories etc.) sit on
 * the same blue-50 surface so the page-wide rails (`.page-rails`) and
 * decorative stars remain visible — they live at z-index: -1 inside
 * .site-main, so any section that paints its own opaque background
 * would cover them. Keeping section backgrounds transparent and
 * letting the body provide the surface makes the rails show through.
 */
body.page-template-default {
  background-color: var(--color-bg-blue-50);
}

/* ====================================================================== *
 * Page rails — used on inner pages (Success Stories etc.) via page.php.
 * Same visual language as .home-decor on the home: three 1px vertical
 * lines that span the full .site-main height with a soft fade at top
 * and bottom, plus a few pastel-blue 4-point stars scattered along
 * the rails.
 * ====================================================================== */

.page-rails {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  left: 0;
  right: 0;
  padding-inline: 80px;
}

.page-rails__rail {
  width: 1px;
  flex-shrink: 0;
  /* Mirror .home-decor: fade in over the top ~8%, hold solid through
     the body, fade back out across the closing section so the line
     dissolves into the footer area instead of ending on a hard edge. */
  background: linear-gradient(
    180deg,
    rgba(222, 236, 255, 0) 0%,
    #deecff                8%,
    #deecff                90%,
    rgba(222, 236, 255, 0) 100%
  );
}

.page-rails__star {
  position: absolute;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-rails__star svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Star slots distributed along the rails so the eye reads them as
   scattered, not aligned. Coordinates are % of .site-main height so
   they don't drift on long pages. Slot --b is hidden because at ~22%
   it lands on the boundary between the hero photo and the first
   success-story heading on the Success Stories page (visual clash
   with the section's divider/quote-mark area). */
.page-rails__star--a { top: 6%;  left: 60px; }
.page-rails__star--b { display: none; }
.page-rails__star--c { top: 35%; right: 60px; }
.page-rails__star--d { top: 58%; left: 60px; }
.page-rails__star--e { top: 78%; left: calc(50% - 20px); }
.page-rails__star--f { top: 92%; right: 60px; }

@media (max-width: 1280px) {
  .page-rails {
    padding-inline: var(--space-2xl);
  }
}

@media (max-width: 960px) {
  .page-rails {
    padding-inline: 0;
    justify-content: center;
  }
  /* Mobile (Figma 1:4339 etc): only the centre rail. The
     decorative star spans live in the same container as the rails,
     so `:last-child` matched a star, not the right rail — using
     explicit positions (1st + 3rd children = left + right rail)
     keeps just the middle one visible. */
  .page-rails__rail:nth-child(1),
  .page-rails__rail:nth-child(3) {
    display: none;
  }
  /* Drop side stars; keep the centre column ones only. */
  .page-rails__star--a,
  .page-rails__star--c,
  .page-rails__star--d,
  .page-rails__star--f {
    display: none;
  }
}

body.home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1100px;
  background: linear-gradient(
    180deg,
    rgba(161, 191, 255, 0.40) 0%,
    rgba(161, 191, 255, 0.20) 45%,
    rgba(161, 191, 255, 0)    100%
  );
  pointer-events: none;
  z-index: 0;
}

.site-main {
  position: relative;
  z-index: 1;
  /* Establish a stacking context so .home-decor's negative z-index
     stays scoped inside the main column (otherwise it would slip
     behind body.home::before and disappear under the gradient). */
  isolation: isolate;
}

/* ====================================================================== *
 * Home page decor — three full-height vertical rails
 *
 * Three 1px vertical lines running through every section of the home
 * page (Figma BG-line frames at section level all share this pattern).
 * Mobile keeps a single centred rail per Figma 1:4319.
 *
 * The element is rendered by front-page.php as the first child of
 * .site-main. `position: absolute; inset: 0` spans the whole content
 * column; flex layout pins the rails at the design's 80px gutters
 * (and centre).
 * ====================================================================== */

.home-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  /* Align rails to the design container so they don't drift on very
     wide viewports. Padding mirrors the 80px gutter Figma uses on the
     section "BG line" decor frames. */
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  left: 0;
  right: 0;
  padding-inline: 80px;
}

/* ====================================================================== *
 * Site-wide scroll FX
 *
 * Elements with `.fx-reveal` start hidden and slide up when they
 * enter the viewport (handled by /assets/js/fx-reveal.js). Elements
 * with `[data-parallax]` pick up a `--parallax-y` CSS variable as
 * the page scrolls and translate by that amount. Both effects are
 * disabled by `prefers-reduced-motion: reduce` (no class added →
 * the .is-visible final state is forced by the JS in that case).
 * ====================================================================== */

.fx-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 800ms cubic-bezier(.16, 1, .3, 1),
    transform 800ms cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

.fx-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

[data-parallax] {
  transform: translateY(var(--parallax-y, 0));
  /* Short transition so the var update reads as smooth instead of
     sample-by-sample stepped. */
  transition: transform 120ms linear;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax] {
    transform: none;
    transition: none;
  }
}

.home-decor__rail {
  width: 1px;
  flex-shrink: 0;
  /* Page-spanning rail with two soft fades:
     - top: transparent so the line emerges from the hero gradient,
       reaches solid by the time the hero tint dies (~1100/5400 ≈ 20%)
     - middle (~20-90%): solid soft brand-blue, reads on both the
       tinted hero region and the plain blue-50 body
     - bottom (~90-100%): fades back to transparent across the closing
       cta-simple section so the line dissolves into the closing tint
     Percentages are tuned to the current home structure (hero through
     cta-simple); they degrade gracefully if sections grow because
     the gradient is anchored to the rail's intrinsic height. */
  background: linear-gradient(
    180deg,
    rgba(222, 236, 255, 0) 0%,
    #deecff                20%,
    #deecff                90%,
    rgba(222, 236, 255, 0) 100%
  );
}

@media (max-width: 1280px) {
  .home-decor {
    padding-inline: var(--space-2xl);
  }
}

@media (max-width: 960px) {
  .home-decor {
    padding-inline: 0;
    justify-content: center;
  }
  /* Mobile (Figma 1:4319 etc): only the centre rail. */
  .home-decor__rail:first-child,
  .home-decor__rail:last-child {
    display: none;
  }
}


/* ====================================================================== *
 * Reusable text classes — match Figma styles 1:1
 * ====================================================================== */

/* Display — Ezerovo, hero scale */
.t-display-1 {
  font-family: var(--font-accent);
  font-size: var(--text-display-1-size);
  line-height: var(--text-display-1-line);
  font-weight: 400;
}

/* Headings — Jonova */
.t-heading-3xl {
  font-family: var(--font-primary);
  font-size: var(--text-3xl-size);
  line-height: var(--text-3xl-line);
  font-weight: 400;
}

.t-heading-2xl {
  font-family: var(--font-primary);
  font-size: var(--text-2xl-size);
  line-height: var(--text-2xl-line);
  font-weight: 400;
}

/* Paragraphs — Jonova */
.t-paragraph-lg {
  font-family: var(--font-primary);
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
  font-weight: 400;
}

.t-paragraph-lg-bold {
  font-family: var(--font-primary);
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
  font-weight: 700;
}

.t-paragraph-base {
  font-family: var(--font-primary);
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  font-weight: 400;
}

.t-paragraph-sm {
  font-family: var(--font-primary);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 400;
}

.t-paragraph-xs {
  font-family: var(--font-primary);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  font-weight: 400;
}

/* Accent paragraph — Ezerovo serif */
.t-accent-lg {
  font-family: var(--font-accent);
  font-size: var(--text-lg-size);
  line-height: var(--accent-text-lg-line);
  font-weight: 400;
}

/* Button text — tighter line-height than paragraphs */
.t-button-lg {
  font-family: var(--font-primary);
  font-size: var(--text-lg-size);
  line-height: var(--btn-text-lg-line);
  font-weight: 400;
}

.t-button-lg-bold {
  font-family: var(--font-primary);
  font-size: var(--text-lg-size);
  line-height: var(--btn-text-lg-line);
  font-weight: 700;
}

.t-button-base {
  font-family: var(--font-primary);
  font-size: var(--text-base-size);
  line-height: var(--btn-text-base-line);
  font-weight: 400;
}

.t-button-sm {
  font-family: var(--font-primary);
  font-size: var(--text-sm-size);
  line-height: var(--btn-text-sm-line);
  font-weight: 400;
}

.t-button-xs {
  font-family: var(--font-primary);
  font-size: var(--text-xs-size);
  line-height: var(--btn-text-xs-line);
  font-weight: 400;
}