/*
Theme Name:   Cinzia Piscitelli
Description:  Tema Custom
Author:       IAKOdesign
Author URI:   https://www.iakodesign.it
Template:     nextawards
Version:      1.0
*/


/* ============================================================

   INDICE SEZIONI
   ──────────────────────────────────────────────────────────
   1.  VARIABILI CSS        — Palette, radius, ombre, transizioni
   2.  HEADER               — Struttura, logo, navigazione desktop
   3.  HEADER TRASPARENTE   — Template menu trasparente + scroll
   4.  HEADER MOBILE        — Hamburger menu (max 1190px)
   5.  HOMEPAGE             — Above the fold, layout colonne, immagini
   6.  HOMEPAGE SEZIONI     — Servizi, Makeup, Feedback, Pulsanti
   7.  HOMEPAGE GRIGLIA     — Fix 2×2 su tablet 1025–1400px
   8.  CHI SONO             — Video
   9.  CONTATTAMI           — Form CF7, campi, pulsante submit
   10. FOOTER               — Layout, link, pulsanti, responsive
   11. ICONE INLINE         — SVG background-image (clock, arrows, calendar)
   12. HELPERS              — Spaziatura, allineamento, utility classi
   13. CSS NON ATTIVI       — Regole disabilitate, tenute come riferimento

   ============================================================ */


/* ============================================================
   1. VARIABILI CSS — Palette colori e valori globali del tema
   ============================================================ */

:root {
  /* Colori */
  --color-dark:       #30211A;   /* Marrone scuro — testi, bordi principali */
  --color-medium:     #5C3D2E;   /* Marrone medio — bordi decorativi sx */
  --color-accent:     #893a30;   /* Rosso mattone — hover e accenti */
  --color-cream:      #FCFAF2;   /* Panna — sfondi chiari e testi su scuro */
  --color-blush:      #DBC5BA;   /* Rosa antico — background scroll header */

  /* Border radius */
  --radius-sm:        5px;
  --radius-md:        10px;
  --radius-pill:      15px;

  /* Ombre */
  --shadow-dark:      5px 5px 15px -4px #30211A;
  --shadow-cream:     5px 5px 15px -4px #FCFAF2;

  /* Transizioni */
  --transition-base:  all 0.3s ease;
}


/* ============================================================
   2. HEADER — Struttura, logo, navigazione desktop
   ============================================================ */

/* Tutti gli elementi dell'header e le voci di menu allineati al centro */
.header__content,
.header__menu li {
  align-items: center;
}

/* ── Logo: nascosto all'apertura, visibile dopo lo scroll ── */

