/* =========================================================
   ARASHIKAN | Cassiopeia Global Dark Theme (Joomla 5)
   File: /media/templates/site/cassiopeia/css/user.css
   DROP-IN UPGRADE (Consolidated Mobile Layout Fix + Ultra Edge)
   NOTE: Only change = tighter mobile side gutters (edge-to-edge feel)
         Everything else preserved.
   ========================================================= */

/* -----------------------------
   0) Design Tokens
------------------------------ */
:root{
  /* Core palette */
  --ab-bg: #0b0e12;
  --ab-surface: #111622;
  --ab-surface-2: #0f1420;

  --ab-card: rgba(255,255,255,.06);
  --ab-card-2: rgba(255,255,255,.04);
  --ab-border: rgba(255,255,255,.12);

  --ab-text: rgba(255,255,255,.92);
  --ab-muted: rgba(255,255,255,.72);

  /* Accent */
  --ab-accent: #e11d2e;          /* club red */
  --ab-accent-soft: rgba(225,29,46,.22);
  --ab-link: #ff4d5c;

  /* Focus ring */
  --ab-focus: rgba(225,29,46,.30);

  /* Radius scale */
  --ab-r-1: 12px;
  --ab-r-2: 16px;
  --ab-r-3: 20px;

  /* Spacing scale */
  --ab-space-1: 10px;
  --ab-space-2: 14px;
  --ab-space-3: 18px;

  /* Mobile gutters (ULTRA EDGE) */
  --ab-gutter-m: 6px;  /* was 12px */
  --ab-gutter-s: 4px;  /* was 10px */
}

/* -----------------------------
   1) Base
------------------------------ */
html, body{
  background: var(--ab-bg) !important;
  color: var(--ab-text);
}

a{ color: var(--ab-link); }
a:hover{ opacity: .92; }

p, li, .small, .text-muted{
  color: var(--ab-muted) !important;
}

hr{
  border-color: var(--ab-border) !important;
  opacity: .7;
}

/* Prefer readable line-height in content areas */
.item-page,
.com-content-article{
  line-height: 1.65;
}

/* -----------------------------
   2) Cassiopeia shells
------------------------------ */
.site, .site-grid, .body, main, .container, .container-fluid{
  background: transparent !important;
  color: var(--ab-text);
}

.site-grid{
  background: transparent !important;
}

.container-component,
.container-sidebar-left,
.container-sidebar-right,
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b{
  background: transparent !important;
}

/* -----------------------------
   3) Header / Navbar
------------------------------ */
header, .header, .site-header, .navbar{
  background: rgba(17,22,34,.78) !important;
  border-bottom: 1px solid var(--ab-border);
  backdrop-filter: blur(10px);
}

.header.container-header{
  border-bottom: 1px solid var(--ab-border) !important;
}

.container-nav{
  gap: 12px;
}

/* Menu links (Cassiopeia nav) */
.container-nav .mod-menu,
.container-nav nav{
  background: transparent !important;
}

.navbar a, header a,
.container-nav .mod-menu a,
.container-nav nav a{
  color: var(--ab-text) !important;
  border-radius: 10px;
  padding: 10px 12px;
  transition: background .12s ease, opacity .12s ease;
}

.navbar a:hover, header a:hover,
.container-nav .mod-menu a:hover,
.container-nav nav a:hover{
  background: rgba(255,255,255,.06) !important;
  opacity: .95;
}

/* Active menu item */
.container-nav .mod-menu .active > a,
.container-nav .mod-menu a[aria-current="page"]{
  background: rgba(225,29,46,.18) !important;
  border: 1px solid rgba(225,29,46,.28) !important;
}

/* -----------------------------
   4) Dropdowns (Bootstrap)
------------------------------ */
.dropdown-menu{
  background: var(--ab-surface) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: 12px;
  padding: 8px !important;
}

.dropdown-item{
  color: var(--ab-text) !important;
  border-radius: 10px !important;
}

