/*
Theme Name:     Geppetto Garda
Theme URI:      https://geppettogarda.com
Author:         Nat Milvio
Author URI:     https://github.com/nathron
Description:    Child theme custom per la casa vacanze Geppetto Garda — essenziale, lineare, pulito. Basato su Twenty Twenty-Five.
Template:       twentytwentyfive
Version:        0.1.6
Requires at least: 6.4
Tested up to:   6.7
Requires PHP:   8.2
License:        Proprietary
License URI:    https://geppettogarda.com
Text Domain:    geppetto-child
Tags:           hospitality, vacation-rental, multilingual, block-theme
*/

/*
 * Custom CSS for the Geppetto Garda child theme.
 *
 * For design tokens (colors, fonts, spacing) prefer theme.json over raw CSS.
 * This file is for layout/component CSS that can't be expressed declaratively
 * via theme.json or block-level styles.
 */

/* === Layout reset — margin-block-start ================================== */

/*
 * WordPress applica margin-block-start via le regole generate per
 * .is-layout-constrained > * + * e .is-layout-flow > * + *
 * (il valore è --wp--style--block-gap).
 * Le nostre sezioni sono full-width e gestiscono il ritmo verticale
 * internamente con padding — il gap esterno va azzerato.
 *
 * Si applica sia al OnePager (home) che alla pagina SEO Torri del Benaco.
 */
.geppetto-hero,
.geppetto-section,
.geppetto-seo-hero {
	margin-block-start: 0 !important;
	margin-block-end:   0 !important;
}

/*
 * WP aggiunge un margin-block-start (24px = block-gap default) al primo
 * figlio di <main> tramite il layout system. Lo azzeriamo qui perché le
 * nostre sezioni gestiscono il ritmo verticale internamente.
 */
main.wp-block-group,
.wp-site-blocks > main {
	margin-block-start: 0 !important;
}

/* === Header ============================================================== */

.geppetto-header {
	position: sticky;
	top: 0;
	z-index: 100;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background-color: rgba(255, 255, 255, 0.94);
}

.geppetto-header__right {
	gap: var(--wp--preset--spacing--40);
}

/* === Logo ================================================================= */

.geppetto-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--wp--preset--color--lago);
	transition: color 150ms ease;
}

.geppetto-logo:hover {
	color: var(--wp--preset--color--notte);
}

.geppetto-logo svg {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.geppetto-logo__wordmark {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--notte);
	line-height: 1;
}

.geppetto-logo--footer {
	color: var(--wp--preset--color--schiuma);
}

.geppetto-logo--footer .geppetto-logo__wordmark {
	color: var(--wp--preset--color--schiuma);
}

.geppetto-logo--footer:hover {
	color: var(--wp--preset--color--onda);
}

@media (max-width: 600px) {
	.geppetto-logo__wordmark {
		display: none;
	}
}

/* === Navigation =========================================================== */

/*
 * Il Navigation block WP carica wp-block-navigation.css solo se il blocco
 * è presente nella pagina. Da quando usiamo [geppetto_nav] (shortcode),
 * quel file non viene più incluso automaticamente: dobbiamo replicare qui
 * il layout essenziale (flex row, no bullets, reset padding/margin).
 */
.geppetto-nav {
	display: flex;
	align-items: center;
}

.geppetto-nav .wp-block-navigation__container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

.geppetto-nav .wp-block-navigation-item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.geppetto-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--notte);
	text-decoration: none;
	transition: color 150ms ease;
}

.geppetto-nav .wp-block-navigation-item__content:hover,
.geppetto-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--lago);
}

/* === Language switcher ==================================================== */