.header__logo {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.scroll-down .header__logo {
  opacity: 1;
  visibility: visible;
}

/* Logo sempre visibile su tutte le pagine tranne la homepage */
body:not(.home) .header__logo {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── Navigazione desktop: stile voci e hover ── */

header .menu li a {
  padding: 14px;
  text-transform: uppercase;
}

header .menu li a:hover {
  text-decoration: none;
  color: var(--color-accent) !important;
}

/* ── Freccia sotto-menu: sparisce all'hover ── */

.menu > li.menu-item-has-children > a::after {
  opacity: 1;
  transition: opacity 0.05s ease;
}

.menu > li.menu-item-has-children:hover > a::after {
  opacity: 0;
}

/* ── Quick menu: icone colorate con filtro CSS ── */

.header__quick ul li[class*="icon-"] {
  position: relative;
}

.header__quick ul li[class*="icon-"] a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Colore normale: #30211A tramite filtro CSS */
.header__quick ul li[class*="icon-"] {
  filter: brightness(0) saturate(100%) invert(13%) sepia(18%) saturate(600%) hue-rotate(340deg) !important;
  transition: filter 0.2s ease;
}

/* Colore hover: #893a30 tramite filtro CSS */
.header__quick ul li[class*="icon-"]:hover {
  filter: brightness(0) saturate(100%) invert(28%) sepia(40%) saturate(900%) hue-rotate(330deg) brightness(95%) !important;
}

/* Fix: icona calendario visibile anche sotto 400px */
@media (max-width: 400px) {
  .header__quick .menu-item-type-custom {
    display: flex !important;
  }
}

/* ── Pulsante evidenziato nel menu (classe .evi) ── */

.evi a {
  border-radius: var(--radius-md) !important;
  color: var(--color-dark) !important;
  border: 2px solid var(--color-dark);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition-base);
}

.evi a:hover {
  box-shadow: var(--shadow-dark);
}


/* ============================================================
   3. HEADER TRASPARENTE — Template menu trasparente + scroll
   ============================================================ */

/* Voci di menu in tema trasparente: testo marrone scuro */
.page-template-menu-trasparent .menu li a {
  color: var(--color-dark) !important;
}

/* Freccia sotto-menu: colore originale (non invertito) */
.page-template-menu-trasparent .menu > li.menu-item-has-children > a::after {
  filter: invert(0);
}

/* Sfondo header che appare al scroll */
body.page-template-menu-trasparent.scroll-down .header {
  background: var(--color-blush) !important;
}

/* Logo diventa scuro al momento dello scroll */
.page-template-menu-trasparent.scroll-down .header__logo-img {
  filter: brightness(0) invert(0);
}


/* ============================================================
   4. HEADER MOBILE — Hamburger menu ridisegnato (max 1190px)
   Sfondo frosted-glass grigio-verde, voci centrate uppercase
   con lettering, animazione fade dall'alto.
   ============================================================ */

@media (max-width: 1190px) {

  /* ── Sfondo menu: frosted glass grigio-verde semitrasparente ── */
  .menu {
    background: rgba(220, 228, 224, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    /* Fade + slide dall'alto (sostituisce lo slide laterale del padre) */
    transform: translateY(-20px) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.215, .61, .355, 1) !important;

    /* Layout centrato */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Menu visibile quando aperto */
  .menu-open .menu {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  /* Fix pointer-events: il menu con opacity:0 rimane nel DOM e
     intercetta i tap sulla pagina anche da chiuso. Lo disabilitiamo
     quando il menu è chiuso e lo ripristiniamo solo ad apertura avvenuta. */
  .menu {
    pointer-events: none !important;   /* chiuso: invisibile E non cliccabile */
  }

  .menu-open .menu {
    pointer-events: auto !important;   /* aperto: torna cliccabile normalmente */
  }

  /* ── Voci di menu: centrate, grandi, uppercase ── */
  .menu li {
    width: 100% !important;
    margin: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    display: block !important;
  }

  .menu li a {
    font-size: 1.4rem !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    opacity: 1 !important;
    color: var(--color-dark) !important;
    padding: 18px 20px !important;
    display: block !important;
    transition: color 0.2s ease, letter-spacing 0.2s ease !important;
  }

  /* Hover: lettering si allarga */
  .menu li a:hover {
    color: var(--color-accent) !important;
    letter-spacing: 5px !important;
  }

  /* Voce corrente / pagina attiva */
  .menu li.current-menu-item > a,
  .menu li.current_page_item > a {
    color: var(--color-accent) !important;
    border-bottom: 2px solid var(--color-accent) !important;
    padding-bottom: 6px !important;
  }

  /* Separatore discreto tra le voci */
  .menu li + li {
    border-top: 1px solid rgba(48, 33, 26, 0.1) !important;
  }

  /* Freccia sotto-menu: colore scuro nel menu mobile */
  .menu > li.menu-item-has-children > a::after {
    filter: brightness(0) !important;
  }

  /* Freccia sotto-menu: vicina al testo, non a bordo schermo.
     Il tema padre posiziona ::after in absolute a destra del li
     che occupa il 100% — qui lo resettiamo a static inline
     così segue il testo ovunque si trovi, su qualsiasi device. */
  .menu > li.menu-item-has-children > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
  }

  .menu > li.menu-item-has-children > a::after {
    position: static !important;   /* annulla l'absolute del tema padre */
    margin-top: 0 !important;      /* annulla il margin-top negativo del padre */
    flex-shrink: 0 !important;     /* la freccia non si comprime mai */
  }

  /* Quick menu (icone social): centrato */
  .header__quick {
    justify-content: center !important;
  }

  /* ── Icona hamburger ── */
  .icon-hamburger span {
    background: var(--color-dark) !important;
    height: 2px !important;
    width: 28px !important;
    margin-bottom: 7px !important;
  }

  /* Fix hamburger tagliato sul bordo destro su iPad e tablet.
     Il tema padre usa position:absolute right:-15px sul bottone
     facendolo fuoriuscire da .header__content. Con overflow-x:hidden
     sul body, quei -15px vengono tagliati.
     Soluzione: right:5px tiene il bottone dentro il viewport,
     e padding-right:60px su header__content garantisce spazio
     sufficiente senza sovrapporre il bottone al contenuto. */
  .header__content {
    padding-right: 60px !important;
  }

  .icon-hamburger {
    right: 5px !important;
  }

  /* Linea centrale nascosta alla chiusura (effetto X) */
  .menu-open .icon-hamburger span:nth-child(4) {
    opacity: 0 !important;
  }
}


/* ============================================================
   5. HOMEPAGE — Above the fold, layout colonne, immagini
   ============================================================ */

/* ── Above the fold: immagine e testo intro ── */

/* Margine negativo per agganciare visivamente la sezione successiva */
.adf__img {
  margin-bottom: -2.1vh !important;
}

/* Mobile: box testo si sovrappone all'immagine con sfondo bianco */
@media (max-width: 794px) {
  .container_adf__text-column {
    margin-top: -15vh !important;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 20px;
  }
}

/* Mobile: immagine above the fold dietro il testo */
@media (max-width: 767px) {
  figure.img_above {
    z-index: 0 !important;
  }

  .container_adf__text-column {
    z-index: 1 !important;
    position: relative;
  }
}

/* ── Immagine above the fold: fuoriesce verso il basso ── */

/* Desktop: l'immagine esce dal contenitore padre */
@media (min-width: 1024px) {
  figure.img_above {
    position: relative !important;
    z-index: 999 !important;
  }

  .wp-block-columns.has-background {
    overflow: visible !important;
  }

  .wp-block-group.alignfull.has-background {
    overflow: visible !important;
  }
}

/* Tablet 768–1366px: immagine dietro, box bianco arrotondato sopra */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  figure.img_above {
    z-index: 0 !important;
    display: flex !important;         /* permette align-self per ancorare in basso */
    align-items: flex-end !important; /* ancora la figura al bordo inferiore */
    align-self: flex-end !important;
  }

  figure.img_above img {
    object-fit: contain !important;
    object-position: bottom !important; /* immagine ancorata al bordo inferiore */
    width: auto !important;
    height: 100% !important;            /* occupa tutta l'altezza del contenitore */
    max-height: 100% !important;
  }

  /* background:white senza border-radius azzerava gli angoli impostati
     in Gutenberg — li ripristiniamo esplicitamente qui */
  .container__text-column {
    position: relative;
    z-index: 2 !important;
    background: white;
    border-radius: var(--radius-md) !important;
  }

  .container__text-column .col_grp__txt {
    border-radius: var(--radius-md) !important;
  }
}

/* Fix iPad 10ª gen e tablet orizzontali ~1024–1200px (es. 1180x820):
   La struttura è un wp-block-cover con are-vertically-aligned-center
   che centra verticalmente entrambe le colonne. La colonna immagine
   deve invece agganciarsi al bordo INFERIORE del cover, non al centro.
   La colonna testo mantiene l'allineamento centrale.

   Struttura HTML rilevata da DevTools:
     .wp-block-cover.alignfull (min-height:822px, is-layout-flex)
       .wp-block-columns.are-vertically-aligned-center.is-layout-flex
         .wp-block-column (flex-basis:60%) — testo
         .wp-block-column (flex-basis:40%) — immagine
*/
@media screen and (min-width: 1024px) and (max-width: 1200px) {

  /* Colonne a piena altezza: stretch invece di center
     così solo la colonna immagine si ancora in basso */
  .wp-block-cover .wp-block-columns.are-vertically-aligned-center {
    align-items: stretch !important;
  }

  /* Colonna immagine (seconda): contenuto spinto al bordo inferiore */
  .wp-block-cover .wp-block-columns .wp-block-column:last-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-self: flex-end !important;
  }

  /* Figure agganciata al fondo della colonna */
  .wp-block-cover .wp-block-columns .wp-block-column:last-child figure.img_above {
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    width: 100% !important;
  }

  /* Immagine ancorata al bordo inferiore */
  .wp-block-cover .wp-block-columns .wp-block-column:last-child figure.img_above img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: bottom !important;
  }
}

