/* ---------------------------
* VARS AND MODIFIERS
--------------------------- */

/* Colors */
:root {
  --color-background: #FFF;
  --color-text: #333;
  --color-text-light: #555;
  --color-black: #222;
  --color-primary: #3172C7;
  --color-primary-light: #3C89F3;
  --color-primary-dark: #264773;
  --color-lightgrey: #D7D7D7;
  --color-border: #DDD;
}

.has-dark-bg {
  --color-text: #FFF;
  --color-text-light: #EEE;
}

/* Typography */
:root {
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-headings: 'Inter', system-ui, -apple-system, sans-serif;
  --font-weight-bold: 700;
  --font-weight-semibold: 500;
  --font-weight-normal: 400;
  --font-size-base: 1rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2rem;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-large: 1.6;
}
h1, .title-1, h2, .title-2, h3, .title-3, h4, .title-4, h5, .title-5, h6, .title-6   {
  font-family: var(--font-headings);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-sm);
  letter-spacing: -0.025em;
}
h1, .title-1 {font-size: var(--font-size-xxl);}
h2, .title-2 {font-size: var(--font-size-xl);}
h3, .title-3 {font-size: var(--font-size-lg);}
h4, .title-4 {font-size: var(--font-size-base);}
h5, .title-5 {font-size: var(--font-size-sm);}
h6, .title-6 {font-size: var(--font-size-sm);}

/* Spacing */
:root {
  --spacing-unit: 16px;
  --gap: var(--spacing-unit);

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  --section-spacing-sm: 48px;
  --section-spacing-md: 64px;
  --section-spacing-xl: 86px;

  --header-height: 70px;
  --container: 1280px;
  --container-min: 820px;

}
.gap-xs {--gap:var(--spacing-xs);}
.gap-sm {--gap:var(--spacing-sm);}
.gap-md {--gap:var(--spacing-md);}
.gap-lg {--gap:var(--spacing-lg);}
.gap-xl {--gap:var(--spacing-xl);}

/* Misc */
:root {
  --radius: 8px;
  --radius-min: 4px;
  --transition: 0.2s ease;
  --shadow: 0 2px 12px 0px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}



/* Reset / Base */
*,*::before,*::after {box-sizing:border-box;}

@media only screen and (max-width:992px) {
  #page {overflow-x:hidden;}
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-background);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}
a:hover {
    color: var(--color-primary-light);
}

p a {
    color: var(--link-color, var(--color-primary));
    font-weight:bold;
}

body.home {overflow-x:hidden;}

.title-clamp .entry-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp-rows, 2);
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.excerpt-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--excerpt-clamp-lines, 3);
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Module */
.module-section {
  padding-top:var(--section-spacing-md);
  padding-bottom:var(--section-spacing-md);
}

.module-section-title {
  width:100%;
  max-width:var(--container-min);
  margin-bottom:var(--spacing-md);

  &.module-title--center {
    text-align: center;
    margin-left:auto;
    margin-right:auto;
  }

  &.module-title--left {
    text-align: left;
  }

  &.module-title--right {
    text-align: right;
  }

  .module-title {
      margin: 0 0 var(--spacing-xs);
  }

  .module-intro {
      margin: 0;
      color: var(--color-text-light);
  }
}

/* Hero */
.module-hero .hero-layout {
  display: grid;
  gap: var(--spacing-lg);
  align-items: center;
}

.module-hero.hero-has-image .hero-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.module-hero .hero-media img {
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 992px) {
  .module-hero.hero-has-image .hero-layout {
    grid-template-columns: 1fr;
  }
}

