/* =====================================================
   ProSoftStore Tree Menu (pstm) - v10
   ---------------------------------------------------
   FIX: mobile menu was fully visible on load and took over
   the screen, because .pstm had no "collapsed by default"
   rule at all on small screens. Desktop CSS (v5) never touched
   mobile visibility, so the browser just showed the whole <ul>
   block as-is. This version adds a real mobile breakpoint that:
     - hides the whole menu body by default on <= 768px
     - shows it only when JS adds "menu-open" to the root .pstm
     - keeps the accordion sub-levels working exactly like desktop
   ===================================================== */

.pstm {
  font-family: inherit;
  font-size: 15px;
  background-color: #fff;
  border: 2px solid #3498db;
  border-radius: 5px;
  overflow: hidden;
}

.pstm ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pstm li {
  list-style: none;
  margin: 0;
}

/* Top level links, flat style by default (Home, Software Catalog,
   Software Blog, or any future plain navigation link). Same visual
   weight as any regular link inside a submenu. */
.pstm > ul > li > a {
  display: block;
  padding: 0.5rem 1rem;
  font-weight: normal;
  color: #2c3e50;
  background-color: #fff;
  border-bottom: 1px solid #ecf0f1;
  text-decoration: none;
}

/* Category links (anything with a nested submenu) get the heavier
   "group title" look. Single source of truth: presence of children,
   not position in the list. */
.pstm > ul > li.has-children > a {
  font-weight: bold;
  background-color: #dfe6e9;
  border-bottom: 1px solid #bdc3c7;
}

/* ---- Regular (leaf) links ---- */
.pstm a {
  display: block;
  padding: 5px 10px;
  color: #2c3e50;
  text-decoration: none;
  border-bottom: 1px solid #ecf0f1;
}

.pstm ul ul a {
  color: #555;
  padding-left: 20px;
}

.pstm ul ul ul a {
  padding-left: 32px;
}

.pstm a:hover {
  background: linear-gradient(166deg, rgba(95,92,142,1) 0%, rgba(134,207,235,1) 53%, rgba(137,235,255,1) 100%);
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.pstm a:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: -2px;
}

/* ---- Nested lists: accordion, in normal document flow ---- */
.pstm .submenu-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease;
  background-color: #f8f9fa;
}

.pstm .submenu-wrap > ul {
  overflow: hidden;
  min-height: 0;
}

.pstm li.open > .submenu-wrap {
  grid-template-rows: 1fr;
}

/* ---- Expand/collapse arrow: inline with the link text ---- */
.pstm li.has-children > a {
  position: relative;
  padding-right: 28px;
}

.pstm li.has-children > a::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 200ms ease;
}

.pstm li.has-children.open > a::after {
  transform: translateY(-35%) rotate(-135deg);
}

/* ---- Current page marker ---- */
.pstm a.current_mark {
  background: linear-gradient(166deg, rgba(95,92,142,1) 0%, rgba(134,207,235,1) 53%, rgba(137,235,255,1) 100%);
  color: #fff;
  font-weight: bold;
}

/* =====================================================
   Mobile toolbar button (hamburger) - always in the DOM,
   only made visible below the 768px breakpoint (matches
   the site's existing mobile breakpoint in styles.css).
   ===================================================== */
.pstm-toolbar {
  display: none;
}

.pstm-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0.75rem 1rem;
  /* Match desktop .group-title styling instead of the header gradient,
     so the button reads as "part of the menu", not part of the header. */
  background-color: #dfe6e9;
  color: #2c3e50;
  text-decoration: none;
  font-weight: bold;
  text-shadow: none;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid #bdc3c7;
}

.pstm-toolbar-btn:hover,
.pstm-toolbar-btn:focus-visible {
  background: linear-gradient(166deg, rgba(95,92,142,1) 0%, rgba(134,207,235,1) 53%, rgba(137,235,255,1) 100%);
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Hamburger icon drawn purely in CSS - no external image needed.
   Uses currentColor so it switches from dark to white on hover
   automatically, matching the button's text color. */
.pstm-hamburger {
  position: relative;
  width: 20px;
  height: 14px;
  flex-shrink: 0;
}

.pstm-hamburger span,
.pstm-hamburger::before,
.pstm-hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.pstm-hamburger::before { top: 0; }
.pstm-hamburger span { top: 6px; }
.pstm-hamburger::after { top: 12px; }

@media screen and (max-width: 768px) {
  /* Toolbar button becomes visible on mobile */
  .pstm-toolbar {
    display: block;
  }

  /* Menu body collapsed by default; only the toolbar row shows */
  .pstm > ul {
    display: none;
  }

  .pstm.menu-open > ul {
    display: block;
  }

  /* Slightly larger tap targets on mobile */
  .pstm a {
    padding: 12px 10px;
  }

  .pstm > ul > li > a {
    padding: 12px 1rem;
  }
}