/* ==========================================================================
   Dental Go — Architettura Servizi v1.0 (23/10/2026)
   Mega menu "Servizi", voce "Giulia AI", card dei sottoservizi,
   pagine categoria Social Media e Advertising.
   Usa solo i token di main.css (palette, spaziature, raggi, easing).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icone
   -------------------------------------------------------------------------- */
.dg-ico { display: block; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Voce "Giulia AI" (primo livello)
   -------------------------------------------------------------------------- */
.dg-nav-giulia { display: inline-flex; align-items: center; gap: 8px; }
.dg-nav-giulia__dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}
.dg-nav-giulia__dot::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  opacity: 0;
  animation: dg-dot 2.6s var(--ease-out) infinite;
}
@keyframes dg-dot {
  0%   { opacity: 0.55; transform: scale(0.6); }
  70%  { opacity: 0;    transform: scale(1.5); }
  100% { opacity: 0;    transform: scale(1.5); }
}
.mobile-menu__nav > .dg-nav-giulia { display: flex; gap: 12px; }
.mobile-menu__nav > .dg-nav-giulia .dg-nav-giulia__dot { width: 9px; height: 9px; }

/* --------------------------------------------------------------------------
   Pannello "Servizi" — base comune
   -------------------------------------------------------------------------- */
.dg-mega__grid,
.dg-mega__links { list-style: none; margin: 0; padding: 0; }

.dg-mega__cat,
.dg-mega__feature {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--color-navy);
  text-decoration: none;
}
.dg-mega__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(42, 106, 220, 0.08);
  color: var(--color-primary);
  flex-shrink: 0;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.dg-mega__ico--solid { background: var(--color-primary); color: var(--color-white); }
.dg-mega__cat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.dg-mega__cat-title {
  font-family: var(--font-ui);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
  color: var(--color-navy);
  transition: color var(--dur-fast) ease;
}
.dg-mega__cat-desc { font-size: 0.8125rem; line-height: 1.4; color: rgba(7, 16, 26, 0.6); }
.dg-mega__cat:hover .dg-mega__cat-title,
.dg-mega__cat[aria-current="page"] .dg-mega__cat-title,
.dg-mega__feature:hover .dg-mega__cat-title { color: var(--color-primary); }
.dg-mega__cat:hover .dg-mega__ico,
.dg-mega__cat[aria-current="page"] .dg-mega__ico { background: var(--color-primary); color: var(--color-white); }
.dg-mega__feature:hover .dg-mega__ico--solid { background: var(--color-soft-blue); }

