/* Studio Odontoiatrico Dott.ssa Isabella Mariotti — stylesheet
   Structural/shared rules only. Section layout uses per-element inline
   styles (kept from the original design) for one-off values; this file
   holds resets, design tokens, interaction states and responsive rules. */

:root {
  --teal: #0C6B63;
  --teal-dark: #0B4A44;
  --teal-darker: #08312D;
  --teal-light: #6FCFC4;
  --ink: #16302E;
  --whatsapp: #25D366;
  --whatsapp-hover: #1EBE5A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

::selection { background: #DCF1ED; color: var(--teal-dark); }

/* Visible keyboard focus everywhere (native hover-only affordances
   previously left keyboard users without feedback). */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes sheen { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- Hover / focus-visible states ----------
   Replace the design-tool-only `style-hover` bindings with real CSS. */

.hover-link:hover, .hover-link:focus-visible { color: var(--teal); }

.hover-phone:hover, .hover-phone:focus-visible { background: #F2F8F7; border-color: #BFE0DA; }

.hover-btnPrimary:hover, .hover-btnPrimary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(12, 107, 99, .4);
}

.hover-btnLift:hover, .hover-btnLift:focus-visible { transform: translateY(-2px); }

.hover-card:hover, .hover-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(12, 107, 99, .15);
  border-color: #CFE7E2;
}

.hover-softCard:hover, .hover-softCard:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(12, 107, 99, .12);
}

.hover-whats:hover, .hover-whats:focus-visible { background: var(--whatsapp-hover); }

.hover-whiteLink:hover, .hover-whiteLink:focus-visible { opacity: .85; }

.hover-map:hover, .hover-map:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 26px 58px rgba(11, 74, 68, .2);
}

.hover-channel:hover, .hover-channel:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 30px 66px rgba(0, 0, 0, .3);
}

.hover-channelGhost:hover, .hover-channelGhost:focus-visible {
  background: rgba(255, 255, 255, .16);
  transform: translateY(-3px);
}

.hover-social:hover, .hover-social:focus-visible { background: rgba(111, 207, 196, .28); }

