/*
Theme Name: OCM News
Theme URI: https://news.offroadclubmonaco.com
Author: Offroad Club Monaco
Description: Tema editoriale per OCM News (news.offroadclubmonaco.com), skin coerente con la sezione "OCM Events" del sito madre offroadclubmonaco.com: dark theme, rosso/oro, tipografia Inter + Poppins.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ocm-news
Domain Path: /languages
*/

/* critical:start */
/* CSS critico: i blocchi racchiusi tra i marcatori "critical:start" e
   "critical:end" (commenti isolati, come questo) vengono inlinati
   nell'<head> da inc/performance.php; il resto del file si carica in modo
   non bloccante. Per far entrare una regola nel critico basta metterla
   dentro un blocco marcato. */
/* -------------------------------------------------------------------------
 * Font self-hosted (Inter + Poppins) — stessi file woff2 del sito madre
 * offroadclubmonaco.com, subset latin + latin-ext via unicode-range così
 * il browser scarica solo quello che serve. Nessuna richiesta a Google
 * Fonts: coerenza con l'audit GDPR del sito madre.
 * ---------------------------------------------------------------------- */
/* Inter — variable, peso 400-700, solo normal */
@font-face{
	font-family:"Inter";
	src:url("assets/fonts/inter-400-700-normal-latin.woff2") format("woff2-variations"), url("assets/fonts/inter-400-700-normal-latin.woff2") format("woff2");
	font-weight:400 700; font-style:normal; font-display:swap;
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:"Inter";
	src:url("assets/fonts/inter-400-700-normal-latin-ext.woff2") format("woff2-variations"), url("assets/fonts/inter-400-700-normal-latin-ext.woff2") format("woff2");
	font-weight:400 700; font-style:normal; font-display:swap;
	unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Poppins — pesi statici 300-900, normal + italic (900 solo normal) */
@font-face{font-family:"Poppins";font-weight:300;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-300-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:300;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-300-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Poppins";font-weight:300;font-style:italic;font-display:swap;src:url("assets/fonts/poppins-300-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:300;font-style:italic;font-display:swap;src:url("assets/fonts/poppins-300-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-400-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-400-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Poppins";font-weight:400;font-style:italic;font-display:swap;src:url("assets/fonts/poppins-400-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:400;font-style:italic;font-display:swap;src:url("assets/fonts/poppins-400-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-500-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-500-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-600-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-600-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Poppins";font-weight:600;font-style:italic;font-display:swap;src:url("assets/fonts/poppins-600-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:600;font-style:italic;font-display:swap;src:url("assets/fonts/poppins-600-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-700-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-700-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Poppins";font-weight:700;font-style:italic;font-display:swap;src:url("assets/fonts/poppins-700-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:700;font-style:italic;font-display:swap;src:url("assets/fonts/poppins-700-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:"Poppins";font-weight:800;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-800-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:800;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-800-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Poppins";font-weight:800;font-style:italic;font-display:swap;src:url("assets/fonts/poppins-800-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:800;font-style:italic;font-display:swap;src:url("assets/fonts/poppins-800-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:"Poppins";font-weight:900;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-900-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poppins";font-weight:900;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-900-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
	--red:#CE1226;
	--red-rgb:206,18,38;
	--gold:#D9BC81;
	--gold-rgb:217,188,129;
	--gold-dark:#936B16;
	/* Oro chiaro: solo per testo/bottoni sopra la costellazione (sempre su
	   sfondo scuro, in entrambi i temi) — troppo vicino a --gold per
	   leggersi bene in hover su quello sfondo specifico. */
	--gold-light:#F2E4B8;
	--black:#000000;
	--gray:#111111;
	--gray2:#1C1C1C;
	--gray3:#2A2A2A;
	--white:#FFFFFF;
	/* Grigio chiaro per testo secondario sopra overlay scuri fissi (hero,
	   costellazione) — non cambia con --muted perché quello segue il tema,
	   questo resta chiaro sempre (lo sfondo dietro resta scuro sempre). */
	--muted-light:#c9c9c4;
	/* Nebulosa: sfondo decorativo della costellazione in tema chiaro
	   (radial-gradient, non una foto). Non colori di brand, solo nominati
	   per riuso invece di ripetere gli stessi rgb a mano. */
	--nebula-blue-rgb:201,209,217;
	--nebula-slate-rgb:130,138,148;
	--nebula-base:#120c04;

	--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--muted:#9a9a9a;

	/* Token di superficie: sono gli unici a cambiare in modalità chiara.
	   Rosso, oro e font restano identici nei due temi. */
	--bg:var(--black);
	--surface:var(--gray2);
	--surface-alt:var(--gray);
	--border:var(--gray3);
	--text:var(--white);
	--text-body:#e8e8e4;
	--header-bg:rgba(0,0,0,.86);
	--footer-bg:var(--gray);
	--chip-bg:var(--gray2);
}

/* Modalità chiara: stessi rossi/ori, neutri invertiti. */
:root[data-theme="light"]{
	--muted:#5c5c5c;
	--bg:#FFFFFF;
	--surface:#F5F5F3;
	--surface-alt:#EDEDEA;
	--border:#DCDCD6;
	--text:#111111;
	--text-body:#1C1C1C;
	--header-bg:rgba(255,255,255,.92);
	--footer-bg:#EDEDEA;
	--chip-bg:#EDEDEA;
	--gold:var(--gold-dark);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:var(--font-body);
	font-weight:400;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block;}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--text);}
.container{max-width:1240px;margin:0 auto;padding:0 24px;}
::selection{background:var(--red);color:var(--white);}

/* Solo per screen reader e crawler (es. H1 fisso della home). */
.ocm-sr-only{
	position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
	overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;
}

.ocm-eyebrow{
	font-family:var(--font-ui);font-weight:700;text-transform:uppercase;
	letter-spacing:.22em;font-size:.68rem;color:var(--gold);
}
.ocm-eyebrow--lg{font-size:1.36rem;}
.ocm-highlight{color:var(--red);}

/* -------------------------------------------------------------------------
 * Header: hamburger+logo — wordmark centrato — cerca/tema. Sticky, resta
 * sempre visibile scrollando. Le sezioni (Sostenibilità/Sport/... e
 * Eventi/Tecnologia/...) e le pillole vivono nella subnav sotto, che
 * invece scorre via normalmente.
 * ---------------------------------------------------------------------- */
.ocm-header{
	position:sticky;top:0;z-index:65;
	background:var(--header-bg);backdrop-filter:blur(8px);
	border-bottom:1px solid var(--border);
	transition:transform .3s ease;
}
/* Header dinamico (vedi main.js): dopo 3 secondi fermi scorre via in alto,
   torna al primo scroll. */
.ocm-header.is-hidden{transform:translateY(-100%);}
.ocm-header-inner{
	display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
	padding:14px 40px;max-width:1800px;margin:0 auto;
}
.ocm-header-start{justify-self:start;display:flex;align-items:center;gap:14px;}
.ocm-header-inner .ocm-header-tools{justify-self:end;}
.ocm-logo{
	display:flex;align-items:center;gap:12px;justify-content:center;
	font-family:var(--font-ui);font-weight:800;letter-spacing:.04em;font-size:clamp(18px,3vw,32px);
	text-transform:uppercase;color:var(--text);text-align:center;
}
/* In header il wordmark è solo testo: da flex andrebbe a capo spezzando
   "News" su una riga a sé (due flex item distinti). Come blocco di testo
   va a capo normalmente, restando centrato. */
.ocm-header-inner .ocm-logo{display:block;line-height:1.15;}
.ocm-logo-mark{width:95px;height:95px;object-fit:contain;}
.ocm-logo span{color:var(--red);}
.ocm-logo .ocm-logo-text{color:var(--text);}

/* Hamburger: 3 lineette -> X quando il pannello è aperto. */
.ocm-menu-toggle{
	background:none;border:none;color:var(--text);cursor:pointer;
	width:42px;height:42px;display:flex;align-items:center;justify-content:center;
}
.ocm-burger-lines{display:block;width:23px;height:16px;position:relative;}
.ocm-burger-lines span{
	position:absolute;left:0;width:100%;height:2px;background:currentColor;
	transition:transform .2s ease,opacity .2s ease;
}
.ocm-burger-lines span:nth-child(1){top:0;}
.ocm-burger-lines span:nth-child(2){top:7px;}
.ocm-burger-lines span:nth-child(3){top:14px;}
.ocm-menu-toggle[aria-expanded="true"] .ocm-burger-lines span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ocm-menu-toggle[aria-expanded="true"] .ocm-burger-lines span:nth-child(2){opacity:0;}
.ocm-menu-toggle[aria-expanded="true"] .ocm-burger-lines span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.ocm-header-tools{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
.ocm-search-toggle,.ocm-theme-toggle{
	flex:0 0 auto;width:40px;height:40px;border-radius:50%;
	background:none;border:1px solid var(--border);color:var(--text);
	display:flex;align-items:center;justify-content:center;cursor:pointer;
	transition:border-color .15s ease,color .15s ease;
}
.ocm-search-toggle:hover,.ocm-theme-toggle:hover{border-color:var(--gold);color:var(--gold);}
.ocm-search-toggle svg,.ocm-theme-toggle svg{width:18px;height:18px;}
.ocm-icon-sun{display:none;}
:root[data-theme="light"] .ocm-icon-sun{display:block;}
:root[data-theme="light"] .ocm-icon-moon{display:none;}



/* Barra secondaria: "Ultime notizie" sempre attiva + le categorie
   (Universe), riga scorrevole con accento colorato sotto. */
.ocm-subnav{
	background:var(--header-bg);
	border-top:1px solid var(--border);border-bottom:2px solid var(--gold);
}
.ocm-subnav-track{
	max-width:1800px;margin:0 auto;padding:8px 24px;
	display:flex;align-items:center;justify-content:center;gap:16px;overflow-x:auto;
	scrollbar-width:none;
}
.ocm-subnav-track::-webkit-scrollbar{display:none;}
.ocm-subnav-logo{flex:0 0 auto;display:flex;align-items:center;margin-right:auto;}
.ocm-subnav-logo img{width:48px;height:48px;object-fit:contain;}
.ocm-subnav-track > a{
	flex:0 0 auto;font-family:var(--font-ui);font-weight:700;font-size:.8rem;
	letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.ocm-subnav-track > a:hover{color:var(--gold);}
.ocm-subnav-track > a.is-active{
	background:var(--surface);color:var(--text);
	border-radius:999px;padding:8px 16px;
}
.ocm-subnav-track .ocm-header-tools{flex:0 0 auto;margin-left:auto;}

/* Barra di ricerca: si apre sotto l'header, non sposta il contenuto
   (position:absolute) finché non la chiudi. */
.ocm-search-form{
	position:absolute;top:100%;left:0;right:0;z-index:65;
	background:var(--surface);border-bottom:1px solid var(--border);
	max-height:0;overflow:hidden;transition:max-height .2s ease;
}
.ocm-search-form.is-open{max-height:80px;}
.ocm-search-form input{
	width:100%;max-width:1400px;margin:0 auto;display:block;box-sizing:border-box;
	background:none;border:none;color:var(--text);padding:18px 24px;
	font-family:var(--font-body);font-size:16px;
}
.ocm-search-form input:focus{outline:none;}

/* Pannello hamburger stile open.online: drawer agganciato a sinistra,
   piena altezza, con sfondo scurito dietro (backdrop) sul resto della
   pagina. Su mobile il drawer diventa largo quanto lo schermo (vedi
   media query sotto) — stesso pannello, solo più largo. */
.ocm-nav-panel-backdrop{
	position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.6);
	opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;
}
.ocm-nav-panel-backdrop.is-open{opacity:1;visibility:visible;}

.ocm-nav-panel{
	position:fixed;top:0;left:0;z-index:100;
	width:min(440px,88vw);height:100vh;height:100dvh;
	background:var(--bg);box-shadow:0 0 40px rgba(0,0,0,.4);
	display:flex;flex-direction:column;
	transform:translateX(-100%);transition:transform .25s ease;
}
.ocm-nav-panel.is-open{transform:translateX(0);}

.ocm-nav-panel-head{
	flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
	padding:20px 24px;border-bottom:1px solid var(--border);
}
.ocm-nav-panel-logo{font-size:16px;letter-spacing:.02em;}
.ocm-nav-panel-close{
	background:none;border:none;color:var(--gold);cursor:pointer;
	font-size:34px;line-height:1;width:40px;height:40px;
	display:flex;align-items:center;justify-content:center;
}

.ocm-nav-panel-search{flex:0 0 auto;padding:18px 24px;border-bottom:1px solid var(--border);}
.ocm-nav-panel-search input{
	width:100%;box-sizing:border-box;background:none;color:var(--text);
	border:1px solid var(--border);border-radius:24px;
	padding:12px 18px;font-family:var(--font-body);font-size:16px;
}
.ocm-nav-panel-search input:focus{outline:none;border-color:var(--gold);}
.ocm-nav-panel-search input::placeholder{color:var(--muted);}

/* La lista si prende tutto lo spazio libero e scrolla da sola; testa,
   ricerca e riga social/tema restano sempre visibili, fisse. */
.ocm-nav-panel-list{
	list-style:none;margin:0;padding:8px 24px 12px;
	flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.ocm-nav-panel-list li{border-bottom:1px solid var(--border);}
.ocm-nav-panel-list a{
	display:block;padding:16px 0;font-family:var(--font-body);color:var(--text);
	font-size:1.15rem;font-weight:700;
}
.ocm-nav-panel-list a:hover{color:var(--gold);}

.ocm-nav-panel-footer{
	flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
	gap:16px;padding:18px 24px;border-top:1px solid var(--border);
}

/* Toggle tema a pillola (stile open.online): il pomello con l'icona
   scorre da un lato all'altro della pillola in base al tema attivo. */
.ocm-theme-toggle-pill{
	background:none;border:1px solid var(--border);border-radius:999px;
	width:64px;height:36px;padding:3px;cursor:pointer;position:relative;flex:0 0 auto;
}
.ocm-theme-toggle-knob{
	width:28px;height:28px;border-radius:50%;background:var(--text);color:var(--bg);
	display:flex;align-items:center;justify-content:center;
	transition:transform .2s ease;transform:translateX(0);
}
:root[data-theme="light"] .ocm-theme-toggle-knob{transform:translateX(26px);}
.ocm-theme-toggle-knob svg{width:16px;height:16px;}
.ocm-theme-toggle-knob .ocm-icon-sun{display:none;}
:root[data-theme="light"] .ocm-theme-toggle-knob .ocm-icon-sun{display:block;}
:root[data-theme="light"] .ocm-theme-toggle-knob .ocm-icon-moon{display:none;}

.ocm-nav-panel-social{display:flex;align-items:center;gap:10px;}
.ocm-nav-panel-social a{
	width:34px;height:34px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	color:var(--muted);border:1px solid var(--border);
}
.ocm-nav-panel-social a:hover{color:var(--gold);border-color:var(--gold);}
.ocm-nav-panel-social svg{width:15px;height:15px;}



/* Il drawer blocca sempre lo scroll della pagina dietro, non solo su mobile. */
body.ocm-panel-open{overflow:hidden;}

/* Hamburger+logo+titolo+cerca/tema stanno sempre su una riga. */
@media (max-width:860px){
	.ocm-header-inner{padding:14px 16px;gap:10px;}
	/* Il crest lascia il posto al titolo: su schermo stretto tra hamburger
	   e icone non resta larghezza per entrambi senza andare a capo. */
	.ocm-header-start .ocm-subnav-logo{display:none;}
	.ocm-header-inner .ocm-logo{font-size:15px;letter-spacing:.02em;}
	/* Centrato su una riga che scorre nasconde l'hamburger: il browser non
	   permette scroll verso il contenuto "prima" del centro. */
	.ocm-subnav-track{justify-content:flex-start;}
	.ocm-nav-panel-logo{font-size:12px;gap:8px;}
	.ocm-nav-panel-logo .ocm-logo-mark{width:56px;height:56px;}
	.ocm-menu-toggle{width:38px;height:38px;}
	.ocm-search-toggle,.ocm-theme-toggle{width:36px;height:36px;}
	.ocm-nav-panel{width:92vw;}
	.ocm-nav-panel-list a{font-size:1.5rem;}
}

/* -------------------------------------------------------------------------
 * Buttons & pills
 * ---------------------------------------------------------------------- */
.ocm-btn{
	display:inline-flex;align-items:center;gap:10px;
	background:var(--red);color:var(--white);border:1px solid var(--red);
	padding:14px 26px;border-radius:0;font-family:var(--font-ui);font-weight:700;
	font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
	transition:filter .15s ease;
}
.ocm-btn:hover{filter:brightness(1.18);color:var(--white);}

/* -------------------------------------------------------------------------
 * Hero (home)
 * ---------------------------------------------------------------------- */
.ocm-hero{position:relative;min-height:84vh;min-height:84svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--gray);}
.ocm-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* La admin bar di WP spinge giù la pagina (32px desktop / 46px sotto 782px):
   senza compensarla, il fondo dell'hero (bottoni CTA) finisce sotto la
   piega e serve scroll per vederlo. */
body.admin-bar .ocm-hero,body.admin-bar .ocm-article-hero{min-height:calc(84vh - 32px);min-height:calc(84svh - 32px);}
@media (max-width:782px){
	body.admin-bar .ocm-hero,body.admin-bar .ocm-article-hero{min-height:calc(84vh - 46px);min-height:calc(84svh - 46px);}
}
.ocm-hero::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.96) 100%);
}
.ocm-hero-content{color:var(--white);position:relative;z-index:2;padding:80px 24px 48px;max-width:1240px;margin:0 auto;width:100%;}
.ocm-hero h1{
	font-family:var(--font-body);font-weight:700;font-size:clamp(32px,6vw,64px);
	margin:14px 0 20px;max-width:900px;line-height:1.1;
}
.ocm-hero-intro{color:var(--muted-light);max-width:640px;font-size:18px;margin:0 0 32px;}
.ocm-hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}

/* -------------------------------------------------------------------------
 * Costellazione: banner canvas decorativo sotto l'header. Sempre su sfondo
 * nero (è una scena di cielo stellato, non deve seguire il tema chiaro).
 * ---------------------------------------------------------------------- */
.ocm-constellation{
	position:relative;min-height:clamp(480px,68vh,720px);
	background:var(--black);border-bottom:1px solid var(--border);overflow:hidden;
	display:flex;align-items:flex-end;
}
/* Tema chiaro: sfondo nebulosa colorata (gradienti CSS, nessuna foto
   esterna) invece del nero spazio profondo. */
:root[data-theme="light"] .ocm-constellation{
	background:
		radial-gradient(ellipse 60% 55% at 28% 35%, rgba(var(--nebula-blue-rgb),.5), transparent 62%),
		radial-gradient(ellipse 55% 60% at 72% 25%, rgba(var(--nebula-slate-rgb),.55), transparent 65%),
		radial-gradient(ellipse 70% 55% at 62% 78%, rgba(var(--red-rgb),.28), transparent 62%),
		radial-gradient(ellipse 45% 45% at 18% 78%, rgba(var(--nebula-blue-rgb),.3), transparent 58%),
		radial-gradient(ellipse 50% 45% at 88% 68%, rgba(var(--nebula-slate-rgb),.35), transparent 60%),
		var(--nebula-base);
}
/* La admin bar di WP (32px desktop / 46px sotto 782px) mangia altezza di
   viewport: senza compensarla il fondo (bottone) finisce sotto la piega. */
body.admin-bar .ocm-constellation{min-height:calc(clamp(480px,68vh,720px) - 32px);}
@media (max-width:782px){
	body.admin-bar .ocm-constellation{min-height:calc(clamp(480px,68vh,720px) - 46px);}
}
.ocm-constellation canvas{position:absolute;inset:0;width:100%;height:100%;}
.ocm-constellation-content{
	position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
	padding:0 24px 40px;
	display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.ocm-constellation-text{display:flex;flex-direction:column;gap:12px;align-items:flex-start;flex:1 1 auto;min-width:0;}
.ocm-constellation-content .ocm-lead-title,
.ocm-constellation-content .ocm-lead-excerpt{max-width:640px;}
.ocm-constellation-content .ocm-badge{align-self:flex-start;}
.ocm-constellation-text .ocm-btn{background:var(--gold-light);border-color:var(--gold-light);color:var(--black);}

/* Foto vera dell'articolo, di lato, tra le stelle: bordo/glow dorato.
   Dimensione legata all'altezza dello schermo (non a un px/vw fisso): su
   schermi bassi si restringe da sola invece di spingere la sezione oltre
   il suo budget di altezza (stesso motivo del bug del bottone tagliato). */
.ocm-constellation-media{
	flex:0 0 auto;display:block;height:clamp(350px,58vh,580px);width:auto;aspect-ratio:4/5;
	overflow:hidden;border:1px solid var(--gold);
	box-shadow:0 0 32px rgba(var(--gold-rgb),.35);
}
.ocm-constellation-media img{width:100%;height:100%;object-fit:cover;}

@media (max-width:860px){
	.ocm-constellation-content{flex-direction:column;align-items:flex-start;gap:20px;padding:36px 20px;}
	.ocm-constellation-media{display:none;}
	/* Senza la foto di lato l'altezza fissa lasciava mezzo schermo vuoto
	   sopra il testo (contenuto ancorato in basso): qui la sezione si
	   adatta al contenuto. */
	.ocm-constellation,
	body.admin-bar .ocm-constellation{min-height:0;align-items:stretch;}
	.ocm-lead-title{margin-top:0;}
}

/* critical:end */

/* -------------------------------------------------------------------------
 * Blocchi editoriali della home (apertura, sezioni per categoria, lista)
 * ---------------------------------------------------------------------- */
.ocm-block{padding:56px 0 0;}
.ocm-block-head{
	display:flex;align-items:baseline;justify-content:space-between;gap:16px;
	margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:12px;
}
.ocm-block-head h2{
	display:flex;align-items:center;gap:12px;margin:0;
	font-family:var(--font-body);font-weight:700;font-size:23px;
	text-transform:uppercase;letter-spacing:.03em;color:var(--text);
}
.ocm-block-rule{--badge-color:var(--red);width:5px;height:22px;background:var(--badge-color);flex:0 0 auto;}
.ocm-block-more{
	font-family:var(--font-ui);font-weight:700;font-size:.66rem;
	text-transform:uppercase;letter-spacing:.12em;color:var(--gold);white-space:nowrap;
}
.ocm-block-more:hover{color:var(--red);}

/* Titolo/estratto dell'articolo in evidenza, sovrapposti alla costellazione
   (vedi sopra) — colore forzato chiaro, sta sempre su sfondo nero
   indipendentemente dal tema. */
/* critical:start */
.ocm-lead-title{margin:40px 0 0;font-family:var(--font-body);font-weight:700;line-height:1.15;font-size:clamp(26px,3.6vw,44px);}
.ocm-lead-title a{color:var(--white);}
.ocm-lead-title a:hover{color:var(--gold-light);}
.ocm-lead-excerpt{margin:0;color:var(--muted-light);font-size:16px;max-width:640px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
/* critical:end */

/* Lista testuale, senza immagini. */
.ocm-latest-list{list-style:none;margin:0;padding:0;}
.ocm-latest-list li{
	display:flex;align-items:center;gap:14px;
	padding:14px 0;border-bottom:1px solid var(--border);
}
.ocm-latest-mark{width:24px;height:24px;object-fit:contain;flex:0 0 auto;}
.ocm-latest-list a{color:var(--text);font-weight:500;flex:1;}
.ocm-latest-list a:hover{color:var(--gold);}
.ocm-latest-date{
	font-family:var(--font-ui);font-size:.82rem;text-transform:uppercase;
	letter-spacing:.08em;color:var(--gold);white-space:nowrap;
}

/* Pagina dedicata "Ultime notizie" (page-ultime-notizie.php): lista
   verticale, miniatura a sinistra + testo a destra, stile open.online. */
.ocm-news-list{display:flex;flex-direction:column;gap:0;}
.ocm-news-list-row{
	display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--border);
}
.ocm-news-list-media{
	flex:0 0 auto;display:block;width:160px;aspect-ratio:4/3;overflow:hidden;background:var(--surface-alt);
}
.ocm-news-list-media img{width:100%;height:100%;object-fit:cover;}
.ocm-news-list-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;justify-content:center;}
.ocm-news-list-title{margin:0;font-family:var(--font-body);font-weight:700;font-size:1.27rem;line-height:1.3;}
.ocm-news-list-title a{color:var(--text);}
.ocm-news-list-title a:hover{color:var(--gold);}
.ocm-news-list-excerpt{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5;}
.ocm-news-list-meta{
	display:flex;gap:14px;font-family:var(--font-ui);font-size:.68rem;
	text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
}
@media (max-width:640px){
	.ocm-news-list-media{width:100px;}
	.ocm-news-list-title{font-size:1rem;}
	.ocm-news-list-excerpt{display:none;}
}

/* -------------------------------------------------------------------------
 * Explore by OCM Universe
 * ---------------------------------------------------------------------- */
.ocm-explore{padding:25px 0 72px;}
.ocm-explore-head{margin-bottom:30px;}
.ocm-explore-head h2{font-family:var(--font-body);font-weight:700;font-size:28px;text-transform:uppercase;margin:10px 0 0;}
.ocm-explore-head h2 span{color:var(--red);}

.ocm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:960px){.ocm-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.ocm-grid{grid-template-columns:1fr;}}

