/*
 Theme Name:   BTecno Child Theme
 Description:  BTecno Child Theme
 Author:       BTecno Srl
 Template:     btecno-main
 Text Domain:  btecno
*/

/* 
All style editing is done via scss/_btecno_custom.scss
*/

/* =========================================================
   Gestionali Cloud – style.css

   INDICE
   1. GLOBALE ........ font, variabili (:root), utility, pulsanti
   2. HEADER ......... logo, menu, Prova gratis, hamburger, menu a scomparsa
   3. (prossime sezioni: hero, funzionalità, come funziona, suite BeeDuty, CTA, fiducia, footer)
   ========================================================= */


/* #########################################################
   1. GLOBALE
   ######################################################### */

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('/wp-content/themes/btecno-child-main/fonts/PlusJakartaSans.woff2') format('woff2'),
		url('/wp-content/themes/btecno-child-main/fonts/PlusJakartaSans.ttf') format('truetype');
	font-weight: 200 800; /* font variabile: copre tutti i pesi */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Caveat';
	src: url('/wp-content/themes/btecno-child-main/fonts/Caveat.woff2') format('woff2'),
		url('/wp-content/themes/btecno-child-main/fonts/Caveat.ttf') format('truetype');
	font-weight: 400 700; /* font variabile */
	font-style: normal;
	font-display: swap;
}


:root {
	/* Colori dei tre software: pieno (grafica), scuro (testi/pulsanti), chiaro (sfondi) */
	--rl: #96be4e;
	--rlScuro: #577029;
	--rlChiaro: #f0f7e3;
	--ge: #14a0a6;
	--geScuro: #0b7c80;
	--geChiaro: #ddf3f2;
	--pos: #f5a524;
	--posScuro: #a64800;
	--posChiaro: #fff1db;

	/* Tema di questo sito: Gestionali Cloud. Le classi .prodRL / .prodPOS lo cambiano dove serve (es. sezione suite) */
	--prod: var(--geScuro);
	--prodPieno: var(--ge);
	--prodChiaro: var(--geChiaro);

	/* Neutri */
	--bluNotte: #0c2233; /* testi e titoli */
	--azzurroSezione: #f3f7fb;
	--linea: #d8e4dd;
	--bordoInput: #8fa3b0;
	--testoSecondario: #2e4252;
	--testoMuted: #46596a;
	--colore-testi: var(--bluNotte);

	/* Font */
	--font-testi: 'Plus Jakarta Sans', system-ui, sans-serif;
	--font-corsivo: 'Caveat', cursive;
	--bs-body-color: var(--colore-testi);
	--bs-font-sans-serif: var(--font-testi);

	/* Forme e ombre */
	--raggio-pulsante: 12px;
	--raggio-input: 10px;
	--raggio-card: 24px;
	--raggio-pill: 999px;
	--ombra-card: 0 12px 32px rgb(12 34 51 / 8%);

	/* Layout */
	--larghezza-max: 1200px;
	--padding-sezione: 96px 0;
	--padding-left: 75px;
	--padding-right: 75px;
}

@media (max-width: 767.98px) {
	:root {
		--padding-sezione: 56px 0;
		--padding-left: 20px;
		--padding-right: 20px;
	}
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-testi);
	color: var(--colore-testi);
	background-color: #fff;
}

.site-content {
	font-family: var(--font-testi);
}

b, strong {
	font-weight: 700;
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--prod);
	outline-offset: 3px;
}

.container-fluid {
	padding-left: var(--padding-left);
	padding-right: var(--padding-right);
}

.contenitore {
	max-width: var(--larghezza-max);
	margin: 0 auto;
}

.fontCorsivo {
	font-family: var(--font-corsivo);
	font-weight: 600;
}

.esagono {
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}


/* ---------- Titoli e testi ---------- */

.titoloHero {
	font-size: clamp(34px, 4.3vw, 58px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0;
}

.titoloSezione {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
}

.sottotitoloSezione {
	font-size: 18px;
	line-height: 1.6;
	color: var(--testoMuted);
	margin: 0;
}

.eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--prod);
}