.hover-footLink:hover, .hover-footLink:focus-visible { color: #fff; }

[data-slide]:hover, [data-slide]:focus-visible { transform: translateX(4px); }

/* Primary CTA sheen sweep on hover (buttons linking to #prenota) */
.btn-sheen:hover, .btn-sheen:focus-visible {
  background: linear-gradient(110deg, #0C6B63, #1aa093, #0C6B63);
  background-size: 220% 100%;
  animation: sheen 2.6s linear infinite;
}

/* Image zoom-on-hover containers */
[data-zoom] { position: relative; }
[data-zoom] img { transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
[data-zoom]:hover img, [data-zoom]:focus-within img { transform: scale(1.055); }

/* Desktop nav underline */
[data-navlink] { position: relative; }
[data-navlink]::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1.5px;
  width: 100%;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
[data-navlink]:hover::after, [data-navlink]:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Trust strip hover */
[data-r=trust-grid] > div { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
[data-r=trust-grid] > div > span { transition: background .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1); }
[data-r=trust-grid] > div:hover { transform: translateY(-3px); }
[data-r=trust-grid] > div:hover > span { background: rgba(255, 255, 255, .2); transform: scale(1.06); }

/* Service card icon lift on hover */
[data-r=services-grid] > article:hover [data-ico],
[data-r=services-grid] > article:focus-within [data-ico] { transform: translateY(-3px) scale(1.09); }

/* ---------- Scroll reveal ----------
   Base state applied via JS (adds .reveal-init then .reveal-in on
   intersection) so content stays visible if JS fails to load. */
[data-reveal].reveal-init {
  opacity: 0;
  transform: translateY(30px) scale(.985);
  transition: opacity .95s cubic-bezier(.22, 1, .36, 1), transform 1.05s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].reveal-in { opacity: 1; transform: none; }

/* ---------- FAQ accordion ---------- */
.faq-item {
  background: #F7FAF9;
  border: 1px solid #EBF1F0;
  border-radius: 18px;
  overflow: hidden;
  transition: background .35s ease, border-color .35s ease;
}
.faq-item:hover, .faq-item.is-open { background: #fff; border-color: #D5E7E3; }
.faq-summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.faq-summary span { font-size: 17px; font-weight: 700; color: #12352F; }
.faq-icon { flex-shrink: 0; transition: transform .3s ease; }
.faq-item.is-open .faq-icon { transform: rotate(180deg); }
.faq-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease;
}
.faq-body p { padding: 0 24px 22px; font-size: 15.5px; line-height: 1.65; color: #5A716E; }

/* ---------- Mobile nav ---------- */
.mobile-menu { overflow: hidden; max-height: 0; transition: max-height .38s ease; border-top: 1px solid #EDF2F1; background: rgba(255, 255, 255, .98); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  [data-r=desktop-nav] { display: none !important; }
  [data-r=nav-cta] { display: none !important; }
  [data-r=burger] { display: flex !important; }
  [data-r=hero-grid] { grid-template-columns: 1fr !important; gap: 40px !important; padding-top: 36px !important; padding-bottom: 48px !important; }
  [data-r=about-grid] { grid-template-columns: 1fr !important; gap: 44px !important; }
  [data-r=about-sticky] { position: static !important; }
  [data-r=booking-grid] { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-r=tech-grid] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-r=loc-grid] { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-r=services-grid] { grid-template-columns: repeat(2, 1fr) !important; grid-auto-flow: dense !important; }
  [data-r=services-grid] > article[data-wide] { grid-column: 1 / -1 !important; }
  [data-r=why-grid] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r=section] { padding-top: 68px !important; padding-bottom: 68px !important; }
  [data-r=h2] { font-size: 33px !important; }
  [data-r=hero-h1] { font-size: 46px !important; }
  [data-r=philo-quote] { font-size: 40px !important; }
  /* Turning the strip into a column makes `flex-basis` size the height, so the
     children must drop their row-oriented basis or the card grows to 380px tall
     and the text overflows sideways. */
  [data-r=review-cta] { flex-direction: column !important; align-items: stretch !important; gap: 22px !important; }
  [data-r=review-cta] > div { flex: 0 0 auto !important; min-width: 0 !important; }
}

@media (max-width: 620px) {
  [data-r=services-grid] { grid-template-columns: 1fr !important; }
  [data-r=why-grid] { grid-template-columns: 1fr !important; }
  [data-r=trust-grid] { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  [data-r=hero-h1] { font-size: 37px !important; }
  [data-r=h2] { font-size: 29px !important; }
  [data-r=hero-cta] { flex-direction: column !important; align-items: stretch !important; }
  [data-r=hero-cta] > a { justify-content: center !important; }
  [data-r=footer-grid] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-r=philo-quote] { font-size: 31px !important; }
  [data-r=review-cta-btns] { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
  [data-r=review-cta-btns] > a { justify-content: center !important; text-align: center !important; }
  [data-r=sticky-bar] { display: flex !important; }
  body { padding-bottom: 74px; }
}

/* Very narrow phones (320px). The trust strip's two columns leave ~69px for
   text next to the 46px icon, which is narrower than the min-content width of
   words like "Formazione"/"Università" — they cannot shrink, so the page gains
   a horizontal scrollbar. One column per item at this size. */
@media (max-width: 380px) {
  [data-r=trust-grid] { grid-template-columns: 1fr !important; }
  [data-r=trust-grid] > div > div { min-width: 0; }
}

@media print {
  [data-r=sticky-bar], #scroll-progress, header { display: none !important; }
}

/* ---------- Legal pages (privacy-policy.html, cookie-policy.html) ---------- */
@media (max-width: 720px) {
  [data-r=title] { font-size: 34px !important; }
  [data-r=wrap] { padding-left: 24px !important; padding-right: 24px !important; }
  [data-r=tablecard] { grid-template-columns: 1fr !important; gap: 6px !important; }
}