/* ===================================================================
   HEIRS OF CHAOS — custom.css (SITE ONLY • CLEAN)
   Joomla 5 • Helix Ultimate • Dark Graphite + Emerald
   =================================================================== */

/* 0) Baseline / Tokens */
html{color-scheme:dark;scroll-behavior:smooth;text-size-adjust:100%}
html,body{height:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","ss01"}

:root{
  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,"Inter var","Inter",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --fs-0:clamp(.9rem,.86rem + .2vw,1rem);
  --fs-1:clamp(1rem,.94rem + .35vw,1.1rem);
  --fs-2:clamp(1.1rem,1.02rem + .6vw,1.28rem);
  --fs-3:clamp(1.28rem,1.12rem + 1vw,1.6rem);
  --fs-4:clamp(1.5rem,1.2rem + 1.6vw,2rem);
  --fs-5:clamp(1.9rem,1.4rem + 2.5vw,2.6rem);
  --lh-tight:1.15;--lh-snug:1.25;--lh-normal:1.5;--lh-relaxed:1.7;

  --bg:#202123;
  --surface:#242528;
  --surface-2:#2c2d32;
  --surface-3:#343541;
  --text:#ECECF1;
  --muted:#b7b8c2;
  --line:transparent;

  --accent:#10a37f;
  --accent-2:#19c37d;
  --success:#22c55e;--warning:#facc15;--danger:#ef4444;

  --radius:14px;
  --shadow-lg:0 18px 40px rgba(0,0,0,.45);
  --shadow-md:0 12px 28px rgba(0,0,0,.35);
  --ring:0 0 0 3px color-mix(in oklab,var(--accent) 28%,transparent);

  --fx-glow:0 10px 26px color-mix(in oklab,var(--accent) 40%,transparent);
  --fx-glow-strong:0 14px 34px color-mix(in oklab,var(--accent) 48%,transparent),
                   0 0 0 1px color-mix(in oklab,var(--accent) 28%,transparent) inset;
}

body{
  font-family:var(--font-sans);
  font-size:var(--fs-1);
  line-height:var(--lh-normal);
  background:var(--bg);
  color:var(--text)
}
pre,code,kbd,samp{font-family:var(--font-mono)}
h1{font-size:var(--fs-5)}h2{font-size:var(--fs-4)}h3{font-size:var(--fs-3)}h4{font-size:var(--fs-2)}h5{font-size:1.05rem}h6{font-size:1rem}
p,li,dd{overflow-wrap:anywhere;text-wrap:pretty}h1,h2,h3{text-wrap:balance}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Links / selection */
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2);text-shadow:0 0 6px color-mix(in oklab,var(--accent) 40%,transparent)}
::selection{background:color-mix(in oklab,var(--accent) 35%,transparent);color:#fff}

/* 1) Layout / Title area — remove stray lines & shadows */
.body-innerwrapper,.sp-page-builder{background:var(--bg)!important}
#sp-title,.sp-page-title{background:var(--bg)!important;min-height:0!important;padding:0!important;border:0!important;box-shadow:none!important}
#sp-title::after,.sp-page-title::after{display:none!important}
.sppb-section,.sppb-row,.sppb-column{box-shadow:none!important;border:0!important}

/* Optional ambience */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px 520px at 70% -10%,color-mix(in oklab,var(--accent) 28%,transparent),transparent 60%),
    radial-gradient(900px 480px at -10% 60%,color-mix(in oklab,var(--accent-2) 20%,transparent),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.02));
  mix-blend-mode:screen
}

/* ===================================================================
   2) HEADER: Centered menu + right-aligned bigger logo
   =================================================================== */

#sp-top,#sp-top-bar{display:none!important}

#sp-header,
#sp-header .container{
  width:100%!important;
  max-width:100%!important;
  background:var(--bg)!important;
}
#sp-header{
  position:relative;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}

/* Remove Helix module chrome */
#sp-header .sp-module,
#sp-header .sp-module .sp-module-content,
#sp-header .sp-module-title,
#sp-header .custom,
#sp-logo,
#sp-logo .sp-module,
#sp-logo .sp-module-content,
#sp-logo .custom,
#sp-menu .sp-module,
#sp-menu .sp-module-content{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
}

/* Centered menu */
#sp-menu{
  position:relative;
  width:100%;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
