/*!
Theme Name: Opificio della Badante
Theme URI: https://opificiodellabadante.it/
Author: Basta Comunicazione
Author URI: https://bastacomunicazione.com/
Description: Tema custom per l'Opificio della Badante — Vermouth & Spirits. Tema standalone basato su Underscores, con design system a token, ACF e WooCommerce. Bianco caldo, tipografia editoriale italiana.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: opificio-della-badante
Tags: custom-logo, custom-menu, featured-images, translation-ready, e-commerce

Tema di Opificio della Badante. Basato su Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores è distribuito secondo i termini della licenza GNU GPL v2 o successiva.
*/

/*--------------------------------------------------------------
>>> INDICE:
----------------------------------------------------------------
# Design system (token in :root)
# Reset & box-sizing
# Base (body, tipografia, link, media, form)
# Helper globali (container, eyebrow, mono)
# Forme astratte con texture resina (shapes/blob)
# Utilities WP (accessibilità, allineamenti, caption, sticky)
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Design system (token in :root)
--------------------------------------------------------------*/
:root {
	--ts: 1; /* scala tipografica globale (hook per accessibilità) */

	/* Colori — palette "bianco caldo" */
	--odb-bg:        #f5f1e9; /* bianco caldo — sfondo principale */
	--odb-bg-deep:   #efe9de; /* crema scura — sfondo alternato */
	--odb-ink:       #1a1712; /* quasi-nero caldo — testo principale */
	--odb-ink-soft:  #6a6256; /* grigio-marrone — testo secondario / muted */
	--odb-hair:      #d9d1c2; /* beige — bordi */
	--odb-hair-soft: #e6dfd2; /* beige chiaro — bordi sottili */
	--odb-wine:      #6a2433; /* bordò — accento */

	/* Tipografia */
	--odb-font-display: "Cormorant", Georgia, serif;                     /* claim, lede, pull quote */
	--odb-font-title:   "Bricolage Grotesque", system-ui, sans-serif;    /* titoli sezione, nomi prodotto */
	--odb-font-sans:    "IBM Plex Mono", ui-monospace, "Courier New", monospace; /* corpo testo */
	--odb-font-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace; /* occhielli, nav, etichette */

	/* Spaziature e gabbia */
	--odb-pad:  clamp(20px, 5vw, 88px); /* padding inline globale */
	--odb-maxw: 1360px;                  /* larghezza massima gabbia */

	/* Easing */
	--odb-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Sistema di breakpoint (mobile-first, coerente su tutto il sito):
   sm 640px · md 900px (switch mobile ↔ desktop) · lg 1200px · xl 1600px
   (+ 1920px per la gabbia extra-larga).
   NB: le custom property non sono usabili nelle @media, quindi i valori sono
   letterali; usa SEMPRE queste soglie anche nelle pagine future. */

/* schermi grandi: allarga la gabbia di contenuto */
@media (min-width: 1600px) { :root { --odb-maxw: 1560px; } }
@media (min-width: 1920px) { :root { --odb-maxw: 1720px; } }


/*--------------------------------------------------------------
# Reset & box-sizing
--------------------------------------------------------------*/
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body { margin: 0; }


/*--------------------------------------------------------------
# Base (body, tipografia, link, media, form)
--------------------------------------------------------------*/
body {
	background: var(--odb-bg);
	color: var(--odb-ink);
	font-family: var(--odb-font-sans);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img,
svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--odb-ink); color: var(--odb-bg); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--odb-font-title);
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

/* Form: input leggibili col design system */
input, textarea, select, button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* Focus visibile da tastiera (accessibilità §11) */
:focus-visible {
	outline: 2px solid var(--odb-wine);
	outline-offset: 2px;
}


/*--------------------------------------------------------------
# Helper globali (container, eyebrow, mono)
--------------------------------------------------------------*/
.odb-wrap {
	width: 100%;
	max-width: var(--odb-maxw);
	margin-inline: auto;
	padding-inline: var(--odb-pad);
}

/* Occhiello / eyebrow — porta spesso la keyword focus: nel markup usa un heading
   quando serve, mantenendo questa classe (principio keyword-in-heading §9). */
