/* ============================================================
   InSurMap – Responsive Design Overrides
   Breakpoints:
     xs  < 480px   (small phones)
     sm  < 640px   (phones)
     md  < 768px   (large phones / small tablets)
     lg  < 1024px  (tablets / small laptops)
   ============================================================ */

/* ----------------------------------------------------------
   1. Global Box-model & Images
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  overflow-x: hidden;
}

/* ----------------------------------------------------------
   2. Container
   ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ----------------------------------------------------------
   3. Navigation – Hamburger Menu
   ---------------------------------------------------------- */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  position: relative;
}

.nav-links {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  padding-bottom: 0.25rem;
  padding-top: 0.75rem;
}

/* Hamburger button – hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #0f172a;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animated X state */
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----------------------------------------------------------
   4. Tablet (max-width: 1024px)
   ---------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Services 4-col -> 2-col */
  #services .grid-cols-4-responsive {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer 4-col -> 2-col */
  .footer-4col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ----------------------------------------------------------
   5. Large phone / small tablet (max-width: 768px)
   ---------------------------------------------------------- */
@media (max-width: 768px) {

  /* --- Navigation --- */
  .nav-hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: -1rem;
    right: -1rem;
    background: white;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 1.5rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 100;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 0.65rem 0 !important;
    width: 100%;
    font-size: 1rem !important;
    border-bottom: 1px solid #f1f5f9;
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  /* --- Hero Grids --- */
  .hero-2col {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* --- General 2-col grids --- */
  .grid-2col-responsive {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* --- 3-col grids --- */
  .grid-3col-responsive {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* --- 4-col grids --- */
  .grid-4col-responsive,
  #services .grid-cols-4-responsive {
    grid-template-columns: 1fr !important;
  }

  /* --- Footer --- */
  .footer-4col {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Applications images --- */
  .application-img {
    height: 220px !important;
  }

  /* --- CTA section --- */
  .cta-box {
    padding: 2rem 1.5rem !important;
  }

  /* --- Section padding --- */
  .section-py {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* --- Fluid headings --- */
  .text-6xl { font-size: clamp(2rem, 7vw, 3.75rem) !important; }
  .text-5xl { font-size: clamp(1.75rem, 6vw, 3rem) !important; }
  .text-4xl { font-size: clamp(1.5rem, 5vw, 2.25rem) !important; }
  .text-3xl { font-size: clamp(1.25rem, 4vw, 1.875rem) !important; }
}

/* ----------------------------------------------------------
   6. Small phone (max-width: 480px)
   ---------------------------------------------------------- */
@media (max-width: 480px) {

  /* Footer 2-col -> 1-col */
  .footer-4col {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Footer bottom bar: stack vertically */
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  /* CTA buttons: stack vertically */
  .cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .cta-buttons button,
  .cta-buttons a {
    width: 100% !important;
    text-align: center !important;
  }

  /* Section padding */
  .section-py {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Hero padding */
  .hero-py {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Heading sizes */
  .text-6xl { font-size: 1.875rem !important; }
  .text-5xl { font-size: 1.625rem !important; }
  .text-4xl { font-size: 1.5rem !important; }
  .text-3xl { font-size: 1.25rem !important; }
  .text-xl  { font-size: 1rem !important; }
  .text-lg  { font-size: 0.9375rem !important; }

  /* Gap reductions */
  .gap-16 { gap: 1.5rem !important; }
  .gap-12 { gap: 1.5rem !important; }
  .gap-8  { gap: 1.25rem !important; }

  /* Reduce hero image blur effect size */
  .blur-3xl { filter: blur(24px) !important; }
}

/* Inspection Reporting Automation System readability */
#reporting > .container > .grid > div > p {
  font-size: 1.2rem !important;
  line-height: 1.75 !important;
}

#reporting > .container > .grid > div > ul,
#reporting > .container > .grid > div > ul li,
#reporting > .container > .grid > div > ul li span {
  font-size: 1.1rem !important;
  line-height: 1.65 !important;
}

@media (max-width: 480px) {
  #reporting > .container > .grid > div > p {
    font-size: 1.0625rem !important;
  }

  #reporting > .container > .grid > div > ul,
  #reporting > .container > .grid > div > ul li,
  #reporting > .container > .grid > div > ul li span {
    font-size: 1rem !important;
  }

  #reporting h2 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }
}

/* Website-wide heading hierarchy */
h1,
h1[class*="text-"] {
  font-size: clamp(3rem, 5.5vw, 4.75rem) !important;
  line-height: 1.06 !important;
  text-wrap: balance;
}

h2,
h2[class*="text-"] {
  font-size: clamp(2.5rem, 4.5vw, 3.75rem) !important;
  line-height: 1.1 !important;
  text-wrap: balance;
}

h3,
h3[class*="text-"] {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem) !important;
  line-height: 1.18 !important;
  text-wrap: balance;
}

h4,
h4[class*="text-"] {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem) !important;
  line-height: 1.25 !important;
}

@media (max-width: 768px) {
  h1,
  h1[class*="text-"] {
    font-size: clamp(2.35rem, 8.5vw, 4rem) !important;
  }

  h2,
  h2[class*="text-"] {
    font-size: clamp(2.1rem, 7.5vw, 3.2rem) !important;
  }

  h3,
  h3[class*="text-"] {
    font-size: clamp(1.45rem, 5vw, 2.15rem) !important;
  }

  h4,
  h4[class*="text-"] {
    font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
  }
}

@media (max-width: 480px) {
  h1,
  h1[class*="text-"] {
    font-size: 2.2rem !important;
    line-height: 1.1 !important;
  }

  h2,
  h2[class*="text-"] {
    font-size: 1.9rem !important;
    line-height: 1.15 !important;
  }

  h3,
  h3[class*="text-"] {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
  }

  h4,
  h4[class*="text-"] {
    font-size: 1.15rem !important;
  }
}

/* End website-wide heading hierarchy */

/* Website-wide readable body and small-text scale */
body {
  font-size: 1.0625rem;
  line-height: 1.6;
}

p,
li {
  font-size: clamp(1rem, 1.05vw, 1.125rem) !important;
  line-height: 1.7 !important;
}

.text-xs {
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
}

.text-sm {
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

.text-base {
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
}

.text-lg {
  font-size: 1.2rem !important;
  line-height: 1.65 !important;
}

.text-xl {
  font-size: 1.3rem !important;
  line-height: 1.6 !important;
}

button,
input,
textarea,
select {
  font-size: 1rem;
}

@media (max-width: 480px) {
  body {
    font-size: 1rem;
  }

  p,
  li {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .text-xs {
    font-size: 0.9rem !important;
  }

  .text-sm {
    font-size: 0.95rem !important;
  }

  .text-base {
    font-size: 1rem !important;
  }

  .text-lg {
    font-size: 1.1rem !important;
  }

  .text-xl {
    font-size: 1.2rem !important;
  }
}

/* End website-wide readable body and small-text scale */

/* Stronger global readability scale */
body {
  font-size: 1.125rem;
}

p,
li,
label,
dt,
dd {
  font-size: clamp(1.125rem, 1.25vw, 1.3rem) !important;
  line-height: 1.7 !important;
}

.text-xs {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

.text-sm {
  font-size: 1.1rem !important;
  line-height: 1.55 !important;
}

.text-base {
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
}

.text-lg {
  font-size: 1.3rem !important;
  line-height: 1.65 !important;
}

.text-xl {
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
}

@media (max-width: 768px) {
  p,
  li,
  label,
  dt,
  dd {
    font-size: 1.15rem !important;
  }

  .text-xs {
    font-size: 0.98rem !important;
  }

  .text-sm {
    font-size: 1.05rem !important;
  }

  .text-base {
    font-size: 1.1rem !important;
  }

  .text-lg {
    font-size: 1.22rem !important;
  }

  .text-xl {
    font-size: 1.32rem !important;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 1.0625rem;
  }

  p,
  li,
  label,
  dt,
  dd {
    font-size: 1.1rem !important;
    line-height: 1.65 !important;
  }

  .text-xs {
    font-size: 0.95rem !important;
  }

  .text-sm {
    font-size: 1rem !important;
  }

  .text-base {
    font-size: 1.05rem !important;
  }

  .text-lg {
    font-size: 1.15rem !important;
  }

  .text-xl {
    font-size: 1.25rem !important;
  }
}

/* End stronger global readability scale */

/* Successful Cases: consistent readable card text */
.case-content .field-row,
.case-content .field-label,
.case-content .field-value,
.case-content .results-list li,
.case-content .stat-label-vertical,
.case-content .stat-value-vertical {
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
}

.case-content .case-tag {
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 860px) {
  .case-content .field-row,
  .case-content .field-label,
  .case-content .field-value,
  .case-content .results-list li,
  .case-content .stat-label-vertical,
  .case-content .stat-value-vertical {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
  }

  .case-content .case-tag {
    font-size: 1.15rem !important;
  }
}

/* End Successful Cases text normalization */

/* Contact Us: make address, email, and phone details easier to read */
.contact-card .address-line,
.contact-card .address-line a {
  font-size: 1.3rem !important;
  line-height: 1.7 !important;
}

@media (max-width: 768px) {
  .contact-card .address-line,
  .contact-card .address-line a {
    font-size: 1.2rem !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 480px) {
  .contact-card .address-line,
  .contact-card .address-line a {
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
  }
}

/* End Contact Us readability adjustment */