/**
 * evermoves - Base brand styles
 * --------------------------------------------------------------------------
 * Reset + global type + utility classes built on tokens.css
 */

@import "./fonts.css";
@import "./tokens.css";

/* ---------- Modern reset (focused subset of Josh Comeau's) -------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body {
  line-height: var(--em-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--em-font-sans);
  font-size: var(--em-text-base);
  color: var(--em-charcoal);
  background: var(--em-linen);
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------- Type primitives -------------------------------------------- */
.em-display {
  font-family: var(--em-font-display);
  font-size: var(--em-text-display);
  font-weight: var(--em-weight-regular);
  line-height: var(--em-lh-tight);
  letter-spacing: var(--em-tracking-display);
}

.em-h1 { font-size: var(--em-text-h1); font-weight: var(--em-weight-semibold); line-height: var(--em-lh-heading); }
.em-h2 { font-size: var(--em-text-h2); font-weight: var(--em-weight-semibold); line-height: var(--em-lh-heading); }
.em-h3 { font-size: var(--em-text-h3); font-weight: var(--em-weight-semibold); line-height: var(--em-lh-heading); }
.em-h4 { font-size: var(--em-text-h4); font-weight: var(--em-weight-medium);   line-height: var(--em-lh-snug); }

.em-body-lg { font-size: var(--em-text-lg);   line-height: var(--em-lh-body); }
.em-body    { font-size: var(--em-text-base); line-height: var(--em-lh-body); }
.em-body-sm { font-size: var(--em-text-sm);   line-height: var(--em-lh-snug); }

.em-eyebrow {
  font-size: var(--em-text-xs);
  font-weight: var(--em-weight-semibold);
  letter-spacing: var(--em-tracking-caps);
  text-transform: uppercase;
  color: var(--em-charcoal-60);
}

.em-script {
  font-family: var(--em-font-display);
  font-weight: var(--em-weight-regular);
  line-height: var(--em-lh-tight);
}

/* ---------- Section helpers ------------------------------------------- */
.em-section {
  padding-block: clamp(3rem, 8vw, 6rem);
}
.em-section--evergreen { background: var(--em-evergreen); color: var(--em-linen); }
.em-section--linen     { background: var(--em-linen);     color: var(--em-charcoal); }
.em-section--cream     { background: var(--em-cream-100); color: var(--em-charcoal); }
.em-section--charcoal  { background: var(--em-charcoal);  color: var(--em-linen); }

.em-container {
  max-width: var(--em-container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.em-container--narrow { max-width: var(--em-container-narrow); }
.em-container--wide   { max-width: var(--em-container-wide); }

/* ---------- Buttons ---------------------------------------------------- */
.em-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--em-space-2);
  padding: 12px 24px;
  border-radius: var(--em-radius-pill);
  font-weight: var(--em-weight-semibold);
  font-size: var(--em-text-base);
  letter-spacing: 0.01em;
  line-height: 1.2;
  transition: background var(--em-duration-base) var(--em-ease-out),
              color var(--em-duration-base) var(--em-ease-out),
              transform var(--em-duration-base) var(--em-ease-out),
              box-shadow var(--em-duration-base) var(--em-ease-out),
              border-color var(--em-duration-base) var(--em-ease-out);
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  position: relative;
}
.em-btn:focus-visible { outline: none; box-shadow: var(--em-focus-ring); }
.em-btn:active { transform: translateY(1px); }

.em-btn--primary {
  background: var(--em-evergreen);
  color: var(--em-linen);
  box-shadow: 0 2px 8px rgba(31,58,50,0.18), inset 0 1px 0 rgba(243,233,220,0.08);
}
.em-btn--primary:hover {
  background: #2a4d42;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31,58,50,0.28), inset 0 1px 0 rgba(243,233,220,0.12);
}

.em-btn--on-dark {
  background: var(--em-linen);
  color: var(--em-evergreen);
  box-shadow: 0 2px 8px rgba(20,28,24,0.22);
}
.em-btn--on-dark:hover {
  background: var(--em-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20,28,24,0.32);
}

