/* =========================================================
   Erfindergeist Jülich — termine/css/main.css
   ========================================================= */

/* --- Fonts ------------------------------------------------ */
@font-face {
  font-family: 'Caveat';
  src: url('https://share.erfindergeist.org/fonts/Caveat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('https://share.erfindergeist.org/fonts/Caveat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* --- CSS Custom Properties -------------------------------- */
:root {
  --color-primary:        #107c6f;
  --color-primary-rgb:    16,124,111;
  --color-primary-dark:   #107c6f;
  --color-primary-light:  #e6f5f3;
  --color-secondary:      #F9B338;
  --color-secondary-light:#fef6e4;
  --color-bg:             #f6fbfa;
  --color-surface:        #ffffff;
  --color-text:           #1a2e2c;
  --color-text-muted:     #4a6b67;
  --color-border:         #d0e8e4;
  --color-shadow:         rgba(var(--color-primary-rgb), .12);
  --font-scale:           1;
  --navbar-height:        70px;

  /* Bootstrap theme */
  --bs-primary:                #107c6f;
  --bs-primary-rgb:            16,124,111;
  --bs-secondary:              #F9B338;
  --bs-secondary-rgb:          249,179,56;
  --bs-link-color:             #107c6f;
  --bs-link-color-rgb:         16,124,111;
  --bs-link-hover-color:       #0d6457;
  --bs-link-hover-color-rgb:   13,100,87;
  --bs-body-font-size:         calc(1rem * var(--font-scale));
  --bs-body-color:        var(--color-text);
  --bs-body-bg:           var(--color-bg);

  /* Bootstrap dropdown */
  --bs-dropdown-bg:               var(--color-surface);
  --bs-dropdown-border-color:     var(--color-border);
  --bs-dropdown-border-radius:    10px;
  --bs-dropdown-padding-y:        .35rem;
  --bs-dropdown-min-width:        140px;
  --bs-dropdown-box-shadow:       0 6px 20px var(--color-shadow);
  --bs-dropdown-link-color:       var(--color-text);
  --bs-dropdown-link-hover-color: var(--color-primary);
  --bs-dropdown-link-hover-bg:    var(--color-primary-light);
  --bs-dropdown-item-padding-x:   .75rem;
  --bs-dropdown-item-padding-y:   .45rem;
  --bs-dropdown-font-size:        .9rem;
  --bs-dropdown-item-border-radius: 7px;
}

[data-theme="dark"] {
  --color-primary:         #159989;
  --color-primary-rgb:     21,153,137;
  --color-bg:              #0d1918;
  --color-surface:         #162624;
  --color-text:            #e0f0ee;
  --color-text-muted:      #7aa8a3;
  --color-border:          #2a4440;
  --color-shadow:          rgba(0,0,0,.35);
  --color-primary-light:   #1c3a37;
  --color-secondary-light: #2b2210;

  /* Bootstrap — restore original primary for dark bg */
  --bs-primary:            #159989;
  --bs-primary-rgb:        21,153,137;
  --bs-link-color:         #159989;
  --bs-link-color-rgb:     21,153,137;
}

.high-contrast {
  --color-primary:        #006d5e;
  --color-text:           #000000;
  --color-bg:             #ffffff;
  --color-surface:        #ffffff;
  --color-border:         #000000;
  --color-text-muted:     #444444;
}
[data-theme="dark"].high-contrast {
  --color-text:   #ffffff;
  --color-bg:     #000000;
  --color-surface:#111111;
  --color-border: #ffffff;
}

/* Disable all animations */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration:   0.01ms !important;
  transition-duration:  0.01ms !important;
  animation-iteration-count: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  :root:not(.force-motion) * {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: calc(16px * var(--font-scale));
  overflow-x: clip;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color .35s, color .35s;
  max-width: 100%;
}

section {
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--color-text);
}

a { color: var(--color-primary); transition: color .2s; }
a:hover { color: var(--color-primary-dark); }

/* Focus ring for keyboard nav */
:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Skip link ------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  padding: .5rem 1.5rem;
  border-radius: 0 0 8px 8px;
  z-index: 9999;
  font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* --- Navbar ---------------------------------------------- */
#main-nav {
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-primary-light);
  height: var(--navbar-height);
  transition: box-shadow .3s, background .35s;
}
#main-nav.scrolled {
  box-shadow: 0 4px 20px var(--color-shadow);
}
.navbar-logo {
  height: 46px;
  width: auto;
  max-width: 200px;
}

