/*
Theme Name: Kräuterhexe Animiert
Theme URI: https://wilderheilzauber.de
Author: Wilder Heilzauber
Description: Mystisches Naturheil-Theme mit animiertem Banner (Mond, Sonne, Glitzer), seitlicher Navigation und aufklappbaren Untermenüs. Pagination-Fix für Startseite integriert.
Version: 2.1.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kraeuterhexe
Tags: sidebar, custom-header, nature, mystical, animated
*/

:root {
  --clr-forest-deep:  #1a2a18;
  --clr-forest-mid:   #2d4a28;
  --clr-forest-light: #4a7c3f;
  --clr-moss:         #6b8c4a;
  --clr-sage:         #8faa6b;
  --clr-fern:         #b5c98a;
  --clr-bark:         #3d2b1f;
  --clr-earth:        #5c3d2e;
  --clr-clay:         #8b5e3c;
  --clr-honey:        #c8942a;
  --clr-amber:        #d4a843;
  --clr-cream:        #f0e6c8;
  --clr-moonlow:      #c9b99a;
  --bg-main:          #0f1a0d;
  --bg-sidebar:       #111d0f;
  --bg-card:          rgba(30,45,25,0.85);
  --txt-primary:      #e8dfc8;
  --txt-secondary:    #b5c98a;
  --txt-heading:      #d4a843;
  --sidebar-width:    280px;
  --font-heading:     'Cinzel Decorative','Palatino Linotype',serif;
  --font-body:        'Crimson Pro','Georgia',serif;
  --font-ui:          'Raleway',sans-serif;
  --tr:               0.3s ease;
  --glow:             0 0 20px rgba(196,148,42,0.35);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-body); background:var(--bg-main); color:var(--txt-primary); line-height:1.7; overflow-x:hidden; }

/* ── Layout ── */
#page-wrapper { display:flex; min-height:100vh; }
#main-content  { margin-left:var(--sidebar-width); flex:1; min-width:0; display:flex; flex-direction:column; }

/* ── Sidebar ── */
#sidebar-nav {
  width:var(--sidebar-width); min-height:100vh;
  background:linear-gradient(180deg,var(--clr-bark) 0%,var(--clr-forest-deep) 30%,var(--bg-sidebar) 100%);
  border-right:1px solid rgba(196,148,42,0.25);
  position:fixed; left:0; top:0; bottom:0; z-index:100;
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  box-shadow:4px 0 30px rgba(0,0,0,0.7);
  transition:transform var(--tr);
}
.sidebar-logo {
  padding:26px 18px 16px; text-align:center;
  border-bottom:1px solid rgba(196,148,42,0.2);
  background:linear-gradient(180deg,rgba(61,43,31,0.9) 0%,transparent 100%);
}
.sidebar-logo .moon-sym {
  font-size:1.35rem; display:block; margin-bottom:9px; color:var(--clr-amber);
  animation:moonPulse 4s ease-in-out infinite;
}
@keyframes moonPulse {
  0%,100% { opacity:.8; text-shadow:0 0 10px rgba(212,168,67,.3); }
  50%     { opacity:1;  text-shadow:0 0 25px rgba(212,168,67,.7); }
}
.sidebar-logo .site-name {
  font-family:var(--font-heading); font-size:.95rem; color:var(--clr-amber);
  letter-spacing:.08em; line-height:1.4; text-decoration:none;
  text-shadow:0 0 12px rgba(212,168,67,.4);
}
.sidebar-logo .site-tagline { font-size:.7rem; color:var(--clr-moonlow); margin-top:4px; font-style:italic; }

/* Nav */
#sidebar-nav nav { flex:1; padding:8px 0; }
#sidebar-nav nav ul { list-style:none; }

/* Level-1 Links */
#sidebar-nav nav > ul > li > a {
  display:flex; align-items:center;
  padding:11px 18px 11px 18px;
  color:var(--clr-cream); text-decoration:none;
  font-family:var(--font-ui); font-size:.79rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  border-left:3px solid transparent;
  transition:all var(--tr);
  width:100%;
}
#sidebar-nav nav > ul > li > a:hover,
#sidebar-nav nav > ul > li.current-menu-item > a,
#sidebar-nav nav > ul > li.current-menu-ancestor > a {
  color:var(--clr-amber); border-left-color:var(--clr-amber);
  background:linear-gradient(90deg,rgba(196,148,42,.12) 0%,transparent 100%);
  text-shadow:0 0 8px rgba(212,168,67,.3);
}

