/*
 Theme Name: Blocksy Child
 Template: blocksy
 Description: Child theme zerozero.it — skin minimal bianco/nero/rosso, titoli Silkscreen, body Inter
*/

/* =========================================================
   SKIN ZEROZERO — minimal
   Bianco #ffffff · inchiostro #0f0f0f · rosso #d71921
   Titoli: Silkscreen (global font Elementor / Blocksy)
   Body:   Inter variabile (self-hosted via functions.php)
   Card: bordo nero 1.5px, radius 24, hover rosso
   I blocchi portano classi .nn-* impostate nell'editor.
   ========================================================= */

:root {
  --zz-bg: #ffffff;
  --zz-ink: #0f0f0f;
  --zz-ink-soft: #6a6a6a;
  --zz-line: #0f0f0f;
  --zz-red: #d71921;
  --zz-radius: 24px;
  --zz-radius-pill: 999px;
}

/* ---------- BASE ---------- */
body { font-family: 'InterVar', system-ui, sans-serif; background: var(--zz-bg); color: var(--zz-ink); }

/* ---------- CLASSI GENERICHE (da editor Elementor) ---------- */
/* card: superficie bianca, bordo netto, lift rosso al hover */
.nn-card {
  background: var(--zz-bg);
  border: 1.5px solid var(--zz-line);
  border-radius: var(--zz-radius);
  box-shadow: none;
  transition: transform .2s ease, border-color .2s ease;
}
.nn-card:hover { border-color: var(--zz-red); transform: translateY(-3px); }

/* icone dentro card: monocrome nere, rosse al hover della card */
.nn-card .elementor-icon-box-icon .elementor-icon,
.nn-card .elementor-icon-box-icon .elementor-icon i,
.nn-card .elementor-icon-box-icon .elementor-icon svg { transition: color .2s ease, fill .2s ease; }
.nn-card:hover .elementor-icon-box-icon .elementor-icon,
.nn-card:hover .elementor-icon-box-icon .elementor-icon i,
.nn-card:hover .elementor-icon-box-icon .elementor-icon svg { }

/* label uppercase spaziata */
.nn-label {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
}

