/*
Theme Name: Dalla Terra alla Forma
Description: A child theme of nelyqo
Template: nelyqo
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dalla-terra-alla-forma
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

html {
scroll-behavior: smooth;
}

/* Smooth, visible hover feedback for every button (fill and outline). */
.wp-element-button {
	transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-element-button:hover {
	transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
	.wp-element-button {
		transition: none;
	}
	.wp-element-button:hover {
		transform: none;
	}
}

/* Typography scale overrides — pull hardcoded parent sizes onto the shared
   theme.json font-size presets instead of one-off values. */
.dtf-site-header__nav {
	font-size: var(--wp--preset--font-size--medium) !important;
}

.dtf-page-lead {
	font-size: var(--wp--preset--font-size--xx-large) !important;
}

.wp-block-details summary {
	font-size: var(--wp--preset--font-size--large);
}

/* Used by the sitewide footer, so it must live outside the front-page-only
   home.css or it silently loses its font-size on every other page. */
.dtf-eyebrow {
	margin: 0 0 30px;
	color: var(--wp--preset--color--primary-strong);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	line-height: 1.4;
	letter-spacing: .19em;
	text-transform: uppercase;
}

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

/* Stat strip (3 columns with vertical dividers) — used on the home page and
   on Chi siamo, so it must live outside the front-page-only home.css. */
.dtf-facts {
	margin-top: clamp(52px, 6vw, 76px);
	padding-top: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	gap: 0;
}

.dtf-facts > .wp-block-column {
	display: block;
	padding: 30px clamp(22px, 3vw, 42px);
	border-left: 1px solid var(--wp--preset--color--border);
}

.dtf-facts > .wp-block-column:first-child {
	padding-left: 0;
	border-left: 0;
}

.dtf-facts h3 {
	margin: 0 0 10px;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
}

.dtf-facts p {
	margin: 0;
	color: var(--wp--preset--color--foreground-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

@media (max-width: 781px) {
	.dtf-facts {
		gap: 30px;
	}

	.dtf-facts > .wp-block-column {
		padding: 24px 0 0;
		border-top: 1px solid var(--wp--preset--color--border);
		border-left: 0;
	}

	.dtf-facts > .wp-block-column:first-child {
		border-top: 0;
	}
}

/* Native <button popovertarget> + [popover] contact box — no JS, no modal
   library. See parts/header.html for the trigger and #dtf-contact-box markup. */
.dtf-contact-box {
	position: fixed;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
	width: min(92vw, 420px);
	max-height: 85vh;
	overflow-y: auto;
	padding: clamp(28px, 4vw, 40px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	box-shadow: 0 20px 60px var(--wp--custom--color--shadow-medium, rgb(0 0 0 / 18%));
}

.dtf-contact-box::backdrop {
	background: var(--wp--custom--color--overlay, rgb(0 0 0 / 45%));
}

.dtf-contact-box__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}

.dtf-contact-box p:not(.dtf-eyebrow) {
	margin: 0.6em 0;
}

.dtf-contact-box a {
	color: var(--wp--preset--color--primary-strong);
}

@media (max-width: 900px) {
	.dtf-site-header__main {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--wp--preset--spacing--30);
		/* A filtered ancestor confines the fixed navigation to the header. */
		backdrop-filter: none;
		background: var(--wp--preset--color--foreground);
	}

	.dtf-site-header__main > .wp-block-buttons {
		display: flex;
		grid-column: 1 / -1;
	}

	.dtf-site-header__main > .wp-block-buttons .wp-block-button,
	.dtf-site-header__main > .wp-block-buttons .wp-block-button__link {
		width: 100%;
	}

	.dtf-site-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		height: 100dvh;
		box-sizing: border-box;
		overflow-y: auto;
		padding: var(--wp--preset--spacing--50);
		background: var(--wp--preset--color--foreground);
		color: var(--wp--preset--color--on-primary);
	}

	.dtf-site-header .is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch;
		padding-top: var(--wp--preset--spacing--70);
		gap: var(--wp--preset--spacing--40);
	}

	.dtf-site-header .is-menu-open .wp-block-navigation__container,
	.dtf-site-header .is-menu-open .wp-block-navigation-item {
		align-items: flex-start;
		width: 100%;
		gap: var(--wp--preset--spacing--30);
	}

	.dtf-site-header .is-menu-open .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--x-large);
		font-weight: 400;
		line-height: 1.4;
		min-height: 44px;
	}

	.dtf-site-header .is-menu-open .wp-block-navigation__submenu-container {
		align-items: flex-start;
		padding: var(--wp--preset--spacing--30) !important;
	}

	.dtf-site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--system-sans);
		font-size: var(--wp--preset--font-size--medium);
	}

	.dtf-site-header .wp-block-navigation__responsive-container-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	.dtf-site-header .wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: inline-flex !important;
	}

	.dtf-site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* ============================================
   SEZIONE INSEGNANTE - SOVRAPPOSIZIONE IMMAGINI
   ============================================ */

