/* AtlasVeri brand blue: the ONE place to change the accent colour of the static pages
   (/info, /obec, /realitni-checklist). Every page links this file and maps its own
   --accent / --accent-ink (/ --accent-bg) onto these tokens, so a new colour is a
   one-file edit. Served as /info/brand.css (the /info Vercel rewrite already covers it);
   the browser may keep an old copy for up to an hour (static cache). */
:root{
  --brand:#004fa1;        /* buttons, links, active chips; white text on it reaches 8:1 */
  --brand-ink:#003a78;    /* the darker shade used for text-sized accents */
  --brand-bg:#e3edf8;     /* very light tint (highlights, selected cards) */
}
/* Dark theme: the brand blue is too dark to read on the navy page, so it gets a lighter
   shade of the same hue. Mirrors how every page switches theme (media query + data-theme). */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --brand:#4c9be8;--brand-ink:#9ccaf5;--brand-bg:#12263d;
}}
:root[data-theme="dark"]{--brand:#4c9be8;--brand-ink:#9ccaf5;--brand-bg:#12263d}

/* Call-to-action block, shared part: the big headline, the smaller subtitle under it and the two bouncing arrows
   (same look as ScrollHint in the app's onboarding). The same rules live in tiles-server/scripts/obec-page.css
   (the cta2 block) for the /obec pages, so both sets of pages show an identical CTA. */
/* The headline is bigger (was 24px). `div.cta` outranks each page's own `.cta h2` rule whatever the order of the
   stylesheets. The same size lives in tiles-server/scripts/obec-page.css (the cta2 block). */
div.cta h2{font-size:clamp(30px,5.4vw,42px);line-height:1.1;text-transform:uppercase}
/* the subtitle is a <p> (not a second heading): smaller than the headline, normal case */
div.cta .ctaSub{margin:0 auto 2px;max-width:680px;font-size:19px;line-height:1.5;color:var(--ink-2);text-wrap:balance}
div.cta .ctaSub + .ctaSub{margin:0 auto 16px}
/* each benefit: the bold lead on its own line, the explanation underneath */
.cta .ctaList li b{display:block}

/* The complete CTA block, so it looks the same on EVERY /info page, whatever older CTA rules a page carries in its own
   <style> (`div.cta …` outranks them). Values are those of the /info hub; the /obec pages get the same from obec-page.css. */
div.cta{margin-top:56px;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:28px;text-align:center;box-shadow:var(--shadow)}
div.cta h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.02em;margin:0 0 6px;border:0;padding:0}
div.cta .ctaList{list-style:none;margin:0 auto 22px;padding:0;max-width:720px;text-align:left;position:relative;left:40px}
@media (max-width:820px){div.cta .ctaList{left:0}}
/* compact items: coloured icon on the left, bold capital title and the description beside it */
div.cta .ctaList li{position:relative;margin:0;padding:12px 0 12px 58px;font-size:15px;line-height:1.45;text-align:left;color:var(--ink-2);border-top:1px solid var(--hair)}
div.cta .ctaList li:first-child{border-top:0}
div.cta .ctaList li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;width:40px;height:40px;border-radius:11px;background-repeat:no-repeat;background-position:center;background-size:23px 23px}
div.cta .ctaList li:nth-child(1)::before{background-color:rgba(22,163,74,.15);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='8 12.5 11 15.5 16 9'/%3E%3C/svg%3E")}
div.cta .ctaList li:nth-child(2)::before{background-color:rgba(37,99,235,.15);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 3 21 8 12 13 3 8'/%3E%3Cpolyline points='3 12.5 12 17.5 21 12.5'/%3E%3Cpolyline points='3 17 12 22 21 17'/%3E%3C/svg%3E")}
div.cta .ctaList li:nth-child(3)::before{background-color:rgba(234,88,12,.15);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 3 14 8 19 8'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='15' y2='17'/%3E%3C/svg%3E")}
div.cta .ctaList li:nth-child(4)::before{background-color:rgba(124,58,237,.15);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
div.cta .ctaList li b{display:block;margin:0 0 2px;font-size:18px;font-weight:700;line-height:1.25;letter-spacing:.05em;text-transform:uppercase;-webkit-text-stroke:.4px currentColor;color:var(--ink)}
div.cta .ctaNote{display:block;margin-top:14px;color:var(--ink-3);font-size:14px;line-height:1.5}
div.cta a.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;margin:4px;padding:7px 7px 7px 22px;border-radius:6px;border:1px solid #fa1205;background:#fa1205;color:#fff;text-decoration:none;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;font-weight:700;letter-spacing:.6px;line-height:1.6;text-transform:uppercase;text-shadow:0 1px 2px rgba(120,0,0,.35);transition:transform .12s,filter .12s}
div.cta a.btn::after{content:"";flex-shrink:0;width:26px;height:26px;border-radius:4px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fa1205' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/12px 12px no-repeat;box-shadow:0 2px 8px rgba(0,0,0,.25);animation:ctaNudge 1.8s ease-in-out infinite}
div.cta a.btn:hover{filter:brightness(1.06)}
div.cta a.btn:active{transform:translateY(1px) scale(.985)}
div.cta a.btn::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none;animation:ctaShine 3.6s ease-in-out infinite}
@keyframes ctaShine{0%{left:-60%}55%,100%{left:130%}}
@keyframes ctaNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){div.cta a.btn::before,div.cta a.btn::after{animation:none}}
@media (max-width:520px){div.cta{padding:24px 18px}}
.cta .ctaArrows{display:flex;flex-direction:column;align-items:center;margin:2px 0 14px;opacity:.75}
.cta .ctaArrows path{stroke:var(--accent)}
.cta .ctaArrows svg:first-child{animation:ctaHint 1.4s ease-in-out infinite;margin-bottom:-6px}
.cta .ctaArrows svg:last-child{animation:ctaHint 1.4s ease-in-out infinite .2s}
@keyframes ctaHint{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(5px);opacity:1}}
@media (prefers-reduced-motion:reduce){.cta .ctaArrows svg{animation:none!important}}