/*
Theme Name: Studio Tecnico di Progettazione
Author: Fabio Campilongo
Description: Tema WordPress nativo a blocchi (Full Site Editing) per Studi di Progettazione.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.6.8
License: Proprietaria - All Rights Reserved. Copyright (c) 2026 Fabio Campilongo
Text Domain: studio-campilongo
Tags: stile del tema personalizzabile, widget nell'header e nel footer, editor del sito, pattern per l'editor a blocchi

Studio Tecnico di Progettazione e' un tema a blocchi (block theme). Struttura, palette
colori e tipografia sono definite in theme.json; questo file contiene solo
le regole che i blocchi nativi non esprimono ancora via theme.json (form
di contatto, mappa, dettagli di accessibilita').
*/

/* Skip link (accessibilita') */
.skip-link.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--dark);
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 12px 16px;
	position: fixed !important;
	top: 6px;
	width: auto;
	z-index: 100000;
	border-radius: 4px;
}

/* Navigazione header/footer */
.site-header .wp-block-navigation-item a,
.site-footer .wp-block-navigation-item a {
	text-decoration: none;
}

.site-header .wp-block-navigation-item a:hover,
.site-footer .wp-block-navigation-item a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Form di contatto nativo (markup HTML puro in un blocco core/html,
   inviato tramite admin-post.php: vedi functions.php) */
.contact-form {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.contact-form .form-row {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.contact-form label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.75em 1em;
	border: 1px solid var(--wp--preset--color--slate);
	border-radius: 4px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark);
	width: 100%;
	box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.contact-form .form-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	font-size: var(--wp--preset--font-size--small);
}

.contact-form .form-consent input {
	margin-top: 0.35em;
}

.contact-form .form-required {
	color: var(--wp--preset--color--primary);
}

.contact-form .form-notice {
	padding: 0.9em 1.2em;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
}

.contact-form .form-notice.is-success {
	background-color: var(--wp--preset--color--success-background);
	color: var(--wp--preset--color--success);
}

.contact-form .form-notice.is-error {
	background-color: var(--wp--preset--color--error-background);
	color: var(--wp--preset--color--error);
}

/* Mappa: proporzioni responsive senza librerie esterne */
.map-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
}

.map-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Card dei servizi */
.service-card {
	background-color: var(--wp--preset--color--white);
	border-radius: 6px;
	overflow: hidden;
	height: 100%;
}

.service-card .wp-block-image {
	margin: 0;
}

.service-card .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* -----------------------------------------------------------------------
   Sezione di contatto in home page: il modulo e i recapiti (pattern
   riutilizzati anche su pagine a sfondo chiaro) vanno a testo chiaro
   quando compaiono sopra la foto scura di sfondo.
----------------------------------------------------------------------- */
.on-dark-cover .wp-block-heading,
.on-dark-cover p,
.on-dark-cover label,
.on-dark-cover a:not(.wp-element-button) {
	color: var(--wp--preset--color--white) !important;
}

.on-dark-cover .form-required {
	color: var(--wp--preset--color--primary) !important;
}

.on-dark-cover input[type="text"],
.on-dark-cover input[type="email"],
.on-dark-cover textarea {
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 92%, transparent);
}

/* -----------------------------------------------------------------------
   Riquadro bordato usato nelle sezioni "hero" sopra le foto di sfondo
----------------------------------------------------------------------- */
.hero-box {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
}