/* Interviste: carosello orizzontale, il video si vede (e si guarda) già
   qui, senza aprire l'articolo. Video verticali (girati da telefono):
   colonna stretta, altezza a tetto perché non sfondino la card. */
.ocm-video-carousel{
	display:flex;align-items:stretch;gap:20px;overflow-x:auto;padding-bottom:8px;
	scroll-snap-type:x proximity;scrollbar-width:thin;
}
.ocm-video-slide{
	flex:0 0 auto;scroll-snap-align:start;width:300px;
	background:var(--surface);border:1px solid var(--border);
	display:flex;flex-direction:column;overflow:hidden;
}
.ocm-video-slide-media{
	position:relative;display:block;background:var(--black);
	aspect-ratio:9/16;max-height:65vh;
}
.ocm-video-slide-media video,
.ocm-video-slide-media img{width:100%;height:100%;object-fit:cover;display:block;}
/* Reel Instagram: l'iframe lo dimensiona lo script di Instagram stesso via
   stile inline, non un rapporto d'aspetto fisso come il video self-hosted
   — i !important sotto servono a vincere quello stile inline. */
.ocm-video-slide-media--embed{
	aspect-ratio:auto;max-height:none;height:auto;
	display:flex;align-items:center;justify-content:center;padding:8px;
}
.ocm-video-slide-media--embed blockquote.instagram-media{margin:0 !important;width:100% !important;min-width:0 !important;}
/* Schermo intero: object-fit:cover andrebbe bene solo se il video restasse
   nel suo riquadro 9:16, ma a schermo intero il contenitore diventa tutto
   lo schermo (landscape) e "cover" lo allarga/deforma per riempirlo. In
   fullscreen si vuole invece il video intero, proporzioni intatte, con le
   barre nere ai lati. */
