/* maturazai.pl — universal light/dark theme + toggle button.
   Used by index.html and all subject subpages. */

/* Note: targeting `html[data-theme="light"]` (not bare `[data-theme="light"]`)
   to outrank the per-page inline `:root { --bg: #0b0d10 ... }` blocks that each
   subject page hardcodes. Specificity 0,1,1 > 0,1,0. */
html[data-theme="light"] {
  --bg: #ffffff;
  --bg-soft: #f5f7fa;
  --bg-soft2: #e9edf3;
  --fg: #0b0d10;
  --fg-mute: #5a6573;
  --border: #d8dde4;
  --header-bg: rgba(255, 255, 255, 0.92);
  --bg-cke: #ffffff;
  --fg-cke: #0b0d10;
}
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body { transition: background-color 0.18s ease, color 0.18s ease; }

/* Light-theme tweaks for reused patterns (bg-soft cards, klucz boxes) */
html[data-theme="light"] .klucz-cke { background: rgba(239, 108, 0, 0.08); }
html[data-theme="light"] .odpowiedz-ai { background: rgba(0, 131, 143, 0.05); }

.theme-toggle {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--fg-mute);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  padding: 0;
  flex-shrink: 0;
  font-family: inherit;
}
.theme-toggle:hover {
  color: var(--fg);
  border-color: var(--accent, #4dd0e1);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent, #4dd0e1);
  outline-offset: 2px;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Floating variant — fixed in top-right, used on subject subpages
   that don't have a flex nav slot for the button. */
.theme-toggle.is-fixed {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25);
}
html[data-theme="light"] .theme-toggle.is-fixed {
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.12);
}

/* In-header variant — sits in the top-right corner of the page <header>,
   scrolls away with the rest of the header. Required: the host page's
   <header> needs to be a positioning context. */
header { position: relative; }
.theme-toggle.is-header {
  position: absolute;
  top: 1.2rem;
  /* Align with the right edge of the centred 1100px content container
     on big screens; on small screens stick to the viewport with 1.5rem. */
  right: max(1.5rem, calc((100vw - 1100px) / 2 + 1.5rem));
  z-index: 11;
}
@media (max-width: 600px) {
  .theme-toggle.is-header {
    top: 1rem;
    right: 1rem;
    width: 34px;
    height: 34px;
  }
  .theme-toggle.is-header svg { width: 16px; height: 16px; }
}

/* ======================================================================
   Universal site footer — used on every page (index + subject subpages).
   Drop this HTML where the page-specific footer used to be:

   <footer class="site-footer">
     <p class="site-footer-brand"><strong>maturazai.pl</strong> — Wszystkie arkusze CKE rozwiązane przez AI.</p>
     <p class="site-footer-disclaimer">
       Projekt niezależny, niepowiązany z Centralną Komisją Egzaminacyjną. Arkusze CKE
       są publicznie dostępne na cke.gov.pl. Rozwiązania generowane przez AI
       (Claude Opus/Sonnet) i porównywane z oficjalnymi kluczami CKE. Treść do celów
       edukacyjnych — przed maturą zawsze sprawdź aktualny klucz na cke.gov.pl.
     </p>
   </footer>
   ====================================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--fg-mute);
  font-size: 0.9rem;
  margin-top: 4rem;
}
.site-footer-brand { margin: 0; }
.site-footer-contact {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
}
.site-footer-contact a {
  color: var(--accent, #4dd0e1);
  text-decoration: none;
  font-weight: 600;
}
.site-footer-contact a:hover { text-decoration: underline; }
.site-footer-coffee {
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}
.site-footer-coffee .coffee-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, #ffca28, #ff9800);
  color: #0b0d10;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.15s, box-shadow 0.15s;
  border: none;
}
.site-footer-coffee .coffee-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -4px rgba(255, 152, 0, 0.5);
  text-decoration: none;
}
.site-footer-coffee .coffee-note {
  color: var(--fg-mute);
  font-size: 0.88rem;
}
.site-footer-disclaimer {
  max-width: 720px;
  margin: 1.6rem auto 0;
  font-size: 0.78rem;
  opacity: 0.7;
  line-height: 1.6;
}

/* ======================================================================
   Poziom (PP / PR) chip — used on matematyka.html and polski.html grids.
   Color-codes the difficulty so users can tell rozszerzony from podstawowy
   at a glance without reading the small print.
   ====================================================================== */
