/**
 * Shift Theme Overrides
 *
 * Carica DOPO main.css e tailwind.build.css.
 * Sovrascrive (1) cascade font su body.theme-shift, (2) palette token
 * semantici a default NEUTRO (dai mockup proposal-c-*), (3) palette WARM
 * come variante tag-driven (body.theme-shift.tag-warm).
 *
 * Le utility Tailwind (bg-odex-primary, text-odex-accent, ecc.) leggono
 * via CSS variables — niente rebuild Tailwind necessario.
 */


/* ─────────────────────────────────────────────────────────────
 * 1. Font self-hosted (Anton display, Quicksand body)
 * ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Quicksand variable font: un solo file copre 300-700 */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Quicksand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Quicksand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ─────────────────────────────────────────────────────────────
 * 2. Cascade font — Quicksand body, Anton heading
 *
 * Specificity boost difensivo: html body.theme-shift (0,0,1,2) > Tailwind
 * preflight (0,0,0,1) e > parent `* { font-family }` (0,0,0,0).
 * Body rule e heading rule hanno la stessa specificity (0,0,1,3 / 1,3) —
 * vince la heading per source order (sta sotto). NON usare :not() qui:
 * aumenterebbe la specificity e farebbe perdere la heading rule (titoli
 * resterebbero Quicksand).
 * ───────────────────────────────────────────────────────────── */

html body.theme-shift,
html body.theme-shift * {
  font-family: 'Quicksand', sans-serif;
}

html body.theme-shift h1,
html body.theme-shift h1 *,
html body.theme-shift h2,
html body.theme-shift h2 *,
html body.theme-shift h3,
html body.theme-shift h3 *,
html body.theme-shift h4,
html body.theme-shift h4 *,
html body.theme-shift h5,
html body.theme-shift h5 *,
html body.theme-shift h6,
html body.theme-shift h6 *,
html body.theme-shift .font-display {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;
}


/* ─────────────────────────────────────────────────────────────
 * 3. <em> dentro heading: niente fake italic, colore accent
 *
 * Anton non ha italic vero. Il browser fabbricherebbe un fake italic
 * brutto. Sostituiamo con colore accent — firma stilistica Shift.
 * ───────────────────────────────────────────────────────────── */

html body.theme-shift h1 em,
html body.theme-shift h2 em,
html body.theme-shift h3 em,
html body.theme-shift h4 em,
html body.theme-shift h5 em,
html body.theme-shift h6 em {
  font-style: normal;
  color: var(--odex-accent);
  font-weight: inherit;
}


/* ─────────────────────────────────────────────────────────────
 * 4. Escape .no-display per heading-non-display
 *
 * Per "5.0" rating, label corti, nomi propri in case naturale.
 * Ripristina Quicksand sentence case.
 * ───────────────────────────────────────────────────────────── */

