/* menu.css */

/* #region CSS Variables */
/* --- All your “vars” lifted from JS into CSS custom properties --- */
:root {
  /* Layout & Positioning */
  --menu-align: center;               /* left | center | right */
  --menu-offset-x: 15px;
  --menu-offset-y: 15px;

  /* Main Menu Appearance */
  --menu-bg-color: lightblue;         /* mCOLOR */
  --menu-active-bg-color: darkblue;   /* rCOLOR */
  --menu-border-size: 1px;            /* bSIZE */
  --menu-border-color: black;         /* bCOLOR */

  /* Link Styles */
  --menu-link-color: brown;           /* aLINK */
  --menu-link-hover-color: inherit;   /* aHOVER (empty means inherit) */
  --menu-link-decoration: none;       /* aDEC */

  /* Typography */
  --menu-font-family: arial, sans-serif; /* fFONT */
  --menu-font-size: 13px;             /* fSIZE */
  --menu-font-weight: bold;           /* fWEIGHT */

  /* Spacing */
  --menu-text-indent: 7px;            /* tINDENT */
  --menu-vertical-padding: 7px;       /* vPADDING */

  /* Submenu Offsets */
  --submenu-offset-y: 5px;            /* vOFFSET */
  --submenu-offset-x: 4px;            /* hOFFSET */

  /* Arrow Indicators */
  --arrow-left: "<";                  /* arrLEFT */
  --arrow-right: ">";                 /* arrRIGHT */
  --arrow-offset-x: -1px;             /* arrHOFFSET */
  --arrow-offset-y: -3px;             /* arrVOFFSET */
}

/* Submenu-specific variables */
:root {
  --submenu-bg-color: lightblue;          /* smCOLOR */
  --submenu-active-bg-color: darkblue;    /* srCOLOR */
  --submenu-border-size: 1px;             /* sbSIZE */
  --submenu-border-color: black;          /* sbCOLOR */

  --submenu-link-color: darkred;          /* saLINK */
  --submenu-link-hover-color: inherit;    /* saHOVER */
  --submenu-link-decoration: none;        /* saDEC */

  --submenu-font-family: "comic sans ms", arial, sans-serif; /* sfFONT */
  --submenu-font-size: 13px;              /* sfSIZE */
  --submenu-font-weight: normal;          /* sfWEIGHT */

  --submenu-text-indent: 5px;             /* stINDENT */
  --submenu-vertical-padding: 1px;        /* svPADDING */

  /* Transition timings (from your open/close timers) */
  --transition-fast: 0.02s; /* openChildTIMER /1000 */
  --transition-medium: 0.33s; /* closeTIMER /1000 */
}
/* #endregion */

/* #region Base Menu Styles */
.menu {
  display: flex;
  justify-content: var(--menu-align);
  margin: var(--menu-offset-y) 0 0 var(--menu-offset-x);
  background: var(--menu-bg-color);
  border: var(--menu-border-size) solid var(--menu-border-color);
  font-family: var(--menu-font-family);
  font-size: var(--menu-font-size);
  font-weight: var(--menu-font-weight);
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
/* #endregion */

/* #region Main Menu Items */
.menu__item {
  position: relative;
}

.menu__link {
  display: block;
  padding: var(--menu-vertical-padding) 1em;
  text-indent: var(--menu-text-indent);
  color: var(--menu-link-color);
  text-decoration: var(--menu-link-decoration);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.menu__link:hover,
.menu__link:focus {
  background: var(--menu-active-bg-color);
  color: var(--menu-link-hover-color);
}

/* Add arrow indicator for items with children */
.menu__item.has-children > .menu__link::after {
  content: var(--arrow-right);
  margin-left: var(--arrow-offset-x);
  vertical-align: middle;
}
/* #endregion */

/* #region Submenu Styles */
.menu__submenu {
  position: absolute;
  top: calc(100% + var(--submenu-offset-y));
  left: var(--submenu-offset-x);
  background: var(--submenu-bg-color);
  border: var(--submenu-border-size) solid var(--submenu-border-color);
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-medium), visibility var(--transition-medium);
  z-index: 1000;
}

.menu__item:hover > .menu__submenu,
.menu__item:focus-within > .menu__submenu {
  opacity: 1;
  visibility: visible;
}

/* Submenu items */
.submenu__item {}

.submenu__link {
  display: block;
  padding: var(--submenu-vertical-padding) 1em;
  text-indent: var(--submenu-text-indent);
  color: var(--submenu-link-color);
  text-decoration: var(--submenu-link-decoration);
  font-family: var(--submenu-font-family);
  font-size: var(--submenu-font-size);
  font-weight: var(--submenu-font-weight);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.submenu__link:hover,
.submenu__link:focus {
  background: var(--submenu-active-bg-color);
  color: var(--submenu-link-hover-color);
}

/* Arrow on deeper levels (if any submenu has children) */
.submenu__item.has-children > .submenu__link::after {
  content: var(--arrow-right);
  margin-left: var(--arrow-offset-x);
  vertical-align: middle;
}
/* #endregion */

/* #region Suggestions & Improvements */
/*
  • You could replace the :hover menu reveal with a click‑to‑open pattern using
    the `.open` class and a tiny bit of JS—gives you mobile‑friendly taps.
  • If you want dark mode later, just override these CSS variables under
    [data-theme="dark"] and boom—instant theme flip.
  • Consider using CSS Grid for mega‑menus or multi‑column submenus.
*/
/* #endregion */