/* Společný vzhled webu mujbudget.cz: úvod, ceník, návod, podmínky, zásady.
   Barvy, písmo a tvary podle znacka/MANUAL.md. Stránky ho načítají přes
   tools/web.py (verze ?v= je tam), vlastní pravidla stránky jsou až po něm
   v jejím <style> a mají přednost. Appka (/app/) má svůj vlastní styl. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url(/fonts/inter-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url(/fonts/inter-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

:root{
  --bg:#f7f6f3; --white:#ffffff; --card:#ffffff;
  --text:#16151a; --text2:#4f4d58; --text3:#686672;   /* 5,2:1 na pozadí, WCAG AA */
  --line:#eeecf0; --line2:#e1dfe6;
  --accent:#7a5a8c; --accent-d:#674a78; --accent-l:#a98cba; --accent-bg:#f3eef6;
  --teal:#0f7351; --teal-bg:#e6f4ee;
  --cyan:#2b8fa8; --cyan-bg:#e6f2f6;
  --gold:#b07d1f; --gold-t:#8a6212; --gold-bg:#f9f1de;
  --blue:#5a7fa0; --blue-bg:#eaeff4;
  --r:18px; --rs:12px;
  --sh:0 1px 2px rgba(22,21,26,.03),0 2px 8px rgba(22,21,26,.04);
  --sh-lg:0 12px 40px rgba(22,21,26,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:740px;margin:0 auto;padding:0 20px}
a{color:var(--accent-d)}
:focus-visible{outline:3px solid var(--accent-d);outline-offset:3px;border-radius:4px}
b,strong{font-weight:600}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* tlačítka (pilulky) */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:99px;
  font-size:16px;font-weight:500;text-decoration:none;border:1.5px solid var(--line2);
  background:var(--white);color:var(--text);box-shadow:var(--sh);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-lg)}
.btn.fill{background:var(--accent);border-color:var(--accent);color:#fff}   /* 5,7:1 */
.btn.fill:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.sm{padding:9px 18px;font-size:15px}

/* hlavička podstránek: logotyp vlevo (odkaz na úvod), appka vpravo */
.site-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:28px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}
.brand .lg{display:block;flex:none}   /* logotyp = znacka/logotyp.svg (křivky), viz znacka/MANUAL.md */

/* nadpis podstránky */
.page-head{padding:36px 0 6px}
.page-head h1{font-size:clamp(30px,6vw,42px);line-height:1.15;letter-spacing:-1px;font-weight:600;margin:0 0 14px;text-wrap:balance}
.page-head .lead{font-size:clamp(16px,2.4vw,18.5px);color:var(--text2);max-width:600px;text-wrap:balance}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1.5px solid var(--line);
  border-radius:99px;padding:6px 14px;font-size:14px;color:var(--text2);text-decoration:none;box-shadow:var(--sh)}
.pill svg{flex:none;color:var(--accent)}
a.pill:hover{border-color:var(--accent);color:var(--text)}

/* štítek nad nadpisem karty */
.tag{display:inline-block;background:var(--accent-bg);color:var(--accent-d);   /* 6,5:1 */
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.6px;padding:4px 11px;border-radius:99px}
.tag.zlata{background:var(--gold-bg);color:var(--gold-t)}

/* karta */
.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh)}

/* dlouhý text (podmínky, zásady, ceník): tok článku, karty jen pro krátké bloky */
.prose{padding-bottom:10px}
.prose h2{font-size:22px;letter-spacing:-.4px;font-weight:500;margin:38px 0 10px;text-wrap:balance;scroll-margin-top:16px}
.prose h3{font-size:17px;font-weight:500;margin:24px 0 6px}
.prose p{margin:10px 0;color:var(--text2)}
.prose p b,.prose li b{color:var(--text)}
.prose ul{margin:10px 0 10px 22px;color:var(--text2)}
.prose li{margin:6px 0}
.prose li::marker{color:var(--accent)}

/* patička: stejná na všech stránkách */
footer.site{padding:40px 0 56px;text-align:center;color:var(--text3);font-size:14px;border-top:1.5px solid var(--line);margin-top:40px}
footer.site a{color:var(--text2)}
footer.site a[aria-current]{color:var(--text);text-decoration:none;font-weight:500}
footer.site p + p{margin-top:6px}
footer.site .op{font-size:13px}

/* tisk (i PDF Podmínek z tools/podminky-pdf.sh): bez hlavičky, patičky a ovládání */
@media print{
  @page{margin:18mm 16mm}
  body{background:#fff}
  .wrap{max-width:none;padding:0}
  .site-top,footer.site,.pills,.noprint{display:none}
  .page-head{padding-top:0}
  .card{box-shadow:none;break-inside:avoid}
  .prose h2{break-after:avoid}
}