/*
Theme Name:   Officina di Stampa
Description:  Tema child di Blocksy per officinadistampa.it. Palette ispirata alla quadricromia (CMYK), font ospitati in locale.
Template:     blocksy
Version:      1.0.2
Author:       Officina di Stampa
Text Domain:  blocksy-officina
*/

/* ---------- Font ospitati in locale (niente Google Fonts: GDPR) ---------- */
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Literata";
	src: url("fonts/literata-latin-wght-normal.woff2") format("woff2-variations");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Literata";
	src: url("fonts/literata-latin-wght-italic.woff2") format("woff2-variations");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

/* ---------- Palette (sovrascrive la palette di Blocksy) ----------
   1 magenta  link e pulsanti      (5,1:1 su bianco)
   2 ciano    hover                (5,3:1 su bianco)
   3 testo                         (13,9:1)
   4 titoli / nero di quadricromia
   5 bordi   6 carta   7 carta chiara   8 bianco
   Ciano e giallo pieni sono solo decorativi, mai per il testo su bianco. */
:root:root {
	--theme-palette-color-1: #D6006F;
	--theme-palette-color-2: #0072A3;
	--theme-palette-color-3: #2B2B3A;
	--theme-palette-color-4: #14141F;
	--theme-palette-color-5: #E6E3EA;
	--theme-palette-color-6: #F6F3EE;
	--theme-palette-color-7: #FBFAF7;
	--theme-palette-color-8: #FFFFFF;

	--os-cyan: #00A3E0;
	--os-magenta: #D6006F;
	--os-yellow: #FFD400;
	--os-key: #14141F;
	--os-muted: #5E5E6E;

	--os-font-body: "Literata", Georgia, "Times New Roman", serif;
	--os-font-head: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;

	--theme-font-family: var(--os-font-body);
	--theme-font-size: 18px;
	--theme-line-height: 1.7;
	--theme-content-spacing: 1.4em;
}

body {
	font-family: var(--os-font-body);
	background-color: var(--theme-palette-color-7);
}

/* Menu, metadati, moduli e piccoli testi d'interfaccia in Bricolage (sans) */
.ct-header, .ct-footer, .entry-meta, .ct-breadcrumbs, .ct-pagination,
.ct-sidebar, input, select, textarea, button, label {
	--theme-font-family: var(--os-font-head);
	font-family: var(--os-font-head);
}

/* Barra CMYK in cima alla pagina */
body::before {
	content: "";
	display: block;
	height: 6px;
	background: linear-gradient(90deg,
		var(--os-cyan) 0 25%,
		var(--os-magenta) 25% 50%,
		var(--os-yellow) 50% 75%,
		var(--os-key) 75% 100%);
}

/* ---------- Titoli ---------- */
h1, h2, h3, h4, h5, h6,
.site-title, .entry-title, .page-title, .ct-widget .widget-title {
	--theme-font-family: var(--os-font-head);
	font-family: var(--os-font-head);
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--os-key);
	text-wrap: balance;
}
h1, .entry-header .page-title { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }

/* Nome del sito: "Officina" con sottolineatura gialla a evidenziatore */
.site-title a {
	font-weight: 800;
	letter-spacing: -0.03em;
	background: linear-gradient(transparent 62%, var(--os-yellow) 62% 92%, transparent 92%);
	padding: 0 0.1em;
}
.site-description { color: var(--os-muted); }

/* Titolo dell'articolo singolo: sottolineatura a evidenziatore ciano */
.single .entry-header .page-title {
	background: linear-gradient(transparent 70%, color-mix(in srgb, var(--os-cyan) 35%, transparent) 70%);
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* ---------- Testo ---------- */
.entry-content { max-width: 70ch; margin-inline: auto; }
.entry-content p { text-wrap: pretty; }
.entry-content a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--os-magenta) 40%, transparent);
}
.entry-content a:hover { text-decoration-color: currentColor; }
.entry-content blockquote {
	position: relative;
	border: 0;
	background: var(--theme-palette-color-6);
	border-radius: 14px;
	padding: 1.6em 1.4em 1.2em 3.4em;
	font-family: var(--os-font-head);
	font-size: 1.25em;
	line-height: 1.4;
}
.entry-content blockquote::before {
	content: "\201C";
	position: absolute;
	inset: 0.05em auto auto 0.25em;
	font-size: 4em;
	line-height: 1;
	font-weight: 800;
	color: var(--os-magenta);
}
mark, .entry-content mark { background: var(--os-yellow); color: var(--os-key); padding: 0 .15em; }
::selection { background: var(--os-yellow); color: var(--os-key); }

/* ---------- Badge delle categorie, a rotazione C / M / Y ---------- */
.entry-meta .meta-categories a,
.ct-dynamic-data-layer .meta-categories a {
	display: inline-block;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--os-key);
	background: var(--os-yellow);
}
.entry-meta .meta-categories a:nth-child(3n+1) { background: var(--os-cyan); }
.entry-meta .meta-categories a:nth-child(3n+2) { background: var(--os-magenta); color: #fff; }

/* ---------- Schede degli articoli (archivio e home) ----------
   Ombra sfalsata piena: richiama il "fuori registro" della stampa.
   Selettore con [data-cards] per battere ".entries[data-cards=boxed] .entry-card" di Blocksy. */
.entries[data-cards] > article.entry-card {
	--theme-box-shadow: none;
	background: var(--theme-palette-color-8);
	border: 2px solid var(--os-key);
	border-radius: 14px;
	box-shadow: 6px 6px 0 var(--os-cyan);
	transition: transform .18s ease, box-shadow .18s ease;
	overflow: hidden;
}
.entries[data-cards] > article.entry-card:nth-child(3n+2) { box-shadow: 6px 6px 0 var(--os-magenta); }
.entries[data-cards] > article.entry-card:nth-child(3n+3) { box-shadow: 6px 6px 0 var(--os-yellow); }
.entries[data-cards] > article.entry-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 9px 9px 0 var(--os-key);
}
.entries[data-cards] > article.entry-card .entry-title a { color: var(--os-key); }
.entries[data-cards] > article.entry-card .entry-title a:hover { color: var(--os-magenta); }

/* ---------- Pulsanti ---------- */
.ct-button, .wp-element-button, .wp-block-button__link,
button[type="submit"], input[type="submit"] {
	font-family: var(--os-font-head);
	font-weight: 700;
	border-radius: 999px;
	border: 2px solid var(--os-key);
	box-shadow: 4px 4px 0 var(--os-key);
	transition: transform .15s ease, box-shadow .15s ease;
}
.ct-button:hover, .wp-element-button:hover, .wp-block-button__link:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--os-key);
}

/* Il pulsante-icona della ricerca resta piatto */
.ct-search-form button, .ct-search-form button:hover,
.ct-search-form [type="submit"], .ct-search-form [type="submit"]:hover {
	border: 0;
	box-shadow: none;
	transform: none;
}

/* ---------- Header e footer ---------- */
.ct-header [data-row="middle"] { border-bottom: 2px solid var(--os-key); }
.ct-footer { border-top: 6px solid var(--os-key); }

/* Focus visibile per chi naviga da tastiera */
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 3px solid var(--os-cyan);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.entries[data-cards] > article.entry-card, .ct-button, .wp-element-button, .wp-block-button__link { transition: none; }
	.entries[data-cards] > article.entry-card:hover { transform: none; }
}