/*
Theme Name: HagalArt (Blocksy child)
Template: blocksy
Description: Tema figlio di Blocksy per HagalArt. Contenuti a blocchi Gutenberg.
Version: 1.0.8
Text Domain: hagalart
*/

/* =====================================================================
   COME È FATTO QUESTO FILE (pulizia del 11 ott 2026)
   - Font, colori generali, pulsanti, header, barra laterale, larghezza del sito:
     si regolano da Aspetto → Personalizza (Blocksy), NON da qui.
   - Qui ci sono solo gli stili di base delle classi "ha-…" usate nei contenuti
     (sezioni, card, hero, footer…). Nessuna regola è forzata (!important) su
     colori, font, dimensioni o spaziature: quello che imposti in un blocco
     (Colore, Tipografia, Dimensioni) ha sempre la precedenza.
   - Eccezioni dichiarate (servono a far funzionare un effetto, non a imporre uno stile):
     hero animato della home, stile Galleria "Carosello", galleria "mosaico" delle serie,
     galleria Modula, sfondo del lightbox, slider della scheda opera (sempre quadrato), aspetto dell'editor.
   ===================================================================== */

:root {
  --ha-nero: #121212;
  --ha-notte: #1A1523;
  --ha-viola: #9B7BD8;
  --ha-viola-hover: #AD90E0;
  --ha-oro: #C9A227;
  --ha-oro-hover: #D9B23A;
  --ha-crema: #F2EDE4;
  --ha-crema-chiara: #FBF9F5;
  --ha-viola-profondo: #6E4FA3;
  --ha-grigio-caldo: #A89F94;
  --ha-font-heading: 'Cormorant Garamond', Georgia, serif;
  --ha-font-body: 'Open Sans', Arial, sans-serif;
  /* colonna del sito: stessa di Personalizza → Generale → Layout (1240px, 5% ai lati) */
  --ha-gutter: clamp(20px, 5vw, 80px);
  --ha-max: 1240px;
  /* altezza dell'header fisso, per l'hero e i link interni (#limen…) */
  --ha-head: 84px;
}
@media (max-width: 999px) { :root { --ha-head: 50px; } }
@media (min-width: 783px) { body.admin-bar { --ha-head: 116px; } }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ha-head) + 16px); }

/* ---------- Colonna del sito: sezioni a tutta larghezza, contenuto centrato ---------- */
.ha-site :is(.entry-content, main.site-main) > .alignfull:not(.ha-hero3) > * {
  width: min(calc(100% - 2 * var(--ha-gutter)), var(--ha-max));
  margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* ---------- Sezioni (classi dei gruppi) ---------- */
.ha-sec { padding-top: 104px; padding-bottom: 104px; }
.ha-sec--nero { background-color: var(--ha-nero); }
.ha-sec--notte { background-color: var(--ha-notte); }
.ha-sec--nero.ha-intent { padding-top: 48px; padding-bottom: 96px; }
@media (max-width: 767px) { .ha-sec { padding-top: 56px; padding-bottom: 56px; } .ha-sec--nero.ha-intent { padding-top: 32px; padding-bottom: 56px; } }
.ha-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.ha-sec-head > * { margin: 0; }

/* ---------- Testi piccoli ricorrenti ---------- */
.ha-kicker { font-family: var(--ha-font-body); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ha-viola); margin: 0 0 12px; }
.ha-label { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ha-grigio-caldo); margin: 0; }
.ha-link-more a { font-size: 15px; text-decoration: none; }

/* ---------- Pulsanti con classe (gli altri seguono Personalizza → Pulsanti) ---------- */
.ha-btn-secondary .wp-block-button__link:not(.has-background) { background: transparent; }
.ha-btn-secondary .wp-block-button__link:not(.has-text-color) { color: var(--ha-crema); }
.ha-btn-secondary .wp-block-button__link { border: 1px solid currentColor; }
.ha-btn-primary .wp-block-button__link:not(.has-background) { background: var(--ha-oro); }
.ha-btn-primary .wp-block-button__link:not(.has-text-color) { color: var(--ha-nero); }
.ha-cta .wp-block-button, .ha-cta .wp-block-button__link { width: 100%; text-align: center; }
.ha-cta__hint { color: var(--ha-oro); font-size: 14px; margin: 8px 0 0; }

