@charset "UTF-8";
/* ==========================================================
GLS — Custom theme overrides on top of Nexigrid
----------------------------------------------------------
Scope: SOLO override delle CSS variables NG con la palette GLS.
Nessuna regola nuova: vedi NG §0 (no duplicazione) e §3 (token).

Palette GLS:
- Main (arancio):     #E48A1F   light #EAA451   dark #B46C16
- Secondary (viola):  #6167E8   light #8D91EE   dark #1A1668
- Greys:              extra-light #EBEBEB / light #C8C8C8 / mid #A9AAAD / dark #929499
========================================================== */
:root {
  /* ======================================================
  PRIMARY → arancio GLS
  ====================================================== */
  --ng-primary: #E48A1F;
  --ng-primary-bg: #E48A1F;
  --ng-primary-text: #ffffff;
  --ng-primary-border: #B46C16;
  --ng-primary-hover: #B46C16;
  --ng-primary-dark: #B46C16;
  --ng-primary-light: #EAA451;
  --ng-primary-soft: #FCEFDC;
  --ng-primary-active: #8E5410;
  --ng-primary-focus: #B46C16;
  --ng-primary-outline: #B46C16;
  --ng-primary-disabled: #F4C892;
  /* ======================================================
  SECONDARY → viola GLS
  ====================================================== */
  --ng-secondary: #6167E8;
  --ng-secondary-bg: #6167E8;
  --ng-secondary-text: #ffffff;
  --ng-secondary-border: #4A50C4;
  --ng-secondary-hover: #4A50C4;
  --ng-secondary-dark: #1A1668;
  --ng-secondary-light: #8D91EE;
  --ng-secondary-soft: #F0F0FF;
  --ng-secondary-active: #1A1668;
  --ng-secondary-focus: #4A50C4;
  --ng-secondary-outline: #4A50C4;
  --ng-secondary-disabled: #BFC2F5;
  /* ======================================================
  GREY OVERRIDES → palette GLS (scala NG: 0..100)
  ====================================================== */
  --ng-g-20: #EBEBEB; /* GLS extra-light */
  --ng-g-30: #C8C8C8; /* GLS light */
  --ng-g-40: #A9AAAD; /* GLS middle */
  --ng-g-50: #929499; /* GLS dark */
  /* ======================================================
  BORDER & BODY TUNING (allineato palette GLS)
  ====================================================== */
  --ng-color-border: #EBEBEB;
  --ng-color-border-light: #EBEBEB;
  --ng-color-border-middle: #C8C8C8;
  --ng-color-border-dark: #1A1A1A;
  --ng-body-color: #333333;
}

/* ==========================================================
GLS SCOPED — elementi decorativi non coperti da NG by design
========================================================== */
/* ===========================================================
GLS — Eyebrow CAPS (sopra h2 sezione)
=========================================================== */
.gls-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ng-secondary);
  margin-bottom: 10px;
}

/* ===========================================================
GLS — Hero photo + card flottanti
=========================================================== */
.gls-hero-photo-wrap {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

.gls-hero-photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ng-secondary-soft) 0%, var(--ng-primary-soft) 100%);
  box-shadow: 0 32px 80px rgba(26, 26, 26, 0.12);
}

.gls-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 40%), radial-gradient(circle at 70% 80%, rgba(97, 103, 232, 0.15) 0%, transparent 40%);
}

.gls-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.gls-hero-float {
  position: absolute;
  background: #ffffff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 16px 40px rgba(26, 26, 26, 0.14);
  border: 1px solid var(--ng-color-border-light);
  z-index: 2;
  min-width: 180px;
}
.gls-hero-float strong {
  display: block;
  color: #1A1A1A;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  margin: 6px 0 2px;
}
.gls-hero-float small {
  display: block;
  color: var(--ng-g-50);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gls-hero-float-a {
  top: 6%;
  left: -40px;
} /* alto-sinistra */
.gls-hero-float-c {
  bottom: 6%;
  left: -40px;
} /* basso-sinistra */
.gls-hero-float-b {
  bottom: 6%;
  right: -30px;
} /* sponsor: basso-destra, allineato a .c */
/* Hero — card sponsor differenziata (accento brand via --gls-spons) */
.gls-hero-float-sponsor {
  border: 1.5px solid var(--gls-spons, var(--ng-warning, #E48A1F));
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
}

.gls-hero-spons-label {
  display: inline-block;
  background: var(--gls-spons, var(--ng-warning, #E48A1F));
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: var(--ng-radius-pill, 999px);
}

@media (max-width: 992px) {
  .gls-hero-float-a {
    left: 0;
  }
  .gls-hero-float-b {
    right: 0;
  }
  .gls-hero-float-c {
    left: 0;
    right: auto;
  }
}
@media (max-width: 720px) {
  .gls-hero-photo-wrap {
    max-width: 100%;
  }
  /* Gli organici (decorativi) spariscono… */
  .gls-hero-float {
    display: none;
  }
  /* …ma lo SPONSOR resta sempre visibile: diventa card statica sotto la foto. */
  .gls-hero-float-sponsor {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100%;
    min-width: 0;
    margin: 16px 0 0;
    box-sizing: border-box;
  }
}
/* Blocco top home: ordine sezioni. Su mobile la microsponsor ribbon scende
   sotto Categorie, così non si impila all'hero-sponsor (entrambi restano visibili). */
.gls-home-top {
  display: flex;
  flex-direction: column;
}

@media (max-width: 720px) {
  .gls-home-top > .gls-sponsor-ribbon {
    order: 1;
  }
}
/* Home liste "Ultimi termini" / "Ultimi glossari": su mobile (≤895, bp NG) l'azione
   (badge categoria + bottoni/flag sponsor) scende a capo a tutta larghezza, così il
   testo descrittivo non viene strozzato a una parola per riga. Vale anche per la
   card sponsor termine (è una .ng-list-item dentro #ultimi). */
@media (max-width: 895px) {
  #ultimi .ng-list-item,
  #ultimi-glossari .ng-list-item {
    flex-wrap: wrap;
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
    column-gap: 14px;
  }
  /* icona allineata in alto alla prima riga di testo */
  #ultimi .ng-list-media,
  #ultimi-glossari .ng-list-media {
    align-items: flex-start;
    padding-top: 2px;
  }
  /* contenuto in colonna con respiro fra titolo / descrizione / CTA */
  #ultimi .ng-list-content,
  #ultimi-glossari .ng-list-content {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  /* azione (badge + bottoni/flag) a capo, piena larghezza */
  #ultimi .ng-list-action,
  #ultimi-glossari .ng-list-action {
    margin-left: 0;
    flex-basis: 100%;
    width: 100%;
    white-space: normal;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 14px;
  }
}
/* ===========================================================
GLS — Card categorie con icona watermark + Glossari editoriali con progress bar
=========================================================== */
.gls-card-cat {
  position: relative;
  overflow: hidden;
}
.gls-card-cat .gls-card-watermark {
  position: absolute;
  bottom: -30px;
  right: -20px;
  font-size: 160px;
  line-height: 1;
  color: rgba(26, 26, 26, 0.04);
  z-index: 0;
  pointer-events: none;
}
.gls-card-cat .ng-card-body {
  position: relative;
  z-index: 1;
}

.gls-card-glo {
  position: relative;
  min-height: 230px;
  border-left: 4px solid var(--ng-secondary);
}
.gls-card-glo.is-primary {
  border-left-color: var(--ng-primary);
}

/* ===========================================================
GLS — Benefit card grande (sezione "Perché GLS")
=========================================================== */
.gls-card-benefit {
  padding: 32px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--ng-color-border-light);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.gls-card-benefit:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(26, 26, 26, 0.06);
}

.gls-card-benefit-num {
  font-size: 14px;
  font-weight: 900;
  color: var(--ng-secondary);
  letter-spacing: 0.18em;
  margin-bottom: 24px;
  display: block;
}

.gls-card-benefit-h {
  font-size: 22px;
  line-height: 1.2;
  color: #1A1A1A;
  margin: 0 0 12px;
  font-weight: 800;
}

.gls-card-benefit-p {
  margin: 0;
  color: var(--ng-g-50);
  line-height: 1.55;
}

/* ===========================================================
GLS — Stats strip (partial globale prima del footer)
=========================================================== */
.gls-stats-strip {
  margin-top: 56px;
  background: var(--ng-secondary-soft);
  border-top: 1px solid var(--ng-color-border-light);
}

/* Striscia compatta: 4 stat in fila, niente icone */
.gls-stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 12px 24px;
  text-align: center;
}

