/* Submenu Component Style Guide
 * - Scoped, accessible dropdown submenu
 * - Keyboard + hover friendly; CSS-only open via :focus-within/hover
 * - Uses custom properties and 2-space indentation per theme guidelines
 */

:root {
  /* Colors */
  --submenu-background: #FFFFFF;
  --submenu-text: #1E3932; /* Dark green text */
  /* Use theme accent color for submenu highlights */
  --submenu-accent-bg: var(--accent, #48897c);
  --submenu-accent-text: #ffffff;
  --submenu-border: rgba(30, 57, 50, 0.08);

  /* Typography */
  --submenu-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --submenu-font-size: 1rem; /* ~16px */
  --submenu-weight: 500;

  /* Spacing & Radius */
  --submenu-unit: 8px;
  --submenu-radius-outer: 20px;
  --submenu-radius-item: 12px;

  /* Effects */
  --submenu-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  --submenu-speed: 0.2s ease-in-out;
}

/* Optional dark theme helper (opt-in via .submenu--dark) */
.submenu--dark {
  --submenu-background: #0f2220;
  --submenu-text: #e6f0ee;
  --submenu-accent-bg: #c6ea3a;
  --submenu-accent-text: #0f2220;
  --submenu-border: rgba(230, 240, 238, 0.14);
  --submenu-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Container */
.submenu-container {
  background-color: var(--submenu-background);
  border-radius: var(--submenu-radius-outer);
  box-shadow: var(--submenu-shadow);
  padding: var(--submenu-unit);
  width: 280px; /* demo width; make fluid as needed */
  overflow: hidden; /* keep children within rounded corners */
  border: 1px solid var(--submenu-border);
}

/* Density modifiers */
.submenu-container.is-compact { --submenu-unit: 6px; }
.submenu-container.is-roomy   { --submenu-unit: 12px; }

/* Unordered list reset */
.submenu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Items */
.submenu-item { position: relative; }

.submenu-item a,
.submenu-item button.submenu-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--submenu-unit) * 1);
  width: 100%;
  padding: calc(var(--submenu-unit) * 1.5) calc(var(--submenu-unit) * 2);
  min-height: 44px; /* touch target */

  font-family: var(--submenu-font);
  font-size: var(--submenu-font-size);
  font-weight: var(--submenu-weight);
  color: var(--submenu-text);
  text-decoration: none;

  background: transparent;
  border: 0;
  border-radius: var(--submenu-radius-item);
  cursor: pointer;

  transition: background-color var(--submenu-speed), color var(--submenu-speed), transform var(--submenu-speed);
}

/* Hover, Active, Focus-visible */
.submenu-item a:hover,
.submenu-item a.active,
.submenu-item button.submenu-toggle:hover,
.submenu-item button.submenu-toggle[aria-expanded="true"] {
  background-color: var(--submenu-accent-bg);
  color: var(--submenu-accent-text);
}

.submenu-item a:focus-visible,
.submenu-item button.submenu-toggle:focus-visible {
  outline: 2px solid var(--submenu-accent-bg);
  outline-offset: 2px;
}

/* Disabled state */
.submenu-item .is-disabled,
.submenu-item [aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Trailing circular icon (appears on hover/active) */
.submenu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 0;
  height: 24px;
  opacity: 0;
  transform: scale(0.6);
  transition: all var(--submenu-speed);
  flex: 0 0 auto;
}

.submenu-item a:hover .submenu-icon,
.submenu-item a.active .submenu-icon,
.submenu-item button.submenu-toggle:hover .submenu-icon,
.submenu-item button.submenu-toggle[aria-expanded="true"] .submenu-icon {
  width: 24px;
  background-color: var(--submenu-text);
  border-radius: 50%;
  opacity: 1;
  transform: scale(1);
}

.submenu-item a:hover .submenu-icon::after,
.submenu-item a.active .submenu-icon::after,
.submenu-item button.submenu-toggle:hover .submenu-icon::after,
.submenu-item button.submenu-toggle[aria-expanded="true"] .submenu-icon::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--submenu-accent-bg);
  border-right: 2px solid var(--submenu-accent-bg);
  top: calc(50% - 4px);
  left: calc(50% - 3px);
  transform: rotate(45deg);
}

