/*
Theme Name: vLogic
Theme URI: https://www.vlogic.it
Author: vLogic Srls
Author URI: https://www.vlogic.it
Description: Tema a blocchi su misura per vLogic — agenzia di consulenza digitale (Sviluppo Web, SEO, Automazione, IT). Design tech scuro, responsive, veloce e ottimizzato SEO. Tipografia self-hosted (Space Grotesk + Inter).
Version: 1.0.6
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vlogic
*/

:root {
	--vl-base: #0a0e14;
	--vl-surface: #11161d;
	--vl-surface-2: #161d27;
	--vl-line: #243043;
	--vl-contrast: #eef3fa;
	--vl-muted: #9aa7b8;
	--vl-accent: #2f80ed;
	--vl-accent-2: #38bdf8;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* selection */
::selection { background: var(--vl-accent); color: #fff; }

/* ---------- Header ---------- */
.wp-block-template-part.vl-site-header,
header.vl-site-header { position: sticky; top: 0; z-index: 100; }
.vl-header-bar {
	/* sfondo solido: backdrop-filter su un elemento sticky viene dipinto bianco da Safari iOS */
	background: rgba(10,14,20,0.94);
	border-bottom: 1px solid var(--vl-line);
}
/* menu mobile: pannello a discesa sotto la barra (non l'overlay a tutto schermo del core) */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--vl-contrast) !important; }
@media (max-width: 599px) {
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed; inset: 52px 0 auto 0; height: auto; max-height: calc(100vh - 52px); overflow-y: auto;
		padding: 0 !important; z-index: 101;
		background: var(--vl-surface) !important; color: var(--vl-contrast) !important;
		border-bottom: 1px solid var(--vl-line); box-shadow: 0 18px 40px rgba(0,0,0,.45);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position: static !important; width: auto; height: auto; padding: 0 !important; margin: 0 !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: block !important; position: static; padding: .35rem 0 .6rem !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; width: 100%; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; margin: 0; border-bottom: 1px solid rgba(36,48,67,.6); text-align: left; justify-content: flex-start !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; box-sizing: border-box; padding: .85rem 1.25rem !important; font-size: 1.05rem; }
	/* niente X: l'hamburger resta al suo posto e fa da interruttore (script in functions.php) */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: none; }
	/* pagina scurita dietro il pannello; cursor:pointer serve a iOS per generare il click che chiude */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) { cursor: pointer; }
	body:has(.wp-block-navigation__responsive-container.is-menu-open)::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99; }
}
.vl-header-bar .wp-block-site-logo img { display: block; height: 30px; width: auto; }
.vl-nav a { color: var(--vl-contrast) !important; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: .98rem; text-decoration: none; }
.vl-nav a:hover { color: var(--vl-accent-2) !important; }
.vl-nav .current-menu-item a { color: var(--vl-accent-2) !important; }

/* language switcher (Polylang) */
.vl-lang ul, .lang-switcher ul { list-style: none; display: flex; gap: .5rem; margin: 0; padding: 0; }
.vl-lang a { color: var(--vl-muted) !important; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.vl-lang .current-lang a, .vl-lang a:hover { color: var(--vl-accent-2) !important; }

/* ---------- Eyebrow / labels ---------- */
.vl-eyebrow {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: "Space Grotesk", sans-serif; font-weight: 600;
	font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--vl-accent-2); margin: 0 0 .25rem;
}
.vl-eyebrow::before { content: ""; width: 22px; height: 2px; background: linear-gradient(90deg,var(--vl-accent),var(--vl-accent-2)); display: inline-block; }

