/*
 * Roisie - Premium Luxury Restaurant HTML Template
 * Version: 1.0.0
 * Author: ThemeForest Quality Standard
 * Stylesheet: Responsive Overrides CSS
 */

/* Extra Large Screens (Desktop) */
@media (max-width: 1400px) {
  header {
    padding: 1.5rem 0;
  }
}

/* Large Screens (Laptops) */
@media (max-width: 1200px) {
  .nav-item {
    margin: 0 0.52rem;
  }
  .navbar-brand {
    font-size: 1.6rem;
  }
}

/* Medium & Small Screens (Tablets & Mobile Menus) */
@media (max-width: 991.98px) {
  /* Header adjustment */
  header {
    padding: 1.2rem 0;
  }
  header.sticky {
    padding: 0.8rem 0;
  }
  
  /* Hide desktop navigation and show hamburger */
  .nav-menu {
    display: none;
  }
  
  .mobile-nav-toggle {
    display: block;
  }
  
  /* Header CTA adjustments */
  .header-actions .btn-gold-outline {
    display: none; /* Hide on mobile to prevent clutter; keep inside drawer instead */
  }

  /* Spacing */
  .layout-placeholder-section {
    padding: 6rem 0;
  }
  
  .luxury-card {
    padding: 2.5rem 1.5rem;
  }
  
  .page-header {
    padding: 8rem 0 5rem 0;
  }
  
  .page-header-title {
    font-size: 2.8rem;
  }
}

/* Tablets (Portrait) */
@media (max-width: 767.98px) {
  .page-header-title {
    font-size: 2.4rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  footer {
    padding: 4rem 0 2rem 0;
  }
  
  .footer-title {
    margin-bottom: 1.2rem;
    margin-top: 2rem;
  }
}

/* Small Mobile Devices */
@media (max-width: 575.98px) {
  .navbar-brand {
    font-size: 1.4rem;
  }
  
  .page-header-title {
    font-size: 2rem;
  }
  
  .breadcrumb-list {
    flex-wrap: wrap;
  }
  
  .layout-status-badge {
    font-size: 0.65rem;
    padding: 0.4rem 1rem;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .btn-gold-solid, .btn-gold-outline {
    font-size: 0.75rem;
    padding: 0.8rem 1.8rem;
  }
  
  #back-to-top {
    bottom: 20px;
    right: -50px;
    width: 38px;
    height: 38px;
  }
  
  #back-to-top.show {
    right: 20px;
  }
}