/* Mobile: immagine a larghezza piena */
@media screen and (max-width: 767px) {
  figure.img_above img {
    object-fit: unset !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ── Layout colonne sovrapposte (immagine + testo) ── */

.container {
  display: flex;
  gap: 20px;
  position: relative;
}

.container__image-column {
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Colonna testo destra: si sovrappone del 10% sulla colonna immagine */
.container__text-column {
  flex: 1;
  position: relative;
  z-index: 2;
  margin-left: -10% !important;
}

/* Colonna testo sinistra: si sovrappone del 10% verso destra */
.container__text-column-sx {
  flex: 1;
  position: relative;
  z-index: 2;
  margin-right: -10% !important;
}

/* Mobile: rimuove la sovrapposizione */
@media (max-width: 794px) {
  .container__text-column,
  .container__text-column-sx {
    margin-top: -15vh !important;
    margin-left: 0 !important;
  }
}

/* ── Riquadri testo con bordo decorativo spostato (pseudo-elemento) ── */

/* Bordo in basso a destra — marrone scuro */
.col_grp__txt {
  position: relative;
}

.col_grp__txt::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 25px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-md);
  z-index: -1;
}

/* Bordo in basso a sinistra — panna (variante sx) */
.col_grp_sx__txt {
  position: relative;
}

.col_grp_sx__txt::before {
  content: "";
  position: absolute;
  top: 25px;
  right: 25px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-cream);
  border-radius: var(--radius-md);
  z-index: -1;
}

