/*
 * This is a manifest file that'll be compiled into app.css, which will include all the files
 * listed below.
 *
 * Any CSS file within this directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require tailwind
 *= require_self
 */

/* Responsive navbar visibility - ensure only one navbar is visible at a time */
/*
 * Landing page (not signed in):
 *   - Desktop/Tablet (>= 768px): top navbar
 *   - Mobile (< 768px): top navbar (mobile header in home/index.html.erb)
 *
 * App (signed in):
 *   - Desktop (>= 1024px): top navbar
 *   - Tablet/Mobile (< 1024px): bottom navbar
 */

/* Default: Show desktop navbar on tablet+ for non-signed-in users */
@media (min-width: 768px) {
  #desktop-navbar {
    display: block !important;
  }
  #mobile-navbar {
    display: none !important;
  }
}

/* For signed-in users: Hide desktop navbar on tablet, show mobile navbar */
@media (min-width: 768px) and (max-width: 1023px) {
  body.user-signed-in #desktop-navbar {
    display: none !important;
  }
  body.user-signed-in #mobile-navbar {
    display: block !important;
  }
}

/* For signed-in users: Show desktop navbar on desktop (>= 1024px) */
@media (min-width: 1024px) {
  body.user-signed-in #desktop-navbar {
    display: block !important;
  }
  body.user-signed-in #mobile-navbar {
    display: none !important;
  }
}

/* Mobile (< 768px): Always hide desktop navbar, show mobile navbar if signed in */
@media (max-width: 767px) {
  #desktop-navbar {
    display: none !important;
  }
  body.user-signed-in #mobile-navbar {
    display: block !important;
  }
}