/* SaferTrader site-wide theme — "Electric Blue Tech"
 *
 * Loaded LAST in base.html so it unifies the Bootstrap/Wagtail pages (content,
 * store, cart, library, marketing) with the same design language as the React
 * SPA. It works by (1) remapping the site's own brand CSS vars, (2) overriding
 * Bootstrap 5 CSS vars, and (3) setting the new type system — no per-template
 * edits. Reversible: remove this one <link> to revert.
 */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ── 1. Remap the legacy brand vars (SaferTrader.scss) to the new palette ───── */
:root {
  --dark: #0f172a;
  --grey: #475569;
  --border-grey: #e2e8f0;
  --transparent-border: rgb(15 37 71 / 18%);
  --white: #ffffff;
  --cream: #f8fafc;          /* warm cream → cool near-white surface */
  /* Navy + Gold: navy is the primary UI color, gold the CTA/brand accent (= logo).
   * SaferTrader.css uses --orange as the dominant brand color (nav, links,
   * buttons), so map it to navy; gold is applied to CTAs below. */
  --light-brown: #0f2547;
  --mid-brown: #1b3a66;
  --dark-brown: #0a1c38;
  --orange: #0f2547;
  --dark-orange: #0a1c38;
  --font--primary: "IBM Plex Sans";

  /* Shared design tokens (mirror the SPA) */
  --st-accent: #0f2547;
  --st-accent-hover: #1b3a66;
  --st-cta: #d4a017;
  --st-cta-hover: #b8860b;
  --st-text: #0f172a;
  --st-muted: #475569;
  --st-bg: #f8fafc;
  --st-surface: #ffffff;
  --st-border: #e2e8f0;
  --st-gain: #15803d;
  --st-loss: #b91c1c;
  --st-font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --st-font-ui: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --st-font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ── 2. Override Bootstrap 5 theme vars ─────────────────────────────────────── */
:root {
  --bs-primary: #0f2547;
  --bs-primary-rgb: 15, 37, 71;
  --bs-link-color: #0f2547;
  --bs-link-color-rgb: 15, 37, 71;
  --bs-link-hover-color: #1b3a66;
  --bs-link-hover-color-rgb: 27, 58, 102;
  --bs-body-color: #13203a;
  --bs-body-color-rgb: 19, 32, 58;
  --bs-body-bg: #f7f9fc;
  /* Larger, looser body text for an older, readability-sensitive audience. */
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.65;
  --bs-emphasis-color-rgb: 15, 23, 42;
  --bs-border-color: #e2e8f0;
  --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --bs-success: #15803d;
  --bs-success-rgb: 21, 128, 61;
  --bs-danger: #b91c1c;
  --bs-danger-rgb: 185, 28, 28;
  --bs-warning: #d4a017;
  --bs-warning-rgb: 212, 160, 23;
}

/* ── 3. Base typography ─────────────────────────────────────────────────────── */
body {
  font-family: var(--st-font-ui);
  color: var(--st-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--st-font-display);
  letter-spacing: -0.01em;
}

/* ── 4. Buttons / links / focus (win over compiled SCSS where needed) ───────── */
/* Action buttons = gold (matches the logo). Navy stays the structural color
 * (links, nav, text-primary, secondary buttons). Gold needs dark text. */
.btn-primary,
.btn-warning,
.btn-cta,
.hero-cta-link,
.hero-cta-link2,
.buy-prompt {
  --bs-btn-bg: #d4a017;
  --bs-btn-border-color: #d4a017;
  --bs-btn-hover-bg: #b8860b;
  --bs-btn-hover-border-color: #b8860b;
  --bs-btn-active-bg: #b8860b;
  --bs-btn-active-border-color: #b8860b;
  --bs-btn-disabled-bg: #d4a017;
  --bs-btn-disabled-border-color: #d4a017;
  --bs-btn-color: #1a1205;
  --bs-btn-hover-color: #1a1205;
  --bs-btn-active-color: #1a1205;
  background-color: #d4a017;
  border-color: #d4a017;
  color: #1a1205;
}
.hero-cta-link:hover,
.hero-cta-link2:hover,
.buy-prompt:hover {
  background-color: #b8860b;
  border-color: #b8860b;
  color: #1a1205;
}

.btn-outline-primary {
  --bs-btn-color: #0f2547;
  --bs-btn-border-color: #0f2547;
  --bs-btn-hover-bg: #0f2547;
  --bs-btn-hover-border-color: #0f2547;
  --bs-btn-active-bg: #0a1c38;
}

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

.btn,
a {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

:focus-visible {
  outline: 2px solid var(--st-accent);
  outline-offset: 2px;
}

/* Tabular numerals for any explicitly-marked numeric/price cells. */
.mono,
[data-num],
.price,
.amount {
  font-family: var(--st-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── 5. Responsive / mobile hardening (site-wide) ───────────────────────────── */
/* Media never overflows its container on small screens. */
img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}
/* Wide tables scroll instead of blowing out the layout. */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  body {
    font-size: 16px; /* readable base on phones (avoids iOS input zoom too) */
  }
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  h1, .h1 { font-size: 1.75rem; }
  h2, .h2 { font-size: 1.45rem; }
  h3, .h3 { font-size: 1.2rem; }
  /* Comfortable touch targets for primary actions. */
  .btn:not(.btn-sm):not(.btn-link) {
    min-height: 44px;
  }
  /* Form fields at >=16px so iOS doesn't zoom on focus. */
  .form-control,
  .form-select,
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* ── 6. Dropdown / menu hover → brand blue with readable text ────────────────── */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--st-accent) !important;
  color: #ffffff !important;
}

/* ── 7. Respect reduced-motion for the transitions added above ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn,
  a,
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Contact / Wagtail form pages (home/form_page.html) ─────────────────────
 * The template renders raw {{ field }} with no classes, so style by structure
 * to match the navy + gold system: roomy card, clear labels, navy focus ring. */
.form-page {
  max-width: 640px;
}
.form-page__field {
  margin-bottom: var(--sp-5, 1.5rem);
}
.form-page__field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--st-text, #13203a);
}
.form-page__field .required {
  margin-left: 0.15rem;
  color: var(--st-cta, #d4a017);
}
.form-page__field .help {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  color: var(--st-muted, #54627b);
}
.form-page__field input[type="text"],
.form-page__field input[type="email"],
.form-page__field input[type="number"],
.form-page__field input[type="url"],
.form-page__field input[type="tel"],
.form-page__field input:not([type]),
.form-page__field textarea,
.form-page__field select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-size: 1rem;
  color: var(--st-text, #13203a);
  background: var(--st-surface, #fff);
  border: 1px solid var(--st-border, #e3e8f0);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-page__field textarea {
  min-height: 9rem;
  resize: vertical;
}
.form-page__field input:focus,
.form-page__field textarea:focus,
.form-page__field select:focus {
  outline: none;
  border-color: var(--st-accent, #0f2547);
  box-shadow: 0 0 0 3px rgb(15 37 71 / 14%);
}
.form-page__field input::placeholder,
.form-page__field textarea::placeholder {
  color: var(--st-faint, #94a3b8);
}
/* Submit button → gold CTA, matching the rest of the site. */
.form-page input[type="submit"],
.form-page button[type="submit"] {
  margin-top: 0.25rem;
  padding: 0.7rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--st-cta, #d4a017);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.form-page input[type="submit"]:hover,
.form-page button[type="submit"]:hover {
  background: var(--st-cta-hover, #b8860b);
}
/* Field validation errors (Wagtail renders an <ul class="errorlist">). */
.form-page .errorlist {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  color: var(--st-loss, #b91c1c);
  font-size: 0.9rem;
}