/* Burger icon — light mode */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(26,46,44,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Burger icon — dark mode */
[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(224,240,238,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile collapse — solid background so nav links are readable */
@media (max-width: 1199.98px) {
  #main-nav { height: auto; }
  #navbarCollapse {
    background: var(--color-surface);
    border-top: 1.5px solid var(--color-border);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px var(--color-shadow);
    padding: .75rem 0 1rem;
  }
}

.nav-link {
  color: var(--color-text) !important;
  font-weight: 500;
  font-size: .88rem;
  padding: .4rem .75rem !important;
  border-radius: 6px;
  line-height: 1.4;
  transition: background .2s, color .2s;
}
.nav-link:hover,
.nav-link.active {
  background: var(--color-primary-light);
  color: var(--color-primary) !important;
}

/* Icon buttons in navbar */
.btn-icon {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.btn-icon:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-icon svg { width: 18px; height: 18px; display: block; }
.btn-icon-sponsor {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  text-decoration: none;
}
.btn-icon-sponsor:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* Dropdown — styled via Bootstrap vars in :root */

/* --- Buttons — Bootstrap component vars ------------------ */
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: #0a5f56;
  --bs-btn-hover-border-color: #0a5f56;
  --bs-btn-active-bg: #0a5f56;
  --bs-btn-active-border-color: #0a5f56;
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
}
/* Bootstrap compiles --bs-btn-color hardcoded (#6c757d) — override for contrast */
.btn-outline-secondary {
  --bs-btn-color: #545b61;
  --bs-btn-border-color: #545b61;
}
[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #adb5bd;
  --bs-btn-border-color: #adb5bd;
}
.btn-secondary {
  --bs-btn-bg: var(--color-secondary);
  --bs-btn-border-color: var(--color-secondary);
  --bs-btn-color: #1a2e2c;
  --bs-btn-hover-bg: #e09c28;
  --bs-btn-hover-border-color: #e09c28;
  --bs-btn-hover-color: #1a2e2c;
  --bs-btn-active-bg: #e09c28;
  --bs-btn-active-border-color: #e09c28;
  --bs-btn-active-color: #1a2e2c;
  --bs-btn-focus-shadow-rgb: 249, 179, 56;
}

/* --- Section base ---------------------------------------- */
section { transition: background-color .35s; }

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-primary);
  line-height: 1.15;
  margin-bottom: .2rem;
}
.section-title + p.lead {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: .75rem;
}
.text-muted { color: var(--color-text-muted) !important; }

