/*
  Shared styles for the secondary static pages (legal, 404).

  index.html deliberately does NOT use this file — its CSS is inlined so the landing page renders
  with zero render-blocking requests. These pages are not on the conversion path and can afford
  one cached stylesheet.
*/
:root{
  --bg:#FAF7F2; --surface:#FFF; --line:#E7E3DC;
  --ink:#12100E; --muted:#6E6862;
  --coral:#EE5A43; --coral-dark:#D94A34; --coral-soft:#FBDDD6;
  --r-md:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:780px;margin:0 auto;padding:0 24px}

/* flex-wrap + margin-left:auto so the link group drops to its own right-aligned row only when
   it genuinely no longer fits beside the wordmark — four items stopped fitting on a 360px
   phone once FAQ joined them, and a squeezed header is worse than a two-line one. */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding:28px 0}
.brand{display:flex;align-items:center;gap:9px;font-size:26px;font-weight:800;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand img{width:28px;height:28px}
.login{font-size:16px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.login:hover{color:var(--coral-dark)}
/* `flex-wrap` on the group itself, not only on .site-head. The header carried four items and
   .site-head's wrap was enough to drop the whole group to a second row; with six — Poradnik, FAQ,
   login, two languages and the CTA — the group is itself wider than a 375px phone, and without this
   it overflowed the viewport by 46px instead of wrapping inside it. */
.head-links{display:flex;align-items:center;gap:16px;margin-left:auto;flex-wrap:wrap;
  justify-content:flex-end;row-gap:10px}
.lang-switch{font-size:16px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lang-switch:hover{color:var(--coral-dark)}

/* Header navigation link — plain text, the quietest thing in the group. The FAQ pill and the
   coral CTA are the two loud items and they are enough; a third emphasised control would leave
   nothing for the eye to land on. */
.nav-link{font-size:16px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.nav-link:hover{color:var(--coral-dark)}

/* The one filled control on the page furniture. It is a signup CTA in the header, so it has to
   outrank the login link beside it without turning the header into a toolbar — hence solid coral
   against everything else being text or a hairline pill. */
.cta-head{
  display:inline-flex;align-items:center;padding:9px 17px;border-radius:10px;
  font-size:15px;font-weight:700;line-height:1.2;
  background:var(--coral);color:#fff;text-decoration:none;white-space:nowrap;
}
.cta-head:hover{background:var(--coral-dark);color:#fff}
.cta-head:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* Six items now sit beside the wordmark where four already wrapped at 360px, so the gap tightens
   before the row breaks rather than after. The existing flex-wrap still does the breaking — a
   two-line header remains better than a squeezed one. */
@media (max-width:820px){ .head-links{gap:12px} }
@media (max-width:520px){ .head-links{gap:10px} .cta-head{padding:8px 13px;font-size:14px} }

/* Hub list (/poradnik). Title and its one-line description as a pair, so the page scans as a set
   of things you might open rather than a column of links. */
.hub-list{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:2px}
.hub-list li{
  margin:0;padding:15px 18px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);display:flex;flex-direction:column;gap:4px;
}
.hub-list li:hover{border-color:var(--coral)}
.hub-list a{font-weight:700;text-decoration:none;color:var(--ink)}
.hub-list li:hover a{color:var(--coral-dark)}
.hub-list span{color:var(--muted);font-size:.93rem;line-height:1.5}

/* FAQ lived in the footer only, i.e. below every page that raises the questions it answers.
   A pill rather than a third underlined word: the header already carries two of those (login,
   language) and one more would have vanished among them. First attempt was a white pill, which
   on the landing page reads as one more card on a page tiled with cards — hence the coral tint
   and the coral rim, loud enough to be found without becoming a second signup CTA. */
.faq-link{
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px;
  font-size:16px;font-weight:700;line-height:1.2;color:var(--ink);text-decoration:none;
  background:var(--coral-soft);border:1px solid var(--coral);border-radius:999px;
}
/* The "?" is CSS rather than markup because it is decoration over a link already named "FAQ" —
   the same three letters in all three locales. Nothing is lost if it never renders. */
.faq-link::before{
  content:"?";display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--coral);color:#fff;font-size:13px;font-weight:800;
}
/* Deeper tint, not a coral fill: white-on-coral measures 3.4:1 and the label is 16px bold, which
   WCAG still counts as normal text. The label stays ink in every state for that reason — and it has
   to be restated here, or site.css's blanket `a:hover{color:var(--coral)}` turns it coral on the
   tinted fill, which measures 2.3:1. */
.faq-link:hover{background:#F7CBC0;border-color:var(--coral-dark);color:var(--ink)}
.faq-link:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* On /faq itself: outlined instead of filled — you are already there, so it marks a position
   rather than offering a trip. The coral rim stays (dropping to --line put the pill's own outline
   at 1.2:1 against the page, below the 3:1 WCAG 1.4.11 wants for a control's boundary); only the
   fill and the label step back. Muted on white measures 5.5:1. aria-current is what actually
   announces "current page" — the colour only agrees with it. */
.faq-link[aria-current="page"],
.faq-link[aria-current="page"]:hover{background:var(--surface);border-color:var(--coral);color:var(--muted)}
.faq-link[aria-current="page"]::before{background:var(--coral-soft);color:var(--coral-dark)}

main{padding-bottom:72px}
h1{font-size:clamp(1.9rem,4.6vw,2.7rem);line-height:1.12;letter-spacing:-.03em;
   font-weight:800;margin:14px 0 6px}
h2{font-size:1.28rem;letter-spacing:-.015em;margin:38px 0 10px}
h3{font-size:1.03rem;margin:26px 0 6px}
p,li{margin:0 0 13px}
ul,ol{padding-left:22px}
a{color:var(--coral-dark)}
a:hover{color:var(--coral)}

.updated{color:var(--muted);font-size:.92rem;margin-bottom:30px}
.byline{color:var(--muted);font-size:.88rem;margin:0 0 18px}
.byline a{color:var(--muted)}

/* Definition-style blocks carry most of a privacy policy's real content. */
dl{margin:0 0 20px;padding:0}
dt{font-weight:700;margin-top:16px}
dd{margin:4px 0 0 0;color:var(--ink)}

table{border-collapse:collapse;width:100%;margin:14px 0 22px;font-size:.95rem;display:block;
      overflow-x:auto}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:700;white-space:nowrap}

/* Article hero. `aspect-ratio` alongside the width/height attributes the renderer emits: the
   attributes reserve the box before the image lands (CLS), this keeps the reserved box the right
   shape once CSS takes over the width. Without it the two disagree and the page still jumps. */
.hero{margin:0 0 30px}
.hero img{width:100%;height:auto;aspect-ratio:1200/627;object-fit:cover;
  border-radius:var(--r-md);display:block;background:var(--surface)}
.photo-credit{margin:7px 0 0;font-size:.8rem;color:var(--muted)}
.photo-credit a{color:var(--muted)}

.callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--coral);
         border-radius:var(--r-md);padding:16px 18px;margin:22px 0}
.callout p:last-child{margin-bottom:0}

/* The product page's market block (functions/src/content/product.ts): a dated list of what the
   last scan measured, styled as a callout so it reads as data beside the prose, not as the prose. */
.product-facts{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px 20px;margin:0 0 30px}
.product-facts .pf-head{font-weight:700;margin:0 0 4px}
.product-facts .pf-date{color:var(--muted);font-size:.85rem;margin:0 0 10px}
.product-facts ul{margin:0 0 14px;padding-left:20px}
.product-facts li{margin:0 0 4px}
.product-facts .watch-cta{display:inline-block;padding:12px 22px;font-weight:700;
  color:#fff;background:var(--coral);border-radius:10px;text-decoration:none}
.product-facts .watch-cta:hover{background:var(--coral-dark);color:#fff}
.product-facts .watch-cta:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
     padding:18px 20px;margin:0 0 34px}
.toc p{font-weight:700;margin:0 0 8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 4px}

.site-foot{border-top:1px solid var(--line);padding:26px 0 40px;font-size:.9rem;color:var(--muted)}
.site-foot nav{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.site-foot a{color:var(--muted)}

.center{text-align:center;padding:70px 0}
/* NB: `.btn` is styled only inside `.center`. An `<a class="btn">` anywhere else renders as a
   plain link — which is what the product page's alert button did until it got its own rule
   above (Trello 338, caught in a browser on QA). Give a new button its own rule or lift this
   one out of `.center` deliberately. */
.center .btn{display:inline-block;margin-top:18px;padding:14px 26px;font-weight:700;
  color:#fff;background:var(--coral);border-radius:10px;text-decoration:none}
.center .btn:hover{background:var(--coral-dark);color:#fff}

@media (max-width:640px){ .wrap{padding:0 18px} .head-links{gap:12px} }

/* Consent withdrawal button in §10 of the privacy policy. Styled like the banner's own buttons
   (assets/js/consent.js injects those) so that giving and withdrawing consent look like the same
   control, which is the point of GDPR art. 7(3). Inert without JS — consent.js defines
   window.lowcaConsent — and that is acceptable: with JS off nothing that needs consent can load
   in the first place. */
.consent-reopen{
  font:inherit;font-weight:700;font-size:15px;padding:11px 22px;border-radius:12px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);cursor:pointer;
}
.consent-reopen:hover{border-color:var(--ink)}
.consent-reopen:focus-visible{outline:3px solid var(--ink);outline-offset:2px}