/* Layout Utilities */
.container {
  width:100%;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.container-min {
    max-width: var(--container-min);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.flex {display:flex;gap:var(--gap);}

.row {flex-direction:row;}
.row-rev {flex-direction:row-reverse;}
.row-wrap {flex-direction:row;flex-wrap:wrap;}

.col {flex-direction:column;}
.col-rev {flex-direction:column-reverse;}

.align-start {align-items:flex-start;}
.align-end {align-items:flex-end;}
.align-center {align-items:center;}
.align-stretch {align-items:stretch;}

.justify-center {justify-content:center;}
.justify-start {justify-content:flex-start;}
.justify-end {justify-content:flex-end;}
.justify-between {justify-content:space-between;}
.justify-around {justify-content:space-around;}
.justify-stretch {justify-content:stretch;}

.space-between {justify-content:space-between;}
.space-around {justify-content:space-around;}

.align-start {align-items:flex-start;}
.align-center {align-items:center;}
.justify-end {justify-content:flex-end;}

.grid,
.is-layout-grid {display:grid;grid-gap:var(--gap);}

.grid-cols-2-3 {grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);}
.grid-cols-3-2 {grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);}

.grid-cols-2,
.columns-2 {grid-template-columns: repeat(2, 1fr);}

.grid-cols-3,
.columns-3 {grid-template-columns: repeat(3, 1fr);}

.grid-cols-4,
.columns-4 {grid-template-columns: repeat(4, 1fr);}

.grid-cols-auto {grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );}
@media only screen and (max-width: 992px) {
    .grid {grid-template-columns: repeat(1, 1fr);}
}

.icon-wrapper {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.icon-wrapper > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.entry-content figure,
.entry-content .wp-block-image {
    width: 100% !important;
    max-width: 100%;
    margin:0;
    margin-bottom: var(--spacing-md);
}
.entry-content figure img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

figcaption {
  font-size: 15px;
  font-style: italic;
  margin-top:4px;
}

.custom-logo {
    width:100%;
    /*height:48px;*/
    max-width:320px;
    height:auto;
}

/* Components */
@media only screen and (max-width:992px) {
    .gap-xs.mob-slider {--gap:var(--spacing-xs);}
    .gap-sm.mob-slider {--gap:var(--spacing-sm);}
    .gap-md.mob-slider {--gap:var(--spacing-md);}
    .gap-lg.mob-slider {--gap:var(--spacing-lg);}
    .gap-xl.mob-slider {--gap:var(--spacing-xl);}
    .mob-slider {
      --peek: 48px;   /* porzione visibile della slide successiva */
      --slider-gap: 20px;

      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc(100% - (var(--peek) + var(--slider-gap)));
      gap: var(--slider-gap);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
    }
    .mob-slider::-webkit-scrollbar{display:none;}
    .mob-slider > *{scroll-snap-align:start;}
}

body.single-post .post-intro p {
    font-size:var(--font-size-lg);
    margin-top:0;
    margin-bottom:var(--spacing-xs);
}
body.single-post .post-intro p:last-child {
    margin-bottom:var(--spacing-md);
}

img.hex-img-single {
  max-width: 100%;
  height: auto;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin-bottom:var(--spacing-md);
}

body.single-post .breadcrumbs-wrapper .container {
  max-width:var(--container-min);
}

.related-posts {
  margin-top:var(--spacing-lg);
}

.entry-meta {margin-bottom:var(--spacing-md);}
.entry-content {padding-top:var(--spacing-xs);margin-bottom:var(--spacing-xl);}

/* Single: contenuto a container-min + rail azioni (social share) nella gutter */
.single-shell { position: relative; }

/* Infinite scroll: separatore + spaziatura tra un articolo e l'altro */
.hexa-post-separator {
  border: 0;
  border-top: 1px solid var(--color-border);
  max-width: var(--container-min);
  margin: var(--spacing-xl) auto;
}

.action-bar,
.social-share {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  padding-left: var(--spacing-md);
  z-index:98;
}
.action-buttons,
.share-tools { position: sticky; top: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-xs); }
.share-dropdown { position: relative; }

.share-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition);
}

