/* =========================================================
   PHASE 7 — MOBILE EXPERIENCE PACK (≤ 767.98px)
   Loads only on phones (linked with media attribute)
   Depends on: tru-core, tru-theme, tru-sections, override.css
========================================================= */

/* ---------- 0) MOBILE KNOBS ---------- */
:root{
  --tru-mobile-pad: 16px;
  --tru-mobile-gap: 14px;
  --tru-mobile-radius: 10px;
  --tru-pass-h: 46px;              /* keep parity with users patch */
  --tru-logo-h-mobile: 42px;
}

/* =========================================================
   1) LAYOUT / CONTAINMENT
========================================================= */

/* Kill left/right padding from deep Helix wrappers */
.container, .sp-row, .sp-column, .sp-module { padding-left:0 !important; padding-right:0 !important; }

#sp-main-body .row { gap: var(--tru-mobile-gap) !important; }

/* Sidebars stack under content */
#sp-left, #sp-right{
  order: 2 !important;
  max-width: 100% !important;
}

/* Panels breathe but don’t crowd */
#sp-component .osm-container,
#sp-component .profile,
#sp-component .profile-edit,
#sp-component .com-users-login.login{
  padding: clamp(16px, 4vw, 22px) !important;
  border-radius: var(--tru-mobile-radius) !important;
}

/* Shadows toned down to keep GPU cool */
#sp-component .osm-container,
#sp-component .profile,
#sp-component .profile-edit,
#sp-component .com-users-login.login{
  box-shadow: inset 0 0 14px rgba(0,0,0,.55), 0 0 16px rgba(210,176,85,.10) !important;
}

/* =========================================================
   2) HEADER + NAV
========================================================= */

#sp-header .logo img { height: var(--tru-logo-h-mobile) !important; width:auto !important; }
.offcanvas-toggler, .offcanvas-toggler-right{ padding:10px !important; min-height:44px !important; }

/* Make offcanvas full-width for easy reach */
.offcanvas-menu, .offcanvas-menu .offcanvas-inner{
  width: 100% !important;
  max-width: 100% !important;
}

/* Larger tap targets in offcanvas links */
.offcanvas-menu .menu li a{
  padding: 14px 18px !important;
  min-height: 44px !important;
}

/* =========================================================
   3) TYPOGRAPHY
========================================================= */

html, body { -webkit-text-size-adjust: 100%; }
body{ line-height:1.6 !important; font-size: 16px !important; }
h1{ font-size: clamp(22px, 6.2vw, 28px) !important; line-height:1.15 !important; }
h2{ font-size: clamp(20px, 5.6vw, 24px) !important; line-height:1.2 !important; }
h3{ font-size: clamp(18px, 5vw, 20px) !important; line-height:1.25 !important; }

/* Article readability */
.article-body, .item-page, .blog-item{
  padding: 0 var(--tru-mobile-pad) !important;
}
.article-body img, .item-page img{ margin: 14px auto !important; }

/* Strong/bold: keep silver (no gold fill on mobile articles) */
.article-body strong, .article-body b,
.item-page strong, .item-page b {
  color: #e8e8e8 !important;
  text-shadow: none !important;
}

/* =========================================================
   4) FORMS (Login + Profile + OSM)
========================================================= */

/* Inputs span full width */
.com-users-login__form input[type="text"],
.com-users-login__form input[type="password"],
.profile-edit .form-control,
.profile-edit .form-select,
.profile-edit select{
  width:100% !important; max-width:none !important;
}

/* Password rows already normalized in your patch; keep width */
.com-users-login__form .password-group > .input-group,
.profile-edit .password-group > .input-group{ width:100% !important; }

/* Buttons: full width, comfy height */
#sp-component .btn{ width:100% !important; min-height:48px !important; }

/* Login options stick to form width, no extra margins */
.com-users-login__options{
  width:100% !important;
  margin: 8px 0 0 0 !important;
  padding: 10px 12px !important;
}

/* Choices / Fancy Select popups stay above */
.profile-edit joomla-field-fancy-select::part(popup),
.profile-edit joomla-field-fancy-select::part(listbox),
.profile-edit joomla-field-fancy-select .choices__list--dropdown{
  z-index: 100000 !important;
}

/* =========================================================
   5) MEMBERSHIP PRO — PLANS & TABLES
========================================================= */

/* Plans are already 1-up under 768 in your core; tighten spacing */
#osm-plans-list-pricing-table-flat .osm-plan{
  padding: 22px 16px !important;
  gap: 10px !important;
}

/* Tables: horizontal scroll container if needed */
.osm-container .table-responsive, .table-responsive{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* =========================================================
   6) JOURNAL GRID / ARTICLES
