/* ============================================================
   AuraGild — Elegant dark dropdown category navigation
   tw.fanchancheng.shop  (enqueued in jeweller-store)
   Desktop hover + mobile tap; near-black dropdown, gold accents
   ============================================================ */

/* ---- Gold brand accent (keep theme gold) ---- */
:root {
  --aura-gold: #b2905f;      /* AuraGild gold */
  --aura-gold-light: #d4bc8a;
  --aura-ink:   #0d0c0b;     /* near-black dropdown */
  --aura-ink-2: #171512;     /* slightly lifted panel */
}

/* === Top category links (first level) === */
header#site-navigation .main-navigation .menu > li.menu-item-has-children > a::before,
header#site-navigation .main-navigation .menu-item-has-children > a::before{content:"";}

/* 压缩一级项之间的大间隔 (主题默认 gap 5px 40px → 收窄) */
.top-menu-wrapper ul,
#site-navigation .main-navigation .navbar-nav,
#site-navigation .main-navigation .menu,
#site-navigation .main-navigation .menu ul {
  gap: 0 22px !important;
}
#site-navigation .main-navigation .menu > li {
  margin: 0;
}
header#site-navigation .main-navigation .menu > li > a {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  padding: 6px 0;
  color: var(--second-color);           /* charcoal, readable on light header */
  transition: color .2s ease;
}
header#site-navigation .main-navigation .menu > li.menu-item-has-children > a {
  position: relative;
  padding-right: 16px;   /* room for the dropdown chevron */
}
/* bold, noticeable "this opens a dropdown" chevron on desktop top-level items */
header#site-navigation .main-navigation .menu > li.menu-item-has-children > a::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  margin-top: -5px;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);   /* pointing down */
  opacity:.85;
  transition: transform .22s ease;
}
header#site-navigation .main-navigation .menu > li.menu-item-has-children:hover > a::after {
  transform: rotate(-135deg);   /* flip up when dropdown is open */
  color: var(--first-color);    /* gold accent when open */
}
/* parent item becomes subtly "interactive" hint */
header#site-navigation .main-navigation .menu > li.has-children > a:hover { color: var(--first-color); }

/* ================= AuraGild desktop dropdown ================= */

/* === The dropdown panel (sub-menu) — luxury near-black === */
#site-navigation .main-navigation ul.sub-menu,
#site-navigation .main-navigation ul.children {
  background: var(--aura-ink);
  border: 1px solid rgba(178,144,95,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  border-radius: 2px;
  min-width: 230px;                       /* auto-fit content, one item per line */
  width: auto !important;
  padding: 10px 0;
}
/* one sub-item per row, each on its own line */
#site-navigation .main-navigation ul.sub-menu > li,
#site-navigation .main-navigation .children > li {
  display: block;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
/* sub links — white text on dark */
#site-navigation .main-navigation ul.sub-menu > li > a {
  color: #f2efe9;
  background: transparent;
  padding: 11px 26px !important;
  font-size: 13px;
  letter-spacing: .02em;
  font-weight: 400;
}
/* hover / focus — subtle gold-blend highlight on dark */
#site-navigation .main-navigation ul.sub-menu > li > a:hover,
#site-navigation .main-navigation ul.sub-menu > li > a:focus-visible {
  background: rgba(178,144,95,.14);
  color: var(--aura-gold-light);
  padding-left: 32px;                     /* subtle shift = high-end feel */
}
/* current sub item */
#site-navigation .main-navigation ul.sub-menu > li.current-menu-item > a {
  color: var(--aura-gold-light);
}
/* small gold rule under top on open is optional */
#site-navigation .main-navigation .menu-item-has-children:hover > a {
  color: var(--aura-gold);                /* gold top on hover */
}

/* Clear the theme's default wipe ::before that makes hover black bg flash */
#site-navigation .main-navigation ul.sub-menu > li > a::before { background: transparent; }

/* Remove theme underline/arrow artifacts */
#site-navigation .main-navigation .sub-menu a:after { content: none !important; }

/* ===== Mobile (tap to expand) ===== —
   The theme's sidenav already handles mobile drawer; ensure sub-items readable on dark drawer if present. */
@media (prefers-reduced-motion: reduce){}

/* ===== Right ☰ off-canvas drawer (Shop by Category) ===== */
.aura-offcanvas-nav .aura-off-canvas-title {
  font-size: 15px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: var(--first-color);
  margin: 6px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(178,144,95,.25);
}
.aura-ofc-menu{
  list-style:none; margin:0; padding:0;
}
.aura-ofc-menu > li{
  border-bottom:1px solid rgba(0,0,0,.06);
}
.aura-ofc-menu > li > a{
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 2px; color:var(--second-color); font-weight:500;
  text-transform:uppercase; font-size:12.5px; letter-spacing:.06em;
  text-decoration:none;
}
.aura-ofc-menu > li > a:hover{ color: var(--first-color); }
.aura-ofc-menu .sub-menu{
  list-style:none; margin:0 0 10px; padding:0 0 0 14px;
}
.aura-ofc-menu .sub-menu a{
  display:block; padding:7px 2px; color:#5a554e; font-size:13px; text-decoration:none;
}
.aura-ofc-menu .sub-menu a:hover{ color:var(--first-color); }
.offcanvas-end{ width: min(330px, 84vw); }

