/* ============================================================
   PARCELLING LOVE — FINAL NAV DROPDOWNS
   Only CAKES uses the mega menu.
   Brownies / Muffins / Health Is Wealth use simple dropdowns.
   ============================================================ */

/* ---------- Common dropdown controls ---------- */
.mega-dropdown,
.simple-dropdown{
  position:static!important;
}

.mega-toggle,
.simple-toggle{
  border:0;
  background:none;
  color:var(--brown);
  font:inherit;
  padding:0;
  cursor:pointer;
  white-space:nowrap;
  position:relative;
  z-index:3;
  pointer-events:auto;
}

.mega-toggle span,
.simple-toggle span{
  font-family:Arial,sans-serif;
  font-size:11px;
  margin-left:4px;
}

/* ---------- CAKES mega menu ---------- */
.cakes-menu .category-mega-menu{
  display:none;
  position:fixed!important;
  top:105px!important;
  left:0!important;
  right:0!important;
  width:100vw!important;
  max-width:100vw!important;
  box-sizing:border-box!important;
  padding:25px 38px 27px!important;
  margin:0!important;
  background:var(--cream)!important;
  border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 16px 35px rgba(84,39,17,.14);
  z-index:99999!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:24px 34px!important;
  overflow:visible!important;
}

.category-column{
  min-width:0;
}

.category-column h4{
  margin:0 0 11px!important;
  padding-bottom:8px!important;
  color:var(--brown);
  font:600 16px/1.2 var(--serif)!important;
  border-bottom:1px solid var(--gold)!important;
}

.category-column a{
  display:block;
  padding:4px 0!important;
  color:#765640;
  font:500 13px/1.35 var(--serif)!important;
  text-decoration:none;
  transition:color .18s,transform .18s;
}

.category-column a:hover{
  color:var(--gold);
  transform:translateX(2px);
}

/* ---------- Simple dropdowns ---------- */
.simple-dropdown{
  position:relative!important;
}

.simple-menu{
  display:none;
  position:absolute;
  top:calc(100% + 16px);
  left:50%;
  transform:translateX(-50%);
  min-width:210px;
  padding:10px 0;
  background:var(--cream);
  border:1px solid var(--line);
  box-shadow:0 14px 28px rgba(84,39,17,.14);
  z-index:99999;
}

.simple-dropdown.open .simple-menu{
  display:block;
}

.simple-menu a{
  display:block;
  padding:8px 18px;
  color:var(--brown);
  text-decoration:none;
  font:500 13px/1.25 var(--serif);
  white-space:nowrap;
}

.simple-menu a:hover{
  color:var(--gold);
  background:rgba(199,138,43,.06);
}

.health-simple-menu{
  min-width:235px;
}

/* Desktop only: never allow dropdowns to create page overflow. */
@media (min-width:781px){
  html,body{
    overflow-x:hidden!important;
  }
}

