/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/* ============================================================
   Boxed / forum-inspired reskin
   Adds structured "panel" boxes with a top accent bar to major
   content sections, and tightens up section-title styling —
   inspired by classic dark forum layouts, built entirely with
   this theme's own colors/branding.
   ============================================================ */

/* Give major standalone content boxes (hero panels, sidebars,
   feedback cards, single panels) a crisp top accent bar and
   slightly deeper background, so they read as distinct "panels".
   Product/category list rows are excluded (see below) so a stack
   of many rows doesn't turn into a stack of many accent bars. */
.bg-card\/75:not(.product-row):not(.category-row) {
  border-top: 3px solid rgb(var(--cl-accent)) !important;
  background-color: rgba(0, 0, 0, 0.28) !important;
}

/* Product & category rows: flat "topic row" styling instead —
   a thin top divider and a subtle hover highlight, like rows
   inside a forum category box. */
.product-row,
.category-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(0, 0, 0, 0.18) !important;
}

/* Section titles that sit above the accent-colored <hr> divider
   (hero, stats, categories, feedbacks, etc.) get a tighter,
   label-like treatment. */
h1:has(+ hr.border-accent-500),
h2:has(+ hr.border-accent-500),
h3:has(+ hr.border-accent-500) {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

hr.border-accent-500 {
  opacity: 0.7;
}

/* Any element already using Tailwind's uppercase utility gets a
   touch of letter-spacing to read more like a forum/panel label. */
.uppercase {
  letter-spacing: 0.04em;
}

/* Brand wordmark accent span, populated by script.js when
   "Brand Name Accent Letters" is set above 0 in theme settings. */
.brand-accent {
  color: rgb(var(--cl-accent));
}

/* Navbar links styled like a classic forum top menu: uppercase,
   tracked-out labels separated by thin vertical dividers. */
nav[data-component-id="navbar"] [x-ref="menu"] a,
nav[data-component-id="navbar"] [x-ref="menu"] button {
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
}

@media (min-width: 1024px) {
  nav[data-component-id="navbar"] [x-ref="menu"] > div > a:not(:last-child),
  nav[data-component-id="navbar"] [x-ref="menu"] > div > button:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* Give the nav-links row its own subtle shade, separated from the
   brand row above it — mirrors a classic forum's two-tier header. */
nav[data-component-id="navbar"] [x-ref="menu"] {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background-color: rgba(0, 0, 0, 0.15);
}


/* Themed, always-visible scrollbar for the chatbox message list. */
.chatbox-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--cl-accent)) rgba(255, 255, 255, 0.05);
}
.chatbox-scroll::-webkit-scrollbar {
  width: 8px;
}
.chatbox-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}
.chatbox-scroll::-webkit-scrollbar-thumb {
  background-color: rgb(var(--cl-accent));
  border: 2px solid transparent;
  background-clip: content-box;
}