/*
Theme Name: Zoologika
Theme URI: https://zoologika.it
Author: Zoologika
Description: Tema a blocchi (Full Site Editing) per Zoologika, officina di idee autonome. Palette e tipografia derivate dal logo, pattern modificabili dall'Editor del sito, template "Demo" pulito per presentare i plugin ai clienti.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zoologika
*/

/* ==========================================================================
   Zoologika — CSS di supporto.
   Colori, font e spaziature vivono in theme.json: qui solo ciò che i blocchi
   non sanno esprimere. Tutto usa le variabili --wp--preset--*, quindi segue
   anche la variante di stile "Notte".
   ========================================================================== */

:root {
	--zk-radius: 20px;
	--zk-radius-pill: 999px;
	--zk-line: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	--zk-focus: var(--wp--preset--color--teal-light);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Focus ben visibile da tastiera */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--zk-focus);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------- Header ---------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--zk-line);
}
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar header.wp-block-template-part { top: 0; } }

.zk-header { padding-block: 0.6rem; gap: 1.25rem; }
.zk-brand { gap: 0.8rem; flex-wrap: nowrap; }
.zk-brand-mark { margin: 0; flex: none; }
.zk-brand-mark img { width: 68px; height: auto; display: block; }
.zk-wordmark { margin: 0; font-weight: 400; font-size: 1.85rem; line-height: 1; letter-spacing: 0.02em; }
.zk-wordmark a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.zk-tagline { margin: 0.3rem 0 0; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wp--preset--color--contrast); opacity: 0.85; line-height: 1; }
.zk-header .wp-block-navigation { font-weight: 500; }
.zk-header .wp-block-navigation .wp-block-navigation-item__content { padding-block: 0.35rem; }
.zk-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.zk-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.55em;
}
.zk-header .wp-block-search__button { background: transparent; color: inherit; padding: 0.4rem; }
@media (max-width: 781px) {
	.zk-wordmark { font-size: 1.4rem; }
	.zk-brand-mark img { width: 52px; }
	.zk-tagline { display: none; }
}

/* ---------- Pulsanti ---------- */
.wp-block-button__link { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.wp-block-button__link:hover { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--teal);
	border: 2px solid var(--wp--preset--color--teal);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
}

/* ---------- Hero della homepage ---------- */
/* Lo sfondo è un'immagine già composta (crema a sinistra, camaleonte intero a destra):
   nessun velo sopra, così il camaleonte resta nitido e non viene tagliato. */
.zk-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(26rem, 33vw, 34rem);
	background: var(--wp--preset--color--base) url("assets/images/hero.webp") right center / cover no-repeat;
	padding-block: var(--wp--preset--spacing--60);
}
.zk-hero > * { width: 100%; }
.zk-hero .zk-hero-text { max-width: 34rem; margin-left: 0 !important; }
.zk-hero h1 { margin-bottom: var(--wp--preset--spacing--30); }
@media (max-width: 900px) {
	.zk-hero {
		align-items: flex-start;
		min-height: 0;
		padding-bottom: 15rem;
		background: var(--wp--preset--color--base) url("assets/images/hero.webp") 78% bottom / auto 14rem no-repeat;
	}
}

/* ---------- Striscia valori ---------- */
.zk-values { background: color-mix(in srgb, var(--wp--preset--color--surface) 60%, var(--wp--preset--color--base)); border-block: 1px solid var(--zk-line); }
.zk-value { display: grid; grid-template-columns: 3rem 1fr; column-gap: 0.9rem; align-items: start; }
.zk-value .zk-icon { margin: 0; grid-row: span 2; }
.zk-value .zk-icon img { width: 2.75rem; height: auto; display: block; }
.zk-value h3 { margin: 0 0 0.15rem; font-size: 1.15rem; }
.zk-value p { margin: 0; font-size: 0.95rem; line-height: 1.4; }
.zk-values .wp-block-columns { gap: 0; }
.zk-values .wp-block-column { padding-inline: var(--wp--preset--spacing--40); }
.zk-values .wp-block-column + .wp-block-column { border-left: 1px solid var(--zk-line); }
@media (max-width: 781px) {
	.zk-values .wp-block-column { padding-block: var(--wp--preset--spacing--30); }
	.zk-values .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid var(--zk-line); }
}

/* ---------- Sezione servizi ---------- */
.zk-services { background: linear-gradient(135deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--mist) 100%); overflow: hidden; }
.zk-services figure { margin: 0; }
.zk-services img { border-radius: var(--zk-radius); height: auto; }