.odb-eyebrow {
	font-family: var(--odb-font-mono);
	font-size: calc(.72rem * var(--ts));
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
	margin: 0;
}

.odb-mono { font-family: var(--odb-font-mono); }


/*--------------------------------------------------------------
# Forme astratte con texture resina (shapes/blob)
   La resina vive come TEXTURE dentro forme organiche riutilizzabili.
   Le texture sono immagini in libreria media: passate via ACF quando
   possibile; qui restano i soli pattern di forma.
--------------------------------------------------------------*/
.odb-shape {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.odb-blob  { border-radius: 71% 29% 57% 43% / 61% 47% 53% 39%; }
.odb-blob2 { border-radius: 36% 64% 33% 67% / 63% 38% 62% 37%; }
.odb-oval  { border-radius: 50%; }

/* marcatore piccolo di sezione */
.odb-marker {
	width: clamp(54px, 6vw, 84px);
	aspect-ratio: 1;
	flex: none;
}


/*--------------------------------------------------------------
# Utilities WP (accessibilità, allineamenti, caption, sticky)
--------------------------------------------------------------*/

/* Accessibilità — testo per soli screen reader */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Non mostrare l'outline sul target dello skip link. */
#primary[tabindex="-1"]:focus { outline: 0; }

/* Allineamenti (immagini/blocchi core) */
.alignleft {
	/*rtl:ignore*/
	float: left;
	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	/*rtl:ignore*/
	float: right;
	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Didascalie immagini */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	margin: 0 auto;
}

.wp-caption-text {
	text-align: center;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
	font-family: var(--odb-font-mono);
	font-size: calc(.72rem * var(--ts));
	color: var(--odb-ink-soft);
}

/* Post in evidenza / autore */
.sticky { display: block; }
.bypostauthor { display: block; }

/* Utility di visibilità */
.odb-is-hidden { display: none !important; }


/*--------------------------------------------------------------
# Header — topbar fissa (globale, su tutte le pagine)
--------------------------------------------------------------*/
.odb-topbar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px var(--odb-pad);
	border-bottom: 1px solid transparent;
	transition: background-color .4s var(--odb-ease), border-color .4s var(--odb-ease), padding .4s var(--odb-ease);
}
.odb-topbar.is-solid {
	border-bottom-color: var(--odb-hair);
	padding-top: 12px;
	padding-bottom: 12px;
}
/* Sfondo sfocato su uno pseudo-elemento: se il backdrop-filter stesse sulla topbar,
   creerebbe un containing block per i figli in position:fixed → il menu mobile
   a schermo intero resterebbe ancorato alla topbar invece che al viewport. */
.odb-topbar.is-solid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--odb-bg) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.odb-topbar__brand {
	display: flex;
	align-items: center;
	gap: 13px;
}
.odb-topbar__mark {
	height: 48px;
	width: auto;
	transition: height .4s var(--odb-ease);
}
.odb-topbar.is-solid .odb-topbar__mark { height: 40px; }
.odb-topbar__word {
	height: 38px;
	width: auto;
	transition: height .4s var(--odb-ease);
}
.odb-topbar.is-solid .odb-topbar__word { height: 32px; }

/* Gruppo destro: menu + carrello (+ hamburger su mobile) allineati a destra */
.odb-topbar__right {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.2vw, 36px);
}

.odb-topbar__nav { display: flex; align-items: center; }
.odb-nav {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 40px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.odb-nav a {
	font-family: var(--odb-font-mono);
	font-size: calc(.74rem * var(--ts));
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
	position: relative;
	padding: 6px 0;
	transition: color .3s var(--odb-ease);
	white-space: nowrap;
}
.odb-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1.5px;
	background: var(--odb-ink);
	transition: right .35s var(--odb-ease);
}
.odb-nav a:hover { color: var(--odb-ink); }
.odb-nav a:hover::after,
.odb-nav .current-menu-item > a::after,
.odb-nav .current_page_item > a::after { right: 0; }
.odb-nav .current-menu-item > a,
.odb-nav .current_page_item > a { color: var(--odb-ink); }

/* hamburger — nascosto da desktop */
.odb-topbar__toggle { display: none; }