.gls-stat-item {
  flex: 1 1 0;
  min-width: 110px;
}

.gls-stat-num {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ng-secondary-dark);
}

.gls-stat-label {
  font-size: 12px;
  color: var(--ng-g-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-top: 6px;
}

/* ===========================================================
GLS TYPOGRAPHY — heading semantici
=========================================================== */
.gls-h1 {
  margin: 0 0 12px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #1A1A1A;
}

.gls-h1-hero {
  margin: 14px 0 20px;
  font-size: clamp(44px, 5vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: #1A1A1A;
}

.gls-h2-section {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ng-secondary);
}

.gls-h2-sub {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ng-secondary);
}

.gls-h3-card {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.15;
}

.gls-lead {
  max-width: 720px;
}

.gls-lead-hero {
  max-width: 600px;
  color: #4C4C4C;
}

.gls-text-body {
  color: #333333;
  line-height: 1.6;
}

/* ===========================================================
GLS — Icona tonda decorativa
=========================================================== */
/* Blog — card */
.gls-blog-card {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gls-blog-cover {
  position: relative;
  height: 168px;
  background-size: cover;
  background-position: center;
  background-color: var(--ng-secondary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gls-blog-cover.is-placeholder {
  background: linear-gradient(135deg, var(--ng-secondary-soft) 0%, rgba(125, 35, 66, 0.14) 100%);
}

.gls-blog-cover.is-placeholder i {
  font-size: 52px;
  color: var(--ng-secondary);
  opacity: 0.42;
}

.gls-blog-spons {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ng-warning, #E48A1F);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--ng-radius-pill, 999px);
}

.gls-blog-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.gls-blog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ng-secondary-dark, #1A1668);
}

.gls-blog-excerpt {
  margin: 0;
  font-size: 14px;
  color: var(--ng-g-60, #555);
  line-height: 1.55;
}

.gls-blog-meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  color: var(--ng-g-40, #A9AAAD);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.gls-blog-card:hover .gls-blog-title {
  color: var(--ng-secondary);
}

/* Blog — articolo in evidenza (index) */
.gls-blog-featured {
  padding: 0 !important;
  overflow: hidden;
  margin-bottom: 28px;
}

.gls-blog-fwrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}

.gls-blog-featured .gls-blog-cover {
  height: 100%;
  min-height: 280px;
}

.gls-blog-featured .gls-blog-body {
  padding: 34px 36px;
  gap: 12px;
  justify-content: center;
}

.gls-blog-featured .gls-blog-title {
  font-size: 28px;
  line-height: 1.2;
}

.gls-blog-featured .gls-blog-excerpt {
  font-size: 15px;
}

.gls-blog-feat-tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ng-secondary);
}

