@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;700&family=Poppins:wght@800&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --accent:      #b20000;
  --accent-dk:   #8a0000;
  --on-accent:   #ffffff;
  --header-bg:   #0032e5;
  --header-text: #ffffff;
  --header-dk:   #0029cc;
  --bg:          #ffffff;
  --text:        #111111;
  --muted:       #454545;
  --surface:     #f5f5f5;
  --border:      #e0e0e0;
  --badge-bg:    #FFC71D;
  --badge-text:  #000000;
  --focus-ring:  #b20000;
  --nav-select-border: #6b7280;
  --btn-subscribe-bg:   #0f5c22;
  --btn-unsubscribe-bg: #424242;
  --btn-submit-bg:      #FFC71D;
  --btn-download-bg:    #FFC71D;
  --btn-social-bg:      #0d5bb5;
  --font:        'Plus Jakarta Sans', system-ui, sans-serif;
  --font-heading:'Cormorant Garamond', Georgia, serif;
  --radius:      8px;
}

body.hc-bw {
  color-scheme: dark;
  --accent: #ffffff; --accent-dk: #ffffff; --on-accent: #000000;
  --header-bg: #000000; --header-text: #ffffff;
  --bg: #000000; --text: #ffffff; --muted: #ffffff;
  --surface: #000000; --border: #ffffff;
  --badge-bg: #ffffff; --badge-text: #000000;
  --focus-ring: #ffffff;
  --nav-select-border: #ffffff;
}

body.hc-by {
  color-scheme: dark;
  --accent: #ffff00; --accent-dk: #ffff00; --on-accent: #000000;
  --header-bg: #000000; --header-text: #ffff00;
  --bg: #000000; --text: #ffff00; --muted: #ffff00;
  --surface: #000000; --border: #ffff00;
  --badge-bg: #ffff00; --badge-text: #000000;
  --focus-ring: #ffff00;
  --nav-select-border: #ffff00;
}

body.hc-yb {
  color-scheme: light;
  --accent: #000000; --accent-dk: #000000; --on-accent: #ffff00;
  --header-bg: #ffff00; --header-text: #000000;
  --bg: #ffff00; --text: #000000; --muted: #000000;
  --surface: #ffff00; --border: #000000;
  --badge-bg: #000000; --badge-text: #ffff00;
  --focus-ring: #000000;
  --nav-select-border: #000000;
}

body.hc-bw #btn-subscribe, body.hc-bw #btn-unsubscribe, body.hc-bw #btn-submit,
body.hc-bw #btn-download, body.hc-bw #btn-social,
body.hc-by #btn-subscribe, body.hc-by #btn-unsubscribe, body.hc-by #btn-submit,
body.hc-by #btn-download, body.hc-by #btn-social,
body.hc-yb #btn-subscribe, body.hc-yb #btn-unsubscribe, body.hc-yb #btn-submit,
body.hc-yb #btn-download, body.hc-yb #btn-social {
  background: var(--bg);
  color: var(--text);
  border-color: var(--text);
}
body.hc-bw #btn-subscribe:hover,   body.hc-bw #btn-subscribe:focus,
body.hc-bw #btn-unsubscribe:hover, body.hc-bw #btn-unsubscribe:focus,
body.hc-bw #btn-submit:hover,      body.hc-bw #btn-submit:focus,
body.hc-bw #btn-download:hover,    body.hc-bw #btn-download:focus,
body.hc-bw #btn-social:hover,      body.hc-bw #btn-social:focus,
body.hc-by #btn-subscribe:hover,   body.hc-by #btn-subscribe:focus,
body.hc-by #btn-unsubscribe:hover, body.hc-by #btn-unsubscribe:focus,
body.hc-by #btn-submit:hover,      body.hc-by #btn-submit:focus,
body.hc-by #btn-download:hover,    body.hc-by #btn-download:focus,
body.hc-by #btn-social:hover,      body.hc-by #btn-social:focus,
body.hc-yb #btn-subscribe:hover,   body.hc-yb #btn-subscribe:focus,
body.hc-yb #btn-unsubscribe:hover, body.hc-yb #btn-unsubscribe:focus,
body.hc-yb #btn-submit:hover,      body.hc-yb #btn-submit:focus,
body.hc-yb #btn-download:hover,    body.hc-yb #btn-download:focus,
body.hc-yb #btn-social:hover,      body.hc-yb #btn-social:focus {
  background: var(--text);
  color: var(--bg);
}

body.hc-bw .info-box, body.hc-by .info-box, body.hc-yb .info-box {
  border: 2px solid var(--accent);
  border-left-width: 6px;
  background: var(--bg);
}

body.hc-bw .lang-switcher select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E");
}
body.hc-by .lang-switcher select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffff00'/%3E%3C/svg%3E");
}
body.hc-yb .lang-switcher select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23000000'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  background: var(--header-bg);
  color: var(--header-text);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--font);
  font-weight: 700;
  text-decoration: none;
  z-index: 200;
  transition: top 0.15s;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.a11y-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  font-family: var(--font);
}

