:root {
  --green: #2f855a;
  --mentol: #dcfce7;
  --blue-soft: #e0f2fe;
  --card: #ffffff;
  --accent: #16a34a;
  --accent-soft: rgba(22,163,74,.1);
  --text: #0f172a;
  --muted: #64748b;
  --max-w: 1180px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #e0f2fe 0%, #f8fafc 45%, #ffffff 100%);
  color: var(--text);
  line-height: 1.5;
  position: relative;
}
body::before {
  content: "";
  position: static;
  top: -110px;
  right: -80px;
  width: 290px;
  height: 290px;
  pointer-events: none;
  background:
    radial-gradient(circle at 40% 40%, rgba(190,242,100,.28) 0%, rgba(190,242,100,0) 60%),
    radial-gradient(circle at 70% 70%, rgba(125,211,252,.25) 0%, rgba(125,211,252,0) 55%);
  filter: drop-shadow(0 16px 35px rgba(15,118,110,.06));
  z-index: 1;
}
a { text-decoration: none; color: inherit; }

.topbar {
  background: linear-gradient(90deg, #0f766e, #22c55e);
  color: #ecfdf3;
  font-size: .7rem;
  position: relative;
  z-index: 2;
}
.topbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  gap: 1.5rem;
  padding: .35rem 1rem;
  flex-wrap: wrap;
}

