/*
Theme Name: Semprebene Game Consulting
Theme URI: https://semprebene.it
Author: Roberto Semprebene
Author URI: https://linkedin.com/in/robertosemprebene
Description: Tema a blocchi su misura per Semprebene Game Consulting. Homepage variante 3a: fondo bianco, Archivo/Archivo Black, sistema a tre colori (crea = rosa, finanzia = blu, capire = arancio). Layout bloccato, testi e immagini modificabili dall'editor.
Requires at least: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: semprebene-gc
Tags: block-theme, one-column, custom-colors, custom-menu, editor-style, full-site-editing
*/

/* -------------------------------------------------------------------------
   1. Font
   I file dei font NON sono inclusi (vedi LEGGIMI.md).
   Route consigliata: Aspetto > Editor > Stili > Tipografia > Gestisci font,
   installa "Archivo" e "Archivo Black" (WordPress li scarica in locale).
   Route alternativa: metti i .woff2 in assets/fonts/ e togli il commento qui sotto.
   ------------------------------------------------------------------------- */

@font-face {
	font-family: 'Archivo';
	src: url('assets/fonts/archivo-variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Archivo Black';
	src: url('assets/fonts/archivo-black.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------------
   2. Variabili locali
   ------------------------------------------------------------------------- */

:root {
	--sgc-rosa: #cd1aa5;
	--sgc-blu: #0766ee;
	--sgc-arancio: #df5400;
	--sgc-verde: #007b01;
	--sgc-bordo: #eeeeee;
	--sgc-radius-card: 16px;
	--sgc-radius-media: 14px;
}

/* Colori esatti del mock su browser che supportano oklch.
   Sui browser che non lo supportano restano gli hex sopra. */
@supports (color: oklch(0.5 0.1 200)) {
	:root {
		--sgc-rosa: oklch(0.58 0.24 340);
		--sgc-blu: oklch(0.55 0.22 260);
		--sgc-arancio: oklch(0.62 0.2 50);
		--sgc-verde: oklch(0.5 0.18 145);
	}
}

/* -------------------------------------------------------------------------
   3. Testata
   ------------------------------------------------------------------------- */

.sgc-header {
	border-bottom: 1px solid var(--sgc-bordo);
}

.sgc-nav a {
	font-weight: 600;
	color: #444;
	text-decoration: none;
}

.sgc-nav a:hover {
	color: #161616;
	text-decoration: underline;
}

/* "Servizi" apre il sottomenu al click: WordPress lo rende come <button>,
   non come link. Va vestito a mano perché non eredita lo stile degli <a>. */
.sgc-nav .wp-block-navigation-submenu__toggle {
	font-weight: 600;
	color: #444;
	font-size: inherit;
	font-family: inherit;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.sgc-nav .wp-block-navigation-submenu__toggle:hover {
	color: #161616;
	text-decoration: underline;
}

/* Il pannello del sottomenu riprende la card dell'hero: bianco, raggio 12,
   stessa ombra. */
.sgc-nav.wp-block-navigation .wp-block-navigation__submenu-container {
	background: #fff;
	border: 1px solid var(--sgc-bordo);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	padding: 8px;
	min-width: 208px;
}

.sgc-nav.wp-block-navigation .wp-block-navigation__submenu-container a {
	padding: 9px 12px;
	border-radius: 8px;
}

.sgc-nav.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background: #f6f6f6;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   4. Hero — ritratto con card sovrapposta
   ------------------------------------------------------------------------- */

.sgc-portrait {
	position: relative;
	min-height: 340px;
	border-radius: 20px;
	overflow: hidden;
	background-image: linear-gradient(
		150deg,
		color-mix(in srgb, var(--sgc-rosa) 16%, transparent),
		color-mix(in srgb, var(--sgc-blu) 14%, transparent) 50%,
		color-mix(in srgb, var(--sgc-verde) 14%, transparent)
	);
}

.sgc-portrait .sgc-portrait__img {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

.sgc-portrait .sgc-portrait__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}

.sgc-portrait .sgc-portrait__card {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	background: #fff;
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.sgc-portrait__card .sgc-eyebrow {
	color: var(--sgc-blu);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.02em;
	margin: 0 0 6px;
}

.sgc-portrait__card p:last-child {
	margin-bottom: 0;
}

/* Nell'editor il blocco immagine dentro il ritratto va mostrato in flusso,
   altrimenti diventa impossibile selezionarlo per sostituirlo. */
.editor-styles-wrapper .sgc-portrait {
	min-height: 0;
}

.editor-styles-wrapper .sgc-portrait .sgc-portrait__img,
.editor-styles-wrapper .sgc-portrait .sgc-portrait__card {
	position: static;
	inset: auto;
}

/* -------------------------------------------------------------------------
   5. Card "Per chi lavoro"
   ------------------------------------------------------------------------- */

.sgc-card {
	position: relative;
	width: 100%;
	border-radius: var(--sgc-radius-card);
	border: 2px solid var(--sgc-bordo);
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	height: 100%;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Card cliccabile per intero.
   Il link vero è il titolo (h3 > a): lo screen reader annuncia un solo link
   con un testo sensato. Lo pseudo-elemento estende solo l'area di click. */
.sgc-card__title a {
	color: inherit;
	text-decoration: none;
}

.sgc-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.sgc-card:has(a:hover) {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

.sgc-card:has(a:focus-visible) {
	outline: 2px solid var(--sgc-blu);
	outline-offset: 3px;
}

.sgc-card__title a:focus-visible {
	outline: none;
}

/* Fallback per browser senza :has() — l'effetto resta sul solo titolo. */
.sgc-card__title a:hover {
	text-decoration: underline;
}

/* Nell'editor l'overlay va disattivato, altrimenti copre il paragrafo
   della card e diventa impossibile cliccarci dentro per scriverlo. */
.editor-styles-wrapper .sgc-card__title a::after {
	display: none;
}

.sgc-card--rosa { border-color: var(--sgc-rosa); }
.sgc-card--blu { border-color: var(--sgc-blu); }
.sgc-card--arancio { border-color: var(--sgc-arancio); }

/* Bordo bicolore: metà blu, metà arancio. Due background — uno dentro il
   padding-box, uno nel border-box — perché border-image ignora il raggio. */
.sgc-card--split {
	border: 2px solid transparent;
	background-image:
		linear-gradient(#fff, #fff),
		linear-gradient(90deg, var(--sgc-blu) 50%, var(--sgc-arancio) 50%);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: none;
}

.sgc-cards .wp-block-column {
	display: flex;
}

/* -------------------------------------------------------------------------
   6. Sezione Produzione — schede con key art
   ------------------------------------------------------------------------- */

/* Stesso meccanismo delle card "Per chi lavoro": la colonna è flex così le due
   schede restano alte uguali anche se una ha il badge Tax Credit e l'altra no.
   Su mobile si impilano a piena larghezza (width:100% sulla scheda). */
.sgc-prod-cols .wp-block-column {
	display: flex;
}

.sgc-prod {
	width: 100%;
	border: 1px solid var(--sgc-bordo);
	border-radius: var(--sgc-radius-card);
	overflow: hidden;
	background: #fff;
	height: 100%;
}

.sgc-prod__art {
	margin: 0;
}

.sgc-prod__art img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* Fallback per browser senza aspect-ratio: altezza fissa proporzionata. */
@supports not (aspect-ratio: 16 / 9) {
	.sgc-prod__art img {
		height: 200px;
	}
}

/* Badge "Tax Credit ottenuto": pillola verde, l'unico punto in cui il verde
   del sistema colori compare come elemento pieno e non come sfumatura. */
.sgc-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 11px;
	border-radius: 999px;
	color: #fff;
	background: var(--sgc-verde);
}

.sgc-link-forte a,
.sgc-link-forte {
	color: var(--sgc-blu);
	font-weight: 700;
	text-decoration: none;
}

.sgc-link-forte a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   7. Fascia "Dai due lati del bando" — credenziali valutatore + richiedente
   ------------------------------------------------------------------------- */

.sgc-stat__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--sgc-arancio);
	margin: 0 0 8px;
}

.sgc-stat__num {
	font-family: "Archivo Black", Archivo, system-ui, sans-serif;
	font-size: clamp(44px, 6vw, 66px);
	line-height: 1;
	margin: 0 0 6px;
}

.sgc-stat__label {
	font-size: 14px;
	line-height: 1.5;
	max-width: 22em;
}

/* Callout del lato richiedente: bordo sinistro blu = colore "finanzia".
   È il segnale visivo che questo è l'altro lato del tavolo. */
.sgc-applicant {
	border-left: 3px solid var(--sgc-blu);
	background: #f7f9ff;
	border-radius: 0 10px 10px 0;
}

/* -------------------------------------------------------------------------
   8. Fasi servizio (pagine pubblico)
   ------------------------------------------------------------------------- */

.sgc-phase__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--sgc-rosa);
}

.sgc-phase__proof {
	border-left: 3px solid var(--sgc-bordo);
	padding-left: 16px;
	line-height: 1.6;
	color: #444;
}

/* -------------------------------------------------------------------------
   9. Piè di pagina
   ------------------------------------------------------------------------- */

.sgc-footer {
	border-top: 1px solid var(--sgc-bordo);
	color: #777;
	font-size: 13px;
}

/* -------------------------------------------------------------------------
   10. Bottone secondario (contorno)
   ------------------------------------------------------------------------- */

/* Bottone Cal.com: è un <button>, non un <a>. Normalizzo i default del browser
   così eredita lo stile bottone del tema (sfondo, raggio, padding li dà
   .wp-element-button; qui aggiungo solo ciò che il <button> non prende da solo). */
.sgc-calbtn {
	cursor: pointer;
	border: 0;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px;
	border-color: #cccccc;
	color: #161616;
	background: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: #161616;
}

/* -------------------------------------------------------------------------
   11. Accessibilità e mobile
   ------------------------------------------------------------------------- */

:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--sgc-blu);
	outline-offset: 2px;
}

@media (max-width: 781px) {
	.sgc-portrait {
		min-height: 300px;
	}
}

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

/* 12. Link lingua "EN" in testata — discreto */
.sgc-nav .sgc-lang a {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 3px 8px;
    color: #555;
}
.sgc-nav .sgc-lang a:hover { border-color: #999; color: #161616; }

/* 13. Colore di riferimento per pagina servizio (intestazione + fasi).
   Studi indie = rosa · Aziende/Istituzioni = blu · Formazione = arancio.
   La classe .sgc-page-{slug} è aggiunta al body da functions.php. */

/* Studi indie → rosa */
.sgc-page-studi-indie .wp-block-post-title,
.sgc-page-studi-indie .sgc-phase__eyebrow { color: var(--sgc-rosa); }

/* Aziende → blu */
.sgc-page-aziende .wp-block-post-title,
.sgc-page-aziende .sgc-phase__eyebrow { color: var(--sgc-blu); }

/* Istituzioni → blu */
.sgc-page-istituzioni .wp-block-post-title,
.sgc-page-istituzioni .sgc-phase__eyebrow { color: var(--sgc-blu); }

/* Formazione → arancio */
.sgc-page-formazione .wp-block-post-title,
.sgc-page-formazione .sgc-phase__eyebrow { color: var(--sgc-arancio); }

/* 14. Menu overlay su mobile: le voci non devono toccare il bordo.
   Su desktop il menu resta allineato a destra (justifyContent:right);
   qui correggo solo l'overlay a schermo intero aperto su mobile. */
.sgc-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: 76px 28px 40px;
}
.sgc-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
}
.sgc-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	width: 100%;
}
/* sottomenu Servizi dentro l'overlay: niente allineamento a destra, niente taglio */
.sgc-nav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container {
	text-align: left;
}

