/* ==============================================================
   PHASE 6.2 — CUSTOM OVERRIDE (FINAL)
   Purpose: hard-seal seams, normalize background colors,
            and override residual template spacing.
   Scope: site-wide — applies to all non-index pages
   Load Order: LAST (after theme, rows, and sections)
================================================================ */
/* =========================================================
   0.9 FONT-FACE (Legend & Tabula) — paths match index.php preloads
   ========================================================= */
@font-face{
  font-family: "Legend";
  src: url("/templates/terrasecundus/fonts/Legend.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Tabula";
  src: url("/templates/terrasecundus/fonts/TabulaPeutingeriana-ELv9.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* If you add WOFF2 later, list it first for better compression:
@font-face{
  font-family: "Legend";
  src: url("/templates/terrasecundus/fonts/Legend-700.woff2") format("woff2"),
       url("/templates/terrasecundus/fonts/Legend.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Tabula";
  src: url("/templates/terrasecundus/fonts/Tabula-700.woff2") format("woff2"),
       url("/templates/terrasecundus/fonts/TabulaPeutingeriana-ELv9.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/
:root{
  --legend: "Legend", "Playfair Display", serif;
  --tabula: "Tabula", "Trajan Pro", serif;
}

/* --------------------------------------------
   1. UNIVERSAL SEAM KILL — NON-INDEX PAGES
--------------------------------------------- */
body:not(.item-101) #t4-main-body,
body:not(.item-101) #t4-main-body .t4-section-inner,
body:not(.item-101) #t4-main-body .t4-row,
body:not(.item-101) #t4-main-body .component {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* remove stray container spacing */
body:not(.item-101) .t4-section,
body:not(.item-101) .t4-section-inner,
body:not(.item-101) .t4-mod-wrap,
body:not(.item-101) .section-inner,
body:not(.item-101) .section-ct {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* eliminate Joomla utility gaps */
body:not(.item-101) .top-large,
body:not(.item-101) .bottom-large,
body:not(.item-101) .top-medium,
body:not(.item-101) .bottom-medium,
body:not(.item-101) .top-blank,
body:not(.item-101) .bottom-blank {
  margin: 0 !important;
  padding: 0 !important;
}

/* --------------------------------------------
   2. BACKGROUND CONTINUITY
--------------------------------------------- */
body,
html,
.t4-wrapper,
.t4-content,
.t4-content-inner,
#t4-main-body {
  background-color: #f5f1e8 !important; /* parchment base */
  color: #1a1a1a;
}

/* dark footer tone */
#t4-footer,
#t4-footer .t4-section-inner,
.site-footer {
  background-color: #0f1317 !important;
  color: #f6f2ea !important;
}

/* Prevent color flicker on scroll transition */
html, body {
  background-color: #0f1317 !important;
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* --------------------------------------------
   3. SECTION PARITY + EDGE SEAL
--------------------------------------------- */
.t4-section + .t4-section,
.band-parchment + .band-parchment,
.band-forest + .band-forest,
.band-nightfall + .band-nightfall {
  margin-top: -1px !important;
}

/* Fix small light gaps above/below footer */
body:not(.item-101) #t4-footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body:not(.item-101) .t4-section:last-of-type,
body:not(.item-101) .t4-section-inner:last-of-type,
body:not(.item-101) .t4-mod-wrap:last-of-type,
body:not(.item-101) .section-inner:last-of-type,
body:not(.item-101) .section-ct:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

/* --------------------------------------------
   4. HEADER & HERO EDGE FIXES
--------------------------------------------- */
#t4-header,
#sp-header,
#sp-hero,
#sp-feature {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

html body #sp-header + .sticky-header-placeholder {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --------------------------------------------
   5. RESPONSIVE SAFETY + VISUAL FIXES
--------------------------------------------- */
@media (max-width: 991.98px) {
  #t4-header, #t4-footer, .t4-section {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* --------------------------------------------
   6. COMPONENT BACKGROUND COLOR MATCH
--------------------------------------------- */
body:not(.item-101) .component,
body:not(.item-101) .blog-featured,
body:not(.item-101) .view-masonry {
  background-color: #f5f1e8 !important;
}

/* --------------------------------------------
   7. FOOTER EDGE RESTORATION
--------------------------------------------- */
#t4-footer .t4-section-inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* --------------------------------------------
   8. FINAL VISUAL LOCK
--------------------------------------------- */
html, body, #t4-main-body {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
/* ============================================================
   9.  ARTICLE ⇄ MENU UNIFIED PARCHMENT — Tuned v2.1
   ============================================================ */
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment {
  display: block;
  width: calc(100% + 200px);       /* widened 100px */
  max-width: calc(100% + 100px);
  margin-left: -50px;              /* re-center the widening */
  flex: 1 1 auto;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;

  /* Parchment tone */
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,240,0.85) 0%, rgba(244,230,190,0.95) 60%, #efe1b9 100%),
    linear-gradient(180deg, #f5e8c6 0%, #f2dfb5 100%);
  background-blend-mode: multiply;

  /* Gold edges */
  border-top: 1px solid rgba(212,176,111,0.6);
  border-right: 1px solid rgba(212,176,111,0.6);
  border-bottom: 1px solid rgba(212,176,111,0.6);
  border-left: 0;
  border-radius: 6px;

  /* Subtle depth */
  box-shadow:
    inset 0 0 24px rgba(255,240,190,0.3),
    0 4px 20px rgba(0,0,0,0.20);

  padding: clamp(2rem, 3vw, 3.5rem);
  color: #1f1405;
  transition: background 1s ease, box-shadow 1.2s ease, filter .6s ease;
  animation: fadeRise 1.2s ease-out both;
}

/* Transparentify inner containers */
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment .container,
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment .article-inner,
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment .row {
  background: transparent !important;
}

/* Static gold ledger (no shimmer, reduced to 8px) */
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 8px; height: 100%;
  background: linear-gradient(180deg,
    rgba(255,235,180,0.9) 0%,
    rgba(230,190,90,1) 50%,
    rgba(200,150,60,0.9) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Candlelight + fiber texture overlay */
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(255,250,230,0.42) 0%, rgba(0,0,0,0.06) 85%),
    radial-gradient(rgba(255,255,255,0.07) 0.5px, transparent 0.5px),
    radial-gradient(rgba(0,0,0,0.05) 0.5px, transparent 0.5px);
  background-size: 100% 100%, 2px 2px, 3px 3px;
  mix-blend-mode: multiply;
  opacity: .9;
  transition: opacity 1s ease;
}
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment:hover::after {
  opacity: 1;
}

/* Ink-bleed for body text */
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment p,
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment li {
  text-shadow: 0 0 0.5px rgba(40,30,10,0.25);
}

/* Typography hierarchy */
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment h1 {
  font-family: 'Tabula','Tabula-Regular',serif;
  font-size: clamp(2.2rem, 1.4rem + 1.8vw, 3rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: #3b2b0f;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 2px rgba(255,255,200,0.4);
}
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment h2 {
  font-family: 'Legend','Legend-Regular',serif;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
  color: #46320c;
  margin: 2rem 0 1rem;
  border-bottom: 1px solid rgba(212,176,111,0.4);
  padding-bottom: .25rem;
}
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment h3,
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment p,
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment ul,
html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment ol {
  font-family: 'Playfair Display', serif;
  color: #261b09;
  line-height: 1.7;
  font-size: 1.05rem;
}

/* Entrance animation */
@keyframes fadeRise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile adjustments */
@media (max-width: 991.98px){
  html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    border-left: 0;
    padding: clamp(1.25rem, 4vw, 2rem);
  }
  html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment::before {
    width: 6px;
  }
}
/* Collapse empty sidebar columns inside articles */
.article-inner .col-md-3:has(.siderbar-article:empty) {
  display: none !important;
}
.article-inner .col-md-9 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}


/* ============================================================
   10.0  SIDE MENUS — TABULA PEUTINGERIANA SERIES (v2.5 CINEMATIC + VERIFIED FONT)
   Purpose: Cinematic parchment menus aligned with article styling
   ============================================================ */

/* ------------------------------------------------------------
   10.1  FONT SAFETY — Force Tabula Peutingeriana rendering
   ------------------------------------------------------------ */
@font-face {
  font-family: "Tabula Peutingeriana";
  src:
    url("/templates/terrasecundus/fonts/TabulaPeutingeriana-ELv9.ttf") format("truetype");
  font-display: swap;
}
.sp-module.side-menu h1.sp-module-title,
.sp-module.side-menu-platinum h1.sp-module-title,
.sp-module.side-menu-velvet h1.sp-module-title,
.sp-module.side-menu-runic h1.sp-module-title {
  font-family: "Tabula Peutingeriana", "Cinzel Decorative", serif !important;
}

/* ------------------------------------------------------------
   10.2  CINEMATIC BASE CONTAINER
   ------------------------------------------------------------ */
.sp-module.side-menu,
.sp-module.side-menu-platinum,
.sp-module.side-menu-velvet,
.sp-module.side-menu-runic {
  position: relative;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,240,0.9) 0%, rgba(244,230,190,0.95) 60%, #efe1b9 100%),
    linear-gradient(180deg, #f5e8c6 0%, #f2dfb5 100%);
  border: 1px solid rgba(212,176,111,0.55);
  border-left: 8px solid rgba(212,176,111,0.8);
  border-radius: 6px;
  padding: 1.8rem 1.4rem 1.6rem;
  box-shadow:
    inset 0 0 24px rgba(255,240,190,0.25),
    0 6px 20px rgba(0,0,0,0.25);
  color: #1f1405;
  isolation: isolate;
  animation: fadeRise 1s ease-out both;
}

/* Candlelight vignette / paper fiber fade edges */
.sp-module.side-menu::before,
.sp-module.side-menu-platinum::before,
.sp-module.side-menu-velvet::before,
.sp-module.side-menu-runic::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(255,250,230,0.42) 0%, rgba(0,0,0,0.08) 80%),
    radial-gradient(rgba(0,0,0,0.04) 0.5px, transparent 0.5px);
  background-size: 100% 100%, 3px 3px;
  mix-blend-mode: multiply;
  border-radius: inherit;
  opacity: .9;
  pointer-events: none;
  transition: opacity 1s ease;
}
.sp-module.side-menu:hover::before,
.sp-module.side-menu-platinum:hover::before,
.sp-module.side-menu-velvet:hover::before,
.sp-module.side-menu-runic:hover::before {
  opacity: 1;
}

/* ------------------------------------------------------------
   10.3  TITLE — H1 (Tabula Peutingeriana)
   ------------------------------------------------------------ */
.sp-module.side-menu h1.sp-module-title,
.sp-module.side-menu-platinum h1.sp-module-title,
.sp-module.side-menu-velvet h1.sp-module-title,
.sp-module.side-menu-runic h1.sp-module-title {
  font-size: clamp(1.6rem, 1.2rem + 0.8vw, 2rem) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b5983d;
  margin-bottom: 1rem;
  text-shadow:
    0.8px 0.8px 0 rgba(0,0,0,0.3),
    0 0 6px rgba(212,176,111,0.35);
  border-bottom: 2px solid rgba(212,176,111,0.35);
  padding-bottom: 0.35rem;
  display: inline-block;
}
.sp-module.side-menu h1.sp-module-title::after,
.sp-module.side-menu-platinum h1.sp-module-title::after,
.sp-module.side-menu-velvet h1.sp-module-title::after,
.sp-module.side-menu-runic h1.sp-module-title::after {
  content: "";
  display: block;
  width: 40%;
  height: 3px;
  margin-top: 0.4rem;
  background: linear-gradient(90deg, rgba(212,176,111,0) 0%, rgba(212,176,111,0.8) 50%, rgba(212,176,111,0) 100%);
  background-size: 200px 3px;
  animation: goldShimmer 4s linear infinite;
}

/* ------------------------------------------------------------
   10.4  LINKS — H5 Hierarchy (Playfair Display)
   ------------------------------------------------------------ */
.sp-module ul.mod-menu li a {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 1.05rem;
  color: #2b1a0c;
  padding: 0.45rem 0.25rem;
  transition: color .3s ease, transform .3s ease;
  position: relative;
}
.sp-module ul.mod-menu li a:hover {
  color: #b5983d;
  transform: translateX(4px);
  text-shadow: 0 0 6px rgba(212,176,111,0.4);
}
.sp-module ul.mod-menu li a:hover::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,176,111,0.6), transparent);
  animation: goldSweep 1.2s linear;
}
.sp-module ul.mod-menu li.current > a {
  color: #bfa465;
  font-weight: 600;
  border-left: 3px solid #b5983d;
  padding-left: 0.6rem;
}

/* ------------------------------------------------------------
   10.5  VARIANTS
   ------------------------------------------------------------ */
.side-menu-platinum {
  border-left: 10px solid rgba(212,176,111,0.9);
  background:
    radial-gradient(circle at 40% 30%, rgba(255,255,235,0.9) 0%, rgba(244,230,190,0.95) 60%, #f2dfb5 100%),
    linear-gradient(180deg, #f5e8c6 0%, #f2dfb5 100%);
  box-shadow:
    inset 0 0 28px rgba(255,240,190,0.3),
    0 8px 22px rgba(0,0,0,0.25);
}
.side-menu-platinum:hover { filter: brightness(1.03); }

.side-menu-velvet {
  background: linear-gradient(180deg,#f2e6c0 0%,#e9d9ac 100%);
  border:1px solid rgba(181,152,61,0.5);
}

.side-menu-runic {
  border-left:8px solid rgba(212,176,111,0.9);
  border-right:2px solid rgba(140,100,40,0.3);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.08),
    0 2px 14px rgba(0,0,0,0.1);
}

/* ------------------------------------------------------------
   10.6  ANIMATIONS
   ------------------------------------------------------------ */
@keyframes goldShimmer {0%{background-position:-100px;}100%{background-position:200px;}}
@keyframes goldSweep {0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
@keyframes fadeRise {from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* ------------------------------------------------------------
   10.7  RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 991.98px){
  .sp-module.side-menu,
  .sp-module.side-menu-platinum,
  .sp-module.side-menu-velvet,
  .sp-module.side-menu-runic {
    max-width:100% !important;
    margin-bottom:1.4rem;
  }
}
/* ============================================================
   10.8  WIDTH CONTROL — Prevent menu from matching article width
   ============================================================ */
@media (min-width: 1200px) {
  #sp-right .sp-module.side-menu,
  #sp-right .sp-module.side-menu-platinum,
  #sp-right .sp-module.side-menu-velvet,
  #sp-right .sp-module.side-menu-runic {
    max-width: 340px !important;   /* narrower than article */
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   10.9  GOLD ORNAMENT ABOVE H1 — Cinematic Scroll Flourish
   ============================================================ */
.sp-module.side-menu h1.sp-module-title::before,
.sp-module.side-menu-platinum h1.sp-module-title::before,
.sp-module.side-menu-velvet h1.sp-module-title::before,
.sp-module.side-menu-runic h1.sp-module-title::before {
  content: "❧"; /* elegant typographic ornament */
  display: block;
  font-family: "Tabula Peutingeriana", "Cinzel Decorative", serif;
  font-size: 1.8rem;
  line-height: 1;
  color: rgba(212,176,111,0.9);
  text-shadow:
    0 0 6px rgba(212,176,111,0.45),
    0 0 14px rgba(255,230,160,0.35);
  margin-bottom: 0.4rem;
  animation: goldPulse 6s ease-in-out infinite;
}

/* Ornament animation: slow shimmer pulse */
@keyframes goldPulse {
  0%,100% { opacity: 0.75; transform: scale(1); filter: brightness(1); }
  50%     { opacity: 1; transform: scale(1.05); filter: brightness(1.25); }
}

/* ==========================================================================
   18.3 · CROSS-BROWSER FALLBACK — EMPTY BODY SAFETY
   ========================================================================== */

/* Hide if #sp-component truly has no children (Firefox-safe) */
body #sp-main-body > .container:empty,
body #sp-main-body > .t4-section-inner:empty,
body #sp-main-body > .t4-row:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* When no component is present, let next section (footer or hero) take over fully */
body:not(.com_content) #sp-main-body:not(:has(#sp-component)) {
  background: transparent !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
/* ============================================================
   10.10  UNIQUE ORNAMENTS PER MENU TYPE
   ============================================================ */

/* Platinum Scroll — starburst sigil ✶ */
.sp-module.side-menu-platinum h1.sp-module-title::before {
  content: "✶";
  font-size: 2rem;
  color: rgba(212,176,111,0.95);
  text-shadow:
    0 0 10px rgba(212,176,111,0.6),
    0 0 20px rgba(255,240,190,0.35);
  animation: goldPulse 6s ease-in-out infinite;
  display: block;
  margin-bottom: 0.45rem;
}

/* Velvet Codex — ornate snow-crystal ❈ */
.sp-module.side-menu-velvet h1.sp-module-title::before {
  content: "❈";
  font-size: 2rem;
  color: rgba(200,185,140,0.9);
  text-shadow:
    0 0 6px rgba(255,255,210,0.4),
    0 0 14px rgba(181,152,61,0.25);
  animation: goldPulse 7s ease-in-out infinite;
  display: block;
  margin-bottom: 0.45rem;
}

/* Runic Grimoire — eight-point sigil ✸ */
.sp-module.side-menu-runic h1.sp-module-title::before {
  content: "✸";
  font-size: 2.1rem;
  color: rgba(212,176,111,0.9);
  text-shadow:
    0 0 8px rgba(212,176,111,0.55),
    0 0 16px rgba(255,240,180,0.35);
  animation: runeGlow 5s ease-in-out infinite;
  display: block;
  margin-bottom: 0.45rem;
}

/* Alternate shimmer timing */
@keyframes runeGlow {
  0%,100% {opacity:0.75;filter:brightness(1);}
  50% {opacity:1;filter:brightness(1.3);}
}

/* ============================================================
   10.11  TERRA SECUNDUS — FANTASY SILVER RUNIC SIDE MENU
   ============================================================ */

.side-menu-runic {
  position: relative;
  z-index: 5;
  padding: 2.2rem 1.8rem;
  margin: 2.5rem 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.35);
  background: linear-gradient(
    145deg,
    #c9cfd9 0%,
    #e5e7eb 35%,
    #b5b8c0 70%,
    #d8dbe1 100%
  );
  background-size: 200% 200%;
  animation: silverShimmer 18s ease-in-out infinite;
  box-shadow:
    inset 0 0 20px rgba(255,255,255,0.15),
    0 10px 28px rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  overflow: hidden;
}

/* === SILVER SHIMMER ANIMATION === */
@keyframes silverShimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* === MENU LINKS === */
.side-menu-runic ul.mod-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-menu-runic ul.mod-menu li {
  text-align: center;
}

.side-menu-runic ul.mod-menu li a {
  display: inline-block;
  width: 100%;
  color: #1a1a1a;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 0;
  transition: all 0.4s ease;
  position: relative;
}

/* Hover — faint gold edge shimmer */
.side-menu-runic ul.mod-menu li a:hover {
  color: #b97c2c;
  text-shadow:
    0 0 5px rgba(255,255,255,0.6),
    0 0 10px rgba(185,124,44,0.5);
  transform: scale(1.03);
}

/* === FANTASY SEPARATORS (runic sigil style) === */
.side-menu-runic ul.mod-menu li a::after {
  content: "☽⋆☾";
  display: block;
  text-align: center;
  margin: 0.6rem auto;
  font-size: 1rem;
  color: #b97c2c;
  opacity: 0.8;
  letter-spacing: 0.3em;
  text-shadow:
    0 0 4px rgba(255,255,255,0.6),
    0 0 6px rgba(185,124,44,0.4);
}

.side-menu-runic ul.mod-menu li:last-child a::after {
  display: none;
}

/* === Decorative border glow === */
.side-menu-runic::before,
.side-menu-runic::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
}

.side-menu-runic::before {
  border: 1px solid rgba(212,176,111,0.25);
  mix-blend-mode: overlay;
}

.side-menu-runic::after {
  background: radial-gradient(circle at 50% -10%, rgba(255,255,255,0.2) 0%, transparent 70%);
  opacity: 0.4;
  animation: silverPulse 14s ease-in-out infinite;
}

/* Subtle light breathing */
@keyframes silverPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.55; }
}


/* ============================================================
   10.12  TERRA SECUNDUS — SIDE-MENU-VELVET (SILVER → COPPER)
   ============================================================ */

.side-menu-velvet {
  position: relative;
  z-index: 5;
  padding: 2.2rem 1.8rem;
  margin: 2.5rem 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.25);
  background: linear-gradient(
    145deg,
    #cfd3d8 0%,
    #e6e8eb 25%,
    #d7c6b1 55%,
    #b98c52 85%,
    #d4b06f 100%
  );
  background-size: 240% 240%;
  animation: velvetMetalShift 20s ease-in-out infinite;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.12),
    0 10px 28px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