/* ---------- Tema per prodotto ----------
   Si applica .prodRL / .prodGE / .prodPOS a un contenitore: --prod, --prodPieno e --prodChiaro
   cambiano di conseguenza. Fuori dalle classi vale il tema di Gestionali Cloud (:root). */

.prodRL {
	--prod: var(--rlScuro);
	--prodPieno: var(--rl);
	--prodChiaro: var(--rlChiaro);
}

.prodGE {
	--prod: var(--geScuro);
	--prodPieno: var(--ge);
	--prodChiaro: var(--geChiaro);
}

.prodPOS {
	--prod: var(--posScuro);
	--prodPieno: var(--pos);
	--prodChiaro: var(--posChiaro);
}


/* ---------- Sfondi con esagoni (immagini in /img del tema) ---------- */

.bgEsagoniHero {
	background: #eaf6f6 url('/wp-content/themes/btecno-child-main/img/sfondo-hero-esagoni.webp') center / cover no-repeat;
}

.bgEsagoniCta {
	background: var(--geScuro) url('/wp-content/themes/btecno-child-main/img/sfondo-cta-esagoni.webp') center / cover no-repeat;
}


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

.btnProdotto,
.btnProdottoOutline,
.btnProdottoBianco,
.btnProdottoBiancoOutline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid transparent;
	border-radius: var(--raggio-pulsante);
	font-family: var(--font-testi);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btnProdotto:hover,
.btnProdottoOutline:hover,
.btnProdottoBianco:hover,
.btnProdottoBiancoOutline:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgb(12 34 51 / 18%);
}

.btnProdotto:active,
.btnProdottoOutline:active,
.btnProdottoBianco:active,
.btnProdottoBiancoOutline:active {
	transform: none;
	box-shadow: none;
}

/* Il colore va dichiarato anche in hover e in focus: altrimenti Bootstrap applica il colore dei link */
.btnProdotto {
	background-color: var(--prod);
	border-color: var(--prod);
	color: #fff;
}

.btnProdotto:hover,
.btnProdotto:focus-visible {
	filter: brightness(0.9);
	color: #fff;
}

.btnProdottoOutline {
	background-color: #fff;
	border-color: var(--prod);
	color: var(--prod);
}

.btnProdottoOutline:hover,
.btnProdottoOutline:focus-visible {
	background-color: var(--prod);
	color: #fff;
}

.btnProdottoBianco {
	background-color: #fff;
	border-color: #fff;
	color: var(--prod);
}

.btnProdottoBianco:hover,
.btnProdottoBianco:focus-visible {
	background-color: var(--prodChiaro);
	border-color: var(--prodChiaro);
	color: var(--prod);
}

.btnProdottoBiancoOutline {
	background-color: transparent;
	border-color: #fff;
	color: #fff;
}

.btnProdottoBiancoOutline:hover,
.btnProdottoBiancoOutline:focus-visible {
	background-color: #fff;
	color: var(--prod);
}

.btnGrande {
	min-height: 52px;
	padding: 0 28px;
	font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
	.btnProdotto,
	.btnProdottoOutline,
	.btnProdottoBianco,
	.btnProdottoBiancoOutline {
		transition: none;
	}

	.btnProdotto:hover,
	.btnProdottoOutline:hover,
	.btnProdottoBianco:hover,
	.btnProdottoBiancoOutline:hover {
		transform: none;
	}
}


/* #########################################################
   2. HEADER
   Voci del menu: link personalizzati alle ancore (#funzionalita, #come-funziona, #suite)
   ######################################################### */

.site-header .navbar {
	background-color: #fff;
	border-bottom: 1px solid var(--linea);
	padding-top: 12px;
	padding-bottom: 12px;
}

.site-header .navbar-brand {
	display: flex;
	align-items: center;
	margin-right: 32px;
	padding: 0;
}

.site-header .logo {
	display: block;
	width: auto;
	height: 40px;
}

.site-header .header-actions {
	gap: 12px;
}

.site-header .header-prova {
	min-height: 44px;
	padding: 0 24px;
}

