/* style.css */

/* 🌈 Root CSS Variables: Gradient and Color Setup */
:root {
  /* Very light greenish (50% opacity) -> Very light peach (50% opacity) -> Very light yellowish (50% opacity) */
  --main-gradient: linear-gradient(to right, rgba(144, 238, 144, 0.5), rgba(255, 218, 185, 0.5), rgba(255, 255, 224, 0.5));

  /* Slightly more opaque version for hover states (60% opacity) */
  --main-gradient-hover: linear-gradient(to right, rgba(144, 238, 144, 0.6), rgba(255, 218, 185, 0.6), rgba(255, 255, 224, 0.6));

  /* Inverse gradient for content boxes and buttons (same gradient, just reversed direction for visual "inverse" effect) */
  --inverse-gradient: linear-gradient(to left, rgba(144, 238, 144, 0.5), rgba(255, 218, 185, 0.5), rgba(255, 255, 224, 0.5));

  /* Solid button colors (these will be overridden by the gradient where applicable) */
  --button-bg: #00796b; /* Fallback/specific solid color if gradient doesn't apply */
  --button-text: #ffffff;
  --button-bg-hover: #006056;
}

/* 🌅 Page Background */
body {
  background: var(--main-gradient);
  color: #3B3B3B; /* Dark gray for main body text for better readability on light background */
  margin: 0;
  padding: 0;
  font-family: 'Manrope', sans-serif;
}

/* Navbar styles */
.navbar-custom-bg {
  background: white; /* Set background to white */
}

.nav-item-hover:hover {
  transform: translateY(-1px);
}

.icon-hover:hover {
  transform: scale(1.1);
}


/* Styles for modal window */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #ffffff; /* Solid white background for readability */
  color: #3B3B3B; /* Dark gray for text on light background */
  margin: auto;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 500px;
  position: relative;
}

