@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap');
/* ==========================================================================
   OndaUp — stili child theme
   I colori/tipografia derivano da theme.json (var --wp--preset--*).
   Alias brevi per leggibilità qui sotto.
   ========================================================================== */

:root {
	/* Valori hex letterali: indipendenti dalle var palette di WP/Kadence
	   (che vivono a livello body e non cascadono su :root). */
	--ou-wave:        #1763FF;
	--ou-wave-deep:   #0B3FB0;
	--ou-accent:      #00C2A8;
	--ou-accent-deep: #009A86;
	--ou-ink:         #0F1B2D;
	--ou-ink-soft:    #41506B;
	--ou-bg:          #F7F8FB;
	--ou-surface:     #FFFFFF;
	--ou-line:        #E6E9F0;
	--ou-warm:        #FFF4E0;
	--ou-radius:      16px;
	--ou-shadow:      0 10px 30px rgba(15, 27, 45, .08);
	--ou-transition:  .15s ease;
}

/* ---- Font self-hosted (Inter variable) ---- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-variable.woff2') format('woff2');
}

/* ---- Base refinements ---- */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.entry-content { max-width: 70ch; }

/* Pagine Kadence "fullwidth" (homepage, money page, landing): libera il container
   così le sezioni alignfull + i gruppi constrained (1080px) si calcolano correttamente.
   Gli articoli normali restano stretti (70ch) per leggibilità. */
.content-width-fullwidth .entry-content,
.content-width-fullwidth .entry-content.single-content {
	max-width: 100%;
}

/* ==========================================================================
   HEADER sticky con blur (rifinisce l'header builder di Kadence)
   ========================================================================== */
.ou-sticky #masthead,
.ou-sticky .site-header-row-container {
	background: rgba(247, 248, 251, .85) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ou-line);
}

/* ==========================================================================
   BOTTONI
   ========================================================================== */
/* Bottoni brand: vale per .ou-btn, i bottoni core e il bottone header Kadence
   (così non dipendiamo dalla Global Palette di Kadence). */