/* chip dei temi (home) */
.ha-chips { gap: 8px; }
.ha-chips .wp-block-button__link { font-size: 12px; padding: 7px 12px; text-transform: none; letter-spacing: .5px; }
.ha-chips .wp-block-button__link:not(.has-background) { background: transparent; }
.ha-chips .wp-block-button__link:not(.has-text-color) { color: var(--ha-crema); }
.ha-chips .wp-block-button__link { border: 1px solid rgba(155,123,216,.5); }

/* ---------- Card della home ("I più amati") ---------- */
.ha-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.ha-card figure { margin: 0 0 14px; aspect-ratio: 1/1; overflow: hidden; }
.ha-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ha-card:hover figure img { transform: scale(1.03); }
.ha-card .ha-card__theme { margin: 0 0 6px; font-weight: 600; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ha-viola); }
.ha-card__name { font-family: var(--ha-font-heading); font-weight: 700; font-size: 22px; line-height: 1.4; margin: 0 0 6px; }
.ha-card__name a { text-decoration: none; color: inherit; }
.ha-card .ha-card__year { margin: 0; font-size: 14px; color: var(--ha-grigio-caldo); }
@media (max-width: 1100px) { .ha-grid-4:not(.ha-scroll) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ha-grid-4.ha-scroll { display: flex; overflow-x: auto; gap: 12px; margin-inline: calc(var(--ha-gutter) * -1); padding-inline: var(--ha-gutter); scroll-padding-inline: var(--ha-gutter); scrollbar-width: none; scroll-snap-type: x mandatory; }
  .ha-grid-4.ha-scroll > * { flex: 0 0 260px; scroll-snap-align: start; }
}

/* ---------- Serie fotografiche (home) ---------- */
.ha-serie figure { margin: 0 0 14px; aspect-ratio: 4/3; overflow: hidden; }
.ha-serie figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ha-serie:hover figure img { transform: scale(1.03); }
.ha-serie h3 { margin: 0; }
.ha-serie h3 a { text-decoration: none; color: inherit; }
/* colonne delle serie: impostazione Griglia del blocco Gruppo (fino a 4 colonne, larghezza minima 12rem) */

