/*
Theme Name:   Gioielleria Sottovia Luigi
Description:  Tema di gioielleriasottovialuigi.it, rifatto da zero (ottobre 2026). Figlio di Twenty Twenty-Five, senza plugin: dati negozio, modulo con coda email e antispam nel tema.
Template:     twentytwentyfive
Version:      2.0.0
Requires PHP: 8.1
Text Domain:  sottovia
*/

/* Colori, font e misure stanno in theme.json; qui quello che theme.json non sa fare. */

:root {
	--sv-oro: var(--wp--preset--color--accent-1);
	--sv-linea: var(--wp--preset--color--accent-5);
	--sv-pietra: var(--wp--preset--color--accent-4);
	--sv-ombra: 0 1px 2px rgb(31 29 26 / .05), 0 14px 32px -18px rgb(31 29 26 / .35);
}

body { -webkit-font-smoothing: antialiased; }
img { height: auto; }
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--sv-oro);
	outline-offset: 3px;
}
.sv-main { padding-block: 0; }
.sv-main > .wp-block-post-content > :last-child { margin-bottom: 0; }

/* --- Testata ----------------------------------------------------------- */
/* sticky sul contenitore del template part: dentro, la testata non avrebbe spazio per "restare" */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 20; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.sv-testata {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--sv-linea);
	padding-block: .6rem;
}
.sv-testata__logo img { width: clamp(84px, 9vw, 112px); height: auto; }
.sv-nav { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; gap: 1.6rem; }
.sv-nav a { text-decoration: none; color: var(--wp--preset--color--contrast); padding-block: .3rem; }
.sv-nav a:hover, .sv-nav .current-menu-item > a { color: var(--wp--preset--color--accent-2); }
.sv-nav .current-menu-item > a { box-shadow: inset 0 -1px 0 var(--sv-oro); }
.sv-nav__cta > a { border: 1px solid var(--wp--preset--color--contrast); padding: .55rem 1.1rem !important; }
.sv-nav__cta > a:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base) !important; }
/* menu aperto (mobile): avorio, voci a sinistra in serif, filetti fra una e l'altra */
.sv-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 2rem;
	/* WP allinea il menu aperto come quello desktop (a destra): qui a sinistra */
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-justify: flex-start;
	text-align: left;
}
.sv-nav .is-menu-open .wp-block-navigation-item { align-items: stretch !important; }
.sv-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; align-items: stretch !important; }
.sv-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; align-items: stretch !important; }
.sv-nav .is-menu-open .wp-block-navigation-item { border-bottom: 1px solid var(--sv-linea); width: 100%; }
.sv-nav .is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: .9rem 0 !important;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.7rem;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500;
}
.sv-nav .is-menu-open .sv-nav__cta { border-bottom: 0; margin-top: 1.5rem; }
.sv-nav .is-menu-open .sv-nav__cta > a {
	text-align: center;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: .85rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 1rem !important;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base) !important;
}

