/*
 * Per-server theming layer.
 *
 * The defaults below are overridden by the <style> block that
 * layouts/app.blade.php renders from $server->theme (ServerTheme model), so
 * every server gets its own logo, backgrounds, colours and fonts without any
 * CSS file being edited. Load this AFTER styles.css and custom.css.
 */
:root {
  --accent: #c2a35b;
  --accent-2: #7b4dff;
  --bg-color: #0b0714;
  --nav-bg: url('../images/Navigation-BG.jpg');
  --header-bg: url('../images/Header-BG.svg');
  /* Which part of the hero image shows; set per server in Server Data -> Branding & Theme. */
  --header-bg-position: 50% 50%;
  --header-bg-size: cover;
  --footer-bg: url('../images/Footer-BG.png');
  --logo: url('../images/logo.webp');
  --body-font: 'Rubik', sans-serif;
  --heading-font: 'Cinzel', serif;
}

/* ---- base ------------------------------------------------------------- */
body {
  background: var(--bg-color) !important;
  font-family: var(--body-font);
}

h1, h2, h3, h4, h5, h6,
.cta-title, .terms-title, .footer-heading, .block-heading,
.purple-style, .white-style, .play-button, .navlink .link_animation {
  font-family: var(--heading-font);
}

/* ---- colours (override hardcoded purple/gold) ------------------------- */
.purple-style {
  color: var(--accent);
  filter: none;
}

.terms-title {
  color: var(--accent);
}

.text-yellow-color {
  color: var(--accent) !important;
}

a.foot-link-in-text,
.footer-link:hover,
.navlink:hover .link_animation,
.navlink.w--current .link_animation,
.blue-text {
  color: var(--accent) !important;
}

