/* =========================================================
   PHASE 6.4 — OVERRIDE & COMPATIBILITY LAYER
   Purpose: Hotfixes • Joomla / Helix / MPro Adjustments
   Loads LAST in cascade (after tru-core, tru-theme, tru-sections)
========================================================= */

/* =========================================================
   1. HELIX FRAMEWORK & STRUCTURAL SAFEGUARDS
========================================================= */

/* --- Remove excess wrapper gaps --- */
#sp-hero:empty,
#sp-feature:empty,
#sp-slider:empty,
#sp-search:empty,
.sp-section:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* --- Top alignment lock between header & main body --- */
#sp-position1,
#sp-mb1,
#sp-main-body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* --- Sticky header placeholder neutralization --- */
.sticky-header-placeholder {
  display: block !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* =========================================================
   2. JOOMLA MODULE & COMPONENT NORMALIZATION
========================================================= */

/* --- Membership Pro login / register --- */
.com_osmembership,
.osmembership-page,
div[id*="osmembership"] {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  color: var(--base-text);
  font-family: 'Montserrat', sans-serif;
}
.com_osmembership h2, .osmembership-page h2 {
  font-family: 'Orbitron', sans-serif !important;
  color: var(--accent-gold);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255,214,92,0.3);
}

/* --- Smart Search Component (com-finder) --- */
.com-finder .search,
.com-finder .search-results {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 auto !important;
  max-width: 800px !important;
  padding: 20px 0 !important;
}
.com-finder .search input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: var(--accent-silver);
  font-size: 1rem;
}
.com-finder .search button {
  margin-top: 10px;
  padding: 10px 22px;
  background: var(--accent-cyan);
  border: none;
  border-radius: 6px;
  color: #000;
  font-weight: 700;
  cursor: pointer;
}
.com-finder .search button:hover { background: var(--accent-gold); }

/* --- Joomla System Messages (login errors, etc.) --- */
.alert, .alert-message, .system-message {
  background: rgba(255,74,74,0.08) !important;
  border: 1px solid rgba(255,74,74,0.3) !important;
  color: var(--accent-silver) !important;
  font-weight: 500 !important;
  padding: 12px 18px !important;
  border-radius: 6px !important;
  margin: 10px auto !important;
  max-width: 600px;
  text-align: center;
}

/* =========================================================
   3. TYPOGRAPHY & ALIGNMENT CORRECTIONS
========================================================= */

/* --- Article module / blog text normalization --- */
.article-body, .item-page, .blog-item {
  color: var(--base-text) !important;
  line-height: 1.7 !important;
  font-size: 1rem !important;
  font-family: 'Montserrat', sans-serif !important;
  background: none !important;
  padding: 0 !important;
}
.article-body img, .item-page img {
  max-width: 100% !important;
  height: auto !important;
  margin: 20px auto !important;
  display: block !important;
  filter: brightness(0.98) contrast(1.1);
}

/* --- Joomla pagination / navigation alignment --- */
.pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 40px !important;
}
.pagination a, .pagination span {
  color: var(--accent-silver) !important;
  background: rgba(255,255,255,0.05) !important;
  padding: 10px 16px !important;
  margin: 2px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: background .3s ease, color .3s ease;
}
.pagination a:hover, .pagination span.active {
  background: var(--accent-cyan) !important;
  color: #000 !important;
}

/* =========================================================
   4. RESPONSIVE PROTECTION
========================================================= */

/* --- Prevent horizontal overflow --- */
body, html {
  overflow-x: hidden !important;
  width: 100% !important;
}

/* --- Ensure all tru-sections center under extreme zoom --- */
[data-phase6-section] {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100vw !important;
}

/* --- Collapse nested Helix divs under small viewports --- */
@media (max-width: 768px) {
  .container, .sp-row, .sp-column, .sp-module {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   5. DIAGNOSTIC UTILITY CLASSES (Optional)
========================================================= */

/* Use for debugging layout gaps or module presence */
.outline-red { outline: 1px solid red !important; }
.outline-blue { outline: 1px solid cyan !important; }
.outline-gold { outline: 1px solid gold !important; }

/* =========================================================
   END OF PHASE 6.4 — OVERRIDE LAYER
========================================================= */
/* Collapse empty Helix section gaps */
.sp-section:empty,
.sp-section .sp-column:empty,
.sp-module-content:empty,
.mod-custom:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* =========================================================
   TWILIGHT RUN — MEMBERSHIP CLEANUP PATCH
   Removes redundant wrapper layers + improves text contrast
========================================================= */

/* --- 1. Remove excess internal white wrappers --- */
#sp-component .osm-container > div,
#sp-component .osm-container .osm-item-wrapper > div,
#sp-component .osm-container .osm-item-description > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- 2. Collapse empty containers to avoid stacked layers --- */
#sp-component .osm-container div:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- 3. Improve text legibility inside pricing tables --- */
#sp-component .osm-plan-property-label,
#sp-component .osm-plan-property-value,
#sp-component .osm-item-description table td,
#sp-component .osm-item-description table th {
  color: #e8e8e8 !important;          /* brighter font */
  font-weight: 500 !important;
}

/* Highlight “Duration” and “Price” labels in gold */
#sp-component .osm-plan-property-label {
  color: #d4c17a !important;
  font-weight: 600 !important;
  text-shadow: 0 0 6px rgba(210,176,85,0.45);
}

