/* Growmigo: shared header/footer styles. Extracted from site-header.js so the browser
   can cache and parse this in parallel instead of waiting for JS to inject a <style> tag. */
:where(:root) {
      --green:      #00ff41;
      --green-dim:  #00aa2a;
      --green-dark: #003d0f;
      --green-glow: rgba(0,255,65,0.12);
    }

    /* Body-Offset für Fixed-Header */
    body { padding-top: 132px !important; }
    @media (max-width: 768px) { body { padding-top: 116px !important; } }
    @media (max-width: 600px) { body { padding-top: 139px !important; } }
    @media (max-width: 380px) { body { padding-top: 131px !important; } }

    /* ── NEWS BAR ── */
    #news-bar {
      position: fixed; top: 0; left: 0; right: 0; height: 36px;
      background: #040904; border-bottom: 1px solid rgba(0,255,65,0.10);
      display: flex; align-items: center; padding: 0 12px; z-index: 9000;
    }
    #news-inner {
      position: absolute; left: 0; right: 0; top: 0; bottom: 0;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; font-family: 'Share Tech Mono', monospace;
      font-size: 13px; letter-spacing: 1.5px; color: #e8e8e8;
      white-space: nowrap; pointer-events: none;
      -webkit-mask-image: linear-gradient(to right, transparent 1%, black 6%, black 74%, transparent 88%);
      mask-image:         linear-gradient(to right, transparent 1%, black 6%, black 74%, transparent 88%);
    }
    #news-text { display: inline-block; white-space: nowrap; will-change: transform; }
    #news-lang-sw {
      margin-left: auto; display: none; align-items: center; gap: 4px;
      position: relative; z-index: 2; flex-shrink: 0;
      background: #040904; padding-left: 16px;
    }
    #news-lang-sw button {
      background: none; border: none; font-family: 'Share Tech Mono', monospace;
      font-size: 11px; letter-spacing: 1.5px; cursor: pointer;
      padding: 2px 5px; line-height: 1; transition: color 0.15s, opacity 0.15s;
    }
    #news-lang-sw select {
      background: #080d08; border: 1px solid rgba(0,255,65,0.2); color: #00c032;
      font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 1px;
      padding: 3px 6px; border-radius: 3px; cursor: pointer; outline: none;
    }
    #news-lang-sw .lang-sep { color: rgba(0,255,65,0.2); font-size: 10px; line-height: 1; pointer-events: none; }
    #news-lang-sw .lang-flag-active { border-radius: 2px; box-shadow: 0 0 5px 2px rgba(0,255,65,0.3); }
    @media (max-width: 540px) {
      #news-bar { height: auto; min-height: 32px; flex-direction: column; align-items: center; padding: 5px 12px; gap: 4px; }
      #news-inner { position: static; max-width: calc(100vw - 24px); width: calc(100vw - 24px); font-size: 11px; letter-spacing: 1px; -webkit-mask-image: none; mask-image: none; }
      #news-lang-sw { order: -1; margin-left: 0; }
    }

    /* ── SITE HEADER ── */
    #site-header {
      position: fixed; top: 36px; left: 0; right: 0; height: 96px;
      background: rgba(4,8,4,0.97); border-bottom: 1px solid rgba(0,255,65,0.07);
      display: flex; align-items: center; justify-content: center;
      padding: 0; z-index: 8000;
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    /* Mobile: Lücke zwischen News-Bar und Header schließen */
    @media (max-width: 600px) {
      #site-header::before {
        content: ''; position: absolute; bottom: 100%; left: 0; right: 0;
        height: 60px; background: rgba(4,8,4,0.97); pointer-events: none;
      }
    }
    .hdr-inner {
      max-width: 1160px; width: 100%; margin: 0 auto; padding: 0 32px;
      display: flex; align-items: center; justify-content: space-between; height: 100%;
    }
    .hdr-logo { display: flex; align-items: center; gap: 16px; }
    .hdr-mascot {
      height: 72px; width: auto; object-fit: contain; display: block;
      filter: drop-shadow(0 0 8px rgba(0,255,65,0.65)) brightness(1.05);
    }
    .hdr-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
    .hdr-title-row { display: flex; align-items: flex-end; gap: 7px; line-height: 1; }
    #site-header .logo-title {
      font-family: 'VT323', monospace; font-size: 46px; letter-spacing: 4px;
      margin: 0; line-height: 1; font-weight: normal;
      color: var(--green, #00ff41);
      text-shadow: 0 0 20px var(--green, #00ff41), 0 0 40px var(--green-dim, #00aa2a);
    }
    .hdr-beta {
      font-size: 11px; font-family: 'Share Tech Mono', monospace; color: #00cc33;
      opacity: 0.75; letter-spacing: 1px; padding-bottom: 5px; line-height: 1;
    }
    #site-header .logo-sub {
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      letter-spacing: 3px; margin: 0; color: var(--green-dim, #00aa2a); line-height: 1;
    }
    #site-nav { display: flex; align-items: center; gap: 32px; }
    #site-nav a {
      color: #3a6a3a; text-decoration: none; font-family: 'Share Tech Mono', monospace;
      font-size: 13px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;
      transition: color 0.15s; white-space: nowrap;
    }
    #site-nav a:hover, #site-nav a.gm-active { color: var(--green, #00ff41); }
    .burger-line {
      display: block; width: 22px; height: 2px; background: #6a9a6a;
      border-radius: 2px; transition: background 0.15s;
    }
    #burger-btn:hover .burger-line { background: var(--green, #00ff41); }
    #mobile-nav a:hover { color: var(--green, #00ff41) !important; }
    #mobile-nav a.gm-active { color: var(--green, #00ff41) !important; }

    /* Responsive Header */
    @media (max-width: 768px) {
      .hdr-inner { padding: 0 20px; }
      #site-header { height: 80px; }
      #site-header .logo-title { font-size: 34px; letter-spacing: 3px; }
      .hdr-mascot { height: 60px; }
      #site-nav { gap: 20px; }
      #site-nav a { font-size: 11px; }
    }
    @media (max-width: 600px) {
      .hdr-inner { padding: 0 16px; }
      #site-header { height: 84px; top: 55px; }
      #site-header .logo-title { font-size: 28px; letter-spacing: 2px; }
      #site-header .logo-sub { font-size: 8px; letter-spacing: 1.8px; }
      .hdr-beta { font-size: 9px; }
      .hdr-mascot { height: 56px; }
      #site-nav { display: none !important; }
      #burger-btn { display: flex !important; }
    }
    @media (max-width: 380px) {
      #site-header { height: 76px; top: 55px; }
      #site-header .logo-title { font-size: 24px; }
      .hdr-mascot { height: 50px; }
    }

    /* ── PAGE FOOTER ── */
    #page-footer {
      text-align: center; padding: 18px 32px 24px;
      border-top: 1px solid rgba(0,255,65,0.05);
      display: flex; justify-content: center; align-items: center;
      gap: 10px; font-family: 'Share Tech Mono', monospace;
    }
    #page-footer a {
      font-size: 11px; color: #2a4a2a; text-decoration: none;
      letter-spacing: 1.5px; transition: color 0.15s;
    }
    #page-footer a:hover { color: #5a8a5a; }
    #page-footer .sep { color: #1a3a1a; font-size: 10px; }
    @media (max-width: 600px) { #page-footer { padding: 14px 16px 20px; } }