/* ---------- Tablet ---------- */
@media (max-width:1100px) and (min-width:781px){
  .cakes-menu .category-mega-menu{
    padding:22px 4%!important;
    gap:22px 25px!important;
  }

  .category-column h4{
    font-size:15px!important;
  }

  .category-column a{
    font-size:12px!important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width:780px){
  .mega-dropdown,
  .simple-dropdown{
    width:100%;
  }

  .mega-toggle,
  .simple-toggle{
    width:100%;
    text-align:left;
    padding:11px 4px;
    font:16px var(--serif);
  }

  .mega-toggle span,
  .simple-toggle span{
    float:right;
  }

  /* Cakes becomes a stacked mobile mega menu. */
  .cakes-menu .category-mega-menu{
    display:none!important;
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    padding:5px 0 10px!important;
    margin:0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    grid-template-columns:1fr!important;
    gap:0!important;
  }

  .cakes-menu.open .category-mega-menu{
    display:block!important;
  }

  .category-column h4{
    padding:10px 4px 6px!important;
    margin:0!important;
    border:0!important;
    font-size:15px!important;
  }

  .category-column a{
    padding:6px 14px!important;
    font-size:13px!important;
  }

  /* Simple dropdowns become inline accordion-style menus. */
  .simple-menu,
  .health-simple-menu{
    display:none!important;
    position:static!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    padding:4px 0 8px!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }

  .simple-dropdown.open .simple-menu{
    display:block!important;
  }

  .simple-menu a{
    padding:7px 14px!important;
    white-space:normal!important;
    font-size:13px!important;
  }

  html,body{
    overflow-x:hidden!important;
  }
}

/* Portal menu: it is moved to body on desktop so the transformed nav
   cannot constrain its width or position. */
/* Portal menu: once moved to <body>, it no longer has the .cakes-menu
   ancestor. Give the portal itself the complete desktop menu styling. */
@media (min-width:781px){
  body > .cakes-menu-portal{
    display:grid!important;
    position:fixed!important;
    top:94px!important;
    left:4%!important;
    right:4%!important;
    width:92vw!important;
    max-width:92vw!important;
    box-sizing:border-box!important;
    padding:25px 38px 27px!important;
    margin:0!important;
    background:var(--cream)!important;
    border-top:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:0 16px 35px rgba(84,39,17,.14)!important;
    border-radius:0 0 12px 12px!important;
    z-index:999999!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:24px 34px!important;
    overflow:visible!important;
  }

  body > .cakes-menu-portal .category-column{
    min-width:0!important;
  }

  body > .cakes-menu-portal .category-column h4{
    margin:0 0 11px!important;
    padding-bottom:8px!important;
    color:var(--brown)!important;
    font:600 16px/1.2 var(--serif)!important;
    border-bottom:1px solid var(--gold)!important;
  }

  body > .cakes-menu-portal .category-column a{
    display:block!important;
    padding:4px 0!important;
    color:#765640!important;
    font:500 13px/1.35 var(--serif)!important;
    text-decoration:none!important;
  }

  body > .cakes-menu-portal .category-column a:hover{
    color:var(--gold)!important;
    transform:translateX(2px);
  }
}

@media (max-width:1100px) and (min-width:781px){
  body > .cakes-menu-portal{
    padding:22px 4%!important;
    gap:22px 25px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body > .cakes-menu-portal .category-column h4{
    font-size:15px!important;
  }

  body > .cakes-menu-portal .category-column a{
    font-size:12px!important;
  }
}

@media (max-width:780px){
  body > .cakes-menu-portal{
    display:none!important;
  }
}

/* Robust portal fallback for the Cakes menu */
@media (min-width:781px){
  body > .cakes-menu-portal{
    display:grid!important;
    position:fixed!important;
    top:94px!important;
    left:4%!important;
    right:4%!important;
    width:92vw!important;
    max-width:92vw!important;
    padding:25px 38px 27px!important;
    box-sizing:border-box!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:24px 34px!important;
    background:var(--cream)!important;
    z-index:999999!important;
    overflow:visible!important;
  }
}

/* =========================================
   PARCELLING LOVE — MOBILE NAVIGATION FIX
   ========================================= */
@media (max-width: 991px) {

    #nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        height: auto;
        max-height: calc(100dvh - 165px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px 0 25px;
        box-sizing: border-box;
        background: #fffaf4;
        gap: 0;
    }

    #nav.is-active {
        display: flex;
    }

    #nav > a,
    #nav > .nav-dropdown {
        position: relative;
        display: block;
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        min-height: 48px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        float: none;
        clear: both;
    }

    #nav > a,
    #nav > .nav-dropdown > button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 48px;
        padding: 12px 24px;
        box-sizing: border-box;
        text-align: left;
        line-height: 1.4;
    }

    #nav .category-mega-menu,
    #nav .simple-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 20px 12px 30px;
        box-sizing: border-box;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }

    #nav .mega-dropdown.is-open .category-mega-menu {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #nav .simple-dropdown.is-open .simple-menu {
        display: block !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #nav .category-column {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    #nav .category-column h4 {
        margin: 0;
        padding: 12px 0;
        border-bottom: 1px solid #ead8c4;
        font-size: 15px;
        line-height: 1.4;
        cursor: pointer;
    }

    #nav .category-column > a {
        display: block;
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 10px 0;
        box-sizing: border-box;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #nav .simple-menu > a {
        display: block;
        position: static;
        width: 100%;
        padding: 10px 0;
        white-space: normal;
        line-height: 1.4;
    }
}

@media (max-width: 991px) {
    #nav .category-column > a {
        display: none;
    }

    #nav .category-column.mobile-category-open > a {
        display: block;
    }

    #nav .category-column h4::after {
        content: "+";
        float: right;
        margin-left: 12px;
    }

    #nav .category-column.mobile-category-open h4::after {
        content: "−";
    }
}