/* --- 4. Refine spacing & shadows --- */
#sp-component .osm-item-wrapper {
  margin-bottom: 30px !important;
  box-shadow:
    inset 0 0 16px rgba(0,0,0,0.6),
    0 0 16px rgba(210,176,85,0.2) !important;
}
/* =========================================================
   MENU OVERRIDES
========================================================= */

/* Reset Helix transparent wrappers */
aside .sp-module,
aside .sp-module-content,
aside .sp-column,
aside .mod-custom {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Shared Menu Core */
aside .sp-module-content ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
aside .sp-module-content ul.menu li {
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
aside .sp-module-content ul.menu li:last-child {
  border-bottom: none;
}
aside .sp-module-content ul.menu li a {
  display: block;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}
aside .sp-module h2.sp-module-title {
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  position: relative;
  z-index: 3;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
}

/* =========================================================
   MENU OVERRIDES
========================================================= */

/* 🌍 Planet Guide — Silver Gradient */
aside .planet-menu,
aside .planet-menu .sp-module-content,
aside .planet-menu .sp-module-content ul.menu {
  background: linear-gradient(90deg, #d0d0d0, #7e7e7e) !important;
  border: 2px solid #d0d0d0 !important;
  border-radius: 10px !important;
  box-shadow: 0 0 25px rgba(208,208,208,0.65) !important;
  padding: 20px !important;
}
aside .planet-menu .sp-module-content ul.menu li a {
  color: #1a1a1a !important;
}
aside .planet-menu .sp-module-content ul.menu li a:hover {
  background: rgba(255,255,255,0.25);
  color: #000 !important;
}

/* 🚀 Starship Guide — Gold Gradient */
aside .starship-menu,
aside .starship-menu .sp-module-content,
aside .starship-menu .sp-module-content ul.menu {
  background: linear-gradient(90deg, #ffde70, #b38a25) !important;
  border: 2px solid #ffd65c !important;
  border-radius: 10px !important;
  box-shadow: 0 0 25px rgba(255,214,92,0.65) !important;
  padding: 20px !important;
}
aside .starship-menu .sp-module-content ul.menu li a {
  color: #2a1c00 !important;
}
aside .starship-menu .sp-module-content ul.menu li a:hover {
  background: rgba(255,255,255,0.25);
  color: #000 !important;
}

/* 🌌 Stellar Guide — Cyan Gradient */
aside .stellar-menu,
aside .stellar-menu .sp-module-content,
aside .stellar-menu .sp-module-content ul.menu {
  background: linear-gradient(90deg, #00eaff, #0085a2) !important;
  border: 2px solid #00eaff !important;
  border-radius: 10px !important;
  box-shadow: 0 0 25px rgba(0,234,255,0.6) !important;
  padding: 20px !important;
}
aside .stellar-menu .sp-module-content ul.menu li a {
  color: #fff !important;
}
aside .stellar-menu .sp-module-content ul.menu li a:hover {
  background: rgba(0,0,0,0.15);
  color: #ffde70 !important;
}

/* ⚙️ Tech Guide — Orange Gradient */
aside .tech-menu,
aside .tech-menu .sp-module-content,
aside .tech-menu .sp-module-content ul.menu {
  background: linear-gradient(90deg, #ffb84d, #b66b0e) !important;
  border: 2px solid #ff9f40 !important;
  border-radius: 10px !important;
  box-shadow: 0 0 25px rgba(255,159,64,0.65) !important;
  padding: 20px !important;
}
aside .tech-menu .sp-module-content ul.menu li a {
  color: #fff !important;
}
aside .tech-menu .sp-module-content ul.menu li a:hover {
  background: rgba(0,0,0,0.15);
  color: #111 !important;
}

/* 📓 Journal Menu — Softened Violet Gradient */
aside .journal-menu,
aside .journal-menu .sp-module-content,
aside .journal-menu .sp-module-content ul.menu {
  background: linear-gradient(90deg, #5a3b8c, #3a2665) !important;
  border: 2px solid #b97fff !important;
  border-radius: 10px !important;
  box-shadow: 0 0 25px rgba(185,127,255,0.5) !important;
  padding: 20px !important;
}
aside .journal-menu .sp-module-content ul.menu li a {
  color: #f0eaff !important;
}
aside .journal-menu .sp-module-content ul.menu li a:hover {
  background: rgba(255,255,255,0.15);
  color: #ffd65c !important;
}

/* 👥 Members / Site Menu — Deep Blue Gradient */
aside .member-menu,
aside .member-menu .sp-module-content,
aside .member-menu .sp-module-content ul.menu {
  background: linear-gradient(90deg, #0c1c2b, #071018) !important;
  border: 2px solid #00eaff !important;
  border-radius: 10px !important;
  box-shadow: 0 0 25px rgba(0,234,255,0.55) !important;
  padding: 20px !important;
}
aside .member-menu .sp-module-content ul.menu li a {
  color: #e0e0e0 !important;
}
aside .member-menu .sp-module-content ul.menu li a:hover {
  background: rgba(0,234,255,0.15);
  color: #ffde70 !important;
}

/* =========================================================
   TRU • Users (Login + Profile Edit) — Final Minimal Patch
   - ONE height knob
   - True flex password rows (icons + input same line/height)
   - Profile Edit password columns = full width
   - FA icons visible/centered (no jumping)
   - Login "options" block dark (no white panel)
   - Timezone Fancy Select popup un-clipped and above
========================================================= */

/* ---------- 0) Knobs ---------- */
html body.com_users {
  --tru-pass-h: 46px;                 /* 40–48px usually looks best */
}

/* =========================================================
   1) PASSWORD ROWS (LOGIN + EDIT PROFILE)
   Uses your exact markup: .password-group > .input-group
========================================================= */

/* Make the inner line a real flex row that can stretch */
html body.com_users #sp-component .password-group > .input-group {
  display: flex !important;
  align-items: stretch !important;      /* all children same height */
  flex-wrap: nowrap !important;         /* no wrapping → no offset icons */
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;              /* let the input grow instead of overflow */
  gap: 0 !important;
}

/* Fixed-square icon cells (left key + right eye) */
html body.com_users #sp-component .password-group > .input-group > .input-group-text,
html body.com_users #sp-component .password-group > .input-group > .input-password-toggle {
  flex: 0 0 var(--tru-pass-h) !important;
  width: var(--tru-pass-h) !important;
  min-width: var(--tru-pass-h) !important;
  height: var(--tru-pass-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  border-width: 1px !important;
}

/* Seamless borders at joins */
html body.com_users #sp-component .password-group > .input-group > .input-group-text {
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
}
html body.com_users #sp-component .password-group > .input-group > .input-password-toggle {
  border-left: none !important;
  border-radius: 0 6px 6px 0 !important;
  cursor: pointer !important;
}

/* Input: fill all remaining space; ignore HTML size="30" */
html body.com_users #sp-component .password-group > .input-group > input.form-control[type="password"],
html body.com_users #sp-component #jform_password1,
html body.com_users #sp-component #jform_password2 {
  flex: 1 1 auto !important;            /* fills between icon cells */
  width: 1% !important;                 /* bootstrap-safe flex trick */
  max-width: none !important;
  min-width: 0 !important;
  height: var(--tru-pass-h) !important;
  line-height: normal !important;       /* correct caret baseline */
  padding: 0 12px !important;
  margin: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

/* Kill legacy blockers that forced short inputs / wrapping */
html body.com_users #sp-component .password-group,
html body.com_users #sp-component .password-group * {
  flex-shrink: 1 !important;
  white-space: normal !important;
  width: auto !important;
  max-width: none !important;
}

/* Visual parity (keep your dark theme) */
html body.com_users #sp-component .password-group > .input-group > .input-group-text,
html body.com_users #sp-component .password-group > .input-group > .input-password-toggle {
  background: rgba(18,18,25,.95) !important;
  border: 1px solid rgba(0,234,255,.30) !important;
  color: #00eaff !important;
}
html body.com_users #sp-component .password-group > .input-group > input.form-control[type="password"] {
  background: rgba(15,15,22,.95) !important;
  color: #e0e0e0 !important;
  border-top: 1px solid rgba(0,234,255,.30) !important;
  border-bottom: 1px solid rgba(0,234,255,.30) !important;
}

/* =========================================================
   2) PROFILE EDIT — Make only the password columns full width
   (so they match Name/Username length)
========================================================= */

html body.com_users.view-profile #sp-component .profile-edit .row.mb-3 > .col-lg-6 {
  /* Only widens if the column contains a password field */
}
html body.com_users.view-profile #sp-component .profile-edit .row.mb-3 > .col-lg-6 .password-group {
  /* When a password-group is inside, widen that column to 100% */
  /* Target the column wrapper via parent selector chain */
  /* (apply to its nearest .col-lg-6 ancestor) */
}
html body.com_users.view-profile #sp-component .profile-edit .row.mb-3 > .col-lg-6:where(:not(:first-child)) { /* keep selector weight low */ }

