/* ═══════════════════════════════════════════════════════════════
   DAY THEME OVERRIDES
   Test & Tag NZ — Light Mode (08:00 AM – 07:59 PM NZ Time)

   This file overrides the default dark theme when
   Website theme overrides. Styles apply unconditionally.

   IMPORTANT: Do NOT use Tailwind arbitrary-value class selectors
   containing escaped # characters (e.g., .bg-\[#0A0D12\]).
   These cause CSS parsing errors in Turbopack/lightningcss.
   Use stable data-attribute or element selectors instead.
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ──────────────────────────────────── */
:root {
  --background: #ffffff !important;
  --foreground: #1a2332 !important;
  --card: #ffffff !important;
  --card-foreground: #1a2332 !important;
  --popover: #ffffff !important;
  --popover-foreground: #1a2332 !important;
  --primary: #e09e00 !important;
  --primary-foreground: #0a1220 !important;
  --secondary: #f5f7fa !important;
  --secondary-foreground: #1a2332 !important;
  --muted: #f5f7fa !important;
  --muted-foreground: #5a6572 !important;
  --accent: #ffb300 !important;
  --accent-foreground: #0a1220 !important;
  --destructive: #d64545 !important;
  --border: #e4e8ee !important;
  --input: #e4e8ee !important;
  --ring: #ffb300 !important;
  --chart-1: #ffb300 !important;
  --chart-2: #f5f7fa !important;
  --chart-3: #5a6572 !important;
  --chart-4: #e09e00 !important;
  --chart-5: #1a2332 !important;
  --sidebar: #ffffff !important;
  --sidebar-foreground: #1a2332 !important;
  --sidebar-primary: #ffb300 !important;
  --sidebar-primary-foreground: #0a1220 !important;
  --sidebar-accent: #f5f7fa !important;
  --sidebar-accent-foreground: #1a2332 !important;
  --sidebar-border: #e4e8ee !important;
  --sidebar-ring: #ffb300;

  /* ─── Day Theme Design System Tokens ─── */
  --day-ink: #0a1220;
  --day-navy: #0e1b2e;
  --day-paper: #f5f7fa;
  --day-white: #ffffff;
  --day-amber: #ffb300;
  --day-amber-d: #e09e00;
  --day-copper: #c77e4a;
  --day-copper-l: #e8a06b;
  --day-txt: #1a2332;
  --day-mut: #5a6572;
  --day-dim: #8b94a0;
  --day-line: #e4e8ee;
  --day-line-d: rgba(255, 255, 255, 0.09);
  --day-grn: #1e9e5a;
  --day-red: #d64545;
}

/* ─── Global Day Mode Base ────────────────────────────────── */
body {
  background-color: #ffffff !important;
  color: #1a2332 !important;
}

/* Page wrapper div (min-h-screen bg-[#0A0D12]) */
[data-page-wrapper] {
  background-color: #ffffff !important;
}

::selection {
  background: #ffb300;
  color: #0a1220;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER / NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  border-bottom-color: #e4e8ee !important;
}

