/* ============================================================
   KOFAREAL / Ing. Petr Fára — Směr značky, uzamčeno 25. 8. 2026
   Deep Navy #14283A · Warm Ivory #F5F1E8 · Gold #C6A15B · Stone Gray #667078
   Bitter (nadpisy) + Source Sans 3 (text). Žádná pátá barva, žádné třetí písmo.
   Zlatý text jen na navy. Na zlatém tlačítku je text navy.
   Sdílený styl podstránek, vytvořen 4. 9. 2026.
   ============================================================ */
:root{
  --navy:#14283A;
  --navy-dark:#0F1F2D;
  --ivory:#F5F1E8;
  --white:#FFFFFF;
  --gold:#C6A15B;
  --gold-dark:#AD8944;
  --stone:#667078;
  --line:#E2DCCD;
  --line-dark:rgba(255,255,255,.16);
  --radius:4px;
  --wrap:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Source Sans 3',system-ui,-apple-system,sans-serif;
  font-size:18px;line-height:1.65;
  color:var(--navy);background:var(--ivory);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Bitter',Georgia,serif;line-height:1.18;font-weight:700}
img{max-width:100%;display:block}
a{color:var(--navy)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{
  display:block;font-size:.75rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone);margin-bottom:10px;
}
.rule{width:56px;height:3px;background:var(--gold);border:0;margin-bottom:20px}

/* ---------- hlavička ---------- */
.site-head{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50}
.head-row{display:flex;align-items:center;gap:24px;padding:12px 24px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;margin-right:auto}
.logo svg{width:22px;height:22px;flex:none}
.logo .word{font-family:'Bitter',serif;font-weight:700;font-size:1.12rem;letter-spacing:.14em;line-height:1.1}
.logo .sig{display:block;font-family:'Source Sans 3',sans-serif;font-weight:400;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav a{color:rgba(255,255,255,.88);text-decoration:none;font-size:.92rem;font-weight:600;padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
@media (min-width:761px) and (max-width:1180px){.nav{gap:14px}.nav a{font-size:.86rem}}
.nav a:hover,.nav a:focus-visible{color:#fff;border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold)}
.head-phone{
  color:var(--navy);background:var(--gold);text-decoration:none;font-weight:600;font-size:.95rem;
  padding:9px 18px;border-radius:var(--radius);white-space:nowrap;border-bottom:0 !important;
}
.head-phone:hover{background:#D4B36F;color:var(--navy)}

/* ---------- sekce ---------- */
section{padding:72px 0}
.sec-navy{background:var(--navy);color:#fff}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-navy .eyebrow{color:var(--gold)}
.sec-navy .rule{background:var(--gold)}
h2.sec-title{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:16px}
.sec-intro{max-width:40em;margin-bottom:38px;font-size:1.05rem}
.sec-navy .sec-intro{color:rgba(255,255,255,.9)}

/* karty na ivory */
.cards{display:grid;gap:20px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);padding:24px}
.card h3{font-size:1.08rem;margin-bottom:8px}
.card p{font-size:.96rem;color:var(--stone)}

/* FAQ */
details{background:var(--white);border:1px solid var(--line);margin-bottom:10px;padding:16px 20px}
details[open]{border-left:3px solid var(--gold)}
summary{font-weight:600;cursor:pointer;font-size:1.02rem}
summary:focus-visible{outline:3px solid rgba(20,40,58,.35)}
details p{margin-top:10px;color:var(--stone);font-size:.98rem}

/* odkazovací blok na podstránku */
.readmore{display:inline-block;margin-top:26px;font-weight:600;color:var(--navy);text-decoration:none;
  border-bottom:2px solid var(--gold);padding-bottom:2px}
.readmore:hover{border-bottom-color:var(--navy)}
.sec-navy .readmore{color:#fff}
.sec-navy .readmore:hover{border-bottom-color:#fff}

/* CTA pruh */
.cta-strip{background:var(--gold);padding:44px 0;text-align:center}
.cta-strip p{color:var(--navy);font-family:'Bitter',serif;font-weight:700;font-size:1.35rem;margin-bottom:8px}
.cta-strip .sub{font-family:'Source Sans 3',sans-serif;font-weight:400;font-size:1rem;margin-bottom:20px}
.cta-strip a.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;
  font-weight:600;font-size:1.05rem;padding:15px 32px;border-radius:var(--radius)}
.cta-strip a.btn:hover{background:#0F1F2D}

/* patička */
footer{background:var(--navy);color:rgba(255,255,255,.75);padding:44px 0 34px;font-size:.88rem}
footer .foot-grid{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;gap:32px}
footer strong{color:#fff}
footer a{color:#fff}
footer .foot-nav{list-style:none}
footer .foot-nav li{margin-bottom:7px}
footer .gdpr{font-size:.8rem;line-height:1.55;color:rgba(255,255,255,.62)}
footer .foot-bottom{border-top:1px solid var(--line-dark);margin-top:28px;padding-top:18px;font-size:.8rem;color:rgba(255,255,255,.55)}

/* ============ podstránky ============ */
.page-hero{background:var(--navy);color:#fff;padding:64px 0 68px}
.page-hero .rule{margin-bottom:22px}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);color:#fff;margin-bottom:18px;max-width:16em}
.page-hero .lead{font-size:1.15rem;color:rgba(255,255,255,.88);max-width:34em}
.page-hero .meta{font-size:.92rem;color:rgba(255,255,255,.66);margin-top:18px}
.article{max-width:820px}
.article p{margin-bottom:18px}
.article .sec-intro{margin-bottom:26px}
.article .intro{font-size:1.08rem}
.article h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin:46px 0 14px}
.article h2:first-of-type{margin-top:0}
.article h3{font-size:1.2rem;margin:34px 0 10px}
.article ul{margin:0 0 18px;padding-left:22px}
.article li{margin-bottom:10px}
.src{font-size:.82rem;color:var(--stone)}
.src-block{font-size:.82rem;color:var(--stone);border-top:1px solid var(--line);padding-top:12px;margin-top:26px}
.src-light{color:rgba(255,255,255,.6);border-top-color:var(--line-dark)}

/* otázka a odpověď */
.qa{border-top:1px solid var(--line);padding-top:26px;margin-top:26px}
.qa:first-of-type{border-top:0;padding-top:0;margin-top:0}
.qa h2{margin-top:0}
.qa-group{margin-bottom:14px}
.qa-group h2.sec-title{margin-bottom:8px}

/* zvýrazněná otázka na schůzku */
.ask{border-left:4px solid var(--gold);background:var(--white);padding:14px 18px;margin:0 0 16px;font-weight:600}
.num{color:var(--gold);font-weight:700;margin-right:8px}

/* velká čísla */
.figures{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 26px}
.fig{background:var(--white);border:1.5px solid var(--navy);padding:22px 24px}
.fig b{display:block;font-family:'Bitter',serif;font-weight:700;font-size:2.1rem;line-height:1.1;margin-bottom:6px}
.fig span{font-size:.9rem;color:var(--stone);display:block}
.fig .lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.fig-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.fig-navy span{color:rgba(255,255,255,.78)}
.fig-navy strong{color:var(--gold)}

/* zvýrazněný box */
.box{background:var(--white);border-left:4px solid var(--gold);padding:26px 28px;margin:30px 0}
.box h3{font-size:1.15rem;margin-bottom:16px;margin-top:0}
.box p:last-child{margin-bottom:0}

/* checklist */
.checklist{list-style:none;padding-left:0}
.checklist li{position:relative;padding:14px 0 14px 40px;border-bottom:1px solid var(--line);font-size:.99rem;margin-bottom:0}
.checklist li:first-child{border-top:1px solid var(--line)}
.checklist li::before{content:"";position:absolute;left:0;top:18px;width:18px;height:18px;
  border:1.5px solid var(--gold);background:var(--white)}

section[id],div[id]{scroll-margin-top:86px}

/* ---------- mobil ---------- */
@media (max-width:960px){
  footer .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  section{padding:52px 0}
  .site-head{position:static}
  .head-row{flex-wrap:wrap;gap:10px}
  .logo{margin-right:auto;width:auto}
  .head-row .head-phone{order:2;margin-left:auto;padding:8px 14px;font-size:.9rem}
  .head-row .logo .word{font-size:1rem;letter-spacing:.1em}
  .head-row .logo .sig{font-size:.55rem}
  .nav{order:3;width:100%;gap:18px;font-size:.92rem}
  .cards-2,.cards-3{grid-template-columns:1fr}
  .page-hero{padding:44px 0 48px}
  .figures{grid-template-columns:1fr}
  footer .foot-grid{grid-template-columns:1fr}
  section[id],div[id]{scroll-margin-top:12px}
}
@media (max-width:520px){.nav-long{display:none}}