.channel-button,
.spec-btn-style-hov,
.btn-accent {
  background: linear-gradient(90deg, var(--accent-2), var(--accent)) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ---- images driven by the server theme -------------------------------- */
.navigation-bar,
.nav-section .navigation-bar {
  background-image:
    url('../images/nav-border-bottom.png'),
    url('../images/nav-border-top.png'),
    var(--nav-bg),
    linear-gradient(180deg, #030d1b, #141f31);
}

.header-section {
  background-image: var(--header-bg);
  background-position: var(--header-bg-position);
  background-size: var(--header-bg-size);
}

.header-section.store {
  background-image: url('../images/nav-border-bottom.png'), var(--header-bg);
  background-position: 50% 100%, var(--header-bg-position);
  background-size: contain, var(--header-bg-size);
}

.footer-section,
.card-update,
.top-players-bg {
  background-image: var(--footer-bg);
}

.logo-nav,
.logo-footer {
  background-image: var(--logo);
}

/* Hover state for the play button reuses the base artwork + brighten. */
.play-button:hover {
  filter: brightness(1.2) saturate(1.1);
}

/* ---- small additions used by the new Blade pages ---------------------- */
.hero-section {
  min-height: 420px;
  display: flex;
  align-items: center;
  background-color: var(--bg-color);
  background-image: var(--header-bg);
  background-size: var(--header-bg-size);
  background-position: var(--header-bg-position);
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* .play-button is a fixed-width flex box, so text-align does nothing to it;
   centre it in the hero explicitly. */
.hero-cta .play-button {
  margin-left: auto;
  margin-right: auto;
}

/* Home page: Latest Updates on top, the Support box underneath and centred
   (they used to sit side by side in two columns). */
.home-sections {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.home-updates {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}

.home-support {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.hero-title {
  color: #fff;
  font-size: 48px;
  text-shadow: 0 0 20px #000;
}

.hero-subtitle {
  color: #c9d1e3;
  font-size: 18px;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
}

.stat-pill .blue-text {
  font-weight: 700;
}

.vote-sites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.vote-site-card {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  text-align: center;
}

.vote-site-card .timer {
  display: block;
  margin-top: 8px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* .channel-button is display:block with a 20px left margin in styles.css,
   which pushes the button off-centre inside the centred card. */
.vote-site-card .voteBtn {
  display: inline-block;
  margin: 0;
}

.vote-site-card .voteBtn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.top-voters-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.top-voters-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  color: #e6e6e6;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}

.product-card .item-div,
.product-card .item-div.new,
.product-card .item-div.promo {
  margin: 0;
  min-height: 160px;
  background-color: #0a111c;
  background-size: 160px, cover;
}

.product-card .item-div.new,
.product-card .item-div.promo {
  background-size: 60px 60px;
}

.product-card img {
  width: 100%;
  height: 160px;
  object-fit: contain;
}

.product-card .product-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-card .product-name {
  color: #fff;
  font-family: var(--heading-font);
  font-size: 18px;
}

.product-card .item-price {
  color: var(--accent);
  font-weight: 700;
}

.product-card .item-price del {
  color: #7f8a9e;
  margin-right: 6px;
  font-weight: 400;
}

/* Mandatory Terms of Service / Refund Policy tick above the product grid. */
.store-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
}

.store-terms input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.store-terms a {
  color: var(--accent);
  text-decoration: underline;
}

.download-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.download-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #e6e6e6;
}

.download-list code {
  color: #7f8a9e;
  font-size: 12px;
}

.page-content {
  color: #d5dbe8;
  line-height: 1.7;
}

.page-content img {
  max-width: 100%;
  height: auto;
}

/*
 * Hand-written thread/guide HTML from the control panel's HTML mode:
 * centred headings with inline colours, <figure class="image"> screenshots,
 * <center> wrappers and bullet lists. Keep the author's inline styles, just
 * make the rest sit well on the dark theme.
 */
.page-content h1, .page-content h2, .page-content h3, .page-content h4 {
  color: #fff;
  margin: 1.6em 0 0.4em;
  line-height: 1.3;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

.page-content h2 + h3, .page-content h3 + h4 {
  margin-top: 0;
  font-weight: 400;
  color: #d5dbe8;
}

article.page-content {
  padding-top: 16px;
}

.page-content center > :first-child, .page-content > :first-child {
  margin-top: 0;
}

/* styles.css greys every <p>; inside page content follow the article (or an inline colour on a wrapper). */
.page-content p {
  margin: 0 0 1em;
  color: inherit;
}

.page-content figure {
  margin: 0 auto 1.25em;
  max-width: 100%;
  text-align: center;
}

.page-content figure.image img, .page-content center img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.page-content figure + figure {
  margin-top: -0.5em;
}

.page-content figcaption {
  margin-top: 6px;
  font-size: 13px;
  color: #7f8a9e;
}

.page-content ul, .page-content ol {
  margin: 0 0 1.25em;
  padding-left: 1.5em;
}

/* <li><p>text</p></li> (as editors emit): keep the text on the marker's line. */
.page-content li > p {
  margin: 0;
}

.page-content li > p:first-child {
  display: inline;
}

/* Bullet lists inside <center>: put the marker next to the centred text. */
.page-content center ul, .page-content center ol {
  list-style-position: inside;
  padding-left: 0;
}

.page-content center li {
  text-align: center;
}

.page-content a {
  color: var(--accent);
}

.page-content iframe, .page-content video {
  max-width: 100%;
}

.page-content table {
  width: 100%;
  margin-bottom: 1.25em;
  border-collapse: collapse;
}

.page-content th, .page-content td {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.page-content hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 1.5em 0;
}

.page-content blockquote {
  margin: 0 0 1.25em;
  padding: 10px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(0, 0, 0, 0.25);
}

.update-card {
  display: block;
  padding: 18px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: #e6e6e6;
  text-decoration: none;
}

.update-card:hover {
  border-color: var(--accent);
  color: #fff;
}

.update-card .update-number {
  color: var(--accent);
  font-family: var(--heading-font);
}

.update-card time {
  color: #7f8a9e;
  font-size: 12px;
}