#sp-menu .container,
#sp-menu .row,
#sp-menu [class*="col-"]{
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  justify-content:center!important;
}
#sp-menu .sp-megamenu-parent{
  display:inline-flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:14px;
  margin:0 auto!important;
  float:none!important;
}
.sp-megamenu-parent>li>a{
  background:transparent!important;color:var(--text)!important;
  padding:12px 16px;border-radius:10px;
  transition:background .15s,color .15s,transform .12s,box-shadow .2s
}
.sp-megamenu-parent>li:hover>a,
.sp-megamenu-parent>li.active>a{
  background:var(--surface-3)!important;color:#fff!important;
  transform:translateY(-1px);box-shadow:var(--fx-glow)
}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner{
  background:var(--surface-2);border-radius:12px;box-shadow:var(--fx-glow)
}
.sp-megamenu-parent .sp-dropdown li a{color:var(--text)!important}
.sp-megamenu-parent .sp-dropdown li a:hover{background:var(--surface-3);color:#fff!important}

/* Right-aligned logo */
#sp-logo{
  position:absolute;
  top:8px;
  right:18px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  z-index:20;
}
#sp-logo img,
#sp-header .custom img{
  max-height:140px;        /* Bigger logo on desktop */
  width:auto;height:auto;display:block;
  filter:none!important;box-shadow:none!important;margin:0;padding:0;object-fit:contain;
}
#sp-logo img:hover{transform:translateY(-2px);transition:transform .25s ease}

/* ===== Mobile handling: keep logo ABOVE the menu, not under ===== */
@media (max-width: 991px){
  #sp-logo{
    position:absolute;
    top:10px;
    right:12px;
    justify-content:flex-end;
  }
  #sp-header{
    padding-top:112px; /* ≈ mobile logo height + spacing */
    padding-bottom:10px;
  }
  #sp-logo img{max-height:100px}
  #sp-menu{justify-content:center}
  #sp-menu .sp-megamenu-parent{gap:10px}
}

/* ===================================================================
   3) Buttons
   =================================================================== */
.btn,.sppb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.05rem;border-radius:12px;font-weight:650;letter-spacing:.15px;
  background:var(--surface-3);color:var(--text);border:0;
  transition:transform .06s,box-shadow .2s,filter .2s,background .2s
}
.btn:hover,.sppb-btn:hover{background:var(--surface-2);box-shadow:var(--fx-glow)}
.btn:focus,.sppb-btn:focus{outline:none;box-shadow:var(--ring)}
.btn:active{transform:translateY(1px)}
.btn-primary,.sppb-btn-primary,.button-primary,.sppb-btn.sppb-btn-primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-2))!important;color:#fff!important;border:0!important
}
.btn-primary:hover,.sppb-btn-primary:hover{filter:brightness(1.05);box-shadow:var(--fx-glow-strong)}
.btn-outline-primary,.sppb-btn-outline,.sppb-btn-default{background:transparent!important;border:0!important;color:var(--accent)!important}
.btn-outline-primary:hover,.sppb-btn-outline:hover,.sppb-btn-default:hover{
  background:color-mix(in oklab,var(--accent) 12%,transparent)!important;color:#fff!important
}

/* ===================================================================
   4) Cards / Modules / Addons
   =================================================================== */
.card,.sp-module,.sppb-addon,.sppb-panel{
  background:var(--surface);
  border:0;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  color:var(--text)
}
.card-header,.sppb-addon-title,.sp-module-title{background:transparent;color:var(--text);border:0}
.clan-panel{position:relative;overflow:hidden;background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 12%,transparent),transparent 60%),var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.clan-panel h2,.clan-panel h3{position:relative;padding-bottom:.4rem;margin-bottom:.8rem}
.clan-panel h2::after,.clan-panel h3::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),transparent)}
.sp-module ul>li{border:0!important}
.mod-list li,.category-module li{border:0!important}

/* ===================================================================
   5) Forms / Tables / Alerts
   =================================================================== */
.form-control,.sppb-form-control,input,select,textarea{
  background:var(--surface-2)!important;color:var(--text)!important;border:0!important;border-radius:12px!important
}
.form-control::placeholder{color:color-mix(in oklab,var(--muted) 85%,#fff 15%)}
.form-control:focus,.sppb-form-control:focus{box-shadow:var(--ring)!important}
.table{color:var(--text);background:var(--surface);border-collapse:separate;border-spacing:0 6px}
.table thead th{color:var(--muted);font-weight:700;border:0}
.table tbody tr{background:var(--surface-2)}
.table tbody tr:hover{background:var(--surface-3);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 22%,transparent)}
.table td,.table th{border:0}
.alert{background:var(--surface-2);border:0;color:var(--text);box-shadow:var(--shadow-md)}

/* ===================================================================
   6) Footer / Media / Scrollbar
   =================================================================== */
#sp-footer,.footer{background:#1d1e21!important;color:var(--muted)!important;box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
img{filter:saturate(1.04) contrast(1.02)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-2)}