/* Animated metallic gradient shimmer */
@keyframes velvetMetalShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Core menu container */
.side-menu-velvet ul.mod-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Each link entry */
.side-menu-velvet ul.mod-menu li {
  margin: 0;
}

.side-menu-velvet ul.mod-menu li a {
  display: inline-block;
  width: 100%;
  color: #2b2b2b;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 0;
  transition: all 0.4s ease;
  position: relative;
}

/* Hover — bright copper shimmer */
.side-menu-velvet ul.mod-menu li a:hover {
  color: #a86d2d;
  text-shadow:
    0 0 5px rgba(255,255,255,0.7),
    0 0 12px rgba(185,124,44,0.6);
  transform: scale(1.03);
}

/* === FANTASY RUNIC SEPARATORS (silver-copper sigils) === */
.side-menu-velvet ul.mod-menu li a::after {
  content: "⸻⟡⸻";
  display: block;
  text-align: center;
  margin: 0.7rem auto;
  font-size: 1rem;
  color: #a86d2d;
  opacity: 0.8;
  letter-spacing: 0.3em;
  text-shadow:
    0 0 5px rgba(255,255,255,0.5),
    0 0 10px rgba(212,176,111,0.4);
}

.side-menu-velvet ul.mod-menu li:last-child a::after {
  display: none;
}

