/* Optimized CSS for Marshmallow Tours & Travel - Mobile First */

/* Critical CSS - Load First */
:root {
  --primary: #E46D30;
  --primary-hover: #db5d1c;
  --secondary: #8E8A46;
  --accent: #000000;
  --text-dark: #1f2937;
  --text-light: #6b7280;
  --bg-light: #f9fafb;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Utility Classes */
.rotate-180 { transform: rotate(180deg); transition: transform 0.2s ease; }
.rotate-45 { transform: rotate(45deg); transition: transform 0.2s ease; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Mobile Menu */
.mobile-menu { transform: translateX(-100%); transition: transform 0.3s ease-in-out; }
.mobile-menu.active { transform: translateX(0); }
.mobile-dropdown { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.mobile-dropdown.active { max-height: 500px; }

/* Hero & Slider */
.hero-slider { height: 100vh; max-height: 800px; position: relative; overflow: hidden; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; display: none; }
.slide.active { display: block; opacity: 1; z-index: 1; }
.slide-image { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); }
.slide-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; padding: 0 1rem; }

/* Animations */
.animate-fadeIn { animation: fadeIn 1.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.animate-bounce { animation: bounce 2s infinite; }
@keyframes bounce { 0%,20%,50%,80%,100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-20px) translateX(-50%); } 60% { transform: translateY(-10px) translateX(-50%); } }

/* Components */
.contact-card { transition: all 0.3s ease; }
.contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
.tab-content.active { display: block; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.accordion-content.active { max-height: 500px; transition: max-height 0.5s ease-in; }
.sticky-booking { position: sticky; top: 20px; }
.floating-booking { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; transform: translateY(100%); transition: transform 0.3s ease; }
.floating-booking.visible { transform: translateY(0); }
.gallery-item { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/* Utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.focus-visible:focus { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Print Styles */
@media print {
  .no-print { display: none !important; }
  body { font-size: 12pt; line-height: 1.4; }
  a { text-decoration: underline; }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .hero-slider { height: 70vh; }
  .slide-content h1 { font-size: 2rem; }
  .slide-content p { font-size: 1rem; }
  .contact-card:hover { transform: none; }
  .gallery-item:hover { transform: none; }
}