@media (max-width: 768px) {
  .gls-blog-fwrap {
    grid-template-columns: 1fr;
  }
  .gls-blog-featured .gls-blog-cover {
    min-height: 180px;
  }
}
/* Blog — hero dettaglio */
.gls-blog-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ng-radius-lg, 12px);
  padding: 56px 48px;
  margin-bottom: 32px;
  color: #fff;
  background: linear-gradient(135deg, var(--ng-secondary-dark, #1A1668) 0%, var(--ng-secondary, #7d2342) 55%, var(--ng-primary, #4a2a86) 100%);
}

.gls-blog-hero-eyebrow {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}

.gls-blog-hero h1 {
  color: #fff;
  margin: 10px 0 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.gls-blog-hero-meta {
  margin-top: 18px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.gls-blog-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gls-blog-hero-spons {
  display: inline-block;
  margin-bottom: 4px;
  background: var(--ng-warning, #E48A1F);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: var(--ng-radius-pill, 999px);
}

@media (max-width: 576px) {
  .gls-blog-hero {
    padding: 40px 26px;
  }
}
/* Blog — corpo articolo leggibile */
.gls-article-body {
  max-width: 760px;
}

.gls-blog-cover-full {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: var(--ng-radius-md);
  margin-bottom: 28px;
}

.gls-circle-icon-sm,
.gls-circle-icon-md,
.gls-circle-icon-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.gls-circle-icon-sm {
  width: 38px;
  height: 38px;
}

.gls-circle-icon-md {
  width: 54px;
  height: 54px;
}

.gls-circle-icon-lg {
  width: 62px;
  height: 62px;
}

/* ===========================================================
GLS — Card termine
=========================================================== */
.gls-card-bookmark {
  position: absolute;
  top: 20px;
  right: 20px;
}

.gls-card-term {
  position: relative;
  min-height: 200px;
}

/* ===========================================================
GLS — Glossary page
=========================================================== */
.gls-letter-divider {
  background: var(--ng-secondary-soft);
  border-top: 1px solid var(--ng-secondary);
  border-bottom: 1px solid var(--ng-secondary-soft);
  padding: 14px 1rem;
}

.gls-letter-divider-h {
  margin: 0;
  font-size: 28px;
  color: var(--ng-secondary-dark);
  font-weight: 900;
  letter-spacing: 0.1em;
}

/* override flex di .ng-list .ng-list-item: la scheda termine va in colonna */
.ng-list .gls-term-item {
  display: block;
}

/* footer: nasconde "Aree tematiche" su tablet/mobile */
@media (max-width: 992px) {
  .gls-footer-areas {
    display: none;
  }
}
/* ===========================================================
GLS — AD SLOTS (predisposizione pubblicità)
NG non ha un componente "ad": box riservato scoped di progetto.
Render reale gestito dal partial np-ad-slot.php (gate ads.enabled+env).
=========================================================== */
.gls-ad {
  display: block;
  margin-inline: auto;
}

.gls-ad-rectangle {
  max-width: 300px;
  margin-block: 24px;
}

.gls-ad-inline {
  max-width: 728px;
  margin-block: 40px;
}

.gls-ad-footer {
  max-width: 970px;
  margin-block: 48px 8px;
}

/* etichetta "annuncio dimostrativo" — solo dev */
.gls-ad-flag {
  display: block;
  margin-top: 6px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ng-g-40, #A9AAAD);
}

/* contenitore slot reale (ads attivi): riserva l'ingombro, evita CLS */
.gls-ad-live {
  width: 100%;
}

.gls-ad-rectangle .gls-ad-live {
  min-height: 250px;
}

.gls-ad-inline .gls-ad-live,
.gls-ad-footer .gls-ad-live {
  min-height: 90px;
}

/* ---- House-ad mock (dev): banner realistico, non box grigio ---- */
.gls-ad-mock {
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 14px;
  padding: 22px 24px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(26, 22, 104, 0.18);
}

.gls-ad-mock-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gls-ad-mock-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.gls-ad-mock-head {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}

.gls-ad-mock-sub {
  font-size: 14px;
  opacity: 0.92;
}

.gls-ad-mock-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--ng-secondary-dark, #1A1668);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}

/* formato rectangle (300x250) → impilato verticale */
.gls-ad-rectangle .gls-ad-mock {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 250px;
}

.gls-ad-rectangle .gls-ad-mock-head {
  font-size: 26px;
}

.gls-ad-rectangle .gls-ad-mock-cta {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* creatività demo (gradienti palette GLS + accent) */
.gls-ad-mock-a {
  background: linear-gradient(120deg, #6167E8 0%, #1A1668 100%);
}

.gls-ad-mock-b {
  background: linear-gradient(120deg, #E48A1F 0%, #B46C16 100%);
}

.gls-ad-mock-c {
  background: linear-gradient(120deg, #1A8F6B 0%, #0E5C45 100%);
}

.gls-ad-mock-b .gls-ad-mock-cta {
  color: #8E5410;
}

.gls-ad-mock-c .gls-ad-mock-cta {
  color: #0E5C45;
}

/* mobile: banner orizzontali → impilati */
@media (max-width: 576px) {
  .gls-ad-inline .gls-ad-mock,
  .gls-ad-footer .gls-ad-mock {
    flex-direction: column;
    align-items: flex-start;
  }
  .gls-ad-inline .gls-ad-mock-cta,
  .gls-ad-footer .gls-ad-mock-cta {
    width: 100%;
    justify-content: center;
  }
}
/* ===========================================================
GLS — SPONSORIZZAZIONI NATIVE (motore gls-sponsors)
Onestà visiva: l'unità è distinguibile (accent + flag) ma di pari
dignità del contenuto organico. Mai camuffata.
Accent del brand iniettato inline: --gls-sponsor-accent.
=========================================================== */
.gls-sponsor {
  --gls-sponsor-accent: var(--ng-secondary);
}

/* Formato #1 — Termine Sponsorizzato (list-item) */
.gls-sponsor-item {
  position: relative;
  border-left: 3px solid var(--gls-sponsor-accent);
  background: color-mix(in srgb, var(--gls-sponsor-accent) 6%, transparent);
  border-radius: 8px;
}

.gls-sponsor-ico {
  color: var(--gls-sponsor-accent);
  font-size: 1.6rem;
}

.gls-sponsor-title:hover {
  color: var(--gls-sponsor-accent);
}

.gls-sponsor-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--gls-sponsor-accent);
}

.gls-sponsor-cta i {
  font-size: 1em;
}

.gls-sponsor-meta {
  align-items: flex-end;
}

.gls-sponsor-brand {
  color: var(--gls-sponsor-accent);
}

/* flag "Sponsorizzato": chiara, sobria, mai gridata */
.gls-sponsor-flag {
  background: color-mix(in srgb, var(--gls-sponsor-accent) 14%, transparent);
  color: var(--gls-sponsor-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Formato #2 — Microsponsor ribbon */
.gls-sponsor-ribbon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 8px;
  padding: 12px 18px;
  border: 1px solid color-mix(in srgb, var(--gls-sponsor-accent) 22%, transparent);
  background: color-mix(in srgb, var(--gls-sponsor-accent) 5%, transparent);
  border-radius: 12px;
}

.gls-sponsor-ribbon .gls-sponsor-ico {
  font-size: 1.3rem;
  flex: none;
}

.gls-sponsor-ribbon-text {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  min-width: 0;
}

.gls-sponsor-ribbon-link {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gls-sponsor-accent);
  white-space: nowrap;
}

@media (max-width: 576px) {
  .gls-sponsor-ribbon {
    flex-wrap: wrap;
  }
  .gls-sponsor-ribbon-link {
    margin-left: 0;
  }
}
/* Formato #3 — Glossario di Marca (card brandizzata, raffinata) */
.gls-sponsor-glo {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gls-sponsor-accent) 22%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--gls-sponsor-accent) 16%, transparent);
}

/* header brandizzato a gradiente */
.gls-sponsor-glo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  color: #fff;
  background: linear-gradient(120deg, var(--gls-sponsor-accent) 0%, color-mix(in srgb, var(--gls-sponsor-accent) 70%, #000) 100%);
}

.gls-sponsor-glo-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-weight: 900;
  font-size: 17px;
  line-height: 1;
}

.gls-sponsor-glo-headtext {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.gls-sponsor-glo-curator {
  font-size: 13px;
  line-height: 1.1;
}

.gls-sponsor-glo-curator strong {
  font-weight: 900;
}

.gls-sponsor-glo-seal {
  margin-left: auto;
  font-size: 1.5rem;
  opacity: 0.9;
  flex: none;
}

/* flag sopra header colorato: bianca traslucida, leggibile */
.gls-sponsor-flag-onhead {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.gls-sponsor-glo-foot {
  margin-top: 4px;
}

.gls-sponsor-brand-badge {
  background: color-mix(in srgb, var(--gls-sponsor-accent) 12%, transparent);
  color: var(--gls-sponsor-accent);
  font-weight: 800;
}

/* CTA a bottone pieno accent */
.gls-sponsor-glo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--gls-sponsor-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.gls-sponsor-glo-btn:hover {
  filter: brightness(0.92);
  color: #fff;
}

/* riga ext: trigger info-brand (popover) + link diretto allo sponsor */
.gls-sponsor-glo-extrow {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--gls-sponsor-accent) 22%, transparent);
  justify-content: space-between;
  align-items: center;
}

.gls-sponsor-glo-extlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ng-g-50, #777);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.gls-sponsor-glo-extlink:hover {
  color: var(--gls-sponsor-accent);
}

.gls-sponsor-glo-info i {
  color: var(--gls-sponsor-accent);
}

/* Popover info brand */
.gls-sponsor-pop {
  width: 320px;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--gls-sponsor-accent) 28%, transparent);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--gls-sponsor-accent) 22%, transparent);
}

.gls-sponsor-pop-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.gls-sponsor-pop-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gls-sponsor-accent) 16%, transparent);
  color: var(--gls-sponsor-accent);
  font-size: 22px;
}

.gls-sponsor-pop-brand {
  font-size: 15px;
  font-weight: 900;
  color: var(--gls-sponsor-accent);
  display: block;
}

.gls-sponsor-pop-meta {
  font-size: 12px;
  color: var(--ng-g-50, #777);
  margin-top: 2px;
}

.gls-sponsor-pop-blurb {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ng-g-70, #555);
  line-height: 1.45;
}

.gls-sponsor-pop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===========================================================
GLS — COOKIE CONSENT (banner sticky + modal preferenze)
=========================================================== */
.gls-cc-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9000;
  /* dark inkito: distacco netto dal sito (chiaro) e dal viola brand (hero/footer) */
  background: #16172A;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.gls-cc-banner.is-open {
  transform: translateY(0);
  opacity: 1;
}

.gls-cc-banner-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
  max-width: 1280px;
  margin: 0 auto;
}

.gls-cc-banner-text {
  min-width: 0;
  flex: 1;
}

.gls-cc-banner-title {
  display: block;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 4px;
  color: #fff;
}

.gls-cc-banner-msg {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}

.gls-cc-banner-msg strong {
  color: rgba(255, 255, 255, 0.92);
}

.gls-cc-link {
  color: #8D91EE;
  font-weight: 700;
}

.gls-cc-link:hover {
  color: #fff;
}

/* sui pulsanti del banner dark, garantiamo contrasto degli outline secondary */
.gls-cc-banner .ng-btn-secondary-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.gls-cc-banner .ng-btn-secondary-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
  color: #fff;
}

