/* =========================================================================
 * Wayvarn Editorial Layer (v4)
 * -------------------------------------------------------------------------
 * Premium digital-studio redesign layer. Loaded LAST so it refines the
 * existing theme without replacing markup, templates or WordPress content.
 * Typography: Cormorant Garamond (display) + Inter (UI/body).
 * Brand: Wayvarn blue #0A66C2.
 * ====================================================================== */

:root {
  --wv-blue: #0a66c2;
  --wv-blue-soft: rgba(10, 102, 194, 0.14);
  --wv-display: "Cormorant Garamond", "Times New Roman", serif;
  --wv-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Light (refined paper) — kept so the existing theme toggle still works. */
  --background: oklch(98.6% 0.003 250);
  --foreground: oklch(21% 0.02 260);
  --card: oklch(100% 0 0);
  --surface: oklch(96.6% 0.004 250);
  --muted: oklch(95.5% 0.005 250);
  --muted-foreground: oklch(50% 0.02 258);
  --primary: #0a66c2;
  --primary-foreground: #ffffff;
  --accent: #0a66c2;
  --border: oklch(90% 0.008 255);
  --radius: 0.5rem;
  --font-display: var(--wv-display);
  --wv-font-display: var(--wv-display);
  --wv-font-body: var(--wv-body);
}

/* Deep dark editorial — the default Wayvarn experience. */
html.dark {
  --background: #07090d;
  --foreground: #edeef1;
  --card: #0c0f15;
  --surface: #0a0d12;
  --muted: #12161d;
  --muted-foreground: rgba(237, 238, 241, 0.6);
  --primary: #0a66c2;
  --primary-foreground: #ffffff;
  --accent: #4d9bea;
  --border: rgba(255, 255, 255, 0.09);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-elevated: 0 30px 80px -50px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 20px 60px -30px rgba(10, 102, 194, 0.55);
}