/* Riquadro "Chi sono": posizionato offset + bordo decorativo */
.col_grp__txt-whois {
  position: relative;
  top: 50px;
  left: 50px;
}

.col_grp__txt-whois::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 25px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-md);
  z-index: -1;
}

/* Mobile: annulla lo spostamento del riquadro "Chi sono" */
@media (max-width: 794px) {
  .col_grp__txt-whois {
    left: 0;
  }

  .col_colla_txt-whois {
    padding: 30px 10px 0;
  }

  .grp__app {
    margin-top: 40px !important;
  }
}

/* ── Immagini con bordo decorativo spostato (pseudo-elemento) ── */

/* Bordo in alto a sinistra — marrone medio */
figure.hp__image_sx {
  position: relative;
  display: inline-block;
}

figure.hp__image_sx::before {
  content: '';
  position: absolute;
  top: -25px;
  left: -25px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-medium);
  border-radius: var(--radius-md);
  z-index: -1;
}

/* Bordo in alto a destra — panna */
figure.hp__image_dx {
  position: relative;
  display: block;
}

figure.hp__image_dx::before {
  content: '';
  position: absolute;
  top: -25px;
  right: -25px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-cream);
  border-radius: var(--radius-md);
  z-index: -1;
}

/* Immagine sposa: bordo in alto a destra — marrone medio */
figure.sposa__image_dx {
  position: relative;
  display: block;
}

figure.sposa__image_dx::before {
  content: '';
  position: absolute;
  top: -25px;
  right: -25px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-medium);
  border-radius: var(--radius-md);
  z-index: -1;
}


/* ============================================================
   6. HOMEPAGE SEZIONI — Servizi, Makeup, Feedback, Pulsanti
   ============================================================ */

/* ── Sezione Servizi: pulsanti allineati in fondo alla colonna ── */

.home__servizi .wp-block-columns {
  align-items: stretch !important;
}

.home__servizi .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
}

.home__servizi .wp-block-column .wp-block-buttons {
  margin-top: auto !important;
  padding-top: 20px !important;
  padding-bottom: 30px;
}

/* ── Sezione Makeup: pulsanti allineati in fondo al gruppo ── */

.home__makeup .wp-block-group {
  display: flex !important;
  flex-direction: column !important;
}

.home__makeup .wp-block-group .wp-block-buttons {
  margin-top: auto !important;
  padding-top: 20px !important;
  padding-bottom: 30px;
}

/* ── Sezione Feedback: firma allineata in fondo alla colonna ── */

.home__feed .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
}

.home__feed .wp-block-column p:last-child {
  margin-top: auto !important;
  padding-top: 20px !important;
  padding-bottom: 20px;
}