@media (max-width: 899px) {
	.odb-topbar__toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		width: 44px;
		height: 44px;
		border: 0;
		background: transparent;
		cursor: pointer;
		padding: 0;
		position: relative;
		z-index: 60;
	}
	.odb-topbar__toggle-bar {
		display: block;
		width: 26px;
		height: 2px;
		background: var(--odb-ink);
		transition: transform .3s var(--odb-ease), opacity .3s var(--odb-ease);
	}
	.odb-topbar__toggle[aria-expanded="true"] .odb-topbar__toggle-bar:nth-child(2) { transform: translateY(4px) rotate(45deg); }
	.odb-topbar__toggle[aria-expanded="true"] .odb-topbar__toggle-bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

	.odb-topbar__nav {
		position: fixed;
		inset: 0;
		background: var(--odb-bg);
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transform: translateX(100%);
		transition: transform .4s var(--odb-ease);
		z-index: 49;
	}
	.odb-topbar__nav.is-open { transform: translateX(0); }
	.odb-nav {
		flex-direction: column;
		gap: clamp(24px, 5vh, 44px);
	}
	.odb-nav a { font-size: 1rem; }
}

@media (min-width: 900px) and (max-width: 1199px) {
	.odb-topbar { gap: 16px; }
	.odb-topbar__brand { gap: 10px; }
	.odb-topbar__mark { height: 36px; }
	.odb-topbar__word { height: 28px; }
	.odb-topbar.is-solid .odb-topbar__mark { height: 32px; }
	.odb-topbar.is-solid .odb-topbar__word { height: 25px; }
	.odb-nav { gap: clamp(10px, 1.5vw, 18px); }
	.odb-nav a { font-size: calc(.66rem * var(--ts)); letter-spacing: .06em; }
}


/*--------------------------------------------------------------
# Footer (globale, su tutte le pagine)
--------------------------------------------------------------*/
.odb-footer {
	padding-block: clamp(70px, 11vh, 140px) clamp(34px, 5vh, 56px);
	border-top: 1px solid var(--odb-hair);
}
.odb-footer__claim {
	font-family: var(--odb-font-display);
	font-weight: 500;
	font-size: calc(clamp(2rem, 7vw, 6rem) * var(--ts));
	line-height: .98;
	letter-spacing: -0.02em;
	margin: 0 0 clamp(40px, 7vh, 90px);
	text-wrap: balance;
}
.odb-footer__claim em { font-style: italic; }
.odb-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: start;
}
@media (min-width: 900px) {
	.odb-footer__grid { grid-template-columns: auto 1fr auto; }
}
.odb-footer__logo { height: 116px; width: auto; }
.odb-footer__col-title {
	font-family: var(--odb-font-mono);
	font-size: calc(.7rem * var(--ts));
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
	margin: 0 0 14px;
	font-weight: 700;
}
.odb-footer__col p,
.odb-footer__col a {
	font-size: calc(.96rem * var(--ts));
	line-height: 1.7;
	color: var(--odb-ink);
	display: block;
	margin: 0;
}
.odb-footer__col a:hover { color: var(--odb-ink-soft); }
.odb-footer__bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(48px, 8vh, 96px);
	padding-top: 20px;
	border-top: 1px solid var(--odb-hair-soft);
}
.odb-footer__bottom span {
	font-family: var(--odb-font-mono);
	font-size: calc(.68rem * var(--ts));
	letter-spacing: .06em;
	color: var(--odb-ink-soft);
}

/* Riga legale (privacy, cookie, condizioni) — menu "Footer — legale".
   Occupa una riga propria sotto copyright e disclaimer: il copyright è lungo e,
   sulla stessa riga, spingerebbe il disclaimer a capo. */
.odb-footer__legal {
	flex: 0 0 100%;
	margin-top: 14px;
}
.odb-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.odb-footer__legal-list a {
	font-family: var(--odb-font-mono);
	font-size: calc(.68rem * var(--ts));
	letter-spacing: .06em;
	color: var(--odb-ink-soft);
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color .25s var(--odb-ease), border-color .25s var(--odb-ease);
}
.odb-footer__legal-list a:hover {
	color: var(--odb-ink);
	border-bottom-color: var(--odb-hair);
}