/* Vertical metallic strand accent */
.side-menu-velvet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.4) 0%,
    rgba(223,200,150,0.25) 30%,
    rgba(212,176,111,0.35) 70%,
    rgba(255,255,255,0.2) 100%
  );
  opacity: 0.6;
  pointer-events: none;
}

/* Soft ambient shimmer pulse */
.side-menu-velvet::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(circle at 50% -10%, rgba(255,255,255,0.2) 0%, transparent 70%);
  opacity: 0.4;
  animation: velvetMetalPulse 14s ease-in-out infinite;
}

@keyframes velvetMetalPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.55; }
}

/* ============================================================
   10.13  MENU PROPORTION & TYPOGRAPHIC BALANCE (v3.1)
   ============================================================ */

/* --- Constrain overall module width regardless of nesting --- */
.t4-col.right .t4-mod-wrap.side-menu,
.t4-col.right .t4-mod-wrap.side-menu-platinum,
.t4-col.right .t4-mod-wrap.side-menu-velvet,
.t4-col.right .t4-mod-wrap.side-menu-runic {
  max-width: 320px !important;   /* balanced sidebar size */
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Remove nested container + row padding inside the module */
.t4-col.right .t4-mod-wrap .container,
.t4-col.right .t4-mod-wrap .row {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Scale heading and link hierarchy --- */
.side-menu-platinum h1.sp-module-title,
.side-menu-velvet h1.sp-module-title,
.side-menu-runic h1.sp-module-title {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  margin-bottom: 1rem;
  text-align: center;
}

/* Adjust list font size for legibility */
.side-menu-platinum ul.mod-menu li a,
.side-menu-velvet ul.mod-menu li a,
.side-menu-runic ul.mod-menu li a {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  line-height: 1.55;
  padding: 0.4rem 0.5rem;
}

/* Slightly larger font on widescreen */
@media (min-width: 1400px) {
  .side-menu-platinum ul.mod-menu li a,
  .side-menu-velvet ul.mod-menu li a,
  .side-menu-runic ul.mod-menu li a {
    font-size: 1.1rem;
  }
}

/* Center titles and give subtle breathing space between menus */
#sp-right .t4-mod-wrap + .t4-mod-wrap {
  margin-top: 1.6rem;
}

/* --- Fix side-menu column padding at large breakpoints --- */
#sp-right,
.t4-col.right {
  padding-left: 0 !important;
  padding-right: 0.75rem !important;
}

/* Optional: balance with article width visually */
@media (min-width: 1200px) {
  .t4-col.right {
    flex: 0 0 22% !important;
    max-width: 22% !important;
  }
  .t4-col.component {
    flex: 0 0 78% !important;
    max-width: 78% !important;
  }
}
/* ============================================================
   ARTICLE + MENU CENTERED CONTAINMENT FIX (Purity IV / T4)
   ============================================================ */

/* 1️⃣ Give the section a visual center instead of full-bleed */
#t4-main-body .t4-section-inner.container-fluid {
  max-width: 1600px;                 /* adjust as desired (1200–1600px typical) */
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 2vw, 2rem);
  padding-right: clamp(1rem, 2vw, 2rem);
}

