/*
 Theme Name:   Aarsun Child
 Theme URI:    https://aarsunwoods.com
 Description:  GeneratePress Child Theme — Pearl Gold Luxury Header for Aarsun Woods
 Author:       Aarsun Woods
 Author URI:   https://aarsunwoods.com
 Template:     generatepress
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  aarsun-child
*/

/* ═══════════════════════════════════════════════════════════════
   PEARL GOLD — LUXURY HEADER STYLES
   Aarsun Woods | GeneratePress Child Theme
═══════════════════════════════════════════════════════════════ */

/* ── Reset GP Header Defaults (footer leave karo) ── */
.site-header .inside-header,
.main-navigation,
.navigation-search { display: none !important; }
.site-header {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ── GP Footer Preserve (bilkul mat chhuo) ── */
.site-footer,
.footer-widgets,
.inside-site-info,
.site-info,
.footer-bar,
.widget,
.footer-widgets-container { display: block !important; visibility: visible !important; }

/* Generate-back-to-top - chaho to rakhna */
.generate-back-to-top { display: block !important; }

/* ── CSS Variables ── */
:root {
  --an-bg:        #8b1a2a;
  --an-color:     rgba(255, 220, 200, 0.9);
  --hdr-bg:       linear-gradient(to right, #fdfaf6, #f8f3ec, #fdfaf6);
  --hdr-border:   #c9a84c;
  --hdr-bw:       2px;
  --hdr-shadow:   0 4px 30px rgba(201,168,76,.12), 0 2px 10px rgba(0,0,0,.06);
  --sf-border:    2px solid #c9a84c;
  --sf-r:         50px;
  --sf-sel-bg:    #faf3e0;
  --sf-sel-c:     #5a3010;
  --sf-sel-br:    #e0c080;
  --sf-inp-bg:    #ffffff;
  --sf-inp-c:     #2a1a00;
  --sf-ph:        rgba(120,90,40,.4);
  --sf-btn:       linear-gradient(135deg, #c9a84c, #e8c86a);
  --sf-btn-c:     #3a1a00;
  --ic-c:         #5a3020;
  --ic-hover:     rgba(201,168,76,.1);
  --cta-bg:       #8b1a2a;
  --cta-c:        #fff;
  --cta-sh:       0 4px 18px rgba(139,26,42,.28);
  --nav-bg:       #8b1a2a;
  --nav-ul:       #c9a84c;
  --nav-c:        rgba(255, 220, 200, .85);
  --nav-hov:      #ffffff;
}

/* ── Announce Strip ── */
#lux-announce {
  background: var(--an-bg);
  color: var(--an-color);
  padding: 8px 20px;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9.5px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  z-index: 1001;
}
#lux-announce::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  animation: lux-shine 5s ease infinite;
}
@keyframes lux-shine { to { left: 200%; } }
#lux-announce a {
  color: #f0d080;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted rgba(240,208,128,.4);
  transition: color .2s;
}
#lux-announce a:hover { color: #fff; }