.a11y-toolbar__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.a11y-toolbar__group {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.a11y-btn {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 2px solid var(--nav-select-border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

.a11y-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.a11y-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #888888;
  display: inline-block;
  flex-shrink: 0;
}

.a11y-swatch--default { background: #ffffff; border-color: #555555; }
.a11y-swatch--bw      { background: #000000; border-color: #ffffff; }
.a11y-swatch--by      { background: #000000; border-color: #ffff00; }
.a11y-swatch--yb      { background: #ffff00; border-color: #000000; }

html { font-size: 17px; scroll-behavior: smooth; color-scheme: light; }
html.fs-lg { font-size: 19px; }
html.fs-xl { font-size: 21px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  line-height: 1.65;
  font-weight: 400;
}

header {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

header h1 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.3rem, 4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.lang-switcher {
  flex-shrink: 0;
}

.lang-switcher select {
  color-scheme: light;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.6rem;
  border: 2px solid var(--header-text);
  border-radius: var(--radius);
  background-color: var(--header-bg);
  color: var(--header-text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

.lang-switcher select:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.lang-switcher select option {
  background: var(--bg);
  color: var(--text);
}

.lang-switcher select option:checked {
  background: #888888;
  color: #fff;
}

main {
  flex: 1;
  padding: 2rem 1.5rem 3rem;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}

main:focus { outline: none; }

.page-badge {
  display: inline-block;
  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: 20px;
  padding: 0.15rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.page-subtitle {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.85rem;
  margin-bottom: 1.6rem;
}

.video-box {
  margin: 1.25rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}

.video-box video {
  width: 100%;
  display: block;
}

#page-content h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin: 1.8rem 0 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

#page-content h3 {
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.2rem 0 0.4rem;
  color: var(--text);
  letter-spacing: 0.01em;
}

#page-content p {
  margin-bottom: 1rem;
  color: var(--text);
}

#page-content ul,
#page-content ol {
  margin: 0.5rem 0 1rem 1.5rem;
}

#page-content li {
  margin-bottom: 0.3rem;
}

#page-content p.info-line {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: -0.3rem;
  margin-bottom: 1.2rem;
}

#page-content .dzial-badge {
  display: inline-block;
  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: 20px;
  padding: 0.15rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 1.8rem 0 0.6rem;
}

#page-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#page-content a:visited {
  color: var(--accent-dk);
}

#page-content a:hover,
#page-content a:focus {
  color: var(--accent-dk);
  text-decoration-thickness: 2px;
}

.info-box {
  background: var(--surface);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.pill {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 20px;
  padding: 0.1rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
}

footer {
  padding: 1rem 1.5rem;
  background: var(--surface);
  border-top: 2px solid var(--border);
}

.footer-nav {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 860px;
  margin: 0 auto;
}

.btn {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius);
  border: 2px solid var(--accent);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.btn-outline {
  background: var(--bg);
  color: var(--accent);
}

.btn-outline:hover,
.btn-outline:focus {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-accent:hover,
.btn-accent:focus {
  background: var(--accent-dk);
}

#btn-subscribe,
#btn-subscribe:hover,
#btn-subscribe:focus {
  background: var(--btn-subscribe-bg);
  color: #fff;
  border-color: var(--btn-subscribe-bg);
  text-transform: none;
  letter-spacing: 0.02em;
}

#btn-unsubscribe,
#btn-unsubscribe:hover,
#btn-unsubscribe:focus {
  background: var(--btn-unsubscribe-bg);
  color: #fff;
  border-color: var(--btn-unsubscribe-bg);
  text-transform: none;
  letter-spacing: 0.02em;
}

#btn-submit,
#btn-submit:hover,
#btn-submit:focus {
  background: var(--btn-submit-bg);
  color: #000;
  border-color: var(--btn-submit-bg);
  text-transform: none;
  letter-spacing: 0.02em;
}

.btn:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

#btn-download { display: none !important; }
#btn-download,
#btn-download:hover,
#btn-download:focus {
  background: var(--btn-download-bg);
  color: #000;
  border-color: var(--btn-download-bg);
  text-transform: none;
  letter-spacing: 0.02em;
}

#btn-social,
#btn-social:hover,
#btn-social:focus {
  background: var(--btn-social-bg);
  color: #fff;
  border-color: var(--btn-social-bg);
  text-transform: none;
  letter-spacing: 0.02em;
}

.page-nav-select {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.55rem 1rem;
  border-radius: var(--radius);
  border: 2px solid var(--nav-select-border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  flex: 1;
  min-width: 0;
  max-width: 520px;
}

.page-nav-select:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.hashtag-note {
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.75rem;
  line-height: 1.4;
}

[dir="rtl"] .info-box {
  border-left: none;
  border-right: 4px solid var(--accent);
  border-radius: var(--radius) 0 0 var(--radius);
}

[dir="rtl"] .lang-switcher select {
  background-position: left 0.5rem center;
  padding-right: 0.6rem;
  padding-left: 1.6rem;
}

[dir="rtl"] .page-nav-select {
  text-align: right;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  header { padding: 0.75rem 1rem; flex-wrap: wrap; }
  main { padding: 1.5rem 1rem 2.5rem; }
  .footer-nav { gap: 0.5rem; }
  .btn, .page-nav-select { font-size: 0.78rem; padding: 0.5rem 0.9rem; }
  .a11y-toolbar { padding: 0.5rem 0.75rem; gap: 0.4rem 0.75rem; }
}