.ocm-video-slide-media video:fullscreen,
.ocm-video-slide-media video:-webkit-full-screen{
	width:100%;height:100%;object-fit:contain;background:var(--black);
}
/* flex:1 fa crescere il corpo per riempire l'altezza della card (uguale
   per tutte, vedi align-items:stretch sopra); margin-top:auto sul link
   lo ancora sempre in fondo, indipendentemente da quanto sono lunghi
   titolo/estratto — non più il link che "galleggia" subito dopo il testo. */
.ocm-video-slide-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.ocm-video-slide-body .ocm-card-link{margin-top:auto;padding-top:8px;}
@media (max-width:640px){.ocm-video-slide{width:230px;}}

.ocm-card{background:var(--surface);border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;}
.ocm-card-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--gray);}
.ocm-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.ocm-card:hover .ocm-card-media img{transform:scale(1.06);}
.ocm-card-play{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:56px;height:56px;border-radius:50%;
	background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
	display:flex;align-items:center;justify-content:center;
	color:var(--white);transition:background .15s ease,transform .15s ease;
}
.ocm-card-play svg{width:22px;height:22px;margin-left:3px;}
.ocm-card:hover .ocm-card-play{background:var(--red);transform:translate(-50%,-50%) scale(1.08);}
.ocm-card-body{padding:20px;flex:1;display:flex;flex-direction:column;gap:10px;}
.ocm-card-meta{display:flex;align-items:center;gap:10px;}
.ocm-badge{
	background:var(--gold-dark);color:var(--white);font-family:var(--font-ui);
	font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;padding:6px 12px;
}
.ocm-card-date{font-family:var(--font-ui);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.ocm-card-title{margin:0;font-family:var(--font-body);font-weight:600;font-size:22px;line-height:1.35;}
.ocm-card-title a{color:var(--text);}
.ocm-card-title a:hover{color:var(--gold);}
.ocm-card-excerpt{color:var(--muted);font-size:15.5px;margin:0;line-height:1.6;}
.ocm-card-link{
	margin-top:auto;font-family:var(--font-ui);font-weight:700;font-size:.75rem;
	text-transform:uppercase;letter-spacing:.1em;color:var(--gold);align-self:flex-start;
}
.ocm-card-link:hover{color:var(--red);}

/* -------------------------------------------------------------------------
 * Newsletter CTA
 * ---------------------------------------------------------------------- */
.ocm-newsletter{padding:80px 0;text-align:center;background:var(--footer-bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.ocm-newsletter-inner{display:flex;flex-direction:column;align-items:center;}
.ocm-newsletter svg{width:40px;height:40px;stroke:var(--gold);margin-bottom:20px;}
.ocm-newsletter h2{font-family:var(--font-body);font-weight:700;font-size:28px;margin:0 0 10px;}
.ocm-newsletter-text p{color:var(--muted);margin:0 0 28px;}
.ocm-newsletter-form-wrap{width:100%;}
.ocm-newsletter-form{display:flex;flex-direction:column;gap:16px;align-items:center;max-width:460px;margin:0 auto;}
.ocm-newsletter-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:100%;}
.ocm-newsletter-row input[type="email"]{
	flex:1;min-width:220px;background:var(--surface);border:1px solid var(--border);color:var(--text);
	padding:14px 16px;font-family:var(--font-body);font-size:14px;
}
.ocm-newsletter-row input[type="email"]:focus{outline:none;border-color:var(--gold);}
.ocm-newsletter-row input[type="email"]::placeholder{color:var(--muted);opacity:1;}
.ocm-newsletter-honeypot{position:absolute;left:-5000px;}
.ocm-newsletter-consent{
	display:flex;align-items:flex-start;gap:10px;text-align:left;
	font-size:.78rem;color:var(--muted);line-height:1.5;
}
.ocm-newsletter-consent input[type="checkbox"]{flex:none;margin-top:3px;accent-color:var(--gold);}
.ocm-newsletter-consent a{color:var(--text);text-decoration:underline;}
.ocm-newsletter-notice{margin:0 0 16px;font-size:.85rem;font-weight:600;color:var(--gold-dark);}

/* Carosello Instagram: griglia di thumbnail, non un vero carosello — con
   6-8 video ci sta comodo, niente scroll-snap necessario (a differenza
   di "Live e Interviste" che è pensato per molti più video nel tempo). */
.ocm-instagram-feed{padding:56px 0;}
.ocm-instagram-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:960px){.ocm-instagram-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.ocm-instagram-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}
.ocm-instagram-item{
	position:relative;display:block;aspect-ratio:9/16;overflow:hidden;
	background:var(--surface);border:1px solid var(--border);
}
.ocm-instagram-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.ocm-instagram-item:hover img{transform:scale(1.06);}
.ocm-instagram-item:hover .ocm-card-play{background:var(--red);transform:translate(-50%,-50%) scale(1.08);}
.ocm-instagram-caption{
	margin:10px 0 0;font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1.4;
	color:var(--text);
}
.ocm-instagram-excerpt{
	margin:4px 0 0;font-family:var(--font-body);font-size:13px;line-height:1.5;
	color:var(--muted);
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}

/* critical:start */
/* -------------------------------------------------------------------------
 * Article single: hero
 * ---------------------------------------------------------------------- */
.ocm-article-hero{position:relative;min-height:84vh;min-height:84svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--gray);}
.ocm-article-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ocm-article-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.96) 100%);}
.ocm-article-subnav{position:absolute;top:0;left:0;right:0;z-index:3;padding:24px;}
.ocm-back-link{
	display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:600;
	font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--white);
	background:rgba(0,0,0,.5);border:1px solid var(--border);padding:9px 16px;
}
.ocm-back-link:hover{border-color:var(--gold);color:var(--gold);}
.ocm-date-badge{
	position:absolute;top:24px;right:24px;z-index:3;background:var(--red);color:var(--white);
	font-family:var(--font-ui);font-weight:700;font-size:.68rem;text-transform:uppercase;
	letter-spacing:.08em;padding:8px 14px;
}
.ocm-article-hero-content{color:var(--white);position:relative;z-index:2;padding:64px 24px;max-width:900px;}
.ocm-article-hero h1{font-family:var(--font-body);font-weight:700;font-size:clamp(30px,5vw,52px);margin:0 0 18px;line-height:1.15;}
.ocm-article-meta{
	display:flex;flex-wrap:wrap;gap:16px;font-family:var(--font-ui);
	letter-spacing:.08em;font-size:.7rem;color:var(--muted);
}
.ocm-article-meta span strong{color:var(--gold);font-weight:700;}
.ocm-article-meta span strong a{color:inherit;text-decoration:underline;text-decoration-color:rgba(var(--gold-rgb),.45);text-underline-offset:3px;}
.ocm-article-meta span strong a:hover{color:var(--white);text-decoration-color:currentColor;}
.ocm-article-updated{color:var(--muted-light);}
/* critical:end */

