/* ================================================================
   Captain-Greek Smart-Menu • June 2025
   ================================================================ */

/* ---------- 0. tokens ----------------------------------------- */
:root{
  --cg-blue : #2d337f;
  --cg-gold : #d4af37;
  --cg-char : #444446;
  --cg-sub-indent : 2.5rem;   /* indentation for level-1 links   */
}

/* ---------- 1. link baseline (keeps icon box alive) ----------- */
#categories-nav a,
.sidebar ul.nav-collapse a{
  display:flex; align-items:center; gap:.5rem;
  position:relative;               /* anchor for chevron */
  text-decoration:none;
}

/* ---------- 2. hierarchy & typography ------------------------- */
/* root --------------------------------------------------------- */
#categories-nav li.level0 > a,
.sidebar ul.nav-collapse li.level0 > a{
  font:600 1.6rem/1.4 "Roboto",Arial,sans-serif;   /* ≈25 px */
  padding:.65rem 2rem .65rem 0;                    /* room on right */
  color:var(--cg-char);
  letter-spacing:.015em;
}
#categories-nav li.level0 > a:hover,
#categories-nav li.level0 > a:focus,
.sidebar ul.nav-collapse li.level0 > a:hover,
.sidebar ul.nav-collapse li.level0 > a:focus{ color:var(--cg-blue); }

/* sub ---------------------------------------------------------- */
#categories-nav li.level1 > a,
.sidebar ul.nav-collapse li.level1 > a{
  font:400 1.4rem/1.5 "Roboto",Arial,sans-serif;   /* ≈22 px */
  padding:.55rem 2rem .55rem var(--cg-sub-indent);
  color:var(--cg-char);
}
#categories-nav li.level1 > a:hover,
#categories-nav li.level1 > a:focus,
.sidebar ul.nav-collapse li.level1 > a:hover,
.sidebar ul.nav-collapse li.level1 > a:focus{ color:var(--cg-blue); }

/* active ------------------------------------------------------- */
#categories-nav li.active > a,
.sidebar ul.nav-collapse li.active > a{ color:var(--cg-blue); }
#categories-nav li.active > a::after,
.sidebar ul.nav-collapse li.active > a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--cg-gold);
}

/* ====================================================================
   ✔  Chevrons – works with markup <li><span class="ex-coll … mbi …"></span><a …>
   ==================================================================== */

/* ================================================================
   Arrow (mbi) – size & colours only
   ================================================================ */

/* 1 ▸ base look ------------------------------------------------- */
ul.nav-collapse li span.mbi{
    font-size:1.4rem;             /* bigger arrow */
  line-height:3rem;
  display:inline-block;         /* lets transform work */
  transform-origin:center;      /* rotate around centre */
  color:#888;                   /* default muted grey */
  transition:transform .25s, color .15s;
}

/* open state ----------------------------------------------------- */
ul.nav-collapse li span.mbi-ios-arrow-up{
  transform:rotate(0deg);     /* flips arrow on open */
}

/* 2 ▸ hover / focus -------------------------------------------- */
ul.nav-collapse li:hover  > span.mbi,
ul.nav-collapse li:focus-within > span.mbi{
    color:#2d337f;       /* brand blue on interaction */
}

/* 3 ▸ active root (open trail) --------------------------------- */
ul.nav-collapse li.active > span.mbi{
    color:#d4af37;       /* gold for active category  */
}

/* ---------- 4. icons (background-image) ----------------------- */
#categories-nav li.level0 > a::before,
.sidebar ul.nav-collapse li.level0 > a::before{
  content:''; display:inline-block;
  width:1.15rem; height:1.15rem; flex:0 0 1.15rem;
  margin-right:.35rem;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  filter:grayscale(1) brightness(.65);
  transition:filter .15s;
}
#categories-nav a:hover::before,
#categories-nav a:focus-visible::before,
.sidebar ul.nav-collapse a:hover::before,
.sidebar ul.nav-collapse a:focus-visible::before{ filter:none; }
#categories-nav li.active > a::before,
.sidebar ul.nav-collapse li.active > a::before{ filter:hue-rotate(-35deg) saturate(6); }

/* 18 background-image mappings -------------------------------- */
li.nav-1  > a::before{ background-image:url('../svg/cats/olive.svg'); }
li.nav-2  > a::before{ background-image:url('../svg/cats/cheese.svg'); }
li.nav-3  > a::before{ background-image:url('../svg/cats/leaf.svg'); }
li.nav-4  > a::before{ background-image:url('../svg/cats/fish.svg'); }
li.nav-5  > a::before{ background-image:url('../svg/cats/drumstick.svg'); }
li.nav-6  > a::before{ background-image:url('../svg/cats/bowl-noodles.svg'); }
li.nav-7  > a::before{ background-image:url('../svg/cats/cake.svg'); }
li.nav-8  > a::before{ background-image:url('../svg/cats/nut.svg'); }
li.nav-9  > a::before{ background-image:url('../svg/cats/wine.svg'); }
li.nav-10 > a::before{ background-image:url('../svg/cats/shirt.svg'); }
li.nav-11 > a::before{ background-image:url('../svg/cats/brush.svg'); }
li.nav-12 > a::before{ background-image:url('../svg/cats/heart-pulse.svg'); }
li.nav-13 > a::before{ background-image:url('../svg/cats/home.svg'); }
li.nav-14 > a::before{ background-image:url('../svg/cats/landmark.svg'); }
li.nav-15 > a::before{ background-image:url('../svg/cats/music.svg'); }
li.nav-16 > a::before{ background-image:url('../svg/cats/gift.svg'); }
li.nav-17 > a::before{ background-image:url('../svg/cats/sprout.svg'); }
li.nav-18 > a::before{ background-image:url('../svg/cats/book-open.svg'); }

/* ---------- 5. card shell ------------------------------------ */
.block.block-nav{
  --card-bg:#fff;
  --card-border:hsl(220 14% 93%);
  --sh1:hsl(220 3% 46% / .06);
  --sh2:hsl(220 3% 46% / .12);

  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:1rem;
  box-shadow:
    0 0 0 2px var(--cg-gold) inset,
    0 3px 4px -2px var(--sh1),
    0 6px 12px -4px var(--sh2);
  padding:clamp(1rem,2.5vw,1.75rem);
  margin-block-end:2rem;
  transition:box-shadow .25s, transform .25s;
}
@media(hover:hover){
  .block.block-nav:hover{
    transform:translateY(-2px);
    box-shadow:
      0 0 0 2px var(--cg-gold) inset,
      0 4px 6px -2px var(--sh1),
      0 8px 16px -4px var(--sh2);
  }
}

/* ---------- 6. motion safety -------------------------------- */
@media(prefers-reduced-motion:reduce){
  .block.block-nav{ transition:none !important; }
}