/*
Theme Name: Word Wheel Solver Theme
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: Classic theme shell for the Word Wheel Solver site.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: word-wheel-solver-theme
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================
   0) Design System: "Digital Laboratory"
   ========================================= */

   :root {
    /* Clinical palette */
    --lab-bg: #0D0D0D;         /* Deep Onyx */
    --lab-bg-2: #050505;       /* Footer anchor */
    --lab-surface: #111111;    /* Panels/cards */
    --lab-surface-2: #141414;  /* Sub-panels */
    --lab-border: #1f1f1f;     /* Thin dividers */
    --lab-border-2: #2a2a2a;
  
    --lab-text: #E0E0E0;       /* Soft Platinum */
    --lab-muted: #b6b6b6;
    --lab-dim: #8a8a8a;
  
    --lab-accent: #00FF41;     /* Terminal green */
    --lab-accent-2: #3A506B;   /* Steel blue */
    --lab-warn: #B22222;       /* Oxblood red */
  
    --maxw: 1120px;
    --pad: 18px;
  
    /* Typography (fallback-first; works without external fonts) */
    --font-mono: "JetBrains Mono", "IBM Plex Mono", "Roboto Mono",
                 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;
  
    --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  
    /* 24px minimum requirement */
     --base-font: 24px;
     --small-font: 18px; /* Footer fine print exception */
   }

  /* Shared Word Wheel UI tokens (solver + daily/archive playable) */
  :root {
    --wwe-ui-overlay-subtle: rgba(255,255,255,0.03);
    --wwe-ui-overlay-soft: rgba(255,255,255,0.04);
    --wwe-ui-overlay-mid: rgba(255,255,255,0.05);
    --wwe-ui-overlay-strong: rgba(255,255,255,0.06);

    --wwe-ui-wheel-bg: #0b0b0b;
    --wwe-ui-wheel-hub-bg: #1c1c1c;
    --wwe-ui-wheel-spoke: rgba(255,255,255,0.38);
    --wwe-ui-wheel-divider: rgba(255,255,255,0.32);
    --wwe-ui-wheel-ring-outer: rgba(255,255,255,0.25);
    --wwe-ui-wheel-ring-inner: rgba(0,0,0,0.78);

    --wwe-ui-primary-soft: rgba(0,255,65,0.08);
    --wwe-ui-primary-mid: rgba(0,255,65,0.11);
    --wwe-ui-primary-strong: rgba(0,255,65,0.55);
    --wwe-ui-primary-focus: rgba(0,255,65,0.22);

    --wwe-ui-error-soft: rgba(178,34,34,0.12);
    --wwe-ui-error-mid: rgba(178,34,34,0.5);
    --wwe-ui-success-soft: rgba(0,163,42,0.12);
    --wwe-ui-warning-soft: rgba(255,220,120,0.12);
    --wwe-ui-warning-mid: rgba(255,220,120,0.5);

    --wwe-ui-status-error-text: #ffd7d7;
    --wwe-ui-status-success-text: #d8ffe3;
    --wwe-ui-status-warning-text: #ffd29b;
  }

  html[data-theme="light"] {
    --wwe-ui-overlay-subtle: rgba(0,0,0,0.03);
    --wwe-ui-overlay-soft: rgba(0,0,0,0.04);
    --wwe-ui-overlay-mid: rgba(0,0,0,0.06);
    --wwe-ui-overlay-strong: rgba(0,0,0,0.08);

    --wwe-ui-wheel-bg: #f3f3f3;
    --wwe-ui-wheel-hub-bg: #e3e3e3;
    --wwe-ui-wheel-spoke: rgba(0,0,0,0.30);
    --wwe-ui-wheel-divider: rgba(0,0,0,0.24);
    --wwe-ui-wheel-ring-outer: rgba(0,0,0,0.22);
    --wwe-ui-wheel-ring-inner: rgba(255,255,255,0.80);

    --wwe-ui-primary-soft: rgba(0,184,58,0.12);
    --wwe-ui-primary-mid: rgba(0,184,58,0.16);
    --wwe-ui-primary-strong: rgba(0,184,58,0.55);
    --wwe-ui-primary-focus: rgba(0,184,58,0.24);

    --wwe-ui-error-soft: rgba(178,34,34,0.10);
    --wwe-ui-error-mid: rgba(178,34,34,0.35);
    --wwe-ui-success-soft: rgba(0,163,42,0.14);
    --wwe-ui-warning-soft: rgba(183,126,0,0.14);
    --wwe-ui-warning-mid: rgba(183,126,0,0.36);

    --wwe-ui-status-error-text: #7a1b1b;
    --wwe-ui-status-success-text: #0f5d2a;
    --wwe-ui-status-warning-text: #8b5a00;
  }
  
  /* =========================================
     1) Reset + base
     ========================================= */
  
  * { box-sizing: border-box; }
  html { background: var(--lab-bg); }
  body {
    margin: 0;
    background: var(--lab-bg);
    color: var(--lab-text);
    font-family: var(--font-sans);
    font-size: var(--base-font);
    line-height: 1.55;
  }
  
  /* Subtle “lab grid” background (non-intrusive) */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 48px 48px;
    z-index: 0;
  }
  
  #page, .site, body > * {
    position: relative;
    z-index: 1;
  }
  
  a {
    color: var(--lab-text);
    text-decoration: underline;
    text-decoration-color: rgba(0,255,65,0.65);
    text-underline-offset: 3px;
  }
  a:hover,
  a:focus {
    text-decoration-thickness: 2px;
    outline: none;
  }
  
  :focus-visible {
    outline: 2px solid var(--lab-accent);
    outline-offset: 3px;
  }
  
  /* Headings: mono for “authority” */
  h1, h2, h3, h4 {
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
    margin: 0 0 14px 0;
    line-height: 1.15;
  }
  h1 { font-size: clamp(34px, 5vw, 44px); }
  h2 { font-size: clamp(28px, 4vw, 36px); }
  h3 { font-size: clamp(24px, 3.2vw, 30px); }
  
  p { margin: 0 0 14px 0; color: var(--lab-text); }
  ul, ol { margin: 0 0 14px 22px; }
  code, pre { font-family: var(--font-mono); }
  
  /* =========================================
     2) Layout primitives
     ========================================= */
  
  .site-main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 28px var(--pad) 48px;
  }
  
  /* Panel / card */
  .lab-panel {
    background: var(--lab-surface);
    border: 1px solid var(--lab-border);
    padding: 22px;
  }
  
  /* Inline “status indicators” */
  .lab-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--lab-border-2);
    background: var(--lab-surface-2);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 20px; /* still close to 24 requirement; badge is UI */
  }
  .lab-dot {
    width: 10px;
    height: 10px;
    background: var(--lab-accent);
    box-shadow: 0 0 10px rgba(0,255,65,0.6);
  }
  .lab-dot.is-warn { background: var(--lab-warn); box-shadow: 0 0 10px rgba(178,34,34,0.5); }
  
  /* Buttons (institutional sharp edges) */
  button,
  input[type="button"],
  input[type="submit"],
  .lab-btn {
    font-family: var(--font-mono);
    font-size: 24px;
    border-radius: 0;
    border: 1px solid var(--lab-border-2);
    background: var(--lab-surface-2);
    color: var(--lab-text);
    padding: 14px 16px;
    cursor: pointer;
  }
  button:hover,
  input[type="button"]:hover,
  input[type="submit"]:hover,
  .lab-btn:hover {
    border-color: var(--lab-accent);
  }
  button:disabled,
  input[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  /* Inputs */
  input,
  textarea,
  select {
    font-size: 24px;
    font-family: var(--font-mono);
    color: var(--lab-text);
    background: var(--lab-surface);
    border: 1px solid var(--lab-border-2);
    border-radius: 0;
    padding: 12px 12px;
  }
  input::placeholder,
  textarea::placeholder {
    color: var(--lab-dim);
  }
  
  /* =========================================
     3) Header: "Status Bar" (styles degrade gracefully)
     ========================================= */
  
  .site-header {
    border-bottom: 1px solid var(--lab-border);
    padding: 12px var(--pad);
    background: rgba(13,13,13,0.82);
    backdrop-filter: blur(6px);
  }
  
  .site-header__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
  }
  
  .site-title {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 24px;
  }
  .site-title a {
    text-decoration: none;
    color: var(--lab-text);
  }
  
  /* Optional status-left text if you add it in header.php */
  .wwe-status-left,
  .wwe-status-right {
    font-family: var(--font-mono);
    font-size: 20px;
    color: var(--lab-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
  }
  .wwe-status-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .wwe-status-light {
    width: 10px;
    height: 10px;
    background: var(--lab-accent);
    box-shadow: 0 0 10px rgba(0,255,65,0.6);
    animation: wwe-pulse 1.8s ease-in-out infinite;
  }
  @keyframes wwe-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
  }
  
  /* Nav (works with wp_nav_menu output) */
  .site-nav { justify-self: end; }
  .site-nav ul,
  .site-nav .menu,
  header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .site-nav a,
  header nav a {
    text-decoration: none;
    border: 1px solid var(--lab-border-2);
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: transparent;
    color: var(--lab-text);
  }
  .site-nav a:hover,
  .site-nav a:focus,
  header nav a:hover,
  header nav a:focus {
    border-color: var(--lab-accent);
  }
  
  /* Skip link */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #fff;
    color: #000;
    padding: 8px 12px;
    z-index: 9999;
  }
  .skip-link:focus {
    left: 12px;
    top: 12px;
    outline: 2px solid #000;
  }
  
  /* =========================================
     4) Footer: "Legal Disclaimer"
     ========================================= */
  
  .site-footer {
    background: var(--lab-bg-2);
    border-top: 1px solid var(--lab-border);
    padding: 18px var(--pad);
  }
  .site-footer p,
  .site-footer a {
    font-size: var(--small-font);
    font-family: var(--font-mono);
    color: var(--lab-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .site-footer a { text-decoration-color: rgba(0,255,65,0.35); }
  
  /* =========================================
     5) Breadcrumbs (if present)
     ========================================= */
  
  .wwe-breadcrumbs {
    font-family: var(--font-mono);
    font-size: 20px;
    color: var(--lab-muted);
    margin: 0 0 18px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .wwe-breadcrumbs a {
    color: var(--lab-muted);
    text-decoration-color: rgba(0,255,65,0.35);
  }
  
  /* =========================================
     6) Utility blocks commonly used by templates
     ========================================= */
  
  .wwe-section {
    margin: 28px 0;
  }
  
  .wwe-next-steps {
    background: var(--lab-surface);
    border: 1px solid var(--lab-border);
    padding: 18px;
  }
  .wwe-next-steps h2,
  .wwe-next-steps h3 {
    margin-bottom: 10px;
  }
  .wwe-next-steps ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .wwe-next-steps li {
    margin: 10px 0;
  }
  .wwe-next-steps a {
    display: inline-block;
    border: 1px solid var(--lab-border-2);
    padding: 10px 12px;
    text-decoration: none;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .wwe-next-steps a:hover,
  .wwe-next-steps a:focus {
    border-color: var(--lab-accent);
  }
  
  /* =========================================
     7) Responsive rules (mobile-first powerhouse)
     ========================================= */
  
  @media (max-width: 720px) {
    .site-header__inner {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .site-nav { justify-self: start; }
    .site-main { padding-top: 18px; }
  }
  
  /* Motion respect */
  @media (prefers-reduced-motion: reduce) {
    .wwe-status-light { animation: none; }
  }

/* =========================================================
   Theme-toggle compatibility layer for WWS templates
   Fixes pages that hard-code light/dark colors inside <style> blocks
   by forcing them to use the global --lab-* tokens.
   ========================================================= */

html[data-theme] #site-footer,
html[data-theme] .wws-contact,
html[data-theme] .wws-page {
  color: var(--lab-text) !important;
}

/* Footer (if it still has its own white-on-dark vars) */
html[data-theme] #site-footer {
  background: var(--lab-bg-2) !important;
  border-top: 1px solid var(--lab-border) !important;
}

/* Common WWS “card” surfaces */
html[data-theme] .wws-card,
html[data-theme] .wws-hero,
html[data-theme] .wws-section,
html[data-theme] .wws-faq-item,
html[data-theme] .wws-callout {
  background: var(--lab-surface) !important;
  border-color: var(--lab-border-2) !important;
  color: var(--lab-text) !important;
}

/* Slightly softer panels */
html[data-theme] .wws-hero,
html[data-theme] .wws-callout {
  background: var(--lab-surface-2) !important;
}

/* Muted text */
html[data-theme] .wws-muted,
html[data-theme] .wws-help,
html[data-theme] .wws-kicker,
html[data-theme] .wws-footer-meta,
html[data-theme] .wws-footer-meta small {
  color: var(--lab-muted) !important;
  opacity: 1 !important;
}

/* Links inside these templates */
html[data-theme] #site-footer a,
html[data-theme] .wws-contact a,
html[data-theme] .wws-page a {
  color: var(--lab-accent) !important;
  text-decoration-color: rgba(0,255,65,0.55) !important;
}

/* Form fields on contact (and similar templates) */
html[data-theme] .wws-contact input[type="text"],
html[data-theme] .wws-contact input[type="email"],
html[data-theme] .wws-contact select,
html[data-theme] .wws-contact textarea {
  background: var(--lab-surface) !important;
  color: var(--lab-text) !important;
  border-color: var(--lab-border-2) !important;
}

/* Status banners */
html[data-theme] .wws-status.info {
  background: rgba(0,0,0,0.04) !important;
  border-color: var(--lab-border-2) !important;
}
html[data-theme="dark"] .wws-status.info {
  background: rgba(255,255,255,0.04) !important;
}

html[data-theme] .wws-status.success {
  background: rgba(0,255,65,0.14) !important;
  border-color: rgba(0,255,65,0.35) !important;
}
html[data-theme] .wws-status.error {
  background: rgba(178,34,34,0.16) !important;
  border-color: rgba(178,34,34,0.35) !important;
}