/* =====================================================
   SINAPSI - Clinica dell'Ascolto e della Mente
   Foglio di stile del tema WordPress
   ===================================================== */

:root {
	--font-display: 'Playfair Display', Georgia, serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;

	--color-bg: #fdfcf9;
	--color-fg: #171a2c;
	--color-fg-70: rgba(23, 26, 44, .7);
	--color-fg-60: rgba(23, 26, 44, .6);
	--color-fg-10: rgba(23, 26, 44, .1);
	--color-fg-05: rgba(23, 26, 44, .05);

	--color-blue: #005fb8;
	--color-blue-light: #4aa9ff;
	--color-sage: #8ba889;
	--color-oak: #b08d57;
	--color-white: #ffffff;

	--wrap: 1200px;
	--radius: 16px;
	--radius-lg: 20px;

	--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, .15);
	--shadow-2xl: 0 25px 55px -10px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-fg);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-blue); }
::selection { background: rgba(0, 95, 184, .12); color: var(--color-blue); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow-wrap { max-width: 780px; margin: 0 auto; padding: 0 24px; }

.section { padding: 128px 0; }
@media (max-width: 720px) { .section { padding: 80px 0; } }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; background: #fff; padding: 8px 12px; z-index: 999; }

/* ---------- Topbar ---------- */
.topbar {
	background: var(--color-blue); color: #fff;
	text-align: center; padding: 12px 24px;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* ---------- Navbar ---------- */
.site-nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(253, 252, 249, .88);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-fg-10);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-logo, .footer-logo { height: 40px; width: auto; }
.brand-wordmark { height: 24px; width: auto; }
.brand-divider { width: 1px; height: 32px; background: var(--color-fg-10); }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 13px; font-weight: 500; color: var(--color-fg-60); }
.primary-menu { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; }
.primary-menu a:hover, .nav-links a:hover { color: var(--color-blue); }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-fg); margin: 5px 0; transition: transform .2s ease; }

@media (max-width: 960px) {
	.nav-links { display: none; }
	.nav-toggle { display: block; }
	.nav-links.is-open {
		display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
		position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; padding: 24px; border-bottom: 1px solid var(--color-fg-10);
	}
	.nav-links.is-open .primary-menu { flex-direction: column; gap: 16px; }
}

