/* ==========================================================================

   MATERSKÁ ŠKOLA ČACHTICE – HLAVNÝ ŠTÝL (CSS3 / MODERN RESPONSIVE)

   Zladené s kresba-pozadie.jpg a logom školy (#9ACB00, #E95800, #E6C600)

   ========================================================================== */



:root {

  /* Farebná paleta inšpirovaná logom a prírodou Čachtíc */

  --color-primary: #8AB80A;          /* Svieža trávová zeleň (Zdravé dieťa) */

  --color-primary-dark: #6C9405;     /* Tmavšia zeleň pre hover a kontrast */

  --color-primary-darker: #4A6703;   /* Hlboká lesná zeleň pre pätičku */

  --color-primary-light: #F2F9DE;    /* Jemný pastelový zelený podklad */

  

  --color-orange: #E86100;           /* Teplá slnečná oranžová z loga */

  --color-orange-dark: #C75200;      /* Tmavšia oranžová */

  --color-orange-light: #FFF1E6;     /* Pastelový oranžový akcent */



  --color-yellow: #F6BC18;           /* Slniečková žltá z loga */

  --color-yellow-light: #FFF9E6;     /* Mäkký žltý podklad */



  --color-blue: #2298A6;             /* Nebeská tyrkysová z kresby */

  --color-blue-dark: #16707C;        /* Tmavá modrá */

  --color-blue-light: #E7F6F8;       /* Svieži oblohový akcent */



  --color-text-main: #232B20;        /* Vysoko kontrastná lesná tmavá */

  --color-text-muted: #546050;       /* Tlmený text s overeným kontrastom */

  --color-bg-body: #FAF8F3;          /* Teplý papierový podklad (neťahá oči) */

  --color-bg-card: #FFFFFF;          /* Čistá biela pre karty a bloky */

  --color-border: #E8E5DC;          /* Jemný okraj kariet */



  /* Typografia a škálovanie s plnou podporou slovenskej diakritiky (č, š, ž, ť, ď, ľ, ĺ, ŕ, ä, ô) */

  --font-family-display: 'Quicksand', 'Nunito', system-ui, -apple-system, sans-serif;

  --font-family-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --font-base-size: 16px;

  --line-height-base: 1.65;

  

  /* Hravé zaoblenia a tiene */

  --radius-sm: 8px;

  --radius-md: 16px;

  --radius-lg: 24px;

  --radius-xl: 36px;

  --radius-pill: 9999px;



  --shadow-subtle: 0 4px 14px rgba(40, 50, 30, 0.06);

  --shadow-card: 0 8px 24px rgba(40, 50, 30, 0.08);

  --shadow-hover: 0 14px 32px rgba(40, 50, 30, 0.12);



  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



/* ==========================================================================

   REŽIM VYSOKÉHO KONTRASTU & PRÍSTUPNOSŤ (WCAG 2.1 AA)

   ========================================================================== */

body.high-contrast {

  --color-bg-body: #000000;

  --color-bg-card: #121212;

  --color-text-main: #FFFFFF;

  --color-text-muted: #E0E0E0;

  --color-border: #FFFF00;

  --color-primary: #FFFF00;

  --color-primary-dark: #FFD700;

  --color-primary-darker: #000000;

  --color-primary-light: #222200;

  --color-orange: #FFA500;

  --color-orange-light: #331A00;

  --color-blue: #00FFFF;

  --color-blue-light: #002233;

}



body.high-contrast a {

  color: #00FFFF !important;

  text-decoration: underline !important;

}



body.high-contrast .site-header,

body.high-contrast .site-footer {

  background: #000000 !important;

  border-bottom: 2px solid #FFFF00;

}



/* Zväčšenie písma */

body.font-lg {

  --font-base-size: 18.5px;

}

body.font-xl {

  --font-base-size: 21px;

}



/* Klávesnicový Skip-to-content odkaz pre čítačky */

.skip-link {

  position: absolute;

  top: -60px;

  left: 20px;

  background: var(--color-orange);

  color: #ffffff;

  padding: 12px 20px;

  font-weight: 700;

  border-radius: var(--radius-sm);

  z-index: 10000;

  transition: top 0.2s ease;

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}

.skip-link:focus {

  top: 15px;

}



/* ==========================================================================

   ZÁKLADNÝ RESET A GLOBÁLNE PRVKY

   ========================================================================== */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  font-size: var(--font-base-size);

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

}



body {

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

  color: var(--color-text-main);

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

  line-height: var(--line-height-base);

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  overflow-x: hidden;

  text-rendering: optimizeLegibility;

}



img, svg {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

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

  text-decoration: none;

  transition: color var(--transition-fast);

}

a:hover, a:focus-visible {

  color: var(--color-orange);

}