/* ── Main Header ── */
#lux-header {
  background: var(--hdr-bg) !important;
  border-bottom: var(--hdr-bw) solid var(--hdr-border) !important;
  box-shadow: var(--hdr-shadow) !important;
  display: flex !important;
  align-items: center;
  gap: 20px;
  padding: 12px 36px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  transition: padding .35s, box-shadow .35s;
}
#lux-header.scrolled {
  padding: 7px 36px !important;
  box-shadow: 0 6px 30px rgba(201,168,76,.15) !important;
}
.admin-bar #lux-header { top: 32px !important; }
@media (max-width: 782px) { .admin-bar #lux-header { top: 46px !important; } }

/* Logo */
#lux-logo-wrap { flex-shrink: 0; }
#lux-logo { height: 60px; width: auto; display: block; transition: height .35s; }
#lux-header.scrolled #lux-logo { height: 44px; }

/* ── Search Pill ── */
#lux-search {
  display: flex;
  flex: 1;
  max-width: 700px;
  border: var(--sf-border);
  border-radius: var(--sf-r);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(201,168,76,.08);
  transition: box-shadow .3s;
}
#lux-search:focus-within { box-shadow: 0 4px 20px rgba(201,168,76,.22); }
#lux-search select {
  height: 48px;
  padding: 0 30px 0 16px;  /* right padding for arrow icon */
  border: none; outline: none; cursor: pointer;
  background: var(--sf-sel-bg);
  color: var(--sf-sel-c);
  border-right: 1px solid var(--sf-sel-br);
  border-radius: 50px 0 0 50px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10.5px; letter-spacing: .8px;
  flex-shrink: 0;
  width: 150px;          /* fixed width — prevents auto-expand from long options */
  min-width: 140px;
  max-width: 160px;      /* never wider than this on desktop */
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b5010'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  overflow: hidden;
  text-overflow: ellipsis;  /* clip long text with ... */
}
#lux-search input[type="search"],
#lux-search input[type="text"] {
  flex: 1; height: 48px; border: none;
  min-width: 0;  /* critical: prevents flex overflow on all screen sizes */
  padding: 0 18px; outline: none;
  font-size: 13.5px; font-family: 'Poppins', sans-serif;
  background: var(--sf-inp-bg); color: var(--sf-inp-c);
  -webkit-appearance: none;
}
#lux-search input::placeholder { color: var(--sf-ph); }
#lux-search button[type="submit"] {
  height: 48px; min-width: 56px; border: none; cursor: pointer;
  background: var(--sf-btn); color: var(--sf-btn-c);
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 50px 50px 0; flex-shrink: 0;
  transition: filter .2s, transform .2s; padding: 0 18px;
}
#lux-search button[type="submit"]:hover { filter: brightness(1.08); transform: scale(1.03); }

/* ── Icons ── */
#lux-icons {
  display: flex; align-items: center;
  gap: 2px; flex-shrink: 0; margin-left: auto;
}
.lux-icon-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 7px 11px; border-radius: 6px;
  color: var(--ic-c); font-family: 'Josefin Sans', sans-serif;
  font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
  text-decoration: none; background: none; border: none; cursor: pointer;
  transition: background .2s, transform .15s, color .2s;
  position: relative;
}
.lux-icon-btn:hover {
  background: var(--ic-hover); color: #8b1a2a; transform: translateY(-1px);
}
.lux-icon-btn svg {
  width: 21px; height: 21px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#lux-icons-phone { color: #8b1a2a !important; font-weight: 600; }
#lux-cart-count {
  position: absolute; top: 4px; right: 8px;
  background: #8b1a2a; color: #fff;
  font-size: 8px; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0; font-family: 'Poppins', sans-serif;
}

/* ── CTA ── */
#lux-cta {
  flex-shrink: 0; display: inline-block; padding: 11px 26px;
  background: var(--cta-bg); color: var(--cta-c) !important;
  box-shadow: var(--cta-sh);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; border-radius: 4px; text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  position: relative; overflow: hidden; white-space: nowrap;
}
#lux-cta::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: lux-shine 4s ease infinite;
}
#lux-cta:hover {
  transform: translateY(-2px); box-shadow: 0 7px 25px rgba(139,26,42,.38);
  color: #fff !important;
}

/* ── Mobile Toggle ── */
#lux-mobile-toggle {
  display: none;
  background: none; border: 1.5px solid rgba(139,26,42,.25);
  cursor: pointer; padding: 8px; border-radius: 5px;
  color: #8b1a2a; margin-left: 6px; transition: background .2s;
}
#lux-mobile-toggle:hover { background: rgba(139,26,42,.07); }

/* ── Nav Bar ── */
#lux-nav-wrap {
  background: #8b1a2a !important;
  box-shadow: 0 3px 15px rgba(139,26,42,.2);
  position: relative; z-index: 999;
}
#lux-nav {
  display: flex; align-items: center;
  max-width: 1400px; margin: 0 auto; padding: 0 36px;
  background: transparent;
  overflow: visible;
}

/* ── Nav Top-Level Links ── */
#lux-nav > .lux-nav-item > a,
#lux-nav > a {
  white-space: nowrap;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important;
  padding: 14px 18px !important; display: flex !important; align-items: center; gap: 5px;
  color: rgba(255,220,200,0.9) !important;   /* warm white — always visible on maroon */
  text-decoration: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  transition: color .3s, background-color .3s !important;
  position: relative;
}
#lux-nav > .lux-nav-item > a::after,
#lux-nav > a::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; background: #c9a84c;
  border-radius: 2px 2px 0 0; transition: width .3s ease;
  box-shadow: 0 0 8px rgba(201,168,76,.55);
}

