/* STROS HQ THEME CUSTOMIZER */
:root {
  --theme-primary: #002D62;
  --theme-secondary: #EB6E1F;
  --theme-accent: #F4911E;
  --theme-bg: #071524;
  --theme-surface: #0d2238;
  --theme-text: #ffffff;
  --theme-muted: #cbd5e1;
}

html[data-stros-theme="midnight"] {
  --theme-primary: #101827;
  --theme-secondary: #475569;
  --theme-accent: #94a3b8;
  --theme-bg: #070b12;
  --theme-surface: #111827;
  --theme-text: #f8fafc;
  --theme-muted: #cbd5e1;
}

html[data-stros-theme="electric-blue"] {
  --theme-primary: #064e8f;
  --theme-secondary: #00a6fb;
  --theme-accent: #7dd3fc;
  --theme-bg: #031525;
  --theme-surface: #082f49;
  --theme-text: #ffffff;
  --theme-muted: #dbeafe;
}

html[data-stros-theme="orange"] {
  --theme-primary: #7c2d12;
  --theme-secondary: #f97316;
  --theme-accent: #fdba74;
  --theme-bg: #1c0d05;
  --theme-surface: #431407;
  --theme-text: #fff7ed;
  --theme-muted: #fed7aa;
}

html[data-stros-theme="space-city"] {
  --theme-primary: #312e81;
  --theme-secondary: #7c3aed;
  --theme-accent: #22d3ee;
  --theme-bg: #090b1a;
  --theme-surface: #17173a;
  --theme-text: #ffffff;
  --theme-muted: #ddd6fe;
}

html[data-stros-theme="rose"] {
  --theme-primary: #831843;
  --theme-secondary: #e11d48;
  --theme-accent: #fda4af;
  --theme-bg: #1f0711;
  --theme-surface: #4c0519;
  --theme-text: #fff1f2;
  --theme-muted: #fecdd3;
}

html[data-stros-theme="emerald"] {
  --theme-primary: #064e3b;
  --theme-secondary: #10b981;
  --theme-accent: #6ee7b7;
  --theme-bg: #041712;
  --theme-surface: #063f32;
  --theme-text: #ecfdf5;
  --theme-muted: #a7f3d0;
}

/* Apply theme broadly without breaking existing layout */
body {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

header,
nav,
.site-header,
.topbar,
.navbar {
  border-color: color-mix(in srgb, var(--theme-secondary) 35%, transparent) !important;
}

a:not(.theme-option):not(.theme-custom-close),
.accent,
.highlight {
  color: var(--theme-secondary);
}

button:not(.theme-fab):not(.theme-option):not(.theme-custom-close),
.btn,
.button,
.cta {
  border-color: var(--theme-secondary);
}

.theme-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-surface) 92%, transparent);
  color: var(--theme-text);
  padding: 12px 16px;
  font: inherit;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 32px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}

.theme-fab:hover {
  transform: translateY(-1px);
}

.theme-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
}

.theme-panel.is-open {
  display: flex;
}

.theme-card {
  width: min(92vw, 560px);
  max-height: 82vh;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 22px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
}

.theme-card h2 {
  margin: 0 0 6px;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
}

.theme-card p {
  margin: 0 0 18px;
  color: var(--theme-muted);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.055);
  color: var(--theme-text);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  text-align: left;
}

.theme-option[aria-pressed="true"] {
  outline: 2px solid var(--theme-secondary);
  background: rgba(255,255,255,.11);
}

.theme-dot {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.6);
}

.theme-custom-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.theme-custom-row label {
  font-weight: 750;
}

#stros-custom-color {
  width: 54px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.theme-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.theme-custom-close {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,.07);
  color: var(--theme-text);
  font: inherit;
  font-weight: 750;
}

@media (max-width: 560px) {
  .theme-grid {
    grid-template-columns: 1fr;
  }
  .theme-fab {
    right: 12px;
    bottom: 12px;
    padding: 10px 13px;
  }
}


/* FULL-SITE THEME APPLICATION */
html,
body {
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--theme-secondary) 16%, transparent) 0%, transparent 28%),
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--theme-primary) 22%, transparent) 0%, transparent 34%),
    linear-gradient(145deg, var(--theme-bg) 0%, var(--theme-primary) 48%, var(--theme-bg) 100%) !important;
  background-attachment: fixed !important;
  color: var(--theme-text) !important;
}

body,
main,
.page,
.page-shell,
.site-shell,
.content,
.content-wrap,
main > section {
  background-color: transparent !important;
  color: var(--theme-text) !important;
}

