/* Flexible Hero Layout Styles */

/* =========================================
   FULLSCREEN OVERLAY HERO (ADNOC Style)
   ========================================= */
.hero-fullscreen-overlay {
  position: relative;
  overflow: hidden;
}

/* Carousel must fill the container */
.hero-fullscreen-overlay .carousel,
.hero-fullscreen-overlay .carousel-inner,
.hero-fullscreen-overlay .carousel-item {
  height: 100%;
}

/* --- Smooth crossfade transition between slides --- */
.hero-fullscreen-overlay .carousel-item {
  transition: opacity 1s ease-in-out !important;
}

/* --- Ken Burns: slow zoom on the active slide's background --- */
@keyframes fsoKenBurns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

/* The zoom target class wraps each slide's bg image/video */
.hero-fullscreen-overlay .carousel-item .fso-bg-media {
  transform-origin: center center;
  will-change: transform;
}

/* Only animate the ACTIVE slide */
.hero-fullscreen-overlay .carousel-item.active .fso-bg-media {
  animation: fsoKenBurns var(--fso-interval, 5s) ease-out forwards;
}

/* Reset when not active (so it starts fresh next time) */
.hero-fullscreen-overlay .carousel-item:not(.active) .fso-bg-media {
  animation: none;
  transform: scale(1);
}

/* Hero CTA button — uses theme primary color when no per-slide color is set */
.hero-fso-btn {
  background-color: var(--button-primary-bg, var(--accent-color));
  color: var(--button-primary-text, var(--contrast-color));
}

/* Animated button hover effect */
.hero-fso-btn:hover {
  opacity: 0.88 !important;
  transform: translateY(-2px);
  text-decoration: none;
}

/* =====================================================
   Header: transparent overlay ONLY when fullscreen-
   overlay hero is active. Uses CSS :has() so it works
   on first paint — no JavaScript needed.
   ===================================================== */

/* Hide the top info-bar so nothing sits above the hero */
body:has(.hero-fullscreen-overlay) .top-info-bar {
  display: none !important;
}

/* Make the header fixed + transparent, sitting ON TOP of the hero */
body:has(.hero-fullscreen-overlay) #header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  --background-color: transparent;
  border: none !important;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* When scrolled, override transparent with the dark color */
body:has(.hero-fullscreen-overlay) #header.header-scrolled,
body.scrolled:has(.hero-fullscreen-overlay) #header {
  background: var(--dark-color, #1a1a1a) !important;
  background-color: var(--dark-color, #1a1a1a) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Pull the hero section up so it starts at the very top of the viewport,
   underneath the now-fixed header. */
body:has(.hero-fullscreen-overlay) .main > .cms-home-section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has(.hero-fullscreen-overlay) .hero-fullscreen-overlay {
  margin-top: 0 !important;
}

/* All nav text, site name, icons → white for dark hero backgrounds
   (desktop only — mobile nav panel has its own white background) */
body:has(.hero-fullscreen-overlay) #header .sitename,
body:has(.hero-fullscreen-hero) #header .logo h1 {
  color: #ffffff !important;
}

/* Desktop: top-level nav links white */
@media (min-width: 1200px) {
  body:has(.hero-fullscreen-overlay) #header,
  body:has(.hero-fullscreen-overlay) #header .navmenu > ul > li > a,
  body:has(.hero-fullscreen-overlay) #header .navmenu > ul > li > a i,
  body:has(.hero-fullscreen-overlay) #header .navmenu .dropdown > a::after,
  body:has(.hero-fullscreen-overlay) #header .sitename,
  body:has(.hero-fullscreen-overlay) #header .logo h1 {
    color: #ffffff !important;
  }

  /* Active nav item — slightly dimmed white */
  body:has(.hero-fullscreen-overlay) #header .navmenu > ul > li > a:hover,
  body:has(.hero-fullscreen-overlay) #header .navmenu > ul > li.active > a {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  /* Dropdown submenu items keep their normal dark color on white background */
  body:has(.hero-fullscreen-overlay) #header .navmenu .dropdown ul a {
    color: var(--nav-dropdown-color, #2d3436) !important;
  }

  body:has(.hero-fullscreen-overlay) #header .navmenu .dropdown ul a:hover,
  body:has(.hero-fullscreen-overlay) #header .navmenu .dropdown ul .active > a {
    color: var(--accent-color, #5fcf80) !important;
  }
}