.btn {
	display: inline-block;
	padding: 16px 32px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	transition: transform .2s ease, background .2s ease, color .2s ease;
	cursor: pointer;
	border: 0;
}
.btn-sm { padding: 10px 20px; font-size: 13px; }
.btn-primary { background: var(--color-blue); color: #fff; box-shadow: 0 20px 40px -10px rgba(0, 95, 184, .3); }
.btn-primary:hover { color: #fff; background: #004a90; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--color-fg); border: 1px solid var(--color-fg-10); }
.btn-ghost:hover { border-color: var(--color-blue); color: var(--color-blue); }

/* ---------- Common bits ---------- */
.rule-row { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.rule { display: inline-block; width: 48px; height: 1px; background: var(--color-blue); }
.rule-light { background: rgba(255, 255, 255, .4); }
.eyebrow {
	font-family: var(--font-mono);
	font-size: 12px; text-transform: uppercase; letter-spacing: .2em;
	color: var(--color-blue);
}
.eyebrow-light { color: rgba(255, 255, 255, .7); }

.section-head { max-width: 640px; margin-bottom: 80px; }
.section-head.narrow { max-width: 560px; }
.section-title {
	font-family: var(--font-display); font-weight: 700;
	font-size: clamp(32px, 4vw, 52px); line-height: 1.1;
	margin: 0 0 16px;
}
.section-title.light { color: #fff; }
.section-lede { color: var(--color-fg-70); line-height: 1.65; max-width: 42em; }
.section-lede.light { color: rgba(255, 255, 255, .75); }
.italic-sage { font-style: italic; color: var(--color-sage); font-weight: 400; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 88vh; padding: 96px 0 128px; overflow: hidden; display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.hero-fade {
	position: absolute; inset: 0;
	background: linear-gradient(to right, var(--color-bg), rgba(253, 252, 249, .75) 45%, transparent);
}
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-content { max-width: 640px; animation: revealUp 1s ease both; }
@keyframes revealUp { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: none; } }
.hero-kicker {
	font-family: var(--font-body); font-weight: 800;
	font-size: clamp(22px, 3vw, 36px);
	text-transform: uppercase; letter-spacing: .12em;
	color: var(--color-blue);
	margin: 0 0 20px;
}
.hero-title {
	font-family: var(--font-display); font-weight: 700;
	font-size: clamp(40px, 6vw, 76px); line-height: 1.05;
	margin: 0 0 32px;
}
.hero-text { font-size: 18px; line-height: 1.65; color: var(--color-fg-70); max-width: 34em; margin: 0 0 40px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Pillars ---------- */
.pillars-section { background: #fff; }
.pillars-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
	background: var(--color-fg-10);
	border-top: 1px solid var(--color-fg-10); border-bottom: 1px solid var(--color-fg-10);
}
@media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr; } }
.pillar { background: #fff; padding: 64px 32px; position: relative; transition: background .3s ease; }
.pillar:hover { background: #fafaf7; }
.pillar-num { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: rgba(0, 95, 184, .6); margin-bottom: 32px; }
.pillar-title { font-family: var(--font-display); font-size: 32px; margin: 0 0 24px; font-weight: 600; }
.pillar-text { color: var(--color-fg-60); line-height: 1.7; margin: 0 0 32px; }
.pillar-rule { height: 1px; width: 0; background: var(--color-blue); transition: width .7s ease; }
.pillar:hover .pillar-rule { width: 100%; }

/* ---------- Servizi ---------- */
.servizi-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
	background: var(--color-fg-10);
	border: 1px solid var(--color-fg-10);
	border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 960px) { .servizi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .servizi-grid { grid-template-columns: 1fr; } }
.servizio {
	background: #fff; padding: 40px;
	display: flex; flex-direction: column; justify-content: space-between;
	min-height: 240px;
	transition: background .3s ease;
}
.servizio:hover { background: rgba(139, 168, 137, .06); }
.servizio-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: rgba(0, 95, 184, .6); }
.servizio-title { font-family: var(--font-display); font-size: 24px; margin: 16px 0 16px; font-weight: 600; }
.servizio-title a { color: inherit; }
.servizio-text { font-size: 14px; color: var(--color-fg-60); line-height: 1.65; margin: 0; }
.servizio-rule { height: 1px; width: 0; background: var(--color-blue); transition: width .5s ease; margin-top: 24px; }
.servizio:hover .servizio-rule { width: 48px; }

/* ---------- Metodo ---------- */
.metodo-section { background: #fff; overflow: hidden; position: relative; }
.metodo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 960px) { .metodo-grid { grid-template-columns: 1fr; gap: 48px; } }
.metodo-media { position: relative; }
.metodo-blur { position: absolute; top: -48px; left: -48px; width: 256px; height: 256px; background: rgba(139, 168, 137, .12); border-radius: 999px; filter: blur(48px); }
.metodo-img { position: relative; aspect-ratio: 4/5; width: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.metodo-quote-card {
	position: absolute; bottom: 32px; right: -16px;
	background: #fff; padding: 32px; border-radius: 12px;
	box-shadow: var(--shadow-2xl);
	border: 1px solid var(--color-fg-10);
	max-width: 300px;
}
.metodo-quote-card p { font-style: italic; font-family: var(--font-display); color: var(--color-blue); line-height: 1.55; margin: 0; }
.metodo-quote-sign { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-fg-10); display: flex; align-items: center; gap: 12px; }
.dot-oak { width: 32px; height: 32px; border-radius: 999px; background: var(--color-oak); flex-shrink: 0; }
.metodo-quote-sign span:last-child { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.metodo-body > * + * { margin-top: 24px; }
.metodo-content { color: var(--color-fg-70); line-height: 1.7; }
.metodo-content p { margin: 0 0 16px; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; align-items: flex-start; gap: 16px; padding: 8px 0; font-size: 14px; }
.check { width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--color-sage); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 3px; }
.check::before { content: ''; width: 6px; height: 6px; background: var(--color-sage); border-radius: 999px; }

/* ---------- Direttore ---------- */
.direttore-section { background: var(--color-bg); border-top: 1px solid var(--color-fg-10); border-bottom: 1px solid var(--color-fg-10); }
.direttore-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 64px; align-items: center; }
@media (max-width: 960px) { .direttore-grid { grid-template-columns: 1fr; gap: 48px; } }
.direttore-media { position: relative; }
.direttore-photo { aspect-ratio: 4/5; width: 100%; overflow: hidden; border-radius: var(--radius); background: #f2eee6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.direttore-photo img { width: 100%; height: 100%; object-fit: cover; }
.badge {
	position: absolute; bottom: -16px; left: -16px;
	background: var(--color-blue); color: #fff;
	padding: 12px 20px; border-radius: 999px;
	font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
	box-shadow: var(--shadow-xl);
}
.direttore-body > * + * { margin-top: 24px; }
.role-mono { color: var(--color-blue); font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.direttore-bio { color: var(--color-fg-70); font-size: 18px; line-height: 1.7; }
.pull-quote { border-left: 2px solid var(--color-blue); padding-left: 24px; font-family: var(--font-display); font-style: italic; font-size: 20px; color: rgba(23, 26, 44, .8); line-height: 1.55; margin: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 8px; }
@media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr; } }
.stats-grid > div { border-top: 1px solid var(--color-fg-10); padding-top: 16px; }
.stat-k { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: rgba(0, 95, 184, .7); margin-bottom: 8px; }
.stat-v { display: block; font-size: 14px; font-weight: 500; }

/* ---------- Tecnologie ---------- */
.tec-section { background: var(--color-blue); color: #fff; }
.tec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 960px) { .tec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tec-grid { grid-template-columns: 1fr; } }
.tec-card { background: rgba(255, 255, 255, .05); backdrop-filter: blur(10px); padding: 32px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .1); transition: background .3s ease; }
.tec-card:hover { background: rgba(255, 255, 255, .1); }
.tec-card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.tec-card p { margin: 0; font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, .7); }

