/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.navbar .navbar-nav .dropdown .dropdown-menu {
padding: 0;
}

.header-icon {
  display: flex;
  align-items: center;
  gap: 3rem;
}

/* Solid red button – default */
.btn.btn-bs-danger {
  background: var(--bs-danger);
  color: var(--bs-white);
  border-color: var(--bs-danger);
}

/* Hover/active/focus/visible */
.btn.btn-bs-danger:hover,
.btn.btn-bs-danger:active,
.btn.btn-bs-danger:focus,
.btn.btn-bs-danger:focus-visible {
  background: var(--bs-danger);
  color: var(--bs-white);
  border-color: var(--bs-danger);
}

/* Outline variant */
.btn.btn-bs-danger-color {
  background: transparent;
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}
.btn.btn-bs-danger-color:hover,
.btn.btn-bs-danger-color:active,
.btn.btn-bs-danger-color:focus,
.btn.btn-bs-danger-color:focus-visible {
  background: var(--bs-danger);
  color: var(--bs-white);
}

/* Scope to header button area (optional but nice) */
.header-button .btn.btn-bs-danger {
  background: var(--bs-danger);
  border-color: var(--bs-danger);
  color: var(--bs-white);
}

/* Keep red when header sticks */
header.sticky.sticky-active .header-button .btn.btn-bs-danger,
header.sticky.sticky-active .header-button .btn.btn-bs-danger:hover,
header.sticky.sticky-active .header-button .btn.btn-bs-danger:active,
header.sticky.sticky-active .header-button .btn.btn-bs-danger:focus,
header.sticky.sticky-active .header-button .btn.btn-bs-danger:focus-visible {
  background: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  color: var(--bs-white) !important;
}

/* Ensure inner content stays white in sticky state */
header.sticky.sticky-active .header-button .btn.btn-bs-danger span,
header.sticky.sticky-active .header-button .btn.btn-bs-danger i {
  color: inherit !important;
}

.find-us-label { white-space: nowrap; }
.header-button .btn .btn-double-text { white-space: nowrap; } /* keep "Order Online" on one line */


/* Mobile nav fixes for dropdown inside collapsed menu */
@media (max-width: 991.98px) {
  /* Make nav links full width & left aligned */
  .navbar .navbar-nav .nav-link {
    display: block;
    width: 100%;
    text-align: left;
  }

  /* Toggler row: text left, caret on the right */
  .navbar .navbar-nav .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Submenu should be stacked under parent, not absolute */
  .navbar .navbar-nav .dropdown-menu {
    position: static !important;
    float: none;
    transform: none !important;
    display: none;             /* hidden until shown by Bootstrap */
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: .25rem 0 .5rem;
    margin: .25rem 0 0;
  }
  .navbar .navbar-nav .show > .dropdown-menu { display: block; }

  /* Indent submenu items a touch */
  .navbar .navbar-nav .dropdown-menu .dropdown-item {
    padding-left: 1.25rem;
  }

  /* Optional: keep the “dot/chevron” from pushing text around */
  .navbar .navbar-nav .dropdown-toggle::after {
    margin-left: .5rem;
  }
}

/* =========================================================
   Daily Specials Popup
   ========================================================= */

.specials-popup .specials-inner {
  /* Cap modal height so the list scrolls when there are many specials */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.specials-popup .specials-list {
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Divider between stacked specials */
.specials-popup .specials-item--divider {
  border-top: 1px solid #e8e8e8;
}

/* Hero image — keep it from getting absurdly large */
.specials-popup .specials-hero-img {
  max-height: 55vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

@media (max-width: 991px) {
  .specials-popup .specials-image-col {
    padding: 1.5rem 1rem !important;
  }
  .specials-popup .specials-hero-img {
    max-height: 40vh;
  }
}

/* Thumbnails ------------------------------------------------ */
.specials-popup .specials-thumbs {
  max-width: 100%;
}

.specials-popup .specials-thumb {
  border: 2px solid transparent;
  background: none;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}

.specials-popup .specials-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.specials-popup .specials-thumb:hover {
  border-color: #c9c9c9;
  transform: translateY(-1px);
}

.specials-popup .specials-thumb.is-active {
  border-color: #d63031; /* matches text-red */
}

/* Body content inside the text column */
.specials-popup .specials-body {
  font-size: 15px;
  line-height: 1.55;
  color: #4a4a4a;
}

.specials-popup .specials-body p:last-child {
  margin-bottom: 0;
}

/* Footer (opt-out checkbox) */
.specials-popup .specials-footer {
  border-top: 1px solid #e8e8e8;
  background: #fafafa;
  flex: 0 0 auto;
}


/* ----------------------------------------------------------------
	Burrito Week 2026 (temporary — remove with the promo after 9/30)

	The .small-screen hero row is a fixed 400px and is shared by every
	page, so it is not safe to change globally. On the home page its
	content is only ~160px and is vertically centred, which leaves ~90px
	of dead space directly above the promo. The top half of that space is
	load-bearing (the navbar is position:fixed and 141px tall), so the
	content is pushed to the bottom of the hero instead of the row being
	shortened. Desktop only: below 992px the hero is shorter and the
	content taller, and bottom-aligning it risks running under the navbar.
-----------------------------------------------------------------*/
@media (min-width: 992px) {
  .home-hero-tight .small-screen {
    align-items: flex-end !important;
    padding-bottom: 30px;
  }
}

/* The one-sheet is a 9:16 portrait poster. Left to fill its column it renders
   ~620px tall, which strands the text column in white space and pushes the
   order button below the fold. Cap it by height and let the width follow so
   the aspect ratio is never squashed. */
.burrito-week-sheet {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .burrito-week-sheet {
    max-height: 440px;
    width: auto;
  }
}