@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

/*
 * Wspólny motyw SSAiM.
 * Każda podstrona ładuje ten plik po swoich stylach lokalnych, dlatego kolory,
 * typografia i podstawowe komponenty pozostają zgodne ze stroną główną.
 */
:root {
  --brand-ink: #142038;
  --brand-navy: #1c2d4e;
  --brand-navy-2: #24385e;
  --brand-paper: #ede8dc;
  --brand-paper-2: #e3ddcc;
  --brand-gold: #e7a33e;
  --brand-red: #c1402b;
  --brand-muted: #5c687a;
  --brand-line: rgba(20, 32, 56, .16);

  --ink: var(--brand-ink);
  --turf: var(--brand-ink);
  --green: var(--brand-ink);
  --primary: var(--brand-navy);
  --primary-color: var(--brand-navy);
  --paper: var(--brand-paper);
  --chalk: var(--brand-paper);
  --white: var(--brand-paper);
  --gold: var(--brand-gold);
  --lime: var(--brand-gold);
  --orange: var(--brand-red);
  --coral: var(--brand-red);
  --line: var(--brand-line);
  --font-display: 'Bebas Neue', 'Anton', sans-serif;
  --font-body: 'Work Sans', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  --display: var(--font-display);
  --body: var(--font-body);
  --mono: var(--font-mono);
  --green2: var(--brand-navy-2);
  --gray: var(--brand-muted);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--brand-paper);
  color: var(--brand-ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { transition: color .2s ease, opacity .2s ease, border-color .2s ease, background-color .2s ease; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { outline-color: var(--brand-gold); }
::selection { background: var(--brand-gold); color: var(--brand-ink); }

/* Shared controls used by the content pages. */
.btn, .modal-btn, .start-button, .declaration-button, .site-btn, .replay-btn {
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.btn-solid, .btn-accept, .start-button, .declaration-button, .modal-btn-primary {
  background: var(--brand-gold) !important;
  color: var(--brand-ink) !important;
}
.btn-ghost, .btn-outline, .btn-reject, .modal-btn-secondary {
  border-color: var(--brand-ink) !important;
  color: var(--brand-ink) !important;
  background: transparent !important;
}
.btn-solid:hover, .btn-accept:hover, .start-button:hover, .declaration-button:hover,
.modal-btn-primary:hover { background: #f4bd60 !important; }

/* Editorial and profile pages */
.nav, .topbar, .header {
  background: rgba(20, 32, 56, .96) !important;
  border-bottom: 1px solid rgba(244, 240, 232, .16) !important;
  box-shadow: 0 2px 0 var(--brand-gold) !important;
}
.nav .cta, .topbar a.back, .home { color: var(--brand-paper); }
.nav .cta { background: var(--brand-gold) !important; color: var(--brand-ink) !important; }
.hero, .profile-hero, .cele, .start-overlay { background-color: var(--brand-ink) !important; }
.wladze { background: var(--brand-navy) !important; }
.about, .formy { background: var(--brand-paper) !important; }
.idcard, .profile-card { background: var(--brand-navy) !important; border-radius: 4px !important; }
.idcard:hover { border-color: var(--brand-gold) !important; }
.box-card, .stub, .card { border-radius: 4px !important; }

/* Join page and other pages which used the older green visual language. */
body:has(.header) {
  background:
    radial-gradient(circle at 80% 15%, rgba(231, 163, 62, .14), transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(193, 64, 43, .12), transparent 30%),
    var(--brand-ink) !important;
  color: var(--brand-paper) !important;
}
body:has(.header) .header {
  color: var(--brand-paper);
}
body:has(.header) .header .logo {
  color: var(--brand-paper) !important;
  font-family: var(--font-display) !important;
  letter-spacing: .03em;
}
body:has(.header) .logo-circle {
  background: var(--brand-gold) !important;
  color: var(--brand-ink) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
body:has(.header) .home,
body:has(.header) .home:hover { color: var(--brand-paper) !important; }
body:has(.header) .badge {
  background: rgba(231, 163, 62, .10) !important;
  border-color: rgba(231, 163, 62, .45) !important;
  color: var(--brand-gold) !important;
  border-radius: 0 !important;
}
body:has(.header) .title,
body:has(.header) .step-number { color: var(--brand-paper) !important; }
body:has(.header) .step-number,
body:has(.header) .step-icon { color: var(--brand-gold) !important; }

/* Press office: use the same fixed navy bar, paper panels and gold actions. */
body:has(.header-container) {
  background: var(--brand-paper) !important;
  color: var(--brand-ink) !important;
}
body:has(.header-container) > header {
  background: rgba(20, 32, 56, .96) !important;
  border-bottom: 0 !important;
  box-shadow: 0 2px 0 var(--brand-gold) !important;
}
body:has(.header-container) .logo { color: var(--brand-paper) !important; font-family: var(--font-display) !important; }
body:has(.header-container) .logo span { color: rgba(244, 240, 232, .7) !important; }
body:has(.header-container) h2 { color: var(--brand-navy) !important; font-family: var(--font-display) !important; letter-spacing: .03em; }
body:has(.header-container) .card {
  background: #fff !important;
  border-color: var(--brand-line) !important;
  box-shadow: 0 12px 30px rgba(20, 32, 56, .08) !important;
}
body:has(.header-container) .btn-outline {
  border-color: var(--brand-gold) !important;
  color: var(--brand-ink) !important;
  background: var(--brand-gold) !important;
}

/* QR generator: same paper surface, navy typography and angular SSAiM controls. */
body:has(#qrcode) {
  background: var(--brand-paper) !important;
  color: var(--brand-ink) !important;
}
body:has(#qrcode) .container {
  background: #fff !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: 0 !important;
  border-top: 4px solid var(--brand-gold) !important;
  box-shadow: 0 18px 45px rgba(20, 32, 56, .12) !important;
}
body:has(#qrcode) .logo,
body:has(#qrcode) h1 {
  color: var(--brand-navy) !important;
  font-family: var(--font-display) !important;
  letter-spacing: .04em;
}
body:has(#qrcode) button {
  background: var(--brand-gold) !important;
  color: var(--brand-ink) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: .78rem !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body:has(#qrcode) button:hover { background: #f4bd60 !important; }
body:has(#qrcode) #qrcode {
  border-color: var(--brand-line) !important;
  border-radius: 0 !important;
}

/* Utility pages use the same paper, border and type rhythm. */
body:has(.header-container) .header-container,
body:has(.header-container) .header-container *:not(i),
body:has(.header-container) .container,
body:has(.header-container) .container *:not(i),
body:has(> .container) .container,
body:has(> .container) .container *:not(i) {
  font-family: var(--font-body) !important;
}
body:has(> .container) { background: var(--brand-paper) !important; }
body:has(> .container) .container {
  border-color: var(--brand-line) !important;
  box-shadow: 0 18px 45px rgba(20, 32, 56, .12) !important;
}
body:has(> .container) input[type="text"],
body:has(> .container) input[type="email"],
body:has(> .container) input[type="url"],
body:has(> .container) select,
body:has(> .container) textarea {
  border-color: var(--brand-line) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--brand-ink) !important;
}
body:has(> .container) input:focus, body:has(> .container) select:focus,
body:has(> .container) textarea:focus { border-color: var(--brand-gold) !important; box-shadow: 0 0 0 3px rgba(231, 163, 62, .18) !important; }
body:has(> .container) button { border-radius: 4px !important; background: var(--brand-navy) !important; }
body:has(> .container) button:hover { background: var(--brand-navy-2) !important; }

@media (max-width: 760px) {
  .wrap { padding-left: 18px !important; padding-right: 18px !important; }
  .nav, .topbar, .header { padding-left: 16px !important; padding-right: 16px !important; }
  .profile-grid, .about .grid, .roster { grid-template-columns: 1fr !important; }
  .profile-grid { gap: 28px !important; }
  .profile-card { max-width: 360px; margin: 0 auto; }
  .field-row { grid-template-columns: 1fr !important; gap: 16px !important; }
  .card-body { padding: 24px 20px 12px !important; }
  .card-section-title { padding: 15px 20px !important; }
  .container { grid-template-columns: 1fr !important; }
  .hero { padding-left: 18px !important; padding-right: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}