/* Design system stage — componenti unici e correzioni.
   Caricato per ultimo: vince su sezioni/pagine. */

/* Token H1 stage: core/typography.css riassegna un clamp 40–72 che non
   deve valere sul pubblico. Dashboard resta sul clamp condiviso. */
body.body-stage {
  --fs-h1-min: 2.75rem;
  --fs-h1-max: 5rem;
  --fs-h1: 2.75rem;
  --fs-h1-page: 2rem;
}

@media (min-width: 48rem) {
  body.body-stage {
    --fs-h1: 5rem;
    --fs-h1-page: 2.5rem;
    --fs-h2: 3rem;
  }
}

/* ---------- H1 di pagina (non hero home) ---------- */
body.body-stage-templates-marketplace h1,
body.body-stage-template-detail-marketplace h1,
body.body-stage .stage-support-home h1,
body.body-stage .stage-support-category h1,
body.body-stage .stage-support-article h1,
body.body-stage .stage-legal-doc__title,
body.body-stage .stage-legal-doc h1,
body.body-stage .tpl-mkt__title,
body.body-stage .tpl-detail__title,
body.body-stage-pagerank h1,
body.body-stage-img-opt h1,
body.body-stage .stage-convert h1,
body.body-stage .stage-palette-page h1 {
  font-size: var(--fs-h1-page);
  font-weight: var(--fw-h1-page);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* H3 card */
body.body-stage .tpl-mkt__card-title,
body.body-stage article.tpl-mkt__card h3,
body.body-stage .stage-blog-card__title,
body.body-stage .section-templates__card-title,
body.body-stage .stage-support-topic__title,
body.body-stage .stage-support-resource-card__title {
  font-size: var(--fs-h3-card);
  font-weight: var(--fw-h3-card);
  line-height: var(--lh-card);
  text-decoration: none;
}

/* Bottoni / input / newsletter: ds-controls.css */

/* ---------- Tag ---------- */
body.body-stage .tag,
body.body-stage .tpl-detail__tag,
body.body-stage .tpl-detail__pill,
body.body-stage .tpl-mkt__price,
body.body-stage .stage-blog-card__cat,
body.body-stage .stage-blog-chip,
body.body-stage .stage-hosting-badge,
body.body-stage .stage-portfolio-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  background: var(--c-neutral);
  color: var(--c-text-2);
}

body.body-stage .tag--brand,
body.body-stage .tpl-detail__tag {
  background: var(--c-primary-50);
  color: var(--c-primary-active);
}

a.tag,
a.stage-blog-card__cat,
a.stage-blog-chip {
  min-height: var(--tap);
  padding-block: 0;
}

/* ---------- Card ---------- */
body.body-stage .card,
body.body-stage .tpl-mkt__card,
body.body-stage .tpl-detail__card,
body.body-stage .stage-blog-card,
body.body-stage .stage-support-resource-card,
body.body-stage .stage-pricing-card,
body.body-stage .stage-hosting-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  box-shadow: none;
}

body.body-stage a.card:hover,
body.body-stage .tpl-mkt__card:hover,
body.body-stage .stage-blog-card:hover,
body.body-stage .stage-support-resource-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* ---------- Navbar / footer non ereditano il link blu ---------- */
body.body-stage .section-navbar a,
body.body-stage .section-navbar-link {
  color: var(--c-text);
  text-decoration: none;
  font-size: inherit;
}

body.body-stage .tpl-detail__breadcrumb-link,
body.body-stage .stage-support-article__breadcrumb a,
body.body-stage .stage-blog-nav a {
  color: var(--c-text-3);
  text-decoration: none;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

/* Info prezzi */
body.body-stage .stage-pricing-info,
body.body-stage .stage-pricing-tip {
  min-width: var(--tap);
  min-height: var(--tap);
}

/* Toggle annuale */
body.body-stage .stage-pricing-toggle,
body.body-stage .stage-pricing-switch,
body.body-stage [class*="pricing"] [role="switch"] {
  min-height: var(--tap);
}

body.body-stage .stage-pricing-switch__track,
body.body-stage .stage-pricing-toggle__track {
  background: var(--c-primary);
}

/* ---------- Supporto: palette ardesia → token ---------- */
body.body-stage .stage-support-article,
body.body-stage .stage-support-category,
body.body-stage .stage-support-home {
  color: var(--c-text);
  background: var(--c-bg);
}

body.body-stage .stage-support-article__breadcrumb-list,
body.body-stage .stage-support-article__breadcrumb-list a,
body.body-stage .stage-support-category h1,
body.body-stage .stage-support-article h1,
body.body-stage .stage-support-article h2,
body.body-stage .stage-support-article p,
body.body-stage .stage-support-home__lede {
  color: var(--c-text);
}

body.body-stage .stage-support-article__breadcrumb-list a:hover {
  color: var(--c-primary);
}

body.body-stage .stage-support-article__media-placeholder {
  display: none;
}

body.body-stage .stage-support-search__submit,
body.body-stage .stage-pagerank-tool__form .stage-support-search__submit {
  min-height: 48px;
  border-radius: var(--radius-pill);
  background: var(--c-primary);
  color: #ffffff;
  font-weight: 600;
  border: 0;
  padding: 0 20px;
}

body.body-stage .stage-support-search__submit:hover {
  background: var(--c-primary-hover);
  color: #ffffff;
}

/* ---------- Accedi / Google ---------- */
body.body-stage .stage-accedi .stage-accedi__google,
body.body-stage a.stage-accedi__google,
body.body-stage button.stage-accedi__google {
  min-height: var(--tap);
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--c-neutral);
  color: var(--c-text);
}