/* ── Nav Hover / Active State ── */
#lux-nav > .lux-nav-item:hover > a,
#lux-nav > .lux-nav-item:focus-within > a,
#lux-nav > .lux-nav-item > a:hover,
#lux-nav > .lux-nav-item > a:focus,
#lux-nav > .lux-nav-item > a.current-menu-item {
  color: #f0d080 !important;                 /* gold text — clearly visible */
  background-color: rgba(0,0,0,0.18) !important; /* slight dark tint, NOT white */
  background-image: none !important;
}
#lux-nav > .lux-nav-item:hover > a::after,
#lux-nav > .lux-nav-item > a.current-menu-item::after { width: 65%; }

.nav-icon { font-size: 13px; opacity: .65; }
.nav-badge {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 7.5px; letter-spacing: 1.5px; text-transform: uppercase;
  background: #c9a84c; color: #3a1a00;
  padding: 2px 6px; border-radius: 20px;
  font-weight: 700; margin-left: 4px; vertical-align: middle;
}
.lux-arrow {
  font-size: 9px; opacity: .6; margin-left: 2px;
  transition: transform .2s;
}

/* ═══ DROPDOWN SUBMENU ═══ */
.lux-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.lux-nav-item:hover .lux-arrow { transform: rotate(180deg); }

/* Dropdown panel */
.lux-nav-item:hover .lux-sub-menu,
.lux-nav-item:focus-within .lux-sub-menu { 
  display: block; 
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.lux-sub-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%; left: 0;
  min-width: 280px; /* Thoda wide for long category names */
  background: #ffffff;
  border-top: 3px solid #c9a84c;
  border-bottom: 3px solid #c9a84c; /* matching bottom border for luxury look */
  border-radius: 0 0 10px 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  z-index: 2000;
  padding: 10px 0;
  margin: 0;
  list-style: none !important; /* Force remove bullets */
  transform: translateY(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.lux-sub-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.lux-nav-item:hover .lux-sub-menu {
  pointer-events: auto;
}

.lux-sub-menu a {
  display: block !important;
  padding: 12px 24px !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 11.5px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #5a2a0a !important;          /* dark brown — clearly readable on white BG */
  text-decoration: none !important;
  border-bottom: 1px solid rgba(201,168,76,0.15) !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  position: relative !important;
  line-height: 1.4 !important;
  background-color: #ffffff !important;  /* White dropdown bg */
  background-image: none !important;
}
.lux-sub-menu a::after { display: none !important; }

.lux-sub-menu a:hover {
  background-color: #fdf6e8 !important;  /* cream tint on hover */
  background-image: none !important;
  color: #8b1a2a !important;             /* maroon text on hover */
  padding-left: 30px !important;
}
.lux-sub-menu a::before {
  content: '→';
  position: absolute;
  left: 10px;
  opacity: 0;
  transition: all 0.25s ease;
  color: #c9a84c;
}
.lux-sub-menu a:hover::before {
  opacity: 1;
  left: 14px;
}
.lux-sub-menu a.current-menu-item {
  color: #8b1a2a;
  font-weight: 700;
  background: rgba(139,26,42,.04);
}
.lux-sub-menu a:last-child { border-bottom: none; }

/* ── Mobile Drawer ── */
#lux-mobile-nav {
  position: fixed !important;   /* NEVER let parent override this */
  top: 0 !important;
  left: -100% !important;
  width: 85% !important;
  max-width: 320px !important;
  height: 100% !important;
  min-height: 100vh !important;
  background: linear-gradient(160deg, #fdfaf6, #f8f3ec) !important;
  z-index: 999999 !important;
  transition: left .35s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 4px 0 30px rgba(0,0,0,0.12) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  display: block !important;    /* Never let any rule set display:none on the container */
}
#lux-mobile-nav.open {
  left: 0 !important;
}
#lux-mobile-nav-inner { padding: 0 0 120px 0; }
#lux-mobile-close {
  background: #fdfaf6 !important; border: none; cursor: pointer;
  font-size: 28px; color: #8b1a2a;
  padding: 15px 20px; display: block !important; margin-left: auto; line-height: 1;
  position: sticky !important; top: 0 !important; z-index: 100;
  border-bottom: 1px solid rgba(201,168,76,.1);
  width: 100%; text-align: right; box-sizing: border-box;
}
#lux-mobile-nav ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#lux-mobile-nav ul li { border-bottom: 1px solid rgba(201,168,76,.15); }
#lux-mobile-nav ul li a {
  display: block !important; padding: 13px 24px !important;
  font-family: 'Cinzel', serif !important; font-size: 12px !important;
  letter-spacing: 2px; text-transform: uppercase;
  color: #5a3020 !important; text-decoration: none !important;
  background-color: transparent !important;
  background-image: none !important;
  transition: background .2s, color .2s;
}
#lux-mobile-nav ul li a:hover {
  background-color: rgba(201,168,76,.1) !important;
  background-image: none !important;
  color: #8b1a2a !important;
}
#lux-mobile-nav ul li.current-menu-item > a { color: #8b1a2a !important; font-weight: 700; }