/* ---------- Journal + artista (home) ---------- */
.ha-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.ha-duo > div { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.ha-duo p { margin: 0; }
@media (max-width: 767px) { .ha-duo { grid-template-columns: 1fr; gap: 48px; } }

/* ---------- Pagina Opere: gallerie delle serie ---------- */
.ha-gal-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.ha-gal-head > * { margin: 0; }
.ha-archive__head { margin-bottom: 40px; }
.ha-archive__head > * { margin-top: 0; }
/* galleria "mosaico" (classe ha-masonry): immagini senza ritaglio, colonne = impostazione "Colonne" del blocco Galleria */
.wp-block-gallery.ha-masonry { display: block; column-count: 3; column-gap: 16px; }
.wp-block-gallery.ha-masonry.columns-1 { column-count: 1; } .wp-block-gallery.ha-masonry.columns-2 { column-count: 2; }
.wp-block-gallery.ha-masonry.columns-4 { column-count: 4; } .wp-block-gallery.ha-masonry.columns-5 { column-count: 5; }
.wp-block-gallery.ha-masonry > figure.wp-block-image { width: 100% !important; margin: 0 0 16px !important; break-inside: avoid; display: block; }
.wp-block-gallery.ha-masonry img { width: 100%; height: auto !important; aspect-ratio: auto !important; cursor: zoom-in; }
@media (max-width: 900px) { .wp-block-gallery.ha-masonry { column-count: 2; } }
@media (max-width: 480px) { .wp-block-gallery.ha-masonry { column-count: 1; } }
/* galleria Modula dentro una sezione: rispetta il margine del sito (Modula si dà larghezza da sola) */
.ha-site :is(.entry-content, main.site-main) > .alignfull > .modula { width: min(calc(100% - 2 * var(--ha-gutter)), var(--ha-max)) !important; max-width: none !important; }
/* lightbox delle immagini: sfondo scuro (non ha impostazioni) */
.wp-lightbox-overlay .scrim { background-color: rgba(18,18,18,.96) !important; }

/* ---------- Pagina Mandala ---------- */
.ha-mandala-intro { margin-bottom: 56px; padding-top: 40px; border-top: 1px solid rgba(242,237,228,.12); }
.ha-mandala-grid .ha-card__name a { text-decoration: none; }

/* ---------- Scheda opera (mandala) ---------- */
.ha-single { padding-bottom: 112px; }
.ha-single__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
.ha-single__grid > * { margin-top: 0; margin-bottom: 0; }
.ha-gallery { position: sticky; top: calc(var(--ha-head) + 24px); }
.ha-sheet { display: flex; flex-direction: column; gap: 24px; }
.ha-sheet > * { margin-top: 0; margin-bottom: 0; }
.ha-sheet .wp-block-post-terms a { text-decoration: none; }
.ha-print__info { font-size: 15px; line-height: 1.7; color: var(--ha-grigio-caldo); border-top: 1px solid rgba(242,237,228,.12); padding-top: 16px; }
@media (max-width: 900px) { .ha-single__grid { grid-template-columns: 1fr; gap: 28px; } .ha-gallery { position: static; } }
/* slider Otter nella scheda opera (eccezione dichiarata, scelta di Giada 11 ott 2026): largo quanto la colonna,
   al massimo 500px, sempre quadrato. L'altezza impostata nel blocco Slider qui non conta (la decide la proporzione 1:1). */
.ha-gallery .wp-block-themeisle-blocks-slider { width: 100% !important; max-width: 500px; }
.ha-gallery .wp-block-themeisle-blocks-slider .glide__slides { height: auto !important; }
.ha-gallery .wp-block-themeisle-blocks-slider .glide__slide figure { margin: 0; aspect-ratio: 1 / 1; }
.ha-gallery .wp-block-themeisle-blocks-slider .glide__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Chi sono ---------- */
.ha-about-head { padding-top: 104px; padding-bottom: 72px; }
.ha-about-head > * { margin-top: 0; margin-bottom: 0; }
.ha-about-head__sub { color: var(--ha-grigio-caldo); }
.ha-about-cols { gap: 80px; align-items: center; }
.ha-about__img { margin: 0; }
.ha-about__img img { width: 100%; height: auto; display: block; }
.ha-about-statement__inner { margin-inline: auto; }
.ha-about-sign { margin-top: 32px; font-family: var(--ha-font-heading); font-size: 24px; font-style: italic; color: var(--ha-viola); }
@media (max-width: 781px) { .ha-about-head { padding-top: 56px; padding-bottom: 40px; } .ha-about-cols { gap: 40px; } }

/* ---------- Contatti + modulo Fluent Forms (il modulo non ha colori propri adatti al fondo scuro) ---------- */
.ha-contact { padding-top: 96px; padding-bottom: 112px; }
.ha-contact__cols { gap: 80px; }
.ha-site .fluentform .ff-el-input--label label { color: var(--ha-grigio-caldo); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.ha-site .fluentform .ff-el-form-control { background: var(--ha-notte); color: var(--ha-crema); border: 1px solid rgba(155,123,216,.45); border-radius: 3px; font-family: inherit; font-size: 16px; padding: 10px 12px; }
.ha-site .fluentform .ff-el-form-control:focus { border-color: var(--ha-oro); box-shadow: none; outline: none; }
.ha-site .fluentform .ff-message-success { background: var(--ha-notte); color: var(--ha-crema); border: 1px solid var(--ha-viola); }
@media (max-width: 781px) { .ha-contact { padding-top: 56px; padding-bottom: 72px; } .ha-contact__cols { gap: 32px; } }

/* =====================================================================
   HERO ANIMATO DELLA HOME (eccezione dichiarata): posizioni e animazione
   sono necessarie all'effetto. Testi, immagini e colori si cambiano nei blocchi.
   ===================================================================== */
@property --k { syntax: '<number>'; inherits: true; initial-value: 1; }
.ha-site .ha-hero3 { position: relative; height: 230vh; margin: 0 !important; padding: 0; --p: 0; --k: 1; --r0: min(30vh, 34vw); --r1: 80vmax; }
.ha-site .ha-hero3 > .ha-hero3__stage { position: sticky; top: calc(var(--ha-head) + 12px); height: calc(100vh - var(--ha-head) - 24px); width: min(calc(100% - 2 * var(--ha-gutter)), var(--ha-max)); margin: 12px auto 0 !important; overflow: hidden; border-radius: 16px; background: var(--ha-nero); isolation: isolate; }
.ha-site .ha-hero3__stage > * { margin: 0 !important; }
.ha-site .ha-hero3__room, .ha-site .ha-hero3__mandala { position: absolute; inset: 0; clip-path: circle(calc(var(--r0) * var(--k) + (var(--r1) - var(--r0)) * var(--p)) at 50% 50%); }
.ha-site .ha-hero3__room img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(calc(1.18 - var(--p) * .18)); }
.ha-site .ha-hero3__mandala { opacity: calc(1 - var(--p) * 2.2); background: #0e1424; }
.ha-site .ha-hero3__mandala img { object-fit: contain; width: calc(var(--r0) * 2.15); height: calc(var(--r0) * 2.15); max-width: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(calc(1 + var(--p) * .35)) rotate(calc(var(--p) * 25deg)); }
.ha-site .ha-hero3__room { opacity: clamp(0, var(--p) * 2.2, 1); }
.ha-site .ha-hero3__stage::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--r0) * 2 * var(--k) + 2px); height: calc(var(--r0) * 2 * var(--k) + 2px); transform: translate(-50%, -50%); border: 1px solid rgba(242,237,228,.22); border-radius: 50%; opacity: calc(1 - var(--p) * 4); pointer-events: none; }
.ha-site .ha-hero3__title { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; z-index: 2; opacity: calc(1 - var(--p) * 1.6); }
.ha-site .ha-hero3__title > p { margin: 0; font-family: var(--ha-font-heading); line-height: 1; color: var(--ha-crema); white-space: nowrap; text-shadow: 0 0 2px rgba(10,10,18,.9), 0 2px 10px rgba(10,10,18,.85), 0 4px 40px rgba(10,10,18,.7); }
.ha-site .ha-hero3__l1 { font-style: italic; font-size: clamp(26px, 3vw, 44px); transform: translateX(calc(-1 * min(26vw, 380px) - var(--p) * 40vw)); }
.ha-site .ha-hero3__l2 { font-size: clamp(64px, 10vw, 168px); transform: translateX(calc(-1 * min(16vw, 240px) - var(--p) * 45vw)) scale(calc(1 + var(--p) * .5)); }
.ha-site .ha-hero3__l3 { font-size: clamp(56px, 8.5vw, 140px); margin-top: calc(var(--r0) * .55) !important; transform: translateX(calc(min(17vw, 260px) + var(--p) * 45vw)) scale(calc(1 + var(--p) * .5)); }
.ha-site .ha-hero3__title mark { background: transparent; }
.ha-site .ha-hero3 .ha-hero2__down { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; }
.ha-hero2__down .wp-block-button__link { width: 44px; height: 52px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 22px; font-size: 20px; letter-spacing: 0; }
.ha-hero2__down .wp-block-button__link:not(.has-background) { background: var(--ha-crema); }
.ha-hero2__down .wp-block-button__link:not(.has-text-color) { color: var(--ha-nero); }
.ha-site .ha-hero3 .screen-reader-text { position: absolute !important; }
@keyframes ha-k { from { --k: 0; } to { --k: 1; } }
@keyframes ha-rise { from { translate: 0 55%; clip-path: inset(0 0 100% 0); opacity: 0; } to { translate: 0 0; clip-path: inset(-20% -10% -20% -10%); opacity: 1; } }
@keyframes ha-fade { from { opacity: 0; } }
.ha-site .ha-hero3.is-js { animation: ha-k 1.4s cubic-bezier(.65,0,.35,1) both; }
.ha-site .ha-hero3.is-js .ha-hero3__title > p { animation: ha-rise 1s cubic-bezier(.2,.7,.2,1) both; }
.ha-site .ha-hero3.is-js .ha-hero3__l1 { animation-delay: .9s; }
.ha-site .ha-hero3.is-js .ha-hero3__l2 { animation-delay: 1.05s; }
.ha-site .ha-hero3.is-js .ha-hero3__l3 { animation-delay: 1.25s; }
.ha-site .ha-hero3.is-js .ha-hero2__down { animation: ha-fade .8s ease 2.3s both; }
@media (max-width: 781px) {
  .ha-site .ha-hero3 { --r0: min(26vh, 44vw); height: 200vh; } /* oblò su mobile: circa 330px su 375 */
  .ha-site .ha-hero3 > .ha-hero3__stage { border-radius: 12px; }
  .ha-site .ha-hero3__l1 { transform: translateX(calc(-26vw - var(--p) * 40vw)); }
  .ha-site .ha-hero3__l2 { transform: translateX(calc(-10vw - var(--p) * 45vw)) scale(calc(1 + var(--p) * .5)); }
  .ha-site .ha-hero3__l3 { transform: translateX(calc(10vw + var(--p) * 45vw)) scale(calc(1 + var(--p) * .5)); }
}
@media (prefers-reduced-motion: reduce) { .ha-site .ha-hero3 { height: 100vh; } }

