/* responsive-cleanup.css
   Purpose: central override file to harmonize responsive behavior across the app
   Mobile-first approach. Focus on phone/tablet/laptop widths.

   Breakpoints used:
   - mobile: up to 480px
   - tablet: 481px - 768px
   - laptop: 769px - 1200px
   - desktop: 1201px+

   This file is intentionally specific and uses selectors to override inline and other styles
   when needed (keeps changes centralized). Adjust values if you want tighter pixel control.
/* responsive-cleanup.css
   Purpose: central override file to harmonize responsive behavior across the app
   Mobile-first approach. Focus on phone/tablet/laptop widths.
*/
*/ :root {
  --base-font-size: 15px; /* default mobile-friendly */
  --touch-target: 44px; /* minimum touch target */

  /* Ensure images in menu cards cover their area and cards keep uniform heights */
  .menu-item-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
  .menu-item-card .item-image,
  .menu-item-card .card-image,
  .menu-item-card .menu-item-image {
    width: 100% !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    display: block !important;
  }
  .menu-item-card .item-image img,
  .menu-item-card .card-image img,
  .menu-item-card .menu-item-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Hidden helper used by JS to cap visible items */
  .menu-item-card.hidden-by-cap {
    display: none !important;
  }

  /* Show-more toggle below the grid */
  .menu-grid-toggle {
    text-align: center;
    margin: 12px 0 20px 0;
  }
  .menu-grid-toggle button {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  }
  .menu-grid-toggle button:active {
    transform: translateY(1px);
  }
  --container-max: 1200px; /* default container max on larger screens */

  /* Global rules for image fit & card layout that apply at all sizes */
  .menu-item-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .menu-item-card .item-image img,
  .menu-item-card .card-image img,
  .menu-item-card .menu-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Ensure collapsed grid doesn't overflow awkwardly */
  .menu-grid {
    position: relative;
  }

  /* Pagination controls for menu grid */
  .menu-grid-pagination {
    display: flex;
    justify-content: center;
    margin-top: 12px;
  }
  .menu-pagination-table {
    border-collapse: collapse;
  }
  .menu-pagination-table td {
    padding: 6px 8px;
  }
  .menu-pagination-table a.menu-page-link {
    text-decoration: none;
    color: #111;
    display: inline-block;
    min-width: 34px;
    text-align: center;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }
  .menu-page-cell.active a.menu-page-link {
    background: var(--primary-color, #2c5530);
    color: #fff;
    border-color: rgba(0, 0, 0, 0.08);
  }

  @media (max-width: 575.98px) {
    .menu-pagination-table td {
      padding: 4px 6px;
    }
    .menu-pagination-table a.menu-page-link {
      min-width: 28px;
      padding: 5px 6px;
    }
  }
}

/* Global resets useful for responsive layouts */
html,
body {
  font-size: var(--base-font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.35;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
.btn {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding: 8px 12px;
  font-size: 1rem;
}

input[type="text"],
input[type="email"],
textarea,
select {
  font-size: 1rem;
  padding: 10px 12px;
  min-height: 40px;
}

/* Make containers responsive and centered */
.container,
.container-fluid {
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .container {
    max-width: var(--container-max);
    margin: 0 auto;
  }
}

/* NAVBAR adjustments - phone & laptop friendly */
.navbar {
  padding-top: 8px;
  padding-bottom: 8px;
}
.navbar .navbar-brand {
  font-size: 1.05rem;
  padding-left: 6px;
}
.navbar .nav-link {
  padding: 8px 10px;
  font-size: 0.95rem;
}

/* Ensure collapsed toggler is large enough on phones */
.navbar-toggler {
  padding: 6px 8px;
  width: 48px;
  height: 48px;
}

/* Footer layout: stack on mobile, grid on larger screens */
.footer .container {
  padding-top: 18px;
  padding-bottom: 18px;
}

.footer .row {
  gap: 12px;
}

@media (max-width: 480px) {
  .footer .col-md-8,
  .footer .col-md-4,
  .footer .col-lg-3,
  .footer .col-lg-2 {
    width: 100% !important;
    display: block !important;
    text-align: center;
  }
  .footer .input-group {
    max-width: 100% !important;
  }
  .footer {
    padding: 16px 8px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .footer .col-md-8,
  .footer .col-md-4 {
    width: 100%;
  }
  .footer {
    padding: 18px 12px;
  }
}

@media (min-width: 769px) {
  .footer {
    padding: 26px 18px;
  }
}

/* News ticker: harmonize and make mobile-first */
.news-ticker-container {
  width: 100%;
}
.news-ticker-wrapper {
  padding: 10px 12px;
  gap: 12px;
  align-items: stretch;
}
.news-ticker {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: auto;
}
.news-ticker-viewport {
  width: 100%;
  height: auto;
}
.news-ticker-content {
  padding: 8px;
  gap: 12px;
}
.news-item {
  flex: 0 0 100%;
  padding: 10px;
}

@media (min-width: 481px) and (max-width: 768px) {
  .news-ticker-wrapper {
    padding: 12px 16px;
  }
  .news-item {
    padding: 12px;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .news-ticker-wrapper {
    padding: 18px 24px;
  }
  .news-ticker {
    max-width: 1000px;
  }
  .news-item {
    padding: 14px;
  }
}

@media (min-width: 1201px) {
  .news-ticker-wrapper {
    padding: 22px 30px;
  }
  .news-ticker {
    max-width: 1400px;
  }
  .news-item {
    padding: 16px;
  }
}

/* touch target & spacing helpers */
.btn,
button,
.news-nav-btn {
  cursor: pointer;
}

/* Accessibility: larger fonts on small screens for readability */
@media (max-width: 480px) {
  html,
  body {
    font-size: 15px;
  }
  h1 {
    font-size: 1.4rem;
  }
  h2 {
    font-size: 1.2rem;
  }
  h3 {
    font-size: 1.05rem;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  html,
  body {
    font-size: 15px;
  }
  h1 {
    font-size: 1.6rem;
  }
  h2 {
    font-size: 1.25rem;
  }
}

@media (min-width: 769px) {
  html,
  body {
    font-size: 15px;
  }
  h1 {
    font-size: 1.8rem;
  }
}

/* small components fixups */
.card,
.modal-content {
  box-sizing: border-box;
}

/* Ensure inputs and clickable areas have enough spacing on small devices */
@media (max-width: 480px) {
  .input-group .form-control {
    padding: 10px 12px;
  }
  .social-icon-btn {
    width: 44px;
    height: 44px;
  }
}

/* final safe defaults */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ===========================
   Menu & base responsive overrides
   Purpose: centralized, minimal overrides to make the Menu page and base
   layout behave consistently across breakpoints. This keeps the sidebar
   accessible on large screens and stacked on small screens. These rules
   intentionally use higher specificity for stability and are mobile-first.
   Edit values here to tune spacing/image heights for your design.
   =========================== */

.menu-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px 16px;
  box-sizing: border-box;
}

.main-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.filter-sidebar {
  position: sticky; /* prefer sticky on modern browsers */
  top: 110px;
  left: 0;
  width: 320px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 18px;
  box-sizing: border-box;
}

.content-area {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0; /* adjusted per-breakpoint below */
  width: 100%;
}

/* Menu grid defaults (mobile-first) */
.menu-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 0 !important;
}

.menu-item-card .card-image,
.menu-item .item-image,
.menu-item-image {
  height: 180px !important;
}

/* Small phones: keep sidebar stacked but show menu as 2 columns for better density */
@media (max-width: 575.98px) {
  .main-content {
    flex-direction: column;
    gap: 12px;
  }
  /* On small phones, hide the filter sidebar completely by default.
     It will be shown when JS adds the .show class (full-screen panel). */
  .filter-sidebar {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-height: 100vh !important;
    padding: 12px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1050 !important;
  }

  .filter-sidebar.show {
    display: block !important;
  }
  .content-area {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .menu-grid {
    /* Use two columns on small phones to reduce excessive vertical scrolling */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .menu-item-card .card-image,
  .menu-item .item-image,
  .menu-item-image {
    height: 140px !important;
  }
}

/* Small tablets: two columns, sticky sidebar */
@media (min-width: 576px) and (max-width: 991.98px) {
  .main-content {
    flex-direction: row;
  }
  .filter-sidebar {
    width: 300px !important;
    top: 100px !important;
  }
  .content-area {
    margin-left: 320px !important;
    width: calc(100% - 340px) !important;
  }
  .menu-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
  .menu-item-card .card-image,
  .menu-item .item-image,
  .menu-item-image {
    height: 220px !important;
  }
}

/* Desktop / laptop: 3 columns, wider images */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .filter-sidebar {
    width: 320px !important;
    top: 120px !important;
  }
  .content-area {
    margin-left: 360px !important;
    width: calc(100% - 380px) !important;
  }
  .menu-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
  .menu-item-card .card-image,
  .menu-item .item-image,
  .menu-item-image {
    height: 360px !important;
  }
}

/* Wide / TV: 4 columns */
@media (min-width: 1400px) {
  .filter-sidebar {
    width: 340px !important;
  }
  .content-area {
    margin-left: 380px !important;
    width: calc(100% - 420px) !important;
  }
  .menu-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px !important;
  }
  .menu-item-card .card-image,
  .menu-item .item-image,
  .menu-item-image {
    height: 420px !important;
  }
}

/* End of responsive-cleanup.css */