/* Theme tokens (used by header/nav and special sections) */

:root {

  --primary-color: #181ea5;

  --primary-color-lighter: #ffffff;

  --secondary-color: #6c757d;

  --accent-color: #ffff00;

  --text-color: #212529;

  --background-color: #f8f9fa;

  --font-primary: 'Poppins', sans-serif;

}



html { scroll-behavior: smooth; }



/* Keep minimal body defaults; Tailwind handles most styling */

body {

  margin: 0;

  font-family: var(--font-primary);

  background-color: var(--background-color);

  color: var(--text-color);

  line-height: 1.6;

  min-height: 100vh;

}



/* Injected header/footer basics */

header {

  background: var(--primary-color);

  color: var(--text-color);

  padding: 20px;

  text-align: center;

  position: relative;

}



header .header-h1 {

  margin: 0;

  font-size: 3rem;

  font-weight: 600;

  color: var(--accent-color);

}



header h3 {

  margin-top: 10px;

  font-size: 1.25rem;

  font-weight: 300;

  color: #f8f9fa;

  display: flex;

  justify-content: center;

  align-items: center;

}



.nav-links { color: var(--accent-color); }



.logo {

  position: absolute;

  top: 30px;

  left: 120px;

  height: 90px;

  margin: 0;

  z-index: 10000;

}



/* Desktop nav underline effect */

nav {

  margin-top: 20px;

}



nav ul {

  list-style-type: none;

  padding: 0;

  display: flex;

  justify-content: center;

  gap: 20px;

  margin: 0;

  color: var(--text-color);

}



nav ul li a {

  color: #fff;

  text-decoration: none;

  font-weight: 400;

  position: relative;

  padding: 10px 0;

}



nav ul li a::after {

  content: '';

  position: absolute;

  width: 0;

  height: 2px;

  display: block;

  background: var(--accent-color);

  transition: width 0.3s ease-in-out;

  bottom: -5px;

  left: 50%;

  transform: translateX(-50%);

}



nav ul li a:hover::after {

  width: 100%;

  left: 0;

  transform: none;

}



/* Unified pill CTA */

.btn-primary,

.btn-pill-sm {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  background-color: var(--accent-color);

  color: #212529;

  border: none;

  border-radius: 9999px;

  text-decoration: none;

  font-weight: 600;

  cursor: pointer;

  transition: background-color 0.2s ease-in-out;

}

.btn-primary { padding: 14px 36px; font-size: 1rem; }

.btn-pill-sm { padding: 8px 18px; font-size: 0.875rem; }



.btn-primary:hover,

.btn-pill-sm:hover { background-color: #ffca2b; }



.btn-primary:focus-visible,

.btn-pill-sm:focus-visible,

.btn-secondary:focus-visible {

  outline: 2px solid var(--primary-color);

  outline-offset: 2px;

}



/* Outline secondary, same size as btn-primary */

.btn-secondary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  padding: 12px 34px; /* 2px less to compensate for the border */

  font-size: 1rem;

  font-weight: 600;

  background-color: transparent;

  color: var(--primary-color);

  border: 2px solid var(--primary-color);

  border-radius: 9999px;

  text-decoration: none;

  cursor: pointer;

  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

}

.btn-secondary:hover {

  background-color: var(--primary-color);

  color: #fff;

}



.btn-pill-sm.is-active {

  background-color: var(--primary-color);

  color: #fff;

}

.btn-pill-sm.is-active:hover { background-color: var(--primary-color); }

.btn-pill-sm[disabled],

.btn-pill-sm:disabled { opacity: 0.5; cursor: not-allowed; }



/* Footer baseline; Tailwind typically styles content within */

footer {

  background-color: var(--primary-color);

  color: #fff;

  text-align: center;

  padding: 30px 0;

  font-size: 0.875rem;

  width: 100%;

  z-index: 999;

  position: static;

}



html {

  min-height: 100%;

}