/* =====================================================================
   STILE GALLERIA "CAROSELLO" (eccezione dichiarata: si attiva solo se scegli
   lo stile "Carosello" nel blocco Galleria)
   ===================================================================== */
.ha-carosello { position: relative; }
.wp-block-gallery.is-style-ha-carosello { display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.wp-block-gallery.is-style-ha-carosello::-webkit-scrollbar { display: none; }
.wp-block-gallery.is-style-ha-carosello > figure.wp-block-image { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; scroll-snap-align: start; }
.wp-block-gallery.is-style-ha-carosello > figure.wp-block-image img { width: 100%; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; }
.ha-carosello__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(18,18,18,.65); color: var(--ha-crema); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ha-carosello__btn--prev { left: 12px; } .ha-carosello__btn--next { right: 12px; }
.ha-carosello__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.ha-carosello__dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 1px solid var(--ha-grigio-caldo); background: transparent; cursor: pointer; }
.ha-carosello__dots button.is-on { background: var(--ha-viola); border-color: var(--ha-viola); }

/* =====================================================================
   EDITOR (eccezione dichiarata): nel riquadro di modifica le sezioni si vedono come
   sul sito e l'hero animato è "aperto" in colonna, così ogni blocco si seleziona.
   ===================================================================== */
.ha-site.ha-editor .is-root-container > .alignfull { margin-left: 0; margin-right: 0; width: auto; max-width: none; }
.ha-site.ha-editor .is-root-container > .alignfull:not(.ha-hero3) > * { width: min(calc(100% - 2 * var(--ha-gutter)), var(--ha-max)); margin-left: auto; margin-right: auto; }
.ha-site.ha-editor .ha-hero3 { height: auto; padding: 24px var(--ha-gutter); }
.ha-site.ha-editor .ha-hero3 > .ha-hero3__stage { position: static; height: auto; width: auto; margin: 0 !important; overflow: visible; border-radius: 0; }
.ha-site.ha-editor .ha-hero3__stage::after { display: none; }
.ha-site.ha-editor :is(.ha-hero3__room, .ha-hero3__mandala, .ha-hero3__title, .ha-hero2__down) { position: static !important; clip-path: none !important; opacity: 1 !important; transform: none !important; margin: 0 0 16px !important; }
.ha-site.ha-editor :is(.ha-hero3__mandala, .ha-hero3__room) img { position: static; width: 100%; height: auto; max-width: 480px; transform: none; }
.ha-site.ha-editor .ha-hero3__title > p { transform: none !important; animation: none !important; }
.ha-site.ha-editor .ha-hero3 .screen-reader-text { position: static !important; clip: auto; width: auto; height: auto; font-size: 14px; opacity: .6; }
.ha-site.ha-editor .wp-block-gallery.is-style-ha-carosello { overflow-x: visible; flex-wrap: wrap !important; gap: 8px !important; }
.ha-site.ha-editor .wp-block-gallery.is-style-ha-carosello > figure.wp-block-image { flex: 0 0 calc(50% - 4px) !important; width: calc(50% - 4px) !important; }