/* ============================================================
   shared component + utility styles
   ============================================================
   NO COLOR IS EVER HARDCODED HERE. Every rule below reads a CSS
   variable (--color-navy, --color-teal, etc.) that is defined in
   js/theme-config.js and re-defined under html.light for light mode.

   IMPORTANT: Tailwind's own color utilities (bg-navy, text-teal, etc.)
   are NOT mode-aware — Tailwind bakes them to a fixed hex value at
   scan time and they never change again, even when html.light toggles.
   That is why this file defines its OWN custom classes (prefixed `t-`)
   for every color use in the HTML. Always use the `t-` classes below
   for anything that should change between dark and light mode.

   To re-theme the site: edit js/theme-config.js only. Never edit hex
   values in this file.
   ============================================================ */

body {
  background-color: var(--color-navy);
  color: var(--color-slate);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
}

/* Note: .t-bg-*, .t-text-*, .t-border-*, .t-hover-* utility classes are
   auto-generated by js/theme-config.js (one per palette key) — they are
   NOT defined here. This avoids having two places that need to stay in
   sync whenever a color key is added/removed. */

/* Soft tinted background for badge pills (e.g. "Scam Alert" tag) —
   this one isn't a flat palette color, so it's defined manually here. */
.t-bg-teal-soft {
  background-color: color-mix(in srgb, var(--color-teal) 12%, transparent);
}

/* Hero/CTA text on the dark gradient background */
.t-text-white {
  color: var(--color-slate);
}

/* ============================================================ */
/* COMPONENT CLASSES                                              */
/* ============================================================ */
.hero-bg {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy2) 100%);
}

.section-card {
  background: var(--color-navy2);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.accent {
  color: var(--color-teal);
}

.btn-primary {
  background: var(--color-blue);
  color: white;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: var(--color-blueHover);
  transform: translateY(-2px);
}

.btn-outline {
  border: 2px solid var(--color-teal);
  color: var(--color-teal);
  transition: all 0.2s;
}

.btn-outline:hover {
  background: var(--color-teal);
  color: var(--color-navy);
}

.btn-logout {
  border: 2px solid var(--color-error);
  color: var(--color-error);
  transition: all 0.2s;
}

.input-field {
  background: var(--color-navy2);
  border: 1px solid var(--color-border);
  color: var(--color-slate);
  transition: all 0.2s;
}

.input-field:focus {
  border-color: var(--color-teal);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent);
}

.input-field.t-border-error {
  border-color: var(--color-error) !important;
}

nav,
footer {
  background-color: var(--color-navy);
  border-color: var(--color-border);
}

/* Mobile nav drawer */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: var(--color-navy);
}

#mobile-menu.open {
  max-height: 500px;
}

/* Active nav link (set by nav.js per page) */
.nav-link.active {
  color: var(--color-teal);
}

/* Smooth theme transition across every mode-aware element */
body,
nav,
footer,
.section-card,
.input-field,
#mobile-menu,
[class^="t-bg-"],
[class*=" t-bg-"],
[class^="t-text-"],
[class*=" t-text-"],
[class^="t-border-"],
[class*=" t-border-"] {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ============================================================ */
/* FLOATING CONTROLS                                             */
/* ============================================================ */

/* Theme toggle — fixed at vertical mid-screen, right edge */
#theme-toggle-btn {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: var(--color-teal);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

#theme-toggle-btn:hover {
  transform: translateY(-50%) scale(1.08);
}

#theme-toggle-btn svg {
  width: 1.4rem;
  height: 1.4rem;
}


/* Theme Logo Styling  */
/* Logo Theme Switcher Rules */
.theme-logo-light {
  display: none;
}

.theme-logo-dark {
  display: block;
}

html.light .theme-logo-dark {
  display: none;
}

html.light .theme-logo-light {
  display: block;
}

/* SVG Mode-Aware Theme Mapping */
.svg-card-bg {
  fill: var(--color-navy);
  transition: fill 0.3s ease;
}

.svg-panel-bg {
  fill: var(--color-navy2);
  transition: fill 0.3s ease;
}

.svg-shape-main {
  fill: var(--color-slate);
  transition: fill 0.3s ease;
}

.svg-accent-fill {
  fill: var(--color-accent);
  transition: fill 0.3s ease;
}

.svg-control-bg {
  fill: var(--color-border);
  transition: fill 0.3s ease;
}

/* Back-to-top — fixed bottom right, hidden until scrolled */
#back-to-top-btn {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: var(--color-navy2);
  color: var(--color-slate);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}

#back-to-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#back-to-top-btn:hover {
  background: var(--color-teal);
  color: var(--color-navy);
}

#back-to-top-btn svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* <!-- Infinite Marquee --> */
.marquee {
  display: inline-flex;
  animation: marquee 25s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.marquee:hover {
  animation-play-state: paused;
}

/* Stack nicely on very small screens so they don't overlap content */
@media (max-width: 380px) {

  #theme-toggle-btn,
  #back-to-top-btn {
    width: 2.75rem;
    height: 2.75rem;
    right: 0.875rem;
  }
}