button {

  font-family: inherit;

  cursor: pointer;

  border: none;

  background: none;

}



ul, ol {

  list-style: none;

}



h1, h2, h3, h4, h5, h6 {

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

  font-weight: 700;

  line-height: 1.25;

  color: var(--color-text-main);

}



.container {

  width: 100%;

  max-width: 1240px;

  margin-left: auto;

  margin-right: auto;

  padding-left: 20px;

  padding-right: 20px;

}



/* ==========================================================================

   TOP NOTIFICATION & ACCESSIBILITY BAR

   ========================================================================== */

.top-bar {

  background-color: #2F3E1A;

  color: #F1F5E9;

  font-size: 0.85rem;

  padding: 6px 0;

  border-bottom: 1px solid rgba(255,255,255,0.1);

}

.top-bar .container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

}

.top-bar-info {

  display: flex;

  align-items: center;

  gap: 16px;

  flex-wrap: wrap;

}

.top-bar-item {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: #E2ECD2;

}

.top-bar-item a {

  color: #FFFFFF;

  font-weight: 600;

}

.top-bar-item a:hover {

  color: var(--color-yellow);

}

.top-bar-badge {

  background: rgba(255,255,255,0.15);

  padding: 2px 8px;

  border-radius: var(--radius-pill);

  font-size: 0.75rem;

  letter-spacing: 0.5px;

}



.a11y-controls {

  display: flex;

  align-items: center;

  gap: 8px;

}

.a11y-btn {

  background: rgba(255,255,255,0.12);

  color: #ffffff;

  border: 1px solid rgba(255,255,255,0.2);

  border-radius: 6px;

  padding: 3px 8px;

  font-size: 0.78rem;

  font-weight: 700;

  transition: all var(--transition-fast);

}

.a11y-btn:hover, .a11y-btn:focus-visible {

  background: var(--color-orange);

  border-color: var(--color-orange);

}



/* ==========================================================================

   HLAVIČKA STRÁNKY & NAVIGÁCIA (BEZ PREBLIKÁVANIA)

   ========================================================================== */

.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background-color: rgba(255, 255, 255, 0.96);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border-bottom: 2px solid rgba(138, 184, 10, 0.15);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

  transition: all var(--transition-normal);

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 0;

  gap: 16px;

}



.brand-link {

  display: flex;

  align-items: center;

  gap: 14px;

  text-decoration: none;

  flex-shrink: 0;

}

.brand-logo {

  width: 58px;

  height: 58px;

  object-fit: contain;

  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));

  transition: transform var(--transition-fast);

}

.brand-link:hover .brand-logo {

  transform: rotate(-4deg) scale(1.05);

}

.brand-texts {

  display: flex;

  flex-direction: column;

}

.brand-title {

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--color-text-main);

  letter-spacing: -0.3px;

  line-height: 1.2;

}

.brand-subtitle {

  font-size: 0.8rem;

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

  font-weight: 600;

}



/* Navigačné menu (Desktop) */

.main-nav {

  display: flex;

  align-items: center;

}

.nav-list {

  display: flex;

  align-items: center;

  gap: 6px;

}

.nav-item {

  position: relative;

}



.nav-link {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 9px 14px;

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--color-text-main);

  border-radius: var(--radius-pill);

  transition: background-color var(--transition-fast), color var(--transition-fast);

  cursor: pointer;

  background: transparent;

  border: none;

  font-family: inherit;

  box-sizing: border-box;

  white-space: nowrap;

}

.nav-link:hover,

.nav-link.active,

.nav-item:hover > .nav-link {

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

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

}

.nav-link.active {

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

  color: #ffffff !important;

}



/* Tlačidlo rozbalenia podmenu */

.nav-dropdown-btn {

  display: inline-flex;

  align-items: center;

  gap: 5px;

}

.nav-arrow {

  font-size: 0.75rem;

  transition: transform var(--transition-fast);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 16px;

  height: 16px;

  flex-shrink: 0;

  transform-origin: center center;

}

.nav-item.is-expanded > .nav-dropdown-btn .nav-arrow {

  transform: rotate(180deg);

}



/* Skrytie mobilných prvkov na desktope */

.mobile-drawer-header,

.mobile-drawer-footer,

.nav-backdrop {

  display: none;

}



/* Dropdown menu */

.nav-dropdown {

  position: absolute;

  top: 100%;

  left: 0;

  min-width: 250px;

  background: #ffffff;

  border-radius: var(--radius-md);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

  border: 1px solid var(--color-border);

  padding: 8px;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: all var(--transition-fast);

  z-index: 1010;

}

.nav-item:hover .nav-dropdown,

.nav-item:focus-within .nav-dropdown,

.nav-item.is-expanded .nav-dropdown {

  opacity: 1;

  visibility: visible;

  transform: translateY(4px);

}