.gls-cc-banner-actions {
  display: flex;
  gap: 8px;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .gls-cc-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
  .gls-cc-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px;
  }
  .gls-cc-banner-actions {
    justify-content: stretch;
  }
  .gls-cc-banner-actions .ng-btn {
    flex: 1;
  }
}
/* (Categorie modal cookie ora con ng-list divided — niente CSS custom necessario) */
/* Ricerca: voce sponsorizzata nell'autocomplete (palette arancio primary) */
.gls-search-ac .ng-autocomplete-menu [role=option].is-sponsored {
  position: relative;
  border-left: 5px solid var(--ng-primary, #E48A1F);
  background: color-mix(in srgb, var(--ng-primary, #E48A1F) 12%, #fff);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ng-primary, #E48A1F) 20%, transparent);
}

.gls-search-ac .ng-autocomplete-menu [role=option].is-sponsored:hover,
.gls-search-ac .ng-autocomplete-menu [role=option].is-sponsored.is-active {
  background: color-mix(in srgb, var(--ng-primary, #E48A1F) 22%, #fff) !important;
}

.gls-search-ac .ng-autocomplete-menu [role=option].is-sponsored .ph-megaphone-simple {
  color: var(--ng-primary, #E48A1F);
  font-size: 1.2em;
}

/* la label/sublabel dello sponsor in arancio scuro per maggior contrasto */
.gls-search-ac .ng-autocomplete-menu [role=option].is-sponsored strong,
.gls-search-ac .ng-autocomplete-menu [role=option].is-sponsored .ng-autocomplete-label {
  color: var(--ng-primary-dark, #B46C16);
  font-weight: 900;
}

/* Flag "ANNUNCIO" grande, evidente, prima del label */
.gls-search-ac-flag {
  display: inline-block;
  margin: 0 10px 0 6px;
  padding: 3px 9px;
  background: var(--ng-primary, #E48A1F);
  color: #fff !important;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(180, 108, 22, 0.25);
}

/* ===========================================================
GLS — Gioco "L'Intruso" (widget sidebar, ~300x250)
=========================================================== */
.gls-game {
  margin-bottom: 24px;
  background: #fff;
  border: 1px solid var(--ng-g-10, #EBEBEB);
  box-shadow: 0 2px 10px rgba(26, 22, 104, 0.04);
}

.gls-game-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* (icona widget: usa classi NG `text-secondary fs-2xl` direttamente nel markup) */
/* ===========================================================
GLS — Cruciverba Tech (pagina /giochi/cruciverba)
=========================================================== */
.gls-cw {
  display: inline-block;
  max-width: 100%;
}

.gls-cw-grid {
  border-collapse: collapse;
  margin: 0 auto;
}

.gls-cw-grid td {
  width: 56px;
  height: 56px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--ng-g-20, #C8C8C8);
  position: relative;
  background: #fff;
}

.gls-cw-block {
  background: var(--ng-secondary-dark, #1A1668) !important;
  border-color: var(--ng-secondary-dark, #1A1668) !important;
}

.gls-cw-cell {
  background: #fff;
}

.gls-cw-cell input {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--ng-secondary-dark, #1A1668);
  text-transform: uppercase;
  font-family: inherit;
}

.gls-cw-num {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  font-weight: 800;
  color: var(--ng-g-50, #777);
  pointer-events: none;
  line-height: 1;
}

/* Stati */
.gls-cw-cell.is-word-active {
  background: color-mix(in srgb, var(--ng-secondary, #6167E8) 12%, #fff);
}

.gls-cw-cell.is-active {
  background: color-mix(in srgb, var(--ng-secondary, #6167E8) 24%, #fff);
}

.gls-cw-cell.is-correct {
  background: color-mix(in srgb, var(--ng-success, #1DA571) 22%, #fff);
}

.gls-cw-cell.is-wrong {
  background: color-mix(in srgb, var(--ng-danger, #C0392B) 22%, #fff);
}

.gls-cw-cell.is-correct input {
  color: var(--ng-success-dark, #18875D);
}

.gls-cw-cell.is-wrong input {
  color: var(--ng-danger-dark, #962e22);
}

/* Actions */
.gls-cw-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Status box */
.gls-cw-status {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  border-left: 3px solid var(--ng-secondary, #6167E8);
  background: var(--ng-g-5, #F5F5F5);
}

.gls-cw-status.is-success {
  border-color: var(--ng-success, #1DA571);
  background: color-mix(in srgb, var(--ng-success, #1DA571) 10%, #fff);
}

.gls-cw-status.is-warning {
  border-color: var(--ng-warning, #E48A1F);
  background: color-mix(in srgb, var(--ng-warning, #E48A1F) 10%, #fff);
}

.gls-cw-status.is-info {
  border-color: var(--ng-secondary, #6167E8);
}

.gls-cw-status a {
  color: var(--ng-secondary, #6167E8);
  font-weight: 700;
}

/* Clue list */
.gls-cw-clue-h {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ng-secondary, #6167E8);
}

.gls-cw-clue {
  cursor: pointer;
  transition: background 0.12s ease, border-left-color 0.12s ease;
  border-left: 3px solid transparent;
  padding-left: 8px;
  margin-left: -8px;
  min-height: 3.25em;
  display: flex;
  align-items: center;
}

.gls-cw-clue:hover {
  background: color-mix(in srgb, var(--ng-secondary, #6167E8) 6%, transparent);
}

.gls-cw-clue.is-active {
  background: color-mix(in srgb, var(--ng-secondary, #6167E8) 14%, transparent);
  border-left-color: var(--ng-secondary, #6167E8);
}

.gls-cw-clue.is-active .gls-cw-clue-num {
  color: var(--ng-secondary, #6167E8);
}

.gls-cw-status-cta {
  display: inline-block;
  margin-left: 6px;
  font-weight: 800;
}

/* Catalogo cruciverba */
.gls-cw-catalog-h {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 900;
  color: var(--ng-secondary-dark, #1A1668);
  display: flex;
  align-items: center;
}

.gls-cw-cat-item.is-active .ng-list-title {
  color: var(--ng-secondary, #6167E8);
  font-weight: 800;
}

.gls-cw-clue-num {
  display: inline-block;
  min-width: 22px;
  color: var(--ng-secondary-dark, #1A1668);
  font-weight: 900;
  margin-right: 6px;
}

.gls-cw-clue-text {
  font-size: 13px;
  color: var(--ng-g-70, #444);
  line-height: 1.55;
}

@media (max-width: 576px) {
  .gls-cw-grid td {
    width: 44px;
    height: 44px;
  }
  .gls-cw-cell input {
    font-size: 18px;
  }
}
.gls-game-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ng-secondary, #6167E8);
  margin-bottom: 2px;
}

.gls-game-title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--ng-secondary-dark, #1A1668);
  line-height: 1.1;
}

.gls-game-q {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ng-g-70, #4A4A6A);
  line-height: 1.5;
}

.gls-game-q strong {
  color: var(--ng-secondary-dark, #1A1668);
}

.gls-game-opts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gls-game-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--ng-g-5, #F5F5F5);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ng-g-90, #222);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.gls-game-opt:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ng-secondary, #6167E8) 8%, var(--ng-g-5, #F5F5F5));
  border-color: color-mix(in srgb, var(--ng-secondary, #6167E8) 24%, transparent);
}

.gls-game-opt:active:not(:disabled) {
  transform: scale(0.99);
}

.gls-game-opt:disabled {
  cursor: default;
}

.gls-game-opt-arrow {
  color: var(--ng-g-40, #A9AAAD);
  font-size: 14px;
  flex: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.gls-game-opt:hover:not(:disabled) .gls-game-opt-arrow {
  color: var(--ng-secondary, #6167E8);
  transform: translateX(2px);
}

/* Reveal states */
.gls-game-opt.is-correct {
  background: color-mix(in srgb, var(--ng-success, #1DA571) 14%, #fff) !important;
  border-color: var(--ng-success, #1DA571) !important;
  color: var(--ng-success-dark, #18875D) !important;
}

.gls-game-opt.is-wrong {
  background: color-mix(in srgb, var(--ng-danger, #C0392B) 14%, #fff) !important;
  border-color: var(--ng-danger, #C0392B) !important;
  color: var(--ng-danger-dark, #962e22) !important;
}

.gls-game-opt.is-correct .gls-game-opt-arrow,
.gls-game-opt.is-wrong .gls-game-opt-arrow {
  color: inherit;
}

/* Quando l'utente ha sbagliato, l'opzione corretta si mostra con un check */
.gls-game-opt.is-revealed-target .gls-game-opt-arrow::before {
  content: "\f4cf"; /* phosphor check */
}

.gls-game.is-revealed .gls-game-opt:not(.is-correct):not(.is-wrong) {
  opacity: 0.55;
}

/* Feedback box */
.gls-game-feedback {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--ng-g-5, #F5F5F5);
  border-radius: 8px;
  border-left: 3px solid var(--ng-secondary, #6167E8);
  animation: gls-game-reveal 0.25s ease both;
}

.gls-game-feedback-msg {
  font-size: 13px;
  color: var(--ng-g-70, #444);
  line-height: 1.55;
  margin-bottom: 12px;
}

.gls-game-feedback-msg strong {
  color: var(--ng-secondary-dark, #1A1668);
}

.gls-game-feedback-msg em {
  color: var(--ng-secondary, #6167E8);
  font-style: normal;
  font-weight: 700;
}

.gls-game-again {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--ng-secondary, #6167E8);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.gls-game-again:hover {
  background: var(--ng-secondary-dark, #1A1668);
}

.gls-game-again:active {
  transform: scale(0.97);
}

@keyframes gls-game-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Modal cookie: close button minimale (solo icona Phosphor, no bg grigio default NG) */
#gls-cc-modal .ng-modal-close {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ng-g-50, #777) !important;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.4rem;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#gls-cc-modal .ng-modal-close:hover {
  background: var(--ng-g-5, #F5F5F5) !important;
  color: var(--ng-g-90, #222) !important;
}

/* Toggle switch custom scoped al cookie consent (NG non ha un toggle switch ready-to-use) */
.gls-cc-switch {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: 44px;
  height: 24px;
}

.gls-cc-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.gls-cc-switch-track {
  display: inline-block;
  width: 44px;
  height: 24px;
  background: var(--ng-g-20, #C8C8C8);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s ease;
}

.gls-cc-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}

.gls-cc-switch input:checked + .gls-cc-switch-track {
  background: var(--ng-secondary, #6167E8);
}

.gls-cc-switch input:checked + .gls-cc-switch-track .gls-cc-switch-thumb {
  transform: translateX(20px);
}

.gls-cc-switch input:focus-visible + .gls-cc-switch-track {
  box-shadow: 0 0 0 3px rgba(97, 103, 232, 0.35);
}

/* ===========================================================
GLS — Pagina /pubblicita
NB: .gls-h3-card e .gls-h2-section usano shorthand margin: 0 0 N
che vince sulle utility mb-N e mt-N. Qui usiamo regole scoped.
=========================================================== */
/* Spaziature di sezione */
.gls-pub-section-h {
  margin-bottom: 8px;
} /* H2 di sezione (vicino al lead sotto) */
.gls-pub-section-lead {
  margin-top: 0;
  margin-bottom: 36px;
}

.gls-pub-section-end {
  margin-bottom: 96px;
} /* spazio tra sezioni — generoso */
.gls-pub-form-start {
  margin-top: 24px;
} /* stacco extra prima del form */
@media (max-width: 768px) {
  .gls-pub-section-end {
    margin-bottom: 64px;
  }
}
/* Card icona+titolo+testo: struttura uniforme su tutta la pagina */
.gls-pub-icard {
  display: flex;
  flex-direction: column;
}

.gls-pub-icard-ico {
  display: block;
  font-size: 2.4rem;
  margin-bottom: 18px;
  line-height: 1;
}

.gls-pub-icard-h {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.2;
}

.gls-pub-icard-p {
  margin: 0;
  font-size: 14px;
  color: var(--ng-g-50, #777);
  line-height: 1.55;
}

/* Griglia formati: gap ampio per dare respiro tra le 4 card (molto testo dentro) */
.gls-pub-formats-grid {
  gap: 72px 56px !important;
}

@media (max-width: 768px) {
  .gls-pub-formats-grid {
    gap: 48px !important;
  }
}
/* Griglia step "Come si attiva": forziamo 2 col su desktop + 1 su mobile */
.gls-pub-steps-grid {
  display: grid !important;
  gap: 28px !important;
}

@media (min-width: 768px) {
  .gls-pub-steps-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 767.98px) {
  .gls-pub-steps-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Card formato: badge+titolo in riga, descrizione, lista benefit */
.gls-pub-fcard-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.gls-pub-fcard-head h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.gls-pub-fcard-eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--ng-g-50, #777);
  font-style: italic;
}

.gls-pub-fcard-desc {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ng-g-50, #777);
  line-height: 1.55;
}

/* Pillole "Dove appare" + "Frequenza" */
.gls-pub-fcard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.gls-pub-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--ng-g-5, #F5F5F5);
  border: 1px solid var(--ng-g-10, #EBEBEB);
  font-size: 12px;
  font-weight: 700;
  color: var(--ng-g-70, #444);
}

.gls-pub-pill i {
  font-size: 13px;
  color: var(--ng-secondary);
}

/* Mini-preview (mockup HTML rimpicciolito del formato vero) */
.gls-pub-preview {
  margin: 0 0 4px;
  padding: 12px;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, transparent 0 7px, rgba(0, 0, 0, 0.015) 7px 8px), var(--ng-g-5, #F5F5F5);
  border: 1px dashed var(--ng-g-10, #EBEBEB);
}

/* Link "Vedi dal vivo" */
.gls-pub-fcard-foot {
  margin-top: 16px;
}

.gls-pub-livelink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ng-secondary);
}

.gls-pub-livelink:hover {
  color: var(--ng-secondary-dark);
}

.gls-pub-livelink i {
  font-size: 14px;
}

/* ===========================================================
GLS — Mini-preview shared (gls-pv-*)
=========================================================== */
.gls-pv {
  --gls-sponsor-accent: var(--ng-secondary);
  font-family: inherit;
  color: var(--ng-g-90, #222);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.gls-pv-title {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--gls-sponsor-accent);
  line-height: 1.2;
}

.gls-pv-desc {
  display: block;
  font-size: 12px;
  color: var(--ng-g-50, #777);
  line-height: 1.4;
  margin-top: 4px;
}

.gls-pv-flag {
  display: inline-block;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--gls-sponsor-accent) 14%, transparent);
  color: var(--gls-sponsor-accent);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gls-pv-flag-light {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.gls-pv-brand {
  font-weight: 800;
  color: var(--gls-sponsor-accent);
  font-size: 12px;
}

.gls-pv-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gls-sponsor-accent);
  font-weight: 800;
  font-size: 12px;
  margin-top: 6px;
}

.gls-pv-cta-pill {
  background: var(--gls-sponsor-accent);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
}

.gls-pv-cta-mini {
  color: var(--gls-sponsor-accent);
  font-weight: 800;
  font-size: 11px;
  margin-left: auto;
}

/* PV #1 Voce Sponsor */
.gls-pv-term {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-left: 3px solid var(--gls-sponsor-accent);
  background: color-mix(in srgb, var(--gls-sponsor-accent) 6%, #fff);
}

.gls-pv-term .gls-pv-ico {
  color: var(--gls-sponsor-accent);
  font-size: 18px;
  flex: none;
}

.gls-pv-term .gls-pv-body {
  flex: 1;
  min-width: 0;
}

.gls-pv-term .gls-pv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}

/* PV #2 Sponsor della Settimana */
.gls-pv-ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--gls-sponsor-accent) 22%, transparent);
  background: color-mix(in srgb, var(--gls-sponsor-accent) 5%, #fff);
}

.gls-pv-ribbon .gls-pv-ico {
  color: var(--gls-sponsor-accent);
  font-size: 16px;
  flex: none;
}

.gls-pv-ribbon-text {
  font-size: 12px;
  color: var(--ng-g-50, #777);
  min-width: 0;
}

/* PV #3 Glossario Brand */
.gls-pv-glo {
  border: 1px solid color-mix(in srgb, var(--gls-sponsor-accent) 22%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gls-sponsor-accent) 14%, transparent);
}

.gls-pv-glo-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: #fff;
  background: linear-gradient(120deg, var(--gls-sponsor-accent) 0%, color-mix(in srgb, var(--gls-sponsor-accent) 70%, #000) 100%);
}

.gls-pv-glo-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}

.gls-pv-glo-headtext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gls-pv-glo-curator {
  font-size: 10px;
  line-height: 1.1;
}

.gls-pv-glo-seal {
  margin-left: auto;
  opacity: 0.9;
  font-size: 18px;
  flex: none;
}

.gls-pv-glo-body {
  padding: 12px 14px;
}

.gls-pv-glo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.gls-pv-glo-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gls-sponsor-accent) 12%, transparent);
  color: var(--gls-sponsor-accent);
  font-size: 11px;
  font-weight: 800;
}

/* PV #4 Definizione Sponsor */
.gls-pv-living {
  border: 1px solid color-mix(in srgb, var(--gls-sponsor-accent) 40%, transparent);
  background: color-mix(in srgb, var(--gls-sponsor-accent) 4%, #fff);
  border-radius: 10px;
  overflow: hidden;
}

.gls-pv-living-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}

.gls-pv-living-spark {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gls-sponsor-accent) 16%, transparent);
  color: var(--gls-sponsor-accent);
  font-size: 12px;
}

.gls-pv-living-q {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
  min-width: 0;
}

.gls-pv-living-caret {
  color: var(--gls-sponsor-accent);
  font-size: 14px;
  flex: none;
}

.gls-pv-living-body {
  padding: 4px 14px 12px 46px;
}

.gls-pv-living-term {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: var(--gls-sponsor-accent);
  margin-bottom: 4px;
}

.gls-pv-living-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
  flex-wrap: wrap;
}

.gls-pv-living-by {
  font-size: 11px;
  color: var(--ng-g-50, #777);
}

/* PV #5 Sponsor nella Ricerca — mockup search + dropdown */
.gls-pv-search {
  border: 1px solid var(--ng-g-10, #EBEBEB);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.gls-pv-search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ng-g-10, #EBEBEB);
  background: #fff;
  font-size: 13px;
  color: var(--ng-g-70, #444);
}

.gls-pv-search-input i {
  color: var(--ng-g-40, #A9AAAD);
  font-size: 14px;
}

.gls-pv-search-q {
  font-weight: 600;
}

.gls-pv-cursor {
  display: inline-block;
  color: var(--gls-sponsor-accent);
  font-weight: 800;
  animation: gls-pv-blink 1s infinite step-end;
}

@keyframes gls-pv-blink {
  50% {
    opacity: 0;
  }
}
.gls-pv-search-menu {
  background: #fff;
  max-height: none;
}

.gls-pv-search-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--ng-g-5, #F5F5F5);
}

.gls-pv-search-opt:last-child {
  border-bottom: 0;
}

.gls-pv-search-opt > i {
  color: var(--ng-g-40, #A9AAAD);
  font-size: 14px;
  flex: none;
}

.gls-pv-search-opt-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.gls-pv-search-opt-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ng-g-90, #222);
}

.gls-pv-search-opt-sub {
  font-size: 11px;
  color: var(--ng-g-50, #777);
}

/* opt sponsor: evidente arancio */
.gls-pv-search-opt-sponsor {
  background: color-mix(in srgb, var(--gls-sponsor-accent) 12%, #fff);
  border-left: 4px solid var(--gls-sponsor-accent);
  padding-left: 8px;
}

.gls-pv-search-opt-sponsor > i {
  color: var(--gls-sponsor-accent) !important;
}

.gls-pv-search-opt-sponsor .gls-pv-search-opt-title {
  color: var(--ng-primary-dark, #B46C16);
  font-weight: 900;
}

.gls-pv-flag-pill {
  display: inline-block;
  padding: 2px 7px;
  background: var(--gls-sponsor-accent);
  color: #fff !important;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Card step "Come si attiva" */
.gls-pub-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.gls-pub-promise {
  background: linear-gradient(120deg, color-mix(in srgb, var(--ng-secondary) 8%, transparent) 0%, color-mix(in srgb, var(--ng-primary) 6%, transparent) 100%);
  border-left: 4px solid var(--ng-secondary);
}

.gls-pub-cta {
  background: linear-gradient(135deg, var(--ng-secondary-dark, #1A1668) 0%, var(--ng-secondary, #6167E8) 100%);
  color: #fff;
}

.gls-pub-cta h2 {
  color: #fff;
}

.gls-pub-cta p,
.gls-pub-cta .text-g-50,
.gls-pub-cta .text-g-40 {
  color: rgba(255, 255, 255, 0.82);
}

.gls-pub-cta strong {
  color: #fff;
}

.gls-pub-cta .ng-btn-primary {
  background: #fff;
  color: var(--ng-secondary-dark, #1A1668);
  border-color: #fff;
}

.gls-pub-cta .ng-btn-primary:hover {
  filter: brightness(0.95);
  color: var(--ng-secondary-dark, #1A1668);
}

/* Form richiesta pubblicità */
.gls-pub-form-wrap {
  background: #fff;
  border-top: 4px solid var(--ng-secondary);
}

.gls-pub-form .ng-field {
  margin-bottom: 18px;
}

.gls-pub-form label {
  font-weight: 700;
  font-size: 14px;
  color: var(--ng-g-90, #222);
  display: block;
  margin-bottom: 6px;
}

/* checkbox grid (formati) */
.gls-pub-chk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 16px;
  margin-top: 6px;
}

.gls-pub-chk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--ng-g-10, #EBEBEB);
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-weight: 500;
}

.gls-pub-chk {
  background: var(--ng-g-5, #F5F5F5);
}

.gls-pub-chk:hover {
  border-color: var(--ng-secondary);
  background: var(--ng-g-5, #F0F0F0);
}

.gls-pub-chk input[type=checkbox] {
  margin-top: 2px;
  accent-color: var(--ng-secondary);
}

.gls-pub-chk input[type=checkbox]:checked ~ .gls-pub-chk-body strong {
  color: var(--ng-secondary);
}

.gls-pub-chk-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.gls-pub-chk-body strong {
  font-size: 14px;
  font-weight: 800;
}

.gls-pub-chk-sub {
  font-style: normal;
  font-size: 12px;
  color: var(--ng-g-50, #777);
  margin-top: 2px;
  font-weight: 500;
}

/* link "Vedi descrizione" allineato in riga col checkbox (a destra del body) */
.gls-pub-chk-jump {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ng-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.15s ease;
  align-self: flex-start;
  margin-top: 2px;
}

.gls-pub-chk-jump:hover {
  color: var(--ng-secondary-dark);
}

.gls-pub-chk-jump i {
  font-size: 12px;
}

/* offset per scroll-anchor sulle card formato (header sticky non c'è ma manteniamo margine visivo) */
[id^=fmt-] {
  scroll-margin-top: 24px;
}

/* Contatore caratteri NG sopra l'input (override scoped form pubblicità).
   NG aggiunge .ng-count.top-right al parent del campo (.ng-field).
   Lo riposizioniamo accanto al label, sopra l'input. */
.gls-pub-form .ng-field,
.gls-form .ng-field {
  position: relative;
}

.gls-pub-form .ng-field .ng-count,
.gls-form .ng-field .ng-count {
  position: absolute !important;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  background: transparent !important;
  color: var(--ng-g-40, #A9AAAD) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0;
  pointer-events: none;
}

/* Math captcha — micro-box compatto allineato a sinistra, monoriga */
.gls-pub-captcha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px;
  background: var(--ng-g-5, #F5F5F5);
  border: 1px solid var(--ng-g-10, #EBEBEB);
  border-radius: 8px;
}

.gls-pub-captcha-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  font-weight: 500 !important;
  color: var(--ng-g-70, #555);
  white-space: nowrap;
}

.gls-pub-captcha-ico {
  color: var(--ng-secondary);
  font-size: 1rem;
  flex: none;
}

.gls-pub-captcha-text {
  font-size: 13px;
}

.gls-pub-captcha-text strong {
  color: var(--ng-secondary);
  font-weight: 900;
  font-size: 14px;
  padding: 0 2px;
}

.gls-pub-captcha-input {
  width: 64px !important;
  min-height: 32px !important;
  padding: 4px 8px !important;
  flex: none;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
}

.gls-pub-captcha-err {
  margin-left: 8px;
  color: var(--ng-danger, #c0392b);
  font-size: 12px;
  font-weight: 700;
}

.gls-pub-captcha.has-error {
  border-color: var(--ng-danger, #c0392b);
}

/* messaggio di errore inline sotto ogni campo */
.gls-pub-err {
  display: block;
  margin-top: 4px;
  color: var(--ng-danger, #c0392b);
  font-size: 12px;
  font-weight: 700;
}

.gls-pub-form .ng-field.has-error .ng-input {
  border-color: var(--ng-danger, #c0392b) !important;
}

/* Honeypot: fuori schermo (CSS-only, accessible-friendly) */
.gls-pub-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Formato #5 — Termine Vivente (details interattivo, zero-JS) */
.gls-living {
  border: 1px solid color-mix(in srgb, var(--gls-sponsor-accent) 24%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--gls-sponsor-accent) 4%, transparent);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.gls-living[open] {
  border-color: color-mix(in srgb, var(--gls-sponsor-accent) 40%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--gls-sponsor-accent) 16%, transparent);
}

.gls-living-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  user-select: none;
}

.gls-living-summary::-webkit-details-marker {
  display: none;
}

.gls-living-spark {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gls-sponsor-accent) 16%, transparent);
  color: var(--gls-sponsor-accent);
  font-size: 1.05rem;
}

.gls-living-q {
  font-weight: 800;
  font-size: 17px;
  color: var(--ng-g-90, #222);
  min-width: 0;
}

.gls-living-flag {
  margin-left: auto;
  flex: none;
}

.gls-living-caret {
  flex: none;
  color: var(--gls-sponsor-accent);
  font-size: 1.2rem;
  transition: transform 0.25s ease;
}

.gls-living[open] .gls-living-caret {
  transform: rotate(180deg);
}

.gls-living-body {
  padding: 0 20px 20px 66px;
  animation: gls-living-reveal 0.28s ease both;
}

@keyframes gls-living-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.gls-living-term {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
  color: var(--gls-sponsor-accent);
}

.gls-living-def {
  margin: 0 0 16px;
  color: var(--ng-g-70, #444);
  font-size: 15px;
}

.gls-living-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.gls-living-by {
  font-size: 14px;
  color: var(--ng-g-50, #777);
}

@media (max-width: 576px) {
  .gls-living-flag {
    display: none;
  }
  .gls-living-body {
    padding-left: 20px;
  }
}
.gls-meta-label {
  font-size: 12px;
  color: var(--ng-g-40);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ===========================================================
GLS — Search box
=========================================================== */
.gls-searchbox-input {
  border: 0 !important;
  box-shadow: none !important;
}

.gls-search-form {
  max-width: 720px;
}

.gls-search-form-hero {
  max-width: 610px;
}

/* ===========================================================
GLS — BG helpers
=========================================================== */
/* NG non setta colore globale su <a> — lasciamo il default del framework.
   Per accenti colorati uso classi NG esplicite (text-secondary, text-purple). */
/* HERO — background + visual (logo grande + nodi + cross lines) */
.gls-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 78% 18%, rgba(97, 103, 232, 0.08), transparent 28%), linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
}

.gls-hero-visual {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
}
.gls-hero-visual::before, .gls-hero-visual::after {
  content: "";
  position: absolute;
  inset: 18% 4% auto auto;
  width: 420px;
  height: 260px;
  background: linear-gradient(28deg, transparent 49.5%, rgba(200, 200, 200, 0.55) 50%, transparent 50.5%), linear-gradient(-24deg, transparent 49.5%, rgba(200, 200, 200, 0.55) 50%, transparent 50.5%);
  opacity: 0.55;
  pointer-events: none;
}
.gls-hero-visual::after {
  inset: auto 10% 15% auto;
  width: 360px;
  height: 220px;
  transform: rotate(8deg);
}

.gls-hero-logo {
  position: relative;
  z-index: 2;
  width: min(520px, 100%);
  filter: drop-shadow(0 32px 28px rgba(26, 26, 26, 0.12));
}
.gls-hero-logo img {
  width: 100%;
  display: block;
}

.gls-hero-node {
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ng-primary);
}
.gls-hero-node-a {
  top: 80px;
  left: 50px;
  background: var(--ng-secondary);
}
.gls-hero-node-b {
  top: 120px;
  right: 70px;
}
.gls-hero-node-c {
  bottom: 95px;
  left: 130px;
}
.gls-hero-node-d {
  bottom: 65px;
  right: 110px;
  background: var(--ng-secondary);
}

@media (max-width: 1080px) {
  .gls-hero-visual {
    min-height: 300px;
  }
}
@media (max-width: 720px) {
  .gls-hero-visual {
    display: none;
  }
}
/* NEWSLETTER — card con gradient arancio/viola */
.gls-newsletter {
  border: 1px solid rgba(228, 138, 31, 0.22);
  border-radius: var(--ng-radius-xl);
  background: radial-gradient(circle at 11% 50%, rgba(228, 138, 31, 0.16), transparent 20%), linear-gradient(135deg, rgba(228, 138, 31, 0.1), rgba(97, 103, 232, 0.06));
}

.gls-newsletter-envelope {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--ng-primary-light), var(--ng-primary-dark));
  box-shadow: 0 14px 30px rgba(180, 108, 22, 0.25);
}
.gls-newsletter-envelope i {
  font-size: 44px;
  line-height: 1;
}

/* ==========================================================
GLS FOOTER — tema scuro
========================================================== */
.gls-footer {
  /* Override NG: .ng-footer ha margin-top:40px di default (--ng-footer-mtop).
     Lo azzero così la stats-strip si attacca al footer senza gap. */
  --ng-footer-mtop: 0;
  background: var(--ng-secondary-dark);
  color: rgba(255, 255, 255, 0.78);
}
.gls-footer h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.gls-footer p {
  color: rgba(255, 255, 255, 0.72);
}
.gls-footer a:not(.ng-btn):not([class*=ng-btn-]) {
  color: rgba(255, 255, 255, 0.95);
}
.gls-footer a:not(.ng-btn):not([class*=ng-btn-]):hover {
  color: #ffffff;
}

/* Liste footer = componente NG ng-list, override SOLO dentro .gls-footer */
.gls-footer .ng-list {
  --ng-list-item-padding: 5px 0;
  --ng-list-item-gap: 10px;
  background: transparent;
}

.gls-footer .ng-list-item {
  border: 0;
}

.gls-footer .ng-list.horizontal {
  gap: 10px 22px;
}

/* voci menu: freccia (look footer) */
.gls-footer-links .ng-list-item > a::before {
  content: "›";
  color: var(--ng-primary);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  margin-right: 8px;
}

.gls-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.gls-footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 20px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.gls-footer-social a:hover {
  background: var(--ng-primary);
  transform: translateY(-2px);
}

/* contatti footer: icona in cerchio sul ng-list-media */
.gls-footer-contacts .ng-list-media {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ng-primary);
  font-size: 18px;
}

.gls-footer-bottom {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

/* ===========================================================
GLS HOME — spaziature
=========================================================== */
/* (1) hero leggermente staccato dall'header */
.gls-hero-bg.gls-section {
  margin-top: 30px;
}

/* (2) eyebrow (gls-tracked) staccato dall'H2 sotto */
.gls-tracked {
  display: inline-block;
  margin-bottom: 12px;
}

/* (3) stacco doppio (~90px) con linea divisoria centrata, tranne hero e la prima ("Categorie più visitate") */
/* respiro sotto l'header per la prima sezione di ogni pagina (no linea) */
.gls-section {
  padding-top: 32px;
}

/* stacco + linea SOLO fra sezioni consecutive (home) */
.gls-section + .gls-section {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid var(--ng-color-border);
}

.gls-hero-bg.gls-section {
  margin-top: 30px;
  padding-top: 0;
}

#categorie {
  margin-top: 48px;
  padding-top: 0;
  border-top: 0;
}

/* scroll fluido per le ancore (indice lettere glossario) */
html {
  scroll-behavior: smooth;
}

.gls-letter-divider, .gls-term-item {
  scroll-margin-top: 24px;
}

/* ===========================================================
GLS HEADER — stile Bookland (pill grigia piatta + barra indaco)
=========================================================== */
/* barra accento in cima all'header + bg */
.ng-header {
  border-top: 6px solid var(--ng-secondary);
  background: #f4f3f3;
}

/* sblocca il clipping di .ng-header-center che nasconde il dropdown categorie */
.ng-header .ng-header-center {
  overflow: visible;
}

/* CENTRO — pill grigia piatta */
.gls-header-search {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  background: #ECECEF;
  border-radius: 12px;
  padding: 4px 6px;
}

/* Menu categorie (ng-header-menu) dentro la pill */
.gls-header-cat {
  border-right: 1px solid #D7D7DD;
}

.gls-header-cat .ng-header-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: var(--ng-secondary);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.gls-header-cat .ng-header-menu-trigger i {
  color: var(--ng-g-40);
}

/* Input ricerca trasparente dentro la pill */
.gls-header-search .ng-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 10px 16px;
  color: var(--ng-secondary);
}

.gls-header-search .ng-input::placeholder {
  color: var(--ng-secondary);
  opacity: 0.7;
}

/* Bottone lente: solo icona */
.gls-header-search-btn {
  border: 0;
  background: transparent;
  color: var(--ng-g-40);
  font-size: 20px;
  padding: 0 16px;
  cursor: pointer;
  line-height: 1;
}

.gls-header-search-btn:hover {
  color: var(--ng-secondary);
}

/* Header dropdown categorie: nome a sinistra, conteggio a destra */
.gls-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ===========================================================
GLS FOOTER — toggle desktop / mobile-tablet
=========================================================== */
.gls-footer-mobile {
  display: none;
}

@media (max-width: 992px) {
  .gls-footer-desktop {
    display: none;
  }
  .gls-footer-mobile {
    display: block;
  }
}
/* Footer mobile: brand centrato */
.gls-fm-brand p {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.gls-fm-social {
  justify-content: center;
}

/* Blocchi menu impilati */
.gls-fm-block {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* L'ultimo blocco (Contatti): niente line, la dà già .gls-footer-bottom sotto.
   (Non :last-of-type: dopo i blocchi c'è .gls-footer-bottom, anch'esso div.) */
.gls-fm-block.gls-fm-last {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.gls-fm-block h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

/* ===========================================================
GLS HEADER — responsive: meccanica NATIVA NG (ng_header.js, bp 768).
Gli item con data-on-mobile="mobile-menu" vengono spostati nel #mobile-menu.
Niente drawer custom: solo allineamento visibilità burger al breakpoint JS.
=========================================================== */
/* Burger: icona pulita. NG lo mostra ≤768 via .ng-overlay-toggle[data-ng-mobile]. */
.gls-header-burger {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  color: var(--ng-secondary);
  padding: 4px 6px;
}

/* Il bundle NG mostrerebbe il toggle ≤1023, ma il JS sposta gli item ≤768:
   allineo la visibilità del burger a 768 per evitare lo stato intermedio rotto. */
@media (min-width: 769px) {
  .ng-header .ng-overlay-toggle[data-ng-mobile] {
    display: none !important;
  }
}
/* Tablet verticale (es. iPad 834px): tra 769 e 1024 l'header "desktop"
   (search + dropdown + auth) non ci sta → mostro solo logo + button auth.
   Sopra 1024 (incluso iPad orizzontale ~1194) torna l'header completo. */
@media (min-width: 769px) and (max-width: 1024px) {
  .ng-header .ng-header-center {
    display: none;
  } /* ricerca */
  .ng-header .gls-header-cat {
    display: none;
  } /* dropdown categorie */
}
/* Drawer #mobile-menu: NG stila già body (flex-column gap) e item (full-width).
   Solo rifiniture scoped per questo bundle: */
/* 1) Accordion "Categorie": il bundle non collassa il panel chiuso (resta in-flow
   con visibility:hidden → buco). Lo collasso davvero con max-height. */
#mobile-menu .ng-header-menu .ng-header-menu-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease;
}

#mobile-menu .ng-header-menu.is-open .ng-header-menu-panel {
  max-height: 75vh;
  overflow-y: auto;
}

/* 2) Search pill: a tutta larghezza, no bleed ai bordi, icona allineata. */
#mobile-menu .gls-header-search {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  align-items: center;
}

#mobile-menu .gls-header-search-btn {
  display: inline-flex;
  align-items: center;
}

#mobile-menu .gls-header-cat {
  border-right: 0;
}

/* 3) Bottoni auth: bottoni veri, non barre attaccate ai bordi, distanziati fra loro. */
#mobile-menu .ng-btn {
  margin-inline: 0;
  margin-top: 10px;
}

#mobile-menu .ng-btn + .ng-btn {
  margin-top: 14px;
}

/* Utility mancante in NG: altezza piena (per .same-height + card) */
.h-100 {
  height: 100%;
}

/*# sourceMappingURL=custom.css.map */