/* ==========================================================================
   components.css — Componenti: marchio, nav, bottoni, hero, servizi, contatti
   ========================================================================== */
@layer components {
  .icon { width: 1.25em; height: 1.25em; flex: none; }

  /* --- Marchio --- */
  .brand { display: inline-flex; border-radius: 2px; }
  .brand img { height: 2.5rem; width: auto; }

  /* --- Navigazione --- */
  .nav-list { display: flex; gap: 0.25rem; list-style: none; padding: 0; }
  .nav-list a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.9rem;
    color: #fff; text-decoration: none; border-bottom: 3px solid transparent;
  }
  .nav-list a:hover, .nav-list a[aria-current="true"] { border-bottom-color: var(--c-brand); }

  .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.9rem;
    background: transparent; color: #fff; border: 2px solid rgb(255 255 255 / 0.6); border-radius: var(--radius);
  }
  .nav-toggle__bars { width: 1.1rem; height: 2px; background: currentColor; box-shadow: 0 -6px currentColor, 0 6px currentColor; }

  @media (max-width: 47.99rem) {
    .nav-list {
      position: absolute; inset-inline: 0; top: 100%; flex-direction: column;
      padding: 0.5rem var(--gutter) 1rem; background: var(--c-deep);
    }
    /* Senza JS il menu resta visibile; con JS si comprime */
    .js .nav-list[data-open="false"] { display: none; }
  }
  @media (min-width: 48rem) { .nav-toggle { display: none; } }

  /* --- Bottoni (target ≥ 48px, WCAG 2.5.8) --- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 3rem; padding: 0.5rem 1.4rem; border: 2px solid transparent; border-radius: var(--radius);
    font-weight: 700; text-decoration: none; transition: background-color 0.15s;
  }
  .btn--primary { background: var(--c-brand); color: var(--c-brand-ink); }
  .btn--primary:hover { background: #7ee67b; }
  .btn--ghost { border-color: #fff; color: #fff; }
  .btn--ghost:hover { background: rgb(255 255 255 / 0.14); }

  /* --- Hero: unico momento animato (una sequenza al caricamento) --- */
  .hero h1 { font-size: var(--fs-3); font-weight: 300; letter-spacing: -0.03em; }
  .hero__lead { margin-top: 1rem; font-size: var(--fs-1); max-width: 30ch; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
  @media (prefers-reduced-motion: no-preference) {
    .hero__content > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .hero__content > :nth-child(2) { animation-delay: 0.12s; }
    .hero__content > :nth-child(3) { animation-delay: 0.24s; }
    @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  }

  /* --- Coccarda 25 anni: in alto a destra su mobile, in basso a destra da tablet --- */
  .hero__badge {
    position: absolute; z-index: 1; top: 1rem;
    right: max(var(--gutter), calc((100% - var(--max-w)) / 2));
    width: clamp(5.5rem, 22vw, 7rem); height: auto;
    filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.35));
  }
  @media (min-width: 48rem) {
    .hero__badge { top: auto; bottom: clamp(2.5rem, 8vw, 5rem); width: clamp(8rem, 14vw, 11rem); }
  }

  /* --- Chi siamo --- */
  .about h2 { font-size: var(--fs-3); font-weight: 700; letter-spacing: -0.035em; }
  .about p { font-size: var(--fs-1); line-height: 1.5; }

  /* --- Servizi: elenco con filetto verde, niente schede ombreggiate --- */
  .section-title { margin-bottom: 2.5rem; font-size: var(--fs-2); }
  .service { padding-top: 1rem; border-top: 4px solid var(--c-brand); }
  .service h3 { margin-bottom: 0.5rem; font-size: var(--fs-1); font-weight: 600; }
  .service p { color: var(--c-muted); }

  /* --- Contatti --- */
  .contact-list { display: grid; gap: 1.25rem; list-style: none; padding: 0; }
  .contact-list li { display: flex; align-items: flex-start; gap: 0.9rem; }
  .contact-list .icon { margin-top: 0.3em; color: var(--c-link); }
  .contact-list a, .contact-list address { font-size: var(--fs-1); font-weight: 600; }
  .contact-list address { font-weight: 400; }
  .map { display: block; width: min(100%, 22rem); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
  .map img { width: 100%; }

  /* --- Footer --- */
  .site-footer a { color: #fff; }
  .site-footer .icon { display: inline-block; vertical-align: -0.2em; margin-right: 0.35rem; }

  /* --- Pagine di testo (privacy, 404) --- */
  .prose { max-width: 48rem; }
  .prose h1 { font-size: var(--fs-2); margin-bottom: 1.5rem; }
  .prose h2 { font-size: var(--fs-1); margin: 2rem 0 0.5rem; }
  .prose ul { margin: 0.5rem 0 0 1.25rem; }
}