/*
Theme Name: Journey Weaver (Theiner Style)
Theme URI: https://theiner.de/
Author: Werner Theiner (assembled with ChatGPT)
Author URI: https://theiner.de/
Description: Minimal WordPress theme that recreates the Base44 Journey page look & feel (dark + amber glow) without a build step.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: journey-weaver
*/

/* Small extras (Tailwind does most styling) */
html { scroll-behavior: smooth; }

/* Theme tokens (dark default) */
:root {
  --jw-bg: #0a0a0a;
  --jw-text: rgba(255,255,255,.92);
  --jw-muted: rgba(255,255,255,.60);
  --jw-card: rgba(255,255,255,.02);
  --jw-card-2: rgba(255,255,255,.04);
  --jw-border: rgba(255,255,255,.10);
  --jw-border-2: rgba(255,255,255,.15);

  /* App-like aliases used in templates */
  --bg-primary: var(--jw-bg);
  --text-primary: var(--jw-text);
  --text-secondary: var(--jw-muted);
  --text-tertiary: rgba(255,255,255,.72);
  --text-muted: rgba(255,255,255,.45);
  --card-bg: var(--jw-card);
  --card-hover-bg: var(--jw-card-2);
  --card-border: var(--jw-border);
  --border-primary: var(--jw-border-2);
}

html[data-theme="light"] {
  --jw-bg: #f6f5f2;
  --jw-text: rgba(12,12,12,.92);
  --jw-muted: rgba(12,12,12,.62);
  --jw-card: rgba(0,0,0,.03);
  --jw-card-2: rgba(0,0,0,.055);
  --jw-border: rgba(0,0,0,.12);
  --jw-border-2: rgba(0,0,0,.18);

  --text-tertiary: rgba(12,12,12,.72);
  --text-muted: rgba(12,12,12,.45);
}

body { background: var(--jw-bg) !important; color: var(--jw-text); }

/* Journey active glow helper */
.jw-active-glow { pointer-events: none; }

/* Icons */
.jw-icon svg { display: block; }
html[data-theme="light"] .jw-icon { color: rgba(12,12,12,.42) !important; }

/* Topbar + layout */
.jw-topbar {
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--jw-bg) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--jw-border) 70%, transparent);
}
.jw-topbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.jw-brand a { text-decoration: none; }
.jw-brand__text { font-weight: 500; letter-spacing: .2px; color: var(--jw-text); }
.jw-brand__accent { color: #fbbf24; }
.jw-nav { display: none; }
.jw-nav__menu { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.jw-nav__menu a { color: var(--jw-muted); text-decoration: none; font-size: 14px; }
.jw-nav__menu a:hover { opacity: .75; }

@media (min-width: 900px) {
  .jw-nav { display: block; }
}

.jw-main { min-height: calc(100vh - 120px); }

/* Floating theme toggle */
.jw-theme-toggle {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--jw-border);
  background: color-mix(in srgb, var(--jw-bg) 80%, #ffffff 20%);
  backdrop-filter: blur(12px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.jw-theme-toggle__icon { opacity: .85; }
.jw-theme-toggle:hover { border-color: var(--jw-border-2); transform: translateY(-1px); }

/* Light-mode overrides for Tailwind utility classes used in the landing */
html[data-theme="light"] .bg-\[\#0a0a0a\] { background: var(--jw-bg) !important; }
html[data-theme="light"] .text-white { color: rgba(12,12,12,.92) !important; }
html[data-theme="light"] .text-amber-400 { color: #a16207 !important; }
html[data-theme="light"] .text-amber-500\/60 { color: rgba(161,98,7,.60) !important; }
html[data-theme="light"] .text-white\/90 { color: rgba(12,12,12,.90) !important; }
html[data-theme="light"] .text-white\/80 { color: rgba(12,12,12,.80) !important; }
html[data-theme="light"] .text-white\/70 { color: rgba(12,12,12,.70) !important; }
html[data-theme="light"] .text-white\/60 { color: rgba(12,12,12,.60) !important; }
html[data-theme="light"] .text-white\/50 { color: rgba(12,12,12,.52) !important; }
html[data-theme="light"] .text-white\/40 { color: rgba(12,12,12,.42) !important; }
html[data-theme="light"] .border-white\/10 { border-color: var(--jw-border) !important; }
html[data-theme="light"] .border-white\/20 { border-color: var(--jw-border) !important; }
html[data-theme="light"] .border-white\/5 { border-color: color-mix(in srgb, var(--jw-border) 65%, transparent) !important; }
html[data-theme="light"] .bg-white\/5 { background: var(--jw-card-2) !important; }
html[data-theme="light"] .bg-white\/\[0\.02\] { background: var(--jw-card) !important; }
html[data-theme="light"] .bg-white\/\[0\.04\] { background: var(--jw-card-2) !important; }
html[data-theme="light"] .hover\:bg-white\/5:hover { background: var(--jw-card-2) !important; }
html[data-theme="light"] .hover\:border-white\/40:hover { border-color: var(--jw-border-2) !important; }
html[data-theme="light"] .border-amber-500\/30 { border-color: rgba(161,98,7,.35) !important; }
html[data-theme="light"] .border-amber-500\/20 { border-color: rgba(161,98,7,.25) !important; }
html[data-theme="light"] .bg-amber-500\/10 { background: rgba(161,98,7,.10) !important; }
html[data-theme="light"] .bg-amber-500\/5 { background: rgba(161,98,7,.06) !important; }
html[data-theme="light"] .from-amber-900\/10 { --tw-gradient-from: rgba(120,53,15,.08) !important; }

@supports not (color-mix(in srgb, #000 10%, transparent)) {
  .jw-theme-toggle { background: rgba(10,10,10,.65); }
  html[data-theme="light"] .jw-theme-toggle { background: rgba(246,245,242,.72); }
}

/* Scroll reveal */
.jw-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.jw-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Card active helpers (class toggled by JS) */
.jw-card.is-active { border-color: rgba(245, 158, 11, .5) !important; }

/* (Footer uses Tailwind classes in footer.php) */


/* Gutenberg helpers */
.wp-block-button.jw-btn-primary .wp-block-button__link{
  border-radius: 9999px;
  padding: 0.85rem 1.25rem;
  background: rgba(245, 158, 11, .92); /* amber-500-ish */
  color: rgba(10,10,10,.95);
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.08);
}
html[data-theme="light"] .wp-block-button.jw-btn-primary .wp-block-button__link{
  color: rgba(10,10,10,.95);
}
.wp-block-button.jw-btn-primary .wp-block-button__link:hover{
  filter: brightness(1.05);
}

.wp-block-button.jw-btn-ghost .wp-block-button__link{
  border-radius: 9999px;
  padding: 0.85rem 1.25rem;
  background: rgba(255,255,255,.04);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}
.wp-block-button.jw-btn-ghost .wp-block-button__link:hover{
  background: rgba(255,255,255,.06);
}