.em-btn--secondary {
  background: transparent;
  color: var(--em-evergreen);
  border-color: var(--em-evergreen);
}
.em-btn--secondary:hover {
  background: var(--em-evergreen);
  color: var(--em-linen);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31,58,50,0.22);
}

/* Ghost - low-emphasis text action. Now a soft pill with subtle outline
   on hover so it reads as a button, not stray text. */
.em-btn--ghost {
  background: transparent;
  color: var(--em-evergreen);
  border-color: transparent;
}
.em-btn--ghost:hover {
  background: rgba(31,58,50,0.06);
  border-color: rgba(31,58,50,0.18);
  text-decoration: none;
}

/* Critical / destructive — uses brand burgundy */
.em-btn--burgundy,
.em-btn--danger {
  background: var(--em-burgundy);
  color: var(--em-linen);
  box-shadow: 0 2px 8px rgba(65,15,31,0.22);
}
.em-btn--burgundy:hover,
.em-btn--danger:hover {
  background: #5a162a;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(65,15,31,0.34);
}

/* Personal / warm accent — uses brand blush */
.em-btn--blush {
  background: var(--em-blush);
  color: var(--em-linen);
  box-shadow: 0 2px 8px rgba(185,122,126,0.22);
}
.em-btn--blush:hover {
  background: #a36568;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(185,122,126,0.34);
}

/* ---------- Cards ------------------------------------------------------ */
.em-card {
  background: var(--em-white);
  border-radius: var(--em-radius-lg);
  box-shadow: var(--em-shadow-lg);
  padding: var(--em-space-6);
}
.em-card--cream { background: var(--em-cream-100); }
.em-card--blush { background: rgba(185,122,126,0.12); border-left: 4px solid var(--em-blush); }
.em-card--blush-solid { background: var(--em-blush); color: var(--em-linen); }
.em-card--burgundy { background: rgba(65,15,31,0.06); border-left: 4px solid var(--em-burgundy); }
.em-card--burgundy-solid { background: var(--em-burgundy); color: var(--em-linen); }
.em-card--brass { background: rgba(198,167,106,0.18); border-left: 4px solid var(--em-brass); }

/* Section background variants for marketing pages */
.em-section--burgundy { background: var(--em-burgundy); color: var(--em-linen); }
.em-section--blush    { background: rgba(185,122,126,0.18); }

/* ---------- Marketing nav - Phoenix-style overlay ---------------------- */
/* Top-of-page readability gradient (visible only while nav is transparent) */
.em-nav-gradient {
  position: fixed; top: 0; left: 0; right: 0;
  height: 320px; z-index: 49; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,28,24,0.55) 0%, rgba(20,28,24,0.32) 45%, rgba(20,28,24,0.12) 80%, rgba(20,28,24,0) 100%);
  transition: opacity 300ms var(--em-ease);
}
.em-nav-gradient.is-hidden { opacity: 0; }