========================================================= */

/* 1 column on phones (reinforce) */
#sp-component .journal-grid{
  grid-template-columns: 1fr !important;
  gap: var(--tru-mobile-gap) !important;
  padding: 0 var(--tru-mobile-pad) !important;
}

#sp-component .journal-grid .journal-card{
  padding: 14px !important;
}

/* Title clamp to avoid tall cards */
#sp-component .journal-grid .journal-title{
  -webkit-line-clamp: 2 !important;
}

/* =========================================================
   7) FOOTER
========================================================= */

#sp-footer .container, #sp-footer .container-inner{
  padding-left: var(--tru-mobile-pad) !important;
  padding-right: var(--tru-mobile-pad) !important;
}

/* Footer menu → centered row with dot separators intact */
#sp-footer #sp-footer2 nav.sp-module ul#main-nav.menu{
  justify-content:center !important;
}

/* Watermark less intense on small screens */
#sp-footer::before{ opacity:.18 !important; background-size: 380px auto !important; }

/* =========================================================
   8) PERFORMANCE & MOTION
========================================================= */

/* Reduce glow/blur on phones */
[class*="journal-card"], .osm-plan, .profile, .profile-edit{
  box-shadow: 0 8px 18px rgba(0,0,0,.35), 0 0 12px rgba(0,234,255,.12) !important;
}

/* Hover-only effects shouldn’t jump on touch */
@media (hover:none){
  .journal-card:hover, .osm-plan:hover{ transform:none !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* =========================================================
   9) QUALITY-OF-LIFE (touch)
========================================================= */

/* Bigger checkboxes/radios hit area */
input[type="checkbox"], input[type="radio"]{ transform: scale(1.15); }

/* Anchor jump offset (for fixed headers) */
:target{ scroll-margin-top: 70px; }

/* iOS highlight */
a, button{ -webkit-tap-highlight-color: rgba(0,234,255,.15); }
@media (max-width: 991.98px) {
  #sp-main-body.custom4 > .container > .container-inner > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }
/* =========================================================
   10) SPLIT COLUMN FIX
========================================================= */
  #sp-component.col-lg-8,
  #sp-right.col-lg-4,
  #sp-component,
  #sp-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }

  #sp-component { order: 1 !important; }
  #sp-right { order: 2 !important; }

  #sp-right {
    position: static !important;
    top: auto !important;
    margin-top: 20px !important;
  }
}
/* =========================================================
   MOBILE LOGIN FORM FIX
   Fix username/password layout on small screens
========================================================= */

