/*
Theme Name: WAY — We Are Younger
Theme URI: https://weareyounger.com
Author: WAY Agency (recreated for WordPress)
Description: Tema WordPress recreata dupa design-ul WAY - We Are Younger. Generata dintr-un export Design Canvas.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: way-agency
*/

/* =========================================================
   WAY — We Are Younger
   Foundations: colors + type
   ========================================================= */

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Extrawind";
  src: url("assets/fonts/Extrawind.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Blackheat";
  src: url("assets/fonts/Blackheat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Blackheat";
  src: url("assets/fonts/Blackheat-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Blackheat Line";
  src: url("assets/fonts/BlackheatLine-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Blackheat Line";
  src: url("assets/fonts/BlackheatLine-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Chalmone";
  src: url("assets/fonts/Chalmone.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "Delion";
  src: url("assets/fonts/Delion.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "Hotham";
  src: url("assets/fonts/Hotham.otf") format("opentype");
  font-weight: 400;
}

:root {
  /* ---- PRIMARY PALETTE (per WAY brand sheet) ---- */
  --way-yellow:        #FCED1E;   /* Younger Yellow — the brand */
  --way-black:         #000000;   /* Deep Black */
  --way-white:         #FFFFFF;   /* Clarity White */

  /* ---- NEUTRAL EXTENSION (used sparingly for UI surfaces) ---- */
  --way-ink-900:       #0A0A0A;
  --way-ink-800:       #141414;
  --way-ink-700:       #1F1F1F;
  --way-ink-600:       #2A2A2A;
  --way-ink-500:       #4A4A4A;
  --way-ink-400:       #7A7A7A;
  --way-ink-300:       #B5B5B5;
  --way-ink-200:       #E2E2E2;
  --way-ink-100:       #F4F4F4;
  --way-ink-050:       #FAFAFA;

  /* ---- YELLOW FAMILY — 4 distinct hues ---- */
  --way-yellow-digital: #F2FF00;   /* digital / neon — modern screen yellow */
  --way-yellow:         #FCED1E;   /* Younger Yellow — the canonical brand */
  --way-yellow-warm:    #FFC927;   /* warm — golden, print-friendly, editorial */
  --way-yellow-amber:   #E89B0E;   /* amber — deep warm accent / shadow */

  /* legacy aliases (kept so old tokens don't break) */
  --way-yellow-soft:    #FFF8B8;
  --way-yellow-deep:    #E6D000;
  --way-yellow-burn:    #B8A300;

  /* ---- PURPLE / MOV — 4 hues ---- */
  --way-mov-soft:    #E9D7FF;   /* tinted lavender highlight */
  --way-mov:         #8B3DFF;   /* signature purple */
  --way-mov-deep:    #5B17B8;   /* deep press / contrast */
  --way-mov-ink:     #2A0A5C;   /* near-black violet for surfaces */

  /* ---- GREEN / VERDE — 4 hues ---- */
  --way-verde-soft:  #C6FFB6;   /* mint highlight */
  --way-verde:       #2BD96B;   /* signature green */
  --way-verde-deep:  #0F8A3D;   /* deep press / forest */
  --way-verde-ink:   #062B16;   /* near-black green for surfaces */

  /* ---- 2026 GRAPHIC STYLE — core surfaces & accents ---- */
  --way-night:          #121419;   /* default slide/panel surface (near-black, blue-cast) */
  --way-night-2:        #1A1D24;   /* raised card on night */
  --way-night-3:        #23262E;   /* borders / hover on night */
  --way-gold-hi:        #FFD400;   /* golden gradient — light stop */
  --way-gold-lo:        #F0A500;   /* golden gradient — deep stop */
  --way-grad-gold:      linear-gradient(120deg, #FFD400 0%, #F5BC00 55%, #F0A500 100%); /* @kind color */
  --way-accent-on-dark: #F5D80C;   /* yellow used for accent words / lines on night */

  /* ---- SECONDARY GRADIENTS (per brand sheet) ---- */
  --way-grad-neon-forest: linear-gradient(135deg, #0F3D2E 0%, #2BB673 50%, #B6FF6B 100%); /* @kind color */
  --way-grad-cyber-grape: linear-gradient(135deg, #1A0033 0%, #6B1FB3 50%, #C57BFF 100%); /* @kind color */
  --way-grad-heat-signal: linear-gradient(135deg, #2B0500 0%, #E8431C 50%, #FCED1E 100%); /* @kind color */

  /* ---- SEMANTIC COLOR TOKENS ---- */
  --bg:                var(--way-yellow);
  --bg-alt:            var(--way-black);
  --bg-paper:          var(--way-white);
  --surface:           var(--way-ink-900);
  --surface-2:         var(--way-ink-800);
  --surface-3:         var(--way-ink-700);

  --fg:                var(--way-black);
  --fg-on-yellow:      var(--way-black);
  --fg-on-dark:        var(--way-white);
  --fg-muted:          var(--way-ink-500);
  --fg-subtle:         var(--way-ink-400);

  --accent:            var(--way-yellow);
  --accent-press:      var(--way-yellow-deep);

  --border:            var(--way-ink-200);
  --border-strong:     var(--way-black);
  --border-on-dark:    rgba(255,255,255,0.12);

  --focus-ring:        2px solid var(--way-yellow);
  --focus-ring-dark:   2px solid var(--way-black);

  /* ---- TYPOGRAPHY FAMILIES ---- */
  /* Primary  — workhorse, headlines, body, UI. Geometric sans. */
  --font-primary:      "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Secondary — creative accent + outlined display (the WAY logo voice).
     Extrawind is a tall narrow stencil-style display, used on logo + posters. */
  --font-secondary:    "Extrawind", "Montserrat", sans-serif;

  /* Display — special applications: posters, motion, packaging, campaigns.
     Blackheat is a hand-drawn brushy script — energetic, raw. */
  --font-display:      "Blackheat", "Brush Script MT", cursive;
  --font-display-line: "Blackheat Line", "Blackheat", cursive;

  /* Display alternates loaded for campaign work */
  --font-alt-chalmone: "Chalmone", serif;
  --font-alt-delion:   "Delion", serif;
  --font-alt-hotham:   "Hotham", serif;

  --font-mono:         ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* eyebrows · chips · metadata · CTAs */

  /* ---- TYPE SCALE (for 1920 layouts; scales fluidly for web) ---- */
  --fs-display-1: clamp(64px, 9vw, 168px); /* @kind font */
  --fs-display-2: clamp(48px, 6vw, 112px); /* @kind font */
  --fs-h1:        clamp(40px, 4.2vw, 72px); /* @kind font */
  --fs-h2:        clamp(28px, 2.6vw, 48px); /* @kind font */
  --fs-h3:        clamp(22px, 1.8vw, 32px); /* @kind font */
  --fs-h4:        18px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-eyebrow:   12px;

  --lh-tight: 0.92; /* @kind other */
  --lh-snug:  1.05; /* @kind other */
  --lh-base:  1.45; /* @kind other */
  --lh-loose: 1.65; /* @kind other */

  --tracking-tight:  -0.02em; /* @kind other */
  --tracking-normal: 0; /* @kind other */
  --tracking-wide:   0.08em; /* @kind other */
  --tracking-eyebrow: 0.18em; /* @kind other */

  /* ---- SPACING / RADII / SHADOW ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.18);
  --shadow-md:  0 6px 16px rgba(0,0,0,0.22);
  --shadow-lg:  0 24px 48px rgba(0,0,0,0.32);
  --shadow-yellow-glow: 0 0 0 6px rgba(252,237,30,0.35);
  --shadow-glow-gold:   0 0 48px rgba(240,165,0,0.45);  /* neon glow — gold */
  --shadow-glow-mov:    0 0 48px rgba(139,61,255,0.45); /* neon glow — purple */
  --shadow-press: inset 0 4px 0 rgba(0,0,0,0.18);

  --grain-overlay: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px) 0 0 / 3px 3px, radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px) 1.5px 1.5px / 3px 3px; /* @kind other */
}

/* =========================================================
   SEMANTIC TYPE STYLES
   ========================================================= */

.way-display-1, h1.way {
  font-family: var(--font-secondary);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  font-weight: 400;
}

.way-display-2 {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.way-h1 {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.way-h2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}

.way-h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.way-eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.way-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--way-night-3);
  background: var(--way-night-2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.way-chip.accent { border-color: var(--way-accent-on-dark); color: var(--way-accent-on-dark); background: transparent; }

.way-body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}

.way-body-lg {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
}

.way-caption {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.way-script {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}

.way-stencil {
  font-family: var(--font-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* =========================================================
   UTILITY SURFACES
   ========================================================= */

.bg-yellow   { background: var(--way-yellow); color: var(--fg-on-yellow); }
.bg-black    { background: var(--way-black);  color: var(--fg-on-dark); }
.bg-white    { background: var(--way-white);  color: var(--fg); }
.bg-night    { background: var(--way-night);  color: #fff; }
.bg-gold     { background: var(--way-grad-gold); color: var(--way-black); }

.bg-grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain-overlay);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}



html, body { margin: 0; padding: 0; background: #FFFFFF;  max-width: 100%; overflow-x: clip; }
body { font-family: "Montserrat", sans-serif; color: #000000; }
a { color: #000000; text-decoration: none; }
a:hover { text-decoration: underline; }
@keyframes way-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes way-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes way-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,216,12,0.55); } 100% { box-shadow: 0 0 0 16px rgba(245,216,12,0); } }
@keyframes way-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes way-reveal { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes way-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes way-drift { from { transform: translateX(0); } to { transform: translateX(-64px); } }
@keyframes way-swap { 0% { opacity: 0; transform: translateY(0.5em); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes way-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes way-menu-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* ── MOBILE (≤860px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
  /* below this the curve scales under 0.78 and its labels drop under 10px — read it as a route instead */
  [data-fn-curve] { display: none !important; }
  [data-fn-list] { display: flex !important; position: relative; gap: 0 !important; }
  /* the spine: one continuous line through the stage markers */
  [data-fn-list]::before {
    content: ""; position: absolute; left: 40px; top: 38px; bottom: 38px; width: 2px;
    background: linear-gradient(to bottom, var(--way-accent-on-dark, #F5D80C), rgba(245,216,12,0.18));
    border-radius: 2px; pointer-events: none;
  }
  [data-fn-list] > div { position: relative; margin-bottom: 10px; background: rgba(18,20,25,0.72); backdrop-filter: blur(2px); }
  [data-fn-list] > div:last-child { margin-bottom: 0; }
  [data-fn-detail] { grid-template-columns: 1fr !important; gap: 18px !important; padding: 26px 22px !important; }
  [data-fn-detail] > div:first-child { font-size: 44px !important; }
}
@media (max-width: 1200px) {
  /* footer link row */
  footer [style*="repeat(auto-fit, minmax(240px"] { grid-template-columns: 1fr !important; }
  footer [style*="minmax(140px"] { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 26px 20px !important; }
  /* footer link columns need real width below the header breakpoint */
  footer [style*="repeat(auto-fit, minmax(240px"],
  footer [style*="grid-template-columns: 1fr auto 1fr"],
  [style*="grid-template-columns: 1fr auto 1fr"] { grid-template-columns: 1fr !important; justify-items: start !important; }
  footer [style*="flex-direction: column"][style*="align-items: flex-end"] { align-items: flex-start !important; }
  footer [style*="text-align: right"] { text-align: left !important; }
  [style*="grid-template-columns: repeat(3, auto)"] { grid-template-columns: repeat(3, minmax(140px, auto)) !important; }

  [data-desktop-only] { display: none !important; }
  [data-mobile-only] { display: flex !important; }
}
@media (max-width: 860px) {
  /* generic mobile collapse — specific rules below override these */
  [style*="repeat(6,"], [style*="repeat(5,"], [style*="repeat(4,"], [style*="repeat(3,"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns: 1.1fr"], [style*="grid-template-columns: 1.2fr"], [style*="grid-template-columns: 1.25fr"], [style*="grid-template-columns: 1.3fr"], [style*="grid-template-columns: 1.4fr"], [style*="grid-template-columns: 1.5fr"], [style*="grid-template-columns: 1.6fr"], [style*="grid-template-columns: 1.7fr"], [style*="grid-template-columns: 1.05fr"], [style*="grid-template-columns: 1.15fr"], [style*="grid-template-columns: 0.9fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 300px"], [style*="grid-template-columns: 264px"], [style*="grid-template-columns: 260px"], [style*="grid-template-columns: 110px"], [style*="grid-template-columns: 1fr 420px"], [style*="grid-template-columns: 1fr 1.4fr"], [style*="grid-template-columns: 1fr 1.05fr"], [style*="grid-template-columns: 1fr 0.85fr"], [style*="grid-template-columns: 1fr 1.1fr"], [style*="grid-template-columns: 1fr 1fr auto"] { grid-template-columns: 1fr !important; }

  /* FINDING NORTH: the scaled curve is unreadable on a phone — swap to a list */
  [data-fn-detail] { grid-template-columns: 1fr !important; gap: 18px !important; padding: 26px 22px !important; }
  [data-fn-detail] > div:first-child { font-size: 44px !important; }
  /* motion: drop the decorative loops that cost paint on mobile */
  [style*="way-travel"] { display: none !important; }
  [style*="way-steam"] { display: none !important; }

  section[data-screen-label="Shorts"] [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3, auto)"] { grid-template-columns: 1fr 1fr !important; }
  section[data-screen-label="Follow us"] { padding-top: 52px !important; }

  [data-desktop-only] { display: none !important; }
  [data-mobile-only] { display: flex !important; }

  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.35fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 420px 1fr"],
  [style*="grid-template-columns: 1fr auto 1fr"],
  [style*="grid-template-columns: 140px 1fr auto"],
  [style*="grid-template-columns: 64px 1fr"],
  [style*="grid-template-columns: 1fr auto"] { grid-template-columns: 1fr !important; }

  /* gutters live on sections, EXCEPT the full-bleed bands */
  section:not([data-fullbleed]), footer { padding-left: 20px !important; padding-right: 20px !important; }
  section[data-fullbleed] { padding-left: 0 !important; padding-right: 0 !important; }
  div[style*="padding: 0 40px"], div[style*="padding: 0 48px"] { padding-left: 0 !important; padding-right: 0 !important; }

  /* vertical rhythm — exceptions match the generic rule's specificity */
  section[data-screen-label] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[data-screen-label="Marquee"] { padding-top: 0 !important; padding-bottom: 0 !important; }
  section[data-screen-label="Hero"] { padding-top: 20px !important; padding-bottom: 26px !important; }
  section[data-screen-label="Clients"] { padding-top: 34px !important; padding-bottom: 36px !important; }

  /* HERO becomes a real swipe carousel: one full-width slide at a time */
  [data-hero-row] { gap: 12px !important; padding: 0 20px 6px !important; scroll-padding-left: 20px !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; }
  [data-hero-row] > a { flex: 0 0 86% !important; height: 62vh !important; min-height: 0 !important; max-height: 460px !important; transition: none !important; will-change: auto !important; scroll-snap-align: center !important; }
  [data-hero-row] > a > div:last-of-type { opacity: 1 !important; }
  [data-hero-row] div[style*="max-width: 340px"] { opacity: 1 !important; font-size: 13px !important; }
  [data-hero-row] div[style*="font-size: 24px"] { font-size: 21px !important; }

  [style*="width: 420px; height: 420px"] { width: 100% !important; max-width: 300px !important; height: 300px !important; margin: 0 auto !important; }
  [style*="position: sticky"][style*="top: 92px"],
  [style*="position: sticky"][style*="top: 96px"] { position: static !important; }

  h1 { font-size: clamp(29px, 8.6vw, 42px) !important; letter-spacing: -0.03em !important; }
  h2 { font-size: clamp(22px, 6.4vw, 30px) !important; }
  h3 { font-size: clamp(20px, 5.6vw, 26px) !important; }
  [data-wordmark] { font-size: clamp(30px, 10.5vw, 58px) !important; margin-bottom: 44px !important; }
}
@media (max-width: 520px) {
  section[data-screen-label] { padding-top: 44px !important; padding-bottom: 44px !important; }
  [data-hero-row] > a { flex: 0 0 88% !important; height: 56vh !important; }
}

/* ── STICKY HEADER · Y→WAY LOGO ───────────────────────────── */
@keyframes way-logo-open { from { max-width: 0; opacity: 0; } to { max-width: 62px; opacity: 1; } }
[data-header] { transition: box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 260ms; will-change: box-shadow; }
[data-header][data-compact="1"] { box-shadow: 0 10px 34px -22px rgba(0,0,0,0.42); }
[data-header] [data-nav-row] { transition: height 280ms cubic-bezier(0.2, 0.8, 0.2, 1); }
[data-header][data-compact="1"] [data-nav-row] { height: 58px !important; }
[data-header][data-compact="1"] [data-nav-row] nav > a { height: 58px !important; }
[data-header] [data-logo] { display: grid !important; grid-template-areas: "slot"; place-items: center; transition: padding 280ms cubic-bezier(0.2, 0.8, 0.2, 1); }
[data-header][data-compact="1"] [data-logo] { padding-left: 11px !important; padding-right: 11px !important; }
[data-header] [data-logo] > img,
[data-header] [data-logo] > [data-logo-word] { grid-area: slot; }
[data-header] [data-logo] > img { animation: way-mark-cycle 5600ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
[data-header] [data-logo] > [data-logo-word] {
  display: inline-block; white-space: nowrap; max-width: none; opacity: 0;
  animation: way-word-cycle 5600ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes way-mark-cycle {
  0%, 44% { opacity: 1; transform: none; }
  45%, 94% { opacity: 0; transform: scale(0.7) rotate(-10deg); }
  95%, 100% { opacity: 1; transform: none; }
}
@keyframes way-word-cycle {
  0%, 44% { opacity: 0; transform: scale(0.86); }
  45%, 94% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: scale(0.86); }
}
@media (prefers-reduced-motion: reduce) {
  [data-header] [data-logo] > img { animation: none; opacity: 1; }
  [data-header] [data-logo] > [data-logo-word] { animation: none; opacity: 0; }
}
::-webkit-scrollbar { height: 0; width: 0; }

@media (max-width: 560px) {
  [style*="repeat(6,"], [style*="repeat(5,"], [style*="repeat(4,"], [style*="repeat(3,"], [style*="repeat(2,"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(11"] { grid-template-columns: repeat(6, 1fr) !important; }
}