/* ==========================================
   Phesol Klodin - Dynamic Navigation & Mega-Menu
   ========================================== */

/* Base Layout */
.main-navigation .nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 24px;
}

.nav-item {
  position: relative;
}

.nav-link {
  text-decoration: none;
  font-weight: 500;
  color: #F5F2EB; /* Brand Cream */
  padding: 12px 0;
  display: inline-block;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #D4AF37; /* Brand Gold */
}

/* Standard Dropdown */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: rgba(13, 11, 10, 0.95); /* Espresso with slight opacity */
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.3); /* Gold accent border */
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease-in-out;
  padding: 8px 0;
  list-style: none;
  z-index: 100;
}

.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: #C5BCAC; /* Brand Sand */
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s ease;
}

.dropdown-menu a:hover {
  background-color: rgba(45, 40, 37, 0.6); /* Brand Charcoal hover */
  color: #D4AF37; /* Brand Gold */
}

/* Mega-Menu Styling */
.has-megamenu {
  position: static; /* Allows mega-menu panel to span full header width */
}

.megamenu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: rgba(13, 11, 10, 0.95); /* Espresso backdrop */
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3); /* Gold bottom border */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease-in-out;
  padding: 28px;
  z-index: 99;
}

.has-megamenu:hover .megamenu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.megamenu-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #D4AF37; /* Brand Gold Header */
  font-weight: 600;
  margin-bottom: 14px;
}

/* Mega-Menu Thumbnail Items */
.megamenu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #F5F2EB; /* Brand Cream */
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.megamenu-item:hover {
  background-color: rgba(45, 40, 37, 0.5); /* Brand Charcoal hover */
}

.menu-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.3); /* Subtle Gold border */
}

.promo-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.promo-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
/* ==========================================
   HEADER TRANSPARENCY & SCROLL STATES
   ========================================== */

/* 1. Initial Top State (100% Transparent over Hero) */
header#main-header {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* 2. Scrolled State (Solid Brand Espresso #0D0B0A + Gold Border) */
header#main-header.scrolled {
  background-color: #0D0B0A !important;
  border-bottom-color: rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(12px);
}

/* Scroll Fade-In & Slide-Up Animation */
.scroll-fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover Effect for Entire Section */
.scroll-fade-in.visible:hover {
  transform: translateY(-4px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Base hidden state for line-by-line staggered items */
.stagger-line {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed state triggered when scrolled into view */
.scroll-fade-in.visible .stagger-line {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays per line */
.scroll-fade-in.visible .stagger-line:nth-child(1) { transition-delay: 0.1s; }
.scroll-fade-in.visible .stagger-line:nth-child(2) { transition-delay: 0.3s; }
.scroll-fade-in.visible .stagger-line:nth-child(3) { transition-delay: 0.5s; }
.scroll-fade-in.visible .stagger-line:nth-child(4) { transition-delay: 0.7s; }

/* Subtle Section Hover Lift */
#brand-statement {
  transition: transform 0.5s ease;
}
#brand-statement:hover {
  transform: translateY(-3px);
}

/* Base hidden state for line-by-line & item-by-item left slide-in */
.stagger-line {
  opacity: 0;
  transform: translateX(-40px); /* Starts 40px to the left */
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed state when scrolled into view */
.scroll-fade-in.visible .stagger-line {
  opacity: 1;
  transform: translateX(0); /* Slides smoothly to original position */
}

/* Stagger delays per line / card item */
.scroll-fade-in.visible .stagger-line:nth-child(1) { transition-delay: 0.1s; }
.scroll-fade-in.visible .stagger-line:nth-child(2) { transition-delay: 0.25s; }
.scroll-fade-in.visible .stagger-line:nth-child(3) { transition-delay: 0.4s; }
.scroll-fade-in.visible .stagger-line:nth-child(4) { transition-delay: 0.55s; }
.scroll-fade-in.visible .stagger-line:nth-child(5) { transition-delay: 0.7s; }