/* WiMO� Site - Enhanced Styles with Pill-shaped Language Switch */

:root {
  --purple: #3B2E6E;
  --gold: #C6A74A;
  --ivory: #F5F3EF;
  --graphite: #2B2B2B;
  --lavender: #D8D2EA;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--ivory);
  color: var(--graphite);
  overflow-x: hidden; /* prevent accidental horizontal scroll on tiny screens */
}
body {
  font-family: 'Lora', Georgia, serif;
  line-height: 1.6;
}

.wrapper { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

header.hero {
  background: var(--ivory) url('assets/bg-pattern.svg');
  background-size: 240px 240px;
  padding: 56px 0 44px;
  border-bottom: 4px solid var(--lavender);
}
.brand {
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand img {
  width: clamp(120px, 33vw, 240px);
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.brand h1 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 2.0rem;
  color: var(--purple);
  margin: 0 0 6px;
}
.brand p.tagline {
  margin: 6px 0 0;
  color: var(--graphite);
  font-size: 1.05rem;
}

.header-row {
  display: flex;
  align-items: start;
  gap: 16px;
}
.header-row .spacer { flex: 1; }


/* Buttons & general layout */
.cta-row {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-family: 'Montserrat', Arial, sans-serif;
}
.btn-primary { background: var(--purple); color: white; }
.btn-outline { border: 2px solid var(--purple); color: var(--purple); }
.btn-gold { background: var(--gold); color: #1b1b1b; }

section {
  padding: 40px 0;
}
section h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--purple);
  font-size: 1.8rem;
  margin: 0 0 12px;
}
.lead { font-size: 1.06rem; max-width: 70ch; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.card {
  background: white;
  border: 1px solid #e6e3dc;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.card h3 {
  margin-top: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--purple);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}
.table th, .table td {
  border: 1px solid #e6e3dc;
  padding: 10px;
}
.table th {
  background: #f1eee8;
  text-align: left;
}

.signup {
  background: linear-gradient(180deg, #fff, #f7f5f1);
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  padding: 18px;
}
input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfc9be;
  border-radius: 6px;
  margin-right: 8px;
}
.form-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
@media (max-width: 560px) { .form-row { flex-direction: column; } }

footer {
  border-top: 4px solid var(--lavender);
  padding: 20px 0 40px;
  font-size: 0.95rem;
}
footer .cols {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) {
  footer .cols { grid-template-columns: 1fr; }
}
a { color: var(--purple); }
a:hover { color: #2a2151; }
.small { font-size: 0.9rem; color: #5a5a5a; }


/* Aktuality (seznam článků) */
.news-list{display:grid;grid-template-columns:1fr;gap:16px;margin-top:10px}
@media (min-width: 800px){.news-list{grid-template-columns:1fr 1fr}}
.news-item{background:#fff;border:1px solid #e6e3dc;border-radius:10px;padding:16px;box-shadow:0 2px 6px rgba(0,0,0,0.04)}
.news-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.news-item time{font-size:.95rem;color:#5a5a5a}


/* Kontakty */
.cols-contact{display:grid;grid-template-columns:2fr 1fr;gap:20px}
@media (max-width: 800px){.cols-contact{grid-template-columns:1fr}}
.contact-list{list-style:none;padding:0;margin:10px 0}
.contact-list li{margin:6px 0}
.contact-note{background:#fff;border:1px solid #e6e3dc;border-radius:12px;padding:16px}

/* --- Mobile-first fixes for menu/hero layout --- */
@media (max-width: 560px) {
  .brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .brand h1 {
    font-size: 1.6rem;
  }
  .cta-row {
    justify-content: center;
  }
  .btn {
    padding: 10px 14px;
  }
}

/* Prevent long content from causing horizontal overflow */
.wrapper, section, .card, .table, .news-item, footer {
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .hero h1 {
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: manual;
  }
}