/* Tablet: feedback su colonna singola */
@media (max-width: 1024px) {
  .home__feed.wp-block-columns {
    flex-direction: column !important;
  }

  .home__feed .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Colonna feedback con ombra laterale marrone */
.feed__col-shad {
  box-shadow: var(--shadow-dark);
}

/* ── Feature box (.cinzia-features): icone/caratteristiche affiancate ── */
/*
   LAYOUT RESPONSIVO SU TRE BREAKPOINT:
   ─────────────────────────────────────────────────────────────────────
   > 1200px   (Surface Pro 12, desktop)  → 4 colonne in linea
   782–1200px (iPad, laptop 13")         → griglia 2×2
   < 782px    (mobile)                   → griglia 2×2 più compatta

   NOTA: i !important sono necessari perché l'HTML contiene attributi
   style="padding:5px 80px;" inline che alzano la specificità del
   contesto e sarebbero altrimenti prevalenti su queste regole.
   ─────────────────────────────────────────────────────────────────────
*/

/* Desktop (> 1200px): 4 feature affiancate su una sola riga */
.cinzia-features {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  align-items: center;
}

/* Tablet e schermi medi (≤ 1200px): griglia 2×2 simmetrica.
   Il breakpoint 1200px copre anche l'iPad 10ª gen orizzontale
   (1180px) che altrimenti mostrerebbe un layout 3+1 anomalo. */
@media (max-width: 1200px) {
  .cinzia-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 32px !important;
  }
}

/* Mobile (≤ 782px): 2×2 più compatto, gap ridotto */
@media (max-width: 782px) {
  .cinzia-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 20px !important;
  }
}

/* ── Padding sezioni su mobile ── */

@media (max-width: 794px) {
  .home__faq,
  .home__feed    { padding: 2vh 5vh; }

  .home__makeup,
  .home__whois   { padding: 2vh 6vh; }
}

/* ── Pulsanti globali (.btn_master) ── */

.btn_master a {
  transition: var(--transition-base);
}

.btn_master a:hover {
  box-shadow: var(--shadow-dark);
}

/* ── Sezione contatti: hover pulsante con ombra panna ── */

.btn_contattami a:hover {
  box-shadow: var(--shadow-cream);
}


/* ============================================================
   7. HOMEPAGE GRIGLIA — Blocco layout 3 colonne per Servizi e Makeup

   Gutenberg di default genera 3 colonne nella fascia intermedia
   (circa 782px–1400px). Questo è l'unico layout da bloccare.
   Le altre transizioni le gestisce Gutenberg autonomamente:
   > 1400px   → 4 colonne  (Gutenberg default desktop)
   782–1400px → 2×2        ← questo blocco impedisce il 3 colonne
   < 782px    → 1 colonna  (Gutenberg default mobile)

   NOTA: Gutenberg usa wp-block-group con is-layout-grid, non
   wp-block-columns. WordPress inietta uno <style> con selettore
   hash univoco (cambia ad ogni salvataggio):
     .wp-container-core-group-is-layout-HASH { grid-template-columns: repeat(3,...) }
   Usiamo le classi STABILI con specificità body + 3 classi
   per battere il selettore hash (specificità: solo 1 classe).
   ============================================================ */