/* --- Elementi ricorrenti ------------------------------------------------ */
.sv-occhiello {
	font-size: .78rem !important;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--accent-2);
	margin-bottom: .6rem !important;
}
.sv-sezione { padding-block: var(--wp--preset--spacing--60); margin-block: 0 !important; }
.sv-sezione--sabbia { background: var(--wp--preset--color--accent-3); }
.sv-sezione--scura { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.sv-sezione--scura :is(h1, h2, h3) { color: var(--wp--preset--color--base); }
.sv-sezione--scura .sv-occhiello { color: var(--sv-oro); }
.sv-sezione--scura a:not(.wp-element-button) { color: #E7C98F; }
.sv-sezione--scura .wp-element-button { background: var(--sv-oro); color: var(--wp--preset--color--contrast); }
.sv-sezione--scura .wp-element-button:hover { background: var(--wp--preset--color--base); }
.sv-filetto { width: 56px; border: 0; border-top: 1px solid var(--sv-oro) !important; margin: 1.2rem 0 !important; opacity: 1; }
.is-style-outline > .wp-element-button,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
}

/* --- Home: apertura ----------------------------------------------------- */
.sv-apertura {
	min-height: min(86vh, 760px) !important;
	margin-block: 0 !important;
	padding: var(--wp--preset--spacing--60) clamp(1rem, 4vw, 2.5rem) !important;
}
/* il contenitore interno della cover si stringe sul contenuto e si ancora in basso a sinistra:
   lo si porta sulla stessa griglia di 1200 px delle sezioni */
.sv-apertura .wp-block-cover__inner-container { width: 100% !important; max-width: 1200px; margin-inline: auto !important; }
.sv-apertura .wp-block-cover__inner-container > .alignwide { max-width: none; margin-inline: 0; }
.sv-apertura h1 { color: #fff; font-weight: 400; max-width: 14ch; }
.sv-apertura .sv-occhiello { color: #E7C98F; }
.sv-apertura p { max-width: 38ch; font-size: 1.15rem; }

/* --- Schede (Gioielli / Orologi / Regali) -------------------------------- */
.sv-schede { gap: clamp(1rem, 3vw, 2rem) !important; }
.sv-schede + .sv-schede { margin-top: clamp(1rem, 3vw, 2rem) !important; }
.sv-scheda {
	background: #fff;
	box-shadow: var(--sv-ombra);
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}
.sv-scheda .wp-block-image { margin: 0; overflow: hidden; }
.sv-scheda .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .6s ease; }
.sv-scheda:hover .wp-block-image img { transform: scale(1.04); }
.sv-scheda__testo { padding: 1.4rem 1.5rem 1.6rem !important; flex: 1; }
.sv-scheda h3 { margin: 0 0 .5rem; }
.sv-scheda h3 a { text-decoration: none; color: inherit; }
.sv-scheda h3 a::after { content: " →"; color: var(--sv-oro); }

/* --- Servizi ------------------------------------------------------------ */
.sv-servizi { gap: 2rem 2.5rem !important; }
.sv-servizio { border-top: 1px solid var(--sv-oro); padding-top: 1rem !important; }
.sv-servizio h3 { font-size: 1.35rem; margin: 0 0 .35rem; }
.sv-servizio p { margin: 0; color: var(--sv-pietra); }
.sv-sezione--scura .sv-servizio p { color: #CFC6B6; }

/* galleria del negozio (/azienda/): foto originali piccole, quindi ritaglio 3:2 e niente ingrandimento oltre la colonna */
.sv-galleria.wp-block-gallery { gap: clamp(0.5rem, 1.5vw, 1rem); margin-top: var(--wp--preset--spacing--40); }
/* :not(#sv) pareggia la specificita' del core (is-cropped ... :not(#individual-image)), che su mobile allunga le foto */
.sv-galleria.wp-block-gallery.has-nested-images figure.wp-block-image:not(#sv) img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }

/* --- Marchi ------------------------------------------------------------- */
.sv-marchi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 2.5rem;
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-style: italic;
}
.sv-marchi li { position: relative; }
.sv-marchi li + li::before { content: "◆"; position: absolute; left: -1.5rem; top: .55em; font-size: .45em; color: var(--sv-oro); font-style: normal; }

/* --- Immagine + testo --------------------------------------------------- */
.sv-media .wp-block-media-text__media img { aspect-ratio: 5 / 4; object-fit: cover; }
/* testo a filo della griglia dal lato esterno, distacco solo verso l'immagine */
.sv-media .wp-block-media-text__content { padding: 0 0 0 clamp(1.5rem, 5vw, 4rem) !important; }
.sv-media.has-media-on-the-right .wp-block-media-text__content { padding: 0 clamp(1.5rem, 5vw, 4rem) 0 0 !important; }

/* --- Testata delle pagine interne -------------------------------------- */
.sv-testata-pagina {
	position: relative;
	display: grid;
	/* altezza fissa: senza, la foto a tutta larghezza detta l'altezza e riempie lo schermo */
	height: clamp(260px, 42vh, 440px);
	overflow: hidden;
	color: #fff;
	margin: 0 !important;
	max-width: none !important;
	background: var(--wp--preset--color--contrast);
}
.sv-testata-pagina > * { grid-area: 1 / 1; }
.sv-testata-pagina__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; opacity: .55; }
.sv-testata-pagina__testo {
	align-self: end;
	/* stessa griglia delle sezioni: 1200 px meno il padding laterale della pagina */
	padding-block: var(--wp--preset--spacing--50);
	width: min(1200px, 100% - 2 * clamp(1rem, 4vw, 2.5rem));
	margin-inline: auto;
	box-sizing: border-box;
	position: relative;
}
.sv-testata-pagina h1 { color: #fff; margin: 0; font-weight: 400; }
.sv-testata-pagina p { margin: .5rem 0 0; max-width: 52ch; font-size: 1.1rem; color: #EFE7DA; }
.sv-testata-pagina--semplice { background: var(--wp--preset--color--accent-3); color: inherit; height: auto; }
.sv-testata-pagina--semplice h1 { color: var(--wp--preset--color--contrast); }
.sv-testata-pagina--semplice p { color: var(--sv-pietra); }

/* --- Contatti, orari ---------------------------------------------------- */
.sv-contatti, .sv-orari { list-style: none; padding: 0; margin: 0; }
.sv-contatti { margin-block: 1.2rem !important; }
.sv-contatti li { margin-bottom: .9rem; }
.sv-contatti span, .sv-orari dt {
	display: block;
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sv-pietra);
}
.sv-contatti a { text-decoration: none; color: inherit; }
.sv-contatti a:hover { color: var(--wp--preset--color--accent-2); text-decoration: underline; }
.sv-orari div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--sv-linea); }
.sv-orari dt { font-size: .8rem; letter-spacing: .06em; text-transform: none; font-weight: 600; color: inherit; }
.sv-orari dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sv-orari__chiuso { color: var(--sv-pietra); }
.sv-orari__nota { margin-top: .8rem; font-weight: 600; color: var(--wp--preset--color--accent-2); }

/* --- Mappa al clic ------------------------------------------------------ */
.sv-mappa { position: relative; box-sizing: border-box; width: 100%; height: clamp(300px, 45vw, 520px); background: var(--wp--preset--color--accent-3); border: 1px solid var(--sv-linea); }
.sv-mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sv-mappa__invito { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 1.5rem; gap: .2rem; }
.sv-mappa__invito p { margin: 0 auto .6rem; max-width: 44ch; font-size: .95rem; }

/* --- Modulo ------------------------------------------------------------- */
.sv-modulo { background: #fff; padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: var(--sv-ombra); }
.sv-modulo p { margin: 0 0 1.1rem; }
.sv-modulo label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .05em; margin-bottom: .35rem; }
.sv-modulo__facoltativo { font-weight: 400; color: var(--sv-pietra); }
.sv-modulo :is(input[type=text], input[type=email], input[type=tel], select, textarea) {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	padding: .75rem .85rem;
	border: 1px solid var(--sv-linea);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: inherit;
}
.sv-modulo :is(input, select, textarea):focus { border-color: var(--sv-oro); outline: none; box-shadow: 0 0 0 3px rgb(184 134 47 / .2); }
.sv-modulo [aria-invalid=true] { border-color: #A3352B; }
.sv-modulo__riga--due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.sv-modulo__privacy { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.sv-modulo__privacy input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--accent-2); }
.sv-modulo__privacy label { font-weight: 400; letter-spacing: 0; font-size: .9rem; }
.sv-modulo__privacy .sv-modulo__errore { grid-column: 1 / -1; }
.sv-modulo__errore { display: block; color: #A3352B; font-size: .85rem; margin-top: .3rem; }
.sv-modulo__avviso { border-left: 3px solid #A3352B; background: #FBF1EF; padding: .8rem 1rem; color: #7A231B; }
.sv-modulo__nota { font-size: .85rem; color: var(--sv-pietra); margin-bottom: 0 !important; }
.sv-modulo__trappola { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sv-modulo .cf-turnstile { margin-bottom: 1rem; }

/* --- Piè di pagina ------------------------------------------------------ */
.sv-piede {
	background: var(--wp--preset--color--contrast);
	color: #DCD3C3;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	margin-top: 0 !important;
}
.sv-piede a { color: #F1E9DB; }
.sv-piede__griglia { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem; }
.sv-piede__marchio img { width: 150px; height: auto; }
.sv-piede__marchio p { max-width: 30ch; margin-top: 1rem; }
.sv-piede__titolo { font-size: 1.4rem !important; color: #fff !important; margin: 0 0 1rem; }
.sv-piede .sv-contatti span { color: #A69C8B; }
.sv-piede .sv-orari div { border-color: #3A3631; }
.sv-piede .sv-orari__chiuso { color: #A69C8B; }
.sv-piede__fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; border-top: 1px solid #3A3631; margin-top: 2.5rem; padding-top: 1.2rem; font-size: .85rem; color: #A69C8B; }
.sv-piede__fondo p { margin: 0; }

/* --- Testi legali ------------------------------------------------------- */
.sv-legale h2 { font-size: 1.7rem; margin-top: 2.2rem; }
.sv-legale h3 { font-size: 1.25rem; margin-top: 1.6rem; }
.sv-legale table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sv-legale :is(th, td) { text-align: left; vertical-align: top; padding: .55rem .6rem; border-bottom: 1px solid var(--sv-linea); }
.sv-legale .sv-nota-revisione { background: var(--wp--preset--color--accent-3); padding: .8rem 1rem; font-size: .9rem; }

/* --- Esito invio, 404 --------------------------------------------------- */
.sv-esito, .sv-404 { text-align: center; padding-block: var(--wp--preset--spacing--70); }
.sv-esito .wp-block-buttons, .sv-404 .wp-block-buttons { justify-content: center; }

/* --- Schermi stretti ---------------------------------------------------- */
@media (max-width: 781px) {
	.sv-piede__griglia { grid-template-columns: 1fr; gap: 2rem; }
	.sv-modulo__riga--due { grid-template-columns: 1fr; }
	.sv-apertura { min-height: 72vh !important; }
}
@media (prefers-reduced-motion: reduce) {
	.sv-scheda .wp-block-image img { transition: none; }
}

/* niente spazio di blockGap fra testata, contenuto e piede: le sezioni hanno il loro */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.sv-apertura .wp-block-button:not(.is-style-outline) .wp-element-button { background: var(--sv-oro); color: var(--wp--preset--color--contrast); }
.sv-apertura .wp-block-button:not(.is-style-outline) .wp-element-button:hover { background: var(--wp--preset--color--base); }
.sv-apertura .is-style-outline .wp-element-button { color: #fff; }

/* fra 600 px (sotto parte l'hamburger di WordPress) e 1000 px il menu su una riga */
@media (min-width: 600px) and (max-width: 1000px) {
	.sv-nav { gap: .9rem; letter-spacing: .06em; font-size: .74rem; }
	.sv-nav .wp-block-navigation__container > li:first-child { display: none; } /* Home: c'è il logo */
	.sv-nav__cta > a { padding: .45rem .75rem !important; }
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 600px) {
	/* sotto i 600 px la barra admin scorre via: la testata va in cima */
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
	.sv-apertura .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.sv-apertura .wp-block-button, .sv-apertura .wp-element-button { width: 100%; text-align: center; }
	.sv-marchi { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; }
	.sv-marchi li + li::before { content: none; }
	.sv-media .wp-block-media-text__content,
	.sv-media.has-media-on-the-right .wp-block-media-text__content { padding: 1.5rem 0 0 !important; }
	.sv-orari div { gap: .5rem; }
	.sv-piede__fondo { flex-direction: column; }
	.sv-testata-pagina { height: clamp(220px, 34vh, 300px); }
	.sv-scheda .wp-block-image img { aspect-ratio: 16 / 10; }
	.sv-scheda__testo { padding: 1.1rem 1.2rem 1.3rem !important; }
	/* tabella cookie: una scheda per riga, etichetta della colonna davanti al valore */
	.sv-legale table, .sv-legale tbody, .sv-legale tr, .sv-legale td { display: block; width: 100%; box-sizing: border-box; }
	.sv-legale thead { display: none; }
	.sv-legale tr { border: 1px solid var(--sv-linea); margin-bottom: .8rem; padding: .4rem .2rem; }
	.sv-legale td { border: 0; padding: .3rem .6rem; }
	.sv-legale td::before { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--sv-pietra); }
	.sv-legale td:nth-child(1)::before { content: "Nome"; }
	.sv-legale td:nth-child(2)::before { content: "Fornitore"; }
	.sv-legale td:nth-child(3)::before { content: "Scopo"; }
	.sv-legale td:nth-child(4)::before { content: "Durata"; }
}