/* Ridgeline — global styles. rem-only (units other than rem appear only in media queries). */

/* ── Self-hosted Montserrat (variable, weights 100–900) ── */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations');
}

/* ── Root: fluid scaling. 1rem tracks this, so all rem values scale together. ── */
html {
  font-size: clamp(1rem, 1vw, 100rem);
  overflow-x: hidden;
  touch-action: pan-y;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0rem; padding: 0rem; }

body {
  font-family: var(--rl-font-body);
  color: var(--rl-color-text);
  background: var(--rl-color-bg);
  font-size: 1rem;
  line-height: 1.6rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Full-bleed structure: header overlays, hero starts at the very top ── */
/* WordPress injects padding-top via --wp--style--root--padding-top on .wp-site-blocks — kill it. */
.wp-site-blocks {
  overflow-x: clip;
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}
/* The header template-part wrapper must be zero-height so the hero sits at y=0.
   The actual .rl-header inside it is position:absolute and escapes flow. */
header.wp-block-template-part {
  position: relative;
  height: 0rem;
  overflow: visible;
  z-index: 20;
}

/* Front page and inner pages: strip the constrained-content padding/margins so
   sections sit flush to the top and edges. Every Ridgeline section block
   handles its own full-bleed width via `width:100vw; margin-left:calc(50% -
   50vw)`, and that math only lands correctly when the post-content wrapper
   contributes no padding of its own (the `is-layout-constrained` /
   `has-global-padding` classes WordPress adds otherwise). */
.home main.wp-block-group,
.home .wp-block-post-content,
.home .wp-block-post-content.has-global-padding,
.page main.wp-block-group,
.page .wp-block-post-content,
.page .wp-block-post-content.has-global-padding {
  margin: 0rem;
  padding: 0rem;
}
.home .wp-block-post-content > :first-child,
.page .wp-block-post-content > :first-child { margin-top: 0rem; }

/* ── Design tokens (from Figma) ── */
:root {
  --rl-navy:       #0e1344;
  --rl-navy-deep:  #040b43;
  --rl-gold:       #fab529;
  --rl-gold-logo:  #fab529; /* aligned to single Figma brand gold per client request 2026-07-02, was #e8b33b (a separate logo-pull gold) */
  --rl-white:      #ffffff;
  --rl-color-text: #1a1a1a;
  --rl-color-bg:   #ffffff;

  --rl-font-heading: 'Montserrat', system-ui, sans-serif;
  --rl-font-body:    'Montserrat', system-ui, sans-serif;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-2xl: 8rem;

  --content-width: 80rem;
  --wide-width:    90rem;
}

/* ── Utility ── */
.ridgeline-inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.ridgeline-inner--wide { max-width: var(--wide-width); }

/* ── Global button states ──
   Gold CTAs flip to the brand blue on hover and navy on press. Darkening the
   gold read as "the same button, slightly off" — this is an unambiguous
   change of state, and reuses colours already in the palette. */
.rl-ph__cta:hover,
.rl-ps__cta:hover,
.rl-ic__cta:hover,
.rl-ic--panel .rl-ic__cta:hover,
.rl-ic--photo .rl-ic__cta:hover,
.rl-cf__submit:hover,
.rl-fq__aside-cta:hover,
.rl-ins__cta:hover { background: #000000; color: var(--rl-white, #ffffff); }

.rl-ph__cta:active,
.rl-ps__cta:active,
.rl-ic__cta:active,
.rl-cf__submit:active,
.rl-fq__aside-cta:active,
.rl-ins__cta:active {
  background: var(--rl-navy, #0e1344);
  color: var(--rl-white, #ffffff);
  transform: translateY(0rem);
}

/* The mid-page bar's button is already navy — invert it instead. */
.rl-ic--bar .rl-ic__cta:hover  { background: #000000; color: var(--rl-white, #ffffff); }
.rl-ic--bar .rl-ic__cta:active { background: #eef4ff; color: var(--rl-navy, #0e1344); }