.dropdown-link {

  display: block;

  padding: 9px 14px;

  border-radius: var(--radius-sm);

  color: var(--color-text-main);

  font-size: 0.9rem;

  font-weight: 600;

  transition: all var(--transition-fast);

}

.dropdown-link:hover,

.dropdown-link.active {

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

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

  padding-left: 18px;

}



/* CTA Tlačidlo v menu (napr. Zápis / Rýchly kontakt) */

.nav-cta {

  background: linear-gradient(135deg, var(--color-orange), #FF8533);

  color: #ffffff !important;

  box-shadow: 0 4px 12px rgba(232, 97, 0, 0.25);

}

.nav-cta:hover {

  background: linear-gradient(135deg, var(--color-orange-dark), var(--color-orange));

  transform: translateY(-1px);

}



/* Mobilné hamburger tlačidlo */

.mobile-toggle {

  display: none;

  flex-direction: column;

  justify-content: space-between;

  width: 32px;

  height: 24px;

  padding: 0;

}

.mobile-toggle span {

  display: block;

  height: 3px;

  width: 100%;

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

  border-radius: 3px;

  transition: all var(--transition-fast);

}

.mobile-toggle.is-active span:nth-child(1) {

  transform: translateY(10.5px) rotate(45deg);

}

.mobile-toggle.is-active span:nth-child(2) {

  opacity: 0;

}

.mobile-toggle.is-active span:nth-child(3) {

  transform: translateY(-10.5px) rotate(-45deg);

}



/* ==========================================================================

   HLADKÝ BEZPREBLIKOVÝ PRECHOD PODSTRÁNOK (SPA / NO-FLICKER CONTAINER)

   ========================================================================== */

#view-container {

  flex: 1;

  position: relative;

  min-height: calc(100vh - 400px);

}



.page-view {

  opacity: 1;

  transform: translateY(0);

  transition: opacity 0.26s ease-out, transform 0.26s ease-out;

}



.page-view.view-exit {

  opacity: 0;

  transform: translateY(10px);

}



.page-view.view-enter {

  opacity: 0;

  transform: translateY(-8px);

}



/* ==========================================================================

   HERO SEKCIA S KRESBOU A ZDRAVÝM DIEŤAŤOM

   ========================================================================== */

.hero-section {

  position: relative;

  background-color: #E8F3D6;

  background-image: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(242,249,222,0.85) 60%), url('../images/kresba-pozadie.jpg');

  background-size: cover;

  background-position: center;

  padding: 60px 0 80px;

  overflow: hidden;

  border-bottom: 3px dashed rgba(138, 184, 10, 0.4);

}



.hero-grid {

  display: grid;

  grid-template-columns: 1.25fr 0.95fr;

  align-items: center;

  gap: 40px;

}



.hero-content {

  position: relative;

  z-index: 2;

}



.hero-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: #ffffff;

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

  font-weight: 700;

  font-size: 0.88rem;

  padding: 6px 16px;

  border-radius: var(--radius-pill);

  box-shadow: var(--shadow-subtle);

  margin-bottom: 20px;

  border: 1px solid rgba(138, 184, 10, 0.25);

}



.hero-title {

  font-size: clamp(2.2rem, 4.2vw, 3.4rem);

  font-weight: 800;

  letter-spacing: -0.8px;

  line-height: 1.15;

  margin-bottom: 20px;

  color: #1F281B;

}

.hero-title span.accent-green {

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

  position: relative;

  display: inline-block;

}

.hero-title span.accent-orange {

  color: var(--color-orange);

}



.hero-lead {

  font-size: 1.15rem;

  line-height: 1.65;

  color: #384632;

  margin-bottom: 28px;

  max-width: 620px;

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-bottom: 32px;

}



/* Poézia a motto citát */

.hero-quote-box {

  background: rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(8px);

  border-left: 4px solid var(--color-yellow);

  padding: 16px 20px;

  border-radius: 0 var(--radius-md) var(--radius-md) 0;

  font-style: italic;

  font-size: 0.95rem;

  color: #404B3B;

  box-shadow: var(--shadow-subtle);

}

.quote-author {

  display: block;

  margin-top: 6px;

  font-weight: 700;

  font-style: normal;

  font-size: 0.85rem;

  color: var(--color-orange);

}



/* Hero vizuálna karta */

.hero-card-showcase {

  position: relative;

  z-index: 2;

  display: flex;

  justify-content: center;

}

.hero-card-inner {

  background: #ffffff;

  border-radius: var(--radius-xl);

  padding: 24px;

  box-shadow: 0 16px 40px rgba(70, 90, 40, 0.14);

  border: 3px solid #ffffff;

  position: relative;

  width: 100%;

  max-width: 440px;

  text-align: center;

}

