/* ═══════════════════════════════════════════════════════════
   Media Essentials — shared design system
   Single source of truth for fonts, base styles and the
   components that appear on every page (nav, labels, buttons,
   cookie banner). Page-specific styles stay in each page's
   own <style> block, which loads AFTER this file.
   ═══════════════════════════════════════════════════════════ */

/* ── Satoshi Variable Font (paths match on-disk casing) ───── */
@font-face {
  font-family: 'Satoshi';
  src: url('/Fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/Fonts/Satoshi-VariableItalic.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: #f9f9f9;
  color: #111;
  -webkit-font-smoothing: antialiased;
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
}

/* ── Scroll progress ──────────────────────────────────────── */
#progress-bar {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 2px;
  background: #0a0a0a;
  z-index: 60;
  transform-origin: left;
  transform: scaleX(0);
  will-change: transform;
}

/* ── Nav ──────────────────────────────────────────────────── */
nav {
  transition: padding 0.5s cubic-bezier(0.16,1,0.3,1),
              background 0.5s ease,
              box-shadow 0.5s ease;
}
nav.scrolled {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.07);
}
.nav-link {
  position: relative;
  padding-bottom: 2px;
  transition: color 0.25s ease;
}
.nav-link::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1);
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ── Section label (eyebrow) ──────────────────────────────── */
.section-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #888;
  font-family: "Inter", sans-serif;
}

/* ── Legal section heading (small uppercase kicker) ───────── */
.legal-h2 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #aaa;
  margin-bottom: 1.25rem;
  font-family: "Inter", sans-serif;
}

/* ── Legal prose ──────────────────────────────────────────── */
.imprint-section p, .imprint-section li,
.policy-section p,  .policy-section li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #444;
}
.imprint-section a, .policy-section a { overflow-wrap: anywhere; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px;
  min-height: 44px;
  background: #0a0a0a; color: #f5f5f5;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-family: "Inter", sans-serif;
  border: 1.5px solid #0a0a0a;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease,
              transform 0.3s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s ease;
}
.btn-primary:hover {
  background: #f5f5f5;
  color: #0a0a0a;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px;
  min-height: 44px;
  background: transparent; color: #0a0a0a;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-family: "Inter", sans-serif;
  border: 1.5px solid rgba(10,10,10,0.22);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.3s ease,
              background 0.3s ease,
              transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.btn-ghost:hover {
  border-color: #0a0a0a;
  background: rgba(10,10,10,0.05);
  transform: translateY(-2px);
}
.btn-ghost:active { transform: translateY(0); }

@media (max-width: 400px) {
  .btn-primary, .btn-ghost { padding-left: 20px; padding-right: 20px; }
}

/* ── Fade-in reveal (subpages) ────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── Cookie banner ────────────────────────────────────────── */
#cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #ffffff; border-top: 1px solid #e5e5e5;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
  padding: 20px; display: none;
  font-family: 'Inter', sans-serif; color: #1a1a1a;
}
#cookie-banner.is-visible { display: block; }
.cookie-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 768px) {
  .cookie-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
}
.cookie-text { font-size: 0.82rem; line-height: 1.6; color: #444; max-width: 70ch; }
.cookie-text a { color: #0a0a0a; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
/* Both buttons are intentionally identical — equal prominence, no dark pattern. */
.cookie-btn {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 18px;
  min-height: 44px;
  white-space: nowrap;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border: 1.5px solid #0a0a0a;
  background: #ffffff; color: #0a0a0a;
  transition: background 0.25s ease, color 0.25s ease;
}
.cookie-btn:hover { background: #0a0a0a; color: #ffffff; }
@media (max-width: 767px) { .cookie-actions { width: 100%; } }