/* Site-wide mobile / responsive foundation */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  padding-top: 88px; /* fixed navbar clearance */
}

img,
video,
iframe,
svg,
canvas,
embed,
object {
  max-width: 100%;
  height: auto;
}

iframe {
  width: 100%;
}

table {
  width: 100%;
  max-width: 100%;
}

.table-responsive,
.scroll-x,
.table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 100%;
}

/* Prevent long unbroken strings from blowing layout */
p,
li,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
label,
.card-title,
.dropdown-item {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Forms */
input,
select,
textarea,
button,
.form-control,
.form-select,
.btn {
  max-width: 100%;
}

input[type="file"] {
  width: 100%;
}

/* Flex children should shrink */
.row > [class*="col-"],
.d-flex > *,
.navbar .container {
  min-width: 0;
}

/* Fixed navbar brand shouldn't overflow */
.navbar-custom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Typography scale-down for content pages */
@media (max-width: 991.98px) {
  body {
    padding-top: 76px;
  }

  .display-1,
  .display-2,
  .display-3 {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
  }

  .display-4,
  .display-5,
  .display-6 {
    font-size: clamp(1.45rem, 5vw, 2.1rem) !important;
  }

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

  .section-header h2,
  .about-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
  }

  section,
  .about-section,
  .blog-news-section {
    padding-left: 0;
    padding-right: 0;
  }

  .about-section,
  .blog-news-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .blog-card-content {
    padding: 18px !important;
  }

  .blog-card-footer {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* Horizontal step indicators -> stack */
  .application-steps {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
  }

  .application-steps:before {
    display: none !important;
  }

  .step {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 0 !important;
  }

  .step-circle {
    margin-bottom: 0 !important;
  }

  /* Avoid double offset under fixed navbar */
  .header,
  .page-header,
  .application-hero,
  .bus .header {
    margin-top: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .container,
  .container-sm,
  .container-md {
    padding-left: 14px;
    padding-right: 14px;
  }

  .btn-lg {
    width: 100%;
    justify-content: center;
  }

  .hero-overlay .d-flex.gap-3,
  #hero .d-flex.gap-3,
  .about-section .d-flex.gap-2 {
    width: 100%;
  }

  #hero .btn,
  .hero-overlay .btn {
    width: 100%;
    text-align: center;
  }

  .about-float {
    width: 110px !important;
    height: 110px !important;
    right: -8px !important;
    bottom: -8px !important;
  }

  .about-btn {
    width: 100%;
    justify-content: center;
  }

  .sf-logo img {
    width: 100% !important;
    max-width: 140px;
    height: auto !important;
  }

  .whatsapp-float,
  .whatsapp-fab {
    right: 12px !important;
    bottom: 12px !important;
    width: 54px !important;
    height: 54px !important;
  }

  /* Forms */
  .form-container {
    padding: 16px !important;
    margin: 0 0 1.25rem !important;
    border-radius: 12px !important;
  }

  .section-title {
    font-size: 1.15rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }

  .header h1,
  .page-header h1 {
    font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
  }

  .map-box,
  .map iframe {
    height: 260px !important;
  }

  /* Inline flex rows with fixed min-widths */
  .d-flex.gap-2,
  .d-flex.gap-3 {
    flex-wrap: wrap;
  }

  input[style*="min-width"],
  .form-control[style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Cards / grids */
  .card .body,
  .card-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 575.98px) {
  body {
    padding-top: 70px;
  }

  .btn,
  .about-btn,
  .division-btn {
    width: 100%;
  }

  .navbar-custom .navbar-brand-line2 {
    display: none;
  }

  /* Stack footer columns spacing */
  .site-footer__main .col-md-4,
  .site-footer__main .col-lg-3,
  .site-footer__main .col-lg-4 {
    margin-bottom: 1.25rem;
  }
}

/* Pages that used old fixed-navbar offsets — body already has padding-top */
.application-hero,
.gallery-hero,
#hero {
  margin-top: 0 !important;
}

@media (max-width: 991.98px) {
  main[style*="margin-top"],
  .content-wrap[style*="margin-top"],
  section[style*="margin-top"] {
    margin-top: 0 !important;
  }
}


/* Standalone application forms */
.app-form-page,
.form-page {
  overflow-x: clip;
}

body:has(.form-container):not(:has(.navbar-custom)) {
  padding-top: 0;
}

.app-form-page .form-container,
.form-page .form-container,
.form-container {
  width: 100%;
  max-width: 100%;
}

/* Contact page brand bar */
@media (max-width: 575.98px) {
  .brandbar .brand {
    max-width: 100%;
  }

  .brandbar .brand > div {
    min-width: 0;
  }
}

/* Gallery filters already stack; ensure share CTA buttons full width */
@media (max-width: 575.98px) {
  #share-story .btn {
    width: 100%;
  }
}

/* Common content-page heroes (faq, welcome, etc.) */
@media (max-width: 991.98px) {
  .faq-hero,
  .welcome-hero,
  .page-hero,
  .content-hero {
    padding: 48px 0 !important;
    margin-bottom: 28px !important;
  }

  .faq-hero h1,
  .welcome-hero h1,
  .page-hero h1,
  .content-hero h1 {
    font-size: clamp(1.5rem, 5.5vw, 2.1rem) !important;
  }
}

@media (max-width: 575.98px) {
  .faq-hero,
  .welcome-hero,
  .page-hero,
  .content-hero {
    padding: 36px 0 !important;
  }

  .search-container input,
  .search-container .form-control {
    width: 100% !important;
  }

  .accordion-button {
    font-size: .95rem;
  }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .whatsapp-fab,
  .whatsapp-float {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
  }
}