/* ===== Refined right off-canvas drawer (#demo) — HIGH-CONTRAST, readable =====
   (mobile-friendly: light background, bold dark text, crisp separators) */
.offcanvas#demo,
.offcanvas.offcanvas-end#demo{
  background: #ffffff;
  border-left: 1px solid rgba(0,0,0,.08);
  color: #1a1a1a;
  box-shadow: -10px 0 30px rgba(0,0,0,.10);
}
.offcanvas#demo .btn-close{ opacity:.8; }
.offcanvas#demo .offcanvas-header{ border-bottom:1px solid #eeeeee; }

/* Title */
.offcanvas#demo .aura-off-canvas-title{
  color:#1a1a1a;
  border-bottom: none;
  margin: 4px 0 6px;
  font-size: 12px;
  letter-spacing:.16em;
}
/* Top-level categories: big & bold */
.offcanvas#demo .aura-ofc-menu > li > a{
  color:#111111;
  font-size: 16px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:15px 3px;
  background: #ffffff;
}
.offcanvas#demo .aura-ofc-menu > li{
  border-bottom:1px solid #ebebeb;
}
/* sub items indented, slightly smaller but still legible */
.offcanvas#demo .aura-ofc-menu .sub-menu a{
  color:#333;
  font-size:15px;
  font-weight:500;
  padding:9px 3px;
}
.offcanvas#demo .aura-ofc-menu .sub-menu{
  background:#f7f5f0;
  padding:4px 0 8px 16px;
}
.offcanvas#demo .aura-ofc-menu > li > a:hover,
.offcanvas#demo .aura-ofc-menu .sub-menu a:hover{
  color:#9a7210;                 /* gold, readable */
}
/* separators clearer */
.offcanvas#demo .aura-ofc-menu .sub-menu a{
  border-top:1px dashed rgba(0,0,0,.06);
}
.offcanvas#demo .aura-ofc-menu .sub-menu li:first-child a{ border-top:none; }

/* ======================== GLOBAL TRIGGER SWITCH ======================== */
/* -------- Mobile drawer accordion: submenu closed by default, tap to expand -------- */
.offcanvas#demo .aura-ofc-menu > li.menu-item-has-children{
  position:relative;
  display:block;
}
.offcanvas#demo .aura-ofc-menu > li.menu-item-has-children > a{
  display:flex; align-items:center; justify-content:space-between;
}
/* __visible "this dropdown can expand" chevron on the right of each top item__ */
.offcanvas#demo .aura-ofc-menu > li.menu-item-has-children > a::after{
  content:"\25BE";              /* ▾  */
  flex:0 0 auto;
  margin-left:10px;
  font-size:20px;
  line-height:1;
  color:#b2905f;               /* gold — stands out on white */
  font-weight:400;
  transition: transform .25s ease;
}
.offcanvas#demo .aura-ofc-menu > li.menu-item-has-children.open > a::after{
  transform: rotate(180deg);   /* flip up when open */
  color:#7a5d12;
}
/* submenu hidden until opened */
.offcanvas#demo .aura-ofc-menu li.menu-item-has-children > .sub-menu{
  display:none;
  padding:2px 0 10px 12px;
  margin:0;
}
.offcanvas#demo .aura-ofc-menu li.menu-item-has-children.open > .sub-menu{
  display:block;
  animation:auraFadeIn .22s ease;
}
@keyframes auraFadeIn{ from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:none;} }

/* ========================
   GLOBAL TOUCH TRIGGER SWITCH
   deskNav: hover dropdown (≥1200). Touch: single ☰ → this drawer. */

/* ---- single clean menu on phone/tablet: desktop uses hover dropdown; on touch
        use ONLY the right ☰ trigger which opens the pretty right-side "Shop by Category"
        off-canvas drawer. So hide the LEFT burger (its raw sidenav is less styled). ---- */
@media (min-width: 1200px){
  /* desktop already has hover dropdown navigation — hide reduntant ☰ off-canvas trigger */
  .search-cart .offcanvas-div{
    display: none !important;
  }
}
@media (max-width: 1199px){
  .toggle-nav.mobile-menu{
    display: none !important;
  }
  /* ensure the off-canvas panel (#demo) and its trigger are unhidden on touch */
  .search-cart .offcanvas-div{
    display: flex !important;
  }
}
@media (max-width: 991px){
  /* mobile sidenav sub in drawer stays readable */
  #site-navigation .main-navigation ul.sub-menu{
    position: relative;
    left:0; opacity:1;
  }
}
@media (max-width: 991px){
  #site-navigation .main-navigation ul.sub-menu{
    position: static;               /* inline in drawer */
    opacity:1;
    left:0;
    background: transparent;
    box-shadow:none;
    border:none;
    padding-left: 18px;
    width:auto!important;min-width:0;
  }
  #site-navigation .main-navigation ul.sub-menu > li > a{ color: var(--second-color); }
}