/* Prevent horizontal scroll on mobile */
html {
  overflow-x: clip;
  max-width: 100%;
}

body,
#root,
#root > div,
#root main,
#root .container {
  max-width: 100%;
}

body {
  overflow-x: clip;
}

@media (max-width: 767px) {
  .sss-reveal.sss-reveal-left,
  .sss-reveal.sss-reveal-right {
    transform: translateY(20px);
  }

  .sss-reveal.sss-reveal-left.sss-in-view,
  .sss-reveal.sss-reveal-right.sss-in-view {
    transform: translateY(0);
  }

  #root footer .container,
  #root footer .grid {
    overflow-x: clip;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
#root header.fixed nav,
#root header.fixed .container {
  align-items: center !important;
}

#root header.fixed a[href*="index"],
#root header.fixed a.flex.items-center,
#root header.fixed a:has(img[alt="Logo"]) {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-width: 0;
  text-decoration: none !important;
}

@media (min-width: 640px) {
  #root header.fixed a:has(img[alt="Logo"]) {
    gap: 0.75rem !important;
  }
}

/* Logo — main navigation header only */
#root header.fixed img[src*="logo"],
#root header.fixed img[alt="Logo"] {
  height: 96px !important;
  width: 96px !important;
  max-height: 96px !important;
  max-width: 96px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
}

#root footer img[src*="logo"],
footer img[src*="logo"],
footer img[alt="Logo"] {
  height: 120px !important;
  width: 120px !important;
  max-height: 120px !important;
  max-width: 120px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Header must stay fixed — main nav only */
#root > div > header.fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
}

/* Business name — 2 lines (mobile/tablet), 1 line (wide desktop) */
.sss-brand-name,
#root header.fixed a:has(img[alt="Logo"]) span,
#root header.fixed img[alt="Logo"] + span,
footer a:has(img[alt="Logo"]) span,
footer img[alt="Logo"] + span,
.nav-logo span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  max-width: 12.5rem !important;
  white-space: normal !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

.sss-brand-line {
  display: block;
  white-space: nowrap;
}

#root header.fixed .sss-brand-line {
  font-size: clamp(0.68rem, 2.1vw, 0.92rem) !important;
}

footer .sss-brand-line {
  font-size: clamp(0.82rem, 2.4vw, 1.05rem) !important;
}

.nav-logo .sss-brand-line {
  font-size: clamp(0.72rem, 1.8vw, 0.95rem) !important;
}

@media (min-width: 640px) {
  #root header.fixed .sss-brand-line {
    font-size: clamp(0.78rem, 1.4vw, 1rem) !important;
  }

  .sss-brand-name,
  #root header.fixed a:has(img[alt="Logo"]) span,
  footer a:has(img[alt="Logo"]) span,
  .nav-logo span {
    max-width: 14rem !important;
  }
}

@media (min-width: 768px) {
  #root header.fixed .sss-brand-line {
    font-size: clamp(0.88rem, 1.1vw, 1.12rem) !important;
  }
}

@media (min-width: 1280px) {
  .sss-brand-name,
  #root header.fixed a:has(img[alt="Logo"]) span,
  #root header.fixed img[alt="Logo"] + span,
  footer a:has(img[alt="Logo"]) span,
  footer img[alt="Logo"] + span,
  .nav-logo span {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    max-width: none !important;
    white-space: nowrap !important;
    gap: 0.35em !important;
  }

  .sss-brand-line {
    display: inline !important;
  }

  #root header.fixed .sss-brand-line {
    font-size: clamp(0.95rem, 0.75vw, 1.15rem) !important;
  }

  footer .sss-brand-line {
    font-size: clamp(1rem, 0.9vw, 1.25rem) !important;
  }
}

/* Splash — centered 2 lines */
.sss-splash__title.sss-brand-name {
  align-items: center !important;
  max-width: 20rem !important;
  text-align: center;
}

.sss-splash__title .sss-brand-line {
  font-size: clamp(1rem, 3.8vw, 1.45rem) !important;
  white-space: nowrap;
  text-align: center;
}

@media (min-width: 1280px) {
  .sss-splash__title.sss-brand-name {
    flex-direction: column !important;
    max-width: 28rem !important;
  }
}

/* Footer brand stays 2 lines — column is narrow */
footer .sss-brand-name,
footer a:has(img[alt="Logo"]) span.sss-brand-name {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  max-width: 14rem !important;
  white-space: normal !important;
  gap: 0 !important;
}

footer .sss-brand-line {
  display: block !important;
}

/* ─── Desktop ─── */
@media (min-width: 768px) {
  #root header.fixed img[src*="logo"],
  #root header.fixed img[alt="Logo"] {
    height: 140px !important;
    width: 140px !important;
    max-height: 140px !important;
    max-width: 140px !important;
  }

  #root header.fixed a:has(img[alt="Logo"]) span,
  #root header.fixed img[alt="Logo"] + span {
    /* sizes handled by .sss-brand-line */
  }
}

/* ─── Large desktop ─── */
@media (min-width: 1024px) {
  #root header.fixed nav {
    min-height: 5.5rem;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
}

/* ─── Mobile nav spacing ─── */
@media (max-width: 1023px) {
  #root header.fixed nav {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  #root header.fixed .lg\\:flex {
    gap: 0.5rem !important;
  }
}

@media (max-width: 380px) {
  #root header.fixed a:has(img[alt="Logo"]) span,
  #root header.fixed img[alt="Logo"] + span {
    max-width: 11rem !important;
  }

  #root header.fixed .sss-brand-line {
    font-size: 0.72rem !important;
  }

  #root header.fixed img[src*="logo"],
  #root header.fixed img[alt="Logo"] {
    height: 80px !important;
    width: 80px !important;
    max-height: 80px !important;
    max-width: 80px !important;
  }
}

/* WhatsApp chat widget — small avatar, text visible */
[class*="chatHeader"] {
  position: static !important;
  width: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

[class*="chatHeader"] img,
img[alt="whatsapp-avatar"] {
  height: 48px !important;
  width: 48px !important;
  max-height: 48px !important;
  max-width: 48px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

[class*="avatar"] img[alt="whatsapp-avatar"] {
  height: 48px !important;
  width: 48px !important;
  max-height: 48px !important;
  max-width: 48px !important;
}

/* Hero content clearance under taller header */
.min-h-screen.hero-content,
.hero-content {
  padding-top: 6.5rem !important;
}

@media (min-width: 768px) {
  .hero-content {
    padding-top: 8rem !important;
  }
}

/* Armed guards service page — ensure hero image fits */
img[alt*="Personal protection"],
img[alt*="VIP security"] {
  object-position: center 30% !important;
}