/* ==========================================================================
   TWILIGHTRUN CSS SUITE — 06/06 · OVERRIDE & COMPATIBILITY LAYER
   File: /templates/visualin/css/tru-override.css
   Scope: Hotfixes · Joomla/Helix/Membership Pro · Menus · Footer · Journal · Toasts
   Purpose: Last-mile compatibility + surgical patches (loads after tru-core/theme/sections)
   Load Order: 6 of 6
   Depends On: tru-core.css, tru-theme.css, tru-sections.css
   Affects: Site-wide wrappers, com_users, com_osmembership, menus, footer, system toasts
   Edit Policy: Comments-only housekeeping. Do not alter selectors/properties.
   Author: TwilightRun.com
   Last Updated: 2025-10-20
   ========================================================================== */

/* ==========================================================================
   SECTION 00/31 · CONTEXT (original banner kept verbatim)
   ========================================================================== */
/* =========================================================
   PHASE 6.4 — OVERRIDE & COMPATIBILITY LAYER
   Purpose: Hotfixes • Joomla / Helix / MPro Adjustments
   Loads LAST in cascade (after tru-core, tru-theme, tru-sections)
========================================================= */

/* ==========================================================================
   SECTION 01/31 · HELIX FRAMEWORK & STRUCTURAL SAFEGUARDS
   ========================================================================== */
/* =========================================================
   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;
}

/* ==========================================================================
   SECTION 02/31 · JOOMLA MODULE & COMPONENT NORMALIZATION
   ========================================================================== */
/* =========================================================
   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;
}

/* ==========================================================================
   SECTION 03/31 · TYPOGRAPHY & ALIGNMENT CORRECTIONS
   ========================================================================== */
/* =========================================================
   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;
}

/* ==========================================================================
   SECTION 04/31 · RESPONSIVE PROTECTION
   ========================================================================== */
/* =========================================================
   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;
  }
}

/* ==========================================================================
   SECTION 05/31 · DIAGNOSTIC UTILITY CLASSES (Optional)
   ========================================================================== */
/* =========================================================
   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;
}

/* ==========================================================================
   SECTION 06/31 · MEMBERSHIP CLEANUP PATCH
   ========================================================================== */
/* =========================================================
   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;
}

/* ==========================================================================
   SECTION 07/31 · MENU OVERRIDES · RESET & SHARED CORE
   ========================================================================== */
/* =========================================================
   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;
}

/* ==========================================================================
   SECTION 08/31 · MENU OVERRIDES · PLANET (SILVER)
   ========================================================================== */
/* =========================================================
   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;
}

/* ==========================================================================
   SECTION 09/31 · MENU OVERRIDES · STARSHIP (GOLD)
   ========================================================================== */
/* 🚀 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;
}

/* ==========================================================================
   SECTION 10/31 · MENU OVERRIDES · STELLAR (CYAN)
   ========================================================================== */
/* 🌌 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;
}

/* ==========================================================================
   SECTION 11/31 · MENU OVERRIDES · TECH (ORANGE)
   ========================================================================== */
/* ⚙️ 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;
}

/* ==========================================================================
   SECTION 12/31 · MENU OVERRIDES · JOURNAL (VIOLET)
   ========================================================================== */
/* 📓 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;
}

/* ==========================================================================
   SECTION 13/31 · MENU OVERRIDES · MEMBER (DEEP BLUE)
   ========================================================================== */
/* 👥 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;
}

/* ==========================================================================
   SECTION 14/31 · TRU • USERS (LOGIN + PROFILE EDIT) · FINAL MINIMAL PATCH
   ========================================================================== */
/* =========================================================
   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;
}

/* ==========================================================================
   SECTION 15/31 · HEADER ADJUSTMENT (SIGN IN SPACING + ICON)
   ========================================================================== */
/* =========================================================
   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;
}

/* ==========================================================================
   SECTION 16/31 · MEMBERSHIP PRO OVERRIDES · TIMEZONE POPUP
   ========================================================================== */
/* =========================================================
   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;
}

/* ==========================================================================
   SECTION 17/31 · MEMBERSHIP PRO OVERRIDES · PROFILE-EDIT EXPANSION
   ========================================================================== */
/* ---------------------------------------------------------
   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;
}

/* ==========================================================================
   SECTION 18/31 · MEMBERSHIP PRO OVERRIDES · PASSKEY (WEBAUTHN)
   ========================================================================== */
/* ---------------------------------------------------------
   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;
}

/* ==========================================================================
   SECTION 19/31 · MEMBERSHIP PRO OVERRIDES · PASSWORD TOGGLE + KEY
   ========================================================================== */
