/*
  Dhidib Tech - Responsive Stability Patch
  Purpose: Prevent horizontal overflow, broken hero text, oversized buttons,
  unstable sliders, and layout clipping across phones/tablets/desktops.

  Load this stylesheet AFTER your existing main/theme CSS.
*/

:root {
  --dt-page-max: 1440px;
  --dt-gutter: clamp(14px, 3vw, 32px);
  --dt-radius: 22px;
}

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

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
}

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

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

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

/* Stop long text/URLs from forcing page wider */
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
li,
div {
  overflow-wrap: anywhere;
}

/* Generic content wrappers */
.container,
.site-container,
.page-container,
.main-container,
.wrapper,
.content-wrapper,
.header-inner,
.nav-inner {
  width: min(100%, var(--dt-page-max));
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--dt-gutter);
}

/* ---------- Header / navigation ---------- */
header,
.site-header,
.main-header,
.navbar,
.navigation {
  max-width: 100%;
}

.site-header,
.main-header,
.navbar {
  position: relative;
  z-index: 50;
}

.header-inner,
.navbar .container,
.nav-inner {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
}

.logo,
.site-logo,
.navbar-brand {
  flex: 0 1 auto;
  min-width: 0;
}

.logo img,
.site-logo img,
.navbar-brand img {
  max-width: clamp(120px, 22vw, 230px);
  height: auto;
}

/* CTA such as "LIST YOUR PROPERTY" */
.list-property,
.list-your-property,
.property-button,
.header-cta,
.nav-cta,
a[href*="list-property"],
a[href*="list_your_property"] {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
}

/* Desktop nav */
nav ul,
.navbar-nav,
.main-menu {
  min-width: 0;
}

/* ---------- Hero / slider ---------- */
.hero,
.hero-section,
.hero-slider,
.home-slider,
.banner,
.banner-slider,
.swiper,
.swiper-container,
.slick-slider,
.carousel,
.owl-carousel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.hero-slide,
.slide,
.swiper-slide,
.slick-slide,
.carousel-item,
.owl-item {
  min-width: 0;
  max-width: 100%;
}