/* Elenco con spunte */
ul.is-style-checks { list-style: none; padding: 0 0 0 1.25rem; margin-left: 0; border-left: 2px solid var(--wp--preset--color--orange); }
ul.is-style-checks li { position: relative; padding-left: 2rem; margin-block: 0.55rem; }
ul.is-style-checks li::before {
	content: "";
	position: absolute; left: 0; top: 0.25em;
	width: 1.2em; height: 1.2em;
	background: var(--wp--preset--color--teal);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Stili di gruppo ---------- */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--zk-line);
	border-radius: var(--zk-radius);
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--soft);
}
.wp-block-group.is-style-panel-dark {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	border-radius: var(--zk-radius);
	padding: var(--wp--preset--spacing--50);
}
.wp-block-group.is-style-panel-dark :where(h1, h2, h3, h4) { color: var(--wp--preset--color--cream); }
.wp-block-group.is-style-panel-dark a:not(.wp-block-button__link) { color: var(--wp--preset--color--orange); }

/* ---------- Card di plugin / progetti ---------- */
.zk-card-grid .wp-block-post-template > li {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--zk-line);
	border-radius: var(--zk-radius);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--soft);
	display: flex; flex-direction: column;
}
.zk-card-grid .wp-block-post-featured-image { margin: 0; }
.zk-card-grid .wp-block-post-featured-image img { border-radius: 0; }
.zk-card-grid .zk-card-body { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
.zk-card-grid .wp-block-post-title { margin: 0 0 0.4rem; }
.zk-card-grid .wp-block-post-title a { text-decoration: none; }
.zk-card-grid .wp-block-post-excerpt { margin: 0; font-size: 0.95rem; }

/* ---------- Footer ---------- */
footer.wp-block-template-part { margin-block-start: 0; }
.zk-footer { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); }
.zk-footer a { color: var(--wp--preset--color--cream); }
.zk-footer a:hover { color: var(--wp--preset--color--orange); }
.zk-footer h2, .zk-footer h3, .zk-footer h4 { color: var(--wp--preset--color--cream); }
.zk-footer-logo { margin: 0; }
.zk-footer-logo img {
	width: 100%; max-width: 360px; height: auto; display: block;
	-webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 62%, transparent 100%);
	mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 62%, transparent 100%);
}
.zk-footer .zk-legal { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 18%, transparent); font-size: 0.85rem; opacity: 0.85; }

/* ---------- Template Demo ---------- */
.zk-demo-bar { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); font-size: 0.85rem; }
.zk-demo-bar a { color: var(--wp--preset--color--cream); }
.zk-demo-bar .zk-demo-badge { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--ink); border-radius: var(--zk-radius-pill); padding: 0.15em 0.8em; font-weight: 600; margin: 0; }
.zk-demo-stage { background: var(--wp--preset--color--surface); }
/* Le interfacce dei plugin non ereditano decorazioni dal tema */
.zk-demo-stage :where(table) { width: 100%; }

/* ---------- Dettagli ---------- */
.wp-block-post-content > .alignfull:first-child { margin-top: 0; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.wp-block-separator { opacity: 1; border-color: var(--zk-line); }

/* ---------- Sezioni ---------- */
.zk-section { padding-block: var(--wp--preset--spacing--60); }
.zk-cta .wp-block-button__link:hover { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--ink); }
.zk-cta { text-align: center; }
.zk-values.zk-section { padding-block: var(--wp--preset--spacing--40); }

/* Template Demo: barra superiore semplice */
header.wp-block-template-part:has(.zk-demo-bar) { position: static; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; }
.zk-demo-bar { padding-block: 0.55rem; }
.zk-demo-stage.zk-section { padding-block: var(--wp--preset--spacing--40); }

/* Pesi del testo espliciti (i font sono istanze statiche 400/500/600/700) */
h1, h2, h3, h4, h5, h6, .wp-block-heading { font-weight: 600; }
.wp-block-button__link { font-weight: 600; }

/* ---------- Banner nero con logo ---------- */
.zk-banner { background: #161920; padding-block: var(--wp--preset--spacing--30); }
.zk-banner-logo { margin: 0 auto; }
.zk-banner-logo img {
	display: block; width: 100%; max-width: 880px; height: auto; margin-inline: auto;
	-webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 50%, #000 70%, transparent 100%);
	mask-image: radial-gradient(ellipse 70% 72% at 50% 50%, #000 70%, transparent 100%);
}