:root{

  --bg:#0b0f14;

  --panel:#111827;

  --text:#e5e7eb;

  --muted:#a1a1aa;

  --accent:#22c55e;

  --border:rgba(255,255,255,.10);



  --max: 980px;

  --r: 14px;

}



*{box-sizing:border-box}

html,body{height:100%}

body{

  margin:0;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background:var(--bg);

  color:var(--text);

  line-height:1.5;

}



a{color:inherit; text-decoration:none}

a:hover{text-decoration:underline}

.container{max-width:var(--max); margin:0 auto; padding:18px}

.header{

  display:flex; align-items:center; justify-content:space-between; gap:16px;

}

.brand{display:flex; flex-direction:column}

.brand b{font-size:20px; letter-spacing:.2px}

.brand span{color:var(--muted); font-size:14px}



.nav{display:flex; gap:14px; flex-wrap:wrap}

.nav a{color:var(--muted)}

.nav a:hover{color:var(--text); text-decoration:none}



.hero{

  margin-top:18px;

  padding:18px;

  background:linear-gradient(180deg, rgba(34,197,94,.12), rgba(17,24,39,.9));

  border:1px solid var(--border);

  border-radius:var(--r);

}

.hero h1{margin:0 0 8px 0; font-size:34px; line-height:1.15}

.hero p{margin:0; color:var(--muted); max-width:62ch}

.cta{

  margin-top:14px; display:flex; gap:10px; flex-wrap:wrap;

}

.button{

  display:inline-block;

  padding:10px 14px;

  border-radius:12px;

  border:1px solid var(--border);

  background:rgba(255,255,255,.04);

}

.button.primary{

  background:rgba(34,197,94,.18);

  border-color:rgba(34,197,94,.45);

}



.grid{

  margin-top:18px;

  display:grid;

  grid-template-columns: repeat(12, 1fr);

  gap:14px;

}

.card{

  grid-column: span 6;

  padding:14px;

  background:var(--panel);

  border:1px solid var(--border);

  border-radius:var(--r);

}

.card h2{margin:0 0 6px 0; font-size:18px}

.card p{margin:0; color:var(--muted)}

.card .link{margin-top:10px; display:inline-block; color:var(--accent); text-decoration:none}

.card .link:hover{text-decoration:underline}



.ad-slot{

  margin-top:18px;

  border:1px dashed rgba(255,255,255,.18);

  border-radius:var(--r);

  background:rgba(255,255,255,.03);

  display:flex;

  align-items:center;

  justify-content:center;

  color:var(--muted);

  font-size:13px;

}

.ad-top{min-height:90px}

.ad-mid{min-height:250px}



.footer{

  margin-top:28px;

  padding-top:16px;

  border-top:1px solid var(--border);

  color:var(--muted);

  font-size:13px;

}



@media (max-width: 820px){

  .card{grid-column: span 12}

  .hero h1{font-size:28px}

}

/* formuláře */

input.button, select.button{

  color: var(--text);

}

input.button{cursor:text}

select.button{cursor:pointer}

button.button, a.button{cursor:pointer}



input.button:focus, select.button:focus, button.button:focus, a.button:focus{

  outline: 2px solid rgba(34,197,94,.35);

  outline-offset: 2px;

}



/* výsledky / hlášky */

.notice{

  padding:12px;

  border:1px solid var(--border);

  border-radius:var(--r);

  background:rgba(255,255,255,.03);

}

.notice.ok{

  border-color: rgba(34,197,94,.45);

  background: rgba(34,197,94,.10);

}

.notice.warn{

  border-color: rgba(245,158,11,.55);

  background: rgba(245,158,11,.10);

}

.notice.err{

  border-color: rgba(239,68,68,.55);

  background: rgba(239,68,68,.10);

}

/* Toast */

.toast{

  position: fixed;

  left: 50%;

  bottom: 18px;

  transform: translateX(-50%);

  background: rgba(17,24,39,.95);

  border: 1px solid var(--border);

  border-radius: 999px;

  padding: 10px 14px;

  color: var(--text);

  font-size: 14px;

  display:none;

  z-index: 9999;

  box-shadow: 0 10px 30px rgba(0,0,0,.35);

}

.toast.show{display:block}

/* Fix: čitelné položky v rozbalovacím seznamu (Chrome/Edge/Firefox) */

#energyType option,

#energyType optgroup{

  color:#111;

  background:#fff;

}

/* Fix: primární tlačítko mírně výraznější */

.button.primary{

  filter: brightness(1.55);

}

.button.primary:hover{

  filter: brightness(1.18);

}

/* Responsive: na mobilu skládat bloky pod sebe (Vstupy / Výsledek) */

@media (max-width: 820px){

  .grid{

    grid-template-columns: 1fr !important;

  }

  .grid > *{

    grid-column: 1 / -1 !important;

  }

}

/* Brand: logo + text */

.brand{

  display:flex;

  align-items:left;

  gap:12px;

  text-decoration:none;

}

.brand-text{

  display:flex;

  flex-direction:column;

  line-height:1.1;

}

