/* =========================================================================
   Zenith Zone Sol — Site Stylesheet
   Consolidated design system: typography scale, spacing, mobile
   optimization, and layout fixes. Loaded on every page after tailwind.css.
   ========================================================================= */

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  font-family: 'Roboto', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#mobileMenu.open { transform: translateX(0); }
.nav-link { position: relative; }

img, svg, video, canvas { max-width: 100%; height: auto; }

.max-w-7xl { max-width: min(80rem, 100%); }

.font-heebo, .font-headline-xl, .font-headline-lg, .font-headline-md,
.font-headline-sm, .font-display-lg, .font-label-md, .font-label-lg {
  font-family: 'Heebo', ui-sans-serif, system-ui, sans-serif;
}

.font-roboto, .font-body-lg, .font-body-md, .font-body-sm {
  font-family: 'Roboto', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Fluid type scale ----------
   Every size below scales smoothly between a comfortable mobile minimum
   and the original desktop maximum, so nothing overflows small screens
   and nothing looks oversized on large ones. */
.text-display-lg  { font-size: clamp(2.1rem, 1.35rem + 4.2vw, 3.85rem)  !important; line-height: 1.12 !important; letter-spacing: -0.01em; }
.text-headline-xl { font-size: clamp(1.55rem, 1.15rem + 2.2vw, 2.45rem) !important; line-height: 1.22 !important; }
.text-headline-lg { font-size: clamp(1.3rem, 1.05rem + 1.4vw, 1.85rem)  !important; line-height: 1.28 !important; }
.text-headline-md { font-size: clamp(1.125rem, 1rem + 0.7vw, 1.4rem)   !important; line-height: 1.35 !important; }
.text-headline-sm { font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.0625rem) !important; line-height: 1.4 !important; }
.text-body-lg      { font-size: clamp(1rem, 0.94rem + 0.35vw, 1.125rem) !important; line-height: 1.6 !important; }
.text-body-md       { font-size: 1rem !important; line-height: 1.65 !important; }
.text-body-sm       { font-size: 0.875rem !important; line-height: 1.55 !important; }
.text-label-lg      { font-size: 0.9375rem !important; line-height: 1.3 !important; font-weight: 600; }
.text-label-md      { font-size: 0.8125rem !important; line-height: 1.3 !important; font-weight: 600; letter-spacing: 0.02em; }
.text-caption        { font-size: 0.75rem !important; line-height: 1.4 !important; }

/* ---------- Section rhythm (consistent vertical spacing) ---------- */
main > div > section:not(:first-child),
main > section:not(:first-child) {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
@media (min-width: 768px) {
  main > div > section:not(:first-child),
  main > section:not(:first-child) {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1024px) {
  main > div > section:not(:first-child),
  main > section:not(:first-child) {
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
  }
}

.section-title { font-size: clamp(1.3rem, 1.05rem + 1.4vw, 1.85rem) !important; }

/* ---------- Card & content padding, tightened for small screens ---------- */
main section .p-8 { padding: 1.5rem !important; }
main section .p-6 { padding: 1.125rem !important; }
@media (min-width: 640px) {
  main section .p-8 { padding: 2rem !important; }
  main section .p-6 { padding: 1.5rem !important; }
}
@media (min-width: 1024px) {
  main section .p-8 { padding: 2rem !important; }
  main section .lg\:p-12 { padding: 3rem !important; }
}

.service-card { padding: 1.25rem 1.1rem !important; }
.service-icon { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; }

@media (max-width: 480px) {
  .px-6 { padding-left: 1.15rem !important; padding-right: 1.15rem !important; }
}

/* ---------- Reveal / fade-in animation ---------- */
.zz-fade { opacity: 0; transform: translateY(14px); transition: opacity 0.52s ease, transform 0.52s ease; }
.zz-fade.zz-in { opacity: 1; transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.52s ease, transform 0.52s ease !important; }
.reveal.visible { opacity: 1 !important; transform: translateY(0) !important; }

/* ---------- Mobile-first usability fixes ---------- */

/* Prevent iOS Safari from auto-zooming into forms (requires >=16px) */
input, select, textarea {
  font-size: max(16px, 1rem) !important;
}

/* Comfortable touch targets on small screens */
@media (max-width: 767px) {
  .btn, button, a.btn, .nav-link, .mobile-link {
    min-height: 44px;
  }
  a[href^="tel:"], a[href^="mailto:"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Buttons stack full-width and remain comfortable to tap on very small phones */
@media (max-width: 420px) {
  .btn { width: 100%; }
  .btn.btn-inline, .btn-auto { width: auto; }
}

/* Tables/wide content never force horizontal page scroll */
table { display: block; max-width: 100%; overflow-x: auto; }

/* Long words/URLs never overflow their container on narrow screens.
   Icon ligature spans are excluded so icon names never visibly wrap. */
p, li, h1, h2, h3, h4, h5, h6, a {
  overflow-wrap: break-word;
}
.material-symbols-outlined, .fa, .fas, .far, .fab {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* Footer + any content outside <main> still gets the type scale (fixes
   sections like the footer that sit as a sibling of <main>, not a child) */
footer .text-headline-sm { font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.0625rem) !important; }
footer .text-body-md { font-size: 1rem !important; line-height: 1.65 !important; }
footer .text-caption { font-size: 0.75rem !important; }