/* ---------------------------------------------------------
   4) Password Toggle + Left Key — ensure FA shows
--------------------------------------------------------- */
/* ---------- PASSWORD TOGGLE (login + profile) ---------- */
html body.com_users #sp-component .password-group .input-password-toggle{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--tru-pass-h, 46px) !important;
  min-width: var(--tru-pass-h, 46px) !important;
  height: var(--tru-pass-h, 46px) !important;
  padding: 0 !important;
  border-radius: 0 6px 6px 0 !important;
  box-sizing: border-box !important;
  font-size: 0 !important;                 /* inner spans can’t affect layout */
  overflow: visible !important;
}

/* Use FA pseudo icon; swap to eye-slash when pressed (force with !important) */
html body.com_users #sp-component .password-group .input-password-toggle::before{
  content: "\f06e" !important;             /* fa-eye */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-block !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
html body.com_users #sp-component .password-group .input-password-toggle[aria-pressed="true"]::before{
  content: "\f070" !important;             /* fa-eye-slash */
}

/* Hide template-provided eyes so we never double up */
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,
html body.com_users #sp-component .password-group .input-password-toggle i[class^="icon-"],
html body.com_users #sp-component .password-group .input-password-toggle i[class*=" icon-"],
html body.com_users #sp-component .password-group .input-password-toggle .fa-eye,
html body.com_users #sp-component .password-group .input-password-toggle .fa-eye-slash{
  display: none !important;
}

/* Left key icon — make sure it actually renders */
html body.com_users #sp-component .password-group .input-group-text .fa,
html body.com_users #sp-component .password-group .input-group-text .fas,
html body.com_users #sp-component .password-group .input-group-text .fa-solid{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1 !important;
  font-size: 18px !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

/* ==========================================================================
   SECTION 20/31 · LOGOUT ICON (SINGLE, CONSISTENT)
   ========================================================================== */
/* =========================================================
   LOGOUT ICON (single, correct icon in all cases)
========================================================= */

/* 0) Kill any template/Helix icons inside the control so no doubles */
html body.com_users #sp-component .logout .btn i,
html body.com_users #sp-component .logout .btn span[class^="icon-"],
html body.com_users #sp-component .logout .btn .fa,
html body.com_users #sp-component form[action*="task=user.logout"] button i,
html body.com_users #sp-component form[action*="task=user.logout"] button span[class^="icon-"],
html body.com_users #sp-component form[action*="task=user.logout"] button .fa,
html body.com_users #sp-component form[action*="task=users.logout"] button i,
html body.com_users #sp-component form[action*="task=users.logout"] button span[class^="icon-"],
html body.com_users #sp-component form[action*="task=users.logout"] button .fa{
  display: none !important;
}

/* 1) Buttons/links: add FA icon directly */
html body.com_users #sp-component .logout .btn::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,
html body.com_users.view-logout #sp-component .btn.btn-primary[type="submit"]::before{
  content: "\f2f5" !important;             /* fa-right-from-bracket (sign-out) */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  display: inline-block !important;
  line-height: 1 !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* 2) Inputs: only inject a form-level icon when there’s an INPUT submit
      and when there is NOT a button/link (prevents duplicate icons) */
html body.com_users #sp-component form[action*="task=user.logout"]:has(input.btn[type="submit"]):not(:has(button, a.btn)),
html body.com_users #sp-component form[action*="task=users.logout"]:has(input.btn[type="submit"]):not(:has(button, a.btn)),
html body.com_users.view-logout #sp-component form:has(input.btn[type="submit"]):not(:has(button, a.btn)){
  position: relative !important;
}
html body.com_users #sp-component form[action*="task=user.logout"]:has(input.btn[type="submit"]):not(:has(button, a.btn))::before,
html body.com_users #sp-component form[action*="task=users.logout"]:has(input.btn[type="submit"]):not(:has(button, a.btn))::before,
html body.com_users.view-logout #sp-component form:has(input.btn[type="submit"]):not(:has(button, a.btn))::before{
  content: "\f2f5" !important;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  line-height: 1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
/* Give the input room for the injected icon */
html body.com_users #sp-component form[action*="task=user.logout"] input.btn[type="submit"],
html body.com_users #sp-component form[action*="task=users.logout"] input.btn[type="submit"],
html body.com_users.view-logout #sp-component form input.btn[type="submit"]{
  padding-left: 38px !important;
}

/* ==========================================================================
   SECTION 21/31 · BUTTONS — TECH-SECTION STYLES (WITH FA PREFIXES)
   ========================================================================== */
/* ---------------------------------------------------------
   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;
}

/* ==========================================================================
   SECTION 22/31 · LOGIN FORM — UNIFIED ALIGNMENT
   ========================================================================== */
/* ---------------------------------------------------------
   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;
}

/* ==========================================================================
   SECTION 23/31 · JOURNAL GRID OVERRIDE (CARDS & CTA)
   ========================================================================== */
