/* D brand (Hanga): black and lime. The fonts are self-hosted (Hanga's manual, 3. Betűk; SIL OFL 1.1, fonts/OFL-*.txt; from
   @fontsource 5.3.0): the page still loads nothing from other servers (privacy notice). Titles and buttons Archivo Black,
   everything else Space Grotesk 400/700. */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/archivo-black-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/archivo-black-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/space-grotesk-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/space-grotesk-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/space-grotesk-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/space-grotesk-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root { --ink: #111111; --lime: #D7FF3A; --paper: #F2F2F2; --graphite: #2A2A2A; --stone: #8A8A8A; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 17px/1.5 "Space Grotesk", system-ui, sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 16px; }
header { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 14px; border-bottom: 2px solid var(--lime); }
.brand { display: block; line-height: 0; color: var(--paper); text-decoration: none; }
.brand img { display: block; height: 29px; width: auto; }
h1, h2, .btn, .call { font-family: "Archivo Black", system-ui, sans-serif; font-weight: 400; }
.lang a { color: var(--stone); font-weight: 700; text-decoration: none; padding: 8px; }
.lang a.on { color: var(--lime); }
h1 { font-size: 32px; line-height: 1.15; margin: 28px 0 10px; }
h2 { font-size: 22px; margin: 32px 0 8px; color: var(--lime); }
p, li { margin: 6px 0; }
h1, h2, p, li, .btn { overflow-wrap: break-word; } /* a long word or number never pushes the page wider than a phone */
img { max-width: 100%; height: auto; }
ol, ul { padding-left: 22px; }
a { color: var(--lime); }
.btn { display: block; text-align: center; min-height: 56px; padding: 15px 12px; line-height: 1.3; border-radius: 14px; background: var(--lime); color: var(--ink);
  font-weight: 800; font-size: 19px; text-decoration: none; margin: 18px 0 6px; }
.note { background: var(--graphite); border-radius: 14px; padding: 14px 16px; margin: 16px 0; }
.muted { color: var(--stone); }
footer { margin: 40px 0 12px; padding-top: 14px; border-top: 1px solid var(--graphite); color: var(--stone); font-size: 14px; }
footer a { color: var(--stone); }

/* the whole site (build.py): header with the call button and the menu, footer, tables, the product data */
header.top { display: block; max-width: 680px; margin: 0 auto; padding: 10px 16px 0; border-bottom: 0; }
header.top .bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
header.top .brand { margin-right: auto; }
.call { display: inline-block; background: var(--lime); color: var(--ink); font-weight: 800; text-decoration: none; border-radius: 999px;
  padding: 9px 14px; font-size: 15px; white-space: nowrap; }
nav { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 8px 0 10px; border-bottom: 2px solid var(--lime); }
nav a { color: var(--paper); text-decoration: none; font-weight: 600; padding: 6px 0; }
nav a.on { color: var(--lime); }
main h1:first-child { margin-top: 22px; }
.btn.secondary { background: transparent; color: var(--lime); border: 2px solid var(--lime); }
.btns { display: grid; gap: 10px; margin: 18px 0 6px; }
.btns .btn { margin: 0; }
footer.site { max-width: 680px; margin: 40px auto 0; padding: 16px 16px 28px; border-top: 1px solid var(--graphite); color: var(--stone); font-size: 14px; }
footer.site p { margin: 4px 0; }
footer.site a { color: var(--stone); }
footer.site b { color: var(--paper); }
.small { font-size: 12px; overflow-wrap: anywhere; }
table.days { width: 100%; border-collapse: collapse; margin: 10px 0; }
table.days th, table.days td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--graphite); vertical-align: top; }
table.days th { color: var(--stone); font-weight: 600; font-size: 14px; }
.price { font-size: 20px; font-weight: 800; color: var(--lime); }
details { background: var(--graphite); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
summary { cursor: pointer; font-weight: 700; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 10px 0 0; }
dl.facts dt { color: var(--stone); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.faq h2 { font-size: 19px; color: var(--paper); margin-top: 26px; }
details.map img { display: block; width: 100%; height: auto; margin-top: 10px; border-radius: 8px; }
ol.shops { padding-left: 30px; }
ol.shops li { margin: 8px 0; }
ol.shops a { white-space: nowrap; margin-left: 4px; }
/* preview only (build.py --preview): what still waits for a decision or data */
mark.todo { background: #FFE14D; color: #111; padding: 0 3px; border-radius: 3px; }
div.todo { outline: 3px dashed #FFE14D; outline-offset: 4px; margin: 14px 0; }
.todo-banner { margin: 0; background: #FFE14D; color: #111; padding: 8px 16px; font-size: 14px; font-weight: 700; text-align: center; }
header.top .bar { flex-wrap: nowrap; }
.lang a { padding: 8px 6px; }
@media (max-width: 440px) { .call .w { display: none; } .call { padding: 8px 11px; font-size: 14px; } nav { gap: 0 12px; font-size: 15px; } .brand img { height: 25px; } }
/* owner 2026-10-19: the home page gets picture material; wide screens get two columns (Hanga's layout, 2515) */
.hero-img { display: none; }
ol.steps { list-style: none; padding: 0; counter-reset: step; }
ol.steps li { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0; }
ol.steps li img { width: 48px; height: 48px; flex: none; }
ul.cards { list-style: none; padding: 0; display: grid; gap: 12px; }
ul.cards li { border: 1px solid var(--graphite); border-radius: 14px; padding: 14px 16px; }
ul.cards li b { font-size: 18px; }
@media (min-width: 1024px) {
  body.home main, body.home header.top, body.home footer.site { max-width: 1080px; }
  body.home main > a.btn.secondary { display: inline-block; width: auto; padding-left: 28px; padding-right: 28px; }
  .hero { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: center; }
  .hero-img { display: block; width: 360px; max-width: 100%; justify-self: end; }
  .hero .btns { grid-template-columns: auto auto; justify-content: start; }
  ol.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  ol.steps li { flex-direction: column; gap: 10px; margin: 0; }
  ol.steps li img { width: 64px; height: 64px; }
  ul.cards { grid-template-columns: repeat(3, 1fr); }
}
/* Levente's map of the delivery area (19 places, the PLACES list) */
.area-map { display: block; width: 100%; max-width: 420px; margin: 12px auto; border-radius: 14px; }
@media (min-width: 1024px) {
  .area { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }
  .area-map { margin: 0; }
}