/* Practical widening: widen the specific .col-lg-6 that holds password-group */
html body.com_users.view-profile #sp-component .profile-edit .row.mb-3 > .col-lg-6 .password-group {
  /* climb one level and widen the column */
}
html body.com_users.view-profile #sp-component .profile-edit .row.mb-3 > .col-lg-6 {
  /* Safe global widen for Edit Profile rows; Email etc. will keep their natural width
     unless they also contain .password-group */
}
html body.com_users.view-profile #sp-component .profile-edit .row.mb-3 > .col-lg-6 .password-group { /* do the actual widen */
  /* widen the host column */
}
html body.com_users.view-profile #sp-component .profile-edit .row.mb-3 > .col-lg-6 .password-group {
  /* using :has() would be perfect but avoid it for compatibility.
     Instead, widen all .col-lg-6 in the password fieldset block: */
}
html body.com_users.view-profile #sp-component .profile-edit fieldset legend + .row.mb-3 > .col-lg-6 {
  /* Fallback kept generic—apply a precise widen below */
}

/* **Final, reliable widen (no :has()): target the two known inputs by id** */
html body.com_users.view-profile #sp-component .profile-edit #jform_password1,
html body.com_users.view-profile #sp-component .profile-edit #jform_password2 {
  width: 100% !important;               /* input spans full column */
}
html body.com_users.view-profile #sp-component .profile-edit #jform_password1,
html body.com_users.view-profile #sp-component .profile-edit #jform_password2 {
  /* widen their immediate .col-lg-6 wrappers to full width */
}
html body.com_users.view-profile #sp-component .profile-edit #jform_password1 { display: block !important; }
html body.com_users.view-profile #sp-component .profile-edit #jform_password2 { display: block !important; }