/* ---------------------------------------------------------
   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);
}
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;
  }
}

/* ---------------------------------------------------------
   JOURNAL GRID OVERRIDES (article details & framing)
--------------------------------------------------------- */

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;
}

/* === Journals: lock title height to 2 lines so images align === */
html body #sp-component .journal-grid .journal-title{
  /* keep your existing font & color; just normalize height */
  line-height: 1.2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;       /* show up to 2 lines */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  /* reserve exact space for 2 lines so all cards align */
  min-height: calc(1.2em * 2) !important;  /* line-height × 2 */
  margin: 10px 0 8px !important;
}

/* Optional: show full title on hover/focus without shifting layout */
html body #sp-component .journal-grid .journal-card:focus-within .journal-title,
html body #sp-component .journal-grid .journal-card:hover .journal-title{
  -webkit-line-clamp: 2 !important; /* keep clamped to avoid jumps */
}

/* === Journals: consistent image frame so rows line up === */
html body #sp-component .journal-grid .journal-excerpt{
  /* create a fixed window for the image */
  aspect-ratio: 3 / 5 !important;         /* adjust to your covers */
  margin: 0 0 10px !important;
  overflow: hidden !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;
  display: block !important;               /* ensure block context */
}

html body #sp-component .journal-grid .journal-excerpt img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;            /* fills the frame uniformly */
  object-position: center !important;
  border: 0 !important;                     /* frame is on the wrapper now */
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   SECTION 24/31 · FOOTER OVERRIDES (DARK SURFACE + WATERMARK)
   ========================================================================== */
/* ---------------------------------------------------------
   FOOTER OVERRIDES
--------------------------------------------------------- */
/* ===== TRU — Footer (dark surface + faint gold hexagon) ===== */
:root{
  --tru-cyan: #00eaff;
  --tru-gold: #ffde70;
  --tru-footer-top: rgba(10,12,18,.98);
  --tru-footer-bot: rgba(6,7,12,.98);
}

/* Footer base */
html body #sp-footer,                         /* Helix/“sp-” footer */
html body footer#sp-footer {
  position: relative;
  isolation: isolate;                         /* keep overlay contained */
  background:
    linear-gradient(180deg, var(--tru-footer-top), var(--tru-footer-bot)) !important;
  color: #e4e7ee !important;
  border-top: 1px solid rgba(0,234,255,.25) !important;
}

/* Ensure inner wrappers don’t bring back transparency */
html body #sp-footer .container,
html body #sp-footer .container-inner,
html body #sp-footer .sp-column,
html body #sp-footer .sp-module,
html body #sp-footer .sp-module-content {
  background: transparent !important;
}

/* Typography + links in footer */
html body #sp-footer h1, 
html body #sp-footer h2, 
html body #sp-footer h3, 
html body #sp-footer h4 {
  color: var(--tru-gold) !important;
  letter-spacing: .5px;
}
html body #sp-footer a {
  color: var(--tru-cyan) !important;
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}
html body #sp-footer a:hover {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(0,234,255,.25);
}

/* Padding rhythm */
html body #sp-footer .container,
html body #sp-footer .container-inner {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* Watermark: faint gold hexagon (uses the SVG below) */
html body #sp-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/templates/visualin/images/hexagon.svg");
  background-repeat: no-repeat;
  background-position: right 5% center;      /* tweak to taste */
  background-size: 520px auto;               /* size of watermark */
  opacity: .28;                               /* faint */
  pointer-events: none;
  z-index: 0;
}

/* Keep footer content above the watermark */
html body #sp-footer > * {
  position: relative;
  z-index: 1;
}

/* Optional: subtle top glow to match site theme */
html body #sp-footer {
  box-shadow: 0 -12px 28px rgba(0,0,0,.45) inset;
}

/* ==========================================================================
   SECTION 25/31 · PRE SPACE OVERRIDES (MAIN COLUMN TIDY)
   ========================================================================== */
/* ---------------------------------------------------------
   PRE SPACE OVERRIDES
--------------------------------------------------------- */
/* No top gap for first element in the main column */
html body #sp-component .sp-column > *:first-child { margin-top: 0 !important; }

/* Modules in the main column start flush; keep spacing only between modules */
html body #sp-component .sp-column > .sp-module { margin-top: 0 !important; }
html body #sp-component .sp-column > .sp-module + .sp-module { margin-top: 24px !important; }
/* Undo global panel so normal articles are clean */
html body #sp-component .article-details{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   SECTION 26/31 · FOOTER > SITE MENU (HORIZONTAL DOTS)
   ========================================================================== */
/* ---------------------------------------------------------
   MENU OVERRIDES
--------------------------------------------------------- */
/* Footer > Site Menu: horizontal + centered dots (uses Menu Tag ID = main-nav) */
html body #sp-footer #sp-footer2 nav.sp-module .sp-module-content > ul.menu#main-nav{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;            /* kill UL indent */
  list-style:none !important;
}