@media (max-width: 767.98px) {

  /* Login form wrapper */
  .login,
  .login form,
  .login-form,
  .member-login,
  .mod-login,
  .mod-login form {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Input fields */
  .login input[type="text"],
  .login input[type="password"],
  .login input[type="email"],
  .mod-login input[type="text"],
  .mod-login input[type="password"],
  .mod-login input[type="email"],
  .member-login input[type="text"],
  .member-login input[type="password"],
  .member-login input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* Labels stack correctly */
  .login label,
  .mod-login label,
  .member-login label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  /* Form groups */
  .login .control-group,
  .login .form-group,
  .mod-login .control-group,
  .mod-login .form-group {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Login button */
  .login button,
  .login .btn,
  .mod-login button,
  .mod-login .btn,
  .member-login button,
  .member-login .btn {
    width: 100% !important;
    max-width: 100% !important;
  }

}
/* =========================================================
   MOBILE LOGIN PASSWORD TOGGLE FIX
   - restores eye icon
   - reduces oversized toggle block
========================================================= */

@media (max-width: 767.98px) {

  /* Keep the login input group aligned */
  .mod-login .input-group,
  .login .input-group,
  .member-login .input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Make the password field fill available space */
  .mod-login .input-group input[type="password"],
  .login .input-group input[type="password"],
  .member-login .input-group input[type="password"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 1% !important;
  }

  /* Shrink the toggle button to proper size */
  .mod-login .input-password-toggle,
  .login .input-password-toggle,
  .member-login .input-password-toggle {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* Hide broken inline icon glyphs */
  .mod-login .input-password-toggle .icon-eye,
  .mod-login .input-password-toggle .icon-fw,
  .login .input-password-toggle .icon-eye,
  .login .input-password-toggle .icon-fw,
  .member-login .input-password-toggle .icon-eye,
  .member-login .input-password-toggle .icon-fw {
    display: none !important;
  }

  /* Draw a clean eye icon with pseudo-element */
  .mod-login .input-password-toggle::before,
  .login .input-password-toggle::before,
  .member-login .input-password-toggle::before {
    content: "\f06e"; /* eye */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    display: inline-block !important;
    color: #f4fbff !important;
    -webkit-text-fill-color: #f4fbff !important;
    text-shadow: none !important;
  }

  /* Show eye-slash for active/pressed state */
  .mod-login .input-password-toggle[aria-pressed="true"]::before,
  .mod-login .input-password-toggle.active::before,
  .login .input-password-toggle[aria-pressed="true"]::before,
  .login .input-password-toggle.active::before,
  .member-login .input-password-toggle[aria-pressed="true"]::before,
  .member-login .input-password-toggle.active::before {
    content: "\f070"; /* eye-slash */
  }

  /* Hover color */
  .mod-login .input-password-toggle:hover::before,
  .login .input-password-toggle:hover::before,
  .member-login .input-password-toggle:hover::before {
    color: #ffd65c !important;
    -webkit-text-fill-color: #ffd65c !important;
  }

  /* Prevent the visually hidden text from affecting layout */
  .mod-login .input-password-toggle .visually-hidden,
  .login .input-password-toggle .visually-hidden,
  .member-login .input-password-toggle .visually-hidden {
    position: absolute !important;
  }
}
/* =========================================================
   MEMBERSHIP / AUTH FORMS — MOBILE FULL-WIDTH INPUT FIX
========================================================= */

@media (max-width: 768px) {

  /* form wrappers */
  .os-membership-form,
  .membership-form,
  .login,
  .login-form,
  .remind,
  .reset,
  .registration,
  .com-users .form-horizontal,
  .com-users .login,
  .com-users .remind,
  .com-users .reset,
  .com-users .registration {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* rows / groups */
  .os-membership-form .control-group,
  .os-membership-form .form-group,
  .membership-form .control-group,
  .membership-form .form-group,
  .com-users .control-group,
  .com-users .form-group,
  .login .control-group,
  .login .form-group,
  .remind .control-group,
  .reset .control-group,
  .registration .control-group {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

  /* labels */
  .os-membership-form label,
  .membership-form label,
  .com-users label,
  .login label,
  .remind label,
  .reset label,
  .registration label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px !important;
  }

  /* inputs */
  .os-membership-form input[type="text"],
  .os-membership-form input[type="email"],
  .os-membership-form input[type="password"],
  .os-membership-form input[type="tel"],
  .os-membership-form input[type="number"],
  .os-membership-form select,
  .os-membership-form textarea,

  .membership-form input[type="text"],
  .membership-form input[type="email"],
  .membership-form input[type="password"],
  .membership-form input[type="tel"],
  .membership-form input[type="number"],
  .membership-form select,
  .membership-form textarea,

  .com-users input[type="text"],
  .com-users input[type="email"],
  .com-users input[type="password"],
  .com-users input[type="tel"],
  .com-users input[type="number"],
  .com-users select,
  .com-users textarea,

  .login input[type="text"],
  .login input[type="email"],
  .login input[type="password"],
  .remind input[type="text"],
  .remind input[type="email"],
  .reset input[type="text"],
  .reset input[type="email"],
  .reset input[type="password"],
  .registration input[type="text"],
  .registration input[type="email"],
  .registration input[type="password"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* input groups / password wrappers */
  .os-membership-form .input-group,
  .membership-form .input-group,
  .com-users .input-group,
  .login .input-group,
  .remind .input-group,
  .reset .input-group,
  .registration .input-group,
  .os-membership-form .input-append,
  .membership-form .input-append,
  .com-users .input-append {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }

  .os-membership-form .input-group input,
  .membership-form .input-group input,
  .com-users .input-group input,
  .login .input-group input,
  .remind .input-group input,
  .reset .input-group input,
  .registration .input-group input {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
  }

  /* buttons */
  .os-membership-form button,
  .os-membership-form .btn,
  .membership-form button,
  .membership-form .btn,
  .com-users button,
  .com-users .btn,
  .login button,
  .login .btn,
  .remind button,
  .remind .btn,
  .reset button,
  .reset .btn,
  .registration button,
  .registration .btn {
    max-width: 100% !important;
  }

  /* common Helix/Bootstrap columns inside forms */
  .os-membership-form [class*="col-"],
  .membership-form [class*="col-"],
  .com-users [class*="col-"],
  .login [class*="col-"],
  .remind [class*="col-"],
  .reset [class*="col-"],
  .registration [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 768px) {
  .os-membership,
  .com-users,
  .item-page .os-membership-form,
  .item-page .com-users,
  #osm-container,
  #user-registration,
  #member-registration,
  #login-form,
  #form-login,
  #reset-form,
  #remind-form {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
}