.em-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background-color 300ms var(--em-ease), backdrop-filter 300ms var(--em-ease), box-shadow 300ms var(--em-ease);
  background: transparent;
}
.em-nav.is-scrolled,
.em-nav.is-open {
  background: rgba(31, 58, 50, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 1px 0 rgba(243,232,220,0.06), 0 4px 24px rgba(0,0,0,0.18);
}
.em-nav__bar {
  position: relative;
  max-width: var(--em-container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  display: flex; align-items: center; justify-content: center;
  height: 200px;
  transition: height 300ms var(--em-ease);
}
.em-nav.is-scrolled .em-nav__bar { height: 84px; }
@media (max-width: 1023px) {
  .em-nav__bar { height: 140px; }
  .em-nav.is-scrolled .em-nav__bar { height: 72px; }
}

/* Hamburger - left side */
.em-nav__hamburger {
  position: absolute; left: clamp(1rem, 3vw, 2rem); top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; cursor: pointer;
  width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 0;
}
.em-nav__hamburger span {
  display: block; width: 26px; height: 2px;
  background: var(--em-linen);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 300ms var(--em-ease), opacity 200ms var(--em-ease), background 300ms var(--em-ease);
}
.em-nav.is-open .em-nav__hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.em-nav.is-open .em-nav__hamburger span:nth-child(2) { opacity: 0; }
.em-nav.is-open .em-nav__hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 1023px) {
  .em-nav__hamburger span { width: 22px; }
}

/* Logo - centred, scales between expanded and scrolled */
.em-nav__logo {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  line-height: 0;
  overflow: hidden;
  height: 140px;
  transition: height 300ms var(--em-ease), opacity 300ms var(--em-ease), visibility 300ms var(--em-ease);
}
/* Home page: the hero owns the logo until the visitor scrolls past it.
   Prevents the squiggle showing twice (nav + hero) at the top of the page. */
.em-nav--dock-logo:not(.is-scrolled) .em-nav__logo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.em-nav.is-scrolled .em-nav__logo { height: 56px; }
.em-nav__logo img { height: 100%; width: auto; object-fit: contain; }
@media (max-width: 1023px) {
  /* Left-align the logo beside the hamburger so it never overlaps the
     right-hand Member Portal CTA on phones. Width-driven sizing so the
     squiggle scales down instead of being clipped by overflow:hidden. */
  .em-nav__logo {
    position: absolute; left: 56px; top: 50%; transform: translateY(-50%);
    height: 64px; width: calc(100% - 240px); max-width: 200px;
    justify-content: flex-start;
  }
  .em-nav.is-scrolled .em-nav__logo { height: 44px; }
  .em-nav__logo img { height: auto; width: 100%; max-height: 100%; object-fit: contain; object-position: left center; }
}

/* Right-side CTA pill */
.em-nav__cta {
  position: absolute; right: clamp(1rem, 3vw, 2rem); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: var(--em-brass);
  color: var(--em-evergreen);
  border: 0;
  border-radius: var(--em-radius-pill);
  font-weight: var(--em-weight-semibold);
  font-size: var(--em-text-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms var(--em-ease), transform 200ms var(--em-ease);
}
.em-nav__cta:hover { background: #d6b87e; transform: translateY(-50%) scale(1.02); }
@media (max-width: 1023px) {
  .em-nav__cta { padding: 8px 16px; font-size: 0.78rem; }
}

/* Full-screen overlay menu */
.em-nav__overlay {
  position: fixed; inset: 0;
  background: var(--em-evergreen);
  z-index: 60;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--em-ease);
  overflow-y: auto; overflow-x: hidden;
}
.em-nav__overlay.is-open { opacity: 1; pointer-events: auto; }
body.em-nav-locked { overflow: hidden; }

.em-nav__overlay__close {
  position: absolute; top: 16px; right: 20px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--em-linen); padding: 8px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.em-nav__overlay__close svg { width: 24px; height: 24px; }

.em-nav__overlay__inner {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 36rem;
  margin-inline: auto;
  padding: 1.25rem 1.25rem 4rem;
}
@media (max-width: 1023px) {
  .em-nav__overlay__inner { padding-top: 0.75rem; padding-bottom: 1.5rem; }
}

.em-nav__overlay__logo {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; line-height: 0;
  margin-bottom: 4rem;
  flex-shrink: 0;
}
.em-nav__overlay__logo img { height: 140px; width: auto; }
@media (max-width: 1023px) {
  .em-nav__overlay__logo { margin-bottom: 1.5rem; }
  .em-nav__overlay__logo img { height: 100px; }
}

.em-nav__links {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 4rem; row-gap: 1.25rem;
  width: 100%;
}
.em-nav__links--left { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; text-align: left; }
.em-nav__links--right { display: flex; flex-direction: column; align-items: flex-end; gap: 1.15rem; text-align: right; }
@media (max-width: 1023px) {
  .em-nav__links { display: flex; flex-direction: column; gap: 0.85rem; align-items: center; }
  .em-nav__links--left, .em-nav__links--right { display: contents; }
  .em-nav__overlay a.em-nav__link { text-align: center !important; }
}

.em-nav__link {
  font-family: var(--em-font-sans);
  font-size: 1.5rem;
  font-weight: var(--em-weight-medium);
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: rgba(243,232,220,0.92);
  text-decoration: none;
  transition: color 180ms var(--em-ease), transform 180ms var(--em-ease);
  white-space: nowrap;
}
.em-nav__link:hover { color: var(--em-brass); }
.em-nav__link.is-active { color: var(--em-linen); }

/* Secondary overlay links — demoted pages kept reachable, visually quieter */
.em-nav__sublinks {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 1.75rem;
  width: 100%;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(243,233,220,0.14);
}
.em-nav__sublink {
  font-family: var(--em-font-sans);
  font-size: 0.95rem;
  font-weight: var(--em-weight-regular);
  letter-spacing: 0.01em;
  color: rgba(243,232,220,0.66);
  text-decoration: none;
  transition: color 180ms var(--em-ease);
  white-space: nowrap;
}
.em-nav__sublink:hover { color: var(--em-brass); }
.em-nav__sublink.is-active { color: var(--em-linen); }
@media (max-width: 1023px) {
  .em-nav__sublinks { margin-top: 1.5rem; padding-top: 1.25rem; gap: 0.4rem 1.25rem; }
  .em-nav__sublink { font-size: 0.875rem; }
}

.em-nav__foot {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  width: 100%;
  margin-top: 2.5rem; flex-shrink: 0;
}
@media (max-width: 1023px) {
  .em-nav__foot { margin-top: auto; padding-top: 2rem; column-gap: 1rem; }
}
@media (max-width: 400px) {
  .em-nav__foot { grid-template-columns: 1fr; row-gap: 0.75rem; }
}
.em-nav__foot .em-btn {
  width: 100%; justify-content: center;
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
}

/* ---------- Numerals & data text never use the script display font ---- */
/* Site-wide rule: any class that primarily renders numbers, dates, prices,
   KPIs, counters, or tabular data must use Montserrat with tabular figures
   for legibility. The Silen script font is reserved for headlines, taglines
   and decorative quote text only. */
.em-kpi__num,
.em-countdown__num,
.em-msidenav__streak-num,
.em-segment__num,
.em-pillar__num,
.em-surface__num,
.em-jentry__date,
.em-jentry__date small,
.em-rcard__meta strong,
.em-prog__price,
.em-product__price,
.em-shop-mini__price,
.em-rating,
.em-script,
.em-stat,
.em-stat__num,
.em-num,
[data-em-numeric] {
  font-family: var(--em-font-sans) !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  letter-spacing: -0.005em !important;
}

/* Where the original style relied on the display font's weight, give the
   sans replacement a confident weight instead so the visual hierarchy holds. */
.em-kpi__num,
.em-segment__num,
.em-pillar__num,
.em-surface__num,
.em-msidenav__streak-num,
.em-countdown__num,
.em-stat__num {
  font-weight: var(--em-weight-bold) !important;
}

.em-jentry__date,
.em-rcard__meta strong,
.em-prog__price,
.em-product__price,
.em-shop-mini__price {
  font-weight: var(--em-weight-semibold) !important;
}

/* ---------- Hero background video (marketing pages) -------------------- */
/* Reusable pattern: drop a <video class="em-hero-video"> + <div class="em-hero-veil">
   into any .em-hero / .em-page-hero / em-r-hero section. Hero must have
   position:relative; overflow:hidden — both already enforced below. */
.em-hero,
.em-page-hero,
.em-r-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.em-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Show middle of video, side-to-side fit, no container resize */
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  background: var(--em-evergreen);
}

.em-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Evergreen veil — strong enough to keep hero text legible, soft enough
     to let the footage breathe through */
  /* Top half soft (lets footage breathe), bottom ramps to fully-opaque
     evergreen so any AI watermark in the corner is fully masked */
  background: linear-gradient(180deg,
    rgba(31,58,50,0.55) 0%,
    rgba(31,58,50,0.72) 50%,
    rgba(31,58,50,0.92) 88%,
    rgba(31,58,50,1)    100%);
}