/* Column widen by traversing up the DOM once (no :has()) */
html body.com_users.view-profile #sp-component .profile-edit #jform_password1,
html body.com_users.view-profile #sp-component .profile-edit #jform_password2 {
  /* nearest .col-lg-6 wrapper */
}
html body.com_users.view-profile #sp-component .profile-edit #jform_password1 { }
html body.com_users.view-profile #sp-component .profile-edit #jform_password2 { }

/* Direct, robust approach: widen ALL .col-lg-6 in the password fieldset.
   (This page only has the two password rows in that first fieldset.) */
html body.com_users.view-profile #sp-component .profile-edit fieldset:first-of-type .col-lg-6 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: block !important;
}

/* Ensure the inner password line uses that width */
html body.com_users.view-profile #sp-component .profile-edit .password-group > .input-group {
  width: 100% !important;
  max-width: none !important;
}

/* =========================================================
   3) FONT AWESOME — Make glyphs render and center
========================================================= */

html body.com_users #sp-component .input-group-text .fa,
html body.com_users #sp-component .input-group-text .fas,
html body.com_users #sp-component .input-group-text .fa-solid {
  display: inline-block !important;
  line-height: 1 !important;
  font-size: 18px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide template glyph; use FA eye via pseudo for perfect centering */
html body.com_users #sp-component .password-group .input-password-toggle .icon-eye,
html body.com_users #sp-component .password-group .input-password-toggle .icon-fw { display: none !important; }
html body.com_users #sp-component .password-group .input-password-toggle::before {
  content: "\f06e"; /* fa-eye */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}
html body.com_users #sp-component .password-group .input-password-toggle[aria-pressed="true"]::before {
  content: "\f070"; /* fa-eye-slash */
}

/* =========================================================
   4) LOGIN — Password Recovery / Options panel (dark)
========================================================= */

html body.com_users.view-login #sp-component .com-users-login__options {
  background: #0e0f14 !important;
  border: 1px solid rgba(0,0,0,.25) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,.6) !important;
  width: 85% !important;
  margin: 14px auto 0 !important;
}
html body.com_users.view-login #sp-component .com-users-login__options .list-group-item {
  background: transparent !important;
  border: 0 !important;
}

/* =========================================================
   5) HEADER ADJUSTMENT
========================================================= */
/* ===== TRU — Header "Sign In" spacing + FA icon (desktop) ===== */
@media (min-width: 992px) {
  /* add a safe right gutter to the header’s right column */
  html body #menu-right {
    padding-right: clamp(16px, 2vw, 28px) !important;
    box-sizing: border-box !important;
  }

  /* put breathing room between the Sign In and the burger */
  html body #menu-right .header-modules {
    gap: 16px !important;              /* space between modules */
    padding-right: 8px !important;     /* small inner pad as well */
  }
  html body #menu-right .offcanvas-toggler-right {
    margin-left: 10px !important;      /* keeps it off the Sign In link */
  }

  /* make the Sign In link itself a comfy target */
  html body #menu-right .sp-sign-in {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
  }
}

/* Ensure the FA glyph on Sign In is visible (some themes hide .far) */
html body #menu-right .sp-sign-in .fa,
html body #menu-right .sp-sign-in .far,
html body #menu-right .sp-sign-in .fas {
  display: inline-block !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* If you prefer a "login" arrow instead of the user outline, uncomment:
html body #menu-right .sp-sign-in .far,
html body #menu-right .sp-sign-in .fa { display:none !important; }
html body #menu-right .sp-sign-in::before {
  content:"\f2f6";                      /* right-to-bracket */
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight:900;
  display:inline-block;
  line-height:1;
  margin-right:6px;
}
/* TRU — Force FA icon on header "Sign In" (no .far dependency) */
html body #menu-right .sp-sign-in {
  display: inline-flex !important;
  align-items: center !important;
}