/* ---------- Blog latest ---------- */
.blog-latest-section { background: #fff; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { background: #fff; border: 1px solid var(--color-fg-10); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.blog-thumb { display: block; aspect-ratio: 16/10; background: #eee; overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: rgba(0, 95, 184, .7); }
.blog-body h2, .blog-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 0; line-height: 1.25; }
.blog-body p { margin: 0; color: var(--color-fg-60); font-size: 14px; line-height: 1.65; }
.link-arrow { color: var(--color-blue); font-weight: 500; font-size: 14px; margin-top: auto; }
.blog-all { text-align: center; margin-top: 48px; }

/* ---------- Contatti ---------- */
.contatti-section { background: #fff; }
.contatti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 960px) { .contatti-grid { grid-template-columns: 1fr; } }
.contatti-body > * + * { margin-top: 24px; }
.contatti-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 16px; border-top: 1px solid var(--color-fg-10); margin: 0; }
@media (max-width: 600px) { .contatti-dl { grid-template-columns: 1fr; } }
.contatti-dl dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(0, 95, 184, .7); margin: 0 0 12px; }
.contatti-dl dd { font-size: 14px; margin: 0; line-height: 1.65; }
.contatti-map { position: relative; aspect-ratio: 4/3; width: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xl); border: 1px solid rgba(0, 0, 0, .05); }
.contatti-map iframe { width: 100%; height: 100%; border: 0; }