body.body-stage .stage-accedi .stage-accedi__google:hover {
  background: var(--c-neutral-hover);
  color: var(--c-text);
}

html body.body-stage.body-stage-accedi h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
}

@media (max-width: 47.9375rem) {
  html body.body-stage.body-stage-accedi h1 {
    font-size: 2.75rem;
  }
}

html body.body-stage .stage-support-home h1,
html body.body-stage .stage-support-home__title,
html body.body-stage .stage-support-category h1,
html body.body-stage .stage-support-article h1 {
  font-size: var(--fs-h1-page) !important;
  font-weight: var(--fw-h1-page) !important;
  letter-spacing: -0.02em;
}

html body.body-stage .section-hero-title,
html body.body-stage .section-hero h1,
html body.body-stage h1.section-hero-title,
html body.body-stage #home .section-hero-title,
html body.body-stage .stage-pricing-page__title,
html body.body-stage .stage-consult-page__title,
html body.body-stage .stage-realization-hero__title,
html body.body-stage .stage-blog-page__hero-title {
  font-size: var(--fs-h1) !important;
  font-weight: var(--fw-h1);
}

/* ---------- Templates filtri / load more ---------- */
body.body-stage .tpl-mkt__filters-btn,
body.body-stage .tpl-mkt__load-more-btn,
body.body-stage .tpl-mkt__segmented-btn {
  min-height: var(--tap);
  border-radius: var(--radius-pill);
  background: var(--c-neutral);
  color: var(--c-text);
  font-size: 1rem;
  font-weight: 600;
  padding: 0 20px;
  border: 0;
}

body.body-stage .tpl-mkt__filters-btn:hover,
body.body-stage .tpl-mkt__load-more-btn:hover {
  background: var(--c-neutral-hover);
}

/* ---------- Prezzi: Confronta ---------- */
body.body-stage button.stage-pricing-page__footer-cta,
body.body-stage a.stage-pricing-cta--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--c-neutral);
  color: var(--c-text) !important;
  font-size: var(--fs-btn);
  font-weight: 600;
  text-decoration: none;
}

body.body-stage button.stage-pricing-page__footer-cta:hover,
body.body-stage a.stage-pricing-cta--ghost:hover {
  background-color: var(--c-neutral-hover);
  color: var(--c-text) !important;
}

/* ---------- Focus visibile globale ---------- */
body.body-stage :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

body.body-stage :is(.btn--primary, .primary-button, .btn--dark, .section-footer-stage__newsletter-button):focus-visible {
  outline-color: var(--c-primary);
  color: #ffffff;
}

/* ---------- Chi-sono: Bebas resta eccezione (non toccare font-family) ---------- */
body.body-stage-chi-sono h1 {
  /* eccezione: font display della pagina — da confermare */
}

/* ---------- Template detail: tokens ---------- */
body.body-stage-template-detail-marketplace {
  --tpl-bg: var(--c-bg);
  --tpl-surface: var(--c-surface);
  --tpl-surface-2: var(--c-neutral);
  --tpl-text: var(--c-text);
  --tpl-muted: var(--c-text-3);
  --tpl-border: var(--c-border);
  --tpl-primary: var(--c-primary);
  --tpl-primary-hover: var(--c-primary-hover);
  --tpl-primary-dark: var(--c-primary-active);
  --tpl-info-bg: var(--c-primary-50);
  --tpl-radius: var(--radius-input);
  --tpl-radius-lg: var(--radius-card);
}

body.body-stage-templates-marketplace {
  --tpl-bg: var(--c-bg);
  --tpl-surface: var(--c-surface);
  --tpl-surface-2: var(--c-neutral);
  --tpl-text: var(--c-text);
  --tpl-muted: var(--c-text-3);
  --tpl-border: var(--c-border);
  --tpl-primary: var(--c-primary);
  --tpl-primary-hover: var(--c-primary-hover);
  --tpl-primary-dark: var(--c-primary-active);
  --tpl-info-bg: var(--c-primary-50);
  --tpl-radius-control: var(--radius-input);
  --tpl-radius-preview: var(--radius-card);
}

body.body-stage-templates-marketplace .tpl-mkt__title {
  font-size: var(--fs-h1-page);
  font-weight: var(--fw-h1-page);
}

body.body-stage-template-detail-marketplace .tpl-detail__title {
  font-size: var(--fs-h1-page);
  font-weight: var(--fw-h1-page);
}

body.body-stage-template-detail-marketplace .tpl-detail__h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
}

body.body-stage .stage-legal-doc__title {
  font-size: var(--fs-h1-page);
  font-weight: var(--fw-h1-page);
}

body.body-stage .stage-legal-doc__heading {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
}

body.body-stage .stage-legal-doc__updated,
body.body-stage .stage-legal-doc__intro {
  color: var(--c-text-3);
}

/* Accenti espliciti (prezzi / consulenza) — tokenizzati */
body.body-stage .stage-pricing-badge--hot,
body.body-stage .stage-pricing-pill {
  background: var(--c-accent-promo);
}

body.body-stage {
  --stage-consult-trust-badge-mark: var(--c-accent-alert);
}