/* hide any built-in span icon so we control the glyph */
html body #menu-right .sp-sign-in .fa,
html body #menu-right .sp-sign-in .far,
html body #menu-right .sp-sign-in .fas {
  display: none !important;
}

/* draw a SOLID user icon before the text */
html body #menu-right .sp-sign-in::before {
  content: "\f007";                       /* fa-user (solid) */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free" !important;
  font-weight: 900 !important;            /* solid weight */
  display: inline-block !important;
  line-height: 1 !important;
  margin-right: 0.4rem !important;        /* like .me-1 */
  opacity: 1 !important;
  visibility: visible !important;
}

/* optional: make sure the link itself looks crisp on hover */
html body #menu-right .sp-sign-in:hover {
  text-decoration: none !important;
}

/* =========================================================
   MEMBERSHIP PRO OVERRIDES
========================================================= */

/* ---------------------------------------------------------
   1) TIMEZONE Fancy Select — unclip & stack above
--------------------------------------------------------- */

/* Ancestors must not clip the popup */
html body.com_users.view-profile #sp-main-body,
html body.com_users.view-profile #sp-component,
html body.com_users.view-profile #sp-component .sp-column,
html body.com_users.view-profile #sp-component .profile-edit {
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Host component above siblings */
html body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select {
  position: relative !important;
  z-index: 1002 !important;
}

/* Native ::part + Choices.js fallback */
html body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select::part(popup),
html body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select::part(listbox),
html body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select .choices__list--dropdown {
  position: absolute !important;
  z-index: 100000 !important;
  background: rgba(15,15,20,.98) !important;
  border: 1px solid rgba(0,234,255,.35) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.65) !important;
}

/* ---------------------------------------------------------
   2) Profile Edit — expand layout to full width
--------------------------------------------------------- */

/* A) Expand the narrow wrapper under .profile-edit */
#sp-component .profile-edit > .row.justify-content-center > .col-lg-10.col-xl-7,
#sp-component .profile-edit > .row.justify-content-center > [class^="col-"],
#sp-component .profile-edit > .row.justify-content-center > [class*=" col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
}

/* B) Fieldsets take full line */
#sp-component .profile-edit fieldset {
  width: 100% !important;
  max-width: 100% !important;
}

/* C) Inside fieldset rows, make every column full width */
#sp-component .profile-edit fieldset .row.mb-3 > [class^="col-"],
#sp-component .profile-edit fieldset .row.mb-3 > [class*=" col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
}

/* D) Controls stretch */
#sp-component .profile-edit .form-control,
#sp-component .profile-edit .form-select,
#sp-component .profile-edit select,
#sp-component .profile-edit input[type="text"],
#sp-component .profile-edit input[type="email"],
#sp-component .profile-edit input[type="password"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* E) Password rows fill line and do not wrap */
#sp-component .profile-edit .password-group > .input-group {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  gap: 0 !important;
}

/* ---------------------------------------------------------
   3) Passkey Login (WebAuthn) — full width + dark theme
--------------------------------------------------------- */

/* Make passkey block span full container */
html body.com_users.view-profile #sp-component .profile-edit
  .col-lg-6:has(#jform_webauthn_webauthn-lbl),
html body.com_users.view-profile #sp-component .profile-edit
  .col-lg-6:has(#plg_system_webauthn-management-interface) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Table shell */
html body.com_users.view-profile #sp-component .profile-edit
  #plg_system_webauthn-management-interface .table {
  background: #13151b !important;
  color: #e8ecf1 !important;
  border: 1px solid rgba(0,234,255,.35) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Header row */
html body.com_users.view-profile #sp-component .profile-edit
  #plg_system_webauthn-management-interface thead.table-dark th {
  background: rgba(0,234,255,.18) !important;
  color: #ffde70 !important;
  border-color: rgba(0,234,255,.35) !important;
}

/* Body cells + striping on dark */
html body.com_users.view-profile #sp-component .profile-edit
  #plg_system_webauthn-management-interface tbody td {
  background: #0f1117 !important;
  color: #e8ecf1 !important;
  border-color: rgba(255,255,255,.08) !important;
}
html body.com_users.view-profile #sp-component .profile-edit
  #plg_system_webauthn-management-interface .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: #10131a !important;
}

/* “Add New Passkey” button */
html body.com_users.view-profile #sp-component .profile-edit
  #plg_system_webauthn-manage-add.btn {
  font-family: "Orbitron", sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #d2b055 !important;
  border: 1px solid rgba(210,176,85,.35) !important;
  background: linear-gradient(180deg, rgba(210,176,85,.25), rgba(120,90,25,.35)) !important;
  box-shadow: 0 0 16px rgba(210,176,85,.2) !important;
  border-radius: 8px !important;
}
html body.com_users.view-profile #sp-component .profile-edit
  #plg_system_webauthn-manage-add.btn:hover {
  background: linear-gradient(180deg, rgba(210,176,85,.45), rgba(140,100,35,.55)) !important;
  color: #fff !important;
}