.share-menu {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  z-index: 50;
  min-width: 200px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.share-menu[hidden] { display: none; }

.share-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 8px 12px;
  border-radius: var(--radius-min);
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: color var(--transition), background-color var(--transition);
}
.share-link:hover { background: var(--color-lightgrey); color: var(--color-primary); }
.share-link .icon-wrapper { width: 20px; height: 20px; flex: none; }

/* Azioni utente nella barra (like, rating) — stesso look icon-btn dello share */
.pa-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition);
  min-width:80px;
}
.pa-btn .pa-icon,
.pa-btn .star { width: 22px; height: 22px; }

.like-btn { width: auto; padding: 0 12px; }
.like-count { font-size: var(--font-size-sm); line-height: 1; }
.like-btn[aria-pressed="true"] { color: var(--color-primary); }
.like-btn[aria-pressed="true"] .pa-icon { fill: currentColor; }

.rating-dropdown { position: relative; }
.rating-menu {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  z-index: 50;
  min-width: 180px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.rating-menu[hidden] { display: none; }
.rating-average { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); color: var(--color-text-light); }
.stars { display: inline-flex; color: var(--color-primary); }
.stars .star { width: 18px; height: 18px; }
.rating-vote-wrapper { display: flex; flex-direction: column; gap: 2px; }
.rating-title {font-size: 14px;}
.rating-vote { display: inline-flex; gap: 2px; }
.rate-star { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--color-lightgrey); line-height: 0; }
.rate-star .star { width: 22px; height: 22px; }
.rate-star.is-active { color: var(--color-primary); }
.rating-vote.is-voted { opacity: .6; pointer-events: none; }

/* Commenti */
.comment-dropdown { position: relative; }
.comment-btn { width: auto; padding: 0 12px; }
.comment-count { font-size: var(--font-size-sm); line-height: 1; }

.rating-toggle { width: auto; padding: 0 12px; }
.rating-value { font-size: var(--font-size-sm); line-height: 1; }
.comment-menu {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  z-index: 50;
  width: 320px;
  max-width: 88vw;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.comment-menu[hidden] { display: none; }
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-item { display: flex; gap: 10px; border-bottom: 1px solid var(--color-border); padding-bottom: 8px; }
.comment-item:last-child { border-bottom: 0; }
.comment-body { flex: 1 1 auto; min-width: 0; }
.comment-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.comment-author { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }
.comment-date { font-size: var(--font-size-xs); color: var(--color-text-light); }
.comment-text { font-size: var(--font-size-sm); margin-top: 2px; }
.comment-empty { font-size: var(--font-size-sm); color: var(--color-text-light); text-align: center; padding: 8px 0; }
.comment-form { display: flex; flex-direction: column; gap: 8px; }
.comment-input {
  width: 100%;
  resize: vertical;
  padding: 8px 10px;
  font: inherit;
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-min);
}
.comment-submit { align-self: flex-end; }

/* Avatar utente (immagine → glifo segno → brand), dimensione via --avatar-size */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--avatar-size, 48px);
  height: var(--avatar-size, 48px);
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* SVG di fallback: più piccolo del cerchio, centrato dal flex (niente padding) */
.user-avatar--fallback svg { width: 62%; height: 62%; display: block; }

/* Header finestra commenti: nascosto su desktop (popover), mostrato in mobile */
.comment-menu__head { display: none; align-items: center; justify-content: space-between; gap: 8px; }
.comment-menu__title { font-weight: var(--font-weight-bold); font-size: var(--font-size-md); }
.comment-close {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius-full);
}

