@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Default Navy Theme */
  :root, [data-theme="navy"] {
    --theme-navy: #0B4A8F;
    --theme-navy-dark: #073366;
    --theme-navy-mid: #0F58A4;
    --theme-teal: #D35400;
    --theme-teal-hover: #B04300;
    --theme-stat-bg: rgba(7, 51, 102, 0.85);
    --theme-stat-hover: rgba(11, 74, 143, 0.95);
    --theme-stat-border: rgba(255, 255, 255, 0.15);
    --theme-stat-label: rgba(215, 230, 250, 0.75);
    --theme-bg: #FAF8F2;
  }

  /* Red Theme */
  [data-theme="red"] {
    --theme-navy: #7f1d1d;
    --theme-navy-dark: #450a0a;
    --theme-navy-mid: #991b1b;
    --theme-teal: #d97706;
    --theme-teal-hover: #b45309;
    --theme-stat-bg: rgba(69, 10, 10, 0.85);
    --theme-stat-hover: rgba(127, 29, 29, 0.95);
    --theme-stat-border: rgba(255, 255, 255, 0.15);
    --theme-stat-label: rgba(254, 226, 226, 0.8);
    --theme-bg: #FDF6F4;
  }

  /* Green Theme */
  [data-theme="green"] {
    --theme-navy: #16613a;
    --theme-navy-dark: #0c3d25;
    --theme-navy-mid: #1f7d4c;
    --theme-teal: #c47a0c;
    --theme-teal-hover: #9a5f08;
    --theme-stat-bg: rgba(12, 61, 37, 0.85);
    --theme-stat-hover: rgba(22, 97, 58, 0.95);
    --theme-stat-border: rgba(255, 255, 255, 0.15);
    --theme-stat-label: rgba(228, 244, 236, 0.8);
    --theme-bg: #F4F8F5;
  }

  /* Blue Theme */
  [data-theme="blue"] {
    --theme-navy: #1e3a8a;
    --theme-navy-dark: #1e1b4b;
    --theme-navy-mid: #1d4ed8;
    --theme-teal: #0891b2;
    --theme-teal-hover: #0e7490;
    --theme-stat-bg: rgba(30, 27, 75, 0.85);
    --theme-stat-hover: rgba(30, 58, 138, 0.95);
    --theme-stat-border: rgba(255, 255, 255, 0.15);
    --theme-stat-label: rgba(239, 246, 255, 0.8);
    --theme-bg: #F5F8FD;
  }

  html { scroll-behavior: smooth; }
  body { font-family: 'Open Sans', sans-serif; }

  .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

  .hide-scrollbar::-webkit-scrollbar { display: none; }
  .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  /* Glassmorphism */
  .glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  }

  /* ============================================================
     LEGACY accessibility rules (classes on <body>)
     Kept so existing functionality keeps working if global.js
     still toggles body.high-contrast / body.cursor-big.
     ============================================================ */
  body.high-contrast { background-color: #000000 !important; color: #ffff00 !important; }
  body.high-contrast * {
    background-color: transparent !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body.high-contrast button, body.high-contrast a, body.high-contrast input, body.high-contrast select {
    border: 1px solid #ffff00 !important;
    background-color: #000000 !important;
  }
  body.high-contrast button:hover, body.high-contrast a:hover {
    background-color: #ffff00 !important;
    color: #000000 !important;
  }
  body.high-contrast button:hover *, body.high-contrast a:hover * {
    color: #000000 !important;
    border-color: #000000 !important;
  }
  body.cursor-big, body.cursor-big * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.5 2.23l15.5 15.5-5.22 1.28 3.72 6.46-2.59 1.5-3.72-6.46-5.2 3.72V2.23z'/%3E%3C/svg%3E"), auto !important;
  }

  /* ============================================================
     NEW accessibility rules (classes on <html>, set by global.js)
     ============================================================ */
  html.a11y-contrast body { background-color: #000 !important; color: #ff0 !important; }
  html.a11y-contrast body * {
    background-color: transparent !important;
    color: #ff0 !important;
    border-color: #ff0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  html.a11y-contrast body :is(a, button, input, select) {
    border: 1px solid #ff0 !important;
    background-color: #000 !important;
  }
  html.a11y-contrast body :is(a, button):hover {
    background-color: #ff0 !important;
    color: #000 !important;
  }
  html.a11y-contrast body :is(a, button):hover * {
    color: #000 !important;
    border-color: #000 !important;
  }

  html.a11y-spacing body, html.a11y-spacing body * { letter-spacing: .12em !important; word-spacing: .16em !important; }
  html.a11y-height body, html.a11y-height body * { line-height: 2 !important; }
  html.a11y-hide-images :is(img, video) { visibility: hidden !important; }
  html.a11y-cursor, html.a11y-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' d='M4.5 2.23l15.5 15.5-5.22 1.28 3.72 6.46-2.59 1.5-3.72-6.46-5.2 3.72V2.23z'/%3E%3C/svg%3E") 4 2, auto !important;
  }
}

