/* ========================================================================
   RESPONSIVE SAFEGUARDS
   Shared finishing layer for every page. Desktop styling remains untouched;
   these rules resolve narrow-screen overflow, touch sizing and reflow.
   ======================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  min-width: 320px;
}

img,
picture,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

video[height],
video.h-full,
img.h-full {
  height: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

textarea {
  resize: vertical;
}

/* An intentionally wide data table scrolls inside its own card, never the page. */
main :is(.overflow-hidden, .overflow-x-auto):has(> table) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

main :is(.overflow-hidden, .overflow-x-auto):has(> table) > table {
  min-width: 540px;
}

/* The blog templates include an older duplicated navigation block. Keep the
   shared header/drawer and suppress only the later duplicate instances. */
body > #mobile-nav ~ #mobile-nav,
body > #main-header ~ #main-header {
  display: none !important;
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 68px;
  }

  body {
    min-width: 0;
    font-size: 16px;
  }

  /* Compact, always-usable header with an accessible quote action. */
  #main-header nav {
    min-height: 64px;
    padding: .625rem 1rem;
    gap: .625rem;
  }

  #main-header nav > a img {
    height: 38px !important;
    max-width: min(44vw, 178px);
  }

  #main-header a[onclick="openInquiryPopup()"] {
    min-height: 42px;
    padding: .625rem .8rem;
    font-size: .75rem;
  }

  #main-header .quote-cta-label {
    display: none;
  }

  #main-header a[onclick="openInquiryPopup()"]::before {
    content: 'Quote';
  }

  #main-header button[onclick="openMobileNav()"] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .mobile-nav {
    width: min(88vw, 360px);
    max-width: 100%;
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior: contain;
  }

  .mobile-link {
    min-height: 48px;
    padding: 13px 18px;
  }

  .mobile-sub-link {
    min-height: 44px;
    padding: 11px 18px 11px 28px;
  }

  /* Typography is fluid instead of desktop-sized on narrow displays. */
  main h1 {
    font-size: clamp(2rem, 8.4vw, 3rem) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere;
  }

  main h2 {
    font-size: clamp(1.55rem, 6.5vw, 2.25rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }

  main h3 {
    font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
    line-height: 1.25 !important;
  }

  main p,
  main li {
    overflow-wrap: break-word;
  }

  /* Page heroes keep clear of the fixed header without wasting the viewport. */
  main > section:first-child,
  body > section:first-of-type {
    padding-top: max(6.5rem, calc(64px + 2.5rem)) !important;
  }

  #hero-3d-cinematic {
    min-height: auto !important;
    padding-top: 5.75rem !important;
    padding-bottom: 2.5rem !important;
  }

  #hero-3d-cinematic .grid {
    min-height: 0 !important;
  }

  #hero-3d-cinematic .hero-veil,
  #hero-3d-cinematic [class*="bg-gradient-to-r"] {
    background-position: left center;
  }

  /* Primary controls remain comfortably tappable and never escape their row. */
  button,
  input[type="submit"],
  input[type="button"],
  a.inline-flex,
  a.flex {
    min-height: 44px;
  }

  .flex-wrap > a,
  .flex-wrap > button {
    max-width: 100%;
  }

  /* Shared modal and form layout. */
  #inquiryPopup {
    align-items: flex-end;
    padding: .75rem;
  }

  #inquiryPopup > .relative {
    width: 100%;
    max-height: calc(100dvh - 1.5rem);
    border-radius: 1.25rem;
  }

  #inquiryPopup .p-6 {
    padding: 1.25rem;
  }

  #inquiryForm .grid.grid-cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  form :is(input, select, textarea) {
    min-height: 44px;
  }

  /* Calculator alloy chips are readable as a two-column group on phones. */
  div:has(> .alloy-btn) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Fixed contact actions avoid the safe-area and have reliable tap targets. */
  a[aria-label="Contact us on WhatsApp"],
  a[aria-label="Call Us"] {
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    width: 48px !important;
    height: 48px !important;
  }

  a[aria-label="Contact us on WhatsApp"] {
    right: 1rem !important;
  }

  a[aria-label="Call Us"] {
    right: 4.75rem !important;
  }

  footer {
    padding-inline: 1.25rem !important;
  }

  footer .grid {
    gap: 1.75rem;
  }

  footer img {
    max-height: 56px;
  }

  /* Expansive decorative elements can cause a one-pixel horizontal scroll. */
  .-left-32,
  .-right-32,
  .-left-24,
  .-right-24,
  .-bottom-24,
  .-top-32 {
    pointer-events: none;
  }
}

/* Keep the hero video running behind the complete hero on phones and tablets.
   `cover` fills the tall hero instead of leaving a blank area below the video. */
@media (max-width: 1023px) {
  #hero-3d-cinematic #hero-bg-layer {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 380px) {
  #main-header nav {
    padding-inline: .75rem;
  }

  #main-header nav > a img {
    height: 34px !important;
    max-width: 39vw;
  }

  #main-header a[onclick="openInquiryPopup()"] {
    padding-inline: .65rem;
  }

  main h1 {
    font-size: clamp(1.8rem, 8.2vw, 2.35rem) !important;
  }

  .grid.grid-cols-2.gap-4,
  .grid.grid-cols-2.gap-5,
  .grid.grid-cols-2.gap-6 {
    gap: .75rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #main-header nav {
    padding-inline: 1.5rem;
  }

  .mobile-nav {
    width: min(62vw, 400px);
  }

  main > section:first-child,
  body > section:first-of-type {
    padding-top: 7.5rem !important;
  }
}

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