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