/*
Theme Name:   Psychologist
Theme URI:    https://creattica.it/temi/psychologist
Description:  Tema per psicologi, psicoterapeuti e studi di counseling. Palette
              vegetale, tipografia editoriale con font ospitati in locale
              (nessuna richiesta a terze parti), intestazione con call to action,
              sezioni a fascia chiara e scura, colori personalizzabili dal
              Customizer.
Author:       creattica
Author URI:   https://creattica.it
Version:      2.4.0
Requires at least: 6.5
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:  psychologist
Tags: blog, one-column, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ====================================================================
 * 0. Font
 *
 * Newsreader e Manrope sono serviti da questa cartella, non da Google:
 * nessuna richiesta a terze parti, quindi nessun IP di visitatore che
 * lascia il sito. I file sono i woff2 variabili con gli assi ristretti
 * ai pesi realmente usati (Newsreader 300-500, corsivo 300-400,
 * Manrope 400-700), cosi' il subset latino pesa ~148 KB in tutto.
 *
 * Gli URL sono relativi a questo foglio di stile: restano corretti anche
 * quando a caricarlo e' un tema figlio.
 *
 * Newsreader e Manrope sono rilasciati con licenza SIL Open Font License
 * 1.1; il testo completo e' in assets/fonts/.
 * ================================================================= */

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url(assets/fonts/newsreader-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url(assets/fonts/newsreader-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Newsreader";
	font-style: italic;
	font-weight: 300 400;
	font-display: swap;
	src: url(assets/fonts/newsreader-italic-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Newsreader";
	font-style: italic;
	font-weight: 300 400;
	font-display: swap;
	src: url(assets/fonts/newsreader-italic-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(assets/fonts/manrope-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(assets/fonts/manrope-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ====================================================================
 * 1. Token
 *
 * La famiglia del colore principale (--psy-primary*, --psy-accent-soft)
 * e lo sfondo del footer sono riscritti da inc/enqueue.php come CSS
 * inline, cosi' le opzioni del Customizer non richiedono di rigenerare
 * questo file. Le superfici restano quelle definite qui: sono tinte
 * appena percettibili e reggono anche un colore principale di tutt'altra
 * tonalita'.
 * ================================================================= */

:root {
	/* Accento */
	--psy-primary: #4f7355;
	--psy-primary-dark: #3c5a41;
	--psy-primary-contrast: #ffffff;
	--psy-accent-soft: #a9c2ad;

	/* Superfici */
	--psy-page: #f5f8f3;
	--psy-surface: #fcfdfb;
	--psy-band: #e9f0e6;
	--psy-border: #dbe4d7;
	--psy-border-strong: #cbd7c6;

	/* Testo */
	--psy-ink: #1d2620;
	--psy-text: #26302a;
	--psy-text-soft: #515d53;
	--psy-muted: #7d887f;
	--psy-muted-soft: #8d978f;

	/* Fasce scure */
	--psy-dark: #2f322c;
	--psy-dark-text: #eef3ea;
	--psy-dark-soft: #cfd6cb;
	--psy-dark-muted: #9fb39c;
	--psy-dark-border: #59604f;

	/* Footer */
	--psy-footer-bg: #26302a;
	--psy-footer-text: #c2ccc3;
	--psy-footer-border: #384239;
	--psy-footer-faint: #8a938b;

	/* Forme */
	--psy-radius: 14px;
	--psy-radius-lg: 16px;
	--psy-radius-sm: 9px;
	--psy-shadow: 0 18px 40px -24px rgba(42, 38, 34, 0.4);
	--psy-shadow-sm: 0 10px 24px -20px rgba(42, 38, 34, 0.55);

	/* Misure */
	--psy-container: 1180px;
	--psy-container-narrow: 900px;
	--psy-container-text: 820px;
	--psy-gutter: clamp(1.125rem, 5vw, 2rem);
	--psy-section: clamp(3.5rem, 8vw, 5.75rem);
	--psy-header-height: 76px;

	/* Tipografia */
	--psy-font: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--psy-font-display: Newsreader, Georgia, "Iowan Old Style", "Times New Roman", serif;

	/* Alias storici: li usano il tema figlio e gli stili dell'editor. */
	--psy-bg: var(--psy-surface);
	--psy-bg-soft: var(--psy-page);
	--psy-text-muted: var(--psy-text-soft);
	--psy-font-heading: var(--psy-font-display);
}

/* ====================================================================
 * 2. Base
 * ================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--psy-header-height) + 1rem);
}

body {
	margin: 0;
	background: var(--psy-page);
	color: var(--psy-text);
	font-family: var(--psy-font);
	font-size: 1.0625rem;
	line-height: 1.65;
	font-optical-sizing: auto;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--psy-ink);
	font-family: var(--psy-font-display);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 4.6vw, 2.5rem); }
h3 { font-size: clamp(1.35rem, 2.6vw, 1.5625rem); font-weight: 400; line-height: 1.2; }
h4 { font-size: 1.3125rem; font-weight: 400; }
h5, h6 { font-family: var(--psy-font); font-size: 1rem; font-weight: 600; letter-spacing: 0; }

p, ul, ol, dl, table, figure, pre, blockquote {
	margin: 0 0 1.35em;
}

a {
	color: var(--psy-primary);
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--psy-primary-dark);
}

/* Nel corpo del testo i link restano sottolineati: senza sottolineatura,
   dentro un paragrafo, sarebbero riconoscibili solo dal colore. */
.psy-entry__content a:not(.psy-button):not(.wp-block-button__link),
.psy-comments a {
	text-decoration: underline;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

figure {
	margin-inline: 0;
}

blockquote {
	margin-inline: 0;
	padding: 0.25em 0 0.25em 1.5rem;
	border-left: 2px solid var(--psy-accent-soft);
	color: var(--psy-text-soft);
	font-family: var(--psy-font-display);
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.45;
}

code, pre {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: 1rem;
	background: var(--psy-band);
	border-radius: var(--psy-radius-sm);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--psy-border);
	text-align: left;
}

hr {
	height: 1px;
	margin: 2.5rem 0;
	border: 0;
	background: var(--psy-border);
}

::selection {
	background: var(--psy-band);
}

:focus-visible {
	outline: 3px solid var(--psy-primary);
	outline-offset: 2px;
}

/* Accessibilita': testo per soli screen reader, con ritorno visibile al focus. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 0.75rem 1.25rem;
	background: var(--psy-surface);
	border-radius: var(--psy-radius-sm);
	box-shadow: var(--psy-shadow);
}

@keyframes psy-rise-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ====================================================================
 * 3. Layout
 * ================================================================= */

.psy-container {
	width: 100%;
	max-width: var(--psy-container);
	margin-inline: auto;
	padding-inline: var(--psy-gutter);
}

.psy-container--narrow { max-width: var(--psy-container-narrow); }
.psy-container--text   { max-width: var(--psy-container-text); }

/* Fascia a tutta larghezza: lo sfondo esce dal contenitore, il contenuto no. */
.psy-section {
	padding-block: var(--psy-section);
}

.psy-section--band {
	background: var(--psy-band);
	border-block: 1px solid var(--psy-border);
}

.psy-section--dark {
	background: var(--psy-dark);
	color: var(--psy-dark-text);
}

.psy-section--dark h1,
.psy-section--dark h2,
.psy-section--dark h3 {
	color: var(--psy-dark-text);
}

.psy-section--dark p {
	color: var(--psy-dark-soft);
}

.psy-layout {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

.psy-layout--sidebar {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.psy-layout--sidebar {
		grid-template-columns: minmax(0, 1fr) 20rem;
	}
}

/* Griglia riusabile per le sezioni a due colonne (testo + immagine). */
.psy-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.psy-split--top { align-items: start; }

.psy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.625rem), 1fr));
	gap: 1.75rem;
}

/* Occhiello: la riga maiuscoletta sopra i titoli. */
.psy-eyebrow {
	margin: 0 0 1.25rem;
	color: var(--psy-primary);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
}

.psy-section--dark .psy-eyebrow {
	color: var(--psy-dark-muted);
}

.psy-lead {
	font-size: 1.125rem;
	line-height: 1.62;
	color: var(--psy-text-soft);
}

/* Intestazione di sezione: titolo a sinistra, occhiello o link a destra. */
.psy-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: clamp(2rem, 4vw, 3.375rem);
}

.psy-section__head > :last-child { margin-bottom: 0; }
.psy-section__head p { max-width: 34em; color: var(--psy-text-soft); }

/* ====================================================================
 * 4. Header e navigazione
 * ================================================================= */

.psy-topbar {
	background: var(--psy-dark);
	color: var(--psy-dark-text);
	font-size: 0.85rem;
}

.psy-topbar a {
	color: var(--psy-dark-text);
}

.psy-topbar a:hover,
.psy-topbar a:focus {
	color: #fff;
}

.psy-topbar .psy-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1rem;
	padding-block: 0.5rem;
}

.psy-topbar ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* I widget qui stanno su una riga sola: senza queste regole il titolo
   erediterebbe il corpo dei titoli di sezione e sfonderebbe la barra. */
.psy-topbar .widget {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1rem;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.psy-topbar .widget-title {
	margin: 0;
	color: var(--psy-dark-muted);
	font-family: var(--psy-font);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
}

.psy-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--psy-page) 88%, transparent);
	border-bottom: 1px solid var(--psy-border);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Senza backdrop-filter la barra semitrasparente lascerebbe leggere il
   testo che le scorre sotto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.psy-header { background: var(--psy-page); }
}

