/*
Theme Name: inOri Datenschutz-Check
Theme URI: https://inori.ch
Description: Schulungs-Theme für den inOri Datenschutz-Check (Sophie Guyer Alterszentrum). Installieren, aktivieren, fertig. Benötigt das Plugin inOri Datenschutz-Check.
Version: 1.0.1
Author: inOri GmbH
Author URI: https://inori.ch
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: inori-cybercheck-theme
*/

/* ═══════════════════════════════════════
   inOri Design Tokens
   ═══════════════════════════════════════ */
:root {
  --p-dark: #1C3F5E;
  --p-mid: #4A7FA5;
  --p-light: #D6E8F5;
  --p-accent: #E07820;
  --p-bg: #F2F5F8;
  --p-white: #FFFFFF;
  --p-border: #D0DCE8;
  --p-text: #1A2A38;
  --p-muted: #6B8499;
  --p-shadow: 0 1px 4px rgba(28,63,94,.08);
  --web-blue: #367099;
  --web-blue-2: #1f5f8b;
  --web-blue-dk: #003d68;
  --ff-body: "Open Sans", -apple-system, sans-serif;
  --ff-head: "Poppins", "Open Sans", sans-serif;
  --rad: 6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--p-text);
  background: var(--p-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none }
button { font-family: inherit; cursor: pointer }
img { max-width: 100%; display: block }

/* ═══ Site Header ═══ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 24px rgba(28,63,94,.08);
}
.site-header-inner {
  max-width: 1480px; margin: 0 auto;
  height: 60px; display: flex; align-items: center;
  padding: 0 clamp(16px, 3vw, 40px); gap: 24px;
}
.site-logo {
  font-family: var(--ff-head);
  font-size: 18px; font-weight: 700;
  color: var(--p-dark); white-space: nowrap;
  display: flex; align-items: center; flex-shrink: 0;
}
.site-logo span { color: var(--p-accent) }

.site-nav {
  display: flex; gap: 4px; list-style: none;
  overflow-x: auto; scrollbar-width: none; flex: 1 1 0; min-width: 0;
  justify-content: flex-start; margin: 0; padding: 0;
}
.site-nav::-webkit-scrollbar { display: none }
.site-nav li { list-style: none }
.site-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; height: 36px; line-height: 1;
  font-size: 13px; font-weight: 600;
  color: var(--p-muted); white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: 999px;
  transition: all .15s;
  text-decoration: none;
}
.site-nav a:hover { color: var(--p-dark); background: #fff; border-color: var(--p-border) }
.site-nav a.current {
  color: #fff; background: var(--p-dark); border-color: var(--p-dark);
  box-shadow: 0 2px 6px rgba(28,63,94,.15);
}
.site-nav-icon { font-size: 14px; line-height: 1 }

.site-nav-badge {
  font-size: 9px; padding: 2px 6px;
  border-radius: 10px; font-weight: 700;
}
.badge-game { background: rgba(224,120,32,.12); color: var(--p-accent) }
.badge-battle { background: rgba(224,120,32,.25); color: #C8661A }

/* ═══ Content ═══ */
.site-content {
  max-width: 1440px; margin: 0 auto;
  padding: 32px clamp(16px, 3vw, 40px) 60px;
}

/* ═══ Footer ═══ */
.site-footer {
  text-align: center; padding: 20px;
  font-size: 12px; color: var(--p-muted);
  border-top: 1px solid var(--p-border);
  background: #fff;
}

/* ═══ Responsive ═══ */
@media (max-width: 640px) {
  .site-header-inner { height: 50px; gap: 12px }
  .site-logo { font-size: 15px }
  .site-nav { gap: 2px; justify-content: flex-end }
  .site-nav a { padding: 6px 10px; font-size: 11px; height: 30px; border-radius: 999px }
  .site-nav-icon { font-size: 12px }
  .site-content { padding: 20px 16px 40px }
}