html body #sp-footer #sp-footer2 nav.sp-module ul#main-nav.menu > li{
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
}

html body #sp-footer #sp-footer2 nav.sp-module ul#main-nav.menu > li + li::before{
  content:"·";
  margin:0 .5em !important;        /* even spacing on both sides */
  color:var(--tru-cyan, #00eaff);
  opacity:.9;
  line-height:1;
}

html body #sp-footer #sp-footer2 nav.sp-module ul#main-nav.menu > li > a{
  display:inline-block !important;
  padding:0 !important;            /* remove default link left-pad */
}

/* Title snug to list */
html body #sp-footer #sp-footer2 nav.sp-module .sp-module-title{
  margin:0 0 .5rem !important;
  padding:0 !important;
}

/* ==========================================================================
   SECTION 27/31 · MYSTERY GAP OVERRIDES (EMPTY STATES)
   ========================================================================== */
/* ---------------------------------------------------------
  MYSTERY GAP OVERRIDES
--------------------------------------------------------- */   
/* ===== Index/Featured gap killer ===== */
/* When we detect “no main content”, collapse every layer’s vertical spacing */
html body #sp-main-body.tru-no-main,
html body #sp-main-body.tru-no-main > .container,
html body #sp-main-body.tru-no-main .container-inner,
html body #sp-main-body.tru-no-main .row,
html body #sp-main-body.tru-no-main #sp-component,
html body #sp-main-body.tru-no-main #sp-component .sp-column {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* If the Featured wrapper exists but is empty, hide it hard */
html body #sp-component .blog-featured:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Empty system message? Hide it too. */
html body #sp-component #system-message-container:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ==========================================================================
   SECTION 28/31 · SCROLL TO TOP (SINGLE FA ICON)
   ========================================================================== */