/* 2️⃣ Use flexbox to keep columns grouped toward center */
#t4-main-body .t4-section-inner > .t4-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;           /* center the whole block */
  align-items: flex-start;
  gap: clamp(1.25rem, 2vw, 2.5rem);  /* even spacing between article + menu */
}

/* 3️⃣ Explicit column widths */
#t4-main-body .t4-col.component {
  flex: 0 0 70%;
  max-width: 70%;
}

#t4-main-body .t4-col.right.side-menu {
  flex: 0 0 25%;
  max-width: 25%;
}

/* 4️⃣ Prevent outer drift */
#t4-main-body .t4-col.component,
#t4-main-body .t4-col.right.side-menu {
  margin-left: 0;
  margin-right: 0;
}

/* 5️⃣ Responsive stacking */
@media (max-width: 991.98px) {
  #t4-main-body .t4-section-inner > .t4-row {
    flex-wrap: wrap;
    justify-content: center;
  }
  #t4-main-body .t4-col.component,
  #t4-main-body .t4-col.right.side-menu {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* ============================================================
   11.0  CINEMATIC PARCHMENT + SIDE MENU INTEGRATION
   ============================================================ */

/* === 1️⃣ Unified backdrop — gentle vignette under both columns === */
#t4-main-body .t4-section-inner.container-fluid {
  position: relative;
  background:
    radial-gradient(ellipse at center,
      rgba(255,245,210,0.35) 0%,
      rgba(200,175,95,0.05) 70%,
      transparent 100%);
  box-shadow:
    inset 0 0 120px rgba(0,0,0,0.08),
    0 0 40px rgba(0,0,0,0.06);
  border-radius: 6px;
  overflow: visible;
}