.dg-mega__feature-label {
  display: block;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary);
}
.dg-mega__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.dg-mega__all:hover .dg-mega__arrow,
.dg-mega__help:hover .dg-mega__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Desktop (≥1024px): mega menu sotto l'header
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Il pannello si allinea alla barra (.site-head), non al pulsante */
  .header__nav .nav-item--mega { position: static; }

  .header__nav .dg-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 140;
    width: min(1120px, calc(100vw - 48px));
    margin-left: calc(min(1120px, calc(100vw - 48px)) / -2);
    padding-top: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s linear 180ms;
  }
  /* ponte invisibile tra la voce e il pannello (il passaggio del mouse non lo chiude) */
  .header__nav .dg-mega::before {
    content: "";
    position: absolute; left: 0; right: 0; top: -26px; height: 32px;
  }
  .header__nav .nav-item.is-open > .dg-mega,
  .no-js .header__nav .nav-item--mega:hover > .dg-mega,
  .no-js .header__nav .nav-item--mega:focus-within > .dg-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 180ms ease, transform 180ms var(--ease-out);
  }

  .header__nav .dg-mega__inner {
    position: relative;
    background: var(--color-white);
    border: 1px solid rgba(7, 16, 26, 0.08);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(7, 16, 26, 0.12), 0 2px 6px rgba(7, 16, 26, 0.04);
    padding: 20px 20px 0;
    max-height: calc(100vh - var(--header-h) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .header__nav .dg-mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .header__nav .dg-mega__col { padding: 14px 14px 16px; border-radius: 14px; min-width: 0; }

  .header__nav .dg-mega__links { margin: 10px 0 0 50px; display: grid; gap: 1px; }
  .header__nav .dg-mega__links a {
    display: block;
    margin-left: -8px;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 0.84375rem; font-weight: 500; line-height: 1.35;
    color: rgba(7, 16, 26, 0.72);
    transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
  }
  .header__nav .dg-mega__links a:hover,
  .header__nav .dg-mega__links a:focus-visible {
    color: var(--color-primary);
    background-color: rgba(42, 106, 220, 0.06);
  }

  .header__nav .dg-mega__col--feature {
    display: flex; flex-direction: column; gap: 14px;
    margin: 6px;
    padding: 18px;
    background: var(--color-off-white);
    border: 1px solid rgba(42, 106, 220, 0.14);
  }
  .header__nav .dg-mega__feature {
    padding: 10px;
    margin: -2px -10px 0;
    border-radius: 10px;
    transition: background-color var(--dur-fast) ease;
  }
  .header__nav .dg-mega__feature:hover,
  .header__nav .dg-mega__feature:focus-visible { background: var(--color-white); }

  .header__nav .dg-mega__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 8px;
    padding: 14px 14px 16px;
    border-top: 1px solid rgba(7, 16, 26, 0.08);
    font-size: 0.875rem;
  }
  .header__nav .dg-mega__all { font-weight: 600; color: var(--color-primary); }
  .header__nav .dg-mega__help { color: rgba(7, 16, 26, 0.62); }
  .header__nav .dg-mega__help strong { color: var(--color-navy); font-weight: 600; transition: color var(--dur-fast) ease; }
  .header__nav .dg-mega__help:hover strong { color: var(--color-primary); }

  /* La voce resta "accesa" finché il pannello è aperto */
  .header__nav .nav-item--mega.is-open > .nav-toggle::after { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Smartphone e tablet (<1024px): fisarmonica nel menu mobile
   -------------------------------------------------------------------------- */
.mobile-menu__nav .dg-mega { display: none; padding: var(--space-2) 0 var(--space-4); }
.mobile-menu__nav .nav-item.is-open > .dg-mega { display: block; animation: ofy-nav-sub-in 220ms var(--ease-out) both; }
.mobile-menu__nav .dg-mega__grid { display: flex; flex-direction: column; }
.mobile-menu__nav .dg-mega__col + .dg-mega__col { border-top: 1px solid var(--line-softer); }
.mobile-menu__nav .dg-mega a {
  font-family: var(--font-ui);
  font-size: 1rem; font-weight: 500; letter-spacing: 0;
  padding: 12px 0;
  min-height: 44px;
  opacity: 1; transform: none;
  border-bottom: 0;
}
.mobile-menu__nav .dg-mega__ico { width: 36px; height: 36px; }
.mobile-menu__nav .dg-mega__cat-title { font-size: 1rem; }
.mobile-menu__nav .dg-mega__col--feature {
  display: flex; flex-direction: column;
  margin-top: var(--space-3);
  padding: 14px 16px 6px;
  border-radius: var(--radius-card);
  background: var(--color-off-white);
  border-top: 0 !important;
}
.mobile-menu__nav .dg-mega__feature-label { margin-bottom: 2px; }
.mobile-menu__nav .dg-mega__foot { padding-top: var(--space-3); }
.mobile-menu__nav .dg-mega__all {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600 !important;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Blocco "card dei sottoservizi" (pagine categoria)
   -------------------------------------------------------------------------- */
.dg-cat { padding-block: 0 var(--section-pad); }
.dg-cat--pad { padding-top: var(--section-pad-sm); }
.dg-cat--after-hero { padding-top: clamp(24px, 3vw, 40px); }
.dg-cat__head { max-width: 880px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.dg-cat__head .eyebrow { margin-bottom: var(--space-4); }
.dg-cat__title,
.dg-hub__h2 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.dg-cat__text { margin-top: var(--space-5); }
.dg-cat__text + .dg-cat__text { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--fs-body); }

.dg-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 0.6rem + 1.4vw, 26px);
}
.dg-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
  padding: var(--card-pad);
  background: var(--color-white);
  border: 1px solid rgba(7, 16, 26, 0.07);
  border-radius: var(--radius-card);
  scroll-margin-top: calc(var(--header-h) + 24px);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) ease, border-color var(--dur-fast) ease;
}
.bg-white .dg-card { border-color: rgba(7, 16, 26, 0.1); }
.dg-card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(42, 106, 220, 0.08);
  color: var(--color-primary);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.dg-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
  color: var(--color-navy);
  text-wrap: balance;
}
.dg-card__desc { margin: 0; flex: 1; font-size: 0.96875rem; line-height: 1.55; color: var(--text-muted); }
.dg-card__meta {
  margin: 0;
  align-self: flex-start;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--color-off-white);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.35;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
}
.bg-off-white .dg-card .dg-card__meta { background: rgba(42, 106, 220, 0.07); }
.dg-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: 0.9375rem; font-weight: 600;
  color: var(--color-primary);
}
.dg-card__link .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.dg-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-card); }
.dg-card__link:focus-visible { outline: none; }
.dg-card:focus-within { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.dg-card:target { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(42, 106, 220, 0.14); }

@media (hover: hover) and (pointer: fine) {
  .dg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(7, 16, 26, 0.08); border-color: rgba(42, 106, 220, 0.28); }
  .dg-card:hover .dg-card__ico { background: var(--color-primary); color: var(--color-white); }
  .dg-card:hover .dg-card__link .arrow { transform: translateX(4px); }
}