/* Nella fascia in cui Gutenberg vorrebbe 3 colonne, forziamo 2×2 */
@media (min-width: 782px) and (max-width: 1400px) {

  body .home__servizi.is-layout-grid,
  body .home__servizi.wp-block-group-is-layout-grid,
  body .home__makeup.is-layout-grid,
  body .home__makeup.wp-block-group-is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ============================================================
   8. CHI SONO — Hero, immagine decorativa, video
   ============================================================ */

/* Immagine decorativa a destra nell'above the fold della pagina Chi sono:
   nascosta su tablet e mobile per evitare sovrapposizioni e risparmiare spazio.

   CLASSI DA ASSEGNARE IN GUTENBERG:
   - All'immagine:           whois_header__image       (già presente)
   - Alla colonna immagine:  whois_header__image-col   (aggiungere in Gutenberg
                             nella Colonna che contiene l'Immagine → Avanzate → Classe CSS)
*/

/* Colonna immagine + immagine: nascoste su tablet e mobile */
@media (max-width: 1024px) {
  .whois_header__image-col {
    display: none !important;    /* nasconde l'intera colonna, non solo l'immagine */
  }

  .whois_header__image {
    display: none;               /* sicurezza: nasconde anche l'immagine da sola */
  }

  /* Con la colonna immagine nascosta, la colonna testo si espande
     a tutta la larghezza disponibile rispettando i padding esistenti.
     flex-basis e max-width vengono resettati per permettere l'espansione. */
  .wp-block-cover .wp-block-columns .wp-block-column:not(.whois_header__image-col) {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Immagine su desktop: ombra morbida per staccarla dallo sfondo */
@media (min-width: 1024px) {
  .whois_header__image {
    filter: drop-shadow(4px 4px 12px rgba(0, 0, 0, 0.25));
  }
}

/* Video con angoli arrotondati */
.wp-block-video video {
  border-radius: var(--radius-md) !important;
}


/* ============================================================
   9. CONTATTAMI — Form CF7, campi, pulsante submit
   ============================================================ */

/* ── Campi input e textarea ── */

input[type="text"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="url"],
textarea {
  border-radius: var(--radius-sm);
}

/* ── Campi condizionali CF7 ── */

.selezione,
.selezione_serviziofferti {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
}

/* ── Link nella colonna messaggio: hover con ombra ── */

.cnt__cnt a:hover {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-dark);
}

/* ── Pulsante di invio CF7 ── */

input[type="submit"].wpcf7-submit {
  border-radius: var(--radius-md);
  color: var(--color-dark);
  border: 2px solid var(--color-dark);
  background: transparent !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition-base);
  padding: 14px 50px;
  font-weight: bold;
}

input[type="submit"].wpcf7-submit:hover {
  box-shadow: var(--shadow-dark);
}


/* ============================================================
   10. FOOTER — Layout, link, pulsanti, responsive
   ============================================================ */

/* ── Layout e colori di base ── */

.footer {
  background: var(--color-dark);
  color: var(--color-cream);
  margin-left: -5vw;
  margin-right: -5vw;
}

.footer__logo {
  width: 117px;
  margin-bottom: 40px;
}

.footer__column-center h2 {
  margin-bottom: -1rem;
}

/* ── Link: indirizzo, email, telefono ── */

.footer__address a        { color: var(--color-cream); }
.footer__address a:hover  { color: var(--color-blush); }

.footer__email a          { color: var(--color-cream); }
.footer__email a:hover    { color: var(--color-blush); }

.footer__phone a          { color: var(--color-cream); }
.footer__phone a:hover    { color: var(--color-blush); }

/* ── Testi ── */

.footer__titolo-rx {
  text-transform: uppercase;
  letter-spacing: 10px;
  line-height: 1.5;
}

.footer__para {
  line-height: 1.5;
}

/* ── Pulsante CTA ── */

.footer__btn {
  padding: 10px 20px;
  border: 2px solid var(--color-cream);
  border-radius: var(--radius-pill);
  display: inline-block;
  margin: 0 10px;
  transition: var(--transition-base);
}

.footer__btn:hover {
  box-shadow: var(--shadow-cream);
}

.footer__btn a {
  text-transform: uppercase;
  color: var(--color-cream);
  letter-spacing: 1px;
}

/* ── Copyright e Privacy Policy ── */

.policy a       { color: var(--color-cream); }
.policy a:hover { color: var(--color-blush); }

/* ── Barra IAKOdesign ── */

.design {
  background-color: var(--color-cream);
  text-align: center;
  font-weight: bold;
}

.design__text          { color: var(--color-dark); }
.design__text a        { color: var(--color-dark); }
.design__text a:hover  { color: var(--color-accent); }

/* ── Responsive Tablet grande (max 1366px): colonne affiancate, spaziature compatte ── */

@media (max-width: 1366px) {

  .footer__grid {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }

  .footer__titolo-rx {
    letter-spacing: 5px !important;
    font-size: 1rem !important;
    word-break: break-word;
  }

  .footer__para {
    font-size: 0.95rem;
    word-break: break-word;
  }

  .footer__btn {
    padding: 8px 14px;
    margin: 0 6px;
  }

  .footer .grid {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }

  .policy,
  .policy p {
    white-space: normal !important;
    overflow: visible !important;
  }
}

/* ── Responsive Tablet (max 1024px): colonne in verticale, tutto centrato ── */

@media (max-width: 1024px) {

  .footer__grid {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    padding: 4vh 6vw !important;
  }

  .footer__grid .col-25,
  .footer__grid .col-50 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }

  .footer__titolo-rx {
    letter-spacing: 3px !important;
    font-size: 1.1rem !important;
    word-break: break-word;
  }

  .footer__para {
    word-break: break-word;
  }

  .footer__btn {
    display: inline-block !important;
    text-align: center;
    margin: 10px auto !important;
  }

  p.footer__btn {
    display: block;
    text-align: center;
  }

  .footer .grid {
    flex-direction: column !important;
    padding: 0 5vw !important;
  }

  .footer .grid .col-50 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    text-align: center !important;
  }

  .policy,
  .policy p,
  .alignright {
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
  }
}

