/* Cassiopeia user.css (clean, ASCII-only) */

:root{
  --brand: #1f5cff;
  --radius: 18px;
  --line: rgba(15,23,42,.10);
  --shadow: 0 16px 40px rgba(15,23,42,.12);
  --glass: rgba(246,248,255,.68);
}

/* base */
html, body { overflow-x: hidden !important; }
html, body, body.site { background: transparent !important; }

/* BACKGROUND: show image normally (NO blue overlay on the image) */
body.site .site-grid{
  min-height: 100vh !important;
  background: #0b1220 url("/images/chess.jpg") center/cover no-repeat fixed !important;

  /* make spacing stable */
  gap: 0 !important;
  row-gap: 0 !important;
}
@media (max-width: 768px){
  body.site .site-grid{
    background-attachment: scroll !important;
  }
}

/* remove template overlay layers */
body.site::before, body.site::after,
.site::before, .site::after,
.site-grid::before, .site-grid::after,
.container-header::before, .container-header::after,
.container-banner::before, .container-banner::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* KILL the empty banner row (this is usually the "random" top gap) */
body.site .container-banner{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* normalize varying top margins from page header / breadcrumbs / messages */
body.site .container-header{ margin: 0 !important; padding: 0 !important; }
body.site .page-header,
body.site .breadcrumb,
body.site .breadcrumbs,
#system-message-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* CONTENT + SIDEBAR "GLASS" (this is where the light blue belongs) */
body.site .container-component,
body.site .container-sidebar-left,
body.site .container-sidebar-right{
  background: var(--glass) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.25rem !important;
  margin-top: 0px !important; /* constant, small spacing under header */
}

/* avoid double padding inside bootstrap container */
body.site .container-component > .container,
body.site .container-component > .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* inner article areas transparent so wrapper "glass" is visible */
body.site .container-component .item-page,
body.site .container-component .com-content-article,
body.site .container-component .blog-items,
body.site .container-component .category-list,
body.site .container-component .card,
body.site .container-component .card-body{
  background: transparent !important;
}

/* Links */
a{ color: var(--brand) !important; }
a:hover{ opacity: .92; }

/* Tables zebra */
body.site .container-component table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line) !important;
  border-radius: 14px;
  overflow: hidden;
}
body.site .container-component table thead th{
  background-color: rgba(31,92,255,.08) !important;
  font-weight: 800 !important;
}
body.site .container-component table tbody tr:nth-child(odd) td,
body.site .container-component table tbody tr:nth-child(odd) th{
  background-color: rgba(246,248,255,.72) !important;
}
body.site .container-component table tbody tr:nth-child(even) td,
body.site .container-component table tbody tr:nth-child(even) th{
  background-color: rgba(31,92,255,.03) !important;
}
body.site .container-component table td,
body.site .container-component table th{
  padding: .55rem .65rem !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  vertical-align: top;
}
body.site .container-component table tbody tr:last-child td,
body.site .container-component table tbody tr:last-child th{
  border-bottom: 0 !important;
}

/* Footer */
.container-footer, footer.footer{
  background: rgba(255,255,255,.70) !important;
  border-top: 1px solid var(--line) !important;
}

/* Accordion menu arrows (ASCII-safe) */
.accordion-menu .submenu-toggle{
  margin-left: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.accordion-menu li.has-sub > .submenu-toggle::after { content: "\25BC"; } /* down */
.accordion-menu li.is-open > .submenu-toggle::after { content: "\25B2"; } /* up */







/* ===== TOP GAP FIX (keep last) ===== */

/* Some Cassiopeia layouts create "rows" above main content */
body.site .site-grid{
  padding-top: 0 !important;
  margin-top: 0 !important;
  gap: 0 !important;
  row-gap: 0 !important;
}

/* Compress common top containers (even if they contain whitespace) */
body.site .container-header,
body.site .container-top-a,
body.site .container-top-b,
body.site .container-breadcrumbs,
body.site .container-below-top,
body.site .container-banner{
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Remove extra spacing inside main */
body.site main{
  margin: 0 !important;
  padding-top: 0 !important;
}

/* Make first element in component not push content down */
body.site .container-component .container > :first-child,
body.site .container-component > :first-child{
  margin-top: 0 !important;
}

/* If the banner row still creates space: force-hide it */
body.site .container-banner{
  display: none !important;
}









/* ===== TOP ROWS HARD OFF (TEST) ===== */
body.site .container-top-a,
body.site .container-top-b,
body.site .container-below-top,
body.site .container-breadcrumbs{
  display: none !important;
}






/* ===== TOP GAP FIX v2 (main padding/margin killer) ===== */

/* main in Cassiopeia often has padding-top (creates the blank band) */
body.site .site-grid > main,
body.site main,
body.site main#main{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* also kill padding/margins on the first wrapper inside main */
body.site .site-grid > main > *:first-child,
body.site main > *:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* make sure container-component itself does not add top space */
body.site .site-grid > main > .container-component,
body.site .container-component{
  margin-top: 0 !important;
}

/* the most common “push-down”: first heading/breadcrumb block inside component */
body.site .container-component .page-header,
body.site .container-component h1{
  margin-top: 0 !important;
  padding-top: 0 !important;
}









/* ===== HEADER + GAP HARD FIX (keep very last) ===== */

/* reduce header block height */
body.site .container-header{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
body.site header.header{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* navbar often adds vertical padding -> makes the "empty band" */
body.site .navbar{
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  margin: 0 !important;
  min-height: 0 !important;
}
body.site .navbar-brand{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* ensure there is no extra gap between header and main */
body.site .site-grid > main,
body.site main{
  margin-top: 0 !important;
  padding-top: 0 !important;
}







/* DEBUG: which element creates the band? (remove later) */
body.site .container-header{ outline: 4px solid red !important; }
body.site main{ outline: 4px solid yellow !important; }
body.site main > :first-child{ outline: 4px solid lime !important; }