/* ABAB · la cornice del sito: intestazione, menu, barra in basso, piè di pagina. */

body.abab-chrome {
	--ac-yellow: #FBDA5A;
	--ac-ink: #1D1B16;
	--ac-paper: #FFFBEA;
	--ac-muted: #3A372E;
	--ac-red: #8E1B14;
	--ac-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--ac-body: 'Barlow', system-ui, sans-serif;
	background: var(--ac-yellow);
}

/* Le intestazioni e i piè di pagina disegnati in Elementor, ora sostituiti dalla cornice. */
body.abab-chrome:not(.elementor-editor-active) .elementor[data-elementor-type="wp-page"] > .e-con:first-child,
body.abab-chrome:not(.elementor-editor-active) .elementor[data-elementor-type="wp-page"] > .e-con:last-child {
	display: none !important;
}

.abab-chrome .abab-ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.abab-chrome .abab-ic .abab-f { fill: currentColor; stroke: none; }

.abab-skip { position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--ac-ink); color: var(--ac-yellow); padding: 10px 14px; border-radius: 4px; font: 700 16px var(--ac-cond); text-decoration: none; }
.abab-skip:focus { top: 8px; }
#abab-main { outline: none; }

/* Intestazione */
.abab-site-head { position: sticky; top: 0; z-index: 900; background: var(--ac-yellow); border-bottom: 3px solid var(--ac-ink); }
.admin-bar .abab-site-head { top: 32px; }
.abab-site-head-in { max-width: 1080px; margin: 0 auto; min-height: 58px; padding: 6px 16px; display: flex; align-items: center; gap: 16px; }
.abab-brand { display: flex; align-items: center; gap: 8px; color: var(--ac-ink) !important; text-decoration: none !important; font: 800 24px/1 var(--ac-cond); letter-spacing: 1px; margin-right: auto; }
.abab-brand img { width: 26px; height: auto; display: block; }
.abab-topnav { display: none; align-items: center; gap: 4px; }
.abab-topnav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--ac-ink) !important; text-decoration: none !important; font: 600 17px/1 var(--ac-cond); letter-spacing: .02em; cursor: pointer; border-radius: 4px; }
.abab-topnav-link:hover { background: rgba(29, 27, 22, .08); }
.abab-topnav-link.is-on { box-shadow: inset 0 -3px 0 var(--ac-ink); border-radius: 0; }
.abab-topnav-link .abab-ic { width: 20px; height: 20px; }
.abab-head-cta { display: none; align-items: center; min-height: 44px; padding: 0 16px; background: var(--ac-ink); color: var(--ac-yellow) !important; text-decoration: none !important; border-radius: 4px; font: 800 17px/1 var(--ac-cond); letter-spacing: .04em; text-transform: uppercase; }
.abab-head-cta:hover { background: #000; }
.abab-menu-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 2px solid var(--ac-ink); border-radius: 4px; background: var(--ac-paper); color: var(--ac-ink); font: 700 16px/1 var(--ac-cond); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }

/* Menu a tendina «Chi siamo» (computer) */
.abab-drop { position: relative; }
.abab-drop-btn .abab-ic { width: 16px; height: 16px; transition: transform .15s ease; }
.abab-drop-btn[aria-expanded="true"] .abab-ic { transform: rotate(180deg); }
.abab-drop-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--ac-paper); border: 2px solid var(--ac-ink); border-radius: 6px; padding: 6px; box-shadow: 4px 4px 0 var(--ac-ink); }
.abab-drop-menu[hidden] { display: none; }
.abab-drop-menu a { display: block; padding: 10px 12px; border-radius: 4px; color: var(--ac-ink) !important; text-decoration: none !important; font: 500 16px/1.2 var(--ac-body); }
.abab-drop-menu a:hover, .abab-drop-menu a[aria-current] { background: var(--ac-yellow); }

/* Menu da telefono */
.abab-sheet { position: fixed; inset: 0; z-index: 1000; background: rgba(29, 27, 22, .55); display: flex; justify-content: flex-end; }
.abab-sheet[hidden] { display: none; }
.abab-sheet-panel { width: min(340px, 88vw); height: 100%; overflow-y: auto; background: var(--ac-paper); border-left: 3px solid var(--ac-ink); padding: 16px 18px 32px; }
.abab-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.abab-sheet-title { font: 800 26px/1 var(--ac-cond); letter-spacing: 1px; color: var(--ac-ink); }
.abab-sheet-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ac-ink); border-radius: 4px; background: none; color: var(--ac-ink); cursor: pointer; }
.abab-sheet-label { margin: 18px 0 4px; font: 700 14px/1 var(--ac-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ac-muted); }
.abab-sheet-link { display: flex; align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px solid rgba(29, 27, 22, .15); color: var(--ac-ink) !important; text-decoration: none !important; font: 600 20px/1.2 var(--ac-cond); }
.abab-sheet-link[aria-current] { text-decoration: underline !important; text-underline-offset: 4px; }
.abab-sheet-link.is-report { color: var(--ac-red) !important; border-bottom: 0; margin-top: 8px; }

