/* Global site styles — home gold/teal near-black theme */
:root {
  --site-bg: #07090c;
  --site-surface: #10151c;
  --site-bg-elevated: #171e27;
  --site-text: #e8edf3;
  --site-muted: #8b97a6;
  --site-accent: #e8b86d;
  --site-primary-fg: #1a1206;
  --site-border: #2a3542;
  --site-accent-teal: #6ec8c4;
  --site-font: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --site-display: "Fraunces", "Times New Roman", Georgia, serif;
  --nav-height: 56px;
  --tabbar-height: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.site-body {
  background-color: var(--site-bg);
  color: var(--site-text);
  font-family: var(--site-font);
  min-height: 100vh;
  padding-top: var(--nav-height);
  padding-bottom: 0;
  overflow-x: hidden;
}

.site-body h1,
.site-body h2.page-title,
.site-main > .container > h1,
.site-main .display-heading {
  font-family: var(--site-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

@media (max-width: 767.98px) {
  .site-body {
    padding-top: 0;
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
  }
}

.site-main {
  min-height: calc(100vh - var(--nav-height));
}

@media (max-width: 767.98px) {
  .site-main {
    min-height: calc(100vh - var(--tabbar-height));
  }
}

/* Desktop nav — frosted bar, pill active link */
.desktop-nav {
  background: color-mix(in srgb, var(--site-bg) 88%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--site-border) 80%, transparent) !important;
  backdrop-filter: blur(12px);
}

.desktop-nav .nav-link {
  color: var(--site-muted) !important;
  font-weight: 500;
  padding-inline: 1rem !important;
  border-radius: 999px;
  border-bottom: none !important;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.desktop-nav .nav-link:hover {
  color: var(--site-accent) !important;
}

.desktop-nav .nav-link.active {
  color: var(--site-text) !important;
  background: var(--site-bg-elevated);
  border-bottom: none !important;
}

/* Mobile tabbar */
.mobile-tabbar {
  z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--site-bg) 92%, transparent) !important;
  border-top-color: var(--site-border) !important;
}

.mobile-tabbar .footer-item,
.mobile-tabbar .footer-item.text-light {
  color: var(--site-muted) !important;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-tabbar .footer-item.active {
  color: var(--site-primary-fg) !important;
  background-color: color-mix(in srgb, var(--site-accent) 88%, transparent);
}

.mobile-tabbar .footer-item:hover:not(.active) {
  color: var(--site-accent) !important;
}

/* Cards */
.about-card,
.contact-card {
  background-color: var(--site-surface);
  color: var(--site-text);
  border: 1px solid var(--site-border) !important;
}

/* Muted helpers (Bootstrap text-secondary clashes with dark theme) */
.text-secondary {
  color: var(--site-muted) !important;
}

/* Page intro / lede lines */
.page-lede {
  color: var(--site-accent) !important;
}

/* Primary buttons → gold */
.btn-primary {
  --bs-btn-color: var(--site-primary-fg);
  --bs-btn-bg: var(--site-accent);
  --bs-btn-border-color: var(--site-accent);
  --bs-btn-hover-color: var(--site-primary-fg);
  --bs-btn-hover-bg: color-mix(in srgb, var(--site-accent) 88%, #fff);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--site-accent) 88%, #fff);
  --bs-btn-focus-shadow-rgb: 232, 184, 109;
  --bs-btn-active-color: var(--site-primary-fg);
  --bs-btn-active-bg: color-mix(in srgb, var(--site-accent) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--site-accent) 80%, #000);
  --bs-btn-disabled-color: var(--site-primary-fg);
  --bs-btn-disabled-bg: var(--site-accent);
  --bs-btn-disabled-border-color: var(--site-accent);
}

/* Outline buttons → gold / soft border */
.btn-outline-light,
.btn-outline-secondary {
  --bs-btn-color: var(--site-text);
  --bs-btn-border-color: var(--site-border);
  --bs-btn-hover-color: var(--site-primary-fg);
  --bs-btn-hover-bg: var(--site-accent);
  --bs-btn-hover-border-color: var(--site-accent);
  --bs-btn-focus-shadow-rgb: 232, 184, 109;
  --bs-btn-active-color: var(--site-primary-fg);
  --bs-btn-active-bg: var(--site-accent);
  --bs-btn-active-border-color: var(--site-accent);
  --bs-btn-disabled-color: var(--site-muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--site-border);
}

/* Primary badges → gold */
.badge.text-bg-primary {
  background-color: var(--site-accent) !important;
  color: var(--site-primary-fg) !important;
}

code {
  color: var(--site-accent-teal);
}