.psy-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	min-height: var(--psy-header-height);
	padding-block: 0.875rem;
}

.psy-branding {
	margin-right: auto;
	min-width: 0;
}

.psy-branding__link {
	display: flex;
	flex-direction: column;
	gap: 1px;
	color: var(--psy-text);
}

.psy-branding__link:hover,
.psy-branding__link:focus {
	color: var(--psy-primary);
}

.psy-branding__title {
	margin: 0;
	font-family: var(--psy-font-display);
	font-size: 1.3125rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
	color: inherit;
}

.psy-branding__description {
	margin: 0;
	color: var(--psy-muted);
	font-size: 0.65625rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.psy-branding__logo img {
	display: block;
	max-height: 56px;
	width: auto;
}

/* Menu principale */

.psy-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.psy-nav li {
	position: relative;
}

.psy-nav a {
	display: block;
	color: var(--psy-text-soft);
	font-size: 0.875rem;
	text-decoration: none;
}

.psy-nav a:hover,
.psy-nav a:focus,
.psy-nav .current-menu-item > a,
.psy-nav .current_page_item > a,
.psy-nav .current-menu-ancestor > a {
	color: var(--psy-primary);
}

/* Sottomenu */
.psy-nav .sub-menu {
	position: absolute;
	left: -0.875rem;
	top: 100%;
	display: block;
	min-width: 13rem;
	margin-top: 0.75rem;
	padding: 0.5rem 0;
	background: var(--psy-surface);
	border: 1px solid var(--psy-border);
	border-radius: var(--psy-radius-sm);
	box-shadow: var(--psy-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.psy-nav .sub-menu a {
	padding: 0.5rem 0.875rem;
}

.psy-nav li:hover > .sub-menu,
.psy-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.psy-nav-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	background: transparent;
	border: 1px solid var(--psy-border-strong);
	border-radius: 999px;
	color: var(--psy-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.psy-nav-toggle__bars,
.psy-nav-toggle__bars::before,
.psy-nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	content: "";
}

.psy-nav-toggle__bars {
	position: relative;
}

.psy-nav-toggle__bars::before { position: absolute; top: -6px; }
.psy-nav-toggle__bars::after  { position: absolute; top: 6px; }

/* Call to action dell'intestazione */
.psy-header__cta {
	display: inline-block;
	padding: 0.6875rem 1.25rem;
	background: var(--psy-text);
	border-radius: 999px;
	color: var(--psy-page);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.psy-header__cta:hover,
.psy-header__cta:focus {
	background: var(--psy-primary);
	color: #fff;
}

/*
 * Il menu passa al bottone "Menu" sotto i 1160px, non sotto i 900.
 *
 * La soglia e' misurata, non scelta a occhio: nome del sito (162px) + un menu
 * di otto voci in italiano (716px) + il bottone di contatto (143px) + i due
 * spazi da 24px + i 64px di margine interno del contenitore fanno 1133px. La
 * barra di scorrimento ne toglie altri 15-17 alla finestra, da cui i 1160.
 * Sotto quella larghezza la barra andava a capo e la call to action finiva su
 * una seconda riga, spaiata sotto il nome del sito.
 *
 * Il valore dipende da quante voci ha il menu: aggiungerne una costa circa
 * 85px e va rimisurata. La stessa soglia e' in assets/js/navigation.js.
 */
@media (max-width: 1159px) {
	.psy-nav-toggle {
		display: inline-flex;
		order: 2;
	}

	.psy-header__cta {
		order: 3;
	}

	.psy-nav {
		display: none;
		order: 4;
		width: 100%;
		padding-block: 0.5rem 0.75rem;
		border-top: 1px solid var(--psy-border);
	}

	.psy-nav.is-open {
		display: block;
	}

	.psy-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.psy-nav a {
		padding-block: 0.6rem;
		font-size: 1rem;
	}

	.psy-nav .sub-menu {
		position: static;
		min-width: 0;
		margin: 0;
		padding: 0 0 0 1rem;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* ====================================================================
 * 5. Intestazione delle pagine
 *
 * Variante "plain": occhiello, titolo e sommario sul fondo chiaro, come
 * nelle pagine interne del progetto grafico. Variante "image": la fascia
 * con immagine di sfondo, per chi la preferisce.
 * ================================================================= */

.psy-page-header {
	padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(1.75rem, 4vw, 3rem);
}

.psy-page-header__title {
	margin: 0;
	max-width: 20em;
}

.psy-page-header__subtitle {
	margin: 1.25rem 0 0;
	max-width: 40em;
	color: var(--psy-text-soft);
	font-size: 1.125rem;
	line-height: 1.62;
}

.psy-page-header__meta {
	margin: 1.25rem 0 0;
	color: var(--psy-muted);
	font-size: 0.875rem;
}

/* Variante con immagine */
.psy-page-header--image {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(220px, 34vw, 380px);
	padding-block: clamp(3rem, 8vw, 5.5rem);
	background: var(--psy-dark);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.psy-page-header--image::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(29, 38, 32, 0.45), rgba(29, 38, 32, 0.68));
	content: "";
}

.psy-page-header--image > * {
	position: relative;
	z-index: 1;
}

.psy-page-header--image .psy-eyebrow { color: var(--psy-dark-muted); }
.psy-page-header--image .psy-page-header__title { color: #fff; }
.psy-page-header--image .psy-page-header__subtitle,
.psy-page-header--image .psy-page-header__meta { color: rgba(255, 255, 255, 0.85); }

.psy-main {
	padding-bottom: var(--psy-section);
}

/* Quando la pagina finisce con una fascia a tutta larghezza, lo spazio in
   fondo lascerebbe una striscia chiara fra la fascia e il footer. */
.psy-main:has(> .psy-section:last-child) {
	padding-bottom: 0;
}

/* Senza intestazione il contenuto non deve incollarsi alla barra. */
body:not(.psy-has-page-header) .psy-main {
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

/* ====================================================================
 * 6. Contenuti
 * ================================================================= */

.psy-card {
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--psy-surface);
	border: 1px solid var(--psy-border);
	border-radius: var(--psy-radius);
}

.psy-entry + .psy-entry {
	margin-top: 1.75rem;
}

.psy-entry__title {
	margin-bottom: 0.3em;
}

.psy-entry__title a {
	color: var(--psy-ink);
}

.psy-entry__title a:hover,
.psy-entry__title a:focus {
	color: var(--psy-primary);
}

.psy-entry__meta {
	margin: 0 0 1rem;
	color: var(--psy-muted);
	font-size: 0.875rem;
}

.psy-entry__meta > * + *::before {
	content: " · ";
}

.psy-entry__thumb {
	display: block;
	margin-bottom: 1.25rem;
}

.psy-entry__thumb img {
	width: 100%;
	border-radius: var(--psy-radius-sm);
}

.psy-entry__content {
	color: var(--psy-text-soft);
}

.psy-entry__content h1,
.psy-entry__content h2,
.psy-entry__content h3,
.psy-entry__content h4 {
	margin-top: 1.6em;
}

.psy-entry__content > *:first-child { margin-top: 0; }
.psy-entry__content > *:last-child  { margin-bottom: 0; }

/* Il corpo del testo resta a una lunghezza di riga leggibile anche quando la
   colonna e' piu' larga (pagine senza barra laterale). */
.psy-entry--text {
	max-width: var(--psy-container-text);
}

/* Lista di articoli in archivio */
.psy-entry--teaser {
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--psy-surface);
	border: 1px solid var(--psy-border);
	border-radius: var(--psy-radius);
}

/* Riquadro con bordo interno, per elenchi tipo FAQ o passaggi. */
.psy-stack {
	display: grid;
	gap: 1px;
	background: var(--psy-border);
	border: 1px solid var(--psy-border);
	border-radius: var(--psy-radius-lg);
	overflow: hidden;
}

.psy-stack > * {
	margin: 0;
	padding: clamp(1.75rem, 4vw, 2.125rem);
	background: var(--psy-surface);
}

/* Bottoni */
.psy-button,
.wp-block-button__link {
	display: inline-block;
	padding: 0.9375rem 1.625rem;
	background: var(--psy-primary);
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--psy-primary-contrast);
	font-family: var(--psy-font);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.psy-button:hover,
.psy-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background: var(--psy-primary-dark);
	color: var(--psy-primary-contrast);
}

.psy-button--ghost {
	background: transparent;
	border-color: var(--psy-border-strong);
	color: var(--psy-text);
}

.psy-button--ghost:hover,
.psy-button--ghost:focus {
	background: var(--psy-band);
	border-color: var(--psy-accent-soft);
	color: var(--psy-text);
}

.psy-button--dark {
	background: var(--psy-text);
	color: var(--psy-page);
}

.psy-button--dark:hover,
.psy-button--dark:focus {
	background: var(--psy-primary);
	color: #fff;
}

.psy-button--light {
	background: var(--psy-dark-text);
	color: var(--psy-dark);
}

.psy-button--light:hover,
.psy-button--light:focus {
	background: #fff;
	color: var(--psy-dark);
}

/* Secondario dentro le fasce scure. */
.psy-button--outline-light {
	background: transparent;
	border-color: var(--psy-dark-border);
	color: var(--psy-dark-text);
}

.psy-button--outline-light:hover,
.psy-button--outline-light:focus {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--psy-dark-text);
	color: var(--psy-dark-text);
}

.psy-button--small {
	padding: 0.5625rem 1.125rem;
	font-size: 0.875rem;
}

.psy-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Link "di seguito": testo con filo sotto, non un bottone. */
.psy-link {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--psy-accent-soft);
	font-size: 0.9375rem;
	font-weight: 600;
}

.psy-link:hover,
.psy-link:focus {
	border-bottom-color: var(--psy-primary);
}

.psy-section--dark .psy-link {
	color: var(--psy-dark-text);
	border-bottom-color: var(--psy-dark-border);
}

/* Paginazione */
.psy-pagination {
	margin-top: 2.5rem;
}

.psy-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.psy-pagination .page-numbers {
	display: inline-block;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--psy-surface);
	border: 1px solid var(--psy-border);
	border-radius: 999px;
	color: var(--psy-text);
	font-size: 0.9375rem;
	text-align: center;
	text-decoration: none;
}

.psy-pagination .page-numbers.current,
.psy-pagination .page-numbers:hover,
.psy-pagination .page-numbers:focus {
	background: var(--psy-primary);
	border-color: var(--psy-primary);
	color: var(--psy-primary-contrast);
}

.psy-pagination .page-numbers.dots {
	background: none;
	border-color: transparent;
}

/* Segnaposto per le immagini non ancora caricate. */
.psy-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: repeating-linear-gradient(135deg, var(--psy-band) 0 9px, #eff4ed 9px 18px);
	border-radius: var(--psy-radius);
	color: var(--psy-muted-soft);
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-align: center;
}

/* ====================================================================
 * 7. Sidebar e widget
 * ================================================================= */

.psy-sidebar .widget {
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	background: var(--psy-surface);
	border: 1px solid var(--psy-border);
	border-radius: var(--psy-radius);
}

.psy-sidebar .widget-title {
	margin-bottom: 0.75rem;
	font-size: 1.125rem;
}

.psy-sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.psy-sidebar li + li {
	margin-top: 0.45rem;
}

.psy-sidebar a {
	color: var(--psy-text-soft);
}

.psy-sidebar a:hover,
.psy-sidebar a:focus {
	color: var(--psy-primary);
}

.psy-search {
	display: flex;
	gap: 0.5rem;
}

.psy-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
}