.hero-badge-float {

  position: absolute;

  top: -14px;

  right: 20px;

  background: var(--color-yellow);

  color: #4A3A00;

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

  font-weight: 700;

  font-size: 0.85rem;

  padding: 6px 14px;

  border-radius: var(--radius-pill);

  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

  transform: rotate(3deg);

}

.hero-drawing-frame {

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: 0 6px 16px rgba(0,0,0,0.08);

  margin-bottom: 18px;

  border: 2px solid #F1EFE8;

}

.hero-quick-stats {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  padding-top: 8px;

  border-top: 1px solid #EFECE4;

}

.stat-box {

  padding: 6px;

}

.stat-num {

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

  font-size: 1.5rem;

  font-weight: 800;

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

  line-height: 1;

}

.stat-lbl {

  font-size: 0.76rem;

  font-weight: 700;

  color: var(--color-text-muted);

}



/* ==========================================================================

   TLAČIDLÁ & KOMPONENTY

   ========================================================================== */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 12px 24px;

  border-radius: var(--radius-pill);

  font-weight: 700;

  font-size: 0.98rem;

  text-align: center;

  transition: all var(--transition-fast);

  text-decoration: none;

  cursor: pointer;

}

.btn-primary {

  background: var(--color-primary);

  color: #ffffff !important;

  box-shadow: 0 4px 14px rgba(138, 184, 10, 0.35);

}

.btn-primary:hover {

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

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(138, 184, 10, 0.45);

}



.btn-secondary {

  background: #ffffff;

  color: var(--color-text-main) !important;

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

  box-shadow: var(--shadow-subtle);

}

.btn-secondary:hover {

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

  color: var(--color-primary-dark) !important;

  transform: translateY(-2px);

}



.btn-orange {

  background: var(--color-orange);

  color: #ffffff !important;

  box-shadow: 0 4px 14px rgba(232, 97, 0, 0.3);

}

.btn-orange:hover {

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

  transform: translateY(-2px);

}



.btn-sm {

  padding: 7px 16px;

  font-size: 0.85rem;

}



/* Rýchle dlaždice / Quick cards */

.quick-links-bar {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: 18px;

  margin-top: -36px;

  position: relative;

  z-index: 10;

}

.quick-card {

  background: #ffffff;

  padding: 22px;

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-card);

  border: 1px solid var(--color-border);

  display: flex;

  align-items: flex-start;

  gap: 16px;

  transition: all var(--transition-fast);

  text-decoration: none;

  color: inherit;

}

.quick-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-hover);

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

}

.quick-icon {

  width: 52px;

  height: 52px;

  border-radius: var(--radius-md);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  font-size: 1.5rem;

}

.quick-icon.green { background: var(--color-primary-light); color: var(--color-primary-dark); }

.quick-icon.orange { background: var(--color-orange-light); color: var(--color-orange); }

.quick-icon.yellow { background: var(--color-yellow-light); color: #8A6400; }

.quick-icon.blue { background: var(--color-blue-light); color: var(--color-blue); }



.quick-info h3 {

  font-size: 1.05rem;

  margin-bottom: 4px;

}

.quick-info p {

  font-size: 0.85rem;

  color: var(--color-text-muted);

  line-height: 1.4;

}



/* ==========================================================================

   OBSAHOVÉ BLOKY & ŠTÝLY SEKCII

   ========================================================================== */

.section-pad {

  padding: 64px 0;

}



.section-head {

  text-align: center;

  max-width: 720px;

  margin: 0 auto 46px;

}

.section-tag {

  display: inline-block;

  font-size: 0.82rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1px;

  color: var(--color-orange);

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

  padding: 4px 14px;

  border-radius: var(--radius-pill);

  margin-bottom: 12px;

}

.section-title {

  font-size: clamp(1.8rem, 3.2vw, 2.4rem);

  letter-spacing: -0.5px;

  margin-bottom: 14px;

}

.section-subtitle {

  font-size: 1.05rem;

  color: var(--color-text-muted);

  line-height: 1.6;

}



/* Karty a boxy */

.card {

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

  border-radius: var(--radius-lg);

  padding: 30px;

  box-shadow: var(--shadow-card);

  border: 1px solid var(--color-border);

  transition: all var(--transition-fast);

}

.card:hover {

  box-shadow: var(--shadow-hover);

}



.grid-2 {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

}

.grid-3 {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 26px;

}

.grid-4 {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

}



/* Triedy v škôlke (Včielky, Lienky, Motýliky...) */

.class-card {

  background: #ffffff;

  border-radius: var(--radius-lg);

  padding: 24px;

  border-top: 6px solid var(--color-primary);

  box-shadow: var(--shadow-card);

  position: relative;

  transition: all var(--transition-fast);

}

.class-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-hover);

}