/* Hero images: stable crop on every viewport */
.hero img,
.hero-section img,
.hero-slider img,
.home-slider img,
.banner img,
.banner-slider img,
.carousel-item img,
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Supports hero sections that use background-image */
.hero,
.hero-section,
.hero-slide,
.banner,
.banner-slide {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Responsive hero height */
.hero,
.hero-section,
.hero-slider,
.home-slider,
.banner,
.banner-slider {
  min-height: clamp(440px, 66vw, 760px);
}

/* Text overlay must stay inside viewport */
.hero-content,
.hero-text,
.slide-content,
.slider-content,
.banner-content,
.caption,
.carousel-caption {
  width: min(680px, calc(100% - (var(--dt-gutter) * 2)));
  max-width: 100%;
  left: var(--dt-gutter);
  right: auto;
  padding: clamp(16px, 3vw, 34px);
}

/* Fluid hero typography */
.hero h1,
.hero-content h1,
.hero-text h1,
.slide-content h1,
.slider-content h1,
.banner-content h1,
.carousel-caption h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 6.4vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.hero h2,
.hero-content h2,
.hero-text h2,
.slide-content h2,
.slider-content h2 {
  font-size: clamp(1.25rem, 4.5vw, 2.5rem);
  line-height: 1.08;
}

.hero p,
.hero-content p,
.hero-text p,
.slide-content p,
.slider-content p,
.banner-content p,
.carousel-caption p {
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  line-height: 1.4;
  max-width: 40rem;
}

/* Search / action buttons */
.hero .btn,
.hero button,
.hero a.button,
.hero-content .btn,
.hero-content button,
.hero-content a,
.slide-content .btn,
.banner-content .btn,
.search-venues,
.search-button {
  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  padding: 14px clamp(20px, 4vw, 34px);
  white-space: normal;
  text-align: center;
}

/* Slider arrows */
.swiper-button-next,
.swiper-button-prev,
.slick-next,
.slick-prev,
.carousel-control-next,
.carousel-control-prev,
.owl-next,
.owl-prev,
.slider-next,
.slider-prev {
  max-width: 52px;
  max-height: 52px;
}

/* Slider dots stay visible */
.swiper-pagination,
.slick-dots,
.carousel-indicators,
.owl-dots,
.slider-dots {
  max-width: calc(100% - 24px);
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Cards / grids ---------- */
.row,
.grid,
.cards,
.venue-grid,
.hotel-grid,
.event-grid,
.property-grid {
  min-width: 0;
}

.card,
.venue-card,
.hotel-card,
.event-card,
.property-card {
  min-width: 0;
  max-width: 100%;
}

/* ---------- Forms ---------- */
form,
.form-row,
.booking-form,
.search-form {
  max-width: 100%;
}

.form-row,
.booking-form .row,
.search-form .row {
  gap: 12px;
}

input,
select,
textarea {
  width: 100%;
}

/* ---------- Footer ---------- */
footer,
.site-footer {
  max-width: 100%;
  overflow: hidden;
}

/* ---------- Tablets ---------- */
@media (max-width: 991.98px) {
  .header-inner,
  .navbar .container,
  .nav-inner {
    flex-wrap: wrap;
  }

  nav,
  .main-nav,
  .navbar-collapse,
  .menu-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .hero,
  .hero-section,
  .hero-slider,
  .home-slider,
  .banner,
  .banner-slider {
    min-height: clamp(500px, 78vw, 680px);
  }

  .hero-content,
  .hero-text,
  .slide-content,
  .slider-content,
  .banner-content,
  .caption,
  .carousel-caption {
    width: min(620px, calc(100% - 32px));
    left: 16px;
    right: 16px;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 767.98px) {
  :root {
    --dt-gutter: 16px;
    --dt-radius: 18px;
  }

  /* Header becomes two clean rows instead of squeezing */
  .header-inner,
  .navbar .container,
  .nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-block: 10px;
  }

  .logo,
  .site-logo,
  .navbar-brand {
    min-width: 0;
  }

  .logo img,
  .site-logo img,
  .navbar-brand img {
    width: auto;
    max-width: min(180px, 46vw);
  }

  .list-property,
  .list-your-property,
  .property-button,
  .header-cta,
  .nav-cta,
  a[href*="list-property"],
  a[href*="list_your_property"] {
    justify-self: end;
    font-size: clamp(.78rem, 3vw, .95rem);
    line-height: 1.1;
    padding: 11px 14px !important;
    border-radius: 14px;
  }

  nav,
  .main-nav,
  .navbar-collapse,
  .menu-wrapper {
    grid-column: 1 / -1;
  }

  nav ul,
  .navbar-nav,
  .main-menu {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* Hero occupies viewport safely without horizontal crop */
  .hero,
  .hero-section,
  .hero-slider,
  .home-slider,
  .banner,
  .banner-slider {
    min-height: 560px;
    height: min(72vh, 680px);
    max-height: 760px;
    border-radius: 0 0 var(--dt-radius) var(--dt-radius);
  }

  .hero-content,
  .hero-text,
  .slide-content,
  .slider-content,
  .banner-content,
  .caption,
  .carousel-caption {
    width: calc(100% - 32px);
    max-width: 520px;
    left: 16px !important;
    right: 16px !important;
    top: 50%;
    transform: translateY(-50%);
    padding: 18px 4px;
  }

  .hero h1,
  .hero-content h1,
  .hero-text h1,
  .slide-content h1,
  .slider-content h1,
  .banner-content h1,
  .carousel-caption h1 {
    font-size: clamp(2.4rem, 11vw, 4rem);
    line-height: .98;
    max-width: 10ch;
  }

  .hero p,
  .hero-content p,
  .hero-text p,
  .slide-content p,
  .slider-content p,
  .banner-content p,
  .carousel-caption p {
    font-size: clamp(.98rem, 4vw, 1.15rem);
    line-height: 1.35;
    max-width: 30ch;
  }

  .hero .btn,
  .hero button,
  .hero a.button,
  .hero-content .btn,
  .slide-content .btn,
  .banner-content .btn,
  .search-venues,
  .search-button {
    width: min(100%, 330px);
    min-height: 52px;
    padding: 14px 20px;
    font-size: 1rem;
  }

  /* Smaller touch-safe arrows */
  .swiper-button-next,
  .swiper-button-prev,
  .slick-next,
  .slick-prev,
  .carousel-control-next,
  .carousel-control-prev,
  .owl-next,
  .owl-prev,
  .slider-next,
  .slider-prev {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
  }

  /* Common desktop grids become one column */
  .grid,
  .cards,
  .venue-grid,
  .hotel-grid,
  .event-grid,
  .property-grid {
    grid-template-columns: 1fr !important;
  }

  .row > [class*="col-"] {
    min-width: 0;
  }

  /* Avoid iOS zoom on form focus */
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 430px) {
  .header-inner,
  .navbar .container,
  .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .logo img,
  .site-logo img,
  .navbar-brand img {
    max-width: 42vw;
  }

  .list-property,
  .list-your-property,
  .property-button,
  .header-cta,
  .nav-cta,
  a[href*="list-property"],
  a[href*="list_your_property"] {
    max-width: 48vw;
    font-size: .74rem;
    padding: 10px 11px !important;
  }

  .hero,
  .hero-section,
  .hero-slider,
  .home-slider,
  .banner,
  .banner-slider {
    min-height: 530px;
    height: 70vh;
  }

  .hero h1,
  .hero-content h1,
  .hero-text h1,
  .slide-content h1,
  .slider-content h1,
  .banner-content h1,
  .carousel-caption h1 {
    font-size: clamp(2.15rem, 10.8vw, 3.4rem);
  }
}

/* ---------- Very narrow devices ---------- */
@media (max-width: 360px) {
  .list-property,
  .list-your-property,
  .property-button,
  .header-cta,
  .nav-cta,
  a[href*="list-property"],
  a[href*="list_your_property"] {
    font-size: .68rem;
    padding-inline: 9px !important;
  }

  .hero-content,
  .hero-text,
  .slide-content,
  .slider-content,
  .banner-content,
  .caption,
  .carousel-caption {
    width: calc(100% - 24px);
    left: 12px !important;
    right: 12px !important;
  }
}

/* ---------- Landscape phones ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero,
  .hero-section,
  .hero-slider,
  .home-slider,
  .banner,
  .banner-slider {
    min-height: 430px;
    height: auto;
  }

  .hero-content,
  .hero-text,
  .slide-content,
  .slider-content,
  .banner-content,
  .caption,
  .carousel-caption {
    top: auto;
    bottom: 28px;
    transform: none;
  }
}

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