.site-header .navbar-nav .nav-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--bluNotte);
	text-decoration: none;
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus-visible,
.site-header .navbar-nav .nav-link.active {
	color: var(--prod);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

@media (min-width: 992px) {
	.site-header .navbar-nav {
		gap: 4px 28px;
	}
}

/* Prova gratis: freccia che scorre in hover */
.site-header .header-prova::after {
	content: "";
	flex: none;
	width: 0;
	height: 14px;
	margin-left: 0;
	opacity: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: width 0.2s ease, margin-left 0.2s ease, opacity 0.2s ease;
}

.site-header .header-prova:hover::after,
.site-header .header-prova:focus-visible::after {
	width: 14px;
	margin-left: 8px;
	opacity: 1;
}

/* Hamburger (mobile) */
.site-header .toggler-menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-left: 4px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background-color: var(--prodChiaro);
	color: var(--prod);
	cursor: pointer;
	transition: filter 0.2s ease;
}

.site-header .toggler-menu:hover {
	filter: brightness(0.96);
}

.site-header .toggler-menu-linee {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	width: 22px;
}

.site-header .toggler-menu-linee span {
	display: block;
	width: 22px;
	height: 2.5px;
	border-radius: 2px;
	background-color: currentColor;
	transition: width 0.2s ease;
}

.site-header .toggler-menu-linee span:nth-child(2) {
	width: 15px;
}

.site-header .toggler-menu:hover .toggler-menu-linee span:nth-child(2) {
	width: 22px;
}

/* Menu a scomparsa */
.site-header .offcanvas-header {
	padding: 12px 20px;
	background-color: #fff;
	border-bottom: 1px solid var(--linea);
}

.site-header .offcanvas-brand img {
	display: block;
	width: auto;
	height: 32px;
}

@media (max-width: 991.98px) {
	.site-header .offcanvas {
		background-color: #fff;
	}

	.site-header .navbar-nav .nav-link {
		min-height: 52px;
		padding: 0;
		font-size: 17px;
		border-bottom: 1px solid var(--linea);
	}

	.site-header .logo {
		height: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header .header-prova::after,
	.site-header .toggler-menu,
	.site-header .toggler-menu-linee span {
		transition: none;
	}
}


/* #########################################################
   3. HERO
   Template: template-parts/home/hero.php + componenti/alveare-funzioni.php
   ######################################################### */

.hero {
	/* L'header è fixed-top (alto circa 69px): se il tema compensa già lo spazio, mettere 0 */
	--hero-offset-header: 69px;
	position: relative;
	overflow: hidden;
	padding: calc(var(--hero-offset-header) + 56px) 0 72px;
}

.hero-testi {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hero-sottotitolo {
	max-width: 560px;
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
	color: var(--testoSecondario);
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.hero-punti {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--testoSecondario);
}

.hero-punti li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hero-punti li::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: var(--prod);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ---------- Alveare ----------
   Disegnato su una larghezza di progetto di 616 unità: --u è il valore di 1 unità
   e scala tutto in proporzione alla colonna (unità cqw dei container query). */

.hero-alveare {
	container-type: inline-size;
	position: relative;
	width: 100%;
	max-width: 616px;
	aspect-ratio: 616 / 430;
	margin-inline: auto;
}

.hero-alveare-inner {
	--u: calc(100cqw / 616);
	position: absolute;
	inset: 0;
}

.hero-cella {
	position: absolute;
	left: calc(var(--u) * var(--x));
	top: calc(var(--u) * var(--y));
	display: block;
	width: calc(var(--u) * 200);
	height: calc(var(--u) * 231);
	background-color: var(--prodPieno);
	color: var(--bluNotte);
}

.hero-cella-interno {
	position: absolute;
	inset: calc(var(--u) * 3);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 5);
	padding-top: calc(var(--u) * 14);
	background-color: var(--prodChiaro);
}

.hero-cella-icona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--u) * 38);
	height: calc(var(--u) * 38);
	border-radius: 50%;
	background-color: #fff;
	color: var(--prod);
}

.hero-cella-icona svg {
	width: 62%;
	height: 62%;
}

.hero-cella-nome {
	font-size: calc(var(--u) * 15);
	font-weight: 800;
	line-height: 1.2;
}