/* Barra in basso (telefono) */
.abab-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; background: var(--ac-ink); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-top: 3px solid var(--ac-ink); }
.abab-tab-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; color: #E9E3CC !important; text-decoration: none !important; font: 600 13px/1 var(--ac-cond); letter-spacing: .03em; border-radius: 6px; }
.abab-tab-link .abab-ic { width: 24px; height: 24px; }
.abab-tab-link.is-on { color: var(--ac-yellow) !important; }
.abab-tab-link.is-on span { text-decoration: underline; text-underline-offset: 3px; }
.abab-tab-link.is-main { background: var(--ac-yellow); color: var(--ac-ink) !important; border: 2px solid var(--ac-yellow); margin: 0 4px; font-weight: 800; text-transform: uppercase; }
.abab-tab-link.is-main.is-on span { text-decoration: none; }
body.abab-chrome { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* Piè di pagina */
.abab-site-foot { background: var(--ac-ink); color: #E9E3CC; padding: 36px 16px 40px; }
.abab-site-foot-in { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.abab-foot-claim { display: flex; align-items: center; gap: 14px; }
.abab-foot-claim img { width: 40px; height: auto; filter: drop-shadow(0 0 0 transparent); }
.abab-foot-claim p { margin: 0; font: 800 24px/1.05 var(--ac-cond); text-transform: uppercase; color: var(--ac-yellow); }
.abab-foot-cols { display: grid; grid-template-columns: 1fr; gap: 24px; }
.abab-foot-col { display: flex; flex-direction: column; gap: 2px; }
.abab-foot-h { margin: 0 0 6px; font: 700 14px/1 var(--ac-cond); letter-spacing: .06em; text-transform: uppercase; color: #B8B19A; }
.abab-foot-col a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: #FFFBEA !important; text-decoration: none !important; font: 500 17px/1.2 var(--ac-body); }
.abab-foot-col a:hover { color: var(--ac-yellow) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.abab-foot-col a.abab-foot-report { color: var(--ac-yellow) !important; font-weight: 600; }
.abab-foot-col a.abab-foot-coffee { align-self: flex-start; background: var(--ac-yellow); color: var(--ac-ink) !important; padding: 0 16px; border-radius: 4px; font: 800 17px/1 var(--ac-cond); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.abab-foot-col a.abab-foot-coffee:hover { text-decoration: none !important; background: #fff; }
.abab-foot-note { margin: 0; font: 400 14px/1.45 var(--ac-body); color: #B8B19A; border-top: 1px solid #3A372E; padding-top: 16px; }
.abab-foot-note a { color: #FFFBEA !important; }

/* Telefono: meno strada prima del contenuto. */
@media (max-width: 767px) {
	.abab-chrome.abab-p-home .elementor[data-elementor-type="wp-page"] > .e-con:nth-child(2) .elementor-widget-image,
	.abab-chrome.abab-p-home .elementor[data-elementor-type="wp-page"] > .e-con:nth-child(2) .elementor-widget-text-editor,
	.abab-chrome.abab-p-home .elementor[data-elementor-type="wp-page"] > .e-con:nth-child(2) .elementor-widget-button,
	.abab-chrome.abab-p-sfogati .elementor[data-elementor-type="wp-page"] > .e-con:nth-child(2) .elementor-widget-image {
		display: none !important;
	}
	.abab-chrome.abab-p-home .elementor[data-elementor-type="wp-page"] > .e-con:nth-child(2),
	.abab-chrome.abab-p-sfogati .elementor[data-elementor-type="wp-page"] > .e-con:nth-child(2) {
		--padding-top: 14px !important;
		--padding-bottom: 4px !important;
		padding-top: 14px !important;
		padding-bottom: 4px !important;
	}
	.abab-chrome .abab-site-head { position: sticky; }
}

/* Computer */
@media (min-width: 768px) {
	.abab-topnav { display: flex; }
	.abab-head-cta { display: inline-flex; }
	.abab-menu-btn, .abab-tabbar { display: none; }
	body.abab-chrome { padding-bottom: 0; }
	.abab-foot-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 782px) { .admin-bar .abab-site-head { top: 0; } }

.abab-chrome a:focus-visible, .abab-chrome button:focus-visible { outline: 3px solid var(--ac-ink); outline-offset: 2px; }
.abab-site-foot a:focus-visible, .abab-tabbar a:focus-visible { outline-color: var(--ac-yellow); }
@media (prefers-reduced-motion: reduce) { .abab-drop-btn .abab-ic { transition: none; } }

/* Come nasce ABAB · invito a partecipare (sezione aggiunta dalla 1.9.1) */
.abab-chrome #partecipa { scroll-margin-top: 80px; }
.abab-chrome #partecipa ul { margin: 0; padding-left: 1.1em; display: grid; gap: 10px; }
.abab-chrome #partecipa li::marker { color: var(--ac-ink); }
.abab-chrome #partecipa a { color: var(--ac-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.abab-chrome [id] { scroll-margin-top: 80px; }

/* ABAB sul telefono (1.9.2) */
.abab-app { --ap-ink: #1D1B16; --ap-paper: #FFFBEA; --ap-yellow: #FBDA5A; --ap-muted: #3A372E; padding: 0; border: 3px solid var(--ap-ink); border-radius: 8px; background: var(--ap-paper); color: var(--ap-ink); width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 6px 6px 0 var(--ap-ink); font: 400 16px/1.45 'Barlow', system-ui, sans-serif; }
.abab-app::backdrop { background: rgba(29, 27, 22, .6); }
.abab-app-in { position: relative; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.abab-app-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ap-ink); border-radius: 4px; background: none; color: var(--ap-ink); cursor: pointer; }
.abab-app-head { display: flex; gap: 14px; align-items: flex-start; padding-right: 48px; }
.abab-app-head img { width: 56px; height: 56px; border-radius: 13px; border: 2px solid var(--ap-ink); flex: none; }
.abab-app-head h2 { margin: 2px 0 4px; font: 800 26px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; color: var(--ap-ink); }
.abab-app-head p { margin: 0; font-size: 15px; color: var(--ap-muted); }
.abab-app-v { display: flex; flex-direction: column; gap: 12px; }
.abab-app-v[hidden] { display: none; }
.abab-app-qr { display: grid; grid-template-columns: 148px 1fr; gap: 16px; align-items: center; background: var(--ap-yellow); border: 2px solid var(--ap-ink); border-radius: 6px; padding: 12px; }
.abab-app-qr svg { width: 148px; height: 148px; display: block; background: #fff; border-radius: 4px; }
.abab-app-qr p { margin: 0; font-size: 16px; }
.abab-app-or { margin: 4px 0 0; font-weight: 600; }
.abab-app-send { display: flex; flex-wrap: wrap; gap: 8px; }
.abab-app-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 2px solid var(--ap-ink); border-radius: 4px; background: var(--ap-paper); color: var(--ap-ink) !important; text-decoration: none !important; font: 700 16px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .02em; cursor: pointer; }
.abab-app-btn:hover { background: var(--ap-yellow); }
.abab-app-btn[hidden] { display: none; }
.abab-app-hint { margin: 0; font-size: 14px; color: var(--ap-muted); }
.abab-app-hint [data-abab-app-status] { color: var(--ap-ink); font-weight: 600; }
.abab-app-link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--ap-ink); font: 500 15px 'Barlow', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.abab-app-link[hidden] { display: none; }
.abab-app-go { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 0; border-radius: 6px; background: var(--ap-ink); color: var(--ap-yellow); font: 800 20px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.abab-app-steps { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: flex; flex-direction: column; gap: 10px; }
.abab-app-steps li { counter-increment: passo; display: grid; grid-template-columns: 28px 44px 1fr; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 2px solid var(--ap-ink); border-radius: 6px; }
.abab-app-steps li::before { content: counter(passo); font: 800 24px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-align: center; }
.abab-app-ico { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--ap-yellow); border-radius: 10px; }
.abab-app-warn { margin: 0; padding: 10px 12px; border-left: 4px solid var(--ap-ink); background: var(--ap-yellow); font-weight: 500; }
.abab-app-ok { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.abab-app-ok a { color: var(--ap-ink); font-weight: 600; }
.abab-app .abab-ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.abab-app .abab-ic .abab-f { fill: currentColor; stroke: none; }
.abab-app button:focus-visible, .abab-app a:focus-visible { outline: 3px solid var(--ap-ink); outline-offset: 2px; }
@media (max-width: 767px) {
	.abab-app { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 12px 12px 0 0; border-width: 3px 0 0; box-shadow: none; max-height: 92vh; }
	.abab-app-in { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
@media (max-width: 400px) { .abab-app-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* Gli accessi spariscono quando ABAB è già aperta come app. */
.abab-is-app [data-abab-app-entry], .abab-is-app [data-abab-install] { display: none !important; }
.abab-sheet-app { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 6px 0 4px; padding: 0 14px; border: 2px solid var(--ac-ink); border-radius: 6px; background: var(--ac-yellow); color: var(--ac-ink); font: 800 20px/1 var(--ac-cond); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.abab-foot-txt { margin: 0 0 8px; font: 400 15px/1.4 var(--ac-body); color: #E9E3CC; }
.abab-foot-appbtn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 2px solid var(--ac-yellow); border-radius: 4px; background: none; color: var(--ac-yellow); font: 800 17px/1 var(--ac-cond); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.abab-foot-appbtn:hover { background: var(--ac-yellow); color: var(--ac-ink); }
.abab-only-d { display: none; }
@media (min-width: 768px) {
	.abab-foot-cols { grid-template-columns: repeat(4, 1fr); }
	.abab-only-m { display: none; }
	.abab-only-d { display: inline; }
}

/* Beta (1.9.4): bollino in testata e guida in quattro passi */
.abab-site-head-in > .abab-brand:has(+ .abab-beta-badge) { margin-right: 0; }
.abab-beta-badge { margin-right: auto; align-self: center; transform: rotate(-4deg); border: 2px solid var(--ac-ink); background: var(--ac-ink); color: var(--ac-yellow); font: 800 13px/1 var(--ac-cond); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px 3px; border-radius: 3px; cursor: pointer; min-height: 0; }
.abab-beta-badge:hover { background: var(--ac-paper); color: var(--ac-ink); }
.abab-beta-dlg { --ap-ink: #1D1B16; --ap-paper: #FFFBEA; --ap-yellow: #FBDA5A; --ap-muted: #3A372E; padding: 0; border: 3px solid var(--ap-ink); border-radius: 8px; background: var(--ap-paper); color: var(--ap-ink); width: min(440px, calc(100vw - 24px)); box-shadow: 6px 6px 0 var(--ap-ink); font: 400 16px/1.45 'Barlow', system-ui, sans-serif; }
.abab-beta-dlg::backdrop { background: rgba(29, 27, 22, .6); }
.abab-beta-in { position: relative; padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.abab-beta-kicker { margin: 0; padding-right: 50px; display: flex; align-items: center; gap: 8px; font: 600 14px/1.2 'Barlow', system-ui, sans-serif; color: var(--ap-muted); }
.abab-beta-tag { background: var(--ap-ink); color: var(--ap-yellow); font: 800 12px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border-radius: 3px; transform: rotate(-4deg); }
.abab-beta-step { display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
.abab-beta-step[hidden] { display: none; }
.abab-beta-ico { width: 72px; height: 72px; border-radius: 16px; background: var(--ap-yellow); border: 2.5px solid var(--ap-ink); display: inline-flex; align-items: center; justify-content: center; }
.abab-beta-step h2 { margin: 4px 0 0; font: 800 28px/1.02 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; color: var(--ap-ink); outline: none; }
.abab-beta-step p { margin: 0; font-size: 17px; line-height: 1.45; }
.abab-beta-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 6px; }
.abab-beta-go { min-height: 48px; padding: 0 18px; border: 0; border-radius: 4px; background: var(--ap-ink); color: var(--ap-yellow); font: 800 18px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.abab-beta-alt, .abab-beta-mail { color: var(--ap-ink) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.abab-beta-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 2px solid var(--ap-ink); padding-top: 12px; }
.abab-beta-count { font: 700 15px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .04em; color: var(--ap-muted); }
.abab-beta-btns { display: flex; gap: 8px; }
.abab-beta-skip, .abab-beta-prev { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--ap-ink); font: 500 16px 'Barlow', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.abab-beta-skip[hidden], .abab-beta-prev[hidden], .abab-beta-next[hidden] { display: none; }
.abab-beta-next { min-height: 44px; padding: 0 18px; border: 2px solid var(--ap-ink); border-radius: 4px; background: var(--ap-yellow); color: var(--ap-ink); font: 800 17px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.abab-beta-dlg .abab-ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.abab-beta-dlg .abab-ic .abab-f { fill: currentColor; stroke: none; }
.abab-beta-dlg .abab-app-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ap-ink); border-radius: 4px; background: none; color: var(--ap-ink); cursor: pointer; }
.abab-beta-dlg button:focus-visible, .abab-beta-dlg a:focus-visible { outline: 3px solid var(--ap-ink); outline-offset: 2px; }
@media (max-width: 767px) {
	.abab-beta-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 12px 12px 0 0; border-width: 3px 0 0; box-shadow: none; }
	.abab-beta-in { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
.abab-beta-kicker a { color: var(--ap-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
