/* assets/theme-sds.css */
/* Super Duper South theme tokens
   -------------------------------------------------- */
:root {
  /* Core */
  --sds-bg: #0f1115;
  --sds-surface: #151923;
  --sds-text: #e8eaef;
  --sds-muted: #a9b1c3;
  --sds-border: #242a36;

  /* Accent (pick one) */
  --sds-accent: #3aa3ff;   /* Electric blue (default) */
  /* --sds-accent: #ff7a1a;*/ /* Orange pop */
  /* --sds-accent: #22d3a8;*/ /* Aqua mint */
  /* --sds-accent: #c084fc;*/ /* Orchid */

  --sds-radius: 1rem;
  --sds-shadow: 0 6px 24px rgba(0,0,0,.35);
}

/* Bootstrap variable overrides for dark theme */
:root {
  --bs-body-bg: var(--sds-bg);
  --bs-body-color: var(--sds-text);
  --bs-secondary-color: var(--sds-muted);

  /* Cards */
  --bs-card-bg: var(--sds-surface);
  --bs-card-color: var(--sds-text);
  --bs-card-border-color: var(--sds-border);
  --bs-border-color: var(--sds-border);

  /* Headings */
  --bs-heading-color: var(--sds-text);
}

/* Merch card readability */
.sds-card,
.sds-card .card-body { color: var(--sds-text); }

.sds-card .card-title {
  color: var(--sds-text);
  font-weight: 700;
  line-height: 1.2;
}

.sds-card .small,
.sds-card .text-secondary {
  color: var(--sds-muted) !important;  /* lighten secondary text on dark bg */
}

.card .card-body { line-height: 1.55; } /* comfier reading */



/* Base */
html, body { background: var(--sds-bg); color: var(--sds-text); }
a { color: var(--sds-accent); }
a:hover { filter: brightness(1.1); }

/* Navbar */
.navbar { background: rgba(21,25,35,.9); backdrop-filter: blur(6px); }
.navbar .nav-link { color: var(--sds-text); opacity: .9; }
.navbar .nav-link:hover { color: var(--sds-accent); opacity: 1; }

/* Navbar toggler (mobile menu button) */
.navbar-toggler { border: none; } /* optional */
.navbar-toggler:focus { box-shadow: 0 0 0 .25rem rgba(58,163,255,.35); } /* optional focus ring */

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%233aa3ff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22 M4 15h22 M4 23h22'/%3E%3C/svg%3E");
}


/* Buttons */
.btn-accent {
  background: var(--sds-accent);
  border: none;
  color: #071018;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background: var(--sds-bg);
  color: var(--sds-accent);
  box-shadow: 0 0 0 2px var(--sds-accent) inset;
}

/* merch cards */
.product-thumb { aspect-ratio: 1 / 1; object-fit: cover; }
.card .btn { margin-top: auto; }




.btn-ghost { background: transparent; border: 1px solid var(--sds-border); color: var(--sds-text); }
.btn-ghost:hover { border-color: var(--sds-accent); color: var(--sds-accent); }

/* Cards / surfaces */
.sds-card {
  background: var(--sds-surface);
  border: 1px solid var(--sds-border);
  border-radius: var(--sds-radius);
  box-shadow: var(--sds-shadow);
}
.section-title { font-family: 'Grandstander', sans-serif; letter-spacing: .5px; }

/* Dividers */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--sds-border), transparent); }

/* Hero */
.hero {
  position: relative; isolation: isolate; padding: 6rem 0 5rem;
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(58,163,255,.15), transparent),
    radial-gradient(800px 300px at 90% -20%, rgba(58,163,255,.08), transparent);
}
.hero h1 { font-family: 'Grandstander', sans-serif; font-size: 3.3rem; font-weight: 600; }
.hero p.lead { color: var(--sds-muted); }

/* Thumbs */
.thumb { aspect-ratio: 16/9; background: #0b0e13; border: 1px solid var(--sds-border); border-radius: .75rem; overflow: hidden; display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Accordion */
.accordion-button { background: var(--sds-surface); color: var(--sds-text); }
.accordion-button:not(.collapsed) { color: var(--sds-accent); box-shadow: none; }
.accordion-item { background: var(--sds-surface); border-color: var(--sds-border); }
.accordion-body { color: var(--sds-muted); }

/* Footer */
.footer { background: #0b0d12; color: var(--sds-muted); }
.footer a { color: var(--sds-text); text-decoration: none; }
.footer a:hover { color: var(--sds-accent); }