/* ============================================================
   Greenera Southmark — Responsive overrides
   Desktop-first nudges + mobile layout for header/sections.
   (Tailwind utilities handle most grid breakpoints in markup.)
   ============================================================ */

/* Tablet & below */
@media (max-width: 1024px) {
  :root {
    --header-h: 68px;
  }
  .nav-links {
    display: none;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  .header-tel span.tel-label {
    display: none;
  }
  .float-btn {
    width: 48px;
    height: 48px;
  }
  .modal__head {
    padding: 1.5rem 1.3rem 0.8rem;
  }
  .modal__body {
    padding: 1.2rem 1.3rem 1.6rem;
  }
  .btn {
    padding: 0.9em 1.5em;
  }
  .section-olive {
    background-size: cover, 360px;
  }
}

/* Small phones */
@media (max-width: 420px) {
  .header-tel {
    font-size: 0.95rem;
  }
  .brand-logo {
    height: 44px;
  }
}

/* Hide desktop-only / mobile-only helpers */
.only-desktop {
  display: initial;
}
.only-mobile {
  display: none;
}
@media (max-width: 768px) {
  .only-desktop {
    display: none !important;
  }
  .only-mobile {
    display: initial;
  }
}