/* ============================================================================
   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; }
}

/* ----------------------------------------------------------------------------
   FIX 1c (2026-10-02) — Menu button cut off on 360px and 320px phones.
   Cause: logged out, the header still needs ~374px after FIX 1 (logo 178px +
   "Get started" + menu button 181px + padding). The page doesn't pan (the
   clip safety net below holds), but the menu button sat 14px (360px) to 54px
   (320px) off-screen — in both the header and the theme's fixed clone.
   Fix: tighten side padding, logo and button below 414px, a step more below
   340px. Measured: the menu button now ends 10-15px inside the edge from 320px
   up, logged in and out. "Get started" stays: the off-canvas menu has no
   sign-up link.
--------------------------------------------------------------------------- */
@media (max-width: 413.98px) {
  .navbar .container { padding-left: 12px !important; padding-right: 12px !important; }
  .navbar-brand .site-logo svg { width: 26px; height: 26px; }
  .navbar-brand .site-logo { gap: 6px !important; }
  .navbar-brand .site-logo > span > span:first-child { font-size: .92rem !important; }
  .navbar-other .hidden-mobile { margin-left: .15rem !important; }
  .navbar-other .hidden-mobile > a.btn { padding: .3rem .6rem !important; font-size: .78rem !important; }
}
@media (max-width: 339.98px) {
  .navbar .container { padding-left: 10px !important; padding-right: 10px !important; }
  .navbar-brand .site-logo svg { width: 24px; height: 24px; }
  .navbar-brand .site-logo > span > span:first-child { font-size: .84rem !important; }
  .navbar-other .hidden-mobile > a.btn { padding: .28rem .5rem !important; font-size: .74rem !important; }
}

/* ----------------------------------------------------------------------------
   FIX 1d (2026-10-02) — Course and pricing cards clipped on 320px phones.
   Cause: a `1fr` grid track never shrinks below its item's min-content width,
   so /courses/ cards ran 25px and /pricing/ cards 41px past the screen edge.
   Fix: let the cards shrink; their text wraps normally. Measured: no change
   at 360px or desktop.
--------------------------------------------------------------------------- */
.cx-grid > .cx-card, .pr-grid > .pr-card { min-width: 0; }

/* 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; }
}