/* Legend / label contrast */
html body.com_users.view-profile #sp-component .profile-edit fieldset legend,
html body.com_users.view-profile #sp-component .profile-edit #jform_webauthn_webauthn-lbl {
  color: #ffde70 !important;
}

/* ---------------------------------------------------------
   4) Password Toggle + Left Key — ensure FA shows
--------------------------------------------------------- */

html body.com_users #sp-component .profile-edit .input-password-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border-radius: 0 6px 6px 0 !important;
  font-size: 0 !important; /* hide span metrics */
  box-sizing: border-box !important;
}

/* Use FA eye; hide template spans */
html body.com_users #sp-component .profile-edit .input-password-toggle::before {
  content: "\f06e"; /* fa-eye */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-block !important;
  opacity: 1 !important;
}
html body.com_users #sp-component .profile-edit .input-password-toggle[aria-pressed="true"]::before {
  content: "\f070"; /* fa-eye-slash */
}
html body.com_users #sp-component .profile-edit .input-password-toggle .icon-eye,
html body.com_users #sp-component .profile-edit .input-password-toggle .icon-fw {
  display: none !important;
}

/* Left key icon visibility */
html body.com_users #sp-component .profile-edit .input-group-text .fa,
html body.com_users #sp-component .profile-edit .input-group-text .fas,
html body.com_users #sp-component .profile-edit .input-group-text .fa-solid {
  display: inline-block !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 18px !important;
}

/* ---------------------------------------------------------
   5) Buttons — Tech-Section styles (FA prefixes included)
   - Profile view “Edit” = Gold / Black text
   - Edit Profile “Submit” = Logout Blue / Black text
   - Cancel = Cyan outline
   - Logout = Logout Blue
--------------------------------------------------------- */

/* Base sizing + typography (scoped) */
html body.com_users #sp-component .profile-edit .btn,
html body.com_users.view-login  #sp-component .com-users-login .btn,
html body.com_users.view-logout #sp-component .logout .btn,
html body.com_users #sp-component form[action*="task=user.logout"] button,
html body.com_users #sp-component form[action*="task=users.logout"] button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 12px 22px !important;
  border-radius: 8px !important;
  font-family: "Orbitron", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
  text-decoration: none !important;
}

/* Profile (read-only) — Edit button/link: Gold */
html body.com_users.view-profile #sp-component .profile a.btn,
html body.com_users.view-profile #sp-component .profile .btn,
html body.com_users.view-profile #sp-component .profile a[href*="task=profile.edit"] {
  background: linear-gradient(90deg, #ffde70, #c9a63e) !important;
  color: #111 !important;
  border: 0 !important;
  box-shadow: 0 0 14px rgba(255,224,100,.45) !important;
  border-radius: 8px !important;
}
html body.com_users.view-profile #sp-component .profile a.btn:hover,
html body.com_users.view-profile #sp-component .profile .btn:hover,
html body.com_users.view-profile #sp-component .profile a[href*="task=profile.edit"]:hover {
  background: linear-gradient(90deg, #ffe891, #d8b756) !important;
  color: #111 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 20px rgba(255,224,100,.65) !important;
}

/* Edit Profile — Submit button (Logout blue) */
html body.com_users.view-profile #sp-component .profile-edit form#member-profile .btn.btn-primary[type="submit"],
html body.com_users.view-profile #sp-component .profile-edit form#member-profile button.btn.btn-primary[type="submit"],
html body.com_users.view-profile #sp-component .profile-edit form#member-profile button.btn.btn-primary.validate[type="submit"] {
  background: linear-gradient(180deg, #00eaff, #007d99) !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: 0 0 16px rgba(0,234,255,.25) !important;
}
html body.com_users.view-profile #sp-component .profile-edit form#member-profile .btn.btn-primary[type="submit"]:hover,
html body.com_users.view-profile #sp-component .profile-edit form#member-profile .btn.btn-primary[type="submit"]:focus-visible {
  background: linear-gradient(180deg, #00d4e6, #006c84) !important;
  color: #000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 24px rgba(0,234,255,.40) !important;
  outline: none !important;
}

/* Cancel — cyan outline */
html body.com_users #sp-component .profile-edit .btn-secondary,
html body.com_users #sp-component .profile-edit a.btn.btn-secondary {
  background: transparent !important;
  color: #00eaff !important;
  border: 1px solid rgba(0,234,255,.6) !important;
  box-shadow: 0 0 10px rgba(0,234,255,.25) inset !important;
}
html body.com_users #sp-component .profile-edit .btn-secondary:hover,
html body.com_users #sp-component .profile-edit a.btn.btn-secondary:hover {
  background: rgba(0,234,255,.12) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 16px rgba(0,234,255,.4) inset, 0 0 12px rgba(0,234,255,.25) !important;
}