/* ---------------------------------------------------------
   SCROLL TO TOP
--------------------------------------------------------- */   
/* 1) Keep your button’s geometry/skin */
html body .sp-scroll-up{
  position: fixed;
  right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: linear-gradient(180deg, #10131a, #0a0c12);
  border: 1px solid rgba(0,234,255,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  z-index: 9999;
  text-decoration: none !important;
  line-height: 1 !important;
}

/* 2) Nuke any template pseudo (was causing the “second icon”) */
html body .sp-scroll-up::before{ content: none !important; }

/* 3) Hide ANY inner glyphs and render exactly one FA pseudo */
html body .sp-scroll-up > *{ display: none !important; }

/* Use FA (v6 or v5) codepoint for angle-up */
html body .sp-scroll-up::after{
  content:"\f106"; /* fa-angle-up */
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free" !important;
  font-weight:900 !important;         /* solid style */
  font-size:18px !important;
  line-height:1 !important;
  display:inline-block !important;
  opacity:1 !important;
}

/* 4) Hover motion */
html body .sp-scroll-up:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 0 14px rgba(0,234,255,.25);
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* ==========================================================================
   SECTION 29/31 · HEADER LOGIN DROPDOWN (DARK SURFACE)
   ========================================================================== */
/* =========================================================
   TRU — Header Login Dropdown + System Toasts (dark + legible)
   Place last in custom-override.css
========================================================= */

/* 1) Container surface (dropdowns, megamenu panels, modals) */
html body :is(.dropdown-menu,
              .sp-dropdown,
              .sp-dropdown-inner,
              [data-bs-popper],
              .modal .modal-content,
              .t4-dropdown,
              .t4-dropdown-menu)
:has(form[action*="task=user.login"],
     form[action*="task=users.login"],
     input[name="username"],
     input[type="password"]) {
  background: linear-gradient(180deg, rgba(12,12,20,.98), rgba(4,4,8,.98)) !important;
  color: #e6ebf3 !important;
  border: 1px solid rgba(0,234,255,.30) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.6), 0 0 18px rgba(0,234,255,.18) !important;
  padding: 10px !important;
  min-width: 240px !important;
  z-index: 10050 !important; /* beat header stacking */
}

/* 2) Kill any baked-in white skins inside */
html body :is(.dropdown-menu,
              .sp-dropdown,
              .sp-dropdown-inner,
              [data-bs-popper],
              .modal .modal-content)
:has(input[type="password"]) .bg-white {
  background: transparent !important;
}

/* 3) Links / items in the popup */
html body :is(.dropdown-menu,
              .sp-dropdown-inner,
              .modal .modal-content)
:has(input[type="password"]) a,
html body :is(.dropdown-menu,
              .sp-dropdown-inner,
              .modal .modal-content)
:has(input[type="password"]) .dropdown-item {
  color: #e6ebf3 !important;
  background: transparent !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  line-height: 1.2 !important;
}
html body :is(.dropdown-menu,
              .sp-dropdown-inner,
              .modal .modal-content)
:has(input[type="password"]) a:hover,
html body :is(.dropdown-menu,
              .sp-dropdown-inner,
              .modal .modal-content)
:has(input[type="password"]) .dropdown-item:hover,
html body :is(.dropdown-menu,
              .sp-dropdown-inner,
              .modal .modal-content)
:has(input[type="password"]) .dropdown-item:focus {
  color: #fff !important;
  background: rgba(0,234,255,.12) !important;
  text-shadow: 0 0 10px rgba(0,234,255,.25) !important;
}

/* 4) Inputs + submit button inside the login form */
html body :is(.dropdown-menu,
              .sp-dropdown-inner,
              .modal .modal-content)
:has(input[type="password"]) input.form-control,
html body :is(.dropdown-menu,
              .sp-dropdown-inner,
              .modal .modal-content)
:has(input[type="password"]) input[type="text"],
html body :is(.dropdown-menu,
              .sp-dropdown-inner,
              .modal .modal-content)
:has(input[type="password"]) input[type="password"] {
  background: rgba(15,15,22,.95) !important;
  color: #e6ebf3 !important;
  border: 1px solid rgba(0,234,255,.30) !important;
  border-radius: 6px !important;
}

html body :is(.dropdown-menu,
              .sp-dropdown-inner,
              .modal .modal-content)
:has(input[type="password"]) .btn,
html body :is(.dropdown-menu,
              .sp-dropdown-inner,
              .modal .modal-content)
:has(input[type="password"]) button[type="submit"] {
  background: linear-gradient(180deg, #00eaff, #007d99) !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 0 16px rgba(0,234,255,.25) !important;
}

/* 5) Fallback: if something still uses plain Bootstrap menu classes */
html body .dropdown-menu {
  /* only nudge if it looks unstyled (white) */
  background-color: rgba(12,12,20,.98) !important;
  color: #e6ebf3 !important;
  border: 1px solid rgba(0,234,255,.25) !important;
}

/* ==========================================================================
   SECTION 30/31 · SYSTEM MESSAGES / TOASTS (PINNED, LEGIBLE)
   ========================================================================== */
/* ---------- 2) SYSTEM MESSAGES / TOASTS (bottom-right) ---------- */
/* Keep the Joomla messages readable no matter the template defaults */
html body #system-message-container {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  width: min(420px, calc(100vw - 36px)) !important;
  z-index: 100000 !important;
  pointer-events: none;   /* container doesn't block clicks */
}
html body #system-message-container * { pointer-events: auto; }

/* Joomla 4 webcomponent + Bootstrap alerts/toasts */
html body #system-message-container joomla-alert,
html body #system-message-container .joomla-alert,
html body #system-message-container .alert,
html body #system-message-container .toast {
  background: linear-gradient(180deg, rgba(12,12,20,.98), rgba(4,4,8,.98)) !important;
  color: #e6ebf3 !important;
  border: 1px solid rgba(0,234,255,.35) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.6), 0 0 18px rgba(0,234,255,.18) !important;
  margin: 0 0 12px !important;
  overflow: hidden !important;
}

/* Accent bar on the left by type */
html body #system-message-container .alert-success,
html body #system-message-container joomla-alert[type="success"] { box-shadow: inset 4px 0 0 0 rgba(46, 204, 113, .8) !important; }
html body #system-message-container .alert-info,
html body #system-message-container joomla-alert[type="info"]     { box-shadow: inset 4px 0 0 0 rgba(52, 152, 219, .8) !important; }
html body #system-message-container .alert-warning,
html body #system-message-container joomla-alert[type="warning"]  { box-shadow: inset 4px 0 0 0 rgba(241, 196, 15,  .9) !important; }
html body #system-message-container .alert-danger,
html body #system-message-container joomla-alert[type="danger"],
html body #system-message-container joomla-alert[type="error"]    { box-shadow: inset 4px 0 0 0 rgba(231, 76, 60,  .9) !important; }

/* Titles, text, links */
html body #system-message-container .alert-heading { color: #ffde70 !important; }
html body #system-message-container a {
  color: #00eaff !important;
  text-decoration: none !important;
}
html body #system-message-container a:hover {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(0,234,255,.25);
}

/* Close buttons/icons remain visible on dark */
html body #system-message-container .btn-close {
  filter: invert(1) brightness(2) !important;  /* makes the X light */
  opacity: .9 !important;
}

/* Bootstrap toast parts */
html body #system-message-container .toast-header {
  background: transparent !important;
  color: #ffde70 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
html body #system-message-container .toast-body {
  color: #e6ebf3 !important;
}

/* ==========================================================================
   SECTION 31/31 · EOF
   ========================================================================== */