/* Parent with children */
.submenu-item.has-children { position: relative; }

/* Nested panel (dropdown) */
.submenu-panel {
  list-style: none;
  margin: 0;
  padding: var(--submenu-unit);
  position: absolute;
  left: calc(100% + var(--submenu-unit));
  top: 0;
  min-width: 240px;
  background: var(--submenu-background);
  border: 1px solid var(--submenu-border);
  border-radius: var(--submenu-radius-outer);
  box-shadow: var(--submenu-shadow);
  opacity: 0;
  transform: translateY(0px);
  pointer-events: none;
  transition: opacity var(--submenu-speed), transform var(--submenu-speed);
  z-index: 20;
}

/* Open on hover for pointer devices */
@media (hover: hover) and (pointer: fine) {
  .submenu-item.has-children:hover > .submenu-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Open on focus within (keyboard) */
.submenu-item.has-children:focus-within > .submenu-panel,
.submenu-item.has-children button.submenu-toggle[aria-expanded="true"] ~ .submenu-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Caret indicator for parent items */
.submenu-caret {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

/* RTL support */
:dir(rtl) .submenu-panel {
  left: auto;
  right: calc(100% + var(--submenu-unit));
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .submenu-panel,
  .submenu-icon { transition: none; }
}

/* Divider utility */
.submenu-divider {
  height: 1px;
  background: var(--submenu-border);
  margin: var(--submenu-unit) 0;
}

/* Helpers for demo headings and notes (scoped) */
.submenu-demo h3 {
  margin: 1.25rem 0 0.75rem;
  font: 600 0.938rem/1.4 var(--submenu-font);
  color: var(--submenu-text);
}
.submenu-demo .note {
  margin-top: 6px;
  font: 400 0.875rem/1.4 var(--submenu-font);
  color: color-mix(in oklab, var(--submenu-text), transparent 35%);
}

/* ===== Apply style-guide design to existing header nav submenus ===== */
/* Scope to header nav to avoid side effects */
.fez-nav {
  --nav-submenu-bg: var(--submenu-background, #ffffff);
  --nav-submenu-text: var(--submenu-text, #1E3932);
  --nav-submenu-accent-bg: var(--submenu-accent-bg, #D4E95E);
  --nav-submenu-accent-text: var(--submenu-accent-text, #1E3932);
  --nav-submenu-bd: var(--submenu-border, rgba(30,57,50,0.08));
  /* Tighter, square submenu for header nav */
  --nav-submenu-radius: 0; /* remove rounded corners */
  --nav-submenu-item-radius: 0; /* remove item radius */
  --nav-submenu-unit: 6px; /* reduce overall spacing */
  --nav-submenu-shadow: var(--submenu-shadow, 0 8px 24px rgba(0,0,0,0.1));
  --nav-submenu-speed: var(--submenu-speed, 0.2s ease-in-out);
  /* Slightly smaller font for submenu items */
  --submenu-font-size: 0.9375rem; /* ~15px */
}

/* Submenu container (apply to all levels in desktop nav) */
.fez-nav .menu li .sub-menu {
  /* layout */
  display: none; /* kept: visibility still controlled by existing hover/focus rules */
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  width: max-content; /* fit content nicely */
  max-width: 360px;
  padding: var(--nav-submenu-unit);
  box-sizing: border-box;

  /* appearance */
  background: var(--nav-submenu-bg);
  color: var(--nav-submenu-text);
  border-radius: var(--nav-submenu-radius);
  border: 1px solid var(--nav-submenu-bd);
  box-shadow: var(--nav-submenu-shadow);
  z-index: 1000;
}

/* Keep existing open behavior */
.fez-nav .menu li:hover > .sub-menu,
.fez-nav .menu li:focus-within > .sub-menu,
.fez-nav .menu li.hover-intent > .sub-menu { display: block; }

/* Submenu items */
.fez-nav .menu li .sub-menu > li {
  position: relative;
  margin: 2px 0; /* replace separators with breathing space */
  padding: 0; /* remove left indent/padding from base theme */
}

/* Remove old dot/arrow markers and borders from previous theme styles */
.fez-nav .menu li .sub-menu > li::before { content: none !important; }
.fez-nav .menu li .sub-menu > li + li { border-top: 0 !important; }

.fez-nav .menu li .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ensure text is left-aligned with no trailing spacing */
  gap: calc(var(--nav-submenu-unit) * 1);
  padding: calc(var(--nav-submenu-unit) * 1.25) calc(var(--nav-submenu-unit) * 1.5);
  min-height: 38px; /* slightly smaller touch target */

  font: var(--submenu-weight, 500) var(--submenu-font-size, 0.9375rem)/1.35 var(--submenu-font, system-ui, -apple-system, sans-serif);
  color: var(--nav-submenu-text);
  text-decoration: none;
  border-radius: var(--nav-submenu-item-radius);
  text-align: left; /* explicit left alignment */
  transition: background-color var(--nav-submenu-speed), color var(--nav-submenu-speed);
  /* Match top-level nav text size/weight */
  font-size: inherit;
  font-weight: inherit;
}

.fez-nav .menu li .sub-menu a:hover,
.fez-nav .menu li .sub-menu a:focus,
.fez-nav .menu li .sub-menu .current-menu-item > a {
  background: var(--nav-submenu-accent-bg);
  color: var(--nav-submenu-accent-text);
}

.fez-nav .menu li .sub-menu a:focus-visible {
  outline: 2px solid var(--nav-submenu-accent-bg);
  outline-offset: 2px;
}

/* Nested items */
.fez-nav .menu li .sub-menu li.menu-item-has-children { position: relative; }

/* Default nested submenu behavior (side panel) for generic cases */
.fez-nav .menu li .sub-menu li.menu-item-has-children > .sub-menu {
  top: 0;
  left: calc(100% + var(--nav-submenu-unit));
  /* Ensure nested panel sits above its parent */
  z-index: 1001;
  /* Match container look for nested levels */
  background: var(--nav-submenu-bg);
  color: var(--nav-submenu-text);
  border: 1px solid var(--nav-submenu-bd);
  border-radius: var(--nav-submenu-radius);
  box-shadow: var(--nav-submenu-shadow);
}
html:dir(rtl) .fez-nav .menu li .sub-menu li.menu-item-has-children > .sub-menu {
  left: auto;
  right: calc(100% + var(--nav-submenu-unit));
}

/* For the first nested level inside the dropdown (level-3), show below instead of side */
.fez-nav .menu li .sub-menu.sub-menu--level-3 {
  position: static;
  display: none;
  min-width: 100%;
  width: 100%;
  max-width: none;
  padding: 0; /* inherit item spacing */
  box-shadow: none;
  border: 0;
  border-radius: 0;
}
.fez-nav .menu li .sub-menu li.menu-item-has-children:hover > .sub-menu.sub-menu--level-3,
.fez-nav .menu li .sub-menu li.menu-item-has-children:focus-within > .sub-menu.sub-menu--level-3 {
  display: block;
}
/* Indent level-3 links slightly for hierarchy clarity */
.fez-nav .menu li .sub-menu.sub-menu--level-3 > li > a {
  padding-left: calc(var(--nav-submenu-unit) * 2);
}

/* Heuristic: side-panel flip for deeper levels if used near right edge (kept) */
@media (min-width: 960px) {
  .fez-nav .menu > li:nth-last-child(-n+2) .sub-menu li.menu-item-has-children > .sub-menu {
    left: auto;
    right: calc(100% + var(--nav-submenu-unit));
  }
}

/* Indicate child in submenu with a subtle caret */
.fez-nav .menu li .sub-menu li.menu-item-has-children > a::after {
  content: '';
  width: 0px;
  height: 0px;
  margin-left: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(180deg);
}

/* Level-2 (first dropdown) children: navbar-like arrow with rotation */
.fez-nav .menu > li > .sub-menu.sub-menu--level-2 > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  border-top: 5px solid var(--text);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform 0.3s;
}
.fez-nav .menu > li > .sub-menu.sub-menu--level-2 > li.menu-item-has-children:hover > a::after {
  transform: rotate(0deg);
}

/* Remove square bullet for level-2 items (reverted per request) */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fez-nav .menu li .sub-menu a { transition: none; }
}