/* === 2️⃣ Ornamental vertical divider between parchment & menus === */
#t4-main-body .t4-section-inner > .t4-row::after {
  content: "";
  position: absolute;
  left: 73%;                            /* align near menu edge */
  top: 5%;
  bottom: 5%;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(255,240,180,0.8) 0%,
    rgba(212,176,111,0.5) 50%,
    rgba(255,240,180,0.8) 100%
  );
  border-radius: 2px;
  filter: drop-shadow(0 0 4px rgba(255,220,150,0.6));
  pointer-events: none;
  z-index: 2;
}

/* === 3️⃣ Balanced typography + scaling for side menus === */

/* Menu titles (h1) */
.side-menu-platinum h1.mod-title,
.side-menu-velvet h1.mod-title,
.side-menu-runic h1.mod-title {
  font-family: "Tabula Peutingeriana","Cinzel Decorative",serif;
  font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.75rem);
  color: #d4b06f;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}

/* Menu links (h5 style) */
.side-menu-platinum ul.nav li a span.menu-item-title,
.side-menu-velvet ul.nav li a span.menu-item-title,
.side-menu-runic ul.nav li a span.menu-item-title {
  display: block;
  font-family: "Playfair Display","Georgia",serif;
  font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.15rem);
  letter-spacing: 0.02em;
  padding: 0.35rem 0;
}

