/* ============================================================
   ALTSeek v2 pages: the site's main navigation bar, and the Subscription Plans button in
   the product bar.

   v2/include_siteNav.cfm draws the bar that the CMS template draws over Affirm, Atlas and
   the classic search (Alyna, 10/30/2026: without it the v2 pages were "acting like 2
   different sites"). The values are the live bar's computed styles on buttonwooddd.com,
   10/30/2026: Bootstrap 4 .navbar-expand-lg in a .container, the theme's --dark #191919
   and --warning #c9a24a, Roboto. Linked after altseek-search.css on programSearch.cfm,
   programRatings.cfm and sentinel.cfm.
   ============================================================ */

/* ---- main bar ---------------------------------------------------------- */
.as-sitenav {
  position: relative; z-index: 30;   /* its menus open over the pinned product bar (z 20) */
  background: #191919;
  font-family: Roboto, var(--font-sans); font-size: 16px; line-height: 24px;
}
.as-sitenav-in {
  display: flex; align-items: center; min-height: 69px;
  max-width: 1140px; margin: 0 auto; padding: 8px 16px;
}
.as-sitenav-logo { display: block; flex: none; padding: 5px 0; margin-right: 16px; }
.as-sitenav-logo img { display: block; width: 150px; height: auto; }
.as-sitenav-panel {
  display: flex; align-items: center; justify-content: flex-end;
  flex: 1 1 auto; margin-left: 24px;
}
.as-sitenav-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.as-sitenav-list > li { position: relative; }

.as-sitenav summary { list-style: none; }
.as-sitenav summary::-webkit-details-marker { display: none; }

.as-sitenav .as-sitenav-link {
  display: block; padding: 8px 12px; color: #fff; cursor: pointer; white-space: nowrap;
  transition: color 80ms ease;
}
.as-sitenav .as-sitenav-link:hover,
.as-sitenav-dd[open] > .as-sitenav-link { color: #c9a24a; }

/* Bootstrap's caret */
.as-sitenav-toggle::after {
  content: ""; display: inline-block; margin-left: .255em; vertical-align: .255em;
  border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent;
}

/* ---- menus ------------------------------------------------------------- */
.as-sitenav-dd > .as-sitenav-menu {
  position: absolute; top: calc(100% + 2px); left: 0; width: 240px; padding: 8px 0;
  background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 4px;
  animation: as-fade 150ms ease-out;
}
.as-sitenav .as-sitenav-item {
  display: block; padding: 4px 24px; color: #333; cursor: pointer; white-space: nowrap;
}
.as-sitenav .as-sitenav-item:hover { color: #000; background: #f8f9fa; }

/* The third level opens inside the menu, indented on a hairline, and its caret flips while
   it is open (the live site's own override of the theme's fly-out). */
.as-sitenav-sub[open] > .as-sitenav-toggle::after { transform: rotate(180deg); }
.as-sitenav-menu.is-sub {
  margin: 0 0 4px 24px; padding: 0; border-left: 1px solid rgba(0,0,0,.12);
}
.as-sitenav-menu.is-sub .as-sitenav-item {
  padding: 5px 16px 5px 20px; font-size: .9em; line-height: 1.35; white-space: normal;
}

/* ---- gold button ------------------------------------------------------- */
.as-sitenav .as-sitenav-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  margin-left: 24px; padding: 6px 12px; white-space: nowrap;
  background: #c9a24a; border: 1px solid #c9a24a; border-radius: 4px; color: #191919;
  transition: background-color 80ms ease, border-color 80ms ease;
}
.as-sitenav .as-sitenav-btn:hover { background: #b79038; border-color: #ae8935; color: #191919; }

/* ---- focus ------------------------------------------------------------- */
.as-sitenav a:focus-visible, .as-sitenav summary:focus-visible, .as-sitenav-burger:focus-visible {
  outline: 2px solid #e2c27b; outline-offset: 2px;
}
.as-sitenav-menu a:focus-visible, .as-sitenav-menu summary:focus-visible {
  outline: 2px solid #191919; outline-offset: -2px;
}

/* ---- menu button (below 992px) ----------------------------------------- */
.as-sitenav-burger {
  display: none; margin-left: auto; padding: 9px; border: 0; background: none;
  color: #c9a24a; cursor: pointer;
}
.as-sitenav-burger svg { display: block; }

/* ---- widths: Bootstrap's container steps and the theme's link sizes ------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .as-sitenav-in { max-width: 960px; }
}
@media (min-width: 1200px) {
  .as-sitenav-logo img { width: 200px; }
  .as-sitenav .as-sitenav-link { padding: 8px 21.6px; }
}
@media (min-width: 1600px) {
  .as-sitenav-logo img { width: 220px; }
  .as-sitenav .as-sitenav-link { padding: 8px 24px; font-size: 17.6px; }
}
@media (max-width: 991px) {
  .as-sitenav-in { flex-wrap: wrap; min-height: 0; }
  .as-sitenav-burger { display: block; }
  .as-sitenav-panel {
    display: none; flex: 0 0 100%; flex-direction: column; margin: 0; padding: 8px 0 16px;
    text-align: center;
  }
  .as-sitenav.is-open .as-sitenav-panel { display: flex; }
  .as-sitenav-list { flex-direction: column; align-items: stretch; width: 100%; }
  .as-sitenav .as-sitenav-link { padding: 10px 0; font-size: 19.2px; }
  .as-sitenav-dd > .as-sitenav-menu { position: static; width: auto; margin: 0 0 8px; animation: none; }
  .as-sitenav .as-sitenav-item { padding: 10px 16px; font-size: 19.2px; white-space: normal; }
  .as-sitenav-menu.is-sub { margin: 0 0 4px; border-left: 0; }
  .as-sitenav .as-sitenav-btn { margin: 16px 0 0; }
}

/* ---- Subscription Plans in the product bar -------------------------------
   v2/include_productNav.cfm, for the members the classic bar shows it to
   (include_memberNav.cfm): Alyna, 10/30/2026, "and the subscription plans button there too
   like on Affirm and Atlas". The classic button's colours, badge and pulse, at the height of
   the logo tiles beside it. */
.as-root a.as-subplan {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 38px;
  padding: 0 12px; margin-left: 4px; border-radius: 8px;
  border: 1px solid #c9a24a; background: #051d40; color: #f5f5f5;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  animation: as-subplan-pulse 2s infinite;
}
.as-root a.as-subplan:hover {
  background: #0a2c5e; color: #f5f5f5; animation: none; box-shadow: 0 0 12px rgba(201,162,74,.5);
}
.as-root a.as-subplan:focus-visible { outline: 2px solid var(--as-gold-soft); outline-offset: 2px; }
.as-subplan svg { display: block; flex: none; }
.as-subplan-badge {
  padding: 2px 6px; border-radius: 4px; background: #c9a24a; color: #051d40;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.as-prodnav.is-compact .as-subplan { height: 32px; }
@keyframes as-subplan-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,162,74,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(201,162,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,162,74,0); }
}

@media (prefers-reduced-motion: reduce) {
  .as-sitenav .as-sitenav-link, .as-sitenav .as-sitenav-btn { transition: none; }
  .as-sitenav-dd > .as-sitenav-menu { animation: none; }
  .as-root a.as-subplan { animation: none; }
}