/* -------------------------------------------------------------------------
 * Article single: body
 * ---------------------------------------------------------------------- */
/* Pagine statiche (page.php: Privacy Policy, ecc.) — nessun hero, solo
 * titolo semplice sopra lo stesso corpo tipografico degli articoli. */
.ocm-page-header{max-width:740px;margin:0 auto;padding:64px 24px 0;}
.ocm-page-header h1{
	font-family:var(--font-body);font-weight:700;font-size:clamp(28px,4vw,42px);
	margin:0 0 24px;border-bottom:1px solid var(--border);padding-bottom:24px;
}

.ocm-article-body{max-width:740px;margin:0 auto;padding:64px 24px 40px;font-size:19px;color:var(--text-body);}
.ocm-article-reel{display:flex;justify-content:center;margin-bottom:32px;}
.ocm-article-body ul,.ocm-article-body ol{margin:0 0 26px;padding-left:1.3em;line-height:1.9;}
.ocm-article-body li{margin-bottom:8px;}
.ocm-article-body p{
	margin:0 0 26px;text-align:justify;hyphens:auto;-webkit-hyphens:auto;line-height:1.9;
}
/* Capolettera automatico per il primo paragrafo (anche se in un gruppo) + supporto nativo Gutenberg */
.ocm-article-body > p:first-of-type::first-letter,
.ocm-article-body > .wp-block-group:first-child > p:first-of-type::first-letter,
.ocm-article-body p.has-drop-cap::first-letter,
.ocm-article-body p.has-drop-cap:not(:focus)::first-letter {
	float:left;font-family:var(--font-body);font-weight:700;color:var(--gold);
	font-size:4.2em;line-height:.78;padding:.05em .08em 0 0;
}
.ocm-article-body h2,.ocm-article-body h3{font-family:var(--font-body);font-weight:700;margin-top:44px;color:var(--text);}
.ocm-article-body img,.ocm-article-body iframe{width:100%;margin:28px 0;}
/* Video verticali (girati da telefono, tipici delle interviste): con solo
   width:100% un 9:16 diventa altissimo nella colonna stretta dell'articolo.
   Si limita l'altezza e si lascia che sia la larghezza a restringersi. */