/* === 4️⃣ Menu-type-specific flourishes === */

/* PLATINUM: gold shimmer trim + subtle parchment */
.side-menu-platinum {
  background: linear-gradient(180deg,#f9f4e5 0%,#f2e4c2 100%);
  border: 1px solid rgba(212,176,111,0.45);
  border-left: 6px solid rgba(212,176,111,0.75);
  box-shadow:
    inset 0 0 18px rgba(212,176,111,0.15),
    0 2px 10px rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 1.2rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.side-menu-platinum::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,240,190,0.15),transparent 70%);
  opacity:.7;
  pointer-events:none;
}

/* VELVET: silver parchment with gold hue */
.side-menu-velvet {
  background:linear-gradient(180deg,#f3f3f3 0%,#d9d9d9 100%);
  border:1px solid rgba(210,210,210,0.9);
  box-shadow:
    inset 0 0 25px rgba(255,255,255,0.25),
    0 2px 16px rgba(0,0,0,0.08);
  border-radius:8px;
  padding:1.4rem;
  position:relative;
}
.side-menu-velvet::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 40% 20%,rgba(255,255,255,0.3),transparent 70%);
  mix-blend-mode:screen;
  opacity:.8;
}

/* RUNIC: bronze-gold etch + rune separators */
.side-menu-runic {
  background:linear-gradient(180deg,#faf8f0 0%,#efe8d0 100%);
  border:2px solid rgba(140,100,40,0.35);
  border-left:6px solid #d4b06f;
  border-radius:6px;
  padding:1rem 1.2rem;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.1),
    0 2px 10px rgba(0,0,0,0.08);
  position:relative;
  overflow:hidden;
}
.side-menu-runic ul.nav > li + li::before {
  content:"ᛟ";                             /* rune symbol divider */
  display:block;
  text-align:center;
  font-family:"Tabula Peutingeriana","Cinzel Decorative",serif;
  color:rgba(212,176,111,0.6);
  font-size:1rem;
  margin:0.3rem 0;
  opacity:0.7;
}