header {
  position: static;
  top: 1.35rem;
  z-index: 990;
  background: linear-gradient(180deg, rgba(220,252,231,0.85) 0%, rgba(240,253,250,0.6) 100%);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15,23,42,.05);
}
.nav {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.1rem 1.4rem 1.1rem;
  min-height: 78px;
}
.brand-link { display:flex; align-items:center; gap:.6rem; }
.brand-img { height:50px; width:50px; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.15); object-fit:cover; }
.brand-link small { display:block; font-size:.65rem; color:#475569; }

nav ul { display:flex; gap:.5rem; list-style:none; }
nav li a {
  padding:.7rem 1.25rem;
  border-radius:999px;
  font-size:.95rem;
  font-weight:650;
  color:#0f172a;
  transition:all .25s ease;
}
nav li a:hover {
  background: rgba(224, 242, 254, .8);
  color: #0f766e;
  box-shadow: 0 5px 16px rgba(76, 196, 182, .12);
}
nav li a.active {
  background: rgba(220,252,231,.9);
  color: #166534;
  border: 1px solid rgba(22, 101, 52, 0.25);
}
.edit-link {
  background: rgba(255,255,255,.6);
  padding: .35rem .7rem;
  border-radius: .8rem;
  font-size: .8rem;
  box-shadow: 0 8px 20px rgba(15,23,42,.1);
}
.nav-btn { display:none; }

.hero {
  max-width: var(--max-w);
  margin: 1.4rem auto 2.6rem;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1.5rem;
  align-items: center;
  position: relative;
  min-height: 380px;
  z-index: 2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: -12% -5%;
  background:
    radial-gradient(circle at 15% 10%, rgba(224,242,254,.35) 0%, rgba(248,250,252,0) 50%),
    radial-gradient(circle at 90% 65%, rgba(220,252,231,.35) 0%, rgba(248,250,252,0) 45%);
  pointer-events: none;
  z-index: -1;
}
.hero-left h1 {
  font-size: clamp(2.35rem, 4.6vw, 3rem);
  margin-bottom: .6rem;
  letter-spacing: -.03em;
}
.hero-left .lead { color: #475569; max-width: 520px; }
.eyebrow {
  display:inline-flex; gap:.3rem; align-items:center;
  text-transform:uppercase; letter-spacing:.06em;
  font-size:.65rem; color:#0f766e;
  background: rgba(222,247,236,.6);
  padding:.25rem .6rem; border-radius:999px;
}
.hero-actions { display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.btn { display:inline-flex; gap:.4rem; align-items:center; border-radius:.8rem; padding:.5rem 1.05rem; border:none; cursor:pointer; font-weight:600; font-size:.8rem; }
.btn.primary { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color:#fff; }
.btn.ghost { background: rgba(255,255,255,.6); color:#166534; }

.hero-media {
  background: radial-gradient(circle at 10% 10%, #fff 0%, #dcfce7 60%);
  border-radius: 1.3rem;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15,23,42,.05);
}
.hero-media::before {
  content:"";
  position:absolute;
  top:-35px; right:-40px;
  width:130px; height:130px;
  background: url("img/logo-ms-hnevosice.png") center/cover no-repeat;
  opacity:.35;
}
.hero-card {
  background: rgba(255,255,255,.92);
  border-radius: 1rem;
  padding: 1rem;
  width: min(330px, 100%);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 12px 35px rgba(148, 163, 184, .15);
}

.quick-links {
  max-width: var(--max-w);
  margin: 0 auto 2.1rem;
  padding: 0 1rem;
}
.quick-links .inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
  gap: .9rem;
}
.ql-card {
  background: #fff;
  border-radius: 1rem;
  padding: .7rem .7rem .8rem;
  box-shadow: 0 8px 22px rgba(15,23,42,.03);
  border: 1px solid rgba(148,163,184,.05);
}
.ql-card:nth-child(1){ background: linear-gradient(140deg, #fff 0%, #e0f2fe 100%); }
.ql-card:nth-child(2){ background: linear-gradient(140deg, #fff 0%, #dcfce7 100%); }
.ql-card:nth-child(3){ background: linear-gradient(140deg, #fff 0%, #fef9c3 100%); }
.ql-card:nth-child(4){ background: linear-gradient(140deg, #fff 0%, #e2e8f0 100%); }

section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem 1rem 1rem;
}
.section-title {
  font-size: 1.3rem;
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  margin-bottom: 1.05rem;
}
.tag {
  background: rgba(34, 197, 94, .12);
  border-radius: 999px;
  padding: .2rem .5rem;
  font-size: .65rem;
  color: #166534;
}

.timeline { display:grid; gap:1rem; }
.tl-item {
  background:#fff;
  border-radius:1rem;
  padding:.85rem .9rem 1rem;
  box-shadow:0 8px 20px rgba(15,23,42,.03);
  border-left:5px solid rgba(34,197,94,.2);
}
.tl-item:nth-child(2){ border-left-color: rgba(59,130,246,.2); }
.tl-item:nth-child(3){ border-left-color: rgba(14,165,233,.25); }
.tl-meta { font-size:.65rem; color:#94a3b8; margin-top:.35rem; }

footer {
  text-align:center;
  padding:2.2rem 1rem 3.1rem;
  font-size:.75rem;
  color:#94a3b8;
  position:relative;
  overflow:hidden;
}
footer::after {
  content:"";
  position:absolute;
  bottom:-120px;
  left:-60px;
  width:260px; height:260px;
  background:
    radial-gradient(circle at 50% 50%, rgba(224,242,254,.4) 0%, rgba(224,242,254,0) 65%),
    radial-gradient(circle at 90% 10%, rgba(190,242,100,.15) 0%, rgba(190,242,100,0) 55%);
  pointer-events:none;
  z-index:-1;
}

/* cookies from base stay */
.cookie-overlay { position: static; inset:0; background:rgba(15,23,42,.25); z-index:9998; backdrop-filter:blur(2px); }
.cookie-banner { position: static; right:1.2rem; bottom:1.2rem; max-width:420px; background:#fff; border-radius:1rem; box-shadow:0 18px 50px rgba(15,23,42,.25); z-index:9999; padding:1rem; display:none; }

/* mobile */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  nav ul { position: static; top:60px; left:0; right:0; background:rgba(241,245,249,.98); display:none; flex-wrap:wrap; gap:.35rem; padding:.7rem 1rem 1.2rem; }
  nav ul.show { display:flex; }
  .nav-btn { display:inline-flex; border:none; background:rgba(255,255,255,.6); width:36px; height:32px; border-radius:.7rem; align-items:center; justify-content:center; }
}


/* fotka školky pod hero */
.school-photo-wrap {
  max-width: 1180px;
  margin: 0 auto 2.2rem;
  padding: 0 1rem;
}
.school-photo-inner {
  background: #fff;
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(15,23,42,.04);
}
.school-photo-img {
  width: 100%;
  display: block;
  max-height: 280px;
  object-fit: cover;
}
@media (max-width: 700px) {
  .hero {
    grid-template-columns: 1fr;
    margin: 1.6rem auto 1.8rem;
    padding: 0 1rem;
  }

  .hero-left,
  .hero-media,
  .hero-left *,
  .hero-media * {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .hero-media {
    min-height: 220px;
  }

  .school-photo-wrap,
  .school-photo-inner,
  .school-photo-img {
    display: none !important;
  }
}

/* ===== Designer pass: centered, modern navigation (v6) ===== */
header { position: static; top: 0; z-index: 100; }
.topbar { position: static; top: 0; z-index: 110; }

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  background: linear-gradient(180deg, rgba(236,253,245,.85), rgba(255,255,255,.75));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

/* Center the nav block horizontally regardless of brand/tools */
.nav nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Keep UL tidy and centered */
.nav nav ul {
  display: flex;
  gap: .4rem;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Refine links: slightly larger, sleeker hover/active indicator */
.nav li a {
  position: relative;
  padding: .8rem 1.1rem;
  border-radius: 999px;
  font-weight: 650;
  text-decoration: none;
  color: var(--text);
  transition: color .2s ease, background .2s ease;
}

.nav li a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: #16a34a;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  opacity: .85;
}

.nav li a:hover { background: rgba(224, 242, 254, .65); color: #065f46; }
.nav li a:hover::after { transform: scaleX(1); }

.nav li a.active {
  background: rgba(220,252,231,.9);
  color: #166534;
  border: 1px solid rgba(22,101,52,.22);
}
.nav li a.active::after { transform: scaleX(1); }

/* Right-side tools stay at the edge */
.edit-link, .nav-btn { margin-left: .4rem; }

/* Responsive – on narrow screens, fall back to full-width stacked menu handled by existing JS */
@media (max-width: 980px) {
  .nav nav {
    position: static;
    transform: none;
    width: 100%;
  }
  .nav { flex-wrap: wrap; gap: .5rem; }
  .nav nav ul { flex-wrap: wrap; justify-content: flex-start; }
}



/* ===== v7: Two-row centered navigation with green gradient ===== */
header { position: static; top: 0; z-index: 120; }

/* Header background with subtle green gradient */
.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1.2rem .7rem;
  background: linear-gradient(180deg, rgba(209,250,229,.92) 0%, rgba(255,255,255,.85) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Brand on the left */
.nav .brand { grid-column: 1; }

/* Center block for nav; allow two rows via wrapping */
.nav nav {
  grid-column: 2;
  justify-self: center;
  position: static;
  transform: none;
  width: 100%;
}

/* Two-row flexible list */
.nav nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .5rem; /* row gap / column gap */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Right-side tools */
.edit-link, .nav-btn { grid-column: 3; justify-self: end; }

/* Link tokens */
.nav li a {
  padding: .6rem .95rem;
  border-radius: 999px;
  font-weight: 650;
  line-height: 1;
}

/* Underline accent on hover/active */
.nav li a::after { left: 12px; right: 12px; bottom: 6px; height: 2px; }

/* Ensure header expands to second row height */
.nav { min-height: unset; }

/* Responsive small screens: keep wrap but align left */
@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav .brand { grid-column: 1; }
  .edit-link, .nav-btn { display:none; }
  .nav nav { grid-column: 1 / -1; justify-self: start; }
  .nav nav ul { justify-content: flex-start; }
}



/* === responsive/nav improvements === */
body.no-scroll { overflow: hidden; }

@media (max-width: 980px) {
  nav ul { 
    position: static; top: 60px; left: 0; right: 0;
    display: none;
  }
  nav ul.show { display: flex; }
}
/* === end improvements === */


/* Mobile menu fixes */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    background: #ffffff;
    z-index: 9999;
    padding: 1rem;
  }
  nav ul.show { display: flex; }
}

/* Cookie banner z-index fix */
#cookie-banner, .cookie-banner, #cookies {
  z-index: 99999 !important;
}

/* COOKIE SYSTEM */
.cookie-banner {position: static;bottom:0;left:0;right:0;background:#ffffffee;padding:1rem;z-index:999999;display:none;backdrop-filter:blur(8px);}
.cookie-inner {max-width:900px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.cookie-buttons button{padding:.6rem 1rem;border-radius:8px;border:none;font-weight:600;cursor:pointer;}
.cb-accept{background:#16a34a;color:white;}
.cb-reject{background:#e2e8f0;}
.cb-settings{background:#0ea5e9;color:white;}

.cookie-modal{position: static;top:0;left:0;right:0;bottom:0;background:#0005;display:none;align-items:center;justify-content:center;z-index:9999999;}
.cm-box{background:white;padding:2rem;border-radius:12px;max-width:420px;width:90%;box-shadow:0 10px 30px #0003;}
.cm-item{display:flex;justify-content:space-between;margin:.8rem 0;}
.cm-actions button{margin-right:.5rem;padding:.6rem 1rem;border-radius:6px;border:none;font-weight:600;cursor:pointer;}



/* === FULL MOBILE RESPONSIVE FIX PACK v1 === */

/* GLOBAL MOBILE RESET */
@media (max-width: 768px) {
  body { font-size: 16px; line-height: 1.5; }

  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.3rem; }

  section { padding: 1.2rem 0.8rem; }
}

/* FIX: HEADER & TOP BAR */
@media (max-width: 768px) {
  .top-bar {
    flex-direction: column;
    text-align: center;
    gap: .3rem;
    padding: .4rem;
  }
}

/* FIX: MENU – CENTERED + HAMBURGER */
@media (max-width: 850px) {
  nav { flex-direction: row; justify-content: space-between; }

  nav ul {
    position: static;
    top: 70px;
    left: 0; right: 0;
    background: white;
    flex-direction: column;
    padding: 1.5rem;
    display: none;
    gap: 1rem;
    text-align: center;
    z-index: 99999;
  }

  nav ul.show { display: flex; }

  nav li a {
    font-size: 1.2rem;
    padding: 0.9rem;
    width: 100%;
    display: block;
  }
}

/* FIX: HERO SECTION */
@media (max-width: 768px) {
  .hero, .hero img {
    height: auto !important;
    min-height: 240px;
    object-fit: cover;
  }

  .hero .hero-text {
    padding: 1rem;
    font-size: 1rem;
  }
}

/* FIX: GRID CARDS */
@media (max-width: 768px) {
  .cards, .quick-links .inner {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* FIX: FOOTER */
@media (max-width: 768px) {
  footer .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 1.2rem;
  }
}

/* FIX: TABLES */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    width: 100%;
  }
}

/* Two-row menu */
#nav-ul{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
#nav-ul li{white-space:nowrap;}

/* FIX4: Perfect mobile text wrapping */
@media (max-width:700px){
  .hero, .hero *{
    max-width:100% !important;
    width:100% !important;
    word-wrap:break-word !important;
    overflow-wrap:break-word !important;
    white-space:normal !important;
    hyphens:auto !important;
  }
  .hero-left, .hero-media, .hero-card{
    display:block !important;
  }
}