/* =========================================================
   PHASE 7 — CLEAN CONSOLIDATED OVERRIDE (FINAL v2)
   Scope: stable, append-only, no layout regressions
========================================================= */

/* ---------------------------------------------
   7.1  HEADER ⇄ HERO SEAM (kill phantom gap)
--------------------------------------------- */
html body #sp-header + .sticky-header-placeholder{
  height:0!important; margin:0!important; padding:0!important;
}
/* First visual block starts flush */
html body .body-innerwrapper > :is(#sp-hero,#sp-feature,#sp-slide){
  margin-top:0!important; padding-top:0!important; border-top:0!important;
}
/* Defensive zero on the blocks themselves */
html body :is(#sp-hero,#sp-feature,#sp-slide){
  margin-top:0!important; padding-top:0!important;
}
/* If a stray FA icon node appears right after the header, hide it */
html body #sp-header + i[class^="fa"],
html body #sp-header + i[class*=" fa-"]{ display:none!important; }
/* If the next section is only an icon module, collapse it */
html body #sp-header + .sp-section .sp-module > i[class^="fa"]:only-child,
html body #sp-header + .sp-section .sp-module > i[class*=" fa-"]:only-child{ display:none!important; }
html body #sp-header + .sp-section{ margin-top:0!important; padding-top:0!important; }

/* Comfortable hero height + background behaviour */
html body :is(#sp-hero,#sp-feature){
  min-height: clamp(420px,60vh,680px) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* Mobile parallax fix (prevents hero “disappearing”) */
@media (max-width: 991.98px){
  html body #sp-hero, html body #sp-feature, html body #sp-slide{
    background-attachment: scroll !important;
    -webkit-transform: translateZ(0); transform: translateZ(0);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
  }
}

/* ---------------------------------------------
   7.2  HEADER ICONS (solid FA, no extra line-height)
--------------------------------------------- */
html body #sp-header .header-modules i[class^="fa"],
html body #sp-header .header-modules i[class*=" fa-"]{
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free"!important;
  font-weight:900!important; /* solid */
  line-height:1!important; margin:0!important; vertical-align:middle!important;
  opacity:1!important; visibility:visible!important; display:inline-block!important;
}

/* Search: hide broken inner <i>, inject reliable solid pseudo */
html body #sp-header a[href*="search"] i[class^="fa"],
html body #sp-header a[href*="search"] i[class*=" fa-"]{ display:none!important; }
html body #sp-header a[href*="search"]{
  display:inline-flex!important; align-items:center!important; gap:.35rem!important; text-decoration:none!important;
}
html body #sp-header a[href*="search"]::before{
  content:"\f002"; /* magnifying glass */
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free"!important; font-weight:900!important;
  display:inline-block; line-height:1;
}

/* Sign-In: hide template icon, inject solid prefix */
html body #sp-header .sp-sign-in i[class^="fa"],
html body #sp-header .sp-sign-in i[class*=" fa-"]{ display:none!important; }
html body #sp-header .sp-sign-in{
  display:inline-flex!important; align-items:center!important; gap:.4rem!important; text-decoration:none!important;
}
html body #sp-header .sp-sign-in::before{
  content:"\f2f6"; /* right-to-bracket (sign-in) */
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free"!important; font-weight:900!important;
  display:inline-block; line-height:1;
}

/* Burger contrast = white on dark header (SVG, FA, span bars) */
html body #sp-header .offcanvas-toggler,
html body #sp-header .offcanvas-toggler-right,
html body #sp-header button.offcanvas-toggler,
html body #sp-header .offcanvas-toggler svg,
html body #sp-header .offcanvas-toggler-right svg{
  color:#fff!important; fill:#fff!important;
}
html body #sp-header .offcanvas-toggler i[class^="fa"],
html body #sp-header .offcanvas-toggler i[class*=" fa-"],
html body #sp-header .offcanvas-toggler-right i[class^="fa"],
html body #sp-header .offcanvas-toggler-right i[class*=" fa-"]{
  color:#fff!important;
}
html body #sp-header .burger-icon span,
html body #sp-header .hamburger span,
html body #sp-header .hamburger .line,
html body #sp-header .offcanvas-toggler .burger-lines span{
  background-color:#fff!important;
}

/* Keep the burger on the right; don’t center it */
html body #menu-right{
  margin-left:auto!important; display:flex!important; align-items:center!important;
  gap: clamp(8px, 1.4vw, 16px) !important;
}
html body #menu-right .offcanvas-toggler-right{ order:2!important; margin-left:8px!important; }