/* ====================================================================
 * 8. Commenti e form
 * ================================================================= */

.psy-comments {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--psy-border);
}

.psy-comments ol {
	padding: 0;
	list-style: none;
}

.psy-comments .children {
	margin-left: 1.5rem;
	padding-left: 1rem;
	border-left: 2px solid var(--psy-border);
}

.comment-body {
	margin-bottom: 1.5rem;
}

label {
	display: inline-block;
	margin-bottom: 0.5rem;
	color: var(--psy-text-soft);
	font-size: 0.84375rem;
	font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select {
	max-width: 100%;
	padding: 0.8125rem 0.875rem;
	background: var(--psy-page);
	border: 1px solid var(--psy-border-strong);
	border-radius: var(--psy-radius-sm);
	color: var(--psy-text);
	font: inherit;
	font-size: 0.96875rem;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--psy-primary);
	outline: 2px solid color-mix(in srgb, var(--psy-primary) 30%, transparent);
	outline-offset: 0;
}

::placeholder {
	color: var(--psy-muted-soft);
}

textarea {
	width: 100%;
	resize: vertical;
}

/* I form dei plugin (WPForms, moduli commenti) ereditano lo stile del tema. */
.wpforms-form input[type="submit"],
.wpforms-form button[type="submit"],
.comment-form input[type="submit"] {
	padding: 0.9375rem 1.625rem;
	background: var(--psy-primary);
	border: 0;
	border-radius: 999px;
	color: var(--psy-primary-contrast);
	font-family: var(--psy-font);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

/* ====================================================================
 * 9. Footer
 * ================================================================= */

.psy-footer {
	background: var(--psy-footer-bg);
	color: var(--psy-footer-text);
	font-size: 0.90625rem;
}

.psy-footer a {
	color: var(--psy-footer-text);
}

.psy-footer a:hover,
.psy-footer a:focus {
	color: #fff;
}

.psy-footer__top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
	gap: 2.5rem 3rem;
	padding-block: clamp(2.75rem, 6vw, 4.125rem) 2.5rem;
}