.geppetto-lang-switcher {
	display: inline-flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.85rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.geppetto-lang-switcher li {
	margin: 0;
}

.geppetto-lang-switcher a {
	color: var(--wp--preset--color--pietra);
	text-decoration: none;
	transition: color 150ms ease;
}

.geppetto-lang-switcher a:hover,
.geppetto-lang-switcher .current-lang a,
.geppetto-lang-switcher .current-lang {
	color: var(--wp--preset--color--lago);
}

/* === Footer =============================================================== */

.geppetto-footer {
	color: var(--wp--preset--color--schiuma);
}

.geppetto-footer h4 {
	color: var(--wp--preset--color--schiuma);
	margin-block-end: var(--wp--preset--spacing--20);
}

.geppetto-footer__cols {
	gap: var(--wp--preset--spacing--50);
}

.geppetto-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.geppetto-footer__list li {
	margin: 0 0 0.5rem;
}

.geppetto-footer__list a {
	color: var(--wp--preset--color--pietra);
	text-decoration: none;
	transition: color 150ms ease;
}

.geppetto-footer__list a:hover {
	color: var(--wp--preset--color--onda);
}

.geppetto-footer .geppetto-lang-switcher {
	flex-direction: column;
	gap: 0.5rem;
}

/* === Hero ================================================================= */

/*
 * Hero pattern — split 50/50 testo+immagine.
 * Markup: wp-content/themes/geppetto-child/patterns/hero.php
 *
 * Quasi tutta la tipografia (H1, font, weight, size) è ereditata da
 * theme.json. Qui solo finitura: vincoli di larghezza, ritmo verticale
 * fra elementi, trattamento immagine, comportamento responsive.
 */

.geppetto-hero__sub {
	color: var(--wp--preset--color--notte);
	max-width: 38ch;
	line-height: 1.5;
}

.geppetto-hero__headline {
	/* L'H1 eredita hero size + Manrope + weight 600 da theme.json. */
	max-width: 14ch;
}

.geppetto-hero__media .wp-block-image,
.geppetto-hero__image {
	margin: 0;
}

.geppetto-hero__image img {
	width: 100%;
	height: auto;
	display: block;
	/* Aspect ratio leggermente verticale, "ritratto del luogo".
	   Se la foto definitiva è orizzontale, rimuovere. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Sotto i 781px le Columns di WP impilano: testo sopra, immagine sotto.
   Liberiamo i max-width perché su mobile il vincolo non serve, e
   addolciamo l'aspect ratio dell'immagine per non allungare troppo. */
@media (max-width: 781px) {
	.geppetto-hero__headline,
	.geppetto-hero__sub {
		max-width: none;
	}
	.geppetto-hero__image img {
		aspect-ratio: 4 / 3;
	}
}

/* === Sezioni OnePager — comuni ============================================ */

/*
 * Tutte le sezioni del OnePager (Appartamento, Galleria, Posizione,
 * Prenota, Contatti) condividono la stessa struttura "header → body".
 * Qui le regole comuni; i blocchi specifici di sezione seguono sotto.
 */

/* Compensazione header sticky per gli ancore di navigazione: quando si
   clicca un link tipo #appartamento, lo scroll si ferma sotto l'header
   anziché far passare la prima riga sotto al menu. Valore approssimato
   all'altezza dell'header (logo 36px + padding) con un po' di aria. */
:root {
	--geppetto-header-offset: 88px;
}

.geppetto-section,
.geppetto-hero {
	scroll-margin-top: var(--geppetto-header-offset);
}

/* Header introduttivo di ogni sezione: kicker uppercase + h2 + lede.
   Tipografia ereditata da theme.json (h2 = Manrope 600 xx-large). */
.geppetto-section__intro {
	text-align: left;
}

.geppetto-section__kicker {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--lago);
	margin: 0 0 0.4rem;
}

.geppetto-section__lede {
	color: var(--wp--preset--color--notte);
	max-width: 50ch;
	line-height: 1.55;
	margin-top: 0.6rem;
}

/* === Sezione Appartamento ================================================= */

.geppetto-features {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: 2;
	column-gap: 2rem;
}

.geppetto-features li {
	margin: 0 0 0.7rem;
	padding-left: 1.2rem;
	position: relative;
	break-inside: avoid;
}

/* Bullet decorativo: piccolo trattino Lago, coerente con il "min" tono
   del resto della UI. */
.geppetto-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 0.7rem;
	height: 1px;
	background: var(--wp--preset--color--lago);
}

@media (max-width: 600px) {
	.geppetto-features {
		column-count: 1;
	}
}

/* === Sezione Galleria ===================================================== */