/* ---------- BOTTONI ELEMENTOR (outline → hover rosso) ---------- */
.nn-btn .elementor-button,
.nn-btn .elementor-button:hover {
  background: var(--zz-bg) !important;
  color: var(--zz-ink) !important;
  border: 1.5px solid var(--zz-ink) !important;
  border-radius: var(--zz-radius-pill) !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
  box-shadow: none !important;
}
.nn-btn .elementor-button:hover { background: var(--zz-red) !important; border-color: var(--zz-red) !important; color: #fff !important; }
/* primario: pieno nero */
.nn-btn--primary .elementor-button { background: var(--zz-ink) !important; color: var(--zz-bg) !important; }
.nn-btn--primary .elementor-button * { color: var(--zz-bg) !important; }
.nn-btn--primary .elementor-button:hover { background: var(--zz-red) !important; border-color: var(--zz-red) !important; color: #fff !important; }

/* ---------- CARD POSTS (skin cards, archivio/vetrina) ---------- */
.elementor-posts--skin-cards .elementor-post__card {
  background: var(--zz-bg);
  border: 1.5px solid var(--zz-line);
  border-radius: var(--zz-radius);
  box-shadow: none;
  transition: transform .2s ease, border-color .2s ease;
}
.elementor-posts--skin-cards .elementor-post__card:hover { border-color: var(--zz-red); transform: translateY(-3px); }
.elementor-post__title, .elementor-post__title a { color: var(--zz-ink); }
.elementor-post__read-more { color: var(--zz-ink); }
.elementor-post__read-more:hover { color: var(--zz-red); }
.elementor-post__meta, .elementor-post__excerpt p { color: var(--zz-ink-soft); }

/* ---------- SHORTCODE WATCHFACE ---------- */
.wf-title {
  font-family: 'Silkscreen', monospace;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(40px, 4.6vw, 65px);
  line-height: 1.15;
  color: var(--zz-ink);
  margin: 0 0 18px;
  text-align: center;
}

/* riquadro attorno al quadrante */
.wf-aod__stage {
  background: var(--zz-bg);
  border: 1.5px solid var(--zz-line);
  border-radius: var(--zz-radius);
}
.wf-aod__img { border-radius: 16px; }
/* entrambe le immagini nella stessa identica box: lo switch non salta */
.wf-aod__img--main {
  position: absolute;
  inset: 28px;
  width: calc(100% - 56px);
  height: calc(100% - 56px);
  object-fit: contain;
}
.wf-aod__switch {
  background: var(--zz-bg);
  border: 1.5px solid var(--zz-line);
  border-radius: var(--zz-radius-pill);
}
.wf-aod__btn {
  border: 0;
  background: transparent;
  padding: 9px 22px;
  border-radius: var(--zz-radius-pill);
  font-family: 'InterVar', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 600;
  color: var(--zz-ink-soft);
  cursor: pointer;
  transition: all .25s ease;
}
.wf-aod__btn:hover {

}
.wf-aod__btn.is-active { 
  background: var(--zz-red); color: #fff; 
    box-shadow: 0 0 10px #0005;
}
.wf-aod__btn:not(.is-active):hover { 
  color: var(--zz-red); 
}

/* badge Play: bianco bordo nero, glyph a colori, hover rosso */
.wf-store--play {
  background: var(--zz-bg);
  color: var(--zz-ink);
  border: 1.5px solid var(--zz-ink);
  border-radius: 18px;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.wf-store--play:hover { background: var(--zz-red); border-color: var(--zz-red); color: #fff; transform: translateY(-2px); }
.wf-store--play:hover .wf-store__small, .wf-store--play:hover .wf-store__big { color: #fff; }
.wf-store__small { letter-spacing: .16em; }
.wf-store--soon {
  background: transparent;
  color: var(--zz-ink-soft);
  border: 1.5px dashed var(--zz-ink-soft);
  border-radius: var(--zz-radius-pill);
}
.wf-store__dot { background: #ff9800; box-shadow: 0 0 0 4px rgba(207, 179, 20, 0.301); }

/* crediti footer: riga Prismanet */
.zz-credit {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--zz-ink-soft);
}
.zz-credit img { opacity: .85; transition: opacity .2s ease; }
.zz-credit a:hover img { opacity: 1; }

/* immagini contenuto nei post: pulite, niente bordi nè altezze forzate */
.elementor-widget-theme-post-content img,
.wp-block-image img {
  height: auto;
  max-width: 100%;
  border-radius: 14px;
  background: var(--zz-bg);
}

/* ---------- HEADER BLOCKSY ---------- */
.site-header [data-row],
header.ct-header [data-row] { background: var(--zz-bg); border-bottom: 1.5px solid var(--zz-line); }
.ct-header [data-menu] ul li a:hover { color: var(--zz-red); }
.ct-header [data-menu] .current-menu-item > a { color: var(--zz-ink); }

/* hero fascia titolo pagina: bianca, titolo GROSSO con trattino rosso pixel */
.hero-section, .hero-section[data-type="type-1"], .hero-section[data-type="type-2"] {
  background: var(--zz-bg) !important;
  background-image: none !important;
  border-bottom: 1.5px solid var(--zz-line);
}
.hero-section .page-title, .entry-header .page-title {
  font-family: 'Silkscreen', monospace;
  text-transform: uppercase;
  color: var(--zz-ink);
  font-size: clamp(30px, 4.6vw, 65px) !important;
  letter-spacing: .04em;
  line-height: 1.2;
}
/* accentino pixel sotto i titoli di pagina (stesso DNA del .wf-title) */
.hero-section .page-title::after, .entry-header .page-title::after {
  content: '';
  display: block;
  width: 64px; height: 4px;
  margin: 14px auto 0;
  background: var(--zz-red);
}

/* titoli di pagina: ogni H1 (Elementor) ha lo stesso DNA: Silkscreen grande + trattino rosso pixel */
h1.elementor-heading-title {
  font-size: clamp(34px, 4.6vw, 65px);
  letter-spacing: .04em;
  line-height: 1.2;
}

/* ---------- RITOCCHI DI CARATTERE ---------- */
::selection { background: var(--zz-red); color: #fff; }
/* card: ombra piatta rossa al hover invece del solo bordo */
.nn-card:hover, .elementor-posts--skin-cards .elementor-post__card:hover {
  box-shadow: 0 10px 0 -4px rgba(215, 25, 33, .12);
}
/* pagination: pillole */
.ct-pagination a, .page-numbers {
  border: 1.5px solid var(--zz-line);
  border-radius: var(--zz-radius-pill);
  background: var(--zz-bg);
  color: var(--zz-ink);
  font-weight: 600;
}
.ct-pagination a:hover, .page-numbers:hover { border-color: var(--zz-red); color: var(--zz-red); }
.ct-pagination { margin-bottom: 40px; }

/* ---------- FOOTER ---------- */
footer.site-footer, #colophon { background: var(--zz-bg); color: var(--zz-ink-soft); }
/* linea d'ingresso netta + accento rosso pixel */
footer.site-footer, .ct-footer { border-top: 1.5px solid var(--zz-line); position: relative; }

/* titoli colonna footer: Silkscreen già da theme_mod; link: sottile ma reattivo */
.ct-footer a { text-decoration: none; }
.ct-footer a:hover { color: var(--zz-red); }
.ct-footer [data-id="copyright"] { text-align: center; color: var(--zz-ink-soft); }
.ct-footer [data-id="copyright"] strong { color: var(--zz-ink); font-weight: 600; }

/* Home: card "Esplora il sito" simmetriche (regola di layout dal child originale) */
#icons { align-items: stretch; }
#icons > .elementor-widget { flex: 1 1 0; min-width: 0; display: flex; }
#icons > .elementor-widget > .elementor-widget-container { display: flex; flex-direction: column; width: 100%; }
@media (max-width: 767px) { #icons { flex-direction: column; } }