/* Mobile ≤992: barra azioni fissa in basso (bottom bar) */
@media only screen and (max-width: 992px) {
  .single-shell { display: flex; flex-direction: column; }
  .action-bar {
    width:100%;
    --social-bar-h: 64px; /* 44px pill + padding: ancora i menu */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    inset: auto 0 0 auto;
    /* Sopra l'header (.site-header z-index:9999): i menu sono figli dell'action-bar
       e vivono nel suo stacking context, quindi la barra deve superare l'header. */
    z-index: 10000;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  /* Con l'offcanvas nav aperto la barra (z-index alto) non deve sporgere sopra */
  body:has(.hamburger-offcanvas.is-open) .action-bar { display: none; }
  /* Infinite scroll: con più articoli, mostra solo la barra dell'articolo attivo */
  body.hexa-infinite-on .action-bar { display: none; }
  body.hexa-infinite-on article.is-active .action-bar { display: block; }
  .action-buttons {
    position: static;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    gap: var(--spacing-xs);
  }
  /* Menu aperti verso l'alto, centrati e sempre dentro il viewport */
  .share-menu,
  .rating-menu,
  .comment-menu {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(var(--social-bar-h) + env(safe-area-inset-bottom, 0px) + 8px);
    transform: translateX(-50%);
    z-index: 901;
    max-width: calc(100vw - 24px);
  }

  .share-menu {
    left: unset;
    right: 12px;
    transform: unset;
  }

  /* Commenti: finestra staccata full-width/full-height con margine dai bordi */
  .comment-menu {
    left: 12px;
    right: 12px;
    top: 12px;
    bottom: calc(var(--social-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + 12px);
    transform: none;
    width: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
  }
  .comment-menu__head { display: flex; }
  .comment-list { flex: 1 1 auto; max-height: none; }

  /* Rating: finestra full-width, più padding, stelle grandi */
  .rating-menu {
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    padding: var(--spacing-md);
  }
  .stars { gap: 2px; }
  .stars .star { width: 34px; height: 34px; }
  .rate-star { padding: 6px; }
  .rate-star .star { width: 34px; height: 34px; }

  /* Spazio in fondo alla pagina: la barra fixed non copre footer/related.
     Solo i 'post' usano l'action-bar (body.single-post). */
  body.single-post .site-main { padding-bottom: calc(var(--social-bar-h, 64px) + 24px); }

  /* Social-share (solo condivisione): bottone flottante in basso a destra */
  .social-share {
    position: fixed;
    left: auto;
    top: auto;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: auto;
    padding: 0;
    z-index: 900;
  }
  .social-share .share-tools { position: static; }
  /* Il menu si apre verso l'alto, ancorato all'angolo (vince su .share-menu sopra) */
  .social-share .share-menu {
    position: absolute;
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 8px);
    transform: none;
    max-width: calc(100vw - 32px);
  }
}

.btn,
.btn-primary,
.btn-secondary,
input.search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--action-primary-label, #fff);
    border: 1px solid transparent;
    border-radius: var(--radius-full, var(--radius-min));
    font-weight: 500;
    text-decoration: none;

    a.wp-block-button__link {
      padding:unset;
      color:inherit;
      background-color:inherit;
      background:inherit;
      &:hover {
        color:inherit;
        background-color:inherit;
        background:inherit;
      }
    }
}

.btn:hover,
.btn-primary:hover,
.search-submit:hover {
    background: var(--color-primary-light);
    color: var(--action-primary-label, #fff);
    text-decoration: none;
}

.btn-secondary {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: #fff;
}

/* Header actions: CTA + social */
.social-links {
    gap: var(--spacing-sm);
}

.social-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: currentColor;
    border-radius: var(--radius-min);
    transition: color var(--transition), background-color var(--transition);
}

.social-item svg {
    width: 20px;
    height: 20px;
}

.social-item:hover {
    color: var(--color-primary);
}

.aspect-ratio-box {
    aspect-ratio: 16 / 9;
    /* Default aspect ratio */
}


/* Header */
.site-header {
  position:relative;
  z-index:9999;
}

.site-header > .header-top {background:transparent!important;}

.site-header > .header-top {
    /*height: var(--header-height);*/
    height: auto;
    display: flex;
    flex-flow:row wrap;
    align-items: center;
    background: var(--color-background);
}