.class-card.lienky { border-top-color: #E53935; }

.class-card.vcielky { border-top-color: var(--color-yellow); }

.class-card.motyliky { border-top-color: var(--color-blue); }

.class-card.zabky { border-top-color: var(--color-primary); }

.class-card.sovicky { border-top-color: #8E24AA; }



.class-icon {

  font-size: 2.2rem;

  margin-bottom: 12px;

}

.class-age {

  display: inline-block;

  font-size: 0.8rem;

  font-weight: 700;

  padding: 3px 10px;

  border-radius: var(--radius-pill);

  background: #F0EFEA;

  color: var(--color-text-muted);

  margin-bottom: 12px;

}



/* Tlačivá a dokumenty zoznam */

.doc-search-box {

  margin-bottom: 24px;

  position: relative;

}

.doc-search-input {

  width: 100%;

  padding: 14px 20px 14px 44px;

  font-size: 1rem;

  border-radius: var(--radius-pill);

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

  background: #ffffff;

  outline: none;

  font-family: inherit;

  transition: border-color var(--transition-fast);

}

.doc-search-input:focus {

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

  box-shadow: 0 0 0 3px rgba(138, 184, 10, 0.2);

}

.doc-search-icon {

  position: absolute;

  left: 16px;

  top: 50%;

  transform: translateY(-50%);

  color: #8A9A80;

}



.doc-list {

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.doc-item {

  background: #ffffff;

  border-radius: var(--radius-md);

  padding: 18px 24px;

  border: 1px solid var(--color-border);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  transition: all var(--transition-fast);

}

.doc-item:hover {

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

  background: #FDFFF9;

  transform: translateX(4px);

}

.doc-details {

  display: flex;

  align-items: center;

  gap: 14px;

}

.doc-icon-badge {

  width: 44px;

  height: 44px;

  border-radius: var(--radius-sm);

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

  color: var(--color-orange);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 0.85rem;

  flex-shrink: 0;

}

.doc-name {

  font-weight: 700;

  color: var(--color-text-main);

  font-size: 1rem;

  margin-bottom: 3px;

}

.doc-meta {

  font-size: 0.82rem;

  color: var(--color-text-muted);

}



/* ==========================================================================

   FOTOGALÉRIA & LIGHTBOX

   ========================================================================== */

.gallery-filters {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 32px;

}

.filter-btn {

  padding: 8px 18px;

  border-radius: var(--radius-pill);

  background: #ffffff;

  border: 1px solid var(--color-border);

  color: var(--color-text-muted);

  font-weight: 700;

  font-size: 0.9rem;

  transition: all var(--transition-fast);

}

.filter-btn:hover,

.filter-btn.active {

  background: var(--color-primary);

  color: #ffffff;

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

}



.gallery-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 20px;

}

.gallery-item {

  position: relative;

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: var(--shadow-card);

  background: #ffffff;

  aspect-ratio: 4 / 3;

  cursor: pointer;

  border: 2px solid #ffffff;

}

.gallery-thumb {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform var(--transition-normal);

}

.gallery-item:hover .gallery-thumb {

  transform: scale(1.06);

}

.gallery-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(35, 43, 32, 0.85) 0%, rgba(35, 43, 32, 0.1) 60%, transparent 100%);

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 16px;

  color: #ffffff;

  opacity: 0;

  transition: opacity var(--transition-fast);

}

.gallery-item:hover .gallery-overlay,

.gallery-item:focus-visible .gallery-overlay {

  opacity: 1;

}

.gallery-title {

  font-size: 0.95rem;

  font-weight: 700;

}

.gallery-cat {

  font-size: 0.78rem;

  color: var(--color-yellow);

}



/* Lightbox Modal */

.lightbox-modal {

  position: fixed;

  inset: 0;

  background: rgba(10, 15, 8, 0.92);

  backdrop-filter: blur(8px);

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  opacity: 0;

  visibility: hidden;

  transition: all var(--transition-fast);

}

.lightbox-modal.is-open {

  opacity: 1;

  visibility: visible;

}

.lightbox-content {

  position: relative;

  max-width: 900px;

  width: 100%;

  max-height: 90vh;

  display: flex;

  flex-direction: column;

  align-items: center;

}

.lightbox-img {

  max-height: 75vh;

  max-width: 100%;

  object-fit: contain;

  border-radius: var(--radius-md);

  box-shadow: 0 10px 30px rgba(0,0,0,0.5);

}

.lightbox-caption {

  color: #ffffff;

  margin-top: 14px;

  text-align: center;

  font-size: 1.05rem;

  font-weight: 600;

}

.lightbox-close {

  position: absolute;

  top: -45px;

  right: 0;

  color: #ffffff;

  font-size: 2rem;

  padding: 6px;

  line-height: 1;

}