/* Mobile: nav panel has white background — keep all text dark */
@media (max-width: 1199px) {
  body:has(.hero-fullscreen-overlay) #header .navmenu ul {
    background-color: #ffffff !important;
  }

  body:has(.hero-fullscreen-overlay) #header .navmenu a,
  body:has(.hero-fullscreen-overlay) #header .navmenu a:focus {
    color: var(--nav-dropdown-color, #2d3436) !important;
  }

  body:has(.hero-fullscreen-overlay) #header .navmenu a:hover,
  body:has(.hero-fullscreen-overlay) #header .navmenu .active > a {
    color: var(--accent-color) !important;
  }
}

/* CTA button stays its accent color — no override */

/* Mobile hamburger icon always white (shows against hero image) */
body:has(.hero-fullscreen-overlay) #header .mobile-nav-toggle {
  color: #ffffff !important;
}

/* ---- Centered header layout + hero overlay: subtle border ---- */
body:has(.hero-fullscreen-overlay) #header.header-centered-layout .header-inner .logo {
  border-top-color: rgba(255,255,255,0.15);
}

/* ---- Scrolled state: frosted dark glass ---- */
body:has(.hero-fullscreen-overlay).scrolled #header {
  background-color: var(--dark-color, #1a1a1a) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Keep top-level nav links white even after scroll (dark bg) */
body:has(.hero-fullscreen-overlay).scrolled #header .navmenu > ul > li > a,
body:has(.hero-fullscreen-overlay).scrolled #header .sitename,
body:has(.hero-fullscreen-overlay).scrolled #header .logo h1 {
  color: #ffffff !important;
}

/* ---- Mobile responsive text ---- */
@media (max-width: 768px) {
  .hero-fso-content {
    padding: 0 24px 40px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 480px) {
  .hero-fso-content {
    padding: 0 16px 32px !important;
  }
}

/* Hero Multi-Media Layout */
.hero-multi-media {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}

.hero-media-column {
  display: flex;
  flex-direction: column;
}

.hero-media-item {
  flex: 1;
  height: 400px;
  background: #f8f9fa;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Ensure all media containers fill the item */
.hero-media-item > div,
.hero-media-item .media-maps-content,
.hero-media-item .media-video-content,
.hero-media-item .media-image-content {
  width: 100%;
  height: 100%;
}

/* Ensure images and iframes fill the container */
.hero-media-item img,
.hero-media-item video,
.hero-media-item iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Single Image Layout */
.hero-single-image {
  position: relative;
  width: 100%;
}

.hero-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 15px 30px;
  border-radius: 8px;
}

/* Media Type Specific Styles */
.media-text-content {
  padding: 20px;
}

.media-text-content h2 {
  font-size: 2rem;
  margin-bottom: 15px;
  color: var(--accent-color);
}

.media-text-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.media-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.media-image-content,
.media-video-content,
.media-audio-content {
  width: 100%;
}

.media-caption {
  text-align: center;
  margin-top: 10px;
  font-style: italic;
  color: #666;
}

.media-embed-content {
  width: 100%;
}

.media-animation-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lottie-container {
  width: 100%;
  max-width: 500px;
}

.media-document-content {
  padding: 40px 20px;
}

.media-3d-content {
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  border-radius: 8px;
}

.model-viewer-container {
  width: 100%;
  height: 400px;
}

.media-data-content iframe {
  border: 1px solid #ddd;
  border-radius: 8px;
}

.media-maps-content {
  width: 100%;
}

.media-maps-content iframe {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.media-embed-error,
.media-unsupported {
  padding: 20px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  border-radius: 8px;
  text-align: center;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .hero-multi-media .hero-media-column,
  .hero-two-media > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  .media-text-content h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .hero-multi-media {
    gap: 15px;
  }
  
  .media-text-content {
    padding: 15px;
  }
  
  .media-buttons {
    flex-direction: column;
  }
  
  .media-buttons .btn {
    width: 100%;
  }
}

/* Full Width Slider Specific */
#fullWidthHeroCarousel .carousel-item {
  height: 60vh;
  min-height: 400px;
}

#fullWidthHeroCarousel .carousel-item img,
#fullWidthHeroCarousel .carousel-item video {
  height: 100%;
  object-fit: cover;
}

#fullWidthHeroCarousel .ratio {
  height: 100%;
}

#fullWidthHeroCarousel .carousel-control-prev,
#fullWidthHeroCarousel .carousel-control-next {
  width: 5%;
}

/* Two Media Layout */
.hero-two-media {
  display: flex;
  gap: 20px;
}

.hero-two-media .hero-media-item {
  min-height: 400px;
}

/* Animation Styles */
.media-animation-content img {
  max-width: 100%;
  height: auto;
}

/* 3D Model Placeholder */
.media-3d-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 1.2rem;
  border-radius: 8px;
  min-height: 300px;
}