/* Learnaro Responsive Hardening V1 — cross-device safety layer */

html{max-width:100%;overflow-x:clip}
body:not(.wp-admin){max-width:100%;overflow-x:clip}
@supports not (overflow:clip){html,body:not(.wp-admin){overflow-x:hidden}}

/* Media and embeds should never push a layout wider than the viewport. */
body:not(.wp-admin) img{max-width:100%}
body:not(.wp-admin) video,body:not(.wp-admin) iframe,body:not(.wp-admin) canvas{max-width:100%}
body:not(.wp-admin) .entry-content{overflow-wrap:anywhere}
body:not(.wp-admin) .entry-content pre,body:not(.wp-admin) .entry-content code{max-width:100%;overflow-x:auto}

/* Flexible content needs to be allowed to shrink inside grids/flex layouts. */
.lr11-home,.lrp-funnel,.lr-growth,.woocommerce,.tutor-wrap,.elementor,.lr-global-footer{min-width:0}
.lr11-home>*,.lrp-funnel>*,.lr-growth>*,.woocommerce>*,.tutor-wrap>*,.elementor>*,.lr-global-footer>*{min-width:0}

/* Forms and controls remain usable on narrow devices. */
body:not(.wp-admin) input,body:not(.wp-admin) select,body:not(.wp-admin) textarea{max-width:100%}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{width:100%}

/* Tables: keep information accessible without forcing page-level horizontal scroll. */
.woocommerce-order-pay form#order_review table,.woocommerce-account .woocommerce-MyAccount-content table,.tutor-wrap .tutor-table-responsive table{max-width:100%}
.woocommerce-order-pay form#order_review,.woocommerce-account .woocommerce-MyAccount-content,.tutor-wrap .tutor-table-responsive{min-width:0}

/* Elementor/HTML-widget safety for older custom pages. */
.elementor .e-con,.elementor .e-con-inner,.elementor .elementor-widget,.elementor .elementor-widget-container{min-width:0;max-width:100%}
.elementor .elementor-widget-html iframe,.elementor .elementor-widget-html img,.elementor .elementor-widget-html video{max-width:100%}

/* Account login/register page — stack cleanly rather than squeezing two forms. */
@media(max-width:767px){
  .woocommerce-account #customer_login{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;margin-left:0!important;margin-right:0!important}
  .woocommerce-account #customer_login>.col-login,.woocommerce-account #customer_login>.col-register,.woocommerce-account #customer_login>.col-register-text{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding-left:0!important;padding-right:0!important}
  .woocommerce-account .wd-registration-page{width:100%!important;max-width:100%!important}
  .woocommerce-account form.login,.woocommerce-account form.register{width:100%!important;max-width:100%!important}
  .woocommerce-account .login-form-footer{display:flex!important;flex-wrap:wrap!important;gap:10px 16px!important;align-items:center!important}
  .woocommerce-account form .button{min-height:48px!important;padding-left:18px!important;padding-right:18px!important}

  /* WooCommerce data tables stay readable on phones. */
  .woocommerce-order-pay form#order_review table,.woocommerce-account .woocommerce-MyAccount-content table{display:block!important;width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .woocommerce-order-pay form#order_review th,.woocommerce-order-pay form#order_review td{white-space:normal!important;min-width:110px}

  /* Empty-cart/empty-checkout state gets a proper mobile action target. */
  .woocommerce .wd-empty-page{font-size:clamp(28px,9vw,40px)!important;line-height:1.08!important;text-align:center!important}
  .woocommerce .wd-empty-page-text{max-width:560px!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;font-size:15px!important;line-height:1.65!important}
  .woocommerce .return-to-shop{text-align:center!important}
  .woocommerce .return-to-shop .button{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:50px!important;padding:0 20px!important}

  /* Long headings/URLs should wrap rather than cause overflow. */
  .entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content a{overflow-wrap:anywhere}

  /* Compact devices: keep premium headings bold without overwhelming the viewport. */
  body.home .lr11-why-v2-head h2,body.home .lr11-compare-v2-head h2{font-size:clamp(36px,10.8vw,42px)!important}
  body.home .lr11-why-v2-close h3,body.home .lr11-compare-v2-decision h3{overflow-wrap:anywhere}

  /* Legacy/custom growth pages: prevent overly narrow media/text split. */
  .lr-growth-product{min-width:0}
  .lr-growth-product>div{min-width:0}

  /* Tutor tables/navigation remain reachable instead of clipping. */
  .tutor-wrap .tutor-table-responsive{display:block!important;width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  body.single-courses .tutor-nav{max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain}
}

@media(max-width:430px){
  /* Give the announcement copy and CTA enough room on small phones. */
  .lr-global-announcement-inner{grid-template-columns:minmax(0,1fr) auto!important}
  .lr-global-announcement-label{display:none!important}
  .lr-global-announcement-copy p{font-size:11.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .lr-global-announcement-cta{min-height:32px!important;padding:0 9px!important;font-size:10.5px!important}

  /* Two proof tiles can become cramped below ~430px. */
  .lr-shop-v20__proof{grid-template-columns:1fr!important}

  /* Make custom category landing cards breathe on very narrow screens. */
  .lr-growth-product{grid-template-columns:1fr!important}
  .lr-growth-product-img{width:100%!important;max-width:220px}

  /* No clipped CTA labels on phones. */
  .lr11-btn,.lr11-showcase-cta,.lr11-why-v2-cta,.lr11-compare-v2-cta,.lr-growth-btn,.lrp-btn{white-space:normal!important;text-align:center!important}
}

@media(max-width:360px){
  .whb-mobile-left .wd-logo img{width:142px!important;max-width:142px!important}
  body.home .lr11-why-v2-head h2,body.home .lr11-compare-v2-head h2{font-size:36px!important}
  .lr-global-footer-shell{width:calc(100% - 22px)!important}
}

@media(hover:none){
  .products .product-grid-item:hover,.wd-products .product-grid-item:hover,.lr11-why-v2-card:hover,.lr11-compare-v2-card.is-win:hover{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}