/* Logout — cyan → teal (view + modules) */
html body.com_users.view-logout #sp-component .logout .btn,
html body.com_users.view-logout #sp-component form button[type="submit"],
html body.com_users.view-logout #sp-component .btn.btn-primary[type="submit"],
html body.com_users #sp-component form[action*="task=user.logout"] button,
html body.com_users #sp-component form[action*="task=users.logout"] button {
  background: linear-gradient(180deg, #00eaff, #007d99) !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: 0 0 16px rgba(0,234,255,.25) !important;
}
html body.com_users.view-logout #sp-component .logout .btn:hover,
html body.com_users.view-logout #sp-component form button[type="submit"]:hover,
html body.com_users.view-logout #sp-component .btn.btn-primary[type="submit"]:hover,
html body.com_users #sp-component form[action*="task=user.logout"] button:hover,
html body.com_users #sp-component form[action*="task=users.logout"] button:hover {
  background: linear-gradient(180deg, #00d4e6, #006c84) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 24px rgba(0,234,255,.40) !important;
}

/* FA prefixes on buttons */
html body.com_users #sp-component .profile-edit .btn-primary::before,
html body.com_users #sp-component .profile-edit button[type="submit"]::before {
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight: 900;
  line-height: 1;
}
html body.com_users #sp-component .profile-edit .btn-secondary::before,
html body.com_users #sp-component .profile-edit a.btn.btn-secondary::before {
  content: "\f00d"; /* fa-times/xmark */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight: 900;
  line-height: 1;
}
html body.com_users.view-logout #sp-component .logout .btn::before,
html body.com_users.view-logout #sp-component form button[type="submit"]::before,
html body.com_users #sp-component form[action*="task=user.logout"] button::before,
html body.com_users #sp-component form[action*="task=users.logout"] button::before {
  content: "\f2f5"; /* fa-right-from-bracket */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight: 900;
  line-height: 1;
}

/* Ensure FA prefix glyphs render cleanly */
html body.com_users #sp-component .btn::before,
html body.com_users.view-logout #sp-component .logout .btn::before {
  display: inline-block !important;
  margin-right: 8px !important;
  opacity: 1 !important;
  vertical-align: middle !important;
}

/* Disabled state */
html body.com_users #sp-component .profile-edit .btn:disabled,
html body.com_users.view-logout #sp-component .logout .btn:disabled,
html body.com_users #sp-component form[action*="task=user.logout"] button:disabled,
html body.com_users #sp-component form[action*="task=users.logout"] button:disabled {
  opacity: .55 !important;
  filter: grayscale(35%) !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ---------------------------------------------------------
   6) Login Form — unified alignment
   Default: Left-aligned; Centered preset included (commented)
--------------------------------------------------------- */

/* Common tidy */
html body.com_users.view-login #sp-component .com-users-login__form {
  display: grid !important;
  gap: 14px !important;
}
html body.com_users.view-login #sp-component .com-users-login__form .control-group,
html body.com_users.view-login #sp-component .com-users-login__form .com-users-login__input {
  margin: 0 !important;
}
html body.com_users.view-login #sp-component .com-users-login__form .form-label {
  display: block !important;
  margin-bottom: 6px !important;
  text-align: left !important;
}

/* Inputs (username + password group) */
html body.com_users.view-login #sp-component .com-users-login__form input[type="text"],
html body.com_users.view-login #sp-component .com-users-login__form .password-group > .input-group {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Buttons fill same width */
html body.com_users.view-login #sp-component .com-users-login__submit .controls {
  margin: 0 !important;
  padding: 0 !important;
}
html body.com_users.view-login #sp-component .com-users-login__submit .btn {
  width: 100% !important;
}

/* Options align with form */
html body.com_users.view-login #sp-component .com-users-login__options {
  margin: 10px 0 0 0 !important;
}

/* Remove older centering / 90% rules */
html body.com_users.view-login #sp-component .com-users-login input,
html body.com_users.view-login #sp-component .com-users-login .password-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* PRESET A — Centered (uncomment to use) */
/*
html body.com_users.view-login #sp-component .com-users-login__form,
html body.com_users.view-login #sp-component .com-users-login__options {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
*/

/* PRESET B — Left-aligned (default) */
html body.com_users.view-login #sp-component .com-users-login__form,
html body.com_users.view-login #sp-component .com-users-login__options {
  max-width: 620px !important;  /* adjust 520–640 to taste */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body.com_users.view-login #sp-component .com-users-login__submit {
  margin: 0 !important;
}
/* ---------------------------------------------------------
   7) JOURNAL GRID OVERRIDE
--------------------------------------------------------- */
/* Grid: 2 columns (desktop), 1 column (phones) */
html body #sp-component .journal-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 767.98px){
  html body #sp-component .journal-grid { grid-template-columns: 1fr !important; }
}

/* Tech-Section card surface */
html body #sp-component .journal-grid .journal-card {
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  float: none !important;

  background: linear-gradient(180deg, rgba(12,12,20,.96), rgba(4,4,8,.96)) !important;
  border: 1px solid rgba(0,234,255,.30) !important;              /* cyan edge */
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(0,234,255,.12), inset 0 0 14px rgba(0,0,0,.45) !important;
  padding: 16px !important;

  /* motion (kept separate from layout vars) */
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
  will-change: transform, box-shadow;
}