.hero-cella-label {
	font-size: calc(var(--u) * 11);
	line-height: 1.3;
	color: var(--testoMuted);
}

/* Cella del marchio */
.hero-cella-marchio {
	background-color: var(--linea);
}

.hero-cella-marchio .hero-cella-interno {
	padding-top: 0;
	background-color: #fff;
}

.hero-cella-marchio img {
	display: block;
	width: calc(var(--u) * 70);
	height: auto;
}

.hero-cella-nome-grande {
	font-size: calc(var(--u) * 17);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--bluNotte);
}


/* ---------- Mini-schermate dentro le celle ---------- */

.hero-mini {
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 5);
	width: calc(var(--u) * 112);
	padding: calc(var(--u) * 7) calc(var(--u) * 8);
	border-radius: calc(var(--u) * 8);
	background-color: #fff;
	box-shadow: 0 2px 6px rgb(12 34 51 / 10%);
}

.hero-mini i,
.hero-mini b {
	display: block;
	font-style: normal;
}

.hero-mini-riga {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 6);
}

.hero-mini-punto {
	flex: none;
	width: calc(var(--u) * 8);
	height: calc(var(--u) * 8);
	border-radius: 50%;
	background-color: var(--prodPieno);
}

.hero-mini-barra {
	flex: 1;
	height: calc(var(--u) * 5);
	border-radius: calc(var(--u) * 3);
	background-color: var(--prodPieno);
	opacity: 0.35;
}

.hero-mini-barra-corta {
	flex: none;
	width: 60%;
}

.hero-mini-firma {
	width: 55%;
	height: calc(var(--u) * 12);
	margin-left: auto;
	border-bottom: calc(var(--u) * 2) solid var(--prod);
}

.hero-mini-testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hero-mini-testa b {
	font-size: calc(var(--u) * 10);
	font-weight: 800;
	color: var(--prod);
}

.hero-mini-totale {
	display: flex;
	justify-content: flex-end;
}

.hero-mini-totale i {
	width: 45%;
	height: calc(var(--u) * 8);
	border-radius: calc(var(--u) * 3);
	background-color: var(--prod);
}

.hero-mini-giorni {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: calc(var(--u) * 3);
}

.hero-mini-giorni i {
	aspect-ratio: 1;
	border-radius: calc(var(--u) * 2);
	background-color: var(--prodChiaro);
}

.hero-mini-giorni i.on {
	background-color: var(--prod);
}

.hero-mini-grafico {
	display: flex;
	align-items: flex-end;
	gap: calc(var(--u) * 4);
	height: calc(var(--u) * 22);
}

.hero-mini-grafico i {
	width: calc(var(--u) * 12);
	height: calc(var(--u) * var(--h));
	border-radius: calc(var(--u) * 2);
	background-color: var(--prodPieno);
}

.hero-mini-grafico .hero-mini-spenta {
	opacity: 0.35;
}


/* ---------- Scritte a mano ---------- */

.hero-nota {
	position: absolute;
	font-size: calc(var(--u) * 26);
	line-height: 1.05;
	color: var(--bluNotte);
	transform: rotate(-4deg);
}

.hero-nota-1 {
	left: 0;
	top: calc(var(--u) * 290);
	width: calc(var(--u) * 150);
	text-align: right;
}

.hero-nota-2 {
	left: calc(var(--u) * 474);
	top: calc(var(--u) * 30);
	width: calc(var(--u) * 142);
}


/* ---------- Mobile: alveare più semplice ---------- */

@media (max-width: 767.98px) {
	.hero {
		padding-bottom: 48px;
	}

	.hero-cella-label,
	.hero-mini,
	.hero-nota {
		display: none;
	}

	.hero-cella-interno {
		padding-top: 0;
		gap: calc(var(--u) * 10);
	}

	.hero-cella-icona {
		width: calc(var(--u) * 52);
		height: calc(var(--u) * 52);
	}

	.hero-cella-nome {
		font-size: calc(var(--u) * 20);
	}

	.hero-cella-nome-grande {
		font-size: calc(var(--u) * 22);
	}

	.hero-cella-marchio img {
		width: calc(var(--u) * 90);
	}
}