/* gradient text accent */
.vl-grad {
	background: linear-gradient(120deg,#7cc0ff,#38bdf8 60%,#2f80ed);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Hero ---------- */
.vl-hero { position: relative; overflow: hidden; }
.vl-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(55% 70% at 78% -5%, rgba(56,189,248,0.18), transparent 60%),
		radial-gradient(50% 60% at 12% 110%, rgba(47,128,237,0.16), transparent 60%);
}
.vl-hero > * { position: relative; z-index: 1; }
.vl-grid-lines::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: linear-gradient(var(--vl-line) 1px, transparent 1px), linear-gradient(90deg, var(--vl-line) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
	mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
}

/* ---------- Cards (servizi) ---------- */
.vl-card {
	background: linear-gradient(180deg, var(--vl-surface-2), var(--vl-surface));
	border: 1px solid var(--vl-line); border-radius: 16px;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
	height: 100%;
}
.vl-card:hover { transform: translateY(-4px); border-color: var(--vl-accent); box-shadow: 0 20px 45px rgba(0,0,0,.45); }
.vl-card .vl-card__num {
	font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: .9rem;
	color: var(--vl-accent-2); letter-spacing: .1em;
}
.vl-card h3 { font-size: 1.35rem !important; }

/* feature row icons */
.vl-feature { border-left: 2px solid var(--vl-accent); padding-left: 1.1rem; }

/* ---------- Stat / counters ---------- */
.vl-stat .vl-stat__num {
	font-family: "Space Grotesk", sans-serif; font-weight: 700; line-height: 1;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	background: linear-gradient(120deg,#7cc0ff,#38bdf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.vl-stat .vl-stat__label { color: var(--vl-muted); font-size: .92rem; }

/* tech stack tags */
.vl-stack-group { margin-bottom: 1.5rem; }
.vl-stack-group h4 { font-family: "Space Grotesk", sans-serif; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vl-muted); margin: 0 0 .7rem; }
.vl-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.vl-tag { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border: 1px solid var(--vl-line); border-radius: 999px; background: var(--vl-surface-2); color: var(--vl-contrast); font-family: "Space Grotesk", sans-serif; font-size: .92rem; transition: border-color .2s, transform .2s; }
.vl-tag:hover { border-color: var(--vl-accent); transform: translateY(-2px); }
.vl-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(120deg, var(--vl-accent), var(--vl-accent-2)); flex: 0 0 auto; }

/* ---------- Surfaces / sections ---------- */
.vl-panel { background: var(--vl-surface); border: 1px solid var(--vl-line); border-radius: 20px; }
.vl-hairline { border-top: 1px solid var(--vl-line); }

/* quote */
.vl-quote { font-family: "Space Grotesk", sans-serif; font-weight: 500; }
.vl-quote cite { color: var(--vl-muted); font-style: normal; font-family: "Inter", sans-serif; }

/* clients proof strip */
.vl-proof { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; }
.vl-proof .vl-proof__label { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vl-muted); }
.vl-proof .vl-proof__name { font-family: "Space Grotesk", sans-serif; font-weight: 600; color: var(--vl-contrast); font-size: 1.05rem; opacity: .85; }

/* process steps */
.vl-step { height: 100%; }
.vl-step__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--vl-surface-2); border: 1px solid var(--vl-line); font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--vl-accent-2); margin-bottom: .8rem; }
.vl-step h3 { font-size: 1.15rem !important; }

/* service bullets */
.vl-ticks { list-style: none; margin: 1rem 0 0; padding: 0; }
.vl-ticks li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; color: var(--vl-muted); font-size: .95rem; }
.vl-ticks li::before { content: "→"; position: absolute; left: 0; color: var(--vl-accent-2); }

/* ---------- Buttons polish ---------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--vl-contrast); border: 1px solid var(--vl-line);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--vl-accent-2); color: var(--vl-accent-2); }

/* ---------- Footer ---------- */
.vl-footer { background: var(--vl-surface); border-top: 1px solid var(--vl-line); }
.vl-footer a { color: var(--vl-muted); text-decoration: none; }
.vl-footer a:hover { color: var(--vl-accent-2); }
.vl-footer .wp-block-site-logo img { height: 26px; width: auto; }

/* ---------- Forms (CF7) ---------- */
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea {
	width: 100%; max-width: 100%; box-sizing: border-box; background: var(--vl-base); color: var(--vl-contrast);
	border: 1px solid var(--vl-line); border-radius: 10px; padding: .8rem 1rem; font: inherit; margin-top: .25rem;
}
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--vl-accent); box-shadow: 0 0 0 3px rgba(47,128,237,.25); }
.wpcf7 label { display: block; font-family: "Space Grotesk", sans-serif; font-size: .9rem; color: var(--vl-muted); margin-bottom: .9rem; }
.wpcf7 .wpcf7-submit {
	background: var(--vl-accent); color: #fff; border: 0; border-radius: 10px; cursor: pointer;
	font-family: "Space Grotesk", sans-serif; font-weight: 600; padding: .85rem 1.8rem; transition: background .2s;
}
.wpcf7 .wpcf7-submit:hover { background: var(--vl-accent-2); color: var(--vl-base); }
.wpcf7-response-output { border-radius: 10px; margin: 1rem 0 0 !important; }

/* ---------- Posts / blog ---------- */
.vl-post-card { background: var(--vl-surface); border: 1px solid var(--vl-line); border-radius: 16px; overflow: hidden; transition: border-color .2s, transform .2s; }
.vl-post-card:hover { border-color: var(--vl-accent); transform: translateY(-3px); }

/* readable content width default for prose */
.entry-content :where(p, ul, ol, h2, h3) { max-width: 760px; }

/* responsive nav: hide secondary on small via core navigation overlay (handled by block) */
@media (max-width: 600px) {
	.vl-header-bar .wp-block-site-logo img { height: 26px; }
}