/* ---------------------------------------------
   7.3  OFF-CANVAS — separate inline column vs real drawer
--------------------------------------------- */
/* A) Inline module column named “offcanvas”: keep as normal flow */
html body .sp-column.offcanvas,
html body #sp-main-body .sp-module.offcanvas{
  position: static !important; inset: auto !important; transform: none !important;
  visibility: visible !important; width:100%!important; height:auto!important; max-height:none!important; overflow:visible!important;
}
/* Wrapper Helix uses for those modules */
html body #sp-offcanvas-modules{
  display:block!important; position:static!important; transform:none!important; visibility:visible!important;
}

/* B) Real drawer (Helix/Bootstrap) */
html body .sp-offcanvas-menu,
html body .offcanvas-menu{
  position: fixed !important; top:0!important; bottom:0!important; left:0!important; right:auto!important;
  width:min(92vw,320px)!important; max-width:100%!important; height:100vh!important; overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important; z-index:10050!important;
  transform: translateX(-100%) !important; visibility: hidden !important; will-change: transform;
}
/* Right-side variants (hidden state) */
html body .sp-offcanvas-menu.offcanvas-right,
html body .offcanvas-menu.offcanvas-right,
html body .sp-offcanvas-menu.offcanvas-end,
html body .offcanvas.offcanvas-end{
  left:auto!important; right:0!important; transform:translateX(100%)!important;
}
/* Open states (support Helix body flag + Bootstrap .show) */
html body.offcanvas-active .sp-offcanvas-menu,
html body.offcanvas-active .offcanvas-menu,
html body .sp-offcanvas-menu.show,
html body .offcanvas-menu.show{
  transform: translateX(0) !important; visibility: visible !important;
}
/* Dim overlay if your skin provides one */
html body .offcanvas-overlay,
html body .offcanvas-menu-overlay{
  position:fixed!important; inset:0!important; background:rgba(0,0,0,.45)!important; z-index:10040!important; display:none!important;
}
html body.offcanvas-active .offcanvas-overlay,
html body.offcanvas-active .offcanvas-menu-overlay{ display:block!important; }

/* C) Off-canvas auth icons (layout-neutral) */
html body .sp-offcanvas-menu i[class^="fa"],
html body .sp-offcanvas-menu i[class*=" fa-"]{
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free"!important; font-weight:900!important; line-height:1!important;
}
html body .sp-offcanvas-menu ul.menu > li > a[href*="login"]        > i,
html body .sp-offcanvas-menu ul.menu > li > a[href*="users.login"]  > i,
html body .sp-offcanvas-menu ul.menu > li > a[href*="register"]     > i,
html body .sp-offcanvas-menu ul.menu > li > a[href*="registration"] > i,
html body .sp-offcanvas-menu ul.menu > li > a[href*="logout"]       > i,
html body .sp-offcanvas-menu ul.menu > li > a[href*="users.logout"] > i{ display:none!important; }
html body .sp-offcanvas-menu ul.menu > li > a[href*="login"]::before,
html body .sp-offcanvas-menu ul.menu > li > a[href*="users.login"]::before{ content:"\f2f6"; font-family:"Font Awesome 6 Free","Font Awesome 5 Free"!important; font-weight:900!important; }
html body .sp-offcanvas-menu ul.menu > li > a[href*="register"]::before,
html body .sp-offcanvas-menu ul.menu > li > a[href*="registration"]::before{ content:"\f234"; font-family:"Font Awesome 6 Free","Font Awesome 5 Free"!important; font-weight:900!important; }
html body .sp-offcanvas-menu ul.menu > li > a[href*="logout"]::before,
html body .sp-offcanvas-menu ul.menu > li > a[href*="users.logout"]::before{ content:"\f2f5"; font-family:"Font Awesome 6 Free","Font Awesome 5 Free"!important; font-weight:900!important; }
html body .sp-offcanvas-menu ul.menu > li > a::before{
  display:inline-block!important; width:1.25em; text-align:center; margin-right:.55rem; line-height:1;
}
/* IMPORTANT: do NOT set display:flex on the anchors above. */

/* ---------------------------------------------
   7.4  ARTICLE PAGES — single column on mobile
--------------------------------------------- */
@media (max-width: 991.98px){
  /* Let the main row wrap */
  html body #sp-main-body .row,
  html body #sp-main-body > .container > .container-inner > .row{ flex-wrap:wrap!important; }

  /* Make both component + sidebar full width */
  html body #sp-component,
  html body #sp-right,
  html body #sp-component[class*="col-"],
  html body #sp-right[class*="col-"]{
    flex:0 0 100%!important; max-width:100%!important; width:100%!important; float:none!important; min-width:0!important;
  }

  /* Sidebar should not stay sticky on phones */
  html body #sp-right{ position:static!important; top:auto!important; }

  /* Logical order: content first, sidebar second */
  html body #sp-component{ order:1!important; }
  html body #sp-right{     order:2!important; }
}