/* Header dual-menu-center: 3 colonne bilanciate → logo davvero centrato */
.header-dual-menu-center > .header-top > .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--spacing-md);
}
.header-dual-menu-center > .header-top > .container > .menu-toggle-hamburger {
    justify-self: start;
}
.header-dual-menu-center > .header-top > .container > .site-branding {
    justify-self: center;
}
.header-dual-menu-center > .header-top > .container > .header-actions {
    justify-self: end;
}

.site-header .search-toggle.search-toggle--mobile { display: none; }

/* Footer dell'offcanvas: CTA (solo mobile) + social, spinti in fondo */
.offcanvas-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.hamburger-offcanvas .social-links { flex-wrap: wrap; }

/* Header dual-menu-center: forma mobile [menu] [logo] [ricerca] */
@media only screen and (max-width: 992px) {
    .header-dual-menu-center > .header-bottom { display: none; }          /* nav già nell'offcanvas */
    .header-dual-menu-center .header-cta { display: none; }               /* CTA del bar → va nell'offcanvas */
    .site-header .search-toggle.search-toggle--mobile { display: inline-flex; }

    /* CTA in fondo all'offcanvas (pannello flex-column) */
    .hamburger-offcanvas .offcanvas-cta { display: flex!important; justify-content: center; }

    /* Hero: immagine per prima quando impilata */
    .module-hero.hero-has-image .hero-media { order: -1; }
}

.site-header > .header-bottom nav > ul {
  background:var(--color-lightgrey);
  border: solid 1px var(--border-hairline);
  border-radius:50px;
  width:100%;
  gap: var(--spacing-xs);
  padding:0 8px;
  margin:8px auto;
}

.site-header > .header-bottom nav > ul > li > a {
  display:block;
  padding:8px 16px;
}

@media only screen and (max-width:1240px) {
  .site-header > .header-bottom nav > ul > li > a {
    padding:8px;
    font-size:14px;
  }
}

.site-header > .header-row {
  width:100%;
}

.site-header > .header-row .site-branding,
.site-header > .header-row #site-navigation {
  display:flex;
  align-items:center;
  align-items:center;
  gap:var(--spacing-md);
}

.site-branding {
    font-weight: 800;
    font-size: var(--font-size-lg);
}

.site-header nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--spacing-md);
}

.site-header nav ul li.current-menu-item {
  font-weight:var(--font-weight-bold);
}

/* Dropdown per menu con figli — valido per ogni .main-navigation */
.main-navigation .menu-item-has-children { position: relative; }

/* chevron sul parent (eredita currentColor) */
.main-navigation .menu-item-has-children > a::after {
  content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .4em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition);
}
.main-navigation .menu-item-has-children:hover > a::after,
.main-navigation .menu-item-has-children:focus-within > a::after { transform: translateY(1px) rotate(225deg); }

/* pannello dropdown */
.main-navigation .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 100;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 210px; margin-top: 10px;        /* distacco dalla nav */
  padding: 8px; list-style: none;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
/* ponte invisibile sul gap, così l'hover non "cade" spostando il mouse */
.main-navigation .sub-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* voci del dropdown */
.main-navigation .sub-menu > li > a {
  display: block; white-space: nowrap; padding: 8px 12px; border-radius: var(--radius-min);
}
.main-navigation .sub-menu > li > a:hover { background: var(--color-lightgrey); color: var(--color-primary); }

/* livelli annidati (2+): a fianco invece che sotto */
.main-navigation .sub-menu .sub-menu { top: 0; left: 100%; margin: 0 0 0 10px; }
.main-navigation .sub-menu .menu-item-has-children > a::after { transform: rotate(-45deg); } /* freccia a destra */

.site-header .search-toggle,
.menu-toggle-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    border-radius: var(--radius-min);
    transition: color var(--transition), background-color var(--transition);
}

.site-header .search-toggle:hover,
.menu-toggle-hamburger:hover {
    color: var(--color-primary);
}