.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(255,255,255,.08) !important;
}

/* -----------------------------
   5) Unified cards / modules
------------------------------ */
.moduletable,
.card,
.blog-item,
.item-page,
.com-content-article,
.com-content-category-blog,
.com-content-featured,
.container-sidebar-right .moduletable,
.container-sidebar-left .moduletable{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.045),
    rgba(255,255,255,.025)
  ) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: var(--ab-r-2);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 14px;
}

/* Remove double borders & harsh inner backgrounds where relevant */
.card .card-body{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Images */
img{ border-radius: var(--ab-r-2); }

/* Article images a bit more "premium" */
.item-page img,
.com-content-article img{
  border-radius: var(--ab-r-2);
}

/* -----------------------------
   6) Typography
------------------------------ */
h1,h2,h3,h4,h5,h6{
  color: var(--ab-text) !important;
}

.container-sidebar-right h3,
.container-sidebar-left h3{
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
}

/* -----------------------------
   7) Buttons
------------------------------ */
.btn, button, input[type="submit"], input[type="button"]{
  border-radius: var(--ab-r-1);
}

.btn-primary{
  background: var(--ab-accent) !important;
  border-color: rgba(0,0,0,.25) !important;
}

.btn-primary:hover{ opacity: .95; }

/* -----------------------------
   8) Forms
------------------------------ */
.form-control, input, textarea, select{
  background: rgba(255,255,255,.06) !important;
  color: var(--ab-text) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: var(--ab-r-1);
}

.form-control::placeholder, input::placeholder, textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* -----------------------------
   9) Tables
------------------------------ */
table{ color: var(--ab-text); }

.table, .table *{
  border-color: var(--ab-border) !important;
}

/* -----------------------------
   10) Alerts
------------------------------ */
.alert{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--ab-border) !important;
  color: var(--ab-text) !important;
}

/* -----------------------------
   11) Breadcrumbs
------------------------------ */
.breadcrumb{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: var(--ab-r-2);
  padding: 10px 12px;
}

/* -----------------------------
   12) Footer
------------------------------ */
footer, .footer, .site-footer{
  background: rgba(17,22,34,.80) !important;
  border-top: 1px solid var(--ab-border);
}

.container-footer{
  padding: 18px 0;
}

.container-footer a{
  color: var(--ab-muted) !important;
}
.container-footer a:hover{
  color: var(--ab-text) !important;
}

/* Back to top */
.back-to-top-link{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: var(--ab-r-2) !important;
}

/* -----------------------------
   13) Focus ring (accessible)
------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px var(--ab-focus) !important;
}

/* -----------------------------
   14) SP Page Builder compatibility
------------------------------ */
.sppb-section, .sppb-row, .sppb-addon, .sppb-container{
  background: transparent;
  color: var(--ab-text);
}

.sppb-addon-content,
.sppb-addon-text-block,
.sppb-addon-wrapper{
  color: var(--ab-text);
}

/* Feature boxes (Kyusho / Karate / Kobudo) */
.sppb-addon-feature{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.02)
  ) !important;
  border: 1px solid var(--ab-border);
  border-radius: 18px;
  padding: 20px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.sppb-addon-feature:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

/* Accent strip */
.sppb-addon-feature::before{
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 4px;
  margin-bottom: 14px;
  background: var(--ab-accent);
  opacity: .8;
}

.sppb-addon-feature h3{
  color: var(--ab-text) !important;
  margin-bottom: 10px;
}

.sppb-addon-feature p{
  color: var(--ab-muted) !important;
}

/* Section spacing consistency (desktop) */
.sppb-section{
  padding-top: 64px;
  padding-bottom: 64px;
}