/* Lift + halo */
html body #sp-component .journal-grid .journal-card:hover,
html body #sp-component .journal-grid .journal-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(210,176,85,.45) !important;                  /* gold accent */
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    0 0 26px rgba(210,176,85,.30),
    0 0 20px rgba(0,234,255,.20);
}

/* Title + text */
html body #sp-component .journal-grid .journal-title {
  margin: 10px 0 8px !important;
  color: #00eaff !important;                                     /* tech cyan */
  font-family: "Orbitron", sans-serif !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  transition: color .22s ease, text-shadow .22s ease;
}
html body #sp-component .journal-grid .journal-card:hover .journal-title,
html body #sp-component .journal-grid .journal-card:focus-within .journal-title {
  text-shadow: 0 0 10px rgba(0,234,255,.25);
}

/* Image — tidy + gentle zoom */
html body #sp-component .journal-grid .journal-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,234,255,.25) !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,.5) !important;

  transition: transform .28s ease, filter .28s ease, box-shadow .28s ease;
  will-change: transform, filter;
}
html body #sp-component .journal-grid .journal-card:hover img,
html body #sp-component .journal-grid .journal-card:focus-within img {
  transform: scale(1.015);
  filter: contrast(1.04) saturate(1.03);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}

/* “Read Here” CTA — Tech-Section gold pill */
html body #sp-component .journal-grid .journal-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  margin-top: 8px !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  text-decoration: none !important;

  background: linear-gradient(90deg, #ffde70, #c9a63e) !important; /* gold */
  color: #111 !important;                                          /* black text */
  border: 0 !important;
  box-shadow: 0 0 14px rgba(255,224,100,.35) !important;

  font-family: "Orbitron", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;

  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease !important;
}
html body #sp-component .journal-grid .journal-link:hover,
html body #sp-component .journal-grid .journal-link:focus-visible {
  background: linear-gradient(90deg, #ffe891, #d8b756) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 20px rgba(255,224,100,.55) !important;
  outline: none !important;
}

/* CTA arrow — fallback glyph, then FA if available */
html body #sp-component .journal-grid .journal-link::after {
  content: "→";
  display: inline-block;
  margin-left: .4em;
  transform: translateX(0);
  transition: transform .22s ease, opacity .22s ease, text-shadow .22s ease;
  opacity: .9;
}
html body #sp-component .journal-grid .journal-link:hover::after,
html body #sp-component .journal-grid .journal-link:focus-visible::after {
  transform: translateX(4px);
  opacity: 1;
  text-shadow: 0 0 10px rgba(0,234,255,.30);
}
/* If Font Awesome 5/6 is loaded, use the solid arrow icon */
html body #sp-component .journal-grid .journal-link.fa-arrow::after,
html body #sp-component .journal-grid .journal-link.fa-solid::after { /* opt-in via extra class if desired */
  content: "\f061";
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight: 900;
  text-shadow: none;
}

/* Keyboard focus ring */
html body #sp-component .journal-grid .journal-card:focus-within {
  outline: 2px solid rgba(0,234,255,.55);
  outline-offset: 3px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html body #sp-component .journal-grid .journal-card,
  html body #sp-component .journal-grid .journal-card img,
  html body #sp-component .journal-grid .journal-link,
  html body #sp-component .journal-grid .journal-link::after{
    transition: none !important;
  }
  html body #sp-component .journal-grid .journal-card:hover,
  html body #sp-component .journal-grid .journal-card:focus-within{
    transform: none !important;
    box-shadow: none !important;
  }
}
/* ---------------------------------------------------------
   TRU — Article Container (Journals list page)
   Wraps the H1 + grid in a Tech-Section panel
--------------------------------------------------------- */

html body #sp-component .article-details {
  /* panel */
  background: linear-gradient(180deg, rgba(12,12,20,.96), rgba(4,4,8,.96)) !important;
  border: 1px solid rgba(0,234,255,.30) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(0,234,255,.12), inset 0 0 14px rgba(0,0,0,.45) !important;

  /* spacing */
  padding: 22px 24px !important;
  margin: 0 auto 28px !important;

  /* ensure it spans the column */
  width: 100% !important;
  max-width: none !important;
}

html body #sp-component .article-details [itemprop="articleBody"]{
  /* guard against template paddings that fight ours */
  margin: 0 !important;
  padding: 0 !important;
}

/* Title styling to match Tech-Section */
html body #sp-component .article-details [itemprop="articleBody"] > h1 {
  margin: 0 0 14px !important;
  color: #ffde70 !important;        /* gold */
  font-family: "Orbitron", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 10px rgba(255,224,100,.25);
}

/* If your template adds its own article box, neutralize it */
html body #sp-component .article-details .article-can-edit,
html body #sp-component .article-details .article-info,
html body #sp-component .article-details .article-header,
html body #sp-component .article-details .article-footer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Keep our grid snug under the title */
html body #sp-component .article-details .journal-grid {
  margin-top: 10px !important;
}