/**
 * pp-compass — left-rail dropdown menu + mini promo + mobile rail layout.
 *
 * Loaded on the front page via `{{ attach_library('peak_ai_design/pp_compass') }}`
 * in page--front.html.twig. Companion to left-rail.css and pikes-peak-hero.css,
 * but scoped to the navigation dropdown and the Peak AI Support promo card.
 *
 * Component name comes from mountaineering — a compass orients you in the rail.
 */

/* ---- Rail dropdown menu (uses native <details>/<summary>, no JS) ----------
 * .left-rail is a flex column with align-items: center. That centers
 * non-stretching children. Force align-self: stretch so the menu spans the
 * rail width like the other .pp-rail-card siblings.
 */
.pp-rail-menu {
  align-self: stretch !important;
  display: block !important;
  text-align: left !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

.pp-rail-menu__summary {
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  /* Match .pp-rail-card__label (GET IN TOUCH / ASK US ANYTHING) — mono caps
   * at 2xs so all section eyebrows on the rail are visually identical. */
  font-family: var(--peak-font-mono);
  font-weight: var(--peak-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--peak-tracking-mono);
  font-size: var(--peak-text-2xs);
  color: #5dd6ff;
  user-select: none;
}

.pp-rail-menu__summary::-webkit-details-marker { display: none; }
.pp-rail-menu__summary::marker { content: ""; }

.pp-rail-menu__caret {
  transition: transform 0.2s ease;
  color: #5dd6ff;
  font-size: var(--peak-text-sm);
}

.pp-rail-menu[open] .pp-rail-menu__caret { transform: rotate(180deg); }

.pp-rail-menu__items {
  padding: 4px 0 8px 0;
  border-top: 1px solid rgba(93, 214, 255, 0.15);
}

/* ---- Override Olivero's primary-nav defaults inside the rail dropdown -----
 * Olivero designs the primary-nav for a horizontal top bar (large font, dim
 * color, flex-row). We need a vertical block stack, normal size, light color.
 * High specificity + !important is unavoidable here because pikes-peak-hero.css
 * and base.css both set the same selectors with !important.
 */
.pp-rail-menu__items,
.pp-rail-menu__items ul,
.pp-rail-menu__items nav,
.pp-rail-menu__items .menu,
.pp-rail-menu__items .primary-nav,
.pp-rail-menu__items .primary-nav__menu,
.pp-rail-menu__items .primary-nav__menu--level-1 {
  display: block !important;
  column-count: 1 !important;
  columns: auto !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: left !important;
  float: none !important;
  gap: 0 !important;
}

/* The active-trail item rule in base.css forces display: list-item — match
 * specificity to override.
 */
.pp-rail-menu__items li,
.pp-rail-menu__items .primary-nav__menu-item,
.pp-rail-menu__items .primary-nav__menu-item--level-1,
.pp-rail-menu__items .primary-nav__menu .primary-nav__menu-item:has(> .primary-nav__menu-link.is-active) {
  display: block !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
  flex: none !important;
}

/* Nuclear visibility override — every descendant inside the menu items is
 * forced to visible light-blue text on the rail's dark background.
 *
 * Olivero applies a gradient text trick to primary-nav links:
 *   background-image: linear-gradient(...);
 *   background-clip: text;
 *   -webkit-text-fill-color: transparent;
 * This clips text to the background gradient, so plain `color` overrides
 * get ignored. We have to nuke background-image + background-clip too. */
/* Visibility nuke — targeted at level-1 links + inner spans only.
 * Critical: do NOT use a universal selector here, or it forces
 * visibility: visible on level-2 submenu UL elements and defeats the
 * display: none we set on them further down. */
.pp-rail-menu__items .primary-nav,
.pp-rail-menu__items .primary-nav__menu--level-1,
.pp-rail-menu__items .primary-nav__menu-item--level-1,
.pp-rail-menu__items .primary-nav__menu-link--level-1,
.pp-rail-menu__items .primary-nav__menu-link-inner--level-1,
.pp-rail-menu__items > nav,
.pp-rail-menu__items > nav > ul,
.pp-rail-menu__items > nav > ul > li,
.pp-rail-menu__items > nav > ul > li > a,
.pp-rail-menu__items > nav > ul > li > a > span {
  color: #e6f0ff !important;
  -webkit-text-fill-color: #e6f0ff !important;
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: left !important;
  border: none !important;
  box-shadow: none !important;
}

.pp-rail-menu__items .primary-nav__menu-link,
.pp-rail-menu__items .primary-nav__menu-link-inner,
.pp-rail-menu__items a {
  color: #e6f0ff !important;
  -webkit-text-fill-color: #e6f0ff !important;
  /* Match .pp-contact-list li sizing — same band as GET IN TOUCH items. */
  font-size: var(--peak-text-2xs) !important;
  font-weight: var(--peak-weight-medium) !important;
  /* Left padding 24px aligns the menu text with the GET IN TOUCH contact
   * text column (card 10px + icon 18px + gap 6px = 34px from card border;
   * menu items get card 10px + 24px padding = 34px). Top/bottom padding
   * 8px owns ALL vertical spacing (LI margins are zeroed below) so every
   * gap between text rows is identical at 16px — no margin-collapse
   * asymmetry between the first item and the rest. */
  padding: 8px 3px 8px 24px !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
  letter-spacing: var(--peak-tracking-normal) !important;
  text-transform: none !important;
  text-shadow: none !important;
  line-height: var(--peak-leading-snug) !important;
  display: block !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none;
  visibility: visible !important;
  opacity: 1 !important;
}

.pp-rail-menu__items .primary-nav__menu-link-inner {
  padding: 0 !important;
  display: inline !important;
  font-size: inherit !important;
}

.pp-rail-menu__items .primary-nav__menu-link:hover,
.pp-rail-menu__items .primary-nav__menu-link:hover .primary-nav__menu-link-inner,
.pp-rail-menu__items .primary-nav__menu-link:focus,
.pp-rail-menu__items a:hover {
  color: #5dd6ff !important;
  -webkit-text-fill-color: #5dd6ff !important;
  background: transparent !important;
  border: none !important;
}

/* Active item gets color-only emphasis. Bumping font-weight here would
 * change the rendered text width (semi-bold is wider than medium), which
 * caused noticeable layout shift in the rail menu when navigating between
 * pages — each page's items moved a couple pixels because the bolder
 * active item took more horizontal space than the same item did when
 * inactive. Keeping weight constant across states fixes the jitter. */
.pp-rail-menu__items .primary-nav__menu-item--active-trail > .primary-nav__menu-link,
.pp-rail-menu__items .primary-nav__menu-item--active-trail > .primary-nav__menu-link .primary-nav__menu-link-inner,
.pp-rail-menu__items .primary-nav__menu-link.is-active,
.pp-rail-menu__items .primary-nav__menu-link.is-active .primary-nav__menu-link-inner {
  color: #5dd6ff !important;
  -webkit-text-fill-color: #5dd6ff !important;
  background: transparent !important;
  border: none !important;
}

/* Kill Olivero's underline indicator + any focus/active text-decoration
 * on rail menu links. Without this, clicking a menu item flashes a thin
 * blue underline (the .primary-nav__menu-link-inner::after pseudo-element)
 * for a fraction of a second before navigation completes — visible enough
 * to look like a glitch. */
.pp-rail-menu__items .primary-nav__menu-link-inner::before,
.pp-rail-menu__items .primary-nav__menu-link-inner::after,
.pp-rail-menu__items .primary-nav__menu-link::before,
.pp-rail-menu__items .primary-nav__menu-link::after,
.pp-rail-menu__items a::before,
.pp-rail-menu__items a::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.pp-rail-menu__items .primary-nav__menu-link:focus,
.pp-rail-menu__items .primary-nav__menu-link:active,
.pp-rail-menu__items a:focus,
.pp-rail-menu__items a:active {
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Nuke every non-anchor descendant inside a rail menu <li>. Olivero adds
 * a submenu toggle <button>, a carrot-indicator <span> (yes, the class
 * is literally .primary-nav__menu-🥕 — emoji and all), and a level-2
 * submenu <ul> inside items that have children (e.g. "Services"). The
 * old selector list named these individually, which was fragile against
 * the emoji selector and Olivero version bumps. Hiding everything that
 * isn't the link is the future-proof move. */
.pp-rail-menu__items .primary-nav__menu-item > *:not(a),
.pp-rail-menu__items .primary-nav__button-toggle,
.pp-rail-menu__items .primary-nav__menu--level-2,
.pp-rail-menu__items ul ul,
.pp-rail-menu__items .visually-hidden,
.pp-rail-menu__items h2.block__title {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Force every rail menu anchor to fill the full <li> width with the same
 * box-sizing on every page. Without this, the active item (which carries
 * extra Drupal classes like is-active and aria-current="page") could
 * occasionally render at a slightly different intrinsic width than its
 * inactive twin on another page — perceptible as the menu "jittering"
 * a couple pixels horizontally on navigation. */
.pp-rail-menu__items .primary-nav__menu-item {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pp-rail-menu__items .primary-nav__menu-link,
.pp-rail-menu__items a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* LI vertical spacing is owned entirely by the anchor's 8px top/bottom
 * padding (see rule above). Zeroing LI margins so the first item and
 * subsequent items get IDENTICAL breathing room — previously the
 * adjacent-sibling rule added an extra 6px margin-top to every item
 * after the first, which after margin-collapse looked uniform between
 * items but asymmetric vs the menu's top edge. Using padding instead
 * of margin sidesteps margin-collapse entirely. */
.pp-rail-menu__items .primary-nav__menu-item--level-1 {
  margin: 0 !important;
}

/* The .pp-front-scoped duplicate rules that used to live here were a
 * specificity workaround for pikes-peak-hero.css's broad
 * .pp-front [class*="primary-nav"] a selector — which was narrowed in
 * commit 6bf660e to no longer leak onto the rail menu. With that leak
 * fixed, the generic .pp-rail-menu__items rules above apply identically
 * on both .pp-front and .peak-inner-page contexts, so the duplicate
 * .pp-front block has been removed. Single source of truth for rail
 * menu styling: the .pp-rail-menu__items rules at the top of this file. */

/* ---- Mini Peak AI Support promo card (was inline-styled in twig) ---------- */
.pp-mini-promo {
  display: flex;
  align-self: stretch;
  align-items: center;
  flex: 1 1 0;
  min-height: 80px;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0d2745 0%, #123a66 100%);
  border: 1px solid rgba(93, 214, 255, 0.35);
  text-decoration: none;
  color: #e6f0ff;
  line-height: 1.2;
  box-sizing: border-box;
}

.pp-mini-promo__avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(93, 214, 255, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.pp-mini-promo__body {
  flex: 1;
  min-width: 0;
}

.pp-mini-promo__tag {
  font-size: var(--peak-text-2xs);
  letter-spacing: var(--peak-tracking-mono);
  text-transform: uppercase;
  color: #5dd6ff;
  font-weight: var(--peak-weight-bold);
}

.pp-mini-promo__title {
  font-size: var(--peak-text-sm);
  font-weight: var(--peak-weight-bold);
  margin-top: 1px;
}

.pp-mini-promo__sub {
  font-size: var(--peak-text-2xs);
  opacity: 0.85;
  margin-top: 1px;
}

/* Mobile rail layout (<= 1024px) lives in components/rail-mobile.css —
 * single source of truth. Do NOT add mobile rail rules in this file or
 * they'll conflict with rail-mobile.css. */