.psy-footer__brand-title {
	margin: 0 0 0.625rem;
	color: var(--psy-page);
	font-family: var(--psy-font-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.15;
}

.psy-footer__brand-text {
	margin: 0;
	max-width: 26em;
	line-height: 1.6;
}

.psy-footer .widget {
	margin: 0;
}

.psy-footer .widget + .widget {
	margin-top: 1.75rem;
}

.psy-footer .widget-title {
	margin-bottom: 0.75rem;
	color: var(--psy-page);
	font-family: var(--psy-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.psy-footer ul {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.psy-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--psy-footer-border);
	color: var(--psy-footer-faint);
	font-size: 0.78125rem;
}

.psy-footer__bottom a {
	color: var(--psy-footer-faint);
}

/* Copyright a sinistra, credits a destra: li separa il space-between della
   riga, senza margini da aggiustare a mano. */
.psy-footer__copyright {
	margin: 0;
}

/* Nelle colonne del footer i link stanno incolonnati (.psy-footer ul), nella
   barra in fondo no: serve una regola piu' specifica per riportarli in riga. */
.psy-footer .psy-footer__menu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.psy-credits {
	margin: 0;
}

.psy-credits--center { width: 100%; text-align: center; }
.psy-credits--left   { order: -1; }

/* ====================================================================
 * 10. Call to action fissa
 * ================================================================= */

.psy-sticky-cta {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 50;
	padding: 0.875rem 1.375rem;
	background: var(--psy-text);
	border-radius: 999px;
	color: var(--psy-page);
	font-size: 0.90625rem;
	font-weight: 600;
	box-shadow: 0 18px 40px -18px rgba(42, 38, 34, 0.6);
}

.psy-sticky-cta:hover,
.psy-sticky-cta:focus {
	background: var(--psy-primary);
	color: #fff;
}

@media (max-width: 599px) {
	.psy-sticky-cta {
		right: 1rem;
		bottom: 1rem;
	}
}

/* ====================================================================
 * 11. Blocchi e allineamenti
 * ================================================================= */

.alignleft {
	float: left;
	margin: 0.4rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.4rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

/*
 * "Larga" e "a tutta larghezza" occupano la colonna del contenuto, non lo
 * schermo: la colonna puo' avere una barra laterale accanto, e un vero
 * sconfinamento a 100vw finirebbe sotto di essa (oltre a produrre scorrimento
 * orizzontale dove la barra di scorrimento occupa spazio).
 */
.psy-entry__content .alignwide,
.psy-entry__content .alignfull {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.wp-block-image img,
.wp-block-cover {
	border-radius: var(--psy-radius-sm);
}

.wp-caption,
.wp-block-image figcaption {
	color: var(--psy-muted);
	font-size: 0.875rem;
}

.psy-clearfix::after {
	display: table;
	clear: both;
	content: "";
}

@media print {
	.psy-header,
	.psy-topbar,
	.psy-footer,
	.psy-sidebar,
	.psy-sticky-cta {
		display: none;
	}
}