.ou-btn,
.wp-block-button__link,
.header-button {
	background: var(--ou-wave);
	color: #fff;
	font-weight: 600;
	border-radius: 10px;
	line-height: 1.2;
	border: 0;
	transition: background var(--ou-transition), transform var(--ou-transition);
}
.ou-btn { display: inline-block; padding: 12px 22px; }
.ou-btn:hover,
.wp-block-button__link:hover,
.header-button:hover { background: var(--ou-wave-deep); color: #fff; transform: translateY(-1px); }

/* Variante outline (core "is-style-outline") = ghost brand. */
.wp-block-button.is-style-outline .wp-block-button__link,
.ou-btn--ghost {
	background: transparent; color: var(--ou-wave); border: 1px solid var(--ou-wave);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.ou-btn--ghost:hover { background: var(--ou-wave); color: #fff; }

/* Variante accento (verde acqua). */
.ou-btn--accent,
.wp-block-button.ou-btn--accent .wp-block-button__link { background: var(--ou-accent); color: #fff; }
.ou-btn--accent:hover,
.wp-block-button.ou-btn--accent .wp-block-button__link:hover { background: var(--ou-accent-deep); }

/* ==========================================================================
   HERO
   ========================================================================== */
.ou-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 8vw, 80px); }
.ou-hero::before {
	content: ""; position: absolute; top: -120px; right: -120px;
	width: 420px; height: 420px; border-radius: 50%;
	background: radial-gradient(circle, rgba(23, 99, 255, .12), transparent 70%);
	pointer-events: none;
}
.ou-eyebrow {
	display: inline-block; background: #e7efff; color: var(--ou-wave-deep);
	font-weight: 700; font-size: .8125rem; padding: 6px 14px; border-radius: 999px;
	letter-spacing: .02em;
}
.ou-hero h1 { max-width: 720px; }
.ou-hl {
	background: linear-gradient(120deg, var(--ou-wave), var(--ou-accent));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ou-hero__sub { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ou-ink-soft); max-width: 38ch; }
.ou-trust { font-size: .875rem; color: var(--ou-ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.ou-trust::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ou-accent); }

/* ---- Barra cadenza ---- */
.ou-cadence {
	display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ou-line);
	border-radius: 12px; overflow: hidden; background: var(--ou-surface); box-shadow: var(--ou-shadow);
}
.ou-cadence > * { padding: 14px 22px; font-weight: 600; font-size: .875rem; color: var(--ou-ink-soft); border-right: 1px solid var(--ou-line); }
.ou-cadence > *:last-child { border-right: 0; }
.ou-cadence strong { display: block; color: var(--ou-wave); font-size: .8125rem; }

/* ==========================================================================
   CARD articolo / tutorial
   ========================================================================== */
.ou-card {
	background: var(--ou-surface); border: 1px solid var(--ou-line); border-radius: var(--ou-radius);
	overflow: hidden; display: flex; flex-direction: column; height: 100%;
	transition: transform .18s ease, box-shadow .18s ease;
}
.ou-card:hover { transform: translateY(-3px); box-shadow: var(--ou-shadow); }
.ou-card__thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #dbe6ff, #d2f6ef); position: relative; }
.ou-badge {
	position: absolute; left: 14px; top: 14px; background: #fff; color: var(--ou-wave-deep);
	font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.ou-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.ou-card__meta { margin-top: 14px; font-size: .75rem; color: #8a96ab; font-weight: 500; }

/* ==========================================================================
   STACK / money page (blocco scuro)
   ========================================================================== */
.ou-tools {
	background: linear-gradient(135deg, #0f1b2d, #15294a); color: #fff;
	border-radius: 24px; padding: clamp(28px, 5vw, 44px); position: relative; overflow: hidden;
}
.ou-tools::after {
	content: ""; position: absolute; right: -80px; bottom: -100px; width: 340px; height: 340px;
	border-radius: 50%; background: radial-gradient(circle, rgba(0, 194, 168, .25), transparent 70%);
}
.ou-tools .ou-eyebrow { background: rgba(255, 255, 255, .12); color: #cfe0ff; }
.ou-tools h2, .ou-tools p { position: relative; }
.ou-tools__lead { color: #b9c6dd; max-width: 52ch; }
.ou-tool {
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px; padding: 18px; height: 100%;
}
.ou-tool__ico {
	width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
	font-weight: 800; background: linear-gradient(135deg, var(--ou-wave), var(--ou-accent)); margin-bottom: 12px;
}
.ou-tool .ou-tag { font-size: .75rem; color: var(--ou-accent); font-weight: 700; letter-spacing: .03em; }
.ou-tool p { font-size: .875rem; color: #b9c6dd; }

/* ==========================================================================
   NOTIZIE AI — la mia lettura
   ========================================================================== */
.ou-news-item {
	border-left: 3px solid var(--ou-accent); background: var(--ou-surface);
	border: 1px solid var(--ou-line); border-left: 3px solid var(--ou-accent);
	border-radius: 12px; padding: 18px 20px;
}
.ou-news-item .ou-take { color: var(--ou-ink-soft); font-size: .9375rem; }
.ou-news-item .ou-take strong { color: var(--ou-accent-deep); }

/* ==========================================================================
   NEWSLETTER + lead magnet
   ========================================================================== */
.ou-leadmagnet {
	background: var(--ou-warm); border: 1px dashed #f0c87a; border-radius: 12px;
	padding: 14px 16px; font-weight: 600; color: #7a5512; font-size: .9375rem;
}
.ou-form input[type="text"], .ou-form input[type="email"] {
	width: 100%; padding: 14px 16px; border: 1px solid var(--ou-line); border-radius: 10px; font-size: 1rem;
}
.ou-form small { color: #8a96ab; font-size: .75rem; }
.ou-checklist { list-style: none; padding-left: 0; }
.ou-checklist li { padding: 6px 0; font-size: 1.05rem; }

/* ==========================================================================
   COMPONENTI ARTICOLO: CTA affiliazione + disclosure
   ========================================================================== */
.ou-affiliate-cta {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	background: #f3f7ff; border: 1px solid #d6e4ff; border-radius: 14px; padding: 18px 20px;
}
.ou-affiliate-cta strong { color: var(--ou-ink); }
.ou-disclosure {
	background: var(--ou-bg); border: 1px solid var(--ou-line); border-radius: 12px;
	padding: 14px 16px; font-size: .8125rem; color: var(--ou-ink-soft);
}

/* ==========================================================================
   MONEY PAGE — schede tool
   ========================================================================== */
.ou-pill {
	display: inline-block; vertical-align: middle; margin-left: 8px;
	background: #e7efff; color: var(--ou-wave-deep);
	font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.ou-pro { color: var(--ou-accent-deep); }
.ou-con { color: #b15b3a; }
.ou-pro strong, .ou-con strong { display: block; font-size: .8125rem; letter-spacing: .02em; }
.ou-stack-tool { box-shadow: var(--ou-shadow); }

/* ==========================================================================
   CTA newsletter fine articolo
   ========================================================================== */
.ou-news-cta { position: relative; overflow: hidden; }
.ou-news-cta::after {
	content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px;
	border-radius: 50%; background: radial-gradient(circle, rgba(0,194,168,.25), transparent 70%);
}
.ou-news-cta > * { position: relative; }

/* ==========================================================================
   ABOUT strip
   ========================================================================== */
.ou-about__avatar {
	width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
	color: #fff; font-weight: 800; font-size: 1.6rem;
	background: linear-gradient(135deg, var(--ou-wave), var(--ou-accent));
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ou-footer-disclosure { max-width: 760px; margin: 0 auto 10px; font-size: .8125rem; line-height: 1.6; opacity: .85; }
.ou-footer-disclosure a { text-decoration: underline; }
.ou-footer-copy { font-size: .8125rem; opacity: .7; }

/* ==========================================================================
   Accessibilità: focus visibile
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, .ou-btn:focus-visible {
	outline: 3px solid var(--ou-accent); outline-offset: 2px;
}



/* === ONDA UP DESIGN TOKENS — setup design (rimovibile) === */
:root{--ou-bg:#FFFFFF;--ou-bg-soft:#F7F9FB;--ou-text:#1A2233;--ou-text-muted:#5B6573;--ou-primary:#0E7490;--ou-primary-dark:#0B5C73;--ou-cta:#FF6B35;--ou-cta-dark:#E85A28;--ou-pro:#16A34A;--ou-con:#DC2626;--ou-border:#E5E7EB;--ou-star:#F5A623;--ou-font-head:'Sora','Segoe UI',system-ui,sans-serif;--ou-font-body:'Inter','Segoe UI',system-ui,sans-serif;--ou-radius:12px;--ou-radius-sm:8px;--ou-shadow:0 1px 3px rgba(26,34,51,.06),0 6px 24px rgba(26,34,51,.06);--ou-shadow-sm:0 1px 2px rgba(26,34,51,.08);--ou-wave:#0E7490;--ou-wave-deep:#0B5C73;--ou-accent:#FF6B35;--ou-accent-deep:#E85A28;--ou-indigo:#0E7490;}
.ou-verdict{background:#fff;border:1px solid var(--ou-border);border-top:4px solid var(--ou-primary);border-radius:var(--ou-radius);box-shadow:var(--ou-shadow);padding:22px 24px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin:1.5em 0}.ou-verdict__score{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ou-primary);color:#fff;border-radius:var(--ou-radius-sm);width:84px;height:84px;line-height:1}.ou-verdict__score b{font-family:var(--ou-font-head);font-size:30px}.ou-verdict__score small{font-size:12px;opacity:.85;margin-top:3px}.ou-verdict__body h3{margin:0 0 4px;font-size:20px}.ou-verdict__body p{margin:0;color:var(--ou-text-muted)}.ou-stars{color:var(--ou-star);letter-spacing:1px;margin-bottom:6px}
.ou-table-wrap{overflow-x:auto;border:1px solid var(--ou-border);border-radius:var(--ou-radius);margin:1.5em 0}table.ou-compare{border-collapse:collapse;width:100%;min-width:520px}.ou-compare th,.ou-compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--ou-border)}.ou-compare thead th{background:var(--ou-bg-soft);font-family:var(--ou-font-head);font-size:14px}.ou-compare tbody tr:last-child td{border-bottom:0}.ou-compare td:first-child,.ou-compare th:first-child{font-weight:600}.ou-compare .best{color:var(--ou-primary);font-weight:700}.ou-tick{color:var(--ou-pro);font-weight:700}.ou-cross{color:var(--ou-con);font-weight:700}
.ou-proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.5em 0}.ou-card{background:#fff;border:1px solid var(--ou-border);border-radius:var(--ou-radius);padding:18px 20px}.ou-card h4{margin:0 0 12px;font-size:16px}.ou-card ul{margin:0;padding:0;list-style:none}.ou-card li{position:relative;padding:6px 0 6px 26px;color:var(--ou-text)}.ou-card li::before{position:absolute;left:0;top:6px;font-weight:700}.ou-pros{border-top:4px solid var(--ou-pro)}.ou-pros h4{color:var(--ou-pro)}.ou-pros li::before{content:'\2713';color:var(--ou-pro)}.ou-cons{border-top:4px solid var(--ou-con)}.ou-cons h4{color:var(--ou-con)}.ou-cons li::before{content:'\2013';color:var(--ou-con)}
.ou-tested{display:flex;gap:14px;align-items:flex-start;background:#EEF6F8;border:1px solid #CDE6EC;border-left:4px solid var(--ou-primary);border-radius:var(--ou-radius-sm);padding:16px 18px;margin:1.5em 0}.ou-tested__badge{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--ou-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}.ou-tested b{font-family:var(--ou-font-head)}.ou-tested p{margin:2px 0 0;color:var(--ou-text-muted)}
.ou-author{display:flex;gap:18px;background:#fff;border:1px solid var(--ou-border);border-radius:var(--ou-radius);box-shadow:var(--ou-shadow);padding:22px 24px;align-items:center;margin:1.5em 0}.ou-author__pic{flex:0 0 auto;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--ou-primary),#15A0BE);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--ou-font-head);font-weight:700;font-size:26px}.ou-author__b small{text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--ou-primary);font-weight:700}.ou-author__b h4{margin:2px 0 6px;font-size:18px}.ou-author__b p{margin:0;color:var(--ou-text-muted)}
.ou-toc{background:#fff;border:1px solid var(--ou-border);border-radius:var(--ou-radius);padding:18px 20px;box-shadow:var(--ou-shadow-sm);margin:1.5em 0}.ou-toc b{font-family:var(--ou-font-head);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ou-text-muted);display:block;margin-bottom:10px}.ou-toc ol{margin:0;padding-left:18px}.ou-toc li{padding:4px 0}@media(min-width:1024px){.ou-toc--sticky{position:sticky;top:32px}}
.ou-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:1.5em 0}.ou-rcard{background:#fff;border:1px solid var(--ou-border);border-radius:var(--ou-radius);overflow:hidden;box-shadow:var(--ou-shadow-sm);transition:transform .15s,box-shadow .15s;text-decoration:none;display:block}.ou-rcard:hover{transform:translateY(-3px);box-shadow:var(--ou-shadow)}.ou-rcard__img{height:120px;background:linear-gradient(135deg,#0E7490,#15A0BE)}.ou-rcard__b{padding:14px 16px}.ou-rcard__tag{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ou-cta);font-weight:700}.ou-rcard__b h4{margin:6px 0 0;font-size:16px;line-height:1.3;color:var(--ou-text)}
@media(max-width:640px){.ou-verdict{grid-template-columns:auto 1fr}.ou-proscons{grid-template-columns:1fr}}

/* Onda Up buttons — unico sistema teal+arancio */
.wp-block-button.ou-btn,.wp-block-button.ou-btn--accent{background:transparent!important;padding:0!important;box-shadow:none!important;border:0!important}
.wp-block-button.ou-btn .wp-block-button__link{background:var(--ou-wave)!important;color:#fff!important;border-radius:var(--ou-radius-sm)!important}
.wp-block-button.ou-btn--accent .wp-block-button__link{background:var(--ou-accent)!important;color:#10233f!important}
.wp-block-button.ou-btn .wp-block-button__link:hover{background:var(--ou-wave-deep)!important}
.wp-block-button.ou-btn--accent .wp-block-button__link:hover{background:var(--ou-accent-deep)!important}
/* submit override teal — batte var(--ou-indigo)!important */
input[type=submit],input[type=button],button[type=submit],button.ou-btn,.ou-btn.button,.wp-block-button__link.ou-btn{background:var(--ou-wave)!important;color:#fff!important;border-color:var(--ou-wave)!important}
input[type=submit]:hover,button[type=submit]:hover,button.ou-btn:hover{background:var(--ou-wave-deep)!important}
button.ou-btn--accent,.ou-btn--accent[type=submit]{background:var(--ou-accent)!important;color:#10233f!important}
/* submit override v2 — specificità alta per battere inline !important */
html body input[type=submit],html body button[type=submit],html body button.ou-btn,html body .ou-btn.button{background:var(--ou-wave)!important;color:#fff!important;border-color:var(--ou-wave)!important}
html body input[type=submit]:hover,html body button[type=submit]:hover,html body button.ou-btn:hover{background:var(--ou-wave-deep)!important}
html body button.ou-btn--accent,html body .ou-btn--accent[type=submit]{background:var(--ou-accent)!important;color:#10233f!important}
/* === fine ONDA UP DESIGN TOKENS === */