/*
 * 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.
 */

/* Mobile Menu Animation */
[data-mobile-menu-target="menu"] {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

[data-mobile-menu-target="menu"].menu-open {
  opacity: 1;
}

/* Custom breakpoint for extra small screens */
@media (min-width: 400px) {
  .xs\:inline {
    display: inline !important;
  }
}

/* Improve touch targets on mobile */
@media (max-width: 1023px) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Better tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Fix for iOS safe areas */
@supports (padding: max(0px)) {
  .safe-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}