body {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



main {

  flex: 1;

}

footer a {

  color: var(--accent-color);

  text-decoration: none;

  font-weight: 600;

}

footer a:hover { text-decoration: underline; }



/* Skeleton loaders (used by Aktuality/Galerie/Album) */

.skeleton-shimmer {

  position: relative;

  overflow: hidden;

  background-color: #e5e7eb; /* gray-200 base */

}

.skeleton-shimmer::after {

  content: '';

  position: absolute;

  inset: 0;

  transform: translateX(-100%);

  background: linear-gradient(

    90deg,

    rgba(255, 255, 255, 0) 0%,

    rgba(255, 255, 255, 0.55) 50%,

    rgba(255, 255, 255, 0) 100%

  );

  animation: shimmer 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;

  will-change: transform;

}

@keyframes shimmer {

  100% { transform: translateX(100%); }

}

@media (prefers-reduced-motion: reduce) {

  .skeleton-shimmer::after { animation: none; }

}



/* Mobile/desktop header/nav behavior */

.sticky-nav {

  background-color: var(--primary-color);

  color: #fff;

  padding: 10px 0;

  position: sticky;

  top: 0;

  z-index: 1000;

  transition: all 0.3s ease-in-out;

}

.sticky-nav.shrink {

  padding: 5px 0;

  background-color: var(--secondary-color);

}



@media (min-width: 769px) {

  .mobile-nav { display: none; }

  .mobile-header { display: none; }

  nav { display: block; }

}



@media (max-width: 1360px) {

  header img:not(.mobile) { display: none; }

}



@media (max-width: 768px) {

  .mobile-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 5px;

  }

  .mobile-header .header-h1 {

    margin: 0;

    font-size: 1.2rem;

    font-weight: 600;

    color: var(--accent-color);

  }

  .mobile-header img { height: 50px; }



  .menu-toggle {

    display: flex;

    font-size: 1.5rem;

    color: #fff;

    background: none;

    border: none;

    cursor: pointer;

    z-index: 1001;

  }



  header .header-h1:not(.mobile) { display: none; }



  /* Hide desktop nav on mobile; mobile nav uses its own container */

  nav:not(.mobile-nav) ul { display: none; }

  nav:not(.mobile-nav) { display: none; }



  /* Full-screen slide-in mobile nav */

  .mobile-nav {

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

    background-color: var(--primary-color);

    position: fixed;

    inset: 0;

    margin-top: 0;

    z-index: 1000;

    transform: translateX(-100%);

    transition: transform 0.3s ease-in-out;

  }

  .mobile-nav.active { transform: translateX(0); }

  .mobile-nav ul { list-style-type: none; padding: 0; }

  .mobile-nav ul li { margin-bottom: 20px; }

  .mobile-nav a {

    color: #fff;

    text-decoration: none;

    font-size: 1.25rem;

  }

  .mobile-nav a:hover { text-decoration: underline; }

  .mobile-nav .close-btn {

    background: none; border: none; color: #fff;

    font-size: 2rem; cursor: pointer; margin-bottom: 20px;

    text-align: right; width: 100%;

  }

}



/* Special section: NÁBOR banner with image overlay */

#nabor {

  position: relative;

  padding: 60px 20px;

  color: #fff;

  background:

    linear-gradient(to bottom, rgba(26,41,168,0.45), rgba(26,41,168,0.60)),

    url('https://klsport.cz/images/pool-1200.webp') center/cover no-repeat;

}

#nabor .container { position: relative; z-index: 1; }

#nabor .section-title, #nabor p, #nabor li { color: #fff; }



@media (max-width: 768px) {

  #nabor {

    padding: 40px 16px;

    background:

      linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.70)),

      url('https://klsport.cz/images/pool-1200.webp') center/cover no-repeat;

  }

}

#nabor h2, #nabor a:not(.rounded-full) { color: var(--primary-color-lighter); }



/* Removed legacy:

   - .hero, .hero-text, .grid-container, .grid-item, .container layout

   - legacy form styling

   - .text-center, .trainer-class, .trainer-note

   - #key-persons layout helpers

   - .gallery-item/.album-photo hiding rules (to not conflict with Tailwind cards)

*/



    .pool-bg {

      background-color: #1a29a8;

      background-image:

        linear-gradient(rgba(20, 30, 140, 0.40), rgba(20, 30, 140, 0.40)),

        url('./images/pool-1200.webp');

      background-size: cover;

      background-position: center;

      background-repeat: no-repeat;

    }

    /* On <body>, pin the image to the viewport so it doesn't re-rasterize

       when document height changes (e.g. galleries lazy-loading). */

    body.pool-bg {

      background-image: none;

    }

    body.pool-bg::before {

      content: '';

      position: fixed;

      inset: 0;

      z-index: -1;

      background-image:

        linear-gradient(rgba(20, 30, 140, 0.40), rgba(20, 30, 140, 0.40)),

        url('./images/pool-1200.webp');

      background-size: cover;

      background-position: center;

      background-repeat: no-repeat;

      pointer-events: none;

    }