/* Screen-reader-only — keeps headings accessible when imagery carries the hero */
.em-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Ensure hero content sits above video + veil */
.em-hero > *:not(.em-hero-video):not(.em-hero-veil),
.em-page-hero > *:not(.em-hero-video):not(.em-hero-veil),
.em-r-hero > *:not(.em-hero-video):not(.em-hero-veil) {
  position: relative;
  z-index: 2;
}

/* ---------- Hero clearance for fixed marketing nav --------------------- */
/* The marketing nav is position:fixed with a tall centred logo. Top-of-page
   hero sections must clear the logo's bottom edge so their content never
   tucks behind it. Applies to homepage hero, inner-page hero, and any
   first-child evergreen banner. */
.em-hero,
.em-page-hero,
body > .em-section:first-of-type.em-section--evergreen,
[data-slot="header"] + .em-section--evergreen {
  padding-top: max(220px, var(--em-space-12)) !important;
}
@media (max-width: 1023px) {
  .em-hero,
  .em-page-hero,
  body > .em-section:first-of-type.em-section--evergreen,
  [data-slot="header"] + .em-section--evergreen {
    padding-top: max(160px, var(--em-space-10)) !important;
  }
}

/* ---------- Header (legacy alias retained for backward compatibility) - */
.em-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--em-evergreen);
  color: var(--em-linen);
  border-bottom: 1px solid rgba(243,233,220,0.08);
  backdrop-filter: saturate(140%) blur(6px);
}
.em-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--em-space-6);
  padding-block: var(--em-space-4);
}
.em-header__logo { display: inline-flex; align-items: center; gap: var(--em-space-3); }
.em-header__nav {
  display: none;
  gap: var(--em-space-8);
  font-size: var(--em-text-sm);
  letter-spacing: var(--em-tracking-wide);
}
@media (min-width: 900px) { .em-header__nav { display: flex; } }
.em-header__nav a {
  text-decoration: none;
  color: var(--em-linen);
  opacity: 0.85;
  padding-block: var(--em-space-2);
  border-bottom: 1px solid transparent;
}
.em-header__nav a:hover { opacity: 1; border-bottom-color: var(--em-brass); }
.em-header__nav a.is-active { opacity: 1; border-bottom-color: var(--em-linen); }