.ocm-article-body video{
	display:block;max-width:100%;max-height:65vh;width:auto;height:auto;
	margin:28px auto;
}
/* Schermo intero: senza forzare le proporzioni qui, il fullscreen nativo
   del browser lo allargherebbe a riempire lo schermo landscape. */
.ocm-article-body video:fullscreen,
.ocm-article-body video:-webkit-full-screen{
	width:100%;height:100%;max-height:none;object-fit:contain;background:var(--black);
}
.ocm-article-body blockquote{border-left:3px solid var(--red);margin:28px 0;padding:6px 24px;color:var(--gold);font-style:italic;font-size:1.1em;}
.ocm-article-body a{text-decoration:underline;text-underline-offset:3px;}
.ocm-article-body figure{margin:28px 0;}
.ocm-article-body figcaption{color:var(--muted);font-size:14px;text-align:center;margin-top:8px;font-family:var(--font-ui);}

/* Gallery / lightbox */
.ocm-article-body .wp-block-gallery{cursor:zoom-in;}
.ocm-article-body .wp-block-gallery figure{
	margin:0;
	display:flex;
	flex-direction:column;
	height:100%;
}
.ocm-article-body .wp-block-gallery figure img{
	margin:0 !important;
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
}
/* Rimuove la didascalia sovrapposta con sfocatura di Gutenberg:
   la caption viene mostrata sotto la foto in modo classico. */
