/* ============================================================================
   UI-audit fixes (2026-08-12) — loaded after style.css / theme-blue.css.
   Each block states the audit finding it fixes. Keep fixes here, not in the
   compiled style.css.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   FIX 1 — Site-wide mobile horizontal overflow (~150px sideways scroll).
   Cause: the navbar row (logo lockup ~265px + Log In/Get started/hamburger
   cluster ~276px) is flex-nowrap and nothing shrinks, so at <541px the header
   pushes the whole document wider than the phone screen.
   Fix: below 576px shrink the logo lockup, hide its tagline, and hide the
   SECONDARY header button (Log In when logged out / Dashboard when logged in —
   both remain reachable: Log In via "Get started" → sign-up page link, and
   Dashboard via the avatar menu). Primary action + hamburger stay visible.
--------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* unscoped on purpose: the theme JS clones the navbar into a fixed copy
     that lives outside <header>, and both copies must shrink */
  .navbar .container { min-width: 0; }
  .navbar-brand .site-logo svg { width: 32px; height: 32px; }
  .navbar-brand .site-logo { gap: 8px !important; }
  .navbar-brand .site-logo > span > span:first-child { font-size: 1.05rem !important; }
  .navbar-brand .site-logo > span > span:last-child { display: none !important; }
  .navbar-other .hidden-mobile > a.btn:first-child { display: none !important; }
  .navbar-other .hidden-mobile { margin-left: 0.25rem !important; }
}

/* Safety net: this site never intends sideways scrolling. `clip` (not `hidden`)
   avoids creating a scroll container, so position:sticky keeps working. */
body { overflow-x: clip; }

/* ----------------------------------------------------------------------------
   FIX 1b — 81px sideways scroll on EVERY logged-in desktop page (all course
   lessons, /auth/restricted/, /billing/checkout/).
   Cause: the avatar dropdown menu is 200px wide, `visibility:hidden` (so it
   still takes layout space) and absolutely positioned hanging off the right
   edge of the viewport until first opened.
   Fix: anchor the closed menu to the right edge of its own nav item.
--------------------------------------------------------------------------- */
.navbar-other .nav-item.dropdown { position: relative; }
.navbar-other .dropdown-menu.dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
}

/* ----------------------------------------------------------------------------
   FIX 1c — Course-lesson pages: the sticky curriculum sidebar shows through
   the top navbar once you scroll.
   Cause: the scrolled (fixed-clone) navbar keeps the `transparent` class, so
   sticky page content renders through it.
   Fix: the fixed clone always paints an opaque white background above page
   content. (The at-rest navbar on hero pages keeps its transparency — this
   only targets the `.fixed` clone that appears on scroll.)
--------------------------------------------------------------------------- */
.navbar.navbar-light.fixed,
.navbar.center-nav.transparent.fixed {
  background: #ffffff !important;
  z-index: 1015 !important;
  box-shadow: 0 1px 10px rgba(30, 34, 40, 0.06);
}

/* ----------------------------------------------------------------------------
   FIX 1d — Short pages (billing/manage, auth pages at tablet height) left a
   plain white band between the footer and the bottom of the window.
   Sticky-footer: the content wrapper grows, the footer hugs the bottom.
--------------------------------------------------------------------------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > div.grow { flex: 1 0 auto; display: flex; flex-direction: column; }
body > div.grow > footer { margin-top: auto; }

/* ----------------------------------------------------------------------------
   FIX 2 — Decorative candlestick marquee overflowing the viewport on mobile
   (home page Trading Lab phone mockup and /lab/ hero demo card): the animated
   track is fixed-width (~1120px) and spills out of its card.
   Fix: clip at the card that owns the marquee.
--------------------------------------------------------------------------- */
.chartwrap { overflow: hidden !important; max-width: 100%; }

/* ----------------------------------------------------------------------------
   FIX 3 — Low-contrast text: fixed at the source in each template
   (blog_list/blog_detail date color, mission.html .mx-src, service.html
   .gc-bp .note, detail.html .cd-btn.disabled, dashboard.css button labels).
--------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   FIX 4 — Buttons with unreadable label colors (visually confirmed):
   dark-navy or green text sitting on the mid-blue button fill.
   Any solid-blue .btn gets white text.
--------------------------------------------------------------------------- */
.btn.\!bg-\[\#3f78e0\], a.btn[class*="bg-[#3f78e0]"], button.btn[class*="bg-[#3f78e0]"] {
  color: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   FIX 4b — The theme's cloned navbar rendered its buttons with a TRANSPARENT
   border, so "Log In" appeared as bare text on some pages. The outline button
   keeps its blue border in every navbar copy and state.
--------------------------------------------------------------------------- */
.navbar-other a.btn[href*="/auth/login"] {
  border-color: #3f78e0 !important;
  background: #ffffff !important;
  color: #3f78e0 !important;
}

/* ----------------------------------------------------------------------------
   FIX 5 — Contact page: email addresses wrapped/clipped in narrow cells.
   The address markup now carries a <wbr> after the "@" (contact.html), so the
   only break point is a clean one. Do NOT use overflow-wrap:anywhere here — it
   shattered the address into 4 mid-word fragments in the contact table.
--------------------------------------------------------------------------- */
table td a[href^="mailto:"] { white-space: normal; }

/* ----------------------------------------------------------------------------
   FIX 6 — Course detail (mobile): the "▶ INTERACTIVE" badge in a lesson row
   squeezed the title to one word per line. Let the meta cluster wrap onto its
   own line under the title instead of stealing the title's width.
--------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .cd-les { flex-wrap: wrap; row-gap: 4px; }
  /* the title keeps a readable minimum width; the meta cluster (badge,
     duration, lock) drops to its own line when there isn't room */
  .cd-les .l-title { flex: 1 1 200px; min-width: 0; }
  .cd-les .l-meta { margin-left: 44px; }
}