/* ===========================================================================
   Sotogrande Dungeon Masters — application styles (layered over Bootstrap 5).
   Bootstrap handles the grid/components; this file applies the brand theme via
   the CSS variables defined in themes.css.
   =========================================================================== */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .display-1, .display-2, .display-3, .navbar-brand {
  font-family: var(--font-head);
  color: var(--heading);
}

a { color: var(--link); }
a:hover { color: var(--accent); }

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

/* --- Layout ---------------------------------------------------------------- */
.sdm-main { min-height: 60vh; }

.navbar.sdm-nav {
  background: var(--brand);
  border-bottom: 2px solid var(--accent);
}
.sdm-nav .navbar-brand,
.sdm-nav .nav-link { color: var(--brand-contrast) !important; }
.sdm-nav .nav-link:hover,
.sdm-nav .nav-link.active { color: var(--accent) !important; }
.sdm-brand-mark {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; letter-spacing: .02em;
}

/* --- Cards / surfaces ------------------------------------------------------ */
.card, .sdm-surface, .list-group-item {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
  border-radius: var(--radius);
}
.card { box-shadow: var(--card-shadow); }
.sdm-muted-panel { background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius); }

/* --- Buttons -------------------------------------------------------------- */
.btn-brand {
  background: var(--brand); color: var(--brand-contrast);
  border: 1px solid var(--accent); border-radius: var(--radius);
}
.btn-brand:hover { background: var(--accent); color: #1a1100; }
.btn-accent {
  background: var(--accent); color: #1a1100; border: none; border-radius: var(--radius);
}
.btn-accent:hover { filter: brightness(1.08); color: #1a1100; }
.btn-outline-brand {
  border: 1px solid var(--accent); color: var(--text); border-radius: var(--radius);
}
.btn-outline-brand:hover { background: var(--accent); color: #1a1100; }

/* --- Hero ----------------------------------------------------------------- */
.sdm-hero {
  background:
    linear-gradient(135deg, rgba(11,42,74,.92), rgba(110,26,43,.82)),
    radial-gradient(circle at 80% 20%, rgba(200,162,75,.25), transparent 60%);
  color: #f4ecd8;
  border-radius: var(--radius);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3.5rem);
}
.sdm-hero h1 { color: #fff; }
[data-theme="terminal"] .sdm-hero {
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  color: var(--text);
}
[data-theme="terminal"] .sdm-hero h1 { color: var(--heading); }

/* --- Product cards -------------------------------------------------------- */
.sdm-product-img {
  aspect-ratio: 1 / 1; width: 100%; object-fit: cover;
  background: var(--bg-muted);
  border-radius: var(--radius) var(--radius) 0 0;
}
.sdm-price { font-weight: 700; color: var(--accent); }
.sdm-badge-featured {
  background: var(--accent); color: #1a1100; font-size: .7rem;
  padding: .15rem .5rem; border-radius: 1rem;
}

/* --- Theme switcher ------------------------------------------------------- */
.sdm-theme-switch .btn { padding: .15rem .5rem; }
.sdm-theme-switch .btn.active { outline: 2px solid var(--accent); }

/* --- Forms ---------------------------------------------------------------- */
.form-control, .form-select {
  background: var(--bg-elevated); color: var(--text); border-color: var(--border);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-elevated); color: var(--text);
  border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(200,162,75,.25);
}

/* --- Footer --------------------------------------------------------------- */
.sdm-footer {
  background: var(--brand); color: var(--brand-contrast);
  border-top: 2px solid var(--accent); margin-top: 4rem;
}
.sdm-footer a { color: var(--accent); }

/* --- Terminal flourish ---------------------------------------------------- */
[data-theme="terminal"] body { text-shadow: 0 0 2px rgba(51,255,102,.4); }
[data-theme="terminal"] .card,
[data-theme="terminal"] .btn,
[data-theme="terminal"] .form-control,
[data-theme="terminal"] .form-select { border-radius: 0; }
[data-theme="terminal"] .navbar-brand::before { content: "> "; }

/* --- Tables --------------------------------------------------------------- */
.table { color: var(--text); }
.table > :not(caption) > * > * { background: var(--bg-elevated); color: var(--text); }