:root {
  --bg: #fffdf7; --card: #ffffff; --text: #1f2328; --muted: #5d6570; --line: #ece6d6;
  --accent: #e8a317; --link: #1a5fb4; --hu: #2e7d32; --whu: #1565c0; --world: #8e44ad;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a; --card: #1e2125; --text: #ece9e4; --muted: #a0a6ad; --line: #2c3036;
    --link: #8ab4f8; --hu: #66bb6a; --whu: #64b5f6; --world: #ce93d8; --shadow: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
a { color: var(--link); }
.muted { color: var(--muted); }

/* header */
.top { border-bottom: 1px solid var(--line); padding: 18px 0 10px; margin-bottom: 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { display: block; line-height: 0; }
.logo { height: 56px; width: auto; }
.logo .lk { fill: var(--text); }
.logo .lm { fill: var(--muted); }
.logo .ly { fill: var(--accent); }
.logo .le { stroke: #1f2328; }
.logo .ls { stroke: var(--text); }
.lang { font-weight: 600; text-decoration: none; border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; color: var(--text); }
.lang:hover { border-color: var(--accent); }
.tagline { margin: 4px 0 10px; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: 18px; font-weight: 600; }
nav a { color: var(--text); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
nav a:hover, nav a[aria-current] { border-color: var(--accent); }
.modes { display: flex; align-items: center; gap: 4px; font-size: .85rem; }
.modes span { color: var(--muted); margin-right: 4px; }
.modes a { padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.modes a.on { background: var(--accent); border-color: var(--accent); color: #1f2328; font-weight: 700; }

/* sections + cards */
.sec { margin: 28px 0 36px; }
.sec h2 { font-size: 1.35rem; margin: 0 0 14px; padding-left: 12px; border-left: 4px solid var(--accent); }
.sec-hungary h2 { border-color: var(--hu); }
.sec-world_hungary h2 { border-color: var(--whu); }
.sec-world h2 { border-color: var(--world); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card h3 { font-size: 1.05rem; line-height: 1.35; margin: 0 0 6px; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { color: var(--link); text-decoration: underline; }
.card p { margin: 0 0 10px; color: var(--muted); font-size: .95rem; flex: 1; }
.meta { font-size: .82rem; color: var(--muted); }
.src { font-weight: 600; }
.pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; color: #fff; }
.pill-hungary { background: var(--hu); }
.pill-world_hungary { background: var(--whu); }
.pill-world { background: var(--world); }
@media (prefers-color-scheme: dark) { .pill { color: #15171a; } }
.empty { color: var(--muted); font-style: italic; }

/* text pages */
.prose { max-width: 760px; }
.prose h3 { margin: 22px 0 6px; font-size: 1.05rem; }
.prose p, .prose li { overflow-wrap: anywhere; }
.cols { columns: 2 220px; padding-left: 18px; }
.whois { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow-x: auto; font-size: .82rem; white-space: pre-wrap; }

/* first-visit dialog */
dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); max-width: 520px; width: calc(100% - 32px); padding: 22px; }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h2 { margin: 0 0 6px; font-size: 1.2rem; }
.choices { display: grid; gap: 10px; margin: 14px 0; }
.choice { display: block; border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--text); }
.choice:hover, .choice:focus { border-color: var(--accent); }
.choice strong { display: block; font-size: 1.05rem; }
.choice span { color: var(--muted); font-size: .9rem; }
.note { font-size: .8rem; color: var(--muted); margin: 0; }

.foot { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 12px; padding-bottom: 30px; color: var(--muted); font-size: .85rem; }
.foot p { margin: 4px 0; }
@media (max-width: 480px) {
  .logo { height: 44px; }
  .grid { grid-template-columns: 1fr; }
}

/* donate + header actions */
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.donate { font-weight: 700; text-decoration: none; border-radius: 99px; padding: 4px 12px; background: var(--accent); color: #1f2328; border: 1px solid var(--accent); }
.donate:hover { filter: brightness(1.08); }
@media (max-width: 480px) { .donate { font-size: .85rem; padding: 3px 10px; } }

/* support / transparency page */
.lead { font-size: 1.05rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tile strong { display: block; font-size: 1.35rem; }
.tile span { color: var(--muted); font-size: .85rem; }
.donate.big { display: inline-block; font-size: 1.05rem; padding: 8px 18px; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 6px 0 10px; }
.table th, .table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-weight: 600; }
.table .num { text-align: right; white-space: nowrap; }
.prose { overflow-x: auto; }

/* article pictures */
.card .pic { display: block; margin: -14px -16px 10px; border-radius: 12px 12px 0 0; overflow: hidden; background: var(--line); aspect-ratio: 16 / 9; }
.card .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===================================================================== accessibility */
@font-face { font-family: "OpenDyslexic"; src: url("/fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/fonts/OpenDyslexic-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --ctl: #7a828c; }
@media (prefers-color-scheme: dark) { :root { --ctl: #7d858f; } }

/* top bar: skip link + display toggles */
.a11y-bar { background: var(--card); border-bottom: 1px solid var(--line); font-size: .85rem; }
.a11y-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-height: 34px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--text); color: var(--bg); padding: 8px 14px; z-index: 100; border-radius: 0 0 8px 0; font-weight: 700; }
.skip:focus { left: 0; }
.a11y-tools { display: flex; gap: 6px; margin-left: auto; }
.a11y-btn, .motion-toggle { font: inherit; font-size: .85rem; min-height: 28px; padding: 3px 12px; border-radius: 99px;
  border: 1px solid var(--ctl); background: var(--bg); color: var(--text); cursor: pointer; }
.a11y-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.a11y-btn[aria-pressed="true"]::before { content: "✓ "; }

/* visible keyboard focus everywhere */
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
/* control boundaries need 3:1 against the background (WCAG 1.4.11) */
.lang, .modes a { border-color: var(--ctl); min-height: 28px; display: inline-flex; align-items: center; }
nav a { min-height: 28px; display: inline-flex; align-items: center; }

/* dyslexia-friendly font */
html[data-font="dyslexic"] body, html[data-font="dyslexic"] button { font-family: "OpenDyslexic", system-ui, sans-serif; }

/* easy-to-read mode: high contrast (7:1+), larger text, underlined links, no decoration */
html[data-a11y="high"] {
  --bg: #ffffff; --card: #ffffff; --text: #000000; --muted: #1a1a1a; --line: #000000; --ctl: #000000;
  --link: #0033b3; --accent: #ffd60a; --hu: #1b5e20; --whu: #0d47a1; --world: #6a1b9a; --shadow: none;
  font-size: 118%;
}
@media (prefers-color-scheme: dark) {
  html[data-a11y="high"] { --bg: #000000; --card: #000000; --text: #ffffff; --muted: #f0f0f0; --line: #ffffff;
    --ctl: #ffffff; --link: #ffe14d; --hu: #a5d6a7; --whu: #90caf9; --world: #e1bee7; }
}
html[data-a11y="high"] body { line-height: 1.75; }
html[data-a11y="high"][data-season] { --accent: #ffd60a; }
html[data-a11y="high"] a { text-decoration: underline; text-underline-offset: 3px; }
html[data-a11y="high"] .card { border-width: 2px; }
html[data-a11y="high"] .card p, html[data-a11y="high"] .meta { color: var(--muted); font-size: 1rem; }
html[data-a11y="high"] .season-banner { display: none; }
html[data-a11y="high"] .card .pic img[src^="/illus/"] { filter: grayscale(1) contrast(1.2); }
/* system "more contrast" request gets the same colours */
@media (prefers-contrast: more) {
  :root { --muted: #2b2f36; --line: #5d6570; --ctl: #1f2328; }
  a { text-decoration: underline; }
}
@media (forced-colors: active) {
  .a11y-btn, .motion-toggle, .lang, .modes a, .donate, .card { border: 1px solid CanvasText; }
}

/* ===================================================================== seasonal banner */
.season-banner { position: relative; overflow: hidden; min-height: 110px;
  background: linear-gradient(120deg, var(--s-bg1, transparent), var(--s-bg2, transparent));
  color: var(--s-ink, var(--text)); border-bottom: 1px solid var(--line); }
.season-banner .scene { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; display: block; }
.season-banner .greet { position: relative; display: flex; align-items: center; gap: 14px; min-height: 110px; padding-top: 10px; padding-bottom: 10px; }
.season-banner .greet p { margin: 0; font-weight: 800; font-size: 1.25rem; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 16px; box-shadow: var(--shadow); }
.season-banner .emblem { width: 64px; height: 64px; flex: none; }
.motion-toggle { position: absolute; right: 12px; bottom: 8px; background: var(--card); }
.particles { position: absolute; inset: 0; pointer-events: none; }
.particles .p { position: absolute; top: -20px; width: 18px; height: 18px; animation-name: jh-fall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes jh-fall {
  0% { transform: translate(0, -10px) rotate(0deg); opacity: 0; }
  10% { opacity: .95; }
  50% { transform: translate(18px, 60px) rotate(160deg); }
  100% { transform: translate(-6px, 130px) rotate(320deg); opacity: 0; }
}
html[data-motion="off"] .particles, html[data-a11y="high"] .particles { display: none; }
@media (prefers-reduced-motion: reduce) {
  .particles { display: none; }
  .motion-toggle { display: none; }
}
@media (max-width: 480px) {
  .season-banner, .season-banner .greet { min-height: 72px; }
  .season-banner .greet p { font-size: 1.05rem; }
  .season-banner .emblem { width: 48px; height: 48px; }
  .motion-toggle { position: static; margin: 0 12px 8px auto; display: block; }
}

/* ===================================================================== buttons: 5px radius, no border
   Without a border, unselected buttons get a soft filled background so they still read as buttons. */
:root { --btn: #ecebe4; --btn-hover: #e2e0d6; }
@media (prefers-color-scheme: dark) { :root { --btn: #2a2e34; --btn-hover: #343941; } }
.donate, .donate.big, .lang, .modes a, .a11y-btn, .motion-toggle, .choice {
  border: 0; border-radius: 5px;
}
.lang, .modes a, .a11y-btn, .motion-toggle, .choice { background: var(--btn); }
.lang:hover, .modes a:hover, .a11y-btn:hover, .motion-toggle:hover, .choice:hover { background: var(--btn-hover); }
.modes a.on { background: var(--accent); }
.a11y-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.choice:hover, .choice:focus { outline: 2px solid var(--accent); outline-offset: 0; }
/* Windows contrast themes hide backgrounds – the system needs a border there to show buttons at all */
@media (forced-colors: active) {
  .donate, .lang, .modes a, .a11y-btn, .motion-toggle, .choice { border: 1px solid ButtonText; }
}

/* ===================================================================== pictures fully visible, inside the card */
.card .pic { margin: 0 0 12px; border-radius: 5px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--btn); }
.card .pic img { width: 100%; height: 100%; object-fit: contain; }
/* our own illustrations are drawn at 16:9 – fill the frame exactly */
.card .pic img[src^="/illus/"] { object-fit: cover; }

/* ===================================================================== news grid: 5 across on desktop, 3 on phones */
.wrap { max-width: 1240px; }
.grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.card { padding: 10px 10px 12px; }
.card h3 { font-size: .95rem; line-height: 1.3; }
.card p { font-size: .85rem; }
.card .pic { margin-bottom: 8px; }
/* photos fill the frame (cropped evenly from the centre); illustrations are already 16:9 */
.card .pic img { object-fit: cover; object-position: center; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 8px 8px 10px; border-radius: 8px; }
  .card .pic { margin-bottom: 6px; border-radius: 4px; }
  .card h3 { font-size: .88rem; line-height: 1.3; margin-bottom: 4px; }
  .card p { font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .card .meta { font-size: .72rem; }
}
/* long Hungarian compound words never overflow the card */
.card h3, .card p, .card .meta { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
/* easy-to-read mode keeps bigger cards */
html[data-a11y="high"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { html[data-a11y="high"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  html[data-a11y="high"] .grid { grid-template-columns: 1fr; }
  html[data-a11y="high"] .card p { display: block; }
  html[data-a11y="high"] .card h3 { font-size: 1rem; }
}

/* donate button with the round "Stop RoboSlavery" stamp */
.donate { display: inline-flex; align-items: center; gap: 7px; }
.donate .stamp-ico { width: 22px; height: 22px; flex: none; }
.donate.big .stamp-ico { width: 26px; height: 26px; }
.stamp-big { float: right; width: 150px; height: 150px; margin: 0 0 10px 16px; }
@media (max-width: 600px) {
  .stamp-big { width: 104px; height: 104px; }
  .donate { font-size: .8rem; line-height: 1.25; }
}

/* ===================================================================== call-to-action (support) button
   Its own colour, used nowhere else and independent of the seasonal accent, so it always stands out.
   Light: white on #1d4ed8 (6.7:1). Dark: #0b1220 on #60a5fa (≈ 7.6:1). */
:root { --cta: #1d4ed8; --cta-ink: #ffffff; --cta-hover: #1e40af; }
@media (prefers-color-scheme: dark) { :root { --cta: #60a5fa; --cta-ink: #0b1220; --cta-hover: #93c5fd; } }
html[data-a11y="high"] { --cta: #0033b3; --cta-ink: #ffffff; --cta-hover: #002080; }
.donate, .donate.big { background: var(--cta); color: var(--cta-ink); font-weight: 800;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 3px 10px rgba(29,78,216,.25); }
.donate:hover, .donate:focus-visible { background: var(--cta-hover); color: var(--cta-ink); filter: none; }

/* support button text always on two lines */
.donate-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.donate { padding: 6px 12px; }

/* ===================================================================== helpers, share, archive filters */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card { position: relative; }
.share { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 5px; background: rgba(255,255,255,.92); color: #1f2328; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.share:hover { background: #fff; }
.share.done { background: #1f7a3a; color: #fff; }
@media (max-width: 600px) { .share { top: 12px; right: 12px; width: 28px; height: 28px; } }
.filters { margin: 18px 0 6px; display: grid; gap: 10px; }
.filters input { font: inherit; padding: 10px 12px; border-radius: 5px; border: 1px solid var(--ctl); background: var(--card); color: var(--text); max-width: 520px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: .85rem; min-height: 30px; padding: 4px 12px; border: 0; border-radius: 5px; background: var(--btn); color: var(--text); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.card[hidden], .sec.filtered-out { display: none; }

/* nearby news controls */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-head h2 { margin: 0; }
.near { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.county-select { font: inherit; font-size: .9rem; min-height: 32px; padding: 3px 8px; border: 1px solid var(--ctl); border-radius: 5px; background: var(--card); color: var(--text); }
.near-note { font-size: .85rem; color: var(--muted); }
.place { font-weight: 600; }

/* English version on phones: the "Magyar" button sits under the support button */
@media (max-width: 600px) {
  html[lang="en"] .actions { flex-direction: column; align-items: flex-start; }
}

/* !FÉKNYÚZ! */
.modes .fake-link { font-weight: 800; letter-spacing: .02em; color: var(--fake-ink, #b4232f); border: 2px dashed currentColor; background: transparent; }
.modes .fake-link[aria-current="page"] { background: var(--fake-ink, #b4232f); color: #fff; border-style: solid; }
.myth-warn { border-left: 5px solid #b4232f; background: var(--card); border-radius: 5px; padding: 12px 14px; margin: 0 0 16px; line-height: 1.5; }
.myth-warn strong { color: #b4232f; display: block; margin-bottom: 2px; }
.myth-sort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.myth-sort span { color: var(--muted); font-size: .9rem; }
.card.myth .pic { position: relative; }
.myth-stamp { position: absolute; right: 8px; bottom: 8px; transform: rotate(-8deg); font-weight: 900; font-size: .8rem; letter-spacing: .04em;
  color: #b4232f; background: rgba(255, 255, 255, .88); border: 2px solid #b4232f; border-radius: 5px; padding: 1px 6px; }
.card.myth .claim, .card.myth .truth { margin: 6px 0; }
.card.myth .truth { border-top: 1px dashed var(--line); padding-top: 6px; }
.card.myth .truth strong { color: var(--accent-ink, inherit); }
@media (prefers-color-scheme: dark) {
  :root { --fake-ink: #ff8a93; }
  .modes .fake-link[aria-current="page"] { color: #15171a; }
  .myth-warn { border-left-color: #ff8a93; }
  .myth-warn strong { color: #ff8a93; }
  .myth-stamp { color: #ff8a93; border-color: #ff8a93; background: rgba(21, 23, 26, .88); }
}

/* !FÉKNYÚZ! on phones: one card per row and the whole text visible (the theory and the truth must both be readable) */
@media (max-width: 600px) {
  .myths .grid { grid-template-columns: 1fr; gap: 14px; }
  .card.myth { padding: 12px 12px 14px; }
  .card.myth h3 { font-size: 1.05rem; }
  .card.myth p { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: .95rem; line-height: 1.5; }
  .card.myth .meta { font-size: .8rem; }
  .card.myth .pic { aspect-ratio: 5 / 2; }
}
/* the theory and the truth are the content here, so full-strength text (not the muted summary colour) */
.card.myth .claim, .card.myth .truth { color: var(--text); }
.card.myth .claim strong { color: var(--fake-ink, #b4232f); }
.card.myth .truth strong { color: var(--text); }

/* seasonal animation: a see-through, season-shaped icon button (fully visible when touched or focused) */
.motion-toggle { width: 48px; height: 48px; min-height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; opacity: var(--motion-opacity, .75); cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; background: transparent; }
.motion-toggle:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.motion-toggle svg { display: block; width: 42px; height: 42px; }   /* 95% of the original 44px */
.motion-toggle .mt-play, html[data-motion="off"] .motion-toggle .mt-pause { display: none; }
html[data-motion="off"] .motion-toggle .mt-play { display: inline; }
@media (max-width: 480px) { .motion-toggle { position: absolute; right: 10px; bottom: 6px; margin: 0; display: inline-flex; } }

/* the "Tartalom:" row wraps instead of pushing the page sideways (wide fonts, small phones) */
.modes { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }
nav { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; max-width: 100%; }
/* OpenDyslexic is much wider than the normal font: slightly smaller text on phones keeps lines readable */
@media (max-width: 600px) {
  html[data-font="dyslexic"] body { font-size: 92%; }
  html[data-font="dyslexic"] .donate-txt { font-size: .75rem; }
}
/* last safety net: nothing may ever make the page scroll sideways */
html, body { overflow-x: clip; }
/* dyslexia font on phones: "Tartalom:" on its own line, the three buttons together below it */
@media (max-width: 600px) {
  html[data-font="dyslexic"] .modes { flex-wrap: wrap; gap: 6px 5px; }
  html[data-font="dyslexic"] .modes span { flex-basis: 100%; }
  html[data-font="dyslexic"] .modes a { font-size: .74rem; padding: 3px 7px; }
}

/* ---------------------------------------------------------------- phones & tablets (2026-11-06)
   Goal: on every common phone the first news is visible on the first screen, every control is
   at least 24×24 px to tap (WCAG 2.5.8), and no text is smaller than 12 px. */

/* minimum readable size for small print */
.pill, .card .meta, .card.myth .meta { font-size: max(.75rem, 12px); }
@media (max-width: 600px) {
  .card .meta { font-size: max(.75rem, 12px); }
  html[data-font="dyslexic"] .modes a { font-size: max(.75rem, 12px); }
}

/* bigger tap targets: card titles and source links */
.card h3 a { display: block; min-height: 24px; }
.card .meta a { display: inline-block; padding: 4px 0; margin: -4px 0; }

/* phones: a compact header */
@media (max-width: 600px) {
  .top { padding: 10px 0 6px; margin-bottom: 4px; }
  .top .row { gap: 8px; }
  .logo { height: 40px; }
  .tagline { margin: 2px 0 6px; font-size: .9rem; }
  .actions { gap: 6px; }
  .donate { padding: 5px 10px; }
  .lang { padding: 3px 10px; }
  nav a { padding-top: 2px; padding-bottom: 2px; }
  .season-banner, .season-banner .greet { min-height: 56px; }
  /* "Tartalom:" + the three buttons fit on one line on most phones */
  .modes { font-size: .8rem; gap: 4px; }
  .modes span { margin-right: 2px; }
  .modes a { padding: 3px 8px; }
}
/* very narrow phones (iPhone SE, Galaxy S9+ …): the support button and the language switch share one row */
@media (max-width: 380px) {
  .logo { height: 34px; }
  .donate { font-size: 12px; gap: 6px; padding: 4px 8px; }
  .donate .stamp-ico { width: 18px; height: 18px; }
  .tagline { font-size: .85rem; }
  .modes { font-size: .8rem; }
  .modes a { padding: 3px 8px; }
}
/* phones held sideways (short screens): slim banner and header */
@media (max-height: 500px) and (orientation: landscape) {
  .top { padding: 6px 0 4px; }
  .logo { height: 34px; }
  .tagline { display: none; }
  .season-banner, .season-banner .greet { min-height: 44px; }
  .a11y-bar { padding-top: 2px; padding-bottom: 2px; }
}

/* ---------------------------------------------------------------- "Jól olvasható" header on phones (2026-11-06)
   The mode enlarges all text by 18%, which pushed "English" and "!FÉKNYÚZ!" onto their own lines.
   Keep the header controls the same size as in the other modes; the news text stays enlarged. */
@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  html[data-a11y="high"] .top .actions, html[data-a11y="high"] .top nav,
  html[data-a11y="high"] .top .modes, html[data-a11y="high"] .top .tagline,
  html[data-a11y="high"] .a11y-bar .wrap { zoom: calc(1 / 1.18); }
  html[data-a11y="high"] .a11y-btn { min-height: 34px; }
  html[data-a11y="high"] .top .modes a, html[data-a11y="high"] .top .lang { min-height: 34px; }
  html[data-a11y="high"] .top nav a { min-height: 29px; display: inline-flex; align-items: center; }
}
@media (max-width: 380px) {
  html[data-a11y="high"] .donate { font-size: 14.2px; }
}

/* ---------------------------------------------------------------- all views (2026-11-06)
   Dyslexia-friendly font on phones: the three content buttons fit on one line under "Tartalom:"
   from 360px up (narrower: they wrap, text never goes below 12px).
   Long words in section titles break instead of running off the screen. */
@media (max-width: 600px) {
  html[data-font="dyslexic"] .modes { column-gap: 4px; }
  html[data-font="dyslexic"] .modes a { padding: 3px 4px; }
}
main h2, main h3 { overflow-wrap: break-word; hyphens: auto; }
/* dyslexia font on phones: the two switches above the logo keep their label on one line */
@media (max-width: 600px) {
  html[data-font="dyslexic"] .a11y-btn { white-space: nowrap; }
  html[data-font="dyslexic"] .a11y-tools { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
}

/* ---------------------------------------------------------------- thank-you page after a donation (2026-11-10) */
.thanks h2 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: .2em; }
.thanks .saying { margin: 1.2em 0; padding: 14px 18px; border-left: 4px solid var(--accent); background: var(--card);
  border-radius: 0 12px 12px 0; }
.thanks .saying blockquote { margin: 0; }
.thanks .saying p { margin: 0; font-size: 1.15rem; font-style: italic; }
.thanks-words { list-style: none; padding: 0; margin: .6em 0 1.4em; display: flex; flex-wrap: wrap; gap: 8px; }
.thanks-words li { padding: 4px 12px; border-radius: 99px; background: var(--btn, var(--card)); border: 1px solid var(--line);
  font-size: 1.05rem; line-height: 1.6; }
.thanks-words li:nth-child(5n+1) { font-size: 1.25rem; }
.thanks-words li:nth-child(7n+3) { font-weight: 700; }
.thanks-words li { cursor: pointer; }
.thanks-words li.show::after { content: " · " attr(title); font-size: .8em; color: var(--muted); }

/* ---------------------------------------------------------------- seasonal support button with robot animals (2026-11-10)
   Colour follows the season (never the same as the season's accent, so it still stands out);
   text contrast measured: light ≥ 5.1:1, dark ≥ 8.3:1. "Jól olvasható" keeps the high-contrast blue. */
html[data-season="autumn"] { --cta: #9a3412; --cta-ink: #ffffff; --cta-hover: #7c2d12; }
html[data-season="winter"] { --cta: #1e5a8a; --cta-ink: #ffffff; --cta-hover: #174a73; }
html[data-season="spring"] { --cta: #2e7d32; --cta-ink: #ffffff; --cta-hover: #256628; }
html[data-season="summer"] { --cta: #f5c518; --cta-ink: #1f2328; --cta-hover: #e6b400; }
@media (prefers-color-scheme: dark) {
  html[data-season="autumn"] { --cta: #fb923c; --cta-ink: #1a0e05; --cta-hover: #fdba74; }
  html[data-season="winter"] { --cta: #7dd3fc; --cta-ink: #0b1220; --cta-hover: #bae6fd; }
  html[data-season="spring"] { --cta: #86efac; --cta-ink: #052e16; --cta-hover: #bbf7d0; }
  html[data-season="summer"] { --cta: #fde047; --cta-ink: #1f2328; --cta-hover: #fef08a; }
}
html[data-a11y="high"][data-season] { --cta: #0033b3; --cta-ink: #ffffff; --cta-hover: #002080; }
.donate, .donate.big { box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.18); }

/* wider: about 1.5× on larger screens, the full width on phones */
.donate { min-width: 22rem; justify-content: center; gap: 9px; padding: 7px 18px; }
.donate.big { display: inline-flex; min-width: 24rem; }
.donate .robot-pet { width: 30px; height: 30px; flex: none; }
@media (max-width: 600px) {
  .actions { flex-wrap: wrap; }
  .top .donate { flex: 1 1 100%; min-width: 0; padding: 7px 12px; }
  .donate.big { min-width: 0; width: 100%; }
}
@media (max-width: 380px) { .donate .robot-pet { width: 24px; height: 24px; } }

/* the robot waves and blinks – only when motion is allowed */
.robot-pet .rp-wave { transform-box: fill-box; transform-origin: 20% 80%; }
.robot-pet .rp-eye { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .robot-pet .rp-wave { animation: rp-wave 2.8s ease-in-out infinite; }
  html:not([data-motion="off"]) .robot-pet .rp-eye { animation: rp-blink 4.5s infinite; }
}
@keyframes rp-wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-14deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-8deg); } }
@keyframes rp-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
/* Support page: the button sits right under the introduction, across the full width */
.donate-row { clear: both; }
.donate-row .donate.big { display: flex; width: 100%; min-width: 0; justify-content: center; padding: 12px 18px; font-size: 1.15rem; }
/* robot animal: no stamp next to it any more; a ring in the button's text colour, a little larger */
.donate .robot-pet { width: 38px; height: 38px; border-radius: 50%; overflow: visible;
  box-shadow: 0 0 0 2px var(--cta-ink), 0 0 0 4px color-mix(in srgb, var(--cta) 70%, #000 30%); background: #fff; margin: -2px 2px -2px 0; }
.donate.big .robot-pet { width: 44px; height: 44px; }
@media (max-width: 380px) { .donate .robot-pet { width: 30px; height: 30px; } }

/* ---------------------------------------------------------------- clock with date in the seasonal banner (2026-11-10)
   Centred on the landscape, in the season's own colours so it blends in; not shown when JavaScript is off. */
.banner-clock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 3px 14px 4px; border-radius: 14px;
  color: var(--s-ink, var(--text)); background: color-mix(in srgb, var(--s-bg1, var(--card)) 62%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--s-bg1, var(--card)) 80%, transparent); pointer-events: none;
  font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.banner-clock[hidden] { display: none; }
.banner-clock .bc-time { font-size: 1.45rem; font-weight: 800; letter-spacing: .02em; }
.banner-clock .bc-date { font-size: .8rem; font-weight: 600; opacity: .9; }
html[data-season="winter"] .banner-clock { box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-ink) 18%, transparent); }
@media (max-width: 600px) {
  .banner-clock .bc-time { font-size: 1.15rem; }
  .banner-clock .bc-date { font-size: max(.72rem, 12px); }
  .season-banner.has-greet .banner-clock { display: none; }   /* holiday greeting needs the room on phones */
}
@media (max-height: 500px) and (orientation: landscape) { .banner-clock .bc-date { display: none; } }
/* robot animal and text: a little more room between them, the pair centred in the button */
.donate, .donate.big, .donate-row .donate.big { display: inline-flex; justify-content: center; align-items: center; gap: 16px; }
.donate-row .donate.big { display: flex; }
.donate .robot-pet { margin: -2px 0; }
@media (max-width: 600px) { .top .donate { display: flex; } }

/* !FÉKNYÚZ! video link (no embedded player) */
.card.myth .watch { margin: .2em 0 .6em; }
.watch-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 99px;
  background: var(--btn, var(--card)); border: 1px solid var(--ctl, var(--line)); color: var(--text); font-weight: 700; text-decoration: none; }
.watch-btn:hover { background: var(--btn-hover, var(--card)); }

/* ---------------------------------------------------------------- weather effect in the season banner (2026-11-12)
   Decorative only. Moves only when motion is allowed; otherwise a still picture.
   The storm flash is off unless the visitor turns on "Villódzó effektek" (slow, max. one flash per 7 s). */
.wx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.season-banner[data-wx="rain"] .particles, .season-banner[data-wx="drizzle"] .particles,
.season-banner[data-wx="storm"] .particles, .season-banner[data-wx="hail"] .particles,
.season-banner[data-wx="snow"] .particles { display: none; }
.wx-clouds { position: absolute; inset: 0 0 auto 0; height: 60%; display: flex; justify-content: space-around; }
.wx-clouds .cl { width: 22%; max-width: 180px; height: auto; margin-top: -2%; fill: #ffffff; opacity: .75; }
.wx-rain .cl, .wx-drizzle .cl, .wx-storm .cl, .wx-hail .cl { fill: #8a96a3; opacity: .7; }
.wx-storm .cl { fill: #5f6b78; opacity: .85; }
.wx-rain, .wx-storm, .wx-hail { background: linear-gradient(rgba(70, 85, 100, .18), transparent); }
.wx-drops i { position: absolute; display: block; animation: wx-fall linear infinite; }
.wx-rain .wx-drops i, .wx-storm .wx-drops i { width: 2px; height: 14px; border-radius: 2px; background: rgba(70, 120, 170, .55); }
.wx-drizzle .wx-drops i { width: 1.5px; height: 8px; border-radius: 2px; background: rgba(70, 120, 170, .45); animation-name: wx-drizzle; }
.wx-hail .wx-drops i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 1px rgba(90, 110, 130, .5); animation-name: wx-hail; }
.wx-snow .wx-drops i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 2px rgba(90, 120, 150, .6); animation-name: wx-snow; animation-duration: 6s !important; }
.wx-fog i { position: absolute; left: -20%; width: 140%; height: 40%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%); }
.wx-fog i:nth-child(1) { top: 35%; } .wx-fog i:nth-child(2) { top: 60%; }
.wx-flash { position: absolute; inset: 0; background: #ffffff; opacity: 0; }
@keyframes wx-fall { from { transform: translate(0, -40px) rotate(12deg); } to { transform: translate(-10px, 140px) rotate(12deg); } }
@keyframes wx-drizzle { from { transform: translate(0, -30px) rotate(8deg); } to { transform: translate(-6px, 140px) rotate(8deg); } }
@keyframes wx-hail { 0% { transform: translateY(-30px); } 80% { transform: translateY(105px); } 90% { transform: translateY(92px); } 100% { transform: translateY(108px); } }
@keyframes wx-snow { 0% { transform: translate(0, -20px); } 50% { transform: translate(12px, 50px); } 100% { transform: translate(-6px, 130px); } }
@keyframes wx-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes wx-flash { 0%, 92%, 100% { opacity: 0; } 94% { opacity: .55; } 96% { opacity: .1; } 97% { opacity: .4; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .wx-clouds, html:not([data-motion="off"]) .wx-fog i { animation: wx-drift 18s ease-in-out infinite alternate; }
  html[data-flash="on"]:not([data-motion="off"]) .wx-flash { animation: wx-flash 7s infinite; }
}
/* still picture: no movement, drops simply where they are */
html[data-motion="off"] .wx-drops i { animation: none; }
@media (prefers-reduced-motion: reduce) { .wx-drops i { animation: none; } }
html[data-a11y="high"] .wx { display: none; }
/* winter holiday emblems: fireworks bloom slowly (no flashing) */
.emblem.fw g { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .emblem.fw .fw1 { animation: fw-bloom 4s ease-in-out infinite; }
  html:not([data-motion="off"]) .emblem.fw .fw2 { animation: fw-bloom 4s ease-in-out -1.3s infinite; }
  html:not([data-motion="off"]) .emblem.fw .fw3 { animation: fw-bloom 4s ease-in-out -2.6s infinite; }
}
@keyframes fw-bloom { 0%, 100% { transform: scale(.75); opacity: .7; } 50% { transform: scale(1.05); opacity: 1; } }
/* holiday greeting on the left: the clock moves to the right third so they never overlap */
@media (min-width: 601px) { .season-banner.has-greet .banner-clock { left: 74%; } }
/* phones: the greeting never runs under the pause/play button */
@media (max-width: 600px) { .season-banner .greet { padding-right: 64px; } .season-banner .greet p { font-size: 1rem; padding: 6px 12px; } }
/* dark mode: a more solid clock background, so light text stays readable over white snow */
@media (prefers-color-scheme: dark) { .banner-clock { background: color-mix(in srgb, var(--s-bg1, var(--card)) 88%, transparent); } }

/* clouds (2026-11-12): six clouds of different sizes and heights, each drifting across at its own
   speed and from its own starting point, so the sky never moves in step. Still picture without motion. */
.wx-clouds { display: block; height: 100%; inset: 0; }
.wx-clouds .cl { position: absolute; margin: 0; max-width: none; }
.wx-clouds .cl:nth-child(1) { width: 16%; top: 14%; left: 4%;  opacity: .80; }
.wx-clouds .cl:nth-child(2) { width: 11%; top: 32%; left: 27%; opacity: .60; }
.wx-clouds .cl:nth-child(3) { width: 19%; top: 8%;  left: 46%; opacity: .75; }
.wx-clouds .cl:nth-child(4) { width: 9%;  top: 38%; left: 66%; opacity: .55; }
.wx-clouds .cl:nth-child(5) { width: 14%; top: 18%; left: 80%; opacity: .70; }
.wx-clouds .cl:nth-child(6) { width: 8%;  top: 26%; left: 94%; opacity: .50; }
@media (max-width: 600px) { .wx-clouds .cl { min-width: 70px; } .wx-clouds .cl:nth-child(n+5) { display: none; } }
@keyframes wx-cloud { from { transform: translateX(0); } to { transform: translateX(var(--wx-go, 40vw)); } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .wx-clouds { animation: none; }
  html:not([data-motion="off"]) .wx-clouds .cl { animation: wx-cloud linear infinite alternate; }
  html:not([data-motion="off"]) .wx-clouds .cl:nth-child(1) { animation-duration: 71s; animation-delay: -12s; --wx-go: 34vw; }
  html:not([data-motion="off"]) .wx-clouds .cl:nth-child(2) { animation-duration: 97s; animation-delay: -55s; --wx-go: -22vw; }
  html:not([data-motion="off"]) .wx-clouds .cl:nth-child(3) { animation-duration: 58s; animation-delay: -31s; --wx-go: 26vw; }
  html:not([data-motion="off"]) .wx-clouds .cl:nth-child(4) { animation-duration: 113s; animation-delay: -80s; --wx-go: -30vw; }
  html:not([data-motion="off"]) .wx-clouds .cl:nth-child(5) { animation-duration: 84s; animation-delay: -6s; --wx-go: -40vw; }
  html:not([data-motion="off"]) .wx-clouds .cl:nth-child(6) { animation-duration: 66s; animation-delay: -44s; --wx-go: -48vw; }
}
/* sizes/heights tuned: smaller clouds in the upper half of the sky, never sitting on the hills */
.wx-clouds .cl:nth-child(1) { width: 10%; top: 6%; }
.wx-clouds .cl:nth-child(2) { width: 7%;  top: 20%; }
.wx-clouds .cl:nth-child(3) { width: 12%; top: 2%; }
.wx-clouds .cl:nth-child(4) { width: 6%;  top: 24%; }
.wx-clouds .cl:nth-child(5) { width: 9%;  top: 10%; }
.wx-clouds .cl:nth-child(6) { width: 6%;  top: 16%; }
@media (max-width: 600px) { .wx-clouds .cl { min-width: 46px; } .wx-clouds .cl:nth-child(3) { min-width: 64px; } }