.ocm-article-body .wp-block-gallery .wp-block-image figcaption,
.ocm-article-body .wp-block-gallery figcaption{
	position:static !important;
	background:none !important;
	backdrop-filter:none !important;
	-webkit-backdrop-filter:none !important;
	color:var(--muted) !important;
	font-size:13px;
	text-align:center;
	margin-top:6px;
	padding:0 !important;
	max-width:100%;
}
/* Neutralizza le regole Gutenberg che posizionano la caption in overlay */
.ocm-article-body .wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-gallery .wp-block-image > figcaption{
	position:static !important;
	bottom:auto !important;
	width:auto !important;
	background:none !important;
	backdrop-filter:none !important;
	-webkit-backdrop-filter:none !important;
}
.ocm-lightbox{
	position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);display:none;
	align-items:center;justify-content:center;flex-direction:column;
}
.ocm-lightbox.is-open{display:flex;}
.ocm-lightbox img{max-width:90vw;max-height:80vh;object-fit:contain;}
.ocm-lightbox-caption{
	max-width:70vw;margin:16px 0 0;text-align:center;
	font-family:var(--font-ui);font-size:.85rem;color:var(--muted-light);
}
.ocm-lightbox-close,.ocm-lightbox-prev,.ocm-lightbox-next{
	position:absolute;background:none;border:1px solid var(--border);color:var(--white);
	font-family:var(--font-ui);cursor:pointer;padding:10px 14px;
}
.ocm-lightbox-close{top:24px;right:24px;font-size:21px;}
.ocm-lightbox-prev{left:24px;top:50%;transform:translateY(-50%);font-size:23px;}
.ocm-lightbox-next{right:24px;top:50%;transform:translateY(-50%);font-size:23px;}
.ocm-lightbox-close:hover,.ocm-lightbox-prev:hover,.ocm-lightbox-next:hover{border-color:var(--gold);color:var(--gold);}