.site-header .search-toggle:focus-visible,
.menu-toggle-hamburger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* search overlay */
.header-search-overlay {
  position:fixed;
  height:100vh;
  width:100vw;
  top:0;
  left:0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  background: color-mix(in srgb, var(--color-background) 78%, transparent);
  backdrop-filter: blur(6px);
  z-index:999;

  .search-inner {
    width: min(720px, 92vw);
    background:var(--color-background);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  input.search-field {
    width: 100%;
    padding:var(--spacing-sm) var(--spacing-sm);
    color: var(--color-text);
    background: var(--color-background);
    border:solid 1px var(--color-border);
    border-radius:var(--radius-min);
    font-size:var(--font-size-lg);

    &:focus-visible {
      outline: solid 2px var(--color-primary);
      outline-offset: 1px;
    }
  }

}

.header-search-overlay[hidden] {
  display:none;
}

/* Offcanvas menu (hamburger) */
.hamburger-offcanvas {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(320px, 85vw);
    background: var(--color-background);
    border-inline-end: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 9999;
    padding: var(--spacing-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.hamburger-offcanvas.is-open {
    transform: translateX(0);
}
.hamburger-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 9998;
    cursor: pointer;
}
.hamburger-overlay.is-open {
    display: block;
}
.hamburger-close {
    align-self: flex-end;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: currentColor;
    border-radius: var(--radius-min);
    margin-bottom: var(--spacing-md);
    transition: color var(--transition), background-color var(--transition);
}
.hamburger-close:hover {
    color: var(--color-primary);
}
.hamburger-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.hamburger-offcanvas #offcanvas-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hamburger-offcanvas #offcanvas-menu li a {
    display: block;
    padding: .6rem 0;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.hamburger-offcanvas #offcanvas-menu li a:hover {
    color: var(--color-primary);
}
.hamburger-offcanvas #offcanvas-menu li.current-menu-item > a {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* Footer */
#site-footer {
  padding-top:80px;
}

.site-footer-inner {
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.footer-widgets {
    padding-bottom: var(--spacing-xl);
}

.site-info {
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.site-info .container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Footer widgets */
.footer-col .widget { margin-bottom: var(--spacing-lg); }
.footer-col .widget:last-child { margin-bottom: 0; }
.footer-col .widget-title,
.footer-col .widgettitle {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-sm);
}
/* Menu di navigazione footer: verticale, senza bullet, stile del tema */
.footer-col .widget_nav_menu ul,
.footer-col ul.menu,
.footer-col nav ul,
.footer-col .wp-block-navigation__container {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.footer-col .widget_nav_menu li,
.footer-col ul.menu li { margin: 0; }
.footer-col .widget_nav_menu a,
.footer-col ul.menu a,
.footer-col .wp-block-navigation-item__content {
    color: var(--color-text-light);
    text-decoration: none;
}
.footer-col .widget_nav_menu a:hover,
.footer-col ul.menu a:hover,
.footer-col .wp-block-navigation-item__content:hover { color: var(--color-primary); }

/* Immagine footer: rispetta l'allineamento core (il global img{display:block} lo annulla) */
.footer-col .wp-block-image { margin-top: 0; margin-bottom: var(--spacing-sm); }
.footer-col .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; width: fit-content; }
.footer-col .wp-block-image.alignleft   { margin-left: 0;    margin-right: auto; width: fit-content; float: none; }
.footer-col .wp-block-image.alignright  { margin-left: auto; margin-right: 0;    width: fit-content; float: none; }

/* Allineamento responsive immagini (controllo custom): Desktop default, poi tablet/mobile */
.wp-block-image[class*="hexa-ra-"] { width: fit-content; }
.wp-block-image.hexa-ra-d-left   { margin-left: 0;    margin-right: auto; }
.wp-block-image.hexa-ra-d-center { margin-left: auto; margin-right: auto; }
.wp-block-image.hexa-ra-d-right  { margin-left: auto; margin-right: 0; }
@media (max-width: 992px) {
  .wp-block-image.hexa-ra-t-left   { margin-left: 0;    margin-right: auto; }
  .wp-block-image.hexa-ra-t-center { margin-left: auto; margin-right: auto; }
  .wp-block-image.hexa-ra-t-right  { margin-left: auto; margin-right: 0; }
}
@media (max-width: 768px) {
  .wp-block-image.hexa-ra-m-left   { margin-left: 0;    margin-right: auto; }
  .wp-block-image.hexa-ra-m-center { margin-left: auto; margin-right: auto; }
  .wp-block-image.hexa-ra-m-right  { margin-left: auto; margin-right: 0; }
}

/* Posts */
.post-card {
    .entry-media {
        aspect-ratio: 16 / 9;
        width:100%;
        border-radius:var(--radius);
        overflow:hidden;
        border: 1px solid var(--color-border);
        background-color: var(--color-lightgrey);
        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }
    .entry-content {margin-bottom:0;}
}


.post-card-xl {
    grid-column: 1 / -1;

    .entry-media {
        aspect-ratio: 16 / 9;
        width:100%;
        border-radius:var(--radius);
        overflow:hidden;
        border: 1px solid var(--color-border);
        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }

    .entry-title {
        font-size: var(--font-size-xxl);
    }

    @media only screen and (max-width:992px) {
        .entry-title {
            font-size: var(--font-size-xl);
        }
    }
}


.post-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.post-card .entry-media {
    position: relative;
}

.post-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.post-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.post-card .post-meta {
  justify-content:space-between;
  margin-bottom:var(--spacing-sm);
}

.post-card .post-meta .post-meta__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.post-author {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);

    .post-author-avatar {
        border-radius: 50%;
    }
}