html body.theme-shift h1.no-display,
html body.theme-shift h2.no-display,
html body.theme-shift h3.no-display,
html body.theme-shift h4.no-display,
html body.theme-shift h5.no-display,
html body.theme-shift h6.no-display {
  font-family: 'Quicksand', sans-serif;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────
 * 5. Palette NEUTRA (default) — dai mockup proposal-c-*
 *
 * Override SOLO dei token SEMANTICI. I token CHROMATIC
 * (--odex-orange, --odex-blue, --odex-dark, ecc.) restano invariati
 * → option ACF color_theme salvate ('orange', 'blue', 'dark', ecc.)
 * continuano a funzionare. map_params() del composer mappa color_theme
 * legacy sui semantici → tutto il sistema renderizza coerente.
 * ───────────────────────────────────────────────────────────── */

body.theme-shift {
  /* Brand accent (mockup è monochrome-accent: primary = accent) */
  --odex-primary: #162824;
  --odex-primary-contrast: #FFFFFF;
  --odex-primary-rgb: 200, 85, 45;

  --odex-accent: #4F7069;
  --odex-accent-contrast: #FFFFFF;
  --odex-accent-rgb: 230, 232, 1;

  /* Surface neutra */
  --odex-surface: #FFFFFF;
  --odex-surface-contrast: #111111;

  --odex-surface-soft: #E6E8DA;
  --odex-surface-soft-contrast: #162824;

  --odex-surface-strong: #162824;
  --odex-surface-strong-contrast: #FFFFFF;
  --odex-surface-strong-accent: #283f3b;

  /* Muted (testo secondario, separator) */
  --odex-muted: #E6E8DA;
  --odex-muted-contrast: #FFFFFF;

  /* Overlay per gradient/backdrop su immagini e video */
  --odex-overlay-rgb: 17, 17, 17;

  background-color: var(--odex-surface);
  color: var(--odex-surface-contrast);
}


/* ─────────────────────────────────────────────────────────────
 * 6. Palette WARM (variante tag-driven) — earthy desert
 *
 * Activata aggiungendo il term `warm` alla taxonomy `page_tag` della
 * pagina. Il filter body_class in functions.php emette tag-warm
 * sul <body>. Ridefinisce gli stessi 8 token con valori warm.
 * ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
 * 7. Override classi shared di main.css coi token semantici
 *
 * Le classi `.inner-gradient` (overlay leggibilità su card media) usano
 * rgba hardcoded nel main.css. Sotto body.theme-shift le ridefiniamo
 * coi token --odex-overlay-rgb così l'overlay segue la palette attiva
 * (neutro → nero, warm → marrone, future palette → loro overlay).
 * ───────────────────────────────────────────────────────────── */

body.theme-shift .inner-gradient:before {
  background: linear-gradient(0deg, rgba(var(--odex-overlay-rgb), 0.55) 0%, rgba(var(--odex-overlay-rgb), 0) 80%);
}

/**
 * Button: il parent ha hover "sweep" (overlay bianco 10% che scorre).
 * Shift sostituisce con "vira sull'accent" — pattern definito nei mockup.
 * Il sweep :after viene disattivato. La transizione si applica a bg, border
 * e color. Il color text vince comunque la regola Tailwind utility (es.
 * text-white) → leggibilità preservata su accent terracotta.
 */
body.theme-shift .odex-button {
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}

body.theme-shift .odex-button:after {
  display: none;
}

body.theme-shift .odex-button:hover {
  background-color: var(--odex-accent);
  border-color: var(--odex-accent);
}


/* ─────────────────────────────────────────────────────────────
 * 8. Squared corners — global override Shift
 *
 * Estetica brutalist/editorial: azzeriamo border-radius su qualsiasi
 * elemento con utility Tailwind `rounded*` sotto body.theme-shift.
 * Copre: rounded, rounded-{size}, rounded-{side}-{size},
 * rounded-{side}, rounded-tl-{size}, ecc.
 *
 * `!important` necessario per battere la specificity delle utility
 * compiled (0,0,1,0). Reversibile: basta rimuovere/commentare questa
 * regola e tutti i radius originari tornano live.
 *
 * Side effects:
 * - Pulsanti pill diventano rettangolari.
 * - Foto avatar/card/portfolio diventano squadrate.
 * - Pallini availability (rounded-full 2×2px) diventano puntini quadrati.
 * - Tag pill e badge diventano chip rettangolari.
 *
 * Le icone Lucide SVG e gli effetti non basati su class Tailwind non
 * sono toccati (non hanno `rounded` come class).
 * ───────────────────────────────────────────────────────────── */

body.theme-shift [class*="rounded"] {
  border-radius: 0 !important;
}


body.theme-shift.tag-warm {
  --odex-primary: #C43C1E;
  --odex-primary-contrast: #FFFFFF;
  --odex-primary-rgb: 196, 60, 30;

  --odex-accent: #ED5B2D;
  --odex-accent-contrast: #FFFFFF;
  --odex-accent-rgb: 237, 91, 45;

  --odex-surface: #FFFFFF;
  --odex-surface-contrast: #763C00;

  --odex-surface-soft: #F9F7DC;
  --odex-surface-soft-contrast: #763C00;

  --odex-surface-strong: #763C00;
  --odex-surface-strong-contrast: #F9F7DC;
  --odex-surface-strong-accent: #5C3000;

  --odex-muted: #B7AFA3;
  --odex-muted-contrast: #2F1A00;

  --odex-overlay-rgb: 118, 60, 0;
}


/* ─────────────────────────────────────────────────────────────
 * 9. Side menu — versione light Shift
 *
 * Le var --odex-menu-* sono definite in main.sass del parent come
 * palette dark. Le sovrascriviamo a bianco/nero per coerenza con
 * la UI Shift. Il PHP part-side-menu.php usa ovunque queste var
 * e bg-white sul drawer wrapper → niente refactor PHP necessario.
 * ───────────────────────────────────────────────────────────── */

body.theme-shift {
  --odex-menu-bg:         #FFFFFF;
  --odex-menu-surface:    #FFFFFF;
  --odex-menu-text:       #111111;
  --odex-menu-text-muted: #5C5C5C;
  --odex-menu-accent:     var(--odex-accent);
  --odex-menu-border:     rgba(0, 0, 0, 0.08);
  --odex-menu-overlay:    rgba(0, 0, 0, 0.35);
  --odex-menu-shadow:     0 25px 60px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
}


/* ─────────────────────────────────────────────────────────────
 * 10. Footer — versione light Shift
 *
 * Le var --ft-* del parent sono dark. Override a bianco/nero per
 * coerenza con la UI. Il part-footer.php Shift le usa direttamente
 * (riscrittura del PHP — vedi sotto). Anche eventuali sub-elementi
 * legacy che continuano ad usare --ft-* renderizzano in light.
 * ───────────────────────────────────────────────────────────── */

body.theme-shift {
  --ft-bg:          #FFFFFF;
  --ft-surface:     #FFFFFF;
  --ft-text:        #111111;
  --ft-muted:       #5C5C5C;
  --ft-dim:         #CCCCCC;
  --ft-accent:      var(--odex-accent);
  --ft-accent-glow: rgba(var(--odex-accent-rgb), 0.10);
  --ft-border:      rgba(0, 0, 0, 0.08);
}


/* ─────────────────────────────────────────────────────────────
 * 11. Grid Media Column — video crop (proporzioni verticali)
 *
 * Quando una card video del blocco "Griglia Elementi Con Link" sceglie una
 * proporzione forzata (1:1 / 4:5 / 3:5), il contenitore interno del player
 * riceve .odx-video-cover e riempie esattamente il wrapper (verticale).
 *
 * Il "cover" 16:9 è applicato direttamente all'IFRAME: min-width/min-height
 * 100% + aspect-ratio 16/9 lo fanno crescere finché copre il box verticale,
 * croppato poi dal wrapper (overflow-hidden). Si vede la fascia centrale.
 *
 * Nota: video-controller.js forza l'iframe (YouTube e Bunny) a width/height
 * 100% inline → serve !important per sovrascriverlo. NON si può delegare il
 * sizing al solo contenitore: per Bunny l'iframe è inserito in position
 * absolute, quindi un contenitore con width:auto collasserebbe a 0 (l'iframe
 * sparisce). Sizing sull'iframe = robusto sia per YouTube che per Bunny.
 * ───────────────────────────────────────────────────────────── */

body.theme-shift .odx-video-cover {
  position: absolute;
  inset: 0;
}

body.theme-shift .odx-video-cover iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  aspect-ratio: 16 / 9 !important;
}