/* =========================================================
   Účetnictví Ing. Jana Voráčová – styly celého webu
   Hlavní barva webu: #00c5ef (tyrkysová)
   ========================================================= */

/* ---------- Písmo Open Sans (uložené u webu, včetně češtiny) ---------- */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/open-sans.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+20AC, U+2122, U+2212; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/open-sans-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url("../fonts/open-sans-italic.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+20AC, U+2122, U+2212; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url("../fonts/open-sans-italic-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }

/* ---------- Základ ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: #333;
  background: #fff;
}
a { color: #00c5ef; text-decoration: none; }
a:hover { color: #0099bb; }
img { max-width: 100%; height: auto; border: 0; }
strong, b { font-weight: 700; }
p { margin: 0 0 10px; }
ul { margin: 0 0 10px; padding-left: 40px; }

h1, h2, h3 { color: #333; line-height: 1.1; margin: 20px 0 10px; }
h1 { font-size: 36px; font-weight: 800; margin-bottom: 30px; }
h2 { font-size: 30px; font-weight: 400; }
h3 { font-size: 24px; font-weight: 400; }

/* Obsah je vždy uprostřed, max. šířka 1170 px */
.wrap { max-width: 1170px; margin: 0 auto; padding: 0 15px; }

/* ---------- Horní lišta (telefon, e-mail) ---------- */
.topbar { background: #00c5ef; padding: 8px 0; font-size: 12px; font-weight: 400; }
.topbar .wrap { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 4px 20px; }
.topbar a { color: #333; }
.topbar a:hover { color: #fff; }
.topbar .contacts { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; }
.topbar .contacts a { white-space: nowrap; }

/* Ikony (malé obrázky SVG přímo v CSS) */
.ico::before { content: ""; display: inline-block; vertical-align: -2px; margin-right: 6px;
  background: no-repeat center / contain; }
.ico-fb::before { width: 9px; height: 14px; margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M279 288l14-93h-89v-60c0-25 12-50 52-50h40V6S260 0 225 0c-73 0-121 44-121 124v71H23v93h81v224h100V288z'/%3E%3C/svg%3E"); }
.ico-phone::before { width: 8px; height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Crect x='0.5' y='0.5' width='9' height='15' rx='1.5' fill='%23fff'/%3E%3Crect x='2' y='2.5' width='6' height='9' fill='%2300c5ef'/%3E%3Ccircle cx='5' cy='13.5' r='0.9' fill='%2300c5ef'/%3E%3C/svg%3E"); }
.ico-mail::before { width: 14px; height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath fill='%23fff' d='M0 1.5V0h16v1.5L8 7z'/%3E%3Cpath fill='%23fff' d='M0 3.3V12h16V3.3L8 9z'/%3E%3C/svg%3E"); }

/* ---------- Hlavička s logem a menu ---------- */
.header { background: #000; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 90px; flex-wrap: wrap; }
.logo { display: block; color: #fff; font-size: 24px; font-weight: 700; line-height: 1; padding: 20px 0; }
.logo:hover { color: #fff; }
.logo small { display: block; margin-top: 8px; font-size: 13px; font-weight: 300; color: #aaa; }

.menu a {
  display: inline-block;
  padding: 0 15px;
  line-height: 90px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}
.menu a:hover, .menu a.active { color: #00c5ef; }

/* Tlačítko menu pro mobil (na počítači skryté) */
#menu-btn { display: none; }
.menu-btn { display: none; width: 44px; height: 44px; cursor: pointer;
  background: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Cpath fill='%23fff' d='M0 0h22v3H0zm0 7.5h22v3H0zM0 15h22v3H0z'/%3E%3C/svg%3E"); }

/* ---------- Hlavní část: obsah + pravý sloupec ---------- */
.main { display: flex; gap: 30px; padding-top: 40px; padding-bottom: 50px; }
.content { flex: 3; min-width: 0; }
.sidebar { flex: 1; min-width: 0; text-align: center; }

.page-title { font-size: 24px; font-weight: 600; margin: 8px 0 30px; }
/* .lead = vzhled bývalého H1; nadpis je nově H2, vypadá ale stejně */
.lead { font-size: 36px; font-weight: 800; margin: 20px 0 30px; }

.sidebar .box { margin-bottom: 40px; }
.sidebar h3 { font-weight: 700; margin-top: 0; }
.sidebar p { margin-bottom: 10px; }
.sidebar a { color: #333; }
.sidebar a:hover { color: #00c5ef; }

/* Fotka vlevo vedle textu (stránka Kontakty) */
.photo-left { float: left; margin: 1ex 2em 2em 0; }
.clear { clear: both; }
.space { margin-top: 34px; }

/* ---------- Spodní šedý pruh (4 sloupce) ---------- */
.bottom { background: #f5f5f5; padding: 100px 0; }
.bottom .wrap { display: flex; gap: 30px; }
.bottom .col { flex: 1; min-width: 0; }
.bottom h3 { margin-top: 0; }
.bottom .center { text-align: center; }
.bottom .center h3 { font-weight: 700; }
.bottom ul { list-style: none; padding: 0; }
.bottom li { padding: 2px 0; border-bottom: 1px solid #e5e5e5; }
.bottom li:last-child { border-bottom: 0; }
.bottom a { color: #333; }

/* ---------- Patička ---------- */
.footer { background: #00c5ef; color: #fff; text-align: center; padding: 20px 15px; }

/* =========================================================
   Mobil a tablet (šířka do 991 px)
   ========================================================= */
@media (max-width: 991px) {
  .bottom .wrap { flex-wrap: wrap; }
  .bottom .col { flex: 1 1 calc(50% - 15px); }
}

@media (max-width: 767px) {
  .topbar .contacts { gap: 4px 12px; }

  .menu-btn { display: block; }
  .menu { display: none; width: 100%; padding-bottom: 10px; }
  #menu-btn:checked ~ .menu { display: block; }
  .menu a { display: block; line-height: 44px; padding: 0; border-top: 1px solid #222; }

  .main { flex-direction: column; padding-top: 25px; }
  h1 { font-size: 30px; }
  .lead { font-size: 30px; }
  .photo-left { float: none; margin: 0 0 1em; }

  .bottom { padding: 50px 0; }
  .bottom .wrap { flex-direction: column; }
}

/* Velmi úzké telefony: zmenšit písmo, ať lišta zůstane na jednom řádku */
@media (max-width: 359px) {
  .topbar { font-size: 11px; }
  .topbar .contacts { gap: 4px 8px; }
}