/* Alternating section backgrounds */
.section-arch     { background: var(--color-surface); }
.section-events   { background: var(--color-primary-light); }
.section-ics      { background: var(--color-primary-light); }
.section-plugin   { background: var(--color-surface); }
.section-pdf      { background: var(--color-secondary-light); }
.section-downloads{ background: var(--color-secondary-light); }
.section-ha       { background: linear-gradient(135deg, #0d7060 0%, #0a5a4c 100%); color: #fff; }
.section-sponsor  { background: linear-gradient(180deg, var(--color-secondary-light) 0%, var(--color-bg) 100%); }

/* --- Analogy box ----------------------------------------- */
.analogy-box {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  background: var(--color-secondary-light);
  border-left: 4px solid var(--color-secondary);
  border-radius: 0 10px 10px 0;
  padding: .85rem 1rem;
  margin: 1.25rem 0;
}
.analogy-box svg { color: var(--color-secondary); flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; }

/* --- Section big icon ------------------------------------ */
.section-big-icon {
  width: 96px;
  height: 96px;
  color: var(--color-primary);
  stroke-width: 1.2;
}

/* --- Code block ------------------------------------------ */
.code-block {
  background: #1a2e2c;
  border-radius: 10px;
  overflow: hidden;
}
[data-theme="dark"] .code-block { background: #0a1a18; border: 1px solid var(--color-border); }
.code-block-label {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.55);
  font-size: .78rem;
  padding: .4rem .9rem;
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  letter-spacing: .04em;
}
.code-block pre {
  margin: 0;
  padding: 1rem 1.1rem 1.2rem;
  overflow-x: auto;
}
.code-block code {
  font-family: 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace;
  font-size: .82rem;
  color: #a8d8d2;
  white-space: pre;
}
.code-ics  .b { color: #F9B338; }
.code-yaml .k { color: #79d4c8; }
.code-yaml .v { color: #F9B338; }

/* --- Accessibility Toolbar ------------------------------- */
#a11y-toolbar {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 1100;
}
.a11y-toggle-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px var(--color-shadow);
  transition: background .2s, transform .2s;
  cursor: pointer;
}
.a11y-toggle-btn:hover { background: var(--color-primary-dark); transform: scale(1.08); }
.a11y-toggle-btn svg   { width: 22px; height: 22px; }

.a11y-panel {
  position: absolute;
  bottom: calc(100% + .6rem);
  left: 0;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem;
  min-width: 220px;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.a11y-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.a11y-panel-title { color: var(--color-primary); margin-bottom: .75rem; font-family: 'Caveat', cursive; font-size: 1.2rem; }
.a11y-group { margin-bottom: .85rem; }
.a11y-group-label { display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted); margin-bottom: .4rem; }
.a11y-btn-group { display: flex; gap: .3rem; }
.a11y-btn-group button {
  flex: 1;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 7px;
  padding: .3rem .2rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.a11y-btn-group button:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.a11y-btn-group button.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* --- Scroll-to-top --------------------------------------- */
.scroll-top-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px var(--color-shadow);
  cursor: pointer;
  z-index: 1100;
  transition: background .2s, transform .2s;
}
.scroll-top-btn:hover { background: var(--color-primary-dark); transform: scale(1.1); }
.scroll-top-btn svg   { width: 22px; height: 22px; }

/* --- Footer overrides (base styles injected by eg-footer.js) ----------- */
@media (max-width: 575.98px) { .eg-footer { padding-bottom: 5rem !important; } }
.footer-col-links code {
  font-size: .78rem;
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: .05rem .35rem;
  border-radius: 4px;
}

/* --- Utilities ------------------------------------------- */
.card-shadow { box-shadow: 0 3px 18px var(--color-shadow); }

/* Rough Notation — ensure inline for highlights */
.rn-highlight { display: inline; }

/* ── Shared animations ────────────────────────────────── */
@keyframes puzzlePop {
  0%, 55%, 100%  { transform: translateY(0)     scaleX(1)    scaleY(1)    rotate(0deg);   }
  62%            { transform: translateY(-14px)  scaleX(0.88) scaleY(1.2)  rotate(-12deg); }
  72%            { transform: translateY(-10px)  scaleX(1.1)  scaleY(0.9)  rotate(8deg);  }
  82%            { transform: translateY(-3px)   scaleX(0.97) scaleY(1.05) rotate(-3deg); }
  91%            { transform: translateY(0)      scaleX(1.05) scaleY(0.95) rotate(0deg);   }
}
html.reduce-motion .puzzle-question-mark,
html.reduce-motion .event-challenge-qmark { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .puzzle-question-mark,
  .event-challenge-qmark { animation: none; }
}