/* =================================================================
   banner.css — Banner Section Styles
   Production-ready: correct paths, cover, center, no-repeat,
   with overlay, min-height, z-index, accessibility support.
   Path: assets/css/banner.css
   Relative from this file → images are at ../images/banner/
================================================================= */

/* ── Shared banner base (all banner sections inherit this) ── */
.about-area,
.new-area,
.services-area,
.portfolio-area,
.blog-area,
.contact-area {
  position: relative;
  background-color: #1a1a2e;          /* Solid fallback while image loads     */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;      /* scroll = better mobile perf than fixed */
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;                   /* Prevents scrollbar from pseudo-element */
  z-index: 0;
}

/* Dark overlay on every banner for text contrast (Accessibility A11y) */
.about-area::before,
.new-area::before,
.services-area::before,
.portfolio-area::before,
.blog-area::before,
.contact-area::before {
  content: '';
  position: absolute;
  inset: 0;                           /* top:0; right:0; bottom:0; left:0      */
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.40) 100%
  );
  z-index: 1;
}

/* Banner content must sit above the overlay */
.about-area > *,
.new-area > *,
.services-area > *,
.portfolio-area > *,
.blog-area > *,
.contact-area > * {
  position: relative;
  z-index: 2;
}

/* ── Individual banner images ──────────────────────────────── */
/* Paths relative to THIS CSS file location: assets/css/       */
/* → images are at:                          assets/images/banner/ */

.about-area {
  background-image: url('../images/banner/about-us-modern-kitchen-company-saudi.webp');
}

.new-area {
  background-image: url('../images/banner/new-kitchen-trends-saudi-arabia.webp');
}

.services-area {
  background-image: url('../images/banner/kitchen-installation-services-saudi.webp');
}

.portfolio-area {
  background-image: url('../images/banner/kitchen-portfolio-modern-designs.webp');
}

.blog-area {
  background-image: url('../images/banner/kitchen-design-blog-tips.webp');
}

.contact-area {
  background-image: url('../images/banner/contact-us-kitchen-company-saudi.webp');
}

/* ── Banner content typography ─────────────────────────────── */
.banner-title,
.about-area h1,
.about-area h2,
.new-area h1,
.new-area h2,
.services-area h1,
.services-area h2,
.portfolio-area h1,
.portfolio-area h2,
.blog-area h1,
.blog-area h2,
.contact-area h1,
.contact-area h2 {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.banner-subtitle,
.about-area p,
.new-area p,
.services-area p,
.portfolio-area p,
.blog-area p,
.contact-area p {
  color: rgba(255, 255, 255, 0.90);  /* Contrast ratio ≥ 4.5:1 for WCAG AA   */
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ── Breadcrumb inside banners ─────────────────────────────── */
.breadcumb-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}

.breadcumb-menu li {
  color: rgba(255, 255, 255, 0.80);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcumb-menu li::after {
  content: '/';
  opacity: 0.6;
}

.breadcumb-menu li:last-child::after {
  content: none;
}

.breadcumb-menu a {
  color: var(--theme-color, #c59d5f);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcumb-menu a:hover {
  color: #ffffff;
}

/* ── Responsive adjustments ────────────────────────────────── */
@media (max-width: 991px) {
  .about-area,
  .new-area,
  .services-area,
  .portfolio-area,
  .blog-area,
  .contact-area {
    min-height: 360px;
    /* Stop parallax-like fixed bg on mobile (CLS/perf improvement) */
    background-attachment: scroll;
  }
}

@media (max-width: 767px) {
  .about-area,
  .new-area,
  .services-area,
  .portfolio-area,
  .blog-area,
  .contact-area {
    min-height: 280px;
    /* Prefer smaller background-size on mobile to reduce paint area */
    background-size: cover;
  }
}

@media (max-width: 575px) {
  .about-area,
  .new-area,
  .services-area,
  .portfolio-area,
  .blog-area,
  .contact-area {
    min-height: 220px;
  }
}

/* ── Reduced motion: disable any banner parallax or animation ── */
@media (prefers-reduced-motion: reduce) {
  .about-area,
  .new-area,
  .services-area,
  .portfolio-area,
  .blog-area,
  .contact-area {
    background-attachment: scroll !important;
  }
}

/* ── CLS Prevention: explicit aspect-ratio wrapper (optional) ── */
/* Use this class on the inner content wrapper to reserve space   */
.banner-inner {
  width: 100%;
  padding: 80px 0;
}

@media (max-width: 767px) {
  .banner-inner {
    padding: 50px 0;
  }
}