@layer components {
  .stat-theme-tab {
    background-color: var(--theme-stat-bg);
    border: 1px solid var(--theme-stat-border);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .stat-theme-tab:hover {
    background-color: var(--theme-stat-hover);
    border-color: var(--theme-teal);
    box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.45);
  }
  .stat-theme-tab .stat-label { color: var(--theme-stat-label); }
  .stat-theme-tab .stat-icon { color: var(--theme-teal); transition: color 0.3s ease, transform 0.3s ease; }
  .stat-theme-tab:hover .stat-icon { transform: scale(1.1); }

  .ticker-wrap { overflow: hidden; }
  .ticker-move {
    display: flex;
    width: max-content;
    white-space: nowrap;
    animation: ticker 30s linear infinite;
  }
  .ticker-wrap:hover .ticker-move,
  .ticker-wrap:focus-within .ticker-move { animation-play-state: paused; }

  @media (prefers-reduced-motion: reduce) {
    .ticker-move { animation: none; }
    .ticker-wrap { overflow-x: auto; }
  }

  .hero-bg {
    background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 50%, var(--theme-navy-mid) 100%);
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite;
  }
  .about-gradient {
    background: linear-gradient(to bottom, var(--theme-navy), color-mix(in srgb, var(--theme-navy) 70%, transparent), transparent);
  }

  .dam-marker { background: transparent; border: 0; }
  .dam-marker__pulse {
    position: absolute; inset: 0; border-radius: 9999px;
    background: var(--theme-teal); opacity: .6;
    animation: dam-ping 1.4s cubic-bezier(0, 0, .2, 1) infinite;
  }
  .dam-marker__core {
    position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 9999px; background: var(--theme-navy); border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .2s, background-color .2s;
  }
  .dam-marker--monitor .dam-marker__core { background: #facc15; }
  .dam-marker--alert .dam-marker__core { background: #ef4444; }
  .dam-marker--critical .dam-marker__core { background: #b91c1c; }
  .dam-marker:hover .dam-marker__core { transform: scale(1.4); }
  .dam-marker.is-active .dam-marker__core { background: var(--theme-teal); transform: scale(1.5); }
  @media (prefers-reduced-motion: reduce) { .dam-marker__pulse { animation: none; } }
}

@layer utilities {
  .section-label {
    letter-spacing: 0.35em;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .animate-float { animation: float 6s ease-in-out infinite; }
  .animate-float-delayed { animation: float 6s ease-in-out 2s infinite; }
  .animate-float-more-delayed { animation: float 6s ease-in-out 4s infinite; }
}

/* ============================================================
   HEADER SEARCH WIDGET  (Views exposed form "site_search")
   Outside @layer on purpose so Tailwind never purges it.
   Drupal moves a block form's #attributes onto the block wrapper
   <div>, so `.mwrd-search` is normally that wrapper, not the <form>.
   ============================================================ */

/* The <form> is the flex row: [input] [mic] [category] [Search] */
.mwrd-search form,
form.mwrd-search {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
}

.mwrd-search .form-item,
.mwrd-search .form-actions {
  margin: 0;
}

.mwrd-search select {
  height: 100%;
  max-width: 11rem;
  text-overflow: ellipsis;
}

/* Keyboard focus: the wrapper shows a ring on :focus-within, but the
   mic, select and submit need their own visible indicator (WCAG 2.4.7). */
.mwrd-search :is(button, select, input[type="submit"]):focus-visible {
  outline: 2px solid var(--theme-teal);
  outline-offset: -2px;
}

/* Mic button + "listening" ring. The ring lives inside the button because
   the wrapper has overflow:hidden and would clip an outer box-shadow. */
.mwrd-search [data-voice-trigger] {
  position: relative;
  transition: color 0.2s ease;
}
.mwrd-search [data-voice-trigger].is-listening {
  color: var(--theme-teal);
}
.mwrd-search [data-voice-trigger].is-listening::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid var(--theme-teal);
  border-radius: 9999px;
  pointer-events: none;
  animation: mwrd-ring 1.2s ease-out infinite;
}
@keyframes mwrd-ring {
  from { transform: scale(0.6); opacity: 0.9; }
  to   { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mwrd-search [data-voice-trigger].is-listening::after {
    animation: none;
    opacity: 0.6;
  }
}

/* Small screens: tighter Search button */
@media (max-width: 480px) {
  .mwrd-search input[type="submit"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@keyframes dam-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}