/* Press logos (block pattern) */
.ocm-press-logos img{max-height:56px;width:auto;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.75;transition:all .2s ease;}
.ocm-press-logos img:hover{filter:none;opacity:1;}

/* Social share */
.ocm-share-block{margin-top:20px;}
.ocm-share-label{
	margin:0 0 10px;font-family:var(--font-ui);font-weight:700;font-size:.78rem;
	text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
}
.ocm-share{display:flex;gap:10px;}
.ocm-share a,.ocm-share button{
	width:44px;height:44px;display:flex;align-items:center;justify-content:center;
	border:1px solid var(--border);color:var(--text);
	background:none;cursor:pointer;padding:0;position:relative;
}
.ocm-share a:hover,.ocm-share button:hover{border-color:var(--gold);color:var(--gold);}
.ocm-share svg{width:19px;height:19px;}
/* Popup dopo il click su Instagram (link copiato + bottone per aprire
   Instagram) — un solo pulsante Instagram nella riga, il resto compare
   solo dopo, dentro il popup. */
.ocm-share-instagram-wrap{position:relative;width:44px;height:44px;}
.ocm-share-instagram-popup{
	position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
	background:var(--surface);border:1px solid var(--border);border-radius:8px;
	padding:10px 12px;flex-direction:column;gap:6px;align-items:center;
	white-space:nowrap;z-index:20;
	display:none;
}
/* display:flex qui invece che sulla regola sopra: una regola con
   display:flex fisso batte sempre [hidden] (le regole del foglio di stile
   dell'autore vincono su quelle native del browser a prescindere dalla
   specificità) — così il popup resterebbe visibile anche con l'attributo
   hidden attivo, invece di comparire solo dopo il click. */
.ocm-share-instagram-popup:not([hidden]){display:flex;}
.ocm-share-instagram-popup span{
	font-family:var(--font-ui);font-size:.62rem;letter-spacing:.08em;
	text-transform:uppercase;color:var(--muted);
}
.ocm-share-instagram-popup a{
	width:auto;height:auto;border:none;padding:0;
	font-family:var(--font-ui);font-weight:700;font-size:.78rem;color:var(--gold);text-decoration:none;
}
.ocm-share-instagram-popup a:hover{color:var(--text);}

/* Bottom back-to-home button */
/* Box autore a fine articolo (foto + bio dal profilo utente). */
.ocm-author-box{
	display:flex;gap:20px;align-items:flex-start;margin-top:48px;padding:24px;
	background:var(--surface);border:1px solid var(--border);
}
.ocm-author-avatar{flex:0 0 auto;}
.ocm-author-avatar img{width:72px;height:72px;border-radius:50%;object-fit:cover;}
.ocm-author-info{min-width:0;}
.ocm-author-info p{margin:0;}
.ocm-author-label{
	font-family:var(--font-ui);font-weight:700;text-transform:uppercase;
	letter-spacing:.18em;font-size:.65rem;color:var(--gold);
}
.ocm-author-name{font-weight:700;font-size:1.1rem;margin:4px 0 8px;color:var(--text);}
.ocm-author-name a{color:inherit;}
.ocm-author-name a:hover{color:var(--gold);}
.ocm-author-bio{font-size:.95rem;line-height:1.7;color:var(--text-body);}
@media (max-width:540px){.ocm-author-box{flex-direction:column;gap:14px;padding:20px;}}

/* Pagina dell'autore (taxonomy-ocm_author.php). */
.ocm-author-hero{
	display:flex;gap:28px;align-items:center;margin-bottom:40px;padding-bottom:32px;
	border-bottom:1px solid var(--border);
}
.ocm-author-avatar--lg img{width:140px;height:140px;border-radius:50%;object-fit:cover;}
.ocm-author-hero-name{
	font-family:var(--font-body);font-weight:700;font-size:clamp(28px,4vw,42px);
	line-height:1.15;margin:6px 0 12px;color:var(--text);
}
.ocm-author-hero .ocm-author-bio{max-width:640px;}
@media (max-width:540px){.ocm-author-hero{flex-direction:column;align-items:flex-start;gap:18px;}}

