/* ==========================================================
   KidSitter Responsive — kidsitter-responsive.css
   ==========================================================
   All media queries and responsive overrides.
   Breakpoints (Bootstrap 3):
     xs: < 768px  (phones)
     sm: >= 768px (tablets)
     md: >= 992px (desktops)
     lg: >= 1200px (large desktops)
   ========================================================== */

/* ==========================================================
   0. Global — Prevent Horizontal Overflow
   ========================================================== */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
html {
  -webkit-overflow-scrolling: touch;
}
/* Body padding to offset fixed header (Bootstrap 3 navbar-fixed-top pattern) */
body {
  padding-top: 75px;
}
/* Pages without the fixed navbar (e.g. login) — zero out the offset */
body.ks-no-navbar {
  padding-top: 0;
}
img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================
   1. Mobile (< 768px)
   ========================================================== */
@media (max-width: 767px) {
  /* Smaller header on mobile — adjust body offset */
  body { padding-top: 69px; }
  body.ks-no-navbar { padding-top: 0; }

  /* Navigation */
  .ks-nav-desktop { display: none !important; }
  .ks-hamburger   { display: block; }

  /* Logo */
  .ks-logo img { height: 2.5rem; }

  /* Typography scaling */
  .ks-section-heading { font-size: 1.5rem; }
  .ks-section-subtitle { font-size: 1rem; }

  /* Touch targets */
  .ks-btn,
  [role="button"] { min-height: 2.75rem; }

  /* Readability */
  p, span, li { line-height: 1.6; }

  /* Force min font on text-xs */
  .ks-text-xs { font-size: 0.875rem !important; }

  /* Prevent iOS zoom on input focus */
  input, select, textarea { font-size: 1rem !important; }

  /* Focus states */
  :focus-visible {
    outline: 3px solid var(--ks-ring);
    outline-offset: 2px;
  }

  /* Sections — tighter padding */
  .ks-section { padding: 2.5rem 0; }
  .ks-section-primary { padding: 2.5rem 0; }

  /* Steps — vertical stack */
  .ks-steps-row {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .ks-step {
    max-width: 100%;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }
  .ks-step-icon {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
  }
  .ks-step-icon .lucide { width: 1.75rem; height: 1.75rem; }
  .ks-step-connector { display: none; }

  /* Cards — full width */
  .ks-card-header  { padding: 1rem 1rem 0.5rem; }
  .ks-card-content { padding: 0 1rem 1rem; }
  .ks-card-footer  { padding: 0.5rem 1rem 1rem; }

  /* Tabs — scrollable */
  .ks-tabs-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .ks-tabs-list::-webkit-scrollbar { display: none; }

  /* Modal — nearly full width */
  .ks-dialog { width: 95%; max-width: none; margin: 1rem; }

  /* Cookie consent — full bottom */
  .ks-cookie-consent { left: 1rem; right: 1rem; max-width: none; }

  /* Toast — full width centered */
  #ks-toast-container { left: 1rem; right: 1rem; transform: none; max-width: none; }

  /* Footer — stack columns */
  .ks-footer-bottom { text-align: center; }
}

/* ==========================================================
   2. Small Phones (< 480px)
   ========================================================== */
@media (max-width: 479px) {
  /* Even tighter section padding */
  .ks-section { padding: 2rem 0; }

  /* Heading scale down further */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.125rem; }

  .ks-section-heading { font-size: 1.375rem; }
}

/* ==========================================================
   3. Tablet+ (>= 768px) — Desktop nav visible
   ========================================================== */
@media (min-width: 768px) {
  .ks-nav-desktop { display: none; }
  .ks-nav-desktop.ks-nav-visible { display: flex !important; }
  .ks-hamburger   { display: none !important; }
  .ks-mobile-menu,
  .ks-mobile-backdrop { display: none !important; }

  /* Logo larger on desktop */
  .ks-logo img { height: 3.125rem; }

  /* Sticky mobile CTA — hide on desktop */
  .ks-sticky-mobile-cta { display: none !important; }
}

/* ==========================================================
   4. Desktop (>= 992px)
   ========================================================== */
@media (min-width: 992px) {
  /* Heading bumps */
  h1 { font-size: 2.25rem; }

  /* Larger nav gap */
  .ks-nav-desktop { gap: 1.75rem; }
}

/* ==========================================================
   5. Large Desktop (>= 1200px)
   ========================================================== */
@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }
}

/* ==========================================================
   6. Landscape Phones
   ========================================================== */
@media (max-width: 767px) and (orientation: landscape) {
  .ks-hero { min-height: auto; }
  .ks-sticky-mobile-cta { display: none; }
}

/* ==========================================================
   7. iOS Safe Areas
   ========================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
  .ks-sticky-mobile-cta { padding-bottom: env(safe-area-inset-bottom); }
}

/* ==========================================================
   8. Print
   ========================================================== */
@media print {
  .ks-header,
  .ks-footer,
  .ks-sticky-mobile-cta,
  .ks-cookie-consent,
  .ks-nav-state-toggle,
  .ks-promo-strip,
  .ks-mobile-backdrop,
  .ks-mobile-menu { display: none !important; }

  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}