/* ---------- Footer ----------------------------------------------------- */
.em-footer {
  background: var(--em-evergreen);
  color: var(--em-linen);
  padding-block: var(--em-space-16) var(--em-space-8);
}
.em-footer__grid {
  display: grid;
  gap: var(--em-space-10);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .em-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.em-footer h4 {
  font-size: var(--em-text-sm);
  letter-spacing: var(--em-tracking-caps);
  text-transform: uppercase;
  font-weight: var(--em-weight-semibold);
  margin-bottom: var(--em-space-4);
  color: var(--em-brass);
}
.em-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--em-space-2); }
.em-footer a { color: var(--em-linen); opacity: 0.85; text-decoration: none; }
.em-footer a:hover { opacity: 1; }
.em-footer__legal {
  margin-top: var(--em-space-12);
  padding-top: var(--em-space-6);
  border-top: 1px solid rgba(243,233,220,0.12);
  font-size: var(--em-text-xs);
  opacity: 0.7;
  display: flex;
  flex-wrap: wrap;
  gap: var(--em-space-4);
  justify-content: space-between;
}

/* ---------- The swirl mark as a decorative graphic -------------------- */
.em-swirl {
  display: inline-block;
  width: 120px;
  height: auto;
  color: var(--em-evergreen);
}
.em-swirl--cream { color: var(--em-linen); }
.em-swirl--brass { color: var(--em-brass); }