/* -----------------------------
   15) Touch devices: disable "jumping" hover
------------------------------ */
@media (hover: none){
  .sppb-addon-feature:hover{
    transform: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
}

/* =========================================================
   16) MOBILE LAYOUT FIX (single source of truth)
   - edge-to-edge feeling
   - no card narrowing
   - tighter spacing
   ========================================================= */
@media (max-width: 768px){

  /* --- Cassiopeia: stop "double padding" narrowing --- */
  .container,
  .container-fluid,
  .site-grid,
  main,
  .body,
  .container-nav,
  .container-header,
  .container-footer{
    padding-left: var(--ab-gutter-m) !important;
    padding-right: var(--ab-gutter-m) !important;
  }

  /* Joomla component wrapper (Cassiopeia sometimes adds inner padding) */
  .container-component{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* SP Page Builder: prevent max-width squeeze */
  .sppb-container{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* SP Page Builder rows/sections: keep clean, let gutters be on the global containers */
  .sppb-section,
  .sppb-row{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If some addon injects side padding, keep it minimal (safe) */
  .sppb-addon{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Global vertical rhythm --- */
  .sppb-section{
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* --- Cards/modules full width look --- */
  .moduletable,
  .card,
  .blog-item,
  .item-page,
  .com-content-article,
  .com-content-category-blog,
  .com-content-featured,
  .container-sidebar-right .moduletable,
  .container-sidebar-left .moduletable{
    padding: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
  }

  /* --- Feature boxes: full width + tighter --- */
  .sppb-addon-feature{
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* --- Header/nav: less bulky --- */
  .navbar a, header a,
  .container-nav .mod-menu a,
  .container-nav nav a{
    padding: 9px 10px !important;
  }

  /* --- Typography: mobile scanning --- */
  h1{ font-size: 1.55rem; line-height: 1.15; margin-bottom: 10px !important; }
  h2{ font-size: 1.30rem; line-height: 1.20; margin-bottom: 10px !important; }
  h3{ font-size: 1.08rem; line-height: 1.25; margin-bottom: 8px !important; }
  h4,h5,h6{ margin-bottom: 8px !important; }

  p, li{
    font-size: .96rem;
    line-height: 1.55;
  }
  p{ margin-bottom: 10px !important; }
  li{ margin-bottom: 6px !important; }

  /* --- Breadcrumb smaller + full width feel --- */
  .breadcrumb{
    padding: 8px 10px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  /* --- Buttons/forms: tap-friendly but not huge --- */
  .btn,
  button,
  input[type="submit"],
  input[type="button"]{
    padding: 9px 12px !important;
    font-size: .95rem !important;
    border-radius: 12px !important;
  }

  .form-control,
  input,
  textarea,
  select{
    padding: 9px 12px !important;
    font-size: .95rem !important;
    border-radius: 12px !important;
  }

  /* --- Images --- */
  img{
    border-radius: 14px !important;
  }

  /* --- Common "floating avatar" / intrusive overlays (safe hides) --- */
  .floating-avatar,
  .profile-float,
  .ab-profile-float{
    display: none !important;
  }
}

/* Extra small phones */
@media (max-width: 420px){

  .container,
  .container-fluid,
  .site-grid,
  main,
  .body,
  .container-nav,
  .container-header,
  .container-footer{
    padding-left: var(--ab-gutter-s) !important;
    padding-right: var(--ab-gutter-s) !important;
  }

  .sppb-section{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .moduletable,
  .card,
  .blog-item,
  .item-page,
  .com-content-article,
  .com-content-category-blog,
  .com-content-featured{
    padding: 11px !important;
    margin-bottom: 11px !important;
    border-radius: 13px !important;
  }

  p, li{ font-size: .95rem; }
  h1{ font-size: 1.45rem; }
  h2{ font-size: 1.22rem; }
  h3{ font-size: 1.02rem; }
}

/* -----------------------------
   17) Optional: subtle scrollbar for desktop
------------------------------ */
@media (min-width: 992px){
  ::-webkit-scrollbar{ width: 10px; height: 10px; }
  ::-webkit-scrollbar-track{ background: rgba(255,255,255,.03); }
  ::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.10);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,0);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.16); }
}