/* Additional styles for EduGarden website */
/* This file complements the inline styles in index.html */

/* Additional responsive styles */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .mission-cards {
    flex-direction: column;
    align-items: center;
  }
  
  .card {
    max-width: 100%;
  }
  
  nav {
    gap: 16px;
  }
}

/* Language switcher active state */
.lang-btn.active {
  background: var(--rose);
  color: white;
  border-color: var(--rose-dark);
}

/* Additional hover effects */
.bubble-title:hover {
  box-shadow: 0 6px 24px 0 rgba(178,64,96,0.25);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(178,64,96,0.18), 0 4px 28px rgba(155,203,148,0.12);
}

/* Focus states for accessibility */
a:focus, button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--rose);
  transition: box-shadow 0.2s ease-in-out;
}

/* Remove default focus outline and use custom styles */
a, button, input, textarea, select {
  outline: none;
}

/* Ensure buttons don't show browser default focus styles */
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Style for active focus state that doesn't rely on outline */
a:active, button:active {
  transform: scale(0.98);
}

/* Specific styles for navigation buttons */
nav a:focus, .lang-btn:focus, .hero-btn:focus {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--rose);
  transform: scale(1.04);
  border-color: var(--rose);
}

/* Print styles */
@media print {
  header, footer {
    display: none;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .hero, .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}