.close-button {
  color: #C4C4C4;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Custom styles for mobile menu toggle */
.mobile-menu {
  display: none;
  flex-direction: column;
  width: 100%;
  background-color: white;
  border-radius: 0 0 1.5rem 1.5rem;
  padding-bottom: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.mobile-menu.active {
  display: flex;
}

.mobile-menu a {
  padding: 0.75rem 1rem;
  text-align: center;
  color: #566272;
  font-weight: 500;
  transition: color 0.2s;
}

.mobile-menu a:hover {
  color: #3B3B3B; /* Dark gray for consistency */
}


/* Inverse gradient for content backgrounds - Renamed to .inverse-container */
.inverse-container {
  background: var(--inverse-gradient); /* Use the inverse gradient */
  color: #3B3B3B; /* Dark gray for text on light creamy background */
  border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  border-radius: 1.5rem; /* rounded-3xl */
  padding: 1.5rem; /* Equivalent to p-6 Tailwind class */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Specific main content section styling */
main {
  padding: 20px;
  margin: 0 auto;
  width: 95%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Styles for individual content sections inside main */
.content-section {
  padding: 20px; /* Padding for the inner content */
  margin-bottom: 20px; /* Space between sections */
  width: 100%;
  text-align: justify; /* Default for most content */
  /* These styles are now incorporated into .inverse-container if applicable */
}

.content-section.center-content {
  text-align: center; /* Override for specific sections that need to be centered */
}

/* Enhanced Heading Styles (all headings are black) */
.content-section h2,
.content-section h3,
.program-section .program-title,
h1,
h2,
h3 {
  color: black; /* All headings changed to black */
  text-align: center;
  margin-bottom: 15px;
  font-weight: 700; /* Bold */
}

.content-section h2 {
  font-size: 2.8em; /* Significantly larger for main headings */
}

.content-section h3 {
  font-size: 2.2em; /* Larger for sub-headings */
}

.content-section p, .content-section li {
  margin-bottom: 10px;
  line-height: 1.7;
}

.content-section ol {
  padding-left: 20px;
}

.download-section .registry-title {
  font-weight: normal; /* Removed bold from these specific titles */
  margin: 5px 0;
}

/* 🔘 Gradient-Themed Button */
/* All buttons and download links will now use the specified styles */
button[type="submit"],
.download-link,
.button, /* New class for generic buttons */
.bg-indigo-600, /* Targeting Tailwind classes directly for buttons (will be overridden) */
.bg-green-500,
.bg-red-500 {
  background: var(--main-gradient) !important; /* Apply main gradient */
  color: #3B3B3B !important; /* Dark gray text for readability on light gradient */
  padding: 0.75rem 1.25rem;
  border-radius: 9999px; /* Fully rounded */
  font-weight: bold;
  border: none !important;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Hover states for the buttons */
button[type="submit"]:hover,
.download-link:hover,
.button:hover,
.bg-indigo-600:hover,
.bg-green-500:hover,
.bg-red-500:hover {
  background: var(--main-gradient-hover) !important; /* Slightly more opaque gradient on hover */
  transform: translateY(-1px); /* Keep existing hover effect */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}


/* Document list styles - adjusted for individual sections */
.document-item-section {
  background: var(--inverse-gradient); /* Apply inverse gradient */
  border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind's shadow-md */
  padding: 15px;
  border-radius: 1.5rem; /* rounded-3xl */
  width: 100%; /* Adjust width of individual document items */
  max-width: 600px; /* Max width for readability */
  text-align: center; /* Center text within document item */
  margin-bottom: 20px; /* Space between individual document sections */
}

.document-item-section .document-title-text {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
}

.program-section .program-description {
  text-align: justify; /* Ensure text is justified */
  margin-bottom: 15px;
}

/* Accordion Specific Styles (about_us) */
.accordion-container {
  width: 100%; /* Make accordion container full width */
  max-width: 1200px; /* Inherit main max-width */
  margin: 0 auto; /* Center the container if it's less than main max-width */
}

.accordion-item {
  background: var(--inverse-gradient); /* Apply inverse gradient */
  border-radius: 1.5rem; /* rounded-3xl */
  border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind's shadow-md */
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%; /* Accordion items take full width of container */
}

.accordion-header {
  background: var(--inverse-gradient); /* Apply inverse gradient */
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #3B3B3B; /* Dark gray for text on light creamy background */
  font-size: 1.1em;
  border-radius: 1.5rem; /* rounded-3xl for header to match item */
}

.accordion-header:hover {
  background-color: rgba(248, 244, 227, 0.5); /* Slightly darker creamy on hover */
}

.accordion-content {
  padding: 0 20px; /* Initial padding when hidden */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; /* Consistent transition duration */
  text-align: justify;
  background: var(--inverse-gradient); /* Apply inverse gradient */
  color: #3B3B3B; /* Dark gray for text on light creamy background */
}

/* No .accordion-content.active needed anymore, JS will manage max-height directly */

.accordion-icon {
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.accordion-icon.rotate {
  transform: rotate(45deg);
}

/* Footer adjustments for consistency - NOW WHITE */
footer {
  background: white;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 1.5rem 1.5rem 0 0;
  color: #333;
  border: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
  /* These styles are removed as Navbar and mobile menu are removed */
  /*
  .top-nav-container {
      flex-direction: column;
      align-items: center;
  }

  .top-nav {
      width: 100%;
      justify-content: center;
      flex-direction: column;
      align-items: center;
  }

  .top-nav a {
      margin: 5px;
      padding: 10px 16px;
  }
  */
}

/* Styles for horizontal scrolling container (index.html) */
.custom-scrollbar { /* Renamed from .scroll-container to match specific usage */
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
}
.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #E9F5FF; /* Light gray for thumb */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #FFFFFF; /* Lighter background for track */
    border-radius: 10px;
}

/* Styles for review dots (index.html) */
.review-dot {
  width: 10px;
  height: 10px;
  background-color: #E9F5FF; /* Light gray */
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.review-dot.active {
  background-color: #3B3B3B; /* Dark gray for consistency */
  transform: scale(1.2); /* Slightly enlarge active dot */
}

/* Adjustments for compact review cards (index.html) */
.review-card {
  min-height: 200px; /* Set a minimum height for consistency */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes button to the bottom */
}

/* Carousel specific styles for snapping (index.html) */
.carousel-track-base {
  scroll-snap-type: x mandatory; /* Enable horizontal snapping */
  overflow-x: auto; /* Allow horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.carousel-track-base::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Webkit browsers */
}

/* Each slide inside the carousel track (index.html) */
.text-review-slide { /* Changed from .review-slide-card to be more specific to text reviews */
  background: var(--inverse-gradient); /* Apply inverse gradient */
  border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind's shadow-md */
  border-radius: 1.5rem; /* rounded-3xl */
  flex-shrink: 0; /* Prevent cards from shrinking */
  width: 100%; /* Ensure it takes full width of scrollable container */
  height: 100%; /* Ensure it takes full height of flex-grow parent */
}


/* NEW STYLES FOR MOMENTS FADING CAROUSEL (index.html) */
#moments-carousel-track {
  position: relative; /* Essential for absolute positioning of slides */
  overflow: hidden; /* Hide slides that are out of view */
  scroll-snap-type: none;
  overflow-x: hidden;
}

.moment-slide-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Hidden by default */
  transition: opacity 2s ease-in-out; /* Fade transition over 2 seconds */
  display: flex; /* Keep flex properties for centering content within the slide */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  scroll-snap-align: none;
}

.moment-slide-card.active {
  opacity: 1; /* Fully visible */
}

.moment-slide-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure image covers the slide area */
  border-radius: 1.5rem; /* Keep rounded corners */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1-rgba(0, 0, 0, 0.06); /* Keep shadow */
}

/* Custom styling for moments carousel container (index.html) */
.moments-carousel-container {
  height: 100%;
  max-height: 720px;
  aspect-ratio: 3/2;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Removed media query margins for text-review-slide */
@media (min-width: 640px) { /* sm breakpoint */
  .text-review-slide {
    width: 100%; /* Ensure full width per snap point */
  }
}

@media (min-width: 768px) { /* md breakpoint */
  .text-review-slide {
    width: 100%; /* Ensure full width per snap point */
  }
}

/* Kindergarten specific styles */
.accordion-button {
  background: var(--inverse-gradient); /* Apply inverse gradient to accordion headers */
  border-radius: 0.75rem; /* More rounded */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* More pronounced shadow */
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  padding: 1rem 1.5rem; /* More padding */
  cursor: pointer; /* Indicate clickable */
  display: flex; /* Flex for content and icon */
  justify-content: space-between;
  align-items: center; /* Vertically align items */
}
.accordion-button:hover {
  background: var(--main-gradient-hover); /* Slightly darker gradient on hover */
  transform: translateY(-2px); /* Slight lift effect */
}
/* Updated accordion-content to use max-height for smooth transition */
.accordion-content {
  /* Apply inverse gradient background to accordion content */
  background: var(--inverse-gradient); /* Apply inverse gradient */
  border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
  border-top: none; /* No top border, blends with button */
  border-radius: 0 0 0.75rem 0.75rem; /* Rounded bottom corners */
  padding: 0 1.5rem; /* Initial padding when hidden to allow max-height to control */
  max-height: 0; /* Important for initial hidden state and transition */
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; /* Smooth transition for expand/collapse */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); /* Subtle shadow */
}

.accordion-item {
  margin-bottom: 1rem; /* Spacing between accordion items */
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column for one photo */
  place-items: center; /* Center the image */
  gap: 1.5rem; /* Increased gap for better spacing */
}
.gallery-item {
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}
.gallery-item:hover {
  transform: scale(1.03);
}
.gallery-item img {
  width: 100%;
  max-width: 600px; /* Max width for the timetable image */
  height: auto; /* Auto height to maintain aspect ratio */
  object-fit: contain; /* Ensure the entire image is visible */
  border-radius: 0.75rem;
}

/* Slideshow specific styles (kindergarten.html) - Renamed for clarity and consistent transition */
.kindergarten-slideshow-img {
    opacity: 0;
    transition: opacity 2s ease-in-out; /* Ensure 2s fade as per request */
}
.kindergarten-slideshow-img.active {
    opacity: 1;
}

/* Login page specific hover color - Changed to dark gray for consistency */
body#login-page .mobile-menu a:hover,
body#login-page .nav-item-hover:hover {
    color: #3B3B3B; /* Dark gray */
}

body#login-page .mobile-menu-button {
  background-color: #3B3B3B; /* Dark gray */
}
body#login-page .mobile-menu-button:hover {
  background-color: #555555; /* Slightly lighter dark gray */
}

body#login-page .text-indigo-700 {
  color: #3B3B3B; /* Dark gray */
}

body#login-page .focus\:ring-indigo-400:focus {
  --tw-ring-color: rgba(59, 59, 59, 0.5); /* Dark gray with transparency */
}

body#login-page .bg-indigo-600 {
  background-color: #3B3B3B; /* Dark gray */
}

body#login-page .hover\:bg-indigo-700:hover {
  background-color: #555555; /* Slightly lighter dark gray */
}

/* Specific style for the "Зарегистрироваться" link in login.html */
.register-link-style {
  color: black;
  text-decoration: underline;
  font-weight: bold;
}
.register-link-style:hover {
  color: #333; /* Keep it dark on hover */
  text-decoration: underline; /* Keep underline on hover */
}

/* ➕ New Expandable "+" Sections */
.plus-section {
  background: var(--inverse-gradient);
  border: 1px dashed rgba(0, 0, 0, 0.05);
  padding: 1rem 1.5rem;
  border-radius: 1.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.plus-section:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}