/* 15. Numeri fantasma dietro le fasi (Studi indie, Aziende, Formazione).
   Grande cifra a bassa opacità nel colore pagina, come filigrana editoriale.
   CSS puro via nth-of-type: nessuna modifica al pattern.
   NON su Istituzioni (blocco unico, niente sequenza da numerare). */
.sgc-page-studi-indie .sgc-phase,
.sgc-page-aziende .sgc-phase,
.sgc-page-formazione .sgc-phase {
	position: relative;
	overflow: hidden;          /* evita overflow orizzontale su mobile */
	min-height: 190px;         /* garantisce che il numero fantasma ci stia tutto */
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sgc-page-studi-indie .sgc-phase > *,
.sgc-page-aziende .sgc-phase > *,
.sgc-page-formazione .sgc-phase > * {
	position: relative;
	z-index: 1;                /* il contenuto resta sopra il numero */
}
.sgc-page-studi-indie .sgc-phase::before,
.sgc-page-aziende .sgc-phase::before,
.sgc-page-formazione .sgc-phase::before {
	position: absolute;
	top: 50%;
	right: clamp(8px, 3vw, 40px);   /* staccato dal bordo, non a filo */
	transform: translateY(-50%);
	width: 2.2em;                    /* box a larghezza fissa: i '0' si incolonnano */
	text-align: right;
	font-family: "Archivo Black", var(--wp--preset--font-family--archivo, sans-serif);
	font-size: clamp(120px, 22vw, 240px);
	line-height: 1;
	font-weight: 900;
	opacity: 0.06;
	pointer-events: none;
	z-index: 0;
	user-select: none;
}
/* colore per pagina, coerente col sistema */
.sgc-page-studi-indie .sgc-phase::before { color: var(--sgc-rosa); }
.sgc-page-aziende .sgc-phase::before     { color: var(--sgc-blu); }
.sgc-page-formazione .sgc-phase::before  { color: var(--sgc-arancio); }
/* contenuto 01/02/03 per tutte e tre */
.sgc-page-studi-indie .sgc-phase:nth-of-type(1)::before,
.sgc-page-aziende .sgc-phase:nth-of-type(1)::before,
.sgc-page-formazione .sgc-phase:nth-of-type(1)::before { content: "01"; }
.sgc-page-studi-indie .sgc-phase:nth-of-type(2)::before,
.sgc-page-aziende .sgc-phase:nth-of-type(2)::before,
.sgc-page-formazione .sgc-phase:nth-of-type(2)::before { content: "02"; }
.sgc-page-studi-indie .sgc-phase:nth-of-type(3)::before,
.sgc-page-aziende .sgc-phase:nth-of-type(3)::before,
.sgc-page-formazione .sgc-phase:nth-of-type(3)::before { content: "03"; }

/* 16. Colore di riferimento per apertura E call-to-action di ciascuna pagina.
   Entrambe usano archivo-black; le distinguo per font-size (impronta stabile nel markup):
   - APERTURA: font-size clamp(22px, 3vw, 28px)
   - CTA finale: font-size 22px fisso
   Due regole separate e intenzionali, nessuna dipendenza dal wrapping dei blocchi. */

/* --- Apertura pagina --- */
.sgc-page-studi-indie .has-archivo-black-font-family[style*="clamp(22px, 3vw, 28px)"] { color: var(--sgc-rosa); }
.sgc-page-aziende     .has-archivo-black-font-family[style*="clamp(22px, 3vw, 28px)"] { color: var(--sgc-blu); }
.sgc-page-istituzioni .has-archivo-black-font-family[style*="clamp(22px, 3vw, 28px)"] { color: var(--sgc-blu); }
.sgc-page-formazione  .has-archivo-black-font-family[style*="clamp(22px, 3vw, 28px)"] { color: var(--sgc-arancio); }

/* --- Call-to-action finale --- */
.sgc-page-studi-indie .has-archivo-black-font-family[style*="font-size:22px"] { color: var(--sgc-rosa); }
.sgc-page-aziende     .has-archivo-black-font-family[style*="font-size:22px"] { color: var(--sgc-blu); }
.sgc-page-istituzioni .has-archivo-black-font-family[style*="font-size:22px"] { color: var(--sgc-blu); }
.sgc-page-formazione  .has-archivo-black-font-family[style*="font-size:22px"] { color: var(--sgc-arancio); }

/* 17. Interazione verbo ↔ card (homepage, solo desktop con mouse).
   Passando su un verbo si "accende" la card corrispondente e viceversa.
   Le classi .sgc-hl--* sono applicate via JS (assets/js/hover-link.js).
   crea↔Studi indie · finanzia↔Aziende+Istituzioni · capire↔Formazione+Istituzioni. */

/* --- card accesa: sollevamento + colore intensificato --- */
.sgc-card.sgc-hl--rosa,
.sgc-card.sgc-hl--blu,
.sgc-card.sgc-hl--arancio {
	transform: translateY(-4px);
}
.sgc-card.sgc-hl--rosa    { border-color: var(--sgc-rosa);    box-shadow: 0 10px 28px rgba(205, 26, 165, 0.20); }
.sgc-card.sgc-hl--blu     { border-color: var(--sgc-blu);     box-shadow: 0 10px 28px rgba(7, 102, 238, 0.20); }
.sgc-card.sgc-hl--arancio { border-color: var(--sgc-arancio); box-shadow: 0 10px 28px rgba(223, 84, 0, 0.20); }

/* Istituzioni (split): quando accesa, il bordo bicolore diventa tinta piena
   nel colore del verbo che l'ha attivata, con leggero sollevamento. */
.sgc-card--split.sgc-hl--blu {
	background-image: linear-gradient(#fff, #fff), linear-gradient(var(--sgc-blu), var(--sgc-blu));
}
.sgc-card--split.sgc-hl--arancio {
	background-image: linear-gradient(#fff, #fff), linear-gradient(var(--sgc-arancio), var(--sgc-arancio));
}

/* --- verbo acceso: si SOLLEVA soltanto ---
   Uso position:relative + top invece di inline-block+transform:
   così la parola resta inline agli occhi del testo e NON salta mai riga. */
mark.sgc-verb-hl {
	position: relative;
	top: -3px;
	transition: top 0.2s ease;
}

/* Rispetta chi ha ridotto le animazioni: niente sollevamento, solo colore. */
@media (prefers-reduced-motion: reduce) {
	.sgc-card.sgc-hl--rosa,
	.sgc-card.sgc-hl--blu,
	.sgc-card.sgc-hl--arancio { transform: none; }
	mark.sgc-verb-hl { top: 0; }
}