/*
Theme Name: Golf Beach Punta Ala
Theme URI: https://golfbeachpuntaala.com
Description: Tema child di Blocksy per Golf Beach Punta Ala: beach club, ristorante ALTomaRe e Terrazza Rooftop. Palette, tipografia e componenti del brand. Le funzionalita applicative stanno nel plugin golfbeach-core.
Author: Altomare SRL
Author URI: https://golfbeachpuntaala.com
Template: blocksy
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: golfbeach
Tags: hospitality, restaurant, beach-club
*/

/* ==========================================================================
   Golf Beach Punta Ala - stili globali
   I token colore e tipografia arrivano da theme.json (--wp--preset--*).
   Qui: alias brevi, componenti di brand, override mirati sul tema padre.
   ========================================================================== */

:root {
	--gb-sabbia: var(--wp--preset--color--sabbia, #faf6f6);
	--gb-greige: var(--wp--preset--color--greige, #e4dede);
	--gb-corallo: var(--wp--preset--color--corallo, #ff6464);
	--gb-corallo-scuro: var(--wp--preset--color--corallo-scuro, #d63b3b);
	--gb-notte: var(--wp--preset--color--notte, #071f1b);
	--gb-blu-ala: var(--wp--preset--color--blu-ala, #1b2a4a);
	--gb-tramonto: var(--wp--preset--color--tramonto, #ffb48a);
	--gb-bianco: var(--wp--preset--color--bianco, #ffffff);

	--gb-display: var(--wp--preset--font-family--display, "Belleza", "Optima", "Palatino", serif);
	--gb-testo: var(--wp--preset--font-family--testo, "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

	--gb-focus: 2px solid var(--gb-blu-ala);
	--gb-transizione: 300ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* --- Tipografia: vince sul Customizer del tema padre ---------------------- */

body,
.entry-content,
.wp-site-blocks {
	font-family: var(--gb-testo);
	font-synthesis-weight: none;
}

h1, h2, h3, h4,
.wp-block-heading,
.gb-display {
	font-family: var(--gb-display);
	font-weight: 400;
	letter-spacing: 0.005em;
	line-height: 1.1;
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/* --- Eyebrow: sopratitolo di sezione -------------------------------------- */

.gb-eyebrow {
	font-family: var(--gb-testo);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gb-blu-ala);
	margin-block-end: var(--wp--preset--spacing--30, 1rem);
}

.has-notte-background-color .gb-eyebrow,
.gb-sezione-scura .gb-eyebrow {
	color: var(--gb-tramonto);
}

/* --- Divisore orizzonte ---------------------------------------------------- */

.gb-orizzonte {
	position: relative;
	height: 1px;
	background: var(--gb-greige);
	border: 0;
	margin-block: var(--wp--preset--spacing--60, 4rem);
}

.gb-orizzonte::after {
	content: "";
	position: absolute;
	inset-block-start: -5px;
	inset-inline-start: max(1.5rem, 12%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gb-tramonto);
}

/* --- Texture cabana: le righe della tenda, bordo alto di sezione ----------- */

.gb-cabana {
	position: relative;
	padding-block-start: calc(12px + var(--wp--preset--spacing--50, 3rem));
}

.gb-cabana::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 12px;
	background-image: repeating-linear-gradient(
		90deg,
		var(--gb-greige) 0,
		var(--gb-greige) 14px,
		transparent 14px,
		transparent 28px
	);
}

.gb-sezione-scura.gb-cabana::before {
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.22) 0,
		rgba(255, 255, 255, 0.22) 14px,
		transparent 14px,
		transparent 28px
	);
}

/* --- Sezione scura --------------------------------------------------------- */

.gb-sezione-scura {
	background-color: var(--gb-notte);
	color: var(--gb-sabbia);
}

/* Su fondo scuro i titoli devono schiarirsi: il tema padre darebbe loro
   il colore da fondo chiaro, e resterebbero illeggibili. */
.gb-sezione-scura :is(h1, h2, h3, h4, h5, h6),
.gb-sezione-scura :is(h1, h2, h3, h4, h5, h6) a,
.gb-sezione-scura .wp-block-heading,
.gb-sezione-scura p,
.gb-sezione-scura li,
.gb-sezione-scura strong,
.gb-sezione-scura summary {
	color: var(--gb-sabbia);
}

/* Se in una sezione scura si sceglie un colore dalla tavolozza, quello vince. */
.gb-sezione-scura .has-text-color {
	color: inherit;
}

.gb-sezione-scura .has-tramonto-color { color: var(--gb-tramonto); }
.gb-sezione-scura .has-corallo-color { color: var(--gb-corallo); }
.gb-sezione-scura .has-notte-color { color: var(--gb-notte); }
.gb-sezione-scura .has-sabbia-color { color: var(--gb-sabbia); }

.gb-sezione-scura a:not(.wp-block-button__link):not(.gb-bottone) {
	color: var(--gb-tramonto);
}

/* --- Pulsanti -------------------------------------------------------------- */

.wp-block-button__link,
.gb-bottone {
	border-radius: 4px;
	font-family: var(--gb-testo);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--s, 1rem);
	letter-spacing: 0.01em;
	line-height: 1.2;
	padding: 0.9em 1.6em;
	text-decoration: none;
	transition: background-color var(--gb-transizione), color var(--gb-transizione), border-color var(--gb-transizione);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background),
.gb-bottone--primario {
	background-color: var(--gb-corallo);
	color: var(--gb-notte);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover,
.gb-bottone--primario:hover,
.gb-bottone--primario:focus-visible {
	background-color: var(--gb-corallo-scuro);
	color: var(--gb-bianco);
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.gb-bottone--secondario {
	background-color: transparent;
	border: 1px solid currentColor;
	color: inherit;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.gb-bottone--secondario:hover,
.gb-bottone--secondario:focus-visible {
	background-color: var(--gb-notte);
	border-color: var(--gb-notte);
	color: var(--gb-sabbia);
}

.gb-sezione-scura .gb-bottone--secondario:hover,
.gb-sezione-scura .gb-bottone--secondario:focus-visible {
	background-color: var(--gb-sabbia);
	border-color: var(--gb-sabbia);
	color: var(--gb-notte);
}

/* --- Link di testo --------------------------------------------------------- */

.entry-content a:not(.wp-block-button__link):not(.gb-bottone) {
	color: var(--gb-blu-ala);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.entry-content a:not(.wp-block-button__link):not(.gb-bottone):hover {
	color: var(--gb-corallo-scuro);
}

/* --- Immagini: bordo netto, hover discreto -------------------------------- */

.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: 0;
}

.gb-foto-hover img {
	transition: transform var(--gb-transizione);
}

.gb-foto-hover:hover img {
	transform: scale(1.02);
}

.gb-foto-hover {
	overflow: hidden;
}

/* --- Card ------------------------------------------------------------------ */

.gb-card {
	background: var(--gb-bianco);
	border: 1px solid var(--gb-greige);
	transition: box-shadow var(--gb-transizione), transform var(--gb-transizione);
}

.gb-card:hover {
	box-shadow: 0 8px 24px rgba(7, 31, 27, 0.08);
}

/* --- Accessibilita --------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--gb-focus);
	outline-offset: 3px;
}

.gb-skip-link:focus {
	background: var(--gb-notte);
	color: var(--gb-sabbia);
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: 0.75rem 1.25rem;
	position: fixed;
	z-index: 100000;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* --- Reveal on scroll: una volta sola, discreto ---------------------------- */

.gb-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 400ms ease-out, transform 400ms ease-out;
	will-change: opacity, transform;
}

.gb-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.gb-reveal,
	.gb-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.gb-foto-hover img,
	.wp-block-button__link,
	.gb-bottone,
	.gb-card {
		transition: none;
	}

	.gb-foto-hover:hover img {
		transform: none;
	}
}

/* --- Icone ----------------------------------------------------------------- */

.gb-icona {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	color: var(--gb-blu-ala);
	flex: none;
}

.gb-sezione-scura .gb-icona {
	color: var(--gb-tramonto);
}

/* --- Testata: il logo parla da solo -------------------------------------- */

/* Il nome del sito scritto accanto al logo non serve: il logo lo dice gia'. */
.site-title-container,
.site-title,
.site-description {
	display: none !important;
}

.site-logo-container img,
.ct-header [data-id="logo"] img {
	max-height: 78px;
	width: auto;
	transition: max-height 300ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* In home il marchio si prende piu' spazio: e' la prima cosa che si vede. */
.home .site-logo-container img,
.home .ct-header [data-id="logo"] img {
	max-height: 92px;
}

@media (max-width: 999px) {
	.site-logo-container img,
	.ct-header [data-id="logo"] img,
	.home .site-logo-container img,
	.home .ct-header [data-id="logo"] img {
		max-height: 56px;
	}
}

/* --- Voci del menu che si comportano da pulsante ------------------------- */

.gb-menu-cta {
	display: flex;
	align-items: center;
}

.gb-menu-cta > a {
	height: auto !important;
	align-self: center;
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 0.5em 1.05em !important;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.25;
	white-space: nowrap;
}

/* Blocksy sottolinea le voci al passaggio: sui pulsanti non serve. */
.gb-menu-cta > a::before,
.gb-menu-cta > a::after {
	display: none !important;
}

.gb-menu-cta--pieno > a {
	background-color: var(--gb-corallo);
	border-color: var(--gb-corallo);
	color: var(--gb-notte) !important;
}

.gb-menu-cta--pieno > a:hover,
.gb-menu-cta--pieno > a:focus-visible {
	background-color: var(--gb-corallo-scuro);
	border-color: var(--gb-corallo-scuro);
	color: var(--gb-bianco) !important;
}

.gb-menu-cta:not(.gb-menu-cta--pieno) > a {
	border-color: var(--gb-greige);
	color: var(--gb-notte) !important;
}

.gb-menu-cta:not(.gb-menu-cta--pieno) > a:hover,
.gb-menu-cta:not(.gb-menu-cta--pieno) > a:focus-visible {
	background-color: var(--gb-notte);
	border-color: var(--gb-notte);
	color: var(--gb-sabbia) !important;
}

@media (max-width: 999px) {
	.gb-menu-cta {
		display: block;
	}

	.gb-menu-cta > a {
		display: inline-block;
		margin-block: 0.4rem;
	}
}

/* Nel pannello del menu su telefono il fondo e' scuro:
   il pulsante col solo contorno deve schiarirsi, o sparisce. */
#offcanvas .gb-menu-cta:not(.gb-menu-cta--pieno) > a,
.ct-panel .gb-menu-cta:not(.gb-menu-cta--pieno) > a {
	border-color: rgba(250, 246, 246, 0.55);
	color: var(--gb-sabbia, #faf6f6) !important;
	background-color: transparent;
}

#offcanvas .gb-menu-cta:not(.gb-menu-cta--pieno) > a:hover,
#offcanvas .gb-menu-cta:not(.gb-menu-cta--pieno) > a:focus-visible,
.ct-panel .gb-menu-cta:not(.gb-menu-cta--pieno) > a:hover,
.ct-panel .gb-menu-cta:not(.gb-menu-cta--pieno) > a:focus-visible {
	background-color: var(--gb-sabbia, #faf6f6);
	border-color: var(--gb-sabbia, #faf6f6);
	color: var(--gb-notte, #071f1b) !important;
}

/* Quello pieno resta corallo con testo scuro: sul nero si legge benissimo. */
#offcanvas .gb-menu-cta--pieno > a,
.ct-panel .gb-menu-cta--pieno > a {
	background-color: var(--gb-corallo, #ff6464);
	border-color: var(--gb-corallo, #ff6464);
	color: var(--gb-notte, #071f1b) !important;
}