/* === 5️⃣ Sticky menu on scroll (optional) === */
@media (min-width: 992px) {
  .t4-col.right.side-menu {
    position: sticky;
    top: 5rem;                /* adjust for header height */
    align-self: flex-start;
  }
}
/* ============================================================
   12.0  SIDE MENU ORNAMENTAL CORNER GLYPHS (v1.0)
   ============================================================ */

/* Shared decorative glyph style */
.side-menu-platinum::before,
.side-menu-platinum::after,
.side-menu-velvet::before,
.side-menu-velvet::after,
.side-menu-runic::before,
.side-menu-runic::after {
  content: "✦";                     /* simple star glyph — see per-type overrides below */
  position: absolute;
  font-family: "Tabula Peutingeriana","Cinzel Decorative",serif;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.8;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(255,240,190,0.4);
  transform: scale(1);
}

/* Top-left and bottom-right placement defaults */
.side-menu-platinum::before,
.side-menu-velvet::before,
.side-menu-runic::before {
  top: 0.45rem; left: 0.6rem;
}
.side-menu-platinum::after,
.side-menu-velvet::after,
.side-menu-runic::after {
  bottom: 0.45rem; right: 0.6rem;
}

/* === 12.1  Menu-specific ornament color & glyphs === */

/* Platinum — golden filigree starburst */
.side-menu-platinum::before,
.side-menu-platinum::after {
  color: #d4b06f;
  text-shadow:
    0 0 6px rgba(255,230,160,0.6),
    0 0 12px rgba(255,255,200,0.3);
  content: "✶";
}