.poziom-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1;
}
.poziom-badge.poziom-podstawowy {
  background: rgba(102, 187, 106, 0.16);
  color: #4caf50;
  border: 1px solid rgba(102, 187, 106, 0.35);
}
.poziom-badge.poziom-rozszerzony {
  background: rgba(255, 152, 0, 0.18);
  color: #ff9800;
  border: 1px solid rgba(255, 152, 0, 0.4);
}
html[data-theme="light"] .poziom-badge.poziom-podstawowy {
  background: rgba(46, 125, 50, 0.12);
  color: #2e7d32;
  border-color: rgba(46, 125, 50, 0.3);
}
html[data-theme="light"] .poziom-badge.poziom-rozszerzony {
  background: rgba(230, 81, 0, 0.12);
  color: #e65100;
  border-color: rgba(230, 81, 0, 0.3);
}

/* Left edge stripe on the card — second visual cue */
.arkusz-card.poziom-podstawowy { border-left: 3px solid #4caf50; }
.arkusz-card.poziom-rozszerzony { border-left: 3px solid #ff9800; }
html[data-theme="light"] .arkusz-card.poziom-podstawowy { border-left-color: #2e7d32; }
html[data-theme="light"] .arkusz-card.poziom-rozszerzony { border-left-color: #e65100; }

/* Top row of card: rok on the left, status + poziom badge on the right */
.arkusz-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.arkusz-card-head .right-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.formula-tag {
  font-size: 0.72rem;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ======================================================================
   CKE PDF download cards — shown on each arkusz page (matma/polski/bio/chem/fiz).
   Renders as a horizontal grid of clickable cards: Arkusz, Klucz, Karta, Strona CKE.
   ====================================================================== */
.cke-files-section {
  margin: 1.2rem 0 2rem;
}
.cke-files-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.cke-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
}
.cke-file-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cke-file-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}
.cke-file-card .ico {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft2);
  border-radius: 8px;
}
.cke-file-card .info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.cke-file-card .info h4 {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cke-file-card .info span {
  font-size: 0.74rem;
  color: var(--accent);
  font-weight: 600;
}
.cke-file-card.is-page .ico {
  background: linear-gradient(135deg, rgba(77,208,225,0.15), rgba(255,202,40,0.08));
}

/* ======================================================================
   Mobile collapsible tab-bar — on small screens the question-number tabs
   (1.1, 1.2, …) take half the viewport, so we hide them behind a toggle
   button. Desktop (≥700px) keeps the bar fully visible.
   ====================================================================== */
.tabs-toggle-btn {
  display: none;
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.65rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.92rem;
  font-family: inherit;
  margin: 0.6rem 0;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 51;
}
.tabs-toggle-btn:hover { border-color: var(--accent, #4dd0e1); }
.tabs-toggle-btn .arrow {
  font-size: 0.8rem;
  transition: transform 0.2s;
  color: var(--accent, #4dd0e1);
}
.tabs-toggle-btn.is-open .arrow { transform: rotate(180deg); }

@media (max-width: 700px) {
  .tabs-toggle-btn { display: flex; }
  .tab-bar.is-collapsible,
  .czesc-bar.is-collapsible {
    position: static !important;
    display: none !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    margin: 0 !important;
  }
  /* When open: pin to viewport just below the toggle button, so it's always
     visible regardless of how far the user has scrolled the page. */
  .tab-bar.is-collapsible.is-open,
  .czesc-bar.is-collapsible.is-open {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 55 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    padding: 0.7rem 0.9rem !important;
    margin: 0 !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.4) !important;
    max-height: calc(100vh - 70px) !important;
    overflow-y: auto !important;
  }
  /* Make question-number tabs hit-friendly on mobile */
  .tab-bar.is-collapsible.is-open .tab,
  .czesc-bar.is-collapsible.is-open .czesc-tab {
    padding: 0.5rem 0.7rem !important;
    font-size: 0.9rem !important;
  }
}

/* Breadcrumb links — neutral, not subject-accent (which can be hard to read) */
.breadcrumb a {
  color: var(--fg-mute) !important;
  text-decoration: none;
  transition: color 0.15s;
}
.breadcrumb a:hover { color: var(--fg) !important; }

/* Logo-styled "maturazai.pl" link — used in every breadcrumb so the brand
   reads consistently with the index page. Colors per logo identity:
   "matura" = main fg, "z" = cyan accent, "ai" = yellow accent, ".pl" = mute. */
.brand-link {
  color: var(--fg) !important;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: opacity 0.15s;
}
.brand-link:hover { opacity: 0.85; text-decoration: none; }
.brand-link .brand-z { color: #4dd0e1; }
.brand-link .brand-ai { color: #ffca28; }
.brand-link .brand-tld { color: var(--fg-mute); font-weight: 700; }
html[data-theme="light"] .brand-link .brand-z { color: #00838f; }
html[data-theme="light"] .brand-link .brand-ai { color: #ef6c00; }