/*!
Theme Name: myNews
Theme URI: https://mynews.it/
Author: MicroStudio.iT — ne(w)eb agency
Author URI: https://microstudio.it/
Description: Tema a blocchi (FSE) editoriale per testate giornalistiche, pensato per WordPress 7.0 "Armstrong". Home con copertina a pieno schermo decisa dalla redazione, menu leggibile sopra ogni foto, controllo redazionale di copertina e primo piano, feed Instagram nel footer, tipografia fluida, login brandizzato responsive e pannello di gestione unico. Veloce, pulito, moderno.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 3.5.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mynews
Tags: full-site-editing, block-patterns, news, magazine, blog, custom-colors, custom-logo, editor-style, featured-images, full-width-template, responsive, threaded-comments, translation-ready
*/

/* =====================================================================
   myNews — rifiniture front-end
   I token (colori, tipografia, spazi) vivono in theme.json.
   Qui restano solo comportamenti che theme.json non esprime:
   copertine a piena altezza, occhielli, micro-interazioni, a11y,
   dark mode automatica e stile di stampa.
   ===================================================================== */

:where(body) {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

/* --- Misura di lettura confortevole per il corpo articolo --- */
.myn-measure > :where(p, ul, ol, h2, h3, h4, blockquote, figure) {
	max-inline-size: var(--wp--custom--measure, 68ch);
}

/* --- Occhiello / kicker editoriale (categoria sopra il titolo) --- */
.myn-kicker {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}
.myn-kicker::before {
	content: "";
	inline-size: 1.6em;
	block-size: 2px;
	background: var(--wp--preset--color--signal);
	display: inline-block;
}

/* --- Etichetta "In diretta / In evidenza" --- */
.myn-live {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #fff;
	background: var(--wp--preset--color--signal);
	padding: 0.28em 0.7em;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}
.myn-live::before {
	content: "";
	inline-size: 0.5em;
	block-size: 0.5em;
	border-radius: 50%;
	background: #fff;
	animation: myn-pulse 1.6s ease-in-out infinite;
}
@keyframes myn-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* =====================================================================
   COPERTINE A PIENO SCHERMO
   Applicare la classe .is-style-copertina-piena a un blocco Copertina
   (core/cover) con "Usa immagine in evidenza" attivo.
   ===================================================================== */
.wp-block-cover.is-style-copertina-piena {
	min-block-size: clamp(60vh, 78vh, 90vh);
	align-items: end;
	color: #fff;
}
.wp-block-cover.is-style-copertina-piena .wp-block-cover__inner-container {
	max-inline-size: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	inline-size: 100%;
	padding-block-end: clamp(2rem, 6vh, 4.5rem);
}
.wp-block-cover.is-style-copertina-piena :where(h1, h2, .wp-block-post-title) {
	color: #fff;
	text-shadow: 0 1px 30px rgba(10,12,16,0.35);
	font-size: var(--wp--preset--font-size--display);
	max-inline-size: 20ch;
}
.wp-block-cover.is-style-copertina-piena a { color: #fff; }
.wp-block-cover.is-style-copertina-piena .myn-kicker { color: #fff; }
.wp-block-cover.is-style-copertina-piena .myn-kicker::before { background: var(--wp--preset--color--signal); }

/* Zoom lento e discreto sull'immagine di copertina (disattivato se reduce-motion) */
.wp-block-cover.is-style-copertina-piena .wp-block-cover__image-background {
	transition: transform 12s ease-out;
}
.wp-block-cover.is-style-copertina-piena:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}

/* =====================================================================
   SCHEDE ARTICOLO (griglia news)
   ===================================================================== */
.myn-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	overflow: clip;
	transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
	block-size: 100%;
}
.myn-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lifted);
}
.myn-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	inline-size: 100%;
	transition: transform var(--wp--custom--transition);
}
.myn-card:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.myn-card .wp-block-post-title { font-size: var(--wp--preset--font-size--large); }
.myn-card .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.myn-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }

/* =====================================================================
   TESTATA
   ===================================================================== */
.myn-header {
	border-block-end: 1px solid var(--wp--preset--color--line);
	backdrop-filter: saturate(1.2) blur(6px);
	background: color-mix(in srgb, var(--wp--preset--color--paper) 86%, transparent);
	position: sticky;
	top: 0;
	z-index: 30;
}
/* Testata trasparente sopra le copertine immersive */
.myn-header--immersivo {
	border-block-end: 0;
	background: transparent;
	position: absolute;
	inset-inline: 0;
	backdrop-filter: none;
}
.myn-header--immersivo,
.myn-header--immersivo a,
.myn-header--immersivo .wp-block-site-title a { color: #fff; }

/* =====================================================================
   NAVIGAZIONE — sottolineatura animata
   ===================================================================== */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35em;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 0;
	block-size: 2px;
	background: currentColor;
	transition: inline-size var(--wp--custom--transition);
}
.wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
	inline-size: 100%;
}

/* =====================================================================
   ACCESSIBILITÀ — focus sempre visibile
   ===================================================================== */
:where(a, button, input, select, textarea, .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 3px;
}
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100000;
	padding: 0.6em 1em;
	background: var(--wp--preset--color--ink);
	color: #fff;
	border-radius: 8px;
}

/* =====================================================================
   DARK MODE automatica (rispetta le preferenze di sistema)
   Attivabile/disattivabile dal pannello myNews.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
	body.myn-auto-dark {
		--wp--preset--color--paper: #0D1117;
		--wp--preset--color--surface: #151B23;
		--wp--preset--color--ink: #ECEAE4;
		--wp--preset--color--ink-soft: #B9BEC6;
		--wp--preset--color--line: #262E38;
		--wp--preset--color--muted: #9AA1AB;
	}
	body.myn-auto-dark .myn-header {
		background: color-mix(in srgb, #0D1117 86%, transparent);
	}
	body.myn-auto-dark img:not([src*=".svg"]) { filter: brightness(0.94) contrast(1.02); }
}

/* =====================================================================
   MOTION RIDOTTO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.wp-block-cover.is-style-copertina-piena:hover .wp-block-cover__image-background { transform: none; }
}

/* =====================================================================
   STAMPA — pulizia per la lettura/archiviazione
   ===================================================================== */
@media print {
	.myn-header, .wp-block-navigation, .wp-block-post-comments-form,
	.myn-live, footer, .wp-block-buttons { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.wp-block-cover.is-style-copertina-piena { min-block-size: auto; color: #000; }
	.wp-block-cover.is-style-copertina-piena :where(h1,h2,.wp-block-post-title) { color: #000; text-shadow: none; }
	a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}