/* =========================================================
   Phase 2 — Course Details Overflow + Lang Toggle Tweak (Patch v24)
   File: /assets/css/mobile-polish.v3.2.css
   Scope: CSS-only. Course Details only for overflow + header lang spacing.
   ========================================================= */

/* --- Carry-forward: keep prior Phase 2 fixes (do not remove) --- */

/* Homepage CTA fix (mobile) */
@media (max-width: 450px){
  html body.page-home .site-header .nav .cta,
  html body.page-home .site-header nav.nav button.cta,
  html body.page-home .site-header .nav button.cta{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
  }
}

/* More dropdown on-screen + capped */
@media (max-width: 420px){
  html body nav.nav .menu[role="menu"]{
    position: fixed !important;
    top: 74px !important;
    left: 12px !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 9999 !important;
    transform: none !important;
  }
  html body nav.nav .menu[role="menu"] a{ white-space: nowrap !important; }
}

/* Footer wrap centered */
@media (max-width: 920px){
  html body footer.site-footer .container{ text-align:center !important; }
  html body footer.site-footer .container .links{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
    gap:10px 14px !important;
  }
  html body footer.site-footer .container .links a{
    display:inline-block !important;
    float:none !important;
    margin:0 !important;
    text-align:center !important;
  }
}

/* Inputs (typed + autofill) black */
html[data-theme="blue"] :where(input,textarea,select),
html[data-theme="dark"] :where(input,textarea,select),
html[data-theme="slate"] :where(input,textarea,select){
  color:#111 !important;
}
html[data-theme] :where(input, textarea, select):-webkit-autofill,
html[data-theme] :where(input, textarea, select):-webkit-autofill:hover,
html[data-theme] :where(input, textarea, select):-webkit-autofill:focus,
html[data-theme] :where(input, textarea, select):-webkit-autofill:active{
  -webkit-text-fill-color:#111 !important;
  caret-color:#111 !important;
  box-shadow:0 0 0px 1000px rgba(255,255,255,0.96) inset !important;
  transition:background-color 9999s ease-out 0s;
}

/* =========================================================
   COURSE DETAILS ONLY — eliminate remaining right overflow
   ========================================================= */

html body.page-course-details,
html body.page-course-details *{
  box-sizing: border-box !important;
}

/* Keep header white (Course Details only) */
html body.page-course-details .site-header{
  background: #fff !important;
  background-color: #fff !important;
}

/* Stronger overflow clamp (clip beats hidden on some browsers) */
html, body{
  overflow-x: clip;
}
html body.page-course-details{
  overflow-x: clip !important;
}
html body.page-course-details main,
html body.page-course-details footer.site-footer,
html body.page-course-details section{
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* Allow grid/flex children to shrink (prevents single item pushing width) */
html body.page-course-details :where(.cd-hero__wrap, .cd-hero__wrap > *, .cd-container, .cd-container > *){
  min-width: 0 !important;
}

/* Clamp any section/card-like blocks (common overflow culprits) */
html body.page-course-details :where(.cd-card, .cd-card *, .cd-section, .cd-section *, .cd-hero, .cd-hero *, .cd-bullets, .cd-bullets *, .cd-badges, .cd-badges *, .cd-compare, .cd-compare *){
  max-width: 100% !important;
}

/* Fix: "How it works" card + similar blocks should never exceed viewport */
@media (max-width: 820px){
  html body.page-course-details :where(.cd-card, .cd-section .cd-card){
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Media always contained */
html body.page-course-details :where(img, video, iframe, svg, canvas){
  max-width: 100% !important;
  height: auto !important;
}

/* Tables scroll instead of overflow */
html body.page-course-details :where(.table-wrap, .compare, .cd-compare){
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Long text never forces width */
html body.page-course-details :where(h1,h2,h3,h4,p,li,a,span,div){
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================================
   COURSE DETAILS ONLY — lang toggle padding/spacing tweak
   (does not touch the toggle system logic)
   ========================================================= */

html body.page-course-details .site-header .lang{
  margin-left: 8px !important;   /* reduce big gap */
}

html body.page-course-details .site-header .lang a{
  padding: 8px 12px !important;  /* slightly tighter */
}

@media (max-width: 620px){
  html body.page-course-details .site-header .lang{
    margin-left: 0 !important;
  }
}
/* =========================================================
   Course Details — kill the last overflow culprit (hero-sub)
   ========================================================= */
html body.page-course-details .hero-sub{
  white-space: normal !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Make sure the hero text column can actually shrink */
html body.page-course-details .cd-hero__wrap,
html body.page-course-details .cd-hero__wrap > div,
html body.page-course-details .cd-hero__wrap > div *{
  min-width: 0 !important;
}

/* If any pill/badge row is forcing width, allow wrapping */
html body.page-course-details .cd-badges,
html body.page-course-details .cd-badges *{
  flex-wrap: wrap !important;
  min-width: 0 !important;
}
/* =========================================================
   Course Details — unify section rhythm on narrow widths
   ========================================================= */
@media (max-width: 520px){
  html body.page-course-details .cd-section{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Cards should fill the section content area */
  html body.page-course-details .cd-card,
  html body.page-course-details .cd-compare,
  html body.page-course-details .cd-calculator{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* =========================================================
   CHECKOUT INPUT TEXT MUST BE BLACK (typed + autofill)
   Targets your actual markup: form.checkout-form input/textarea/select
   ========================================================= */

.checkout-form :is(input, select, textarea) {
  color: #111 !important;
  caret-color: #111 !important;
}

/* Force readable field surface in Blue/Dark/Slate (prevents "dark field" + white text combos) */
html[data-theme="blue"]  .checkout-form :is(input, select, textarea),
html[data-theme="dark"]  .checkout-form :is(input, select, textarea),
html[data-theme="slate"] .checkout-form :is(input, select, textarea) {
  background: #fff !important;
}

/* Chrome/Safari autofill paint + text color */
.checkout-form :is(input, textarea, select):-webkit-autofill,
.checkout-form :is(input, textarea, select):-webkit-autofill:hover,
.checkout-form :is(input, textarea, select):-webkit-autofill:focus,
.checkout-form :is(input, textarea, select):-webkit-autofill:active {
  -webkit-text-fill-color: #111 !important;
  caret-color: #111 !important;
  box-shadow: 0 0 0px 1000px #fff inset !important; /* defeats dark autofill background */
  transition: background-color 999999s ease-in-out 0s !important;
}

/* Optional: placeholder stays readable (not required, but nice) */
.checkout-form :is(input, textarea)::placeholder {
  color: rgba(0,0,0,.55) !important;
}
/* =========================================================
   FINAL BOSS: Checkout field text MUST be black (typed + autofill)
   Targets your actual markup: .checkout-form
   ========================================================= */

html[data-theme] body .checkout-form label,
html[data-theme] body .checkout-form label * {
  color: #111 !important;
}

html[data-theme] body .checkout-form input,
html[data-theme] body .checkout-form textarea,
html[data-theme] body .checkout-form select {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  caret-color: #111 !important;
  background-color: #fff !important;
}

/* Autofill (Chrome/Safari) */
html[data-theme] body .checkout-form input:-webkit-autofill,
html[data-theme] body .checkout-form textarea:-webkit-autofill,
html[data-theme] body .checkout-form select:-webkit-autofill,
html[data-theme] body .checkout-form input:-webkit-autofill:focus,
html[data-theme] body .checkout-form textarea:-webkit-autofill:focus,
html[data-theme] body .checkout-form select:-webkit-autofill:focus {
  -webkit-text-fill-color: #111 !important;
  caret-color: #111 !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
}