/* Global Layout Fix - Proper spacing for fixed header */

/* Main content area spacing */
body {
  margin: 0;
  padding: 0;
}

/* Ensure header is fixed and on top */
#header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Main content starts below header */
main {
  padding-top: 100px;
  min-height: calc(100vh - 100px);
}

/* Dashboard pages handle their own layout via .dashboard-layout */
.dashboard-layout main {
  padding-top: 0;
  min-height: unset;
}

/* Adjust for scrolled header (smaller) */
#header.scrolled {
  height: 80px;
}

body:has(#header.scrolled) main:not(.dashboard-main-content) {
  padding-top: 80px;
}

/* Hero sections that should extend to top */
.hero-section,
.search-hero-section,
.hero,
.hero-container {
  margin-top: -100px;
  padding-top: 150px;
}

/* Auth pages (sign-in/sign-up) */
.auth-page-wrapper {
  min-height: calc(100vh - 200px);
  padding-top: 2rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
  main {
    padding-top: 80px;
  }

  .hero-section,
  .search-hero-section,
  .hero,
  .hero-container {
    margin-top: -80px;
    padding-top: 120px;
  }

  .auth-page-wrapper {
    min-height: calc(100vh - 150px);
  }
}

/* Ensure footer is always at bottom */
footer {
  margin-top: auto;
}

/* Fix for pages without hero */
.page-content,
.content-section {
  padding-top: 2rem;
}

/* Booking page specific */
.booking-page {
  padding-top: 2rem;
}

/* Destinations and packages pages */
.destinations-grid,
.packages-grid {
  padding-top: 2rem;
}

/* Search results */
.search-results {
  padding-top: 2rem;
}

/* About page */
.about-section {
  padding-top: 2rem;
}

/* Ensure no content goes under header */
* {
  scroll-margin-top: 100px;
}

@media (max-width: 768px) {
  * {
    scroll-margin-top: 80px;
  }
}

/* Clerk Auth Form Overrides */
.cl-rootBox {
  width: 100% !important;
}

.cl-card {
  width: 100% !important;
  box-shadow: 0 8px 32px rgba(0, 93, 72, 0.12) !important;
  border-radius: 16px !important;
}

/* Form labels - left aligned for readability */
.cl-formFieldLabel {
  text-align: left !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
}

/* Form inputs */
.cl-formFieldInput {
  border-radius: 8px !important;
  border: 2px solid #e2e8f0 !important;
  font-size: 1rem !important;
}

.cl-formFieldInput:focus {
  border-color: #005d48 !important;
  box-shadow: 0 0 0 3px rgba(0, 93, 72, 0.1) !important;
}

/* Primary button */
.cl-formButtonPrimary {
  background-color: #005d48 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.cl-formButtonPrimary:hover {
  background-color: #004d3a !important;
}

/* Social buttons */
.cl-socialButtonsBlockButton {
  border-radius: 8px !important;
  border: 2px solid #e2e8f0 !important;
}

/* Footer links */
.cl-footerActionLink {
  color: #005d48 !important;
  font-weight: 600 !important;
}

/* Hide Clerk's own header since we have our own */
.cl-header {
  display: none !important;
}

/* Internal card body alignment */
.cl-main {
  text-align: left !important;
}