/* FirstHack phone fixes. Loaded last on every page, so it wins over learn.css.
   Targets every phone width from 320px up (S21 FE is 384px, many phones 360-412px). */

/* Nothing may push the page sideways. clip (not hidden) keeps sticky headers working. */
html, body { overflow-x: clip; max-width: 100%; }
img, video, iframe, svg, canvas { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
pre { overflow-x: auto; }
table { max-width: 100%; }

/* Drawer: start exactly under the visible top bar (JS sets --lp-dtop),
   so the first link (Home) is never hidden behind the bar or the promo strip. */
@media (max-width: 1000px) {
  .lp-side {
    top: var(--lp-dtop, var(--lp-top)) !important;
    bottom: 0;
    height: auto !important;
    max-height: none;
    z-index: 75;
    width: min(var(--lp-side, 264px), 86vw) !important;
    flex-basis: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.lp-open .lp-scrim { inset: var(--lp-dtop, var(--lp-top)) 0 0 !important; z-index: 72; }
  body.lp-open { overflow: hidden; }
}

/* Top bar: fit on narrow phones without overflowing. */
@media (max-width: 440px) {
  .lp-top { padding: 0 8px !important; gap: 6px !important; }
  .lp-top .lp-icon { width: 34px; height: 34px; }
  .lp-brand { font-size: 17px !important; min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; }
  .lp-auth { gap: 6px; min-width: 0; }
  .lp-auth .lp-btn { padding: 0 11px; height: 36px; font-size: 13px; }
}
@media (max-width: 350px) {
  .lp-brand { font-size: 15.5px !important; }
  .lp-auth #themeToggle { display: none; }
  .lp-auth .lp-btn { padding: 0 9px; }
}

/* Promo strip above the bar: keep it on one line and inside the screen. */
@media (max-width: 520px) {
  .promo-strip { max-width: 100vw; overflow: hidden; }
}

/* Generic content safety on phones. */
@media (max-width: 640px) {
  .lp-inner, .lp-cols { padding-left: 12px !important; padding-right: 12px !important; }
  .lp-main { min-width: 0; }
  input, select, textarea { max-width: 100%; }
  /* 16px stops iOS/Samsung zooming in when a field is tapped. */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
}