/* Pfeil direkt im Link */
.nav-arrow {
  margin-left:auto;
  font-size:.78rem;
  color:var(--clr-amber);
  opacity:.75;
  display:inline-block;
  transition:transform .3s ease;
  line-height:1;
  padding-left:6px;
  flex-shrink:0;
}
#sidebar-nav nav > ul > li.is-open > a .nav-arrow { transform:rotate(180deg); }

/* Submenus */
#sidebar-nav nav ul ul {
  list-style:none; overflow:hidden; max-height:0;
  transition:max-height .32s ease;
  background:rgba(0,0,0,.28);
  border-left:2px solid rgba(107,140,74,.3);
  margin-left:18px;
}
#sidebar-nav nav ul ul li a {
  display:block; padding:7px 12px 7px 16px;
  color:var(--clr-sage); text-decoration:none;
  font-family:var(--font-ui); font-size:.75rem; letter-spacing:.05em;
  border-left:2px solid transparent; transition:all var(--tr);
}
#sidebar-nav nav ul ul li a:hover,
#sidebar-nav nav ul ul li.current-menu-item a { color:var(--clr-fern); border-left-color:var(--clr-moss); background:rgba(107,140,74,.1); }
#sidebar-nav nav ul ul ul { margin-left:12px; }
#sidebar-nav nav ul ul ul li a { font-size:.72rem; color:var(--clr-moonlow); }

.nav-divider { height:1px; background:linear-gradient(90deg,transparent,rgba(196,148,42,.25),transparent); margin:8px 16px; }
.sidebar-footer { padding:14px; text-align:center; border-top:1px solid rgba(196,148,42,.15); font-size:.64rem; color:var(--clr-moonlow); font-style:italic; opacity:.7; }

/* Mobile */
#nav-toggle {
  display:none; position:fixed; top:14px; left:14px; z-index:200;
  background:var(--clr-bark); border:1px solid var(--clr-amber); color:var(--clr-amber);
  width:40px; height:40px; border-radius:4px; font-size:1.15rem;
  cursor:pointer; align-items:center; justify-content:center; transition:all var(--tr);
}
#nav-toggle:hover { background:var(--clr-earth); box-shadow:var(--glow); }
#sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:99; }

/* ── Header / Banner ── */
#site-header { width:100%; position:relative; overflow:hidden; background:#0a140a; line-height:0; }
.banner-frame { position:relative; width:100%; padding-bottom:28.125%; overflow:hidden; }
.banner-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.banner-fade { position:absolute; bottom:0; left:0; right:0; height:45%; background:linear-gradient(to top,var(--bg-main) 0%,rgba(15,26,13,.5) 55%,transparent 100%); pointer-events:none; z-index:2; }

/* SVG animation layer */
/* ── Content ── */
#content-wrapper { padding:42px 48px; flex:1; }

h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); color:var(--txt-heading); line-height:1.3; letter-spacing:.04em; }
h1 { font-size:2.1rem; margin-bottom:1rem; text-shadow:0 0 20px rgba(212,168,67,.2); }
h2 { font-size:1.6rem; margin-bottom:.8rem; }
h3 { font-size:1.25rem; margin-bottom:.65rem; color:var(--clr-sage); }
h4 { font-size:1.05rem; margin-bottom:.55rem; color:var(--clr-moss); }
p  { margin-bottom:1.35rem; color:var(--txt-primary); font-size:1.03rem; }
a  { color:var(--clr-amber); text-decoration:none; transition:color var(--tr); }
a:hover { color:var(--clr-honey); text-decoration:underline; }

blockquote { border-left:3px solid var(--clr-amber); padding:13px 20px; margin:26px 0; background:var(--bg-card); border-radius:0 8px 8px 0; font-style:italic; color:var(--clr-moonlow); }
hr { border:none; height:1px; background:linear-gradient(90deg,transparent,var(--clr-amber),transparent); margin:34px 0; opacity:.4; }