.brand-logo{

  width:44px;

  height:44px;

  flex:0 0 44px;

  color: var(--text);

  opacity:.95;

}



/* jemné doladění na mobilu */

@media (max-width: 520px){

  .brand-logo{ width:38px; height:38px; flex-basis:38px; }

}

/* Force: logo vlevo + text vpravo v hlavičce (přebije starší styly) */

.header .brand{

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  gap: 12px !important;

  text-decoration: none;

}



.header .brand-logo{

  display:block;

  width:44px;

  height:44px;

  flex:0 0 44px;

  color: var(--text);

  opacity:.95;

}



.header .brand-text{

  display:flex;

  flex-direction: column;

  line-height:1.1;

}

/* Form fields: label nad inputem (použito pro Ohřev vody) */

.field{

  display:flex;

  flex-direction:column;

  gap:6px;

}

/* Articles: bílá karta pro text (lepší čitelnost) */

.article-card{

  background:#fff;

  color:#111;

  --text:#111;

  --muted:#444;

  --border:#e5e7eb;

}



.article-card a{

  color:#0a7a5a;

  text-decoration: underline;

  text-underline-offset: 3px;

}



.article-card .lead{

  color: var(--muted);

  font-size: 1.05rem;

}



.article-meta{

  color: var(--muted);

  font-size: 13px;

  display:flex;

  flex-wrap:wrap;

  gap:10px;

}



.article-card h2{ margin-top: 18px; }

.article-card h3{ margin-top: 14px; }



.article-card figure{

  margin: 16px 0;

  padding: 12px;

  border: 1px solid var(--border);

  border-radius: 14px;

  background: #fafafa;

}



.article-card figcaption{

  margin-top: 8px;

  color: var(--muted);

  font-size: 13px;

}



.article-callout{

  border:1px solid var(--border);

  border-left: 4px solid #0a7a5a;

  background:#f6f7f9;

  padding:12px;

  border-radius: 14px;

  margin: 14px 0;

}



.article-card code{

  background:#f2f2f2;

  padding: 2px 6px;

  border-radius: 8px;

}



.article-card pre{

  background:#f2f2f2;

  padding:12px;

  border-radius:14px;

  overflow:auto;

}



/* ===== Mobile hamburger menu – FIX čitelnosti + pozadí + pravé zarovnání ===== */

@media (max-width: 720px){

  .header{

    position:relative;

  }



  /* hamburger vpravo */

  .nav-toggle.nav-toggle-ready{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-left:auto; /* tlačítko na pravou stranu */

    background: transparent;

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 10px;

    color: var(--text);

  }



  /* původní nav na mobilu skryjeme až když je collapsible */

  .nav.nav-collapsible{

    display:none !important;



    position:absolute;

    top: calc(100% + 10px);

    right: 0;         /* otevřít pod hamburgerem vpravo */

    left: auto;



    width: min(320px, calc(100vw - 24px));

    z-index: 999;



    flex-direction:column;

    gap: 8px;

    padding: 10px;



    /* NEPRŮHLEDNÉ pozadí + kontrast */

    background: #0b1220;          /* tmavé, čitelné */

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 16px;

    box-shadow: 0 18px 40px rgba(0,0,0,.45);

    backdrop-filter: none; /* žádné průhledno */

  }



  .nav.nav-collapsible.is-open{

    display:flex !important;

  }



  /* položky menu: velká klikací plocha, kontrast */

  .nav.nav-collapsible a{

    display:block;

    padding: 12px 12px;

    border-radius: 12px;



    color: #fff !important;

    text-decoration: none;

    font-weight: 600;

    text-align: right; /* zarovnání doprava */

  }



  .nav.nav-collapsible a:hover,

  .nav.nav-collapsible a:focus{

    outline: none;

    background: rgba(255,255,255,.10);

  }

}

/* Page Share button (minimal) */

.hero{ position: relative; }



.page-share-btn{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding: 10px 12px;

}



.page-share-btn svg{ display:block; }



/* Na mobilu ať je tlačítko přirozeně pod textem (bez překryvu) */

@media (max-width: 720px){

  .page-share-btn{

    margin-top: 10px;

  }

}



/* Na PC ať je vpravo nahoře v hero */

@media (min-width: 721px){

  .page-share-btn{

    position:absolute;

    top: 4px;

    right: 0;

    margin: 0;

  }

}

/* Desktop: hamburger nikdy nezobrazovat */

@media (min-width: 721px){

  .nav-toggle{ display:none !important; }

  .nav.nav-collapsible{

    display:flex !important;

    position: static !important;

    width:auto !important;

    padding:0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

  }

}

/* Sdílet: výraznější tlačítko (světlejší) */

.page-share-btn{

  background: rgba(255,255,255,.10) !important;

  border: 1px solid rgba(255,255,255,.22) !important;

  color: #fff !important;

}



.page-share-btn:hover,

.page-share-btn:focus{

  background: rgba(255,255,255,.16) !important;

  border-color: rgba(255,255,255,.32) !important;

}