.dg-cat__note {
  max-width: 760px;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding-left: 14px;
  border-left: 2px solid rgba(42, 106, 220, 0.35);
  font-size: 0.875rem; line-height: 1.55;
  color: var(--text-muted);
}
.dg-cat__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: clamp(28px, 3.5vw, 44px) 0 0; }

/* Griglie: nessuna card isolata in fondo */
@media (min-width: 1024px) {
  .dg-cards--prima-larga > .dg-card:first-child { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .dg-cards--quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  .dg-cards--quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .dg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-cards--prima-larga > .dg-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .dg-cards,
  .dg-cards--quattro { grid-template-columns: minmax(0, 1fr); }
  .dg-cat__actions { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   Pagine categoria nuove (Social Media, Advertising)
   -------------------------------------------------------------------------- */
.dg-hub__title { text-wrap: balance; }
.dg-hub__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-7) 0 0; }

.dg-hub__intro { padding-block: var(--section-pad-sm); }
.dg-hub__intro-grid { display: grid; gap: var(--space-6); }
.dg-hub__intro .eyebrow { margin-bottom: var(--space-4); }
.dg-hub__intro-text { display: flex; flex-direction: column; gap: var(--space-4); }
.dg-hub__intro-text p { margin: 0; }
.dg-hub__p { color: var(--text-muted); font-size: var(--fs-body); line-height: 1.6; }
@media (min-width: 1024px) {
  .dg-hub__intro-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .dg-hub__intro-text { padding-top: 34px; }
}

.dg-benefits { padding-block: var(--section-pad-sm) 0; }
.dg-benefits .eyebrow,
.dg-steps .eyebrow { margin-bottom: var(--space-4); }
.dg-benefits__list,
.dg-steps__list {
  list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.dg-benefit { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 22px; border-top: 1px solid rgba(7, 16, 26, 0.12); }
.dg-benefit__ico { color: var(--color-primary); margin-bottom: 4px; }
.dg-benefit__title,
.dg-step__title { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--color-navy); }
.dg-benefit__text,
.dg-step__text { margin: 0; font-size: 0.96875rem; line-height: 1.55; color: var(--text-muted); }

.dg-steps { padding-block: var(--section-pad-sm); }
.dg-step { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 30px; }
.dg-step::before {
  content: ""; position: absolute; left: 0; right: calc(-1 * clamp(24px, 3vw, 40px)); top: 5px;
  height: 1px; background: rgba(42, 106, 220, 0.3);
}
.dg-step:last-child::before { right: 0; }
.dg-step::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-white);
}
.dg-step__n { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); color: var(--color-primary); font-variant-numeric: tabular-nums; }

.dg-hub__cta { padding-top: var(--section-pad-sm); }

@media (max-width: 1023px) {
  .dg-benefits__list,
  .dg-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-step:nth-child(2n)::before { right: 0; }
}
@media (max-width: 767px) {
  .dg-hub__actions { flex-direction: column; align-items: stretch; }
  .dg-benefits__list,
  .dg-steps__list { grid-template-columns: minmax(0, 1fr); }
  .dg-step { padding: 0 0 0 28px; }
  .dg-step::before { left: 5px; right: auto; top: 11px; bottom: calc(-1 * clamp(24px, 3vw, 40px)); width: 1px; height: auto; }
  .dg-step:last-child::before { display: none; }
  .dg-step::after { top: 2px; }
}

/* --------------------------------------------------------------------------
   Movimento ridotto
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dg-nav-giulia__dot::after { animation: none; }
  .header__nav .dg-mega,
  .dg-card,
  .dg-card__ico,
  .dg-mega__arrow { transition: none; }
  .mobile-menu__nav .nav-item.is-open > .dg-mega { animation: none; }
}