/* -------------------------------------------------------------------------
 * 1. Typography system
 * ---------------------------------------------------------------------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body,
input,
textarea,
select,
button {
  font-family: var(--wv-body);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.75;
}

body { font-size: 15px; }

h1, h2, h3,
.wv-hero__title,
.wv-positioning__title,
.wv-pre__brand,
.display,
.text-gradient {
  font-family: var(--wv-display);
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.05;
  text-wrap: balance;
}

h1, .wv-hero__title, .wv-pre__brand {
  font-size: clamp(38px, 5.2vw, 52px);
  line-height: 0.98;
  letter-spacing: -1.2px;
}

h2, .wv-positioning__title {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.8px;
}

h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.4px; line-height: 1.15; }

h1 em, h2 em, .wv-hero__line--accent,
.wv-hero__title em, .wv-italic {
  font-family: var(--wv-display);
  font-style: italic;
  font-weight: 600;
  color: var(--primary);
}
html.dark .wv-hero__line--accent { color: var(--accent); }

p, li { font-size: 15px; line-height: 1.75; }

.wv-hero__lede,
.lead { font-size: 16px; line-height: 1.75; max-width: 46ch; }

/* Navigation + small UI */
.wv-header nav ul li > a,
.wv-header nav a {
  font-family: var(--wv-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.5px;
}

button, .btn, a[class*="inline-flex"][class*="rounded-full"], input[type="submit"] {
  font-family: var(--wv-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.eyebrow,
.wv-hero__eyebrow,
.wv-positioning__eyebrow,
[class*="uppercase"][class*="tracking-wide"] {
  font-family: var(--wv-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--muted-foreground);
}

/* Statistics */
.wv-positioning__stat p,
.wv-positioning__stat p span,
[data-wv-counter] {
  font-family: var(--wv-display);
  font-weight: 600;
  font-size: clamp(36px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--foreground);
}
.wv-positioning__stat > span {
  font-family: var(--wv-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* -------------------------------------------------------------------------
 * 2. Surfaces, borders, spacing — minimal, thin-line, editorial
 * ---------------------------------------------------------------------- */
.surface-card,
.wv-card,
.wv-positioning__statement {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: none;
  transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.35s ease;
}
.surface-card:hover,
.wv-card:hover,
.lift:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--primary) 55%, transparent);
  box-shadow: none;
}

.rounded-xl, .rounded-2xl, .rounded-3xl { border-radius: 6px; }
.shadow-\[var\(--shadow-glow\)\] { box-shadow: none; }

a[class*="rounded-full"], button[class*="rounded-full"], .rounded-full { border-radius: 999px; }

/* Primary CTA — confident, flat, brand blue */
.gradient-brand,
.bg-primary {
  background: var(--primary) !important;
  background-image: none !important;
  color: #fff !important;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.gradient-brand:hover, .bg-primary:hover { background: #0b5aa8 !important; transform: translateY(-2px); }

.wv-btn-ghost-light,
a[class*="border"][class*="rounded-full"] {
  border: 1px solid color-mix(in oklab, var(--foreground) 22%, transparent);
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.wv-btn-ghost-light:hover { border-color: var(--primary); transform: translateY(-2px); }

/* Section rhythm — generous whitespace */
main section { position: relative; }
main > section + section::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--border);
  opacity: 0.7;
}

/* Underline reveal for text links */
main a:not([class*="rounded-full"]):not(.surface-card):not(.wv-card) {
  text-underline-offset: 4px;
}

/* Hero refinements */
.wv-hero__scrim { background: linear-gradient(180deg, rgba(4, 6, 10, 0.55), rgba(4, 6, 10, 0.92)); }
.wv-hero__eyebrow { color: var(--accent); }

/* Marquee: quieter, editorial */
.wv-marquee__item {
  font-family: var(--wv-body);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 3. Custom cursor
 * ---------------------------------------------------------------------- */
.wv-cursor,
.wv-cursor__dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  pointer-events: none;
  border-radius: 999px;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.wv-cursor {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid var(--wv-blue);
  display: grid;
  place-items: center;
  transition: opacity 0.25s ease, width 0.2s ease, height 0.2s ease,
    background-color 0.2s ease, border-color 0.2s ease;
}
.wv-cursor__dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--wv-blue);
}
.wv-cursor.is-active, .wv-cursor__dot.is-active { opacity: 1; }

.wv-cursor__label {
  font-family: var(--wv-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

/* States (scaling is applied on the inner ring so the label stays legible) */
.wv-cursor[data-state="link"] { transform-origin: center; }
.wv-cursor[data-state="link"] { width: 47px; height: 47px; margin: -23.5px 0 0 -23.5px; }
.wv-cursor[data-state="button"] {
  width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px;
  background: var(--wv-blue);
  border-color: var(--wv-blue);
}
.wv-cursor[data-state="button"] .wv-cursor__label { opacity: 1; transform: scale(1); }
.wv-cursor[data-state="card"] {
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  background: color-mix(in oklab, var(--wv-blue) 92%, transparent);
  border-color: var(--wv-blue);
}
.wv-cursor[data-state="card"] .wv-cursor__label { opacity: 1; transform: scale(1); }
.wv-cursor[data-state="external"] {
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
}
.wv-cursor[data-state="external"] .wv-cursor__label {
  opacity: 1; transform: scale(1); font-size: 15px; color: var(--wv-blue); letter-spacing: 0;
}
.wv-cursor[data-state="button"] ~ .wv-cursor__dot,
.wv-cursor[data-state="card"] ~ .wv-cursor__dot { opacity: 0; }

html.wv-has-cursor,
html.wv-has-cursor a,
html.wv-has-cursor button,
html.wv-has-cursor [role="button"] { cursor: none; }
/* Never hide the caret or interfere with form input / accessibility. */
html.wv-has-cursor input,
html.wv-has-cursor textarea,
html.wv-has-cursor select,
html.wv-has-cursor [contenteditable="true"] { cursor: auto; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (hover: none), (pointer: coarse) {
  .wv-cursor, .wv-cursor__dot { display: none !important; }
  html.wv-has-cursor, html.wv-has-cursor * { cursor: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wv-cursor, .wv-cursor__dot { display: none !important; }
  html.wv-has-cursor, html.wv-has-cursor * { cursor: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* -------------------------------------------------------------------------
 * 4. Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  h1, .wv-hero__title { font-size: clamp(36px, 6vw, 46px); }
  h2, .wv-positioning__title { font-size: clamp(30px, 5vw, 40px); }
}
@media (max-width: 767px) {
  h1, .wv-hero__title { font-size: 40px; line-height: 1; letter-spacing: -1px; }
  h2, .wv-positioning__title { font-size: 30px; letter-spacing: -0.6px; }
  body, p, li { font-size: 15px; }
}

/* -------------------------------------------------------------------------
 * 5. Dark-mode fixes — "Who we are" / positioning section
 *    premium.css hard-codes light values (#fff, navy, slate greys) which
 *    disappear on the dark editorial background. Restore contrast and use
 *    Wayvarn blue for the emphasis words.
 * ---------------------------------------------------------------------- */
html.dark body .wv-positioning {
  background: var(--background) !important;
  color: var(--foreground) !important;
}
html.dark body .wv-positioning::before {
  background: var(--background) !important;
}
html.dark body .wv-positioning__title,
html.dark body .wv-positioning__title span { color: var(--accent) !important; }
html.dark body .wv-positioning__title strong { color: var(--accent) !important; }
html.dark .wv-positioning__eyebrow {
  color: var(--accent) !important;
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
}
html.dark body .wv-positioning__body p { color: var(--foreground) !important; }
html.dark .wv-positioning__rule { background: var(--accent); }

html.dark .wv-positioning__visual {
  background: var(--card);
  border-color: var(--border);
  box-shadow: none;
}
html.dark .wv-positioning__statement {
  background: var(--card);
  border-top-color: var(--border);
}
html.dark .wv-positioning__statement::before { background: var(--accent); }
html.dark body .wv-positioning__statement-title { color: var(--accent) !important; }
html.dark body .wv-positioning__statement-copy { color: var(--foreground) !important; }

html.dark .wv-positioning__stats {
  background: transparent;
  border-top-color: var(--border);
  border-bottom-color: var(--border);
}
html.dark .wv-positioning__stat + .wv-positioning__stat,
html.dark .wv-positioning__stat[class] { border-color: var(--border); }
html.dark body .wv-positioning__stat p,
html.dark body .wv-positioning__stat p span,
html.dark body .wv-positioning__stat [data-wv-counter] { color: var(--accent) !important; }
html.dark body .wv-positioning__stat > span { color: var(--foreground) !important; }

/* Light mode: keep the same blue emphasis so both themes read consistently. */
.wv-positioning__statement-title { color: var(--wv-blue); }
.wv-positioning__stat p,
.wv-positioning__stat p span { color: var(--wv-blue); }

/* =====================================================
   Sticky header (v4.1.0)
   Hardened so no ancestor overflow/transform breaks it.
   ===================================================== */
html, body { overflow-x: clip; }
html:has(.wv-header) { scroll-padding-top: 84px; }

.wv-header,
header.wv-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100%;
  isolation: isolate;
  background: color-mix(in oklab, var(--background) 78%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, height .3s ease;
}

html.dark .wv-header,
html.dark header.wv-header {
  background: color-mix(in oklab, var(--background) 72%, transparent);
}

.wv-header.is-stuck,
header.wv-header.is-stuck {
  background: color-mix(in oklab, var(--background) 92%, transparent);
  border-bottom-color: color-mix(in oklab, var(--wv-blue) 22%, transparent);
  box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .8);
}

.wv-header.is-stuck .container-page { height: 66px; }
.wv-header .container-page { transition: height .3s ease; }

/* Header must never be clipped by animation wrappers. */
.wv-header * { will-change: auto; }