/* ---------------------------------------------
   7.5  MOBILE ARTICLE TYPOGRAPHY (≤768px)
--------------------------------------------- */
@media (max-width: 768px){
  /* Core article containers */
  html body .article-body,
  html body .item-page,
  html body .blog-item,
  html body #sp-component article,
  html body #sp-component .article-details,
  html body #sp-component [itemprop="articleBody"]{ text-align:left!important; }

  /* Paragraphs & lists */
  html body .article-body p, .article-body li,
  html body .item-page p,  .item-page li,
  html body .blog-item p,  .blog-item li,
  html body .tech-section p, .tech-section li, .tech-section ul{
    text-align:left!important; text-justify:auto!important;
    hyphens:auto!important; -webkit-hyphens:auto!important;
    overflow-wrap:anywhere!important; word-break:normal!important; letter-spacing:normal!important;
  }

  /* Nicer headline wrapping on phones */
  html body .article-body h1, html body .article-body h2,
  html body .item-page h1,    html body .item-page h2,
  html body .tech-section h1, html body .tech-section h2{ text-wrap: balance; }
}

/* ---------------------------------------------
   7.6  ARTICLE EMPHASIS TONE (bold ≠ gold)
--------------------------------------------- */
html body #sp-component :is(.item-page,.article-details,.article-body,.blog,.blog-items,.blog-featured) :is(strong,b){
  color:inherit!important; font-weight:700!important;
}
html body #sp-component :is(.item-page,.article-details,.article-body,.blog,.blog-items,.blog-featured)
  :is(.text-gold,.gold,.has-text-warning) :is(strong,b){ color:inherit!important; }
html body #sp-component :is(.article-body .highlight, .journal-subtext .highlight){
  color: var(--accent-gold) !important;
}
html body #sp-component :is(.item-page,.article-details,.article-body) a :is(strong,b){ color:inherit!important; }

/* ---------------------------------------------
   7.7  HEX GUIDE — 2 columns on phones
   (works for .hex-guide/.hex-grid or add data-hex-guide)
--------------------------------------------- */
html body .hex-guide,
html body .hex-grid,
html body [data-hex-guide]{ display:grid!important; gap:clamp(8px,2.5vw,16px)!important; }
@media (max-width: 767.98px){
  html body .hex-guide,
  html body .hex-grid,
  html body [data-hex-guide]{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html body .hex-guide > *, html body .hex-grid > *, html body [data-hex-guide] > *{ min-width:0!important; }
}
/* Bootstrap row/col fallback for hex sections living in rows */
@media (max-width: 767.98px){
  html body #sp-feature .row.hex,
  html body #sp-feature .row[class*="hex"],
  html body #sp-mb6 .row.hex,
  html body #sp-mb6 .row[class*="hex"]{ display:flex!important; flex-wrap:wrap!important; gap:clamp(8px,2.5vw,16px)!important; }
  html body #sp-feature .row[class*="hex"] > [class*="col-"],
  html body #sp-mb6 .row[class*="hex"] > [class*="col-"]{
    flex:0 0 50%!important; max-width:50%!important; width:50%!important; float:none!important;
  }
}
/* Optional: cap to exactly 2×2 tiles on phones (uncomment to use) */
/*
@media (max-width: 767.98px){
  [data-hex-guide] > *:nth-child(n+5),
  .hex-guide > *:nth-child(n+5),
  .hex-grid  > *:nth-child(n+5){ display:none!important; }
}
*/

/* ---------------------------------------------
   7.8  POPUPS / Z-INDEX + A11Y + REDUCED MOTION
--------------------------------------------- */
html body #sp-header .sp-dropdown,
html body #sp-header .dropdown-menu,
html body #sp-header [data-bs-popper]{ z-index:10050!important; }
@media (max-width: 992px){
  html body #sp-header,
  html body #sp-header .sp-dropdown,
  html body #sp-header .dropdown-menu,
  html body .offcanvas,
  html body .modal,
  html body joomla-field-fancy-select{ overflow:visible!important; }
}
/* Focus ring */
html body :where(a,button,[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid rgba(0,234,255,.55); outline-offset:2px; box-shadow:0 0 0 2px rgba(0,234,255,.15);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html body .guide-card,
  html body #sp-mb3 .corp-card,
  html body .track-item,
  html body #sp-component .journal-card,
  html body .world-card,
  html body .military-card,
  html body .tech-section,
  html body .sp-scroll-up{ transition:none!important; transform:none!important; }
}

/* ---------------------------------------------
   7.9  FOOTER MENU WRAP — tidy separators
--------------------------------------------- */
html body #sp-footer #sp-footer2 nav.sp-module ul#main-nav.menu{ row-gap:.25rem; }
html body #sp-footer #sp-footer2 nav.sp-module ul#main-nav.menu > li + li::before{
  content:"·"; margin:0 .5em;
}