.ocm-article-back{margin-top:40px;}
.ocm-article-back .ocm-btn{text-decoration:none;}
.ocm-article-back .ocm-btn:hover{text-decoration:none;}
.ocm-article-back .ocm-btn-arrow{display:inline-block;transition:transform .15s ease;}
.ocm-article-back .ocm-btn:hover .ocm-btn-arrow{transform:translateX(-3px);}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.ocm-footer{background:var(--footer-bg);border-top:1px solid var(--border);padding:56px 0 26px;color:var(--muted);}
.ocm-footer .container{max-width:1800px;padding:0 40px;}
.ocm-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px;}
@media (max-width:900px){.ocm-footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:540px){.ocm-footer-grid{grid-template-columns:1fr;}}
.ocm-footer h4{color:var(--text);font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.14em;font-size:.92rem;margin:0 0 16px;}
.ocm-footer ul{list-style:none;margin:0;padding:0;}
.ocm-footer li{margin-bottom:9px;}
.ocm-footer p{font-size:17px;}
.ocm-footer a{color:var(--muted);font-size:17px;}
.ocm-footer a:hover{color:var(--gold);}
.ocm-footer-bottom{
	border-top:1px solid var(--border);padding-top:22px;font-size:15px;
	display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
	font-family:var(--font-ui);letter-spacing:.04em;
}
.ocm-footer-bottom > span:first-child{justify-self:start;}
.ocm-footer-bottom > span:last-of-type{justify-self:center;}
.ocm-footer-wordmark{
	font-family:var(--font-ui);font-weight:800;letter-spacing:.04em;font-size:clamp(14px,1.6vw,20px);
	text-transform:uppercase;color:var(--text);white-space:nowrap;
}
.ocm-footer-wordmark span{color:var(--red);}
.ocm-footer-bottom-right{display:flex;align-items:center;gap:16px;justify-self:end;}
.ocm-footer-social{display:flex;align-items:center;gap:10px;}
.ocm-footer-social a{
	width:44px;height:44px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	color:var(--muted);border:1px solid var(--border);
}
.ocm-footer-social a:hover{color:var(--gold);border-color:var(--gold);}
.ocm-footer-social svg{width:19px;height:19px;}
@media (max-width:640px){
	.ocm-footer-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;}
	.ocm-footer-bottom-right{justify-self:center;}
}
.ocm-back-to-top{
	flex:0 0 auto;width:44px;height:44px;border-radius:50%;
	background:none;border:1px solid var(--border);color:var(--text);
	display:flex;align-items:center;justify-content:center;cursor:pointer;
	transition:border-color .15s ease,color .15s ease;
}
.ocm-back-to-top:hover{border-color:var(--gold);color:var(--gold);}
.ocm-back-to-top svg{width:19px;height:19px;}

/* Indicatore "scorri" fisso in basso, su ogni pagina — stessa identica
   animazione/palette del sito madre offroadclubmonaco.com (art-scroll-hint,
   rinominato ocm- per coerenza con le classi del tema): tre chevron dorati
   in cascata verso il basso, in loop. Opacità gestita da JS in main.js
   (updateScrollHint), non da una classe: resta visibile finché c'è
   contenuto sotto da scorrere, sparisce a fine pagina. Non interattivo
   (pointer-events:none) — solo indicatore visivo, non un pulsante. */
.ocm-scroll-hint{
	position:fixed;bottom:clamp(10px,1.8vh,20px);left:50%;transform:translateX(-50%);
	display:flex;flex-direction:column;align-items:center;gap:2px;
	z-index:40;pointer-events:none;opacity:0;transition:opacity .5s ease;
}
.ocm-scroll-hint svg polyline{stroke:var(--gold);}
:root[data-theme="light"] .ocm-scroll-hint svg polyline{stroke:var(--gold-dark);}
.ocm-scroll-hint svg{
	width:28px;height:13px;opacity:0;
	filter:drop-shadow(0 1px 4px rgba(0,0,0,.55));
	animation:ocm-scroll-hint-cascade 1.8s ease-in-out infinite;
}
.ocm-scroll-hint svg:nth-child(1){animation-delay:0s;}
.ocm-scroll-hint svg:nth-child(2){animation-delay:.28s;}
.ocm-scroll-hint svg:nth-child(3){animation-delay:.56s;}
@keyframes ocm-scroll-hint-cascade{
	0%{opacity:0;transform:translateY(-4px);}
	40%{opacity:1;transform:translateY(3px);}
	80%{opacity:.2;transform:translateY(7px);}
	100%{opacity:0;transform:translateY(9px);}
}
@media (prefers-reduced-motion:reduce){
	.ocm-scroll-hint svg{animation:none;opacity:1;}
}

/* Generic archive/search pages (no full filter grid) */
.ocm-section{padding:56px 0;}
.ocm-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;border-bottom:1px solid var(--border);padding-bottom:14px;}
.ocm-section-title h2{font-family:var(--font-body);font-size:23px;text-transform:uppercase;letter-spacing:.04em;margin:0;}
.ocm-section-title h2 span{color:var(--red);}
.ocm-empty{padding:80px 24px;text-align:center;color:var(--muted);}

/* -------------------------------------------------------------------------
 * Redazione (masthead): elenco firme scritto come testo normale nel corpo
 * pagina (Titolo=nome, Paragrafo=bio, ripetuti) — nessun meccanismo
 * custom, solo tipografia per farlo leggere come un elenco di persone.
 * ---------------------------------------------------------------------- */
.ocm-masthead{max-width:740px;margin:0 auto;padding:0 24px;}
.ocm-masthead-head{text-align:center;padding:0 0 40px;border-bottom:1px solid var(--border);margin-bottom:40px;}
.ocm-masthead-head h1{font-family:var(--font-body);font-weight:700;font-size:clamp(28px,4vw,44px);margin:10px 0 18px;}
.ocm-masthead-direttore{
	font-family:var(--font-body);font-size:22px;letter-spacing:.01em;color:var(--muted);margin:0;
}
.ocm-masthead-direttore strong{color:var(--gold);}
.ocm-masthead-body h2,
.ocm-masthead-body h3{
	font-family:var(--font-body);font-weight:700;font-size:20px;margin:36px 0 6px;
}
.ocm-masthead-body h2:first-child,
.ocm-masthead-body h3:first-child{margin-top:0;}
.ocm-masthead-body p{
	font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--text-body);margin:0 0 8px;
}
.ocm-pagination{display:flex;gap:8px;justify-content:center;padding:32px 0 0;font-family:var(--font-ui);}
.ocm-pagination a,.ocm-pagination span{border:1px solid var(--border);color:var(--text);padding:8px 14px;font-size:13px;}
.ocm-pagination .current{background:var(--red);color:var(--white);border-color:var(--red);}

/* Margine laterale ridotto solo su mobile: 24px -> 16px. Ogni sezione ha
   il proprio padding invece di appoggiarsi tutta a .container, quindi va
   ripetuto qui — tocca solo la componente orizzontale, l'eventuale
   spaziatura verticale di ciascuna regola resta quella originale. */
@media (max-width:640px){
	.container{padding:0 16px;}
	.ocm-subnav-track{padding:8px 16px;}
	.ocm-hero-content{padding:80px 16px 48px;}
	.ocm-constellation-content{padding:0 16px 40px;}
	.ocm-article-subnav{padding:24px 16px;}
	.ocm-article-hero-content{padding:64px 16px;}
	.ocm-page-header{padding:64px 16px 0;}
	.ocm-article-body{padding:64px 16px 40px;}
	.ocm-masthead{padding:0 16px;}
	.ocm-empty{padding:80px 16px;}
}