/* =====================================================
   UPCLASS NAV & FOOTER: DROPDOWN MENUS, NAV SPACING, FOOTER WRAP
   Loaded by website/upclass/upclass_base.html (next to the nav) on every upclass.ai
   page, after upstyle.css. Built on the site's own tokens (--card-bg, --border-color,
   --text-*), so it follows the [data-theme="dark"] switch.
   Menus: "Solutions" (the coaching-type pages, website/upclass_segments, in their
   groups), "Our Products" (static) and "Blog" (categories from the DB). Behaviour is in
   upnav.js; without it, :hover / :focus-within still open them.
   ===================================================== */

/* ---------- Room for the links ----------
   Three menus, up to four links and the sales actions share one row, and the container
   stops growing at 1320px. Keep every item on one line and tighten the spacing. Some
   links live in Our Products' "More in Upclass" (template): AI Features and Mobile Apps
   always, FAQ and Our team below 1400px, and Features below 1200px. Squeezing the row
   would also shrink the logo, so check the fit from 992px to 1600px after adding anything. */
.menu_first_row_link {
  white-space: nowrap;
}

@media (min-width: 992px) {
  .menu_first_row_link_wrapper {
    gap: 2px;
  }

  .menu_first_row_link {
    padding-right: 11px;
    padding-left: 11px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .menu_first_row_link {
    padding-right: 9px;
    padding-left: 9px;
    font-size: 0.9rem;
  }
}

/* ---------- Dropdown menus ---------- */
.menu_drop {
  position: relative;
}

.menu_drop_trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* "Our Products" has no page of its own, so its trigger is a button styled as a link. */
button.menu_drop_trigger {
  border: 0;
  background: transparent;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.menu_drop_caret {
  font-size: 0.68rem;
  transition: transform 0.2s ease;
}

.menu_drop_panel {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1010;
  width: 580px;
  max-width: calc(100vw - 32px);
  padding-top: 14px; /* a hover bridge between the trigger and the card */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.menu_drop_panel--narrow {
  width: 400px;
}

/* Solutions is the first menu, just right of the logo: its panel opens from the
   trigger's left edge instead of centring under it, so it never runs off the screen.
   (Doubled class: these must beat the centring rules below whatever the order.) */
.menu_drop_panel.menu_drop_panel--start {
  left: -8px;
  transform: translate(0, 6px);
}

.menu_drop.is-open .menu_drop_panel.menu_drop_panel--start,
.menu_drop:not(.is-js):hover .menu_drop_panel.menu_drop_panel--start,
.menu_drop:not(.is-js):focus-within .menu_drop_panel.menu_drop_panel--start {
  transform: translate(0, 0);
}

/* Solutions lists every coaching type (26 planned), by short name, under its group's label.
   The groups sit in four columns the server balances (upclass_segments.nav_columns), so a
   group never splits. The panel opens from the trigger's left edge, 230 to 340px in from
   992px up: these widths keep it on screen, and upnav.js nudges it left if it ever isn't.
   A short window scrolls the card instead of cutting it off. */
.menu_drop_panel.menu_drop_panel--mega {
  left: calc(-8px + var(--menu-nudge, 0px));
  width: 720px;
}

@media (min-width: 1200px) {
  .menu_drop_panel.menu_drop_panel--mega {
    width: 860px;
  }
}

.menu_drop_panel--mega .menu_drop_card {
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu_drop_cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 6px;
}

.menu_drop_group {
  padding: 6px 0 8px;
}

.menu_drop_group_label {
  margin: 0 10px 2px;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-theme="dark"] .menu_drop_group_label {
  color: #93c0ff;
}

/* A compact item: icon and short name on one line. */
.menu_drop_list--compact {
  gap: 0;
}

.menu_drop_list--compact .menu_drop_item {
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
}

.menu_drop_list--compact .menu_drop_icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.menu_drop_list--compact .menu_drop_name {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}

/* The open page: the highlight and its colour say it; no room for the "You are here" pill. */
.menu_drop_list--compact .menu_drop_item.is-active .menu_drop_name {
  color: var(--primary);
  font-weight: 700;
}

[data-theme="dark"] .menu_drop_list--compact .menu_drop_item.is-active .menu_drop_name {
  color: #93c0ff;
}

.menu_drop_list--compact .menu_drop_item.is-active .menu_drop_name::after {
  content: none;
}

/* Products for coaching institutes (upclass_segments.PRODUCTS), under the coaching types. */
.menu_drop_products {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.menu_drop_list--products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.menu_drop.is-open .menu_drop_panel,
.menu_drop:not(.is-js):hover .menu_drop_panel,
.menu_drop:not(.is-js):focus-within .menu_drop_panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.menu_drop.is-open .menu_drop_caret,
.menu_drop:not(.is-js):hover .menu_drop_caret,
.menu_drop:not(.is-js):focus-within .menu_drop_caret {
  transform: rotate(180deg);
}

.menu_drop.is-open .menu_drop_trigger {
  color: var(--primary);
  background: rgba(4, 79, 192, 0.08);
}

/* On a coaching-type page, its menu and its item show where you are. */
.menu_drop_trigger.is-current {
  color: var(--primary);
}

[data-theme="dark"] .menu_drop_trigger.is-current {
  color: #93c0ff;
}

.menu_drop_item.is-active {
  background: rgba(4, 79, 192, 0.07);
  box-shadow: inset 0 0 0 1px rgba(4, 79, 192, 0.2);
}

[data-theme="dark"] .menu_drop_item.is-active {
  background: rgba(124, 176, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(124, 176, 255, 0.28);
}

.menu_drop_item.is-active .menu_drop_name::after {
  content: 'You are here';
  /* One piece: when the name is long it drops to the next line whole, never split. */
  display: inline-block;
  white-space: nowrap;
  line-height: 1.5;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  vertical-align: 1px;
}

[data-theme="dark"] .menu_drop.is-open .menu_drop_trigger {
  color: #93c0ff;
  background: rgba(124, 176, 255, 0.1);
}

.menu_drop_card {
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: 0 28px 56px -24px rgba(15, 23, 42, 0.35), 0 2px 8px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] .menu_drop_card {
  box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.menu_drop_heading {
  margin: 4px 10px 8px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.menu_drop_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu_drop_list--single {
  grid-template-columns: minmax(0, 1fr);
}

.menu_drop_item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.menu_drop_item:hover,
.menu_drop_item:focus-visible {
  background: rgba(4, 79, 192, 0.07);
  color: var(--text-primary);
}

[data-theme="dark"] .menu_drop_item:hover,
[data-theme="dark"] .menu_drop_item:focus-visible {
  background: rgba(124, 176, 255, 0.1);
}

.menu_drop_trigger:focus-visible,
.menu_drop_item:focus-visible,
.menu_drop_all:focus-visible,
.menu_drop_more a:focus-visible,
.menu_mobile_group a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Icon tiles take a tone: a blog category's (blog_mgmt.upclass_design.category_theme)
   or a product's (set in the template). */
.menu_drop_icon {
  --nav-tone: #044FC0;
  --nav-tone-soft: rgba(4, 79, 192, 0.1);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--nav-tone-soft);
  color: var(--nav-tone);
  font-size: 1rem;
}

.menu_drop_icon[data-tone="teal"]   { --nav-tone: #0f766e; --nav-tone-soft: rgba(13, 148, 136, 0.12); }
.menu_drop_icon[data-tone="amber"]  { --nav-tone: #9a4507; --nav-tone-soft: rgba(245, 158, 11, 0.15); }
.menu_drop_icon[data-tone="violet"] { --nav-tone: #6d28d9; --nav-tone-soft: rgba(139, 92, 246, 0.13); }
.menu_drop_icon[data-tone="indigo"] { --nav-tone: #4338ca; --nav-tone-soft: rgba(79, 70, 229, 0.12); }
.menu_drop_icon[data-tone="rose"]   { --nav-tone: #be123c; --nav-tone-soft: rgba(225, 29, 72, 0.1); }
.menu_drop_icon[data-tone="green"]  { --nav-tone: #15803d; --nav-tone-soft: rgba(22, 163, 74, 0.12); }
.menu_drop_icon[data-tone="orange"] { --nav-tone: #c2410c; --nav-tone-soft: rgba(234, 88, 12, 0.12); }
.menu_drop_icon[data-tone="cyan"]   { --nav-tone: #0e7490; --nav-tone-soft: rgba(6, 182, 212, 0.13); }
.menu_drop_icon[data-tone="fuchsia"] { --nav-tone: #a21caf; --nav-tone-soft: rgba(192, 38, 211, 0.11); }
.menu_drop_icon[data-tone="sky"]    { --nav-tone: #0369a1; --nav-tone-soft: rgba(14, 165, 233, 0.13); }
.menu_drop_icon[data-tone="lime"]   { --nav-tone: #4d7c0f; --nav-tone-soft: rgba(101, 163, 13, 0.14); }
.menu_drop_icon[data-tone="slate"]  { --nav-tone: #475569; --nav-tone-soft: rgba(100, 116, 139, 0.13); }

[data-theme="dark"] .menu_drop_icon                      { --nav-tone: #93c0ff; --nav-tone-soft: rgba(47, 116, 221, 0.22); }
[data-theme="dark"] .menu_drop_icon[data-tone="teal"]   { --nav-tone: #5eead4; --nav-tone-soft: rgba(13, 148, 136, 0.22); }
[data-theme="dark"] .menu_drop_icon[data-tone="amber"]  { --nav-tone: #fcd34d; --nav-tone-soft: rgba(245, 158, 11, 0.18); }
[data-theme="dark"] .menu_drop_icon[data-tone="violet"] { --nav-tone: #c4b5fd; --nav-tone-soft: rgba(139, 92, 246, 0.22); }
[data-theme="dark"] .menu_drop_icon[data-tone="indigo"] { --nav-tone: #a5b4fc; --nav-tone-soft: rgba(79, 70, 229, 0.26); }
[data-theme="dark"] .menu_drop_icon[data-tone="rose"]   { --nav-tone: #fda4af; --nav-tone-soft: rgba(225, 29, 72, 0.2); }
[data-theme="dark"] .menu_drop_icon[data-tone="green"]  { --nav-tone: #86efac; --nav-tone-soft: rgba(22, 163, 74, 0.22); }
[data-theme="dark"] .menu_drop_icon[data-tone="orange"] { --nav-tone: #fdba74; --nav-tone-soft: rgba(234, 88, 12, 0.22); }
[data-theme="dark"] .menu_drop_icon[data-tone="cyan"]   { --nav-tone: #67e8f9; --nav-tone-soft: rgba(6, 182, 212, 0.2); }
[data-theme="dark"] .menu_drop_icon[data-tone="fuchsia"] { --nav-tone: #f0abfc; --nav-tone-soft: rgba(192, 38, 211, 0.22); }
[data-theme="dark"] .menu_drop_icon[data-tone="sky"]    { --nav-tone: #7dd3fc; --nav-tone-soft: rgba(14, 165, 233, 0.2); }
[data-theme="dark"] .menu_drop_icon[data-tone="lime"]   { --nav-tone: #bef264; --nav-tone-soft: rgba(101, 163, 13, 0.22); }
[data-theme="dark"] .menu_drop_icon[data-tone="slate"]  { --nav-tone: #cbd5e1; --nav-tone-soft: rgba(148, 163, 184, 0.22); }

.menu_drop_text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.menu_drop_name {
  font-size: 0.92rem;
  font-weight: 600;
}

.menu_drop_ext {
  margin-left: 2px;
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.menu_drop_desc {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.menu_drop_all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 4px 0;
  padding: 12px 8px 2px;
  border-top: 1px solid var(--border-color);
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.menu_drop_all:hover {
  color: var(--primary-dark);
}

[data-theme="dark"] .menu_drop_all,
[data-theme="dark"] .menu_drop_all:hover {
  color: #93c0ff;
}

.menu_drop_all .bi {
  transition: transform 0.2s ease;
}

.menu_drop_all:hover .bi {
  transform: translateX(3px);
}

/* "More in Upclass": the plain links that fold into Our Products below 1400px. */
.menu_drop_more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 10px 4px 0;
  padding: 12px 8px 2px;
  border-top: 1px solid var(--border-color);
}

.menu_drop_more_label {
  margin-right: 4px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu_drop_more a {
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.menu_drop_more a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

[data-theme="dark"] .menu_drop_more a:hover {
  border-color: #93c0ff;
  color: #93c0ff;
}

/* ---------- Mobile menu: each dropdown as a list nested under its heading ----------
   The menu is fixed at the top, so with three nested lists it can outgrow a phone's
   screen; it scrolls on its own instead. */
@media (max-width: 991.98px) {
  .menu_second_row {
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Logged-out visitors have the sticky demo bar (69px) at the bottom: let the last
     links scroll up above it. */
  .has_mobile_cta_bar .menu_second_row {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

.menu_mobile_group {
  flex: 1 1 100%;
  padding-bottom: 12px;
  border-top: 1px solid var(--border-color);
}

.menu_mobile_group_title {
  display: block;
  margin: 0;
  padding: 14px 12px 6px;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

a.menu_mobile_group_title:hover {
  color: var(--primary);
}

/* Solutions in the phone menu: a disclosure (it lists every coaching type), then each
   group's label over its types. */
.menu_mobile_disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.menu_mobile_disclosure > summary::-webkit-details-marker {
  display: none;
}

.menu_mobile_disclosure > summary::after {
  content: '\F282'; /* bi-chevron-down */
  font-family: 'bootstrap-icons';
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.menu_mobile_disclosure[open] > summary::after {
  transform: rotate(180deg);
}

.menu_mobile_disclosure > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.menu_mobile_all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 2px;
  padding: 6px 20px;
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

[data-theme="dark"] .menu_mobile_all {
  color: #93c0ff;
}

.menu_mobile_subgroup_label {
  margin: 8px 0 2px;
  padding: 0 12px 0 20px;
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.menu_mobile_group_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  margin: 0;
  padding: 0 4px 0 12px;
  list-style: none;
}

.menu_mobile_group_list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  text-decoration: none;
}

.menu_mobile_group_list a:hover,
.menu_mobile_group_list a.is-active {
  background: rgba(4, 79, 192, 0.08);
  color: var(--primary);
}

.menu_mobile_group_list a.is-active {
  font-weight: 600;
}

.menu_mobile_group_list .bi {
  flex: 0 0 auto;
  color: var(--primary);
}

[data-theme="dark"] .menu_mobile_group_list .bi {
  color: #93c0ff;
}

/* Products have long names: one to a row. */
.menu_mobile_group_list--wide {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 359.98px) {
  .menu_mobile_group_list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu_drop_panel,
  .menu_drop_caret,
  .menu_drop_all .bi,
  .menu_mobile_disclosure > summary::after {
    transition: none;
  }
}

/* ---------- Footer ----------
   The six legal links sat in one unwrapped flex row (upstyle.css), about 460px wide,
   so on phones they pushed the page past the screen and every upclass.ai page could
   be panned sideways. Let them wrap; on a wide screen they still fit on one line. */
.footer_legal_links {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}

@media (min-width: 768px) {
  .footer_legal_links {
    justify-content: flex-end;
  }
}