/* ===========================================================
   Spacivo Category Menu — maroon category bar with per-item configurable
   dropdown submenus. Self-contained plugin CSS (no theme dependency
   beyond the theme's own .container wrapper and --color-accent variable).
   =========================================================== */

.spacivo-cm {
  background-color: var(--color-accent, #72192D);
  border-top: 1px solid rgba(255,255,255,.15);
}
.spacivo-cm .container { overflow: visible; }

.spacivo-cm__list {
  display: flex; list-style: none; margin: 0; padding: .1rem 0;
  gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.spacivo-cm__list::-webkit-scrollbar { height: 4px; }
.spacivo-cm__list::-webkit-scrollbar-track { background: transparent; }
.spacivo-cm__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.4); border-radius: 2px; }

.spacivo-cm__item { flex-shrink: 0; position: relative; }

.spacivo-cm__link {
  display: flex; align-items: center; gap: .3rem;
  padding: .65rem 1rem; color: #fff; text-decoration: none;
  font-weight: 500; font-size: .9rem; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: opacity .2s ease;
}
.spacivo-cm__link:hover { opacity: .85; text-decoration: none; }
.spacivo-cm__caret { flex-shrink: 0; transition: transform .2s ease; }

.spacivo-cm__submenu {
  /* position:fixed (with top/left set by JS on open, not CSS) rather than
     absolute — this nav lives inside .site-header, which has
     overflow-x:hidden (an unrelated mobile-scroll fix); per the CSS spec
     that forces overflow-y to also clip instead of staying visible, which
     was cutting this dropdown off entirely instead of showing it as an
     overlay below the category bar. Fixed positioning escapes that
     clipping — same fix already applied to the account-icon dropdown.

     A mega-menu panel: a row of columns (each its own heading + link
     list), not a single list — see templates/shortcode-template.php. */
  display: none;
  position: fixed; z-index: 150;
  gap: 2.5rem; padding: 1.5rem 2rem;
  background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.15); border-radius: 0 0 6px 6px;
}
.spacivo-cm__item.is-open .spacivo-cm__submenu { display: flex; flex-wrap: wrap; }

.spacivo-cm__submenu-col { min-width: 150px; }
.spacivo-cm__submenu-heading {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #7a7168; margin-bottom: .85rem; white-space: nowrap;
}
.spacivo-cm__submenu-col ul { list-style: none; margin: 0; padding: 0; }
.spacivo-cm__submenu-col li + li { margin-top: .15rem; }
.spacivo-cm__submenu-col a {
  /* Each link is its own row: padding + negative margin keeps the text
     visually aligned under the column heading while still giving the
     hover background room to extend slightly past the text on both
     sides, like a proper clickable list item rather than plain stacked
     text. */
  display: block; color: #2A211D; text-decoration: none;
  font-size: .88rem; white-space: nowrap;
  padding: .45rem .6rem; margin: 0 -.6rem; border-radius: 4px;
}
.spacivo-cm__submenu-col a:hover { background: #F1ECE5; color: #72192D; }

/* Reveal is entirely JS-driven now (both hover and click/touch — see
   assets/js/category-menu.js), since a position:fixed element needs its
   top/left computed from the trigger's actual position on every open;
   pure-CSS :hover can't do that. (.spacivo-cm__submenu's display:flex
   toggle lives above, next to its other .is-open rules.) */
.spacivo-cm__item.is-open .spacivo-cm__caret { transform: rotate(180deg); }

.spacivo-cm-unconfigured-notice {
  font-size: .85rem; color: #a22022; background: #fff3f3; border: 1px dashed #a22022;
  padding: .75rem 1rem; margin: 1rem auto; max-width: 1280px;
}

@media (max-width: 1024px) {
  .spacivo-cm__list { padding: .1rem 1rem; }
}

@media (max-width: 750px) {
  .spacivo-cm { display: none; }
}