/* Vextrude — light theme for the static content pages (terms / privacy / contact / about).
   Activated by html[data-theme="light"]; the shared `vx-theme` localStorage key keeps these
   pages in sync with the tools. Covers BOTH styling approaches used across these pages:
   element selectors (the generated localized pages) and Tailwind classes (the English pages
   and the header/footer injected at runtime by shared-header-footer.js). */

/* ---- page content ---- */
html[data-theme="light"] body{background:#f7f8fb!important;color:#334155!important}
html[data-theme="light"] h1,html[data-theme="light"] h2{color:#0f172a!important}
html[data-theme="light"] h3,html[data-theme="light"] h4{color:#334155!important}
html[data-theme="light"] ul,html[data-theme="light"] ol{color:#475569!important}
html[data-theme="light"] strong{color:#0f172a!important}
html[data-theme="light"] .max-w-4xl a,html[data-theme="light"] .max-w-3xl a{color:#2563eb!important}
html[data-theme="light"] .max-w-4xl a:hover,html[data-theme="light"] .max-w-3xl a:hover{color:#0f172a!important}

/* ---- Tailwind utility remaps (English pages + injected header/footer) ---- */
html[data-theme="light"] header{background:rgba(255,255,255,.92)!important;border-color:#e2e8f0!important}
html[data-theme="light"] footer{background:#eef2f7!important;border-color:#e2e8f0!important}
html[data-theme="light"] footer h4{color:#0f172a!important}
html[data-theme="light"] .text-white{color:#0f172a!important}
html[data-theme="light"] .text-gray-100{color:#0f172a!important}
html[data-theme="light"] .text-gray-200,html[data-theme="light"] .text-gray-300{color:#334155!important}
html[data-theme="light"] .text-gray-400{color:#475569!important}
html[data-theme="light"] .text-gray-500{color:#64748b!important}
html[data-theme="light"] .text-blue-400{color:#2563eb!important}
html[data-theme="light"] [class*="border-gray-8"],html[data-theme="light"] [class*="border-gray-7"]{border-color:#e2e8f0!important}
html[data-theme="light"] [class*="bg-gray-9"]{background:#f7f8fb!important}
html[data-theme="light"] .bg-gray-800,html[data-theme="light"] .bg-gray-850{background:#e9edf3!important}
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select{background:#fff!important;border-color:#cbd5e1!important;color:#0f172a!important}
/* form fields carry .bg-gray-800 (higher specificity than the bare element rule above) — keep them white */
html[data-theme="light"] input[class],html[data-theme="light"] textarea[class],html[data-theme="light"] select[class]{background:#fff!important;color:#0f172a!important}
html[data-theme="light"] .bg-blue-600{color:#fff!important}   /* colored buttons keep white text */

/* ---- dropdowns injected by shared-header-footer.js: clean WHITE cards in light
        mode, matching the tool pages (e.g. text_tool). ---- */
html[data-theme="light"] #tools-menu,html[data-theme="light"] #lang-menu,html[data-theme="light"] #mobile-menu{background:#fff!important;border-color:#e6e9ef!important}
html[data-theme="light"] #tools-menu a:hover,html[data-theme="light"] #tools-menu a:focus,
html[data-theme="light"] #lang-menu a:hover,html[data-theme="light"] #lang-menu a:focus,
html[data-theme="light"] #mobile-menu a:hover{background:#e7eefb!important}
html[data-theme="light"] #tools-menu a:hover .font-bold{color:#1d4ed8!important}
/* language/mobile items hold their text directly on the <a> (with hover:text-white).
   Force a readable dark-blue on hover so the row never renders as white-on-light or
   dark-on-dark, regardless of the .text-gray-300 remap being present. */
html[data-theme="light"] #lang-menu a:hover,html[data-theme="light"] #lang-menu a:focus,
html[data-theme="light"] #mobile-menu a:hover{color:#1d4ed8!important}
/* crisp near-black card titles at rest (matches text_tool's #111827) */
html[data-theme="light"] #tools-menu a .font-bold{color:#111827!important}
html[data-theme="light"] #lang-menu [class*="bg-blue-900"]{background:#e7eefb!important}
/* NOTE: a[class*="bg-gray-8"] matches the Tailwind class token "hover:bg-gray-800"
   as a SUBSTRING, so this must be scoped to real :hover/:focus — otherwise it
   fills every dropdown item gray at REST (muddy cards). Resting state stays
   transparent so the white menu shows through, matching the tool pages. */
html[data-theme="light"] header a[class*="bg-gray-8"]:hover,html[data-theme="light"] header a[class*="bg-gray-8"]:focus{background:#eef2f7!important;border-color:#e2e8f0!important}
/* The header also has BUTTONS carrying the same hover:bg-gray-800 / hover:text-white
   (#lang-switcher-btn, #mobile-menu-btn). Every other light rule here targets `a`, so
   the buttons fell through to Tailwind's DARK hover (#1f2937 + white text) and went
   dark-on-hover in light mode. Same trap as the Tools <button> fade. Keep it scoped to
   :hover/:focus — "bg-gray-8" substring-matches the hover: token and would fill at rest. */
html[data-theme="light"] header button[class*="bg-gray-8"]:hover,
html[data-theme="light"] header button[class*="bg-gray-8"]:focus{background:#eef2f7!important;color:#1d4ed8!important;border-color:#cbd5e1!important}
/* the active-page nav pill uses the REAL class "bg-gray-800/80" (not a hover: prefix).
   In light mode give it a clean BLUE accent: light-blue fill + blue icon (its icon is
   `stroke:currentColor`, and `text-white` would otherwise remap to near-black #0f172a —
   a heavy dark blob next to the gray sibling icons). Now it reads as a highlighted item.
   The "/80" substring never matches the dropdown items above, so this is safe. */
html[data-theme="light"] header a[class*="bg-gray-800/80"]{background:#e7eefb!important;border-color:#c7d7f5!important;color:#2563eb!important}
html[data-theme="light"] header a[class*="bg-gray-800/80"]:hover{background:#dbe7fb!important;border-color:#a9c4f2!important}

/* ---- floating toggle button (identical to the tools' #vx-theme-toggle) ---- */
#vx-theme-toggle{position:fixed;left:1rem;bottom:1.5rem;z-index:2200;width:42px;height:42px;border-radius:50%;border:1px solid #d8e3f0;background:#fff;color:#0f2540;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px rgba(43,62,82,.18);transition:transform .2s ease,background .2s ease,border-color .2s ease}
#vx-theme-toggle:hover{transform:translateY(-2px) scale(1.06)}
#vx-theme-toggle svg{width:20px;height:20px}
#vx-theme-toggle .icon-sun{display:none}
[data-theme="dark"] #vx-theme-toggle{background:#1a1d2e;border-color:#374151;color:#ffd479;box-shadow:0 8px 20px rgba(0,0,0,.5)}
[data-theme="dark"] #vx-theme-toggle .icon-moon{display:none}
[data-theme="dark"] #vx-theme-toggle .icon-sun{display:block}