/* =========================================================
   S & I DENTAL CLINIC — GLOBAL RESPONSIVE BEHAVIOR
   responsive.css

   Component-specific responsive rules live alongside their
   component (navbar.css, hero.css, sections.css, etc).

   This file holds cross-cutting breakpoint behavior only.
   ========================================================= */

/* =========================================================
   GLOBAL OVERFLOW
   ========================================================= */

/* Prevent accidental horizontal scroll from full-bleed
   decorative elements such as watermarks and floating cards. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================================================
   CONTAINER RESPONSIVE SPACING
   ========================================================= */
@media (max-width: 1400px) {
  :root {
    --container-pad: 1.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --container-pad: 1.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad: 1rem;
  }
}

/* =========================================================
   GLOBAL SECTION SPACING
   ========================================================= */

/* Section rhythm tightens slightly on smaller screens so
   the website does not feel overly spaced. */
@media (max-width: 991px) {
  :root {
    --space-2xl: 4.5rem;
    --space-3xl: 5.5rem;
  }
}

/* =========================================================
   MOBILE — GLOBAL
   ========================================================= */
@media (max-width: 575px) {
  :root {
    --space-xl: 3rem;
    --space-2xl: 3.5rem;
    --space-3xl: 4rem;
  }

  /* Stack button groups vertically */
  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-group .btn-si {
    width: 100%;
  }
}

/* =========================================================
   TOUCH DEVICES
   ========================================================= */

/* Comfortable touch targets for devices without hover. */
@media (hover: none) {
  .btn-si, .si-navbar__links a, .si-footer__social a {
    min-height: 44px;
  }
}

/* =========================================================
   FLOATING BUTTONS — MOBILE
   ========================================================= */
@media (max-width: 575px) {
  /* ---------- Shared base ---------- */

  /* Mobile size + gap. Every button's "bottom" is calculated
     from these two values below, so the stack stays evenly
     spaced no matter how many buttons are in it. */
  .si-whatsapp-float, .si-instagram-float, .si-youtube-float {
    --float-size: 52px;
    --float-gap: 14px;
    right: max(var(--space-sm), env(safe-area-inset-right));
    width: var(--float-size);
    height: var(--float-size);
  }

  .si-whatsapp-float svg, .si-instagram-float svg, .si-youtube-float svg {
    width: 26px;
    height: 26px;
  }

  /* ---------- WhatsApp ---------- */
  .si-whatsapp-float {
    bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  }

  /* ---------- Instagram ---------- */

  /* directly above WhatsApp: one button-height + one gap */
  .si-instagram-float {
    bottom: calc(max(var(--space-sm), env(safe-area-inset-bottom)) + var(--float-size) + var(--float-gap));
  }

  /* ---------- YouTube ---------- */

  /* above Instagram: two button-heights + two gaps */
  .si-youtube-float {
    bottom: calc(max(var(--space-sm), env(safe-area-inset-bottom)) + (var(--float-size) + var(--float-gap)) * 2);
  }
}