/* Experience Andaman - Essential Custom Styles */

body {
  font-family: 'Urbanist', sans-serif;
  
}

/* CSS Custom Properties (Variables) for brand colors */
:root {
  --brand-orange: #F97316;
  --brand-beige: #F4EBD0;
  --brand-light-blue: #0EA5E933;
  --brand-navy: #1E3A8A;
  --brand-dark-grey: #0D0D0D;
  --brand-white: #FFFFFF;
  --beige-gradient: linear-gradient(180deg, #F4EBD0 0%, rgba(244, 235, 208, 0.54) 100%);
}

/* Custom utility classes that Tailwind doesn't provide */
.bg-orange {
  background-color: var(--brand-orange);
}

.bg-orange-dark {
  background-color: #ea580c;
}

.text-orange {
  color: var(--brand-orange);
}

.bg-beige-gradient {
  background: var(--beige-gradient);
}

.bg-light-blue {
  background-color: var(--brand-light-blue);
}

.bg-navy-blue {
  background-color: var(--brand-navy);
}

.text-navy-blue {
  color: var(--brand-navy);
}

.text-dark-grey {
  color: var(--brand-dark-grey);
}

/* Container with responsive padding */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 5rem;
}

@media (max-width: 1439px) {
  .container {
    padding: 0 2.5rem;
  }
}

@media (max-width: 767px) {
  .container {
    padding: 0 1.25rem;
  }
}

/* Hide scrollbar utilities */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Hide default browser calendar icon */
.no-date-icon::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* Remove default browser focus styles and add custom ones */
input:focus {
  outline: none !important;
  box-shadow: none !important;
}

input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Custom focus effect - only bottom border changes */
input:focus {
  border-bottom-color: #ffffff !important;
}

/* Mobile Navigation Styles */
.mobile-nav-section {
  border-bottom: 1px solid #f3f4f6;
}

.mobile-nav-section:last-child {
  border-bottom: none;
}

.mobile-submenu {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  max-height: 0;
}

.mobile-submenu.show {
  max-height: 1000px;
}

.mobile-subsection {
  border-left: 2px solid #e5e7eb;
  margin-left: 8px;
}

.mobile-subsection-links {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  max-height: 0;
}

.mobile-subsection-links.show {
  max-height: 500px;
}

.mobile-subsection-links a {
  transition: all 0.2s ease-in-out;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 2px 0;
}

.mobile-subsection-links a:hover {
  background-color: #f8fafc;
  transform: translateX(4px);
}

/* Smooth transitions for all interactive elements */
.mobile-nav-section > div:first-child,
.mobile-subsection > div:first-child {
  transition: all 0.2s ease-in-out;
}

.mobile-nav-section > div:first-child:hover,
.mobile-subsection > div:first-child:hover {
  background-color: #f8fafc;
  border-radius: 6px;
}

/* Custom scrollbar for mobile navigation */
.mobile-nav-section::-webkit-scrollbar {
  width: 4px;
}

.mobile-nav-section::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.mobile-nav-section::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.mobile-nav-section::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Safari mobile image loading improvements */
img {
  image-rendering: -webkit-optimize-contrast;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Mobile Menu Animation Fallbacks */
#mobileMenu .transform {
  transition: transform 0.3s ease-in-out;
}

#mobileMenu .transform.-translate-x-full {
  transform: translateX(-100%);
}

#mobileMenu .transform:not(.-translate-x-full) {
  transform: translateX(0);
}