/**
 * Automyčky Praha – čisté styly
 * Typografická hierarchie: H1 > H2 > H3 > H4 > p
 * Bez Bootstrapu, bez inline stylů
 */

@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400;500;600;700&display=swap');

/* ===== Proměnné ===== */
:root {
  --color-primary: #2cc9f9;
  --color-primary-dark: #03a2d2;
  --color-dark: #212121;
  --color-text: #212121;
  --color-text-muted: #6c757d;
  --color-bg-light: #f8f9fa;
  --color-bg-dark: #212121;
  --color-border: #dee2e6;
  --max-width: 1200px;
}

/* ===== Reset & základ ===== */
*, *::before, *::after { box-sizing: border-box; }
.clear { clear: both; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Spartan', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: #fff;
}

/* ===== Typografie – proporční hierarchie ===== */
h1 { font-size: 2.25rem; font-weight: 600; margin: 0 0 0.5em; }
h2 { font-size: 1.75rem; font-weight: 600; margin: 0 0 0.5em; }
h3 { font-size: 1.35rem; font-weight: 600; margin: 0 0 0.5em; }
h4 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.5em; }
p { font-size: 1rem; margin: 0 0 1em; }

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Layout ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* ===== Header / Top ===== */
.site-header {
  background: var(--color-bg-dark);
  padding: 0.75rem 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-logo {
  background: url('../img/autologo.png') no-repeat left center;
  background-size: 60px 50px;
  padding: 1rem 0 0.6rem 72px;
  min-height: 50px;
  display: flex;
  align-items: center;
}

.site-logo a {
  color: var(--color-primary);
  font-size: 1.15rem;
  font-weight: 400;
  text-decoration: none;
  line-height: 1.3;
}

.site-logo a strong { font-weight: 600; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.site-nav a {
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
}

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

/* ===== Hero / Header obrázek ===== */
.hero {
  background: url('../img/automyckamini.jpg') center/cover;
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-inner {
  background: var(--color-primary);
  padding: 2.5rem 2rem;
  max-width: 90%;
  width: 700px;
  text-align: center;
}

.hero h1 { color: #fff; font-size: 2rem; margin-bottom: 0.5em; }
.hero .hero-sub { color: #000; font-size: 1rem; font-weight: 500; text-transform: uppercase; margin: 0; }

.hero-mini {
  background: url('../img/automyckamini.jpg') center/cover;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-mini .hero-inner { padding: 2rem; }
.hero-mini h1 { font-size: 1.75rem; }

/* ===== Sekce obsahu ===== */
.section {
  padding: 2rem 0;
}

.section--light { background: var(--color-bg-light); }

.section--dark {
  background: var(--color-bg-dark);
  color: #fff;
}

.section--dark a { color: var(--color-primary); }

.section-divider {
  border-bottom: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* ===== Grid ===== */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 992px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
}

/* ===== Seznamy s ikonami ===== */
.list-icon {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-icon li {
  padding: 0.5em 0 0.5em 48px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 36px 36px;
  font-size: 1.1rem;
}

.list-icon a {
  color: var(--color-text);
  display: block;
}

.list-icon a:hover {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.list-icon--casti li { background-image: url('../img/cast.png'); }
.list-icon--casti li:hover { background-image: url('../img/cast0.png'); }

.list-icon--mesto li { background-image: url('../img/mesto.png'); }
.list-icon--mesto li:hover { background-image: url('../img/mesto0.png'); }

/* ===== Sekce Najít myčku ===== */
.section-find .section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.section-find .section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.section-find .section-title img,
.section-title img.section-icon {
  width: 48px;
  height: 48px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ===== Partner projektu ===== */
.partner-section h3 {
  margin-bottom: 1rem;
}

.partner-section .partner-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.partner-section img {
  max-height: 60px;
  border-radius: 4px;
}

/* ===== Myčky karty ===== */
.mycky-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .mycky-grid { grid-template-columns: 1fr; }
}

.mycka-card {
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.mycka-card a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--color-text);
}

.mycka-card a:hover { text-decoration: none; }
.mycka-card h4 { margin: 0 0 0.5em; text-decoration: underline; }
.mycka-card img { width: 40px; flex-shrink: 0; }

.btn {
  display: inline-block;
  padding: 0.6rem 1rem;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: 4px;
  text-decoration: none;
}

.btn:hover { background: var(--color-primary-dark); color: #fff; text-decoration: none; }

/* ===== Galerie fotografií ===== */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.photos-grid img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .photos-grid { grid-template-columns: 1fr; }
}

/* ===== Vybavení myčky (detail) ===== */
.equip-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.equip-list li {
  padding: 0.5em 0 0.5em 52px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 40px 40px;
  font-size: 1rem;
}

.equip-list li.ne { color: #999; font-weight: 300; }

li.equip-box { background-image: url('../img/box.png'); }
li.equip-vysavac { background-image: url('../img/vysavace.png'); }
li.equip-tepovac { background-image: url('../img/tepovac.png'); }
li.equip-vysousece { background-image: url('../img/vysousece.png'); }
li.equip-pena { background-image: url('../img/pena.png'); }
li.equip-kartac { background-image: url('../img/kartac.png'); }
li.equip-koberecky { background-image: url('../img/koberecky.png'); }
li.equip-napneu { background-image: url('../img/napneu.png'); }
li.equip-nakola { background-image: url('../img/nakola.png'); }
li.equip-obsluha { background-image: url('../img/obsluha.png'); }
li.equip-karta { background-image: url('../img/karta.png'); }
li.equip-menicka { background-image: url('../img/menicka.png'); }
li.equip-aplikace { background-image: url('../img/aplikace.png'); }
li.equip-ccs { background-image: url('../img/ccs.png'); }
li.equip-sleva { background-image: url('../img/sleva.png'); }
li.equip-ostrikovace { background-image: url('../img/ostrikovace.png'); }
li.equip-uterky { background-image: url('../img/uterky.png'); }
li.equip-casovac { background-image: url('../img/casovac.png'); }
li.equip-kava { background-image: url('../img/kava.png'); }
li.equip-kompresor { background-image: url('../img/kompresor.png'); }
li.equip-adresa { background-image: url('../img/adresa.png'); }
li.equip-navigovat { background-image: url('../img/navigovat.png'); }

/* ===== Footer ===== */
.site-footer {
  background: var(--color-bg-dark);
  color: #adb5bd;
  padding: 2rem 0;
  margin-top: 2rem;
  font-size: 0.85rem;
}

.site-footer a {
  color: #adb5bd;
}

.site-footer a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.site-footer-nav {
  border-bottom: 1px solid #495057;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.site-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.site-footer-copy {
  text-align: center;
  font-size: 0.8rem;
}

/* ===== Stránka Mapa ===== */
.page-map #map { min-height: calc(100vh - 75px); height: calc(100vh - 75px); width: 100%; margin: 0; padding: 0; }
.page-map .map-link { font-size: 1.1rem; font-weight: 600; color: #000; text-decoration: none; padding: 1em; display: block; }
.page-map .map-link:hover { text-decoration: underline; }

/* ===== Formuláře ===== */
.form-block { max-width: 500px; }
.form-block label { display: block; margin-bottom: 0.5em; }
.form-block input[type="text"],
.form-block input[type="email"],
.form-block textarea { width: 100%; padding: 0.5rem 0.75rem; font-size: 1rem; border: 1px solid var(--color-border); border-radius: 4px; }
.form-block textarea { min-height: 120px; resize: vertical; }
.form-block button { padding: 0.6rem 1.5rem; font-size: 1rem; background: var(--color-primary); color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.form-block button:hover { background: var(--color-primary-dark); }
.tip-success { background: #d4edda; border-left: 4px solid #28a745; padding: 1rem; margin: 1rem 0; }
.tip-error { background: #f8d7da; border-left: 4px solid #dc3545; padding: 1rem; margin: 1rem 0; }

/* ===== Utility ===== */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.tip { background: #f0f9ff; border-left: 4px solid var(--color-primary); padding: 1rem; margin: 1rem 0; }