header,
nav,
.site-header,
.topbar,
.navbar,
footer,
.site-footer {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-surface) 94%, transparent),
      color-mix(in srgb, var(--theme-primary) 78%, transparent)
    ) !important;
  color: var(--theme-text) !important;
  border-color: color-mix(in srgb, var(--theme-secondary) 32%, transparent) !important;
}

section,
.card,
.panel,
.box,
.tile,
.stat-card,
.info-card,
.feature-card,
.story-card,
.gallery-card,
.roster-card,
.schedule-card,
.score-card,
.standings-card,
.transaction-card,
.faq-item,
.accordion-item,
.table-wrap,
table {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--theme-surface) 92%, transparent),
      color-mix(in srgb, var(--theme-primary) 34%, transparent)
    ) !important;
  color: var(--theme-text) !important;
  border-color: color-mix(in srgb, var(--theme-secondary) 24%, transparent) !important;
}

input,
textarea,
select {
  background: color-mix(in srgb, var(--theme-surface) 88%, black 12%) !important;
  color: var(--theme-text) !important;
  border-color: color-mix(in srgb, var(--theme-secondary) 34%, transparent) !important;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--theme-muted) 82%, transparent) !important;
}

thead,
th {
  background: color-mix(in srgb, var(--theme-primary) 74%, var(--theme-surface) 26%) !important;
  color: var(--theme-text) !important;
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--theme-surface) 84%, transparent) !important;
}

hr {
  border-color: color-mix(in srgb, var(--theme-secondary) 22%, transparent) !important;
}

.badge,
.pill,
.tag,
.chip {
  background: color-mix(in srgb, var(--theme-secondary) 18%, var(--theme-surface) 82%) !important;
  color: var(--theme-text) !important;
  border-color: color-mix(in srgb, var(--theme-secondary) 35%, transparent) !important;
}

/* Keep hero gradients dynamic with chosen theme */
.hero,
.home-hero,
.hero-section,
.page-hero,
.about-hero {
  background-image:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--theme-secondary) 42%, transparent) 0%, transparent 34%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--theme-primary) 58%, transparent) 0%, transparent 38%),
    linear-gradient(
      135deg,
      var(--theme-bg) 0%,
      var(--theme-primary) 45%,
      var(--theme-surface) 72%,
      var(--theme-bg) 100%
    ) !important;
}

/* Links and interactive accents */
a {
  color: var(--theme-accent);
}

button,
.btn,
.button,
.cta {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-secondary) 88%, white 12%),
      var(--theme-secondary)
    );
  color: #fff;
}

/* Preserve owner photo as an actual image instead of tinting it */
img {
  background: transparent !important;
}


/* KEEP TEXT INSIDE CARDS / BUBBLES WHITE */
.card,
.panel,
.box,
.tile,
.stat-card,
.info-card,
.feature-card,
.story-card,
.gallery-card,
.roster-card,
.schedule-card,
.score-card,
.standings-card,
.transaction-card,
.faq-item,
.accordion-item,
.table-wrap,
.badge,
.pill,
.tag,
.chip,
.card *,
.panel *,
.box *,
.tile *,
.stat-card *,
.info-card *,
.feature-card *,
.story-card *,
.gallery-card *,
.roster-card *,
.schedule-card *,
.score-card *,
.standings-card *,
.transaction-card *,
.faq-item *,
.accordion-item *,
.table-wrap *,
.badge *,
.pill *,
.tag *,
.chip * {
  color: #ffffff !important;
}

/* Keep form text readable too */
input,
textarea,
select,
option {
  color: #ffffff !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,.72) !important;
}


/* FORCE ALL BUTTON / BUBBLE TEXT TO WHITE */
button,
button *,
.btn,
.btn *,
.button,
.button *,
.cta,
.cta *,
a.btn,
a.btn *,
a.button,
a.button *,
a.cta,
a.cta *,
.hero a,
.hero a *,
.home-hero a,
.home-hero a *,
.hero-section a,
.hero-section a *,
[role="button"],
[role="button"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Keep icon/text contrast inside orange theme buttons */
button svg,
.btn svg,
.button svg,
.cta svg,
.hero a svg,
.home-hero a svg,
.hero-section a svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Disabled buttons should still be readable */
button:disabled,
.btn[aria-disabled="true"],
.button[aria-disabled="true"],
.cta[aria-disabled="true"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: .65 !important;
}