/*
Theme Name: Nicola Taddonio
Theme URI: https://nicolataddonio.com
Author: Nicola Taddonio
Description: Tema a blocchi per il sito personale di Nicola Taddonio, archeologo a Matera. Chiaro, sobrio, senza plugin richiesti; compatibile con Polylang e Rank Math.
Version: 1.3.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nicolataddonio
*/

/* Most of the look lives in theme.json; this file holds what theme.json cannot express. */

a { text-underline-offset: 4px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }

/* Header */
.nt-bar { padding-block: 24px; }
.nt-bar .wp-block-navigation a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--wp--preset--color--accent); }

/* Section rhythm */
main .nt-section { margin-block-start: var(--wp--preset--spacing--70); }
main .nt-hero { margin-block-start: clamp(16px, 3vw, 40px); }

/* Hero */
.nt-sub { color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--x-large); font-weight: 600; line-height: 1.3; }
.nt-hero .wp-block-buttons { margin-block-start: 2rem; }

/* Secondary button */
.wp-block-button.is-style-quiet .wp-block-button__link { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); }
.wp-block-button.is-style-quiet .wp-block-button__link:hover,
.wp-block-button.is-style-quiet .wp-block-button__link:focus { background: var(--wp--preset--color--surface-hover); color: var(--wp--preset--color--contrast); }
.nt-band .wp-block-button.is-style-quiet .wp-block-button__link { background: var(--wp--preset--color--base); }

/* In breve */
.wp-block-list.nt-facts { list-style: none; padding: 0; display: grid; gap: 1.5rem; }
.nt-facts strong { display: block; font-size: var(--wp--preset--font-size--large); line-height: 1.3; }

/* Full-width bands in light stone */
.nt-band { background: var(--wp--preset--color--surface); padding-block: clamp(64px, 8vw, 104px); }

/* Cards */
.wp-block-group.nt-card { background: var(--wp--preset--color--surface); border-radius: var(--wp--custom--radius); padding: 28px 32px 32px; }
.nt-band .wp-block-group.nt-card { background: var(--wp--preset--color--base); }
.wp-block-group.nt-card > * { margin-block: 0; }
.wp-block-group.nt-card > * + * { margin-block-start: .5rem; }
.nt-date { color: var(--wp--preset--color--accent); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Cards that open with a picture or a clip */
.wp-block-group.nt-card--media { padding: 0; overflow: hidden; }
.wp-block-group.nt-card--media > :not(figure) { padding-inline: 32px; }
.wp-block-group.nt-card--media > h3 { margin-block-start: 28px; }
.wp-block-group.nt-card--media > :last-child { padding-block-end: 32px; }
.nt-card--media .wp-block-image img { border-radius: 0; }

/* Autoplaying clip with a pause control */
.nt-video { position: relative; margin: 0; }
.nt-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.nt-video__pause {
	position: absolute; right: 12px; bottom: 12px; min-height: 36px; padding: 0 14px;
	font: 600 var(--wp--preset--font-size--small)/1 var(--wp--preset--font-family--public-sans);
	color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--base);
	border: 0; border-radius: var(--wp--custom--radius); cursor: pointer; transition: background-color .2s;
}
.nt-video__pause:hover { background: var(--wp--preset--color--surface-hover); }

/* Chiusura */
.nt-close__q { font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem); line-height: 1.2; max-width: 24ch; }
.nt-close h2 { color: var(--wp--preset--color--accent); }

/* Footer */
.nt-foot { padding-block: 72px 40px; }
.nt-foot ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.nt-foot .nt-muted, .nt-legal { color: var(--wp--preset--color--muted); }
.nt-legal { font-size: var(--wp--preset--font-size--small); }

/* Phone */
@media (max-width: 781px) {
	.nt-hero .wp-block-column:last-child { order: -1; }
	.nt-close .wp-block-buttons, .nt-close .wp-block-button { width: 100%; }
	.nt-close .wp-block-button__link { width: 100%; }
	.wp-block-group.nt-card { padding: 24px; }
	.wp-block-group.nt-card--media { padding: 0; }
	.wp-block-group.nt-card--media > :not(figure) { padding-inline: 24px; }
	.wp-block-group.nt-card--media > :last-child { padding-block-end: 24px; }
}

/* Motion: a light rise as parts enter. CSS only; off for reduced motion, on phones, and where unsupported. */
@keyframes nt-rise { from { opacity: 0; transform: translateY(20px); } }
@media (prefers-reduced-motion: no-preference) and (min-width: 782px) {
	@supports (animation-timeline: view()) {
		main .nt-card, main .nt-facts li, main .nt-section:not(.nt-hero) .wp-block-image {
			animation: nt-rise linear forwards; /* forwards, not both: visible before it scrolls in */
			animation-timeline: view();
			animation-range: entry 5% entry 60%;
		}
		main .nt-card:nth-child(2), main .nt-facts li:nth-child(2) { animation-range: entry 12% entry 67%; }
		main .nt-card:nth-child(3), main .nt-facts li:nth-child(3) { animation-range: entry 19% entry 74%; }
		main .nt-card:nth-child(4) { animation-range: entry 26% entry 81%; }
	}
}