/* Studio Ferrari — stili della pagina (caricato dopo css/theme.css)
   Colori presi dalle variabili di scss/theme.scss */

/* Utility: spaziatura flex */
.gap-12      { gap: 12px; }
.gap-16      { gap: 16px; }
.gap-24      { gap: 24px; }
.gap-8-16    { gap: 8px 16px; }
.gap-8-28    { gap: 8px 28px; }
.gap-16-28   { gap: 16px 28px; }

/* Utility: larghezza massima del testo */
.measure-42  { max-width: 42ch; }
.measure-44  { max-width: 44ch; }

/* Eyebrow più piccolo (logo, badge) */
.uk-text-eyebrow.eyebrow-small { font-size: 11px; }

/* Navbar */
.uk-logo-name {
  font-family: 'Newsreader', serif;
  font-size: 24px;
  font-weight: 400;
}

/* Menu mobile: pulsante hamburger/X e pannello a tendina sotto la navbar (animati da js/main.js) */
html.menu-open { overflow: hidden; }

.menu-toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.menu-toggle svg { overflow: visible; }
.menu-toggle line { stroke: currentColor; stroke-width: 1.5; }

.mobile-menu {
  position: fixed;
  top: var(--menu-top, 92px); /* bordo inferiore della navbar, aggiornato da js/main.js */
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 979;               /* sotto la navbar fissa di uk-sticky (980) */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  box-sizing: border-box;
  min-height: 100%;
  padding-top: 24px;
  padding-bottom: 40px;
}
.mobile-menu-nav { margin: 0; padding: 0; list-style: none; }
.mobile-menu-nav li + li { border-top: 1px solid #34444F; } /* $inverse-global-border */
.mobile-menu.uk-light .mobile-menu-nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  font-family: 'Newsreader', serif;
  font-size: clamp(34px, 9vw, 48px);
  font-weight: 300;
  line-height: 1.1;
  color: #F3EFE7;             /* $inverse-global-emphasis-color */
  text-decoration: none;
}
.mobile-menu.uk-light .mobile-menu-nav a:hover,
.mobile-menu.uk-light .mobile-menu-nav a:focus-visible { color: #D98A63; }
.mobile-menu-nav .uk-text-eyebrow { font-size: 11px; }

.mobile-menu-contacts p { margin: 0 0 12px; }
.mobile-menu-contacts p:last-child { margin: 12px 0 0; }
.mobile-menu.uk-light .mobile-menu-contacts a {
  display: block;
  font-family: 'Newsreader', serif;
  font-size: 22px;
  line-height: 1.5;
  color: #F3EFE7;
}

/* Hero */
.hero-cover { height: clamp(380px, 52vw, 620px); }
.hero-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-badge { padding: 18px 0 0 22px; }
.hero-badge-year {
  font-family: 'Newsreader', serif;
  font-size: 44px;
  line-height: 1;
  color: #1B2A36; /* $global-emphasis-color */
}

/* Separatori tra sezioni */
.section-divider   { border-top: 1px solid #DDD5C6; } /* $global-border */
.accordion-divider { border-top: 1px solid #34444F; } /* $inverse-global-border */

/* Servizi: accordion animato con GSAP (js/main.js).
   Lo spazio sopra il contenuto sta nel primo figlio, così con height: 0 non resta visibile. */
[data-accordion] .uk-accordion-content { margin-top: 0; overflow: hidden; }
[data-accordion] .uk-accordion-content > :first-child { margin-top: 18px; }

/* Contatti */
.contact-email {
  font-family: 'Newsreader', serif;
  font-size: 30px;
  border-bottom: 1px solid #A4512F; /* $global-primary-background */
}

/* Elenchi nome / dettaglio (Lo Studio, Contatti): su mobile il dettaglio va sotto al nome */
@media (max-width: 639px) {
  .contact-row { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* Dove siamo: mappa */
.map-frame { height: clamp(320px, 45vw, 480px); }
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.6) sepia(.15);
}

/* Footer */
.footer-name {
  font-family: 'Newsreader', serif;
  font-size: 20px;
  color: #F3EFE7; /* $global-inverse-color */
}

/* Animazioni GSAP: elementi nascosti finché js/main.js non li anima.
   Solo con JavaScript attivo e se l'utente non ha chiesto movimento ridotto. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-hero-nav] > *,
  .js [data-hero],
  .js [data-hero-title],
  .js [data-hero-media],
  .js [data-hero-badge],
  .js [data-reveal],
  .js [data-reveal-lines],
  .js [data-reveal-stagger] > *,
  .js [data-reveal-clip] { visibility: hidden; }
}