.contatti-form-wrap { margin-top: 80px; }
.form-title { font-family: var(--font-display); font-size: 32px; margin: 8px 0 32px; font-weight: 600; }
.cf7-wrap { background: var(--color-bg); border: 1px solid var(--color-fg-10); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow-xl); }
.cf7-wrap .cf7-row { display: block; margin-bottom: 20px; }
.cf7-wrap .cf7-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .cf7-wrap .cf7-two { grid-template-columns: 1fr; } }
.cf7-wrap label { display: block; font-size: 13px; font-weight: 500; color: var(--color-fg-70); }
.cf7-wrap input[type=text], .cf7-wrap input[type=email], .cf7-wrap input[type=tel], .cf7-wrap select, .cf7-wrap textarea {
	width: 100%; padding: 12px 14px; margin-top: 6px;
	border: 1px solid var(--color-fg-10); border-radius: 10px;
	background: #fff; font: inherit; color: var(--color-fg);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.cf7-wrap input:focus, .cf7-wrap select:focus, .cf7-wrap textarea:focus {
	outline: 0; border-color: var(--color-blue); box-shadow: 0 0 0 4px rgba(0, 95, 184, .12);
}
.cf7-wrap textarea { min-height: 120px; resize: vertical; }
.cf7-wrap .cf7-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--color-fg-70); }
.cf7-wrap .wpcf7-list-item { margin: 0; }
.cf7-wrap .wpcf7-list-item-label { margin-left: 6px; }
.cf7-wrap .wpcf7-submit {
	background: var(--color-blue); color: #fff; padding: 14px 32px; border-radius: 999px;
	border: 0; font: inherit; font-weight: 500; cursor: pointer;
	box-shadow: 0 20px 40px -10px rgba(0, 95, 184, .3);
	transition: transform .2s ease, background .2s ease;
}
.cf7-wrap .wpcf7-submit:hover { background: #004a90; transform: translateY(-2px); }
.cf7-wrap .wpcf7-response-output { margin-top: 20px; padding: 12px 16px; border-radius: 10px; font-size: 14px; }
.cf7-missing { color: #a03; font-size: 14px; }

.sede-gallery { margin-top: 80px; }
.sede-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
@media (max-width: 720px) { .sede-grid { grid-template-columns: 1fr; } }
.sede-figure { position: relative; aspect-ratio: 4/3; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xl); border: 1px solid rgba(0, 0, 0, .05); }
.sede-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.sede-figure:hover img { transform: scale(1.05); }
.sede-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .25), transparent 60%); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-bg); border-top: 1px solid var(--color-fg-10); padding: 96px 0 32px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { margin: 12px 0; }
.footer-tagline { color: var(--color-fg-60); font-size: 14px; max-width: 360px; line-height: 1.7; }
.footer-motto { color: rgba(23, 26, 44, .5); font-size: 13px; font-family: var(--font-display); font-style: italic; line-height: 1.55; max-width: 360px; }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-blue); margin: 0 0 24px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: var(--color-fg-60); }
.footer-col address { font-style: normal; font-size: 14px; color: var(--color-fg-60); line-height: 1.7; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--color-fg-10); color: var(--color-fg-60); }

/* ---------- Prose (blog/pages) ---------- */
.single-page, .single-post { padding: 96px 0; }
.page-head, .post-head { margin-bottom: 40px; }
.post-featured { margin-top: 32px; border-radius: var(--radius); overflow: hidden; }
.post-featured img { width: 100%; height: auto; }
.prose { color: var(--color-fg); font-size: 17px; line-height: 1.75; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 2em 0 .6em; }
.prose h2 { font-size: 32px; }
.prose h3 { font-size: 24px; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.2em; }
.prose a { color: var(--color-blue); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 1.5em 0; padding: 8px 24px; border-left: 3px solid var(--color-sage); color: var(--color-fg-70); font-style: italic; }
.prose img { border-radius: 12px; margin: 1.5em 0; }
.pagination-wrap { margin-top: 48px; display: flex; justify-content: center; gap: 8px; }
.pagination-wrap .page-numbers { display: inline-block; padding: 8px 14px; border: 1px solid var(--color-fg-10); border-radius: 8px; font-size: 14px; }
.pagination-wrap .page-numbers.current { background: var(--color-blue); color: #fff; border-color: var(--color-blue); }
.error-404 { text-align: center; padding: 96px 0; }
.error-404 p { color: var(--color-fg-60); margin: 16px 0 32px; }

.blog-archive .section-head { text-align: left; }

/* ---------- Comments (semplice) ---------- */
.comments-area { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--color-fg-10); }
.comments-area h3 { font-family: var(--font-display); font-size: 24px; margin: 0 0 24px; }
.comment-list { list-style: none; padding: 0; margin: 0 0 32px; }
.comment-list li { padding: 16px 0; border-bottom: 1px solid var(--color-fg-05); }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--color-fg-10); border-radius: 10px;
	font: inherit; color: var(--color-fg); margin-top: 6px;
}
.comment-form .submit { background: var(--color-blue); color: #fff; padding: 12px 24px; border-radius: 999px; border: 0; font: inherit; cursor: pointer; }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }