/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.header-menu-icon svg {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  background-color: #f2f9fe;
  border-radius: 6px;
}

body.slideover-open {
  overflow: hidden;
}

.slideover {
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: inherit;
}

.slideover::backdrop {
  background-color: rgba(15, 23, 42, 0.35);
  opacity: 0;
  transition: opacity 220ms ease;
}

.slideover[open]::backdrop {
  opacity: 1;
}

.slideover .slideover-panel {
  position: fixed;
  inset-block: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100%;
  background-color: #ffffff;
  color: #0f172a;
  box-shadow: 0 24px 48px -18px rgba(15, 23, 42, 0.36);
  transform: translateX(110%);
  will-change: transform;
}

.slideover[open] .slideover-panel {
  animation: slideover-slide-in-right 240ms ease forwards;
}

.slideover[closing] .slideover-panel {
  animation: slideover-slide-out-right 240ms ease forwards;
}

.slideover-left .slideover-panel {
  left: 0;
  right: auto;
  transform: translateX(-110%);
}

.slideover-left[open] .slideover-panel {
  animation: slideover-slide-in-left 240ms ease forwards;
}

.slideover-left[closing] .slideover-panel {
  animation: slideover-slide-out-left 240ms ease forwards;
}

@keyframes slideover-slide-in-right {
  from {
    transform: translateX(110%);
  }
  to {
    transform: translateX(0%);
  }
}

@keyframes slideover-slide-out-right {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(110%);
  }
}

@keyframes slideover-slide-in-left {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0%);
  }
}

@keyframes slideover-slide-out-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-110%);
  }
}

/* Bottom drawer (mobile) – fit to content, safe-area aware */
.slideover-bottom .slideover-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  height: auto; /* override generic 100% height */
  max-height: calc(
    100dvh - env(safe-area-inset-bottom, 0px) - 16px
  ); /* cap to viewport, account mobile bars */
  background-color: #ffffff;
  color: #0f172a;
  box-shadow: 0 24px 48px -18px rgba(15, 23, 42, 0.36);
  transform: translateY(110%);
  will-change: transform;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow-y: auto; /* scroll internally only if needed */
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(
    env(safe-area-inset-bottom, 0px),
    12px
  ); /* avoid overlap with iOS home bar */
}

.slideover-bottom[open] .slideover-panel {
  animation: slideover-slide-in-up 240ms ease forwards;
}

.slideover-bottom[closing] .slideover-panel {
  animation: slideover-slide-out-down 240ms ease forwards;
}

@keyframes slideover-slide-in-up {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0%);
  }
}

@keyframes slideover-slide-out-down {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(110%);
  }
}

/* Header scrolled look: white bg, dark text/icons */
.header-scrolled nav {
  background-color: #ffffff;
}

/* Force all white-text utilities in header to appear dark on scroll */
.header-scrolled .text-white {
  color: #0f172a !important;
}
.header-scrolled .hover\:text-white:hover {
  color: #0f172a !important;
}

/* SVG/paths using Tailwind utility classes */
.header-scrolled .fill-white {
  fill: #0f172a !important;
}
.header-scrolled .stroke-white {
  stroke: #0f172a !important;
}

/* Optional: make the "Sign In" button outlined when scrolled for better contrast */
.header-scrolled .bg-brand {
  background-color: transparent !important;
  border: 1px solid #46b6ff;
  color: #46b6ff !important;
}

/* Logo swap on scroll */
.logo-color {
  display: none;
}

.logo-inverted {
  display: inline-block;
}

/* Mobile: 24px height */
@media (max-width: 767px) {
  .logo-color,
  .logo-inverted {
    height: 24px;
  }
}

/* Tablet and above: 30px height */
@media (min-width: 768px) {
  .logo-color,
  .logo-inverted {
    height: 30px;
  }
}

.header-scrolled .logo-inverted {
  display: none !important;
}
.header-scrolled .logo-color {
  display: inline-block !important;
}