.post-label {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 1;
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1;
}

.post-label .post-category a {
    display: inline-flex;
    padding: .45em .65em;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: #fff;
}


/* Post card list */
.post-card-list {
    display:flex;
    flex-flow: row nowrap;
    align-items:flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    .entry-media {
      width:200px;
      aspect-ratio: 16 / 9;
      border-radius: var(--radius-sm)!important;
        a {
            width:100%;
            display:block;
            border-radius: var(--radius-min);
            overflow: hidden;
            border: 1px solid var(--color-border);
            img {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }
        .post-label {
          top: var(--spacing-xs);
          left: var(--spacing-xs);
        }
    }
    .entry-content {
      width:calc(100% - 200px);
        .entry-title {
            font-size:16px;
            line-height:1.4em;
            margin:0 0 1em 0;
        }
        .post-meta {
          margin:0;
          .user-avatar {
            --avatar-size: 24px!important;
          }
        }
    }

    @media only screen and (max-width:992px) {
        flex-flow: column nowrap;
        .entry-media {
          width:100%;
            a {width:100%;}
        }
        .entry-content {
          width:100%;
            .entry-title {
                font-size:16px;
            }
        }
    }
}

/* Placeholder Animation */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

.img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img.site-logo {
      height:auto;
      width:100%;
      max-width:84px;
    }
}

/* Screen Reader Text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Page */
.page-header {
  margin-bottom: var(--spacing-xl);
}

/* Content */
.content-sidebar-layout {
    display:flex;
    align-items:flex-start;
    gap:var(--spacing-md);

    .content-sidebar-main,
    > .posts-wrapper {
        width:100%;
        min-width:0;
    }

    aside {
        width:420px;
        flex:0 0 420px;
    }
}

@media only screen and (max-width:992px) {
    .content-sidebar-layout {
        flex-direction:column;

        aside {
            width:100%;
            flex:0 0 auto;
        }
    }
}

/* Breadcrumbs */
.breadcrumbs {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    padding:var(--spacing-sm) 0;

    ol {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    li:not(:last-child)::after {
        content: '/';
        margin-left: 0.5rem;
        opacity: 0.5;
    }
}

/* Pagination */
.pagination {
    margin: var(--spacing-xl) 0 0;
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-min);
    font-size: var(--font-size-sm);
}

.pagination a.page-numbers:hover {
    background: var(--color-lightgrey);
}