/* Mobile Submenus */
#lux-mobile-nav .sub-menu {
  display: none;
  background: rgba(201,168,76,0.05);
  padding-left: 15px;
  list-style: none;
}
#lux-mobile-nav li.open > .sub-menu {
  display: block;
}
#lux-mobile-nav .menu-item-has-children > a {
  position: relative;
  padding-right: 40px;
}
#lux-mobile-nav .menu-item-has-children > a::after {
  content: '▼';
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0.5;
  transition: transform 0.3s;
}
#lux-mobile-nav li.open > a::after {
  transform: translateY(-50%) rotate(180deg);
}
.lux-mobile-contact {
  padding: 24px; border-top: 1px solid rgba(201,168,76,.2);
  margin-top: 10px; display: flex; flex-direction: column; gap: 12px;
}
.lux-mobile-contact a {
  font-family: 'Josefin Sans', sans-serif; font-size: 11px;
  letter-spacing: 1px; color: #5a3020; text-decoration: none;
  display: flex; align-items: center; gap: 8px; transition: color .2s;
}
.lux-mobile-contact a:hover { color: #8b1a2a; }
#lux-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: rgba(0,0,0,.55) !important;
  z-index: 99999 !important;
  cursor: pointer;
}
#lux-overlay.open { display: block !important; }

/* ── Global Fix for Horizontal Overflow ── */
html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  #lux-header { padding: 10px 24px !important; gap: 16px; }
  #lux-search { max-width: 460px; }
  #lux-icons-wish { display: none; }
}
@media (max-width: 900px) {
  #lux-search { max-width: 360px; }
  #lux-icons-acct,
  #lux-icons-wish { display: none; }
}
@media (max-width: 768px) {
  #lux-header { flex-wrap: wrap; padding: 10px 16px !important; gap: 10px; }
  #lux-logo { height: 50px; }
  #lux-logo-wrap { flex: 1; }

  /* ── Search: full width, fixed narrow select, input takes all remaining space ── */
  #lux-search {
    order: 3;
    width: 100% !important;
    max-width: 100% !important;
    flex: none;
    display: flex !important;
    overflow: hidden;
  }
  #lux-search select {
    width: 28% !important;
    min-width: 0 !important;
    max-width: 100px !important;
    flex-shrink: 0 !important;
    font-size: 9px !important;
    padding: 0 20px 0 8px !important;
    letter-spacing: 0 !important;
  }
  #lux-search input[type="search"],
  #lux-search input[type="text"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;  /* critical: stops flex overflow */
    width: auto !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    display: block !important;
  }
  #lux-search button[type="submit"] {
    display: flex !important;  /* ALWAYS show the search button */
    flex-shrink: 0 !important;
    min-width: 44px !important;
    width: 44px !important;
    padding: 0 12px !important;
  }

  #lux-icons-acct,
  #lux-icons-wish { display: none; }
  #lux-icons .lux-icon-btn span:not(#lux-cart-count) { display: none; }
  #lux-cta { display: none; }
  #lux-mobile-toggle { display: flex; align-items: center; }
  #lux-nav { display: none; }
  #lux-nav-wrap { box-shadow: none; }
  #lux-announce { font-size: 8.5px; letter-spacing: 1.5px; padding: 7px 10px; white-space: nowrap; }
}
@media (max-width: 480px) {
  /* On very small phones: hide select, give full width to input */
  #lux-search select {
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-right: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #lux-search input[type="search"],
  #lux-search input[type="text"] {
    font-size: 14px !important;
    padding: 0 14px !important;
  }
  #lux-search button[type="submit"] {
    min-width: 50px !important;
    width: 50px !important;
  }
}