/* ===================================================================
   7) Joomla Users (login/register/profile)
   =================================================================== */
body[class*="com-users"] :is(.card,.card-body,.list-group-item,.accordion-item){
  background:var(--surface)!important;color:var(--text)!important;border:0!important;border-radius:12px!important;box-shadow:var(--shadow-md)
}
body[class*="com-users"] :is(.list-group,.accordion){background:transparent!important;border:0!important}
body[class*="com-users"] :is(.list-group-item,.accordion-button){background:var(--surface)!important;color:var(--text)!important;border:0!important}
body[class*="com-users"] .accordion-button:not(.collapsed){background:var(--surface-2)!important;color:#fff!important;box-shadow:none!important}
body[class*="com-users"] :is(.form-control,input,select,textarea){background:var(--surface-2)!important;color:var(--text)!important;border:0!important;border-radius:12px!important}
body[class*="com-users"] :is(.input-group-text,.btn-outline-secondary){background:var(--surface-2)!important;color:var(--text)!important;border:0!important}
body[class*="com-users"] :is(.input-group-text,.btn-outline-secondary):hover{background:var(--surface)!important;box-shadow:var(--ring)!important}
body[class*="com-users"] .form-check-input{background-color:var(--surface-2)!important;border:0!important}
body[class*="com-users"] :is(.form-check-label,.form-text,.text-muted){color:var(--muted)!important}
body[class*="com-users"] .btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-2))!important;border:0!important;color:#fff!important}
body[class*="com-users"] .btn-primary:hover{filter:brightness(1.05);box-shadow:0 10px 28px color-mix(in oklab,var(--accent) 40%,transparent)}

/* ===================================================================
   8) Language Switcher — small horizontal flags (header/top1)
   =================================================================== */

/* Hide the "Language" module title in header/top row (top1 column) */
#sp-top1 .sp-module-title{
  display:none !important;
}

/* Base module cleanup */
#sp-header .mod-languages,
#sp-top1 .mod-languages,
#sp-title .mod-languages{
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  box-shadow:none!important;
  border:0!important;
}

/* Horizontal list of flags */
.mod-languages ul,
.mod-languages ul.lang-inline{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:8px;
  padding:0!important;
  margin:0!important;
  list-style:none!important;
}

/* List items reset */
.mod-languages li{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}

/* Flag icons */
.mod-languages img{
  width:22px!important;
  height:16px!important;
  border-radius:3px!important;
  object-fit:cover;
  display:block;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.4));
  transition:transform .15s ease,filter .15s ease;
}

/* Hover effect */
.mod-languages img:hover{
  transform:translateY(-1px);
  filter:drop-shadow(0 0 6px color-mix(in oklab,var(--accent) 40%,transparent));
}

/* Hide any text label so only flags remain */
.mod-languages a{
  font-size:0!important;
  line-height:0!important;
  color:transparent!important;
}

/* Active language subtle highlight */
.mod-languages li.lang-active img{
  outline:2px solid color-mix(in oklab,var(--accent) 40%,transparent);
  outline-offset:2px;
}

/* ===================================================================
   9) Heirs of Chaos — responsive widescreen background blend
   =================================================================== */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;

  /* background image setup */
  background:
    #202123 url("/images/heos-bg.png") center top / contain no-repeat;
  background-attachment:fixed;

  /* blend + tone controls */
  opacity:.48;                        /* image strength — adjust 0.10–0.18 */
  mix-blend-mode:soft-light;          /* soft overlay for readability */
  filter:saturate(.9) contrast(.9) brightness(.9);

  /* smooth transitions when resizing */
  transition:background-size .4s ease, background-position .4s ease;
}

/* --- Responsive adjustments for mobile & tablets --- */
@media (max-width: 991px){
  body::after{
    background-position:center 35%;
    background-size:100% auto;        /* scales proportionally */
    opacity:.10;                      /* slightly dimmer for legibility */
  }
}