/* =====================================================================
   SigmaRoutes — Global responsive layer
   Mobile-first fixes only. No branding / design identity changes.
   ===================================================================== */

/* ---------- 1. Viewport & overflow safety ---------- */
html {
  -webkit-text-size-adjust: 100%;
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Media never breaks the viewport */
img,
svg,
video,
iframe,
canvas,
embed,
object {
  max-width: 100%;
}
img,
video {
  height: auto;
}
img[width][height] {
  height: auto;
}
iframe {
  max-width: 100%;
}

/* Long words / links / emails must wrap instead of pushing the page */
p,
li,
a,
h1,
h2,
h3,
h4,
h5,
h6,
span,
td,
th,
label,
figcaption,
blockquote {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tables scroll instead of stretching the page */
table {
  max-width: 100%;
}

/* ---------- 2. Mobile container rhythm ---------- */
@media (max-width: 991.98px) {
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    padding-left: 18px;
    padding-right: 18px;
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Bootstrap gutters: big desktop gutters cause horizontal overflow */
  .row {
    --bs-gutter-x: 1rem;
    margin-left: calc(-0.5 * var(--bs-gutter-x));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
  }
  .row.g-5,
  .row.gx-5,
  .row.g-4,
  .row.gx-4 {
    --bs-gutter-x: 1rem;
  }
  .row.g-5,
  .row.gy-5 {
    --bs-gutter-y: 1.5rem;
  }
  .row > * {
    min-width: 0;
  }
}

/* Flex / grid children must be allowed to shrink */
@media (max-width: 767.98px) {
  .row > [class*="col"],
  .d-flex > *,
  .navbar > * {
    min-width: 0;
  }
}

/* ---------- 3. Typography scaling ---------- */
@media (max-width: 767.98px) {
  h1,
  .h1,
  .display-1,
  .display-2,
  .display-3,
  .display-4 {
    font-size: clamp(1.6rem, 7.2vw, 2.3rem);
    line-height: 1.2;
  }
  h2,
  .h2 {
    font-size: clamp(1.35rem, 5.9vw, 1.9rem);
    line-height: 1.25;
  }
  h3,
  .h3 {
    font-size: clamp(1.15rem, 5vw, 1.5rem);
    line-height: 1.3;
  }
  h4,
  .h4 {
    font-size: clamp(1.05rem, 4.4vw, 1.3rem);
    line-height: 1.35;
  }
  h5,
  .h5 {
    font-size: clamp(1rem, 4vw, 1.15rem);
    line-height: 1.4;
  }
  p,
  li,
  .lead {
    font-size: clamp(0.9375rem, 3.9vw, 1.0625rem);
    line-height: 1.6;
  }
  .lead {
    font-size: clamp(1rem, 4.2vw, 1.125rem);
  }
  .small,
  small {
    font-size: 0.85rem;
  }
}

@media (max-width: 359.98px) {
  h1,
  .h1 {
    font-size: 1.5rem;
  }
  h2,
  .h2 {
    font-size: 1.25rem;
  }
}

/* ---------- 4. Sections: vertical rhythm on small screens ---------- */
@media (max-width: 575.98px) {
  section,
  .section {
    padding-left: 0;
    padding-right: 0;
  }
  .py-5 {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }
  .my-5 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
  .mt-5 {
    margin-top: 2rem !important;
  }
  .mb-5 {
    margin-bottom: 2rem !important;
  }
  .pt-5 {
    padding-top: 2.25rem !important;
  }
  .pb-5 {
    padding-bottom: 2.25rem !important;
  }
}

/* ---------- 5. Buttons, CTAs & touch targets ---------- */
@media (max-width: 767.98px) {
  .btn,
  button:not(.btn-close),
  a.btn,
  [role="button"] {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-group,
  .btn-toolbar {
    flex-wrap: wrap;
  }
}

/* ---------- 6. Forms ---------- */
@media (max-width: 767.98px) {
  input,
  select,
  textarea,
  .form-control,
  .form-select {
    max-width: 100%;
    font-size: 16px; /* stops iOS auto-zoom */
  }
  .form-control,
  .form-select {
    min-height: 46px;
  }
  textarea.form-control {
    min-height: 96px;
  }
  form .row > * {
    margin-bottom: 0.25rem;
  }
}

/* ---------- 7. Header / navigation ---------- */
@media (max-width: 991.98px) {
  .navbar {
    padding-left: 16px;
    padding-right: 16px;
  }
  .navbar-brand img,
  .navbar-brand svg,
  header .logo img {
    max-height: 42px;
    width: auto;
  }
  .navbar-collapse,
  .offcanvas,
  .offcanvas-body {
    max-width: 100vw;
  }
  .navbar-nav {
    max-width: 100%;
  }
  .navbar-nav .nav-link {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 1rem;
  }
  .dropdown-menu {
    max-width: calc(100vw - 32px);
  }
}

/* Off-canvas / mobile drawer must never exceed the screen */
@media (max-width: 575.98px) {
  .offcanvas.offcanvas-start,
  .offcanvas.offcanvas-end {
    width: min(88vw, 340px);
  }
}

/* ---------- 8. Cards & multi-column reflow ---------- */
@media (max-width: 991.98px) {
  .card {
    max-width: 100%;
  }
  .card img,
  .card-img-top {
    width: 100%;
    object-fit: cover;
  }
}

@media (max-width: 575.98px) {
  .card {
    width: 100%;
  }
  .card-body {
    padding: 16px;
  }
}

/* ---------- 9. Modals / popups ---------- */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 12px;
    max-width: calc(100vw - 24px);
  }
  .modal-body {
    padding: 16px;
  }
}

/* ---------- 10. Fixed / floating elements (WhatsApp, call CTA) ---------- */
@media (max-width: 575.98px) {
  [class*="whatsapp"],
  [class*="float"][class*="btn"],
  .sr-whatsapp,
  .whatsapp-float {
    max-width: 60px;
  }
  body {
    /* room for floating CTAs so they never cover the last content row */
    scroll-padding-bottom: 80px;
  }
}

/* ---------- 11. Footer (loaded after this file, so scoped + !important) ---------- */
@media (max-width: 767.98px) {
  .sr-footer .sr-footer-copyright,
  .sr-footer .sr-footer-contact-list li,
  .sr-footer .sr-footer-contact-list a,
  .sr-footer .sr-footer-description,
  .sr-footer .sr-footer-list a {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .sr-footer .sr-footer-contact-list li {
    min-width: 0 !important;
  }
  .sr-footer .sr-footer-contact-list a {
    display: inline-block;
    max-width: 100%;
  }
  .sr-footer .sr-footer-cta-button {
    white-space: normal !important;
    min-height: 44px;
  }
}

@media (max-width: 400px) {
  .sr-footer .sr-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ---------- 12. Tablet / laptop / large screens ---------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1440px;
  }
}

/* ---------- 13. Animations ---------- */
@media (max-width: 767.98px) {
  [data-aos],
  .animate,
  .animated {
    will-change: auto;
  }
  /* animations must never create horizontal scroll */
  [class*="slide-in"],
  [class*="fade-in"],
  [data-aos^="fade-left"],
  [data-aos^="fade-right"] {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 14. Late overrides (this file is also loaded last) ---------- */
@media (max-width: 767.98px) {
  /* Decorative absolutely-positioned glows/blobs must not widen the page */
  [style*="position:absolute"][style*="radial-gradient"],
  [style*="position: absolute"][style*="radial-gradient"] {
    max-width: 100% !important;
  }

  .position-relative {
    overflow-x: clip;
  }

  /* Bootstrap rows: keep gutters inside the container */
  .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }
  .row > [class*="col"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Long emails / phone numbers / URLs inside lists */
  li a[href^="mailto:"],
  li a[href^="tel:"],
  a[href^="mailto:"],
  a[href^="http"] {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100%;
  }

  /* Anything with a hard pixel width shrinks on phones */
  [style*="width:400px"],
  [style*="width: 400px"],
  [style*="width:500px"],
  [style*="width: 500px"] {
    max-width: 100% !important;
  }
}

@media (max-width: 991.98px) {
  /* 4 columns -> 2 on tablets, cards stay full width on phones */
  .row > .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 575.98px) {
  .row > .col-lg-3,
  .row > .col-md-4,
  .row > .col-md-6,
  .row > .col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

body{--sr-responsive-loaded:1;}

@media (max-width: 767.98px) {
  .btn {
    gap: 6px;
  }
}