/* Contenitore della colonna media */
.dtf-teacher__media {
    position: relative;
    overflow: hidden; /* Taglia le immagini che escono */
}

/* Contenitore delle due immagini (position absolute) */
.dtf-teacher__media-grid {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* Rapporto d'aspetto 4:3, adatta alla foto principale */
    /* Se la foto principale ha un rapporto diverso, cambia questo valore */
}

/* Wrapper per ogni immagine */
.dtf-teacher__img-wrapper {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Immagine principale (quella di sinistra) */
.dtf-teacher__img-wrapper--main {
    top: 0;
    left: 0;
    width: 78%;
    height: 100%;
    z-index: 1;
    transform: rotate(-2deg);
}

/* Immagine sovrapposta (quella di destra) */
.dtf-teacher__img-wrapper--overlay {
    bottom: 10%;
    right: 0;
    width: 55%;
    height: 65%;
    z-index: 2;
    transform: rotate(3deg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Stile delle immagini */
.dtf-teacher__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Copre il wrapper mantenendo le proporzioni */
    object-position: center;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 992px) {
    .dtf-teacher__media-grid {
        padding-bottom: 85%; /* Più alto su tablet */
    }

    .dtf-teacher__img-wrapper--main {
        width: 85%;
    }

    .dtf-teacher__img-wrapper--overlay {
        width: 60%;
        height: 55%;
        bottom: 5%;
    }
}

/* Full-bleed dark photo band with a centered italic line — used on the
   home page and on Chi siamo, so it must live outside the front-page-only
   home.css. */
.dtf-transition-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 32px clamp(22px, 6vw, 88px);
	color: var(--wp--preset--color--on-primary);
}

.dtf-transition-band p {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-style: italic;
	letter-spacing: .035em;
	text-align: center;
}

.dtf-transition-band::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(90deg, rgb(79 44 31 / 18%), transparent 45%, rgb(243 166 62 / 12%)), repeating-linear-gradient(105deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 13px);
	pointer-events: none;
}

/* Full-bleed sections must butt directly against each other — no stray
   sliver of page background between two consecutive alignfull bands.
   Applies sitewide so every page built the same way stays consistent. */
.entry-content > .alignfull + .alignfull {
	margin-top: 0;
}

/* When a page ends with a full-bleed section (dark CTA band, transition
   band, etc.), the main wrapper's bottom padding leaves an ugly stray
   sliver of background between that band and the footer. Drop it. */
main.wp-block-group:has(> .wp-block-post-content > .alignfull:last-child) {
	padding-bottom: 0;
}

/* Chi siamo — framed hero image, quote panel, practical-info row */
.dtf-framed-image {
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 16px 40px rgb(56 51 48 / 14%);
}


@media (max-width: 768px) {
    .dtf-teacher__media {
        margin-bottom: 30px;
    }

    .dtf-teacher__media-grid {
        padding-bottom: 65%; /* Più basso su mobile */
    }

    .dtf-teacher__img-wrapper--main {
        width: 90%;
        transform: rotate(-1deg);
    }

    .dtf-teacher__img-wrapper--overlay {
        width: 65%;
        height: 50%;
        bottom: 0;
        right: 0;
        transform: rotate(2deg);
    }
}