/* Velvet — silver-gold hybrid fleur (safe: inside content wrapper to avoid ::before/::after collision) */
.side-menu-velvet .sp-module-content { position: relative; }
.side-menu-velvet .sp-module-content::before,
.side-menu-velvet .sp-module-content::after {
  content: "❈";
  position: absolute;
  font-family: "Tabula Peutingeriana","Cinzel Decorative",serif;
  font-size: 1.1rem;
  line-height: 1;
  color: #cdb78a;
  opacity: 0.85;
  z-index: 3;
  pointer-events: none;
  text-shadow:
    0 0 6px rgba(255,255,210,0.5),
    0 0 12px rgba(181,152,61,0.3);
}
.side-menu-velvet .sp-module-content::before { top: 0.45rem; left: 0.6rem; }
.side-menu-velvet .sp-module-content::after  { bottom: 0.45rem; right: 0.6rem; }

/* Runic — bronze-gold (keep shared ✦ glyphs) */

/* ==========================================================================
   18.4 · EMPTY ARTICLE CONTAINER PURGE — T4 SPECIFIC
   Removes blank parchment blocks or empty article bodies
   ========================================================================== */

/* Hide the entire article block if .article-body has no visible content */
body.com_content.view-article .article-parchment:has(.article-body:empty),
body.com_content.view-article .article-parchment:has(.article-body:blank),
body.com_content.view-article .article-body:empty,
body.com_content.view-article .article-body:blank {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* If entire .com-content-article contains no visible text, collapse it */
body.com_content.view-article .com-content-article:has(.article-parchment:empty),
body.com_content.view-article .com-content-article:has(.article-parchment:has(.article-body:empty)) {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Collapse surrounding row if both columns are empty */
body.com_content.view-article .article-inner .row:has(.article-body:empty) {
  display: none !important;
  height: 0 !important;
}

/* Fallback for Firefox (no :has yet) */
body.com_content.view-article .article-body:empty + * {
  display: none !important;
}

/* Trim space before footer */
body.com_content.view-article #sp-main-body {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   FOOTER TRUE CENTER FIX — CLOSE GAP + RESTORE 5 COLUMNS
   ============================================================ */

/* 1. True full-width wrapper (kills Joomla .container padding) */
#t4-footer {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  background: #0e0e0e;
  overflow: hidden;
}

/* 2. Neutralize T4 container padding and limit */
#t4-footer .t4-section-inner.container,
#t4-footer .t4-mod-wrap,
#t4-footer .section-inner {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0 auto;
}

/* 3. Footer grid re-establish 5 columns, centered */
#t4-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  width: 100%;
  max-width: 1400px;        /* same center width as main content */
  margin: 0 auto;
  padding: 3rem 2rem;
  box-sizing: border-box;
}

/* 4. Tighten bottom margin (closes black gap) */
body:not(.view-feature) #t4-footer {
  margin-top: 0;
  padding-top: 0;
}

/* 5. Column visuals */
#t4-footer .footer-column {
  text-align: center;
}
#t4-footer .footer-column img {
  display: block;
  margin: 0 auto 0.8rem auto;
}
#t4-footer .footer-column h4 {
  color: #f2e4c4;
  margin-bottom: 0.6rem;
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: 0.04em;
}
#t4-footer .footer-links a {
  color: #d8d8d8;
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
}
#t4-footer .footer-links a:hover { color: #f2e4c4; }

/* 6. Footer bottom alignment */
#t4-footer .footer-bottom {
  grid-column: 1 / -1;      /* span all 5 columns */
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 2rem;
  padding-top: 1rem;
  color: #aaa;
  font-size: 0.9rem;
}

/* 7. Responsive 3→2→1 breakpoints */
@media (max-width: 1200px) {
  #t4-footer .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  #t4-footer .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem 1.5rem;
  }
}
@media (max-width: 480px) {
  #t4-footer .footer-grid {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem;
  }
}