/* ==========================================================================

   UNIKÁTNY SVG FOOTER S HISTORICKÝMI DOMINANTAMI ČACHTÍC

   ========================================================================== */

.site-footer {

  margin-top: auto;

  position: relative;

  background-color: transparent;

}



.footer-skyline-wrapper {

  position: relative;

  width: 100%;

  line-height: 0;

  margin-bottom: -1px; /* zamedzenie tenkej škáry medzi SVG a podfarbením */

  overflow: hidden;

}



.footer-skyline-svg {

  width: 100%;

  height: auto;

  min-height: 120px;

  max-height: 220px;

  display: block;

}



.footer-main {

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

  background-image: linear-gradient(180deg, #4A6703 0%, #374D02 100%);

  color: #F1F8E3;

  padding: 48px 0 32px;

}



.footer-grid {

  display: grid;

  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;

  gap: 36px;

  margin-bottom: 40px;

}



.footer-col h4 {

  color: #ffffff;

  font-size: 1.15rem;

  margin-bottom: 18px;

  position: relative;

  padding-bottom: 8px;

}

.footer-col h4::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 36px;

  height: 3px;

  background: var(--color-yellow);

  border-radius: var(--radius-pill);

}



.footer-school-name {

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

  font-size: 1.25rem;

  font-weight: 800;

  color: #ffffff;

  margin-bottom: 8px;

}

.footer-id-box {

  background: rgba(255, 255, 255, 0.08);

  border-radius: var(--radius-sm);

  padding: 10px 14px;

  margin: 12px 0 16px;

  font-size: 0.85rem;

  border-left: 3px solid var(--color-yellow);

}

.footer-id-line {

  margin-bottom: 3px;

}

.footer-legal-notice {

  font-size: 0.84rem;

  color: #D3E6B2;

  line-height: 1.5;

}



.footer-links-list li {

  margin-bottom: 10px;

}

.footer-links-list a {

  color: #E1F0C4;

  font-size: 0.92rem;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: all var(--transition-fast);

}

.footer-links-list a:hover {

  color: #ffffff;

  transform: translateX(4px);

}



.footer-contact-item {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-bottom: 12px;

  font-size: 0.92rem;

  color: #E1F0C4;

}

.footer-contact-item a {

  color: #ffffff;

  font-weight: 600;

}

.footer-contact-item a:hover {

  color: var(--color-yellow);

}



/* Sociálne siete */

.social-links {

  display: flex;

  gap: 10px;

  margin-top: 18px;

}

.social-btn {

  width: 40px;

  height: 40px;

  border-radius: var(--radius-pill);

  background: rgba(255, 255, 255, 0.12);

  color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.1rem;

  transition: all var(--transition-fast);

}

.social-btn:hover {

  background: var(--color-orange);

  color: #ffffff;

  transform: translateY(-3px);

}



/* Spodná copyright lišta */

.footer-bottom {

  padding-top: 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.12);

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 14px;

  font-size: 0.84rem;

  color: #C5DC9E;

}

.footer-bottom-links {

  display: flex;

  gap: 16px;

  flex-wrap: wrap;

}

.footer-bottom-links a {

  color: #C5DC9E;

  text-decoration: underline;

  text-underline-offset: 3px;

}

.footer-bottom-links a:hover {

  color: #ffffff;

}



/* ==========================================================================

   COOKIES LIŠTA & MODÁLNE NASTAVENIA

   ========================================================================== */

.cookie-banner {

  position: fixed;

  bottom: 20px;

  left: 20px;

  right: 20px;

  max-width: 580px;

  background: #ffffff;

  border-radius: var(--radius-lg);

  padding: 24px;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);

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

  z-index: 9990;

  display: none;

  animation: slideUp 0.3s ease-out;

}

.cookie-banner.is-visible {

  display: block;

}

@keyframes slideUp {

  from { transform: translateY(30px); opacity: 0; }

  to { transform: translateY(0); opacity: 1; }

}



.cookie-title {

  font-size: 1.15rem;

  margin-bottom: 8px;

  display: flex;

  align-items: center;

  gap: 8px;

}

.cookie-text {

  font-size: 0.88rem;

  color: var(--color-text-muted);

  line-height: 1.5;

  margin-bottom: 18px;

}

.cookie-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



/* Cookie Nastavenia Modal */

.modal-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.65);

  backdrop-filter: blur(4px);

  z-index: 9995;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 20px;

}

.modal-backdrop.is-open {

  display: flex;

}

.modal-box {

  background: #ffffff;

  border-radius: var(--radius-lg);

  max-width: 600px;

  width: 100%;

  padding: 30px;

  box-shadow: 0 20px 50px rgba(0,0,0,0.25);

  max-height: 90vh;

  overflow-y: auto;

}