.pagination .page-numbers.current {
    background: var(--color-primary);
    color: #fff;
    font-weight: var(--font-weight-semibold);
}

.pagination .page-numbers.dots {
    background: none;
}


/* ---------------------------
* GUTENBERG PALETTE BRIDGE
*
* Queste classi collegano la palette definita in theme.json con le variabili
* CSS del tema. Gutenberg non usa le variabili direttamente: aggiunge classi
* tipo .has-{slug}-background-color ai blocchi. Qui le mappiamo alle variabili.
*
* COME MANTENERE L'ALLINEAMENTO:
*
* 1. CAMBIARE IL VALORE DI UN COLORE
*    → Aggiorna solo la variabile in :root (es. --color-primary: #nuovo)
*    → Le classi qui sotto si aggiornano automaticamente (referenziano la variabile)
*    → Aggiorna anche il valore "color" in theme.json per la preview dell'editor
*
* 2. AGGIUNGERE UN COLORE
*    → Aggiungi la variabile in :root (es. --color-accent: #F00)
*    → Aggiungi l'entry in theme.json > settings > color > palette
*      { "slug": "accent", "color": "#F00", "name": "Accent" }
*    → Aggiungi le due classi qui sotto seguendo il pattern esistente
*
* 3. RINOMINARE/RIMUOVERE UN COLORE
*    → Aggiorna o rimuovi lo slug in theme.json > settings > color > palette
*    → Aggiorna o rimuovi le classi corrispondenti qui sotto
*    → Eventuali blocchi già salvati con la vecchia classe perderanno il colore
*
* 4. CAMBIARE UNA FONT SIZE
*    → Aggiorna la variabile in :root (es. --font-size-lg: 1.3rem)
*    → Le classi .has-{slug}-font-size si aggiornano automaticamente
*    → Aggiorna il valore "size" in theme.json > settings > typography > fontSizes
*
* NOTA: i valori "color" e "size" in theme.json servono SOLO per la preview
* nell'editor — non generano CSS sul frontend (global-styles è deaccodato).
* Il valore effettivo a frontend viene SEMPRE dalla variabile CSS.
--------------------------- */

/* Colori di sfondo — .has-{slug}-background-color */
.has-primary-background-color       { background-color: var(--color-primary); }
.has-primary-light-background-color { background-color: var(--color-primary-light); }
.has-primary-dark-background-color  { background-color: var(--color-primary-dark); }
.has-text-background-color          { background-color: var(--color-text); }
.has-text-light-background-color    { background-color: var(--color-text-light); }
.has-black-background-color         { background-color: var(--color-black); }
.has-lightgrey-background-color     { background-color: var(--color-lightgrey); }
.has-white-background-color         { background-color: var(--color-background); }

/* Colori del testo — .has-{slug}-color */
.has-primary-color       { color: var(--color-primary); }
.has-primary-light-color { color: var(--color-primary-light); }
.has-primary-dark-color  { color: var(--color-primary-dark); }
.has-text-color          { color: var(--color-text); }
.has-text-light-color    { color: var(--color-text-light); }
.has-black-color         { color: var(--color-black); }
.has-lightgrey-color     { color: var(--color-lightgrey); }
.has-white-color         { color: var(--color-background); }

/* Font sizes — .has-{slug}-font-size */
.has-xs-font-size   { font-size: var(--font-size-xs); }
.has-sm-font-size   { font-size: var(--font-size-sm); }
.has-base-font-size { font-size: var(--font-size-base); }
.has-lg-font-size   { font-size: var(--font-size-lg); }
.has-xl-font-size   { font-size: var(--font-size-xl); }
.has-xxl-font-size  { font-size: var(--font-size-xxl); }

/* Text alignment — .has-text-align-{alignment} */
.has-text-align-left    { text-align: left; }
.has-text-align-center  { text-align: center; }
.has-text-align-right   { text-align: right; }
.has-text-align-justify { text-align: justify; }