.geppetto-gallery {
	margin: 0;
}

.geppetto-gallery .wp-block-image img {
	transition: transform 250ms ease;
}

.geppetto-gallery .wp-block-image:hover img {
	transform: scale(1.02);
}

/* === Sezione Posizione ==================================================== */

.geppetto-poi {
	list-style: none;
	margin: 0;
	padding: 0;
}

.geppetto-poi li {
	margin: 0 0 0.5rem;
	padding-left: 1.2rem;
	position: relative;
	line-height: 1.5;
}

.geppetto-poi li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 0.7rem;
	height: 1px;
	background: var(--wp--preset--color--onda);
}

.geppetto-poi strong {
	font-weight: 500;
	color: var(--wp--preset--color--notte);
}

/* === Sezione Prenota — Vikey Booking Engine Widget ======================== */

/*
 * Wrapper del widget Vikey. max-width: 760px centra il calendario
 * nella sezione senza che diventi troppo largo su schermi grandi.
 * Il widget usa data-vikey-widget-width="full" e riempie questo contenitore.
 */
.geppetto-booking {
	max-width: 760px;
	margin-inline: auto;
}

/* Link OTA discreti sotto il widget */
.geppetto-section__channels {
	opacity: 0.7;
	transition: opacity 150ms ease;
}

.geppetto-section__channels:hover {
	opacity: 1;
}

/* === Sezione Contatti ===================================================== */

.geppetto-contacts {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.geppetto-contacts__item {
	min-width: 220px;
}

.geppetto-contacts a {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 500;
	color: var(--wp--preset--color--lago);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 150ms ease;
}

.geppetto-contacts a:hover {
	border-bottom-color: var(--wp--preset--color--lago);
}

.geppetto-contacts__item .geppetto-section__kicker {
	margin-bottom: 0.2rem;
}

/* === Pagina SEO Torri del Benaco ========================================== */

/*
 * Hero cover full-width con immagine panoramica e overlay notte.
 * Markup: wp-content/themes/geppetto-child/patterns/torri-del-benaco.php
 *
 * Il wp:cover centra il contenuto per default. Qui limitiamo la larghezza
 * del testo e aggiustiamo il responsive.
 */

.geppetto-seo-hero .wp-block-cover__inner-container {
	max-width: 860px;
	margin-inline: auto;
	width: 100%;
}

/* Card POI — immagini con aspect-ratio fisso per allineamento uniforme
   nelle 3 colonne della sezione "Cosa vedere". */

.geppetto-poi-card__img {
	margin: 0 0 1.2rem;
}

.geppetto-poi-card__img img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Immagini portrait nelle sezioni a sfondo colorato (Il Borgo, Cosa Fare,
   Come Arrivare): aspect-ratio 3/4 per bilanciare il testo nella colonna
   opposta. La classe è applicata al wp:image in ogni sezione --borgo,
   --fare, --arrivare. */

.geppetto-section__portrait-img {
	margin: 0;
}

.geppetto-section__portrait-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

@media (max-width: 781px) {
	.geppetto-section__portrait-img img {
		aspect-ratio: 4 / 3;
	}
}

/* Sezione L'appartamento — layout centrato, max-width 960px applicato
   già a livello di contentSize nel blocco. Nessuna regola extra necessaria. */

/* CTA finale — titolo e paragrafo con leggera riduzione di opacità sul sub. */

.geppetto-section--cta-finale p {
	opacity: 0.8;
}

/* Crediti immagini — separatore superiore sottile, testo discreto. */

.geppetto-credits {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--pietra) 30%, transparent);
}

.geppetto-credits p {
	line-height: 1.6;
}

.geppetto-credits a {
	color: var(--wp--preset--color--lago);
	text-decoration: none;
}

.geppetto-credits a:hover {
	text-decoration: underline;
}

/* === Lightbox triggers (GLightbox) ======================================= */

.geppetto-lightbox-trigger {
	display: block;
	cursor: zoom-in;
}

.geppetto-lightbox-trigger img {
	transition: opacity 0.2s ease;
}

.geppetto-lightbox-trigger:hover img {
	opacity: 0.92;
}

/* === Reduced motion ======================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}