.modal-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 18px;

  border-bottom: 1px solid var(--color-border);

  padding-bottom: 12px;

}

.cookie-group {

  margin-bottom: 16px;

  padding: 14px;

  border-radius: var(--radius-md);

  background: #F8F7F2;

  border: 1px solid var(--color-border);

}

.cookie-group-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-weight: 700;

  margin-bottom: 6px;

}



/* ==========================================================================

   RESPONZÍVNY DIZAJN (MEDIA QUERIES)

   ========================================================================== */

@media (max-width: 1080px) {

  .hero-grid {

    grid-template-columns: 1fr;

    text-align: center;

  }

  .hero-lead {

    margin-left: auto;

    margin-right: auto;

  }

  .hero-actions {

    justify-content: center;

  }

  .hero-quote-box {

    text-align: left;

    max-width: 580px;

    margin: 0 auto;

  }

  .footer-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 860px) {

  /* Skrytie top-baru na malej obrazovke podľa požiadavky */

  .top-bar {

    display: none !important;

  }



  /* Mobilný hamburger prepínač v hlavičke */

  .mobile-toggle {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    border-radius: var(--radius-md);

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

    border: 1px solid rgba(138, 184, 10, 0.3);

    padding: 10px;

    cursor: pointer;

  }

  .mobile-toggle span {

    display: block;

    height: 3px;

    width: 100%;

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

    border-radius: 3px;

    transition: all var(--transition-fast);

  }



  /* Tmavý backdrop prekryv */

  .nav-backdrop {

    position: fixed;

    inset: 0;

    background: rgba(20, 30, 15, 0.62);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    z-index: 1005;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;

    display: block;

  }

  .nav-backdrop.is-active {

    opacity: 1;

    visibility: visible;

  }



  /* Mobilný drawer menu – prísne ukotvený na výšku obrazovky bez posunu */

  .main-nav {

    position: fixed;

    top: 0;

    right: -100%;

    width: min(330px, 86vw);

    height: 100vh;

    height: 100dvh;

    max-height: 100vh;

    max-height: 100dvh;

    background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F2 60%, #F1F7E4 100%);

    box-shadow: -10px 0 40px rgba(25, 35, 15, 0.28);

    border-left: 3px solid var(--color-primary);

    z-index: 1010;

    display: flex;

    flex-direction: column;

    padding: 0;

    overflow: hidden; /* Samotný drawer nikdy nepresahuje výšku obrazovky */

    transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);

  }

  .main-nav.is-open {

    right: 0;

  }



  /* Hlavička vnútri mobilného menu (pevne hore) */

  .mobile-drawer-header {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 16px;

    background: #FFFFFF;

    border-bottom: 2px solid rgba(138, 184, 10, 0.25);

    z-index: 10;

    box-shadow: 0 2px 8px rgba(0,0,0,0.03);

  }

  .mobile-drawer-brand {

    display: flex;

    align-items: center;

    gap: 10px;

  }

  .mobile-drawer-logo {

    width: 36px;

    height: 36px;

    object-fit: contain;

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));

  }

  .mobile-drawer-texts {

    display: flex;

    flex-direction: column;

  }

  .mobile-drawer-title {

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

    font-size: 1.08rem;

    font-weight: 800;

    color: var(--color-text-main);

    line-height: 1.15;

  }

  .mobile-drawer-sub {

    font-size: 0.74rem;

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

    font-weight: 700;

  }



  /* Tlačidlo na zatvorenie mobilného menu */

  .mobile-drawer-close {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #F4F1E8;

    color: #4A5642;

    border: 1px solid #E2DED2;

    font-size: 1.4rem;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all var(--transition-fast);

  }

  .mobile-drawer-close:hover,

  .mobile-drawer-close:focus-visible {

    background: var(--color-orange);

    color: #FFFFFF;

    border-color: var(--color-orange);

    transform: rotate(90deg) scale(1.05);

  }



  /* Zoznam položiek v menu – pevná šírka s rezervovaným scrollbarom (scrollbar-gutter: stable) */

  .nav-list {

    flex: 1 1 auto;

    min-height: 0;

    width: 100%;

    box-sizing: border-box;

    overflow-y: auto;

    overflow-x: hidden;

    scrollbar-gutter: stable; /* Zabezpečuje, že šírka obsahu zostáva 100% nemenná bez ohľadu na scrollbar */

    -webkit-overflow-scrolling: touch;

    flex-direction: column;

    align-items: stretch;

    gap: 6px;

    padding: 8px 10px;

  }



  /* Elegantný tenký scrollbar pre položky menu */

  .nav-list::-webkit-scrollbar {

    width: 4px;

  }

  .nav-list::-webkit-scrollbar-track {

    background: transparent;

  }

  .nav-list::-webkit-scrollbar-thumb {

    background: rgba(138, 184, 10, 0.4);

    border-radius: 4px;

  }



  .nav-item {

    width: 100%;

    box-sizing: border-box;

  }



  /* Fixná šírka a výška menu tlačidiel – ŽIADNE rozťahovanie ani sťahovanie po kliknutí */

  .nav-link {

    width: 100%;

    box-sizing: border-box;

    height: 42px;

    min-height: 42px;

    max-height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 14px;

    font-size: 0.92rem;

    background: #FFFFFF;

    border: 1px solid #ECE7DB;

    border-radius: var(--radius-sm);

    box-shadow: 0 1px 3px rgba(0,0,0,0.02);

    white-space: nowrap;

    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);

  }

  .nav-link:hover,

  .nav-link.active,

  .nav-item.is-expanded > .nav-link {

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

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

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

  }

  .nav-link.active {

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

    color: #ffffff !important;

  }



  .nav-cta {

    height: 40px;

    min-height: 40px;

    max-height: 40px;

    padding: 0 14px;

    font-size: 0.88rem;

  }



  /* Šípka má pevnú šírku a rotuje okolo stredu bez ovplyvnenia šírky tlačidla */

  .nav-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 18px;

    height: 18px;

    flex-shrink: 0;

    transform-origin: center center;

  }



  /* Podmenu (Akordeón v mobile) s pevnou šírkou 100% a ohraničeným tokom */

  .nav-dropdown {

    width: 100%;

    box-sizing: border-box;

    position: static;

    opacity: 1;

    visibility: visible;

    transform: none;

    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);

    border: 1px dashed rgba(138, 184, 10, 0.45);

    background: #F2F8E6;

    border-radius: var(--radius-sm);

    padding: 6px;

    margin-top: 4px;

    margin-bottom: 2px;

    display: none;

    flex-direction: column;

    gap: 4px;

    overflow: hidden; /* Zamedzí pretečeniu šírky kontajnera */

    animation: drawerFadeIn 0.2s ease-out;

  }

  .nav-item.is-expanded > .nav-dropdown {

    display: flex;

  }

  @keyframes drawerFadeIn {

    from { opacity: 0; transform: translateY(-4px); }

    to { opacity: 1; transform: translateY(0); }

  }



  .dropdown-link {

    width: 100%;

    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid rgba(0,0,0,0.04);

    border-radius: 6px;

    padding: 8px 12px;

    font-size: 0.84rem;

    color: #35422D;

    font-weight: 700;

    line-height: 1.35;

    white-space: normal; /* Dlhší text sa zalomí vo vnútri položky, no neroztiahne tlačidlo */

    word-break: break-word;

    display: block;

    transition: background-color var(--transition-fast), color var(--transition-fast);

  }

  .dropdown-link:hover,

  .dropdown-link.active {

    background: var(--color-primary);

    color: #FFFFFF !important;

    padding-left: 14px;

  }



  /* Spodná časť menu (Nástroje & Silueta Čachtíc – VŽDY PEVNE NA SPODKU OBRAZOVKY) */

  .mobile-drawer-footer {

    flex-shrink: 0; /* Pätička menu NIKDY nezmizne a neodroluje sa */

    display: flex;

    flex-direction: column;

    margin-top: auto;

    background: #FAF8F2;

    padding: 0;

    border-top: 1px solid rgba(138, 184, 10, 0.25);

    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.05);

    z-index: 10;

  }



  .mobile-drawer-tools {

    padding: 6px 14px;

    background: #FFFFFF;

    display: flex;

    justify-content: center;

  }



  .mobile-a11y-group {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

  }

  .mobile-a11y-label {

    font-size: 0.76rem;

    font-weight: 700;

    color: var(--color-text-muted);

    margin-right: 2px;

  }

  .mobile-a11y-group .a11y-btn {

    background: #F0EFEA;

    color: var(--color-text-main);

    border: 1px solid #DED9CC;

    padding: 3px 8px;

    font-size: 0.74rem;

    border-radius: 4px;

  }

  .mobile-a11y-group .a11y-btn:hover {

    background: var(--color-orange);

    color: #FFFFFF;

  }



  /* Vektorová silueta dominant Čachtíc – stále na spodku menu */

  .mobile-menu-skyline {

    width: 100%;

    line-height: 0;

    margin-bottom: -1px;

    overflow: hidden;

    background: #4A6703;

  }

  .mobile-menu-skyline svg,

  .mobile-skyline-img {

    width: 100%;

    height: 60px;

    display: block;

  }



  .grid-2, .grid-3, .grid-4 {

    grid-template-columns: 1fr;

  }

  .footer-grid {

    grid-template-columns: 1fr;

    gap: 28px;

  }

  .footer-bottom {

    flex-direction: column;

    text-align: center;

  }

}