/* ====== SMELE – základní styly (čisté CSS) ====== */
:root{
  --accent:#F39A06;
  --bg:#0e0f11;
  --text:#f2f2f2;
  --muted:#a4a4a4;
  --surface:#15171a;
  --max:1100px;
  --radius:14px;
}

/* Světlý režim pro zařízení s preferencí světlého režimu */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --text: #1a1a1a;
    --muted: #666666;
    --surface: #f8f9fa;
  }
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html{
  margin:0;
  padding:0;
  font-size:16px;
  -webkit-text-size-adjust:100% !important;
  -ms-text-size-adjust:100% !important;
}

body{
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  background:#0e0f11;
  background:var(--bg,#0e0f11);
  color:#f2f2f2;
  color:var(--text,#f2f2f2);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

/* NAV */
.header{padding:8px 0}
.nav{display:flex;gap:16px;justify-content:center}
.nav a{
  color:#f2f2f2;
  color:var(--text,#f2f2f2);
  text-decoration:none;
  padding:8px 14px;
  border-radius:12px;
  display:block;
}
.nav a:hover{background:rgba(255,255,255,.06)}

@media (prefers-color-scheme: light) {
  .nav a:hover{background:rgba(0,0,0,.06)}
}
.nav a.active{
  background:#F39A06;
  background:var(--accent,#F39A06);
  color:#111;
  font-weight:600;
}

/* LOGO a fotky – responzivní layout */
.brand{
  margin:24px 0 8px;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
}

.brand-layout{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

/* Konzistentní velikost loga na všech stránkách */
.brand-logo, .brand img{
  width:220px;
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

.brand-photo{
  width:120px;
  height:80px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}

/* Mobilní zařízení - fotky pod logo */
@media (max-width: 768px) {
  .brand-layout{
    flex-direction:column;
    gap:12px;
  }

  .brand-photo{
    width:140px;
    height:90px;
  }

  .brand-logo{
    order:-1;
    width:200px;
  }
}

/* Nadpisy a text */
h1{font-size:clamp(28px,4vw,40px);margin:16px 0 6px;text-align:center}
h2{font-size:clamp(20px,3vw,26px);margin:0 0 10px}
h3{
  font-size:clamp(18px,2.5vw,22px);
  margin:16px 0 8px;
  color:#F39A06;
  color:var(--accent,#F39A06);
}
ul{margin:8px 0;padding-left:20px}
li{margin:4px 0}
.lead{opacity:.9;margin:0 0 18px;text-align:center}
.section{
  background:#15171a;
  background:var(--surface,#15171a);
  border-radius:14px;
  border-radius:var(--radius,14px);
  padding:18px;
  margin:16px 0;
}
.footer{
  border-top:1px solid #222;
  padding:16px 0;
  margin-top:24px;
  color:#a4a4a4;
  color:var(--muted,#a4a4a4);
  text-align:center;
}

/* Odkazy v obsahu */
a{color:#9ecbff}
a:hover{opacity:.85}

/* Google mapy */
.map-container{
  margin:12px 0 24px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}

.map-container iframe{
  border-radius:var(--radius);
  display:block;
}

@media (prefers-color-scheme: light) {
  .map-container{
    box-shadow:0 2px 8px rgba(0,0,0,.15);
  }
}

/* Fotky služeb na úvodní stránce */
.service-photos{
  display:flex;
  gap:16px;
  margin:20px 0 0;
  justify-content:center;
  flex-wrap:wrap;
}

.service-photo{
  width:200px;
  height:130px;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.service-photo:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* Mobilní zařízení - kompletně nový layout v2024 */
@media (max-width: 768px) {
  .wrapper{
    padding:8px;
  }

  .header{
    padding:8px 0;
  }

  .nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    align-items:center;
  }

  .nav a{
    padding:8px 12px;
    font-size:14px;
    display:inline-block;
  }

  .datetime-widget{
    display:none !important;
  }

  .section{
    padding:12px;
    margin:8px 0;
  }

  .service-photos{
    flex-direction:column;
    align-items:center;
    gap:8px;
  }

  .service-photo{
    width:250px;
    height:160px;
  }

  h1{
    font-size:24px;
    margin:12px 0 4px;
  }

  h2{
    font-size:18px;
    margin:12px 0 8px;
  }

  h3{
    font-size:16px;
    margin:12px 0 6px;
  }

  .brand{
    margin:12px 0 8px;
  }

  .brand-logo{
    width:180px;
  }

  .lead{
    font-size:14px;
    margin:0 0 12px;
  }

  ul{
    margin:6px 0;
    padding-left:16px;
  }

  li{
    margin:2px 0;
    font-size:14px;
  }

  p{
    font-size:14px;
    margin:8px 0;
  }

  .map-container{
    margin:8px 0 16px;
  }

  .footer{
    font-size:12px;
    padding:12px 0;
    margin-top:16px;
  }
}

@media (prefers-color-scheme: light) {
  .service-photo{
    box-shadow:0 2px 8px rgba(0,0,0,.15);
  }

  .service-photo:hover{
    box-shadow:0 4px 12px rgba(0,0,0,.2);
  }
}

/* Widget s časem - jako navigační tlačítko */
.datetime-widget{
  display:flex;
  justify-content:center;
  margin-left:auto;
}

.datetime-info{
  background:rgba(243,154,6,.1);
  color:#f2f2f2;
  color:var(--text,#f2f2f2);
  padding:4px 8px;
  border-radius:6px;
  font-size:11px;
  line-height:1.2;
  text-align:center;
  border:1px solid rgba(243,154,6,.2);
}

.datetime-info div{
  margin:1px 0;
}

#current-time{
  font-weight:600;
  font-size:12px;
  color:#F39A06;
  color:var(--accent,#F39A06);
}

#current-date{
  font-size:9px;
  opacity:.8;
}

#current-nameday{
  font-size:9px;
  font-style:italic;
  opacity:.7;
}

/* Mobilní zařízení - menší widget */
@media (max-width: 768px) {
  .datetime-info{
    padding:3px 6px;
    font-size:9px;
  }

  #current-time{
    font-size:10px;
  }

  #current-date{
    font-size:8px;
  }

  #current-nameday{
    font-size:8px;
  }
}

/* Světlý režim pro widget */
@media (prefers-color-scheme: light) {
  .datetime-info{
    background:rgba(243,154,6,.15);
    border:1px solid rgba(243,154,6,.3);
  }
}

/* Navigační tlačítka pro mapy */
.map-navigation{
  margin:16px 0;
  padding:12px;
  background:#15171a;
  background:var(--surface,#15171a);
  border-radius:14px;
  border-radius:var(--radius,14px);
  text-align:center;
}

.nav-buttons{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:8px;
}

.nav-btn{
  background:#F39A06;
  background:var(--accent,#F39A06);
  color:#111;
  border:none;
  padding:8px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  text-decoration:none;
  display:inline-block;
}

.nav-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(243,154,6,.3);
  opacity:.9;
}


/* Mobilní navigační tlačítka */
@media (max-width: 768px) {
  .nav-buttons{
    flex-direction:column;
    gap:6px;
  }

  .nav-btn{
    width:100%;
    padding:10px;
    font-size:14px;
  }

  .map-navigation{
    margin:12px 0;
    padding:10px;
  }
}

/* Světlý režim pro navigaci */
@media (prefers-color-scheme: light) {
  .map-navigation{
    background:#f8f9fa;
    background:var(--surface,#f8f9fa);
  }
}