/* Cards */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); gap:24px; margin:26px 0; }
.card { background:var(--bg-card); border:1px solid rgba(107,140,74,.25); border-radius:8px; overflow:hidden; transition:all var(--tr); box-shadow:0 4px 15px rgba(0,0,0,.4); }
.card:hover { border-color:rgba(196,148,42,.5); transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,.5); }
.card-img { width:100%; height:190px; object-fit:cover; display:block; }
.card-body { padding:18px; }
.card-title { font-family:var(--font-heading); font-size:.93rem; color:var(--clr-amber); margin-bottom:8px; }
.card-title a { color:inherit; text-decoration:none; }
.card-title a:hover { color:var(--clr-honey); }
.card-excerpt { font-size:.86rem; color:var(--clr-moonlow); line-height:1.6; }
.card-meta { font-size:.7rem; color:var(--clr-moss); margin-top:12px; font-style:italic; }
.card-meta a { color:var(--clr-sage); }

/* Buttons */
.btn, button, input[type="submit"], input[type="button"] {
  display:inline-block; padding:10px 24px;
  background:linear-gradient(135deg,var(--clr-forest-mid),var(--clr-forest-light));
  color:var(--clr-cream); font-family:var(--font-ui); font-size:.79rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(107,140,74,.5); border-radius:4px; cursor:pointer; text-decoration:none;
  transition:all var(--tr); box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.btn:hover, button:hover, input[type="submit"]:hover {
  background:linear-gradient(135deg,var(--clr-forest-light),var(--clr-moss));
  border-color:var(--clr-amber); color:var(--clr-cream); text-decoration:none;
  box-shadow:var(--glow); transform:translateY(-1px);
}
.btn-gold { background:linear-gradient(135deg,var(--clr-clay),var(--clr-honey)); border-color:var(--clr-amber); color:var(--clr-bark); font-weight:700; }
.btn-gold:hover { background:linear-gradient(135deg,var(--clr-honey),var(--clr-amber)); color:var(--clr-bark); }

/* Forms */
input[type="text"],input[type="email"],input[type="search"],input[type="url"],input[type="password"],textarea,select {
  width:100%; padding:10px 14px;
  background:rgba(26,42,24,.8); border:1px solid rgba(107,140,74,.4); border-radius:4px;
  color:var(--txt-primary); font-family:var(--font-body); font-size:1rem;
  outline:none; margin-bottom:13px; transition:border-color var(--tr),box-shadow var(--tr);
}
input:focus,textarea:focus,select:focus { border-color:var(--clr-amber); box-shadow:0 0 0 3px rgba(196,148,42,.15); }
input::placeholder,textarea::placeholder { color:var(--clr-moss); opacity:.7; }
label { display:block; font-family:var(--font-ui); font-size:.78rem; color:var(--txt-secondary); letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }

/* Post */
.post-header { margin-bottom:30px; }
.post-title { font-family:var(--font-heading); font-size:1.95rem; color:var(--clr-amber); line-height:1.25; }
.post-meta { font-size:.76rem; color:var(--clr-moss); margin-top:10px; font-family:var(--font-ui); letter-spacing:.06em; }
.post-thumbnail { width:100%; max-height:430px; object-fit:cover; border-radius:6px; margin-bottom:26px; border:1px solid rgba(107,140,74,.25); }
.entry-content { font-size:1.04rem; line-height:1.82; }
.entry-content img { max-width:100%; height:auto; border-radius:5px; border:1px solid rgba(107,140,74,.2); margin:16px 0; }

/* Tags */
.tag-cloud a, .cat-links a { display:inline-block; padding:4px 10px; background:rgba(107,140,74,.15); border:1px solid rgba(107,140,74,.3); border-radius:20px; color:var(--clr-sage); font-size:.73rem; margin:3px; font-family:var(--font-ui); letter-spacing:.05em; transition:all var(--tr); }
.tag-cloud a:hover, .cat-links a:hover { background:rgba(107,140,74,.3); border-color:var(--clr-amber); color:var(--clr-amber); }

/* Widgets */
.widget { margin-bottom:34px; padding:20px; background:var(--bg-card); border:1px solid rgba(107,140,74,.2); border-radius:8px; }
.widget-title { font-family:var(--font-heading); font-size:.88rem; color:var(--clr-amber); margin-bottom:13px; padding-bottom:8px; border-bottom:1px solid rgba(196,148,42,.2); text-transform:uppercase; letter-spacing:.08em; }
.widget ul { list-style:none; }
.widget ul li { padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:.86rem; }
.widget ul li:last-child { border-bottom:none; }
.widget ul li a { color:var(--clr-sage); }
.widget ul li a:hover { color:var(--clr-amber); }

/* Decorative */
.section-heading { position:relative; text-align:center; margin:42px 0 30px; }
.section-heading::after { content:''; display:block; width:80px; height:2px; background:linear-gradient(90deg,transparent,var(--clr-amber),transparent); margin:10px auto 0; }
.nature-divider { text-align:center; color:var(--clr-amber); font-size:1.2rem; margin:26px 0; opacity:.5; letter-spacing:7px; }
.highlight-box { background:rgba(107,140,74,.08); border:1px solid rgba(107,140,74,.3); border-radius:6px; padding:18px 20px; margin:22px 0; position:relative; }
.highlight-box::before { content:'✦'; position:absolute; top:-10px; left:17px; background:var(--bg-main); color:var(--clr-amber); padding:0 7px; font-size:.86rem; }
.shimmer { background:linear-gradient(90deg,var(--clr-amber) 0%,var(--clr-cream) 50%,var(--clr-amber) 100%); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmer 3s linear infinite; }
@keyframes shimmer { from{background-position:200% center} to{background-position:-200% center} }

/* Pagination */
.page-numbers { display:inline-block; padding:7px 13px; margin:3px; background:var(--bg-card); border:1px solid rgba(107,140,74,.3); border-radius:4px; color:var(--clr-sage); font-family:var(--font-ui); font-size:.81rem; text-decoration:none; transition:all var(--tr); }
.page-numbers:hover, .page-numbers.current { background:rgba(107,140,74,.25); border-color:var(--clr-amber); color:var(--clr-amber); }

/* Comments */
.comments-area { margin-top:46px; padding-top:36px; border-top:1px solid rgba(196,148,42,.2); }
.comments-title { font-family:var(--font-heading); color:var(--clr-amber); font-size:1.2rem; margin-bottom:26px; }
.comment-list { list-style:none; }
.comment { margin-bottom:20px; padding:16px; background:var(--bg-card); border-radius:6px; border-left:3px solid rgba(107,140,74,.4); }
.comment.bypostauthor { border-left-color:var(--clr-amber); }
.comment-author { font-family:var(--font-ui); font-weight:600; color:var(--clr-amber); }
.comment-date { font-size:.73rem; color:var(--clr-moss); margin:3px 0 9px; }

/* Footer */
#site-footer { background:linear-gradient(180deg,var(--clr-bark) 0%,#0a0f08 100%); border-top:1px solid rgba(196,148,42,.2); padding:32px 48px 22px; margin-top:50px; text-align:center; }
.footer-site-name { font-family:var(--font-heading); font-size:1rem; color:var(--clr-amber); margin-bottom:5px; }
.footer-site-desc { font-size:.82rem; color:var(--clr-moonlow); font-style:italic; opacity:.75; margin-bottom:0; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding-top:16px; margin-top:18px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.footer-copyright { font-size:.73rem; color:var(--clr-moonlow); opacity:.6; font-family:var(--font-ui); }
.footer-magic { font-size:.73rem; color:var(--clr-amber); opacity:.5; font-style:italic; }

/* WooCommerce */
.woocommerce .product .price { color:var(--clr-amber); font-family:var(--font-heading); }
.woocommerce .button { background:var(--clr-forest-mid) !important; color:var(--clr-cream) !important; }
.woocommerce .button:hover { background:var(--clr-forest-light) !important; }

/* Scrollbar */
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background:var(--bg-main); }
::-webkit-scrollbar-thumb { background:var(--clr-forest-mid); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--clr-moss); }

/* Responsive */
@media (max-width:900px) {
  #nav-toggle { display:flex; }
  #sidebar-nav { transform:translateX(calc(-1 * var(--sidebar-width))); }
  #sidebar-nav.is-open { transform:translateX(0); }
  #sidebar-overlay.is-visible { display:block; }
  #main-content { margin-left:0; }
  #content-wrapper { padding:26px 18px; }
  #site-footer { padding:28px 18px 18px; }
  .banner-head-anim { width:44%; }
}
@media (max-width:600px) {
  h1 { font-size:1.5rem; }
  h2 { font-size:1.2rem; }
  .card-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .banner-head-anim { width:52%; }
}