/*
  EWBS Responsive Overrides
  Purpose: Ensure consistent layout across mobile phones, tablets, laptops, and PCs.
*/

/* Base safety: prevent common overflow caused by fixed-width assets */
img {
  max-width: 100%;
  height: auto;
}

/* Make embedded iframes responsive */
iframe {
  max-width: 100%;
}

/* HERO: reduce harsh fixed minimums on small screens */
@media (max-width: 768px) {
  #fre-hero {
    min-height: 540px;
    height: 92vh;
  }

  /* Hero content should take more width on small screens */
  .fre-inner {
    max-width: 100% !important;
  }

  /* If the hero building image uses clamp widths, make sure it doesn't overflow */
  .fre-building-layer img {
    max-width: 90vw;
  }

  /* Some inline 46%/flex layouts inside sections can be too wide */
  .luxury-home {
    overflow-x: hidden;
  }
}

/* Extra small screens */
@media (max-width: 575px) {
  #fre-hero {
    min-height: 520px;
    height: auto;
  }

  /* Prevent big text from forcing layout overflow */
  h1, h2, h3 {
    overflow-wrap: anywhere;
  }
}

/* Sections that use custom flex wrappers should wrap on tablets/phones */
@media (max-width: 991px) {
  .luxury-home [style*="display:flex"] {
    flex-wrap: wrap !important;
  }
}

/* Reduce fixed image height used in About/Founder block on home page */
@media (max-width: 768px) {
  .luxury-home img[style*="height:"] {
    height: auto !important;
    max-height: 360px !important;
  }
}

/* Footer: ensure columns stack on smaller devices */
@media (max-width: 768px) {
  footer .ewbs-static-footer > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   HEADER / LOGO SAFE-AREA FIX
   Push the header (and logo) down so the mobile browser's
   tab/address bar does not overlap the EWBS Dream Homes logo.
   Applies to ALL pages and ALL viewports.
   ────────────────────────────────────────────────────────────── */
#header_main {
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
}

/* Nudge both desktop and mobile logos lower inside the header */
#header_main #site-logo #logo-header,
#header_main #site-logo #logo-header-mobile {
  transform: translateY(10px) !important;
  transform-origin: center center;
}

/* Stronger nudge on small screens where the browser tab is most intrusive */
@media (max-width: 768px) {
  #header_main {
    padding-top: calc(env(safe-area-inset-top, 0px) + 24px) !important;
  }
  #header_main #site-logo #logo-header-mobile {
    transform: translateY(14px) !important;
  }
  /* Move the hamburger menu button down to align with the lowered logo */
  #header_main .mobile-nav-toggler,
  #header_main .mobile-button {
    transform: translateY(14px) !important;
  }
}

/* Ensure the hero / first section is not hidden behind the taller header */
@media (max-width: 768px) {
  #fre-hero,
  .main-content > section:first-child,
  .page-title,
  .flat-title-page {
    padding-top: 24px;
  }
}

/* Parallax background wrap: avoid overscroll */
.parallax-wrap,
.ewbs-feature-strip {
  overflow-x: hidden;
}