header.scrolled {
  box-shadow: 0 8px 30px rgba(10, 18, 32, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION — DAY MODE
   ═══════════════════════════════════════════════════════════════ */

[data-hero-section] {
  background-color: #ffffff;
}

/* Hero overlay gradients → light */
[data-hero-overlay-dark] {
  background: linear-gradient(
    to right,
    #ffffff,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.6)
  ) !important;
}

[data-hero-overlay-fade] {
  background: linear-gradient(
    to top,
    #ffffff,
    transparent,
    rgba(255, 255, 255, 0.4)
  ) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TEXT COLORS
   White text → Dark text in day mode
   ONLY in light-background contexts.
   Dark sections (hero, footer, stats) keep white text.
   
   NOTE: No !important on the global overrides — the
   [data-dark-section] overrides have higher specificity and win.
   ═══════════════════════════════════════════════════════════════ */

.text-white {
  color: #1a2332 !important;
}

.text-white\/90 {
  color: rgba(26, 35, 50, 0.9) !important;
}

.text-white\/85 {
  color: rgba(26, 35, 50, 0.85) !important;
}

.text-white\/80 {
  color: rgba(26, 35, 50, 0.8) !important;
}

.text-white\/75 {
  color: rgba(26, 35, 50, 0.75) !important;
}

.text-white\/70 {
  color: rgba(26, 35, 50, 0.7) !important;
}

.text-white\/60 {
  color: rgba(26, 35, 50, 0.6) !important;
}

.text-white\/50 {
  color: rgba(26, 35, 50, 0.5) !important;
}

.text-white\/40 {
  color: rgba(26, 35, 50, 0.4) !important;
}

.text-white\/30 {
  color: rgba(26, 35, 50, 0.3) !important;
}

.text-white\/20 {
  color: rgba(26, 35, 50, 0.2) !important;
}

.text-white\/10 {
  color: rgba(26, 35, 50, 0.1) !important;
}

.text-amber-400 {
  color: #c77e4a !important;
}

/* ── Restore white text INSIDE dark sections ── */
/* Note: [data-dark-section].text-white (no space) matches elements
   that have BOTH attributes on the same element.
   [data-dark-section] .text-white (with space) matches descendants. */
[data-dark-section].text-white,
[data-dark-section] .text-white,
footer .text-white {
  color: #ffffff !important;
}

[data-dark-section].text-white\/90,
[data-dark-section] .text-white\/90,
footer .text-white\/90 {
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-dark-section].text-white\/85,
[data-dark-section] .text-white\/85,
footer .text-white\/85 {
  color: rgba(255, 255, 255, 0.85) !important;
}

[data-dark-section].text-white\/80,
[data-dark-section] .text-white\/80,
footer .text-white\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
}

[data-dark-section].text-white\/75,
[data-dark-section] .text-white\/75,
footer .text-white\/75 {
  color: rgba(255, 255, 255, 0.75) !important;
}

[data-dark-section].text-white\/70,
[data-dark-section] .text-white\/70,
footer .text-white\/70 {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-dark-section].text-white\/60,
[data-dark-section] .text-white\/60,
footer .text-white\/60 {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-dark-section].text-white\/50,
[data-dark-section] .text-white\/50,
footer .text-white\/50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

[data-dark-section].text-amber-400,
[data-dark-section] .text-amber-400,
footer .text-amber-400 {
  color: #ffb300 !important;
}

/* ═══════════════════════════════════════════════════════════════
   BORDERS
   ═══════════════════════════════════════════════════════════════ */

.border-white\/20 {
  border-color: #d4d8de;
}

.border-white\/30 {
  border-color: #c4c8ce;
}

.border-white\/10 {
  border-color: #e4e8ee;
}

/* ═══════════════════════════════════════════════════════════════
   BACKGROUNDS — BLACK/WHITE
   ═══════════════════════════════════════════════════════════════ */

.bg-black\/60 {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-black\/70 {
  background-color: rgba(0, 0, 0, 0.4);
}

.bg-black\/50 {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-white\/5 {
  background-color: rgba(245, 247, 250, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   HOVER STATES
   ═══════════════════════════════════════════════════════════════ */

.hover\:text-white:hover {
  color: #1a2332;
}

/* ═══════════════════════════════════════════════════════════════
   SHADOWS
   ═══════════════════════════════════════════════════════════════ */

.shadow-black\/50 {
  --tw-shadow-color: rgba(10, 18, 32, 0.15);
}

.shadow-black\/30 {
  --tw-shadow-color: rgba(10, 18, 32, 0.1);
}

.shadow-black\/20 {
  --tw-shadow-color: rgba(10, 18, 32, 0.08);
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(10, 18, 32, 0.15);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(10, 18, 32, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(10, 18, 32, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   SVG & FILL/STROKE
   ═══════════════════════════════════════════════════════════════ */

.fill-white {
  fill: #1a2332;
}

.stroke-white {
  stroke: #1a2332;
}

/* ═══════════════════════════════════════════════════════════════
   INPUT FIELDS
   ═══════════════════════════════════════════════════════════════ */

input,
select,
textarea {
  background-color: #f5f7fa;
  border-color: #e4e8ee;
  color: #1a2332;
}

input::placeholder,
textarea::placeholder {
  color: #8b94a0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #ffb300;
  background-color: #ffffff;
  outline-color: #ffb300;
}

/* ═══════════════════════════════════════════════════════════════
   STARS / RATINGS
   ═══════════════════════════════════════════════════════════════ */

.fill-amber-400 {
  fill: #ffb300;
}

.text-amber-400 {
  color: #ffb300;
}

.fill-gray-200 {
  fill: #e4e8ee;
}

/* ═══════════════════════════════════════════════════════════════
   ACCORDION / FAQ
   ═══════════════════════════════════════════════════════════════ */

[data-state="open"] {
  background-color: #f5f7fa;
}

[data-state="closed"] {
  background-color: #ffffff;
}

.hover\:bg-muted:hover {
  background-color: #f0f2f5;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR — DAY MODE
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 10px;
  background: #f5f7fa;
}

::-webkit-scrollbar-thumb {
  background: #d4d8de;
}

::-webkit-scrollbar-thumb:hover {
  background: #ffb300;
}

/* ═══════════════════════════════════════════════════════════════
   SVG INLINE COLORS
   ═══════════════════════════════════════════════════════════════ */

svg [fill="#F97316"] {
  fill: #c77e4a;
}

svg [stroke="#F97316"] {
  stroke: #c77e4a;
}

svg [fill="white"] {
  fill: #1a2332;
}

svg [stroke="white"] {
  stroke: #1a2332;
}

svg [fill="rgba(255,255,255,0.9)"] {
  fill: rgba(26, 35, 50, 0.9);
}

svg [stroke="rgba(255,255,255,0.1)"] {
  stroke: rgba(228, 232, 238, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   TRANSITION SMOOTHNESS
   ═══════════════════════════════════════════════════════════════ */

* {
  transition-property:
    background-color, border-color, color, fill, stroke, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

[class*="animate-"] {
  transition: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  header {
    background: rgba(255, 255, 255, 0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — Keep dark footer styling in DAY mode
   Text color overrides handled by [data-dark-section] above.
   Only footer-specific link/hover overrides here.
   ═══════════════════════════════════════════════════════════════ */

footer {
  color: rgba(255, 255, 255, 0.9) !important;
}

footer a {
  color: rgba(255, 255, 255, 0.9) !important;
}

footer a:hover {
  color: #ffb300 !important;
}

footer h4 {
  color: #ffb300 !important;
}
footer p,
footer span,
footer li {
  color: rgba(255, 255, 255, 0.9) !important;
}

footer .text-white\/90 {
  color: rgba(255, 255, 255, 0.9) !important;
}

footer .text-white\/85 {
  color: rgba(255, 255, 255, 0.85) !important;
}

footer .text-white\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
}

footer svg {
  fill: rgba(255, 255, 255, 0.9) !important;
}

footer a:hover svg {
  fill: #ffb300 !important;
}
/* ═══════════════════════════════════════════════════════════════
   CONTACT FORM — DAY MODE overrides
   Use attribute selector for higher specificity.
   ═══════════════════════════════════════════════════════════════ */

[data-day-contact] input,
[data-day-contact] select,
[data-day-contact] textarea {
  background-color: #f5f7fa !important;
  border-color: #e4e8ee !important;
  color: #1a2332 !important;
  border-radius: 2px !important;
}

[data-day-contact] input::placeholder,
[data-day-contact] textarea::placeholder {
  color: #8b94a0 !important;
}

[data-day-contact] input:focus,
[data-day-contact] select:focus,
[data-day-contact] textarea:focus {
  border-color: #ffb300 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.15) !important;
}

[data-day-contact] label {
  color: #1a2332 !important;
}

[data-day-contact] h3 {
  color: #1a2332 !important;
}

[data-day-contact] p {
  color: #5a6572 !important;
}

[data-day-contact] .text-white {
  color: #1a2332 !important;
}

[data-day-contact] .text-white\/90 {
  color: rgba(26, 35, 50, 0.9) !important;
}

[data-day-contact] .text-white\/85 {
  color: rgba(26, 35, 50, 0.85) !important;
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR DROPDOWN — DAY MODE
   DesktopNav uses dark-theme text colors.
   Override inside the DAY navbar header.
   ═══════════════════════════════════════════════════════════════ */

header a {
  color: #1a2332;
}

header a:hover {
  color: #c77e4a;
}

/* Top bar (dark navy bg) — keep white text */
[class*="bg-[#0a1220]"],
[class*="bg-[#0a1220]"] a,
[class*="bg-[#0a1220]"] span,
[class*="bg-[#0a1220]"] p {
  color: rgba(255, 255, 255, 0.9) !important;
}
[class*="bg-[#0a1220]"] a:hover {
  color: #ffb300 !important;
}

/* Override the rgba white text in nav links */
header [style*="color: rgba(255,255,255"] {
  color: #1a2332 !important;
}

/* Day dropdown menus */
header [role="menu"],
header [data-radix-popper-content] {
  background-color: #ffffff !important;
  border-color: #e4e8ee !important;
  color: #1a2332 !important;
  border-radius: 2px !important;
}

header [role="menu"] a,
header [data-radix-popper-content] a {
  color: #1a2332 !important;
}

/* Dropdown menu item hover — strong amber bg, dark text */
header [role="menu"] a:hover,
header [data-radix-popper-content] a:hover,
header nav [class*="absolute"] a:hover,
header [data-day-dropdown-item]:hover {
  color: #0e1b2e !important;
  background-color: #ffb300 !important;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

/* ═══════════════════════════════════════════════════════════════
   DAY-MODE ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

@keyframes dayCircuitFlow {
  to {
    stroke-dashoffset: -192;
  }
}

@keyframes dayNodePulse {
  50% {
    opacity: 0.3;
  }
}

@keyframes dayRingSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Body day mode class */
.day-mode-body {
  background-color: #ffffff !important;
  color: #1a2332 !important;
}