/* ── Responsive Mobile (max 794px) ── */

@media (max-width: 794px) {

  .footer__grid {
    padding: 4vh 4vw !important;
  }

  .footer__grid .col-25,
  .footer__grid .col-50 {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }

  .footer__titolo-rx {
    letter-spacing: 2px !important;
    font-size: 1rem !important;
  }

  .footer__email {
    padding-bottom: 2vh !important;
  }

  .footer .grid {
    padding: 0 4vw !important;
  }
}


/* ============================================================
   11. ICONE INLINE — SVG background-image
   ============================================================ */

/* Icona orologio con countdown */
.icon-clocknow {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 23px;
  height: 23px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M416.07 272a160 160 0 10-160 160 160 160 0 00160-160zM142.12 91.21A46.67 46.67 0 00112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 003.24 1.77h.88a3.23 3.23 0 002.54-1.31L142.38 99a5.38 5.38 0 001.55-4 5.26 5.26 0 00-1.81-3.79zM369.88 91.21A46.67 46.67 0 01400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 01-3.24 1.76h-.88a3.23 3.23 0 01-2.54-1.31L369.62 99a5.38 5.38 0 01-1.55-4 5.26 5.26 0 011.81-3.79z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M256.07 160v112h-80M416.07 432l-40-40M96.07 432l40-40'/%3E%3C/svg%3E");
}

/* Icona freccia circolare */
.icon-arrows2 {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 23px;
  height: 23px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M262.62 336L342 256l-79.38-80M330.97 256H170'/%3E%3Cpath d='M256 448c106 0 192-86 192-192S362 64 256 64 64 150 64 256s86 192 192 192z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E");
}

/* Icona calendario */
.icon-calendar {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 23px;
  height: 23px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Crect fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='32' x='48' y='80' width='416' height='384' rx='48'/%3E%3Ccircle cx='296' cy='232' r='24'/%3E%3Ccircle cx='376' cy='232' r='24'/%3E%3Ccircle cx='296' cy='312' r='24'/%3E%3Ccircle cx='376' cy='312' r='24'/%3E%3Ccircle cx='136' cy='312' r='24'/%3E%3Ccircle cx='216' cy='312' r='24'/%3E%3Ccircle cx='136' cy='392' r='24'/%3E%3Ccircle cx='216' cy='392' r='24'/%3E%3Ccircle cx='296' cy='392' r='24'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='32' stroke-linecap='round' d='M128 48v32M384 48v32'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='32' d='M464 160H48'/%3E%3C/svg%3E");
}


/* ============================================================
   12. HELPERS — Spaziatura, allineamento, utility classi
   ============================================================ */

/* ── Margin top ── */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 40px; }
.mt-4 { margin-top: 100px; }

/* ── Margin bottom ── */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 40px; }
.mb-4 { margin-bottom: 100px; }

/* ── Padding uniforme ── */
.p-0 { padding: 0; }
.p-1 { padding: 10px; }
.p-2 { padding: 20px; }
.p-3 { padding: 40px; }
.p-4 { padding: 100px; }

/* ── Padding top ── */
.pt-1 { padding-top: 10px; }
.pt-2 { padding-top: 20px; }
.pt-3 { padding-top: 40px; }
.pt-4 { padding-top: 15vh; }

/* ── Padding bottom ── */
.pb-1 { padding-bottom: 10px; }
.pb-2 { padding-bottom: 20px; }
.pb-3 { padding-bottom: 40px; }
.pb-4 { padding-bottom: 15vh; }

/* ── Allineamento testo ── */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

/* ── Immagine responsive generica ── */
.img-res {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  vertical-align: middle;
}

/* ── Inversione ordine colonne su mobile ── */
@media (max-width: 794px) {
  .sma-col-invert {
    flex-direction: column-reverse;
  }
}


/* ============================================================
   13. CSS NON ATTIVI — Regole disabilitate, tenute come riferimento
   ============================================================ */

/* BOX WHOIS — icona assoluta sopra il box (disabilitato) */

/* .whois_col__box {
  position: relative;
} */

/* .whois_col__box .ionicon {
  position: absolute;
  top: -2rem;
  right: 1rem;
} */