@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUph1 {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(-3rem);
  }
}

@keyframes fadeInUptag {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(-3rem);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.scroll-anchor {
  scroll-margin-top: 80px; /* match your sticky header height */
}

:root {
  --primary-color: #f5a81d;
  --secondary-color: #3498db;
  --text-color: #333;
  --sub-color: #531816;
  --mobile-menu-width: 100vw;
  --header-height: 0px;
  /* --background-color: #f4f4f4; */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: "rubik", sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
}

.subheader {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size: 4.5rem;
  /* text-transform: capitalize; */
  color: #f5a81d;
  text-align: left;
  margin-bottom: 1rem;
}

.subline {
  transform: translate(10%, -150%);
}

.menu-title {
  font-family: "Lobster", sans-serif;
  font-size: 3rem;
  text-align: left;
  color: #531816;
  margin-bottom: 2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 40px;
}

.details-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 13rem;
  height: 4rem;
  background: none;
  border-radius: 5px;
  border: none;
  background-color: var(--primary-color);
  margin-bottom: 1rem;
  transition: all 0.3s;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--sub-color);
  font-weight: bold;
  letter-spacing: 1px;
}

.details-btn:hover {
  /* scale: 1.1; */
  background-color: #f5a81d;
  box-shadow: 0 0 10px rgba(245, 168, 29, 0.6), 0 0 20px rgba(245, 168, 29, 0.4),
    0 0 30px rgba(245, 168, 29, 0.2);
}

.wrapper {
  /* display: flex; */
  max-width: 160rem;
  margin-bottom: 10rem;
  margin: 0 auto;
}

.sticky-header {
  position: fixed; /* Changed from sticky to fixed */
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  transition: all 0.3s ease;
  z-index: 1000;
  /* padding-top: 1rem; */
}
.header-container {
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 80%;

  margin: 0 auto;
  transition: all 0.3s ease;
}

.logo {
  height: 75px;
}

.navigation {
  display: flex;
}
.navigation-list {
  display: flex;
  list-style: none;
}

.navigation-list li {
  list-style: none;
  display: flex;
  gap: 3rem;
  align-items: center;
  margin-right: 2rem;
}

.nav-list a {
  font-size: 2rem;
  text-decoration: none;
  color: white; /* Initially white for transparent background */
  font-weight: 500;
  transition: color 0.3s ease;

  text-decoration: none;
  color: rgba(255, 255, 255, 0.946);
  font-size: 2rem;
  letter-spacing: 2px;
  font-weight: 500;
}

.navigation-list li a,
.navigation-list .booking {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.946);
  font-size: 2rem;
  letter-spacing: 2px;
  font-weight: 500;
}

.booking-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* booking button */
.booking {
  border: none;
  background: none;
  font-family: inherit;

  color: white;
}

.tel-container {
  border-left: 1px solid rgba(155, 155, 155, 0.825);
  border-right: 1px solid rgba(155, 155, 155, 0.825);
  padding: 0 2rem;
}
.tel-container svg {
  width: 2.5rem;
  transform: translateY(5%);
}

.ig-icon * {
  fill: red;
}
.mail-icon * {
  stroke: green;
}
.tel-container {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  gap: 1.5rem;
}

.tel-icon {
  fill: white;
}
.mail-icon {
  color: red;
}
.tel-link {
  text-decoration: none;
  color: white;
}

.lang {
  display: inline-flex;
  margin-right: 2rem;
  padding-left: 2rem;
  align-items: center;
}

.lang-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  width: 5rem;
  height: 3.5rem;

  display: inline-block;
  text-align: center;
  background: none;
  color: white;
  font-size: 1.5rem;
  border: 1px solid white !important;

  border-radius: 50px;
  cursor: pointer;
}

.sticky-header.scrolled .navigation-list a {
  color: var(--text-color);
}

.navigation-list a:hover {
  color: var(--primary-color);
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
  transition: 0.4s;
}

/* =======hero========== */

.hero-section {
  position: relative;
  height: 100vh;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("img/milagro-landing.webp") no-repeat;
  background-position: top center;

  background-size: cover;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-bottom: 5rem; */
}

.welcome-text {
  font-size: 1.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-bottom: ; */
  font-weight: 300;
  /* Animation properties */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards 0.3s;
}

.welcome-text::before,
.welcome-text::after {
  content: "";
  height: 1px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.6);
  margin: 0 10px;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* 20% opaque black overlay */
  z-index: 1;
}

.hero-content {
  z-index: 2;
  margin: 0 auto;
}

.hero-content h1 {
  color: white;
  font-size: 15rem;
  text-align: center;
  letter-spacing: 3px;
  font-family: "Chango", serif;
  font-weight: 100;
  font-style: normal;
  margin-bottom: 2rem;

  /* animation */
  opacity: 0;
  transform: translateY(-50px);
  animation: fadeInUph1 1s forwards 0.5s;
}

.hero-content .tagline {
  width: 50%;
  margin: 0 auto;
  font-size: 1.8rem;
  margin-bottom: 4rem;

  /* animation */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUptag 1s forwards 0.7s;
}

.hero-buttons {
  /* animation */
  display: flex;
  gap: 3rem;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUptag 1s forwards 0.7s;
}
.herobtn1 {
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 15rem;
  height: 5rem;
  background: none;
  border-radius: 5px;
  border: none;
  /* background-color: var(--primary-color); */
  border: 1px solid white;
  margin-bottom: 1rem;
  transition: all 0.3s;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: white;
  font-weight: bold;
  letter-spacing: 1px;
}

.btn-reservation {
  width: 15rem;
  height: 5rem;
  font-size: 1.4rem;
}

.highlights-section {
  background-color: white;
  padding: 4rem 2rem;
}

.highlights-container {
  display: flex;
  justify-content: space-around;
  max-width: 1200px;
  margin: 0 auto;
}

.highlight {
  text-align: center;
  max-width: 300px;
}

.highlight img {
  width: 100px;
  margin-bottom: 1rem;
}

/* =======about section========== */

.about-img {
  width: 100%;
  /* height: 20rem; */
  /* background: url(img/about2.png) no-repeat top; */
  /* background-size: cover; */
}
.about {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-heading {
  transform: translateY(-3rem);
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 7rem;
  /* text-transform: capitalize; */
  color: rgba(186, 31, 31, 0.845);
  text-align: center;
  margin-bottom: 8rem;
  /* padding: 1rem 0 5rem; */
}
.about-container {
  padding: 0 5rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  gap: 4rem;
  position: relative;
  margin-bottom: 10rem;
  margin-top: 3rem;
}
/* .about-photo {
  width: 60rem;
  margin-right: 10rem;
} */

/* carousel */
.about-image-cow {
  position: absolute;
  width: 45rem;
  /* top: 10%; */
  left: 17%;
  z-index: -1;
  /* top: -80%; */
  bottom: 40%;
  transform: translate(-60%, 5%);
}

.about-image-carousel {
  position: relative;
  overflow: hidden;
  width: 90rem;
  height: 50rem;
  margin-right: 5rem;
  background-color: white;

  /* border */
  box-shadow: rgba(0, 0, 0, 0.25) 0px 20px 35px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  /* border: 4px solid transparent;
  border-image: linear-gradient(135deg, #ce1126, #ffffff, #006341) 1;
  border-radius: 15px; */

  /* Optional: A slight box-shadow to give it some depth */

  /* Ensure content doesn't spill over the rounded border */
}

.about-image-carousel .about-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;

  transition: opacity 1s ease;
}

/* The active image will be visible */
.about-image-carousel .about-photo.active {
  opacity: 1;
}

.about-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 40%;
}

.about-tagline {
  font-size: 2rem;
  line-height: 3rem;
  color: #5f140c;
  letter-spacing: 1px;
}

/* ==========menu============= */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  padding: 1rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 2rem;
  line-height: 1;
}

.carousel-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-50%) scale(1.1);
}

.carousel-btn.left {
  left: 1rem;
}

.carousel-btn.right {
  right: 1rem;
}

.slide-in-left {
  animation: slideInLeft 0.5s ease;
}

.slide-in-right {
  animation: slideInRight 0.5s ease;
}

/* menu section */
.menu-section {
  margin-bottom: 10rem;
  display: flex;
}

.menu-container {
  margin: 0 auto;
  /* width: 70%; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* transform: translateY(10%); */
  /* max-width: 80%; */
  /* width: 100%;
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  align-items: center;
  justify-items: center; */
}
.menu-description {
  width: 30%;
  margin-right: 10rem;
  /* grid-column: span 2;
  grid-row: span 2; */
}

.menu-tagline {
  font-size: 2rem;
  line-height: 3rem;
  color: var(--sub-color);
  letter-spacing: 1px;
}

.menu-items {
  display: flex; /* Enable Flexbox */
  flex-wrap: wrap; /* Allow items to wrap to next line */
  flex: 1;
  max-width: 60rem;
  gap: 2rem; /* Space between cards */
  justify-content: space-between; /* Spread them out horizontally */
}
.menu-item {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: #fff; /* Or transparent if you prefer */
  flex: 1 1 calc(33.333% - 2rem);
  position: relative;
}

.menu-item:hover .thumbnail {
  scale: 0.95;
}

.menu-item h3 {
  margin-top: 1rem;
  font-size: 2rem;
  line-height: 24px;
  color: var(--sub-color);
}

.thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  /* padding-top: 100%; */
  /* This sets a 1:1 aspect ratio square */
  overflow: hidden; /* Hide anything that extends beyond the square */
  transition: all 0.3s;
}
.thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop the image to fill the square if needed */
}
.menu-item .attachment-square {
  height: 100%;
  width: 100%;
  /* object-fit: contain; */
}

.menu-item:hover .overlay {
  opacity: 1;
}
.overlay {
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  /* font-family: "Trincha", sans-serif; */
  font-size: 2rem;
  line-height: 32px;
  font-weight: bold;
  text-transform: uppercase;
}

.menu-item.full-menu .thumbnail {
  background-color: #f5a81d;
  position: relative;
  /* display: flex; */
}
.menu-item.full-menu h3 {
  bottom: 0;
  font-size: 2.5rem;
  color: white;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -20%);
  /* font-family: "Lobster", sans-serif; */
  /* text-transform: uppercase; */
  /* display: flex; */
  /* justify-content: center; */
}

.menu1 {
  background: url(img/sombrero-mexican-food.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.menu2 {
  background: url(img/sombrero-mexican-food.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.menu3 {
  background: url(img/sombrero-mexican-food.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.menu4 {
  background: url(img/sombrero-mexican-food.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.menu-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.menu-category {
  flex-basis: calc(33.333% - 2rem);
  margin-bottom: 2.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.category-title {
  font-size: 1.5rem;
  color: #d62300;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 0.125rem solid #f0f0f0;
  font-weight: 600;
}

/* .menu-items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.menu-item {
  margin-bottom: 1rem;
} */

.menu-item h4 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 600;
}

.item-description {
  font-size: 0.9375rem;
  color: #666;
  line-height: 1.4;
}

.menu-cta {
  text-align: center;
  margin-top: 2.5rem;
}

.menu-button {
  display: inline-block;
  background-color: #d62300;
  color: white;
  padding: 2rem 1.5rem;
  border-radius: 0.25rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  transition: background-color 0.3s;
}

.menu-button:hover {
  background-color: #b51e00;
}

/* =============offer-section========== */
.wrapper-offer {
  display: flex;
}
.special-offers-section {
  padding: 5rem 3rem;
  background: url("img/Restaurant\ milagro\ \(2160\ x\ 600\ px\).png") no-repeat;
  background-size: cover;
  margin-bottom: 10rem;
}
.offer-heading-container {
  width: 30%;
  margin-right: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
}
.offer-heading-tagline {
  font-size: 1.8rem;
  line-height: 1.8;
  color: #fffdebcb;
  letter-spacing: 1px;
}

.offer-tagline {
  font-size: 1.8rem;
  line-height: 1.8;

  color: var(--sub-color);
  text-align: left;
  font-weight: 400;
}

.special-offers-container {
  display: flex;
  align-items: stretch;
  /* filter: blur(10px); */
  /* pointer-events: none;  */ /* keine Klicks möglich */
  /* user-select: none; */

  /* z-index: 1; */
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  /* Optional for smooth snap scrolling */
  -webkit-overflow-scrolling: touch;
  /* white-space: nowrap; */
}
.special-offers-container::-webkit-scrollbar {
  height: 8px;
}

.special-offers-container::-webkit-scrollbar-track {
  background: #eee;
  /* or transparent */
  border-radius: 10px;
}

.special-offers-container::-webkit-scrollbar-thumb {
  background: #f5a81d;
  /* your primary color maybe? */
  border-radius: 10px;
}

.special-offers-container::-webkit-scrollbar-thumb:hover {
  background: #d68e12;
}
.offer-container2 {
  position: relative;
  display: flex;
  width: max-content;
  overflow-x: hidden;
  overflow-y: visible;
}

/* blur on top */

.coming-soon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* stacking order */
  z-index: 2; /* above the carousel & blur */

  /* your yellow + white look */
  background-color: var(--primary-color);
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.8rem 1.6rem;
  border-radius: 0.6rem;
  box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.2);

  /* don’t block clicks on offers beneath */
  pointer-events: none;
}

/* the badge itself */
.coming-soon-text {
  background-color: var(--primary-color);
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 0.8rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
  backdrop-filter: none; /* ensure it isn’t blurred */
}

.special-offer {
  /* border: 1px solid #5f140c; */
  color: white;
  padding: 1rem;
  /* border-radius: 0.5rem; */
  position: relative;
  /* overflow: hidden; */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18),
    /* main shadow */ 0 1.5px 6px rgba(0, 0, 0, 0.12),
    /* soft ambient */ 0 0.5px 1.5px rgba(0, 0, 0, 0.1);
  /* subtle edge */
  height: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 3rem;
  border-radius: 5px;
  /* filter: blur(10px);
  pointer-events: none;
  user-select: none; */
}
.special-offer:not(.is-live) .offer-blur {
  filter: blur(10px);
  /* position: relative; */
  pointer-events: none;
  user-select: none;
}
.special-offer.is-live {
  filter: none !important;
  pointer-events: auto;
  user-select: auto;
}

.offer-1 {
  background-color: rgb(136, 68, 119);
}

.offer-2 {
  background-color: rgb(26, 74, 49);
}

.offer-3 {
  background-color: rgb(199, 109, 57);
}

.special-offer h3,
.special-offer p {
  color: white;
}
.special-offer .coming-soon {
  display: block;
  width: max-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  z-index: 5; /* sits above blurred content */
  pointer-events: none;
  background-color: var(--primary-color);
}
.special-offer.is-live .coming-soon {
  display: none;
}

.special-offer img {
  margin-bottom: 1rem;
}

.special-offer img {
  width: 26rem;
}

.special-offer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  /* height: 100%; */
}
.special-offer-content a.details-btn {
  margin-top: 0;
  /* tagline stretches and pushes link down */
}
.offer-heading {
  font-family: "Dancing Script", cursive;
  color: var(--sub-color);
  font-size: 3.5rem;
  font-weight: bold;
  text-transform: capitalize;
  margin-bottom: 1rem;
}

.offer-tagline {
  text-align: center;
  margin-bottom: 2rem;
}

.special-btn {
  width: 13rem;
  height: 4rem;
  background: none;
  border-radius: 5px;
  border: none;
  background-color: var(--primary-color);
  margin-bottom: 1rem;
  transition: all 0.3s;
}

.special-offer-btn {
  text-decoration: none;
  text-transform: uppercase;
  color: var(--sub-color);
  font-weight: bold;
  letter-spacing: 1px;
}
.special-offer-content a.details-btn {
  margin-top: auto;
  /* pushes button to bottom */
}
/* ------catering------- */

.catering {
  margin-bottom: 10rem;
}

.catering-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.catering-img {
  width: 70rem;
  /* height: 40rem; */
  margin-right: 7rem;

  /* border */
  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 8px,
    /* Bottom shadow */ rgba(0, 0, 0, 0.1) 0px 2px 4px,
    /* Mid soft shadow */ rgba(0, 0, 0, 0.05) 0px -2px 4px; /* Gentle upper shadow */
}
.catering-img img {
  width: 100%;
  height: auto;
  display: block;
}

.catering-tagline {
  font-size: 2rem;
  line-height: 3rem;
  color: #5f140c;
  letter-spacing: 1px;
  margin-bottom: 2rem;
}

.catering-btn-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.cateringbtn1 {
  width: 15rem;
  height: 5rem;
  margin-right: 5rem;
}

.cateringbtn2 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 15rem;
  height: 5rem;
  background: none;
  border-radius: 5px;
  border: none;

  margin-bottom: 1rem;
  transition: all 0.3s;
  font-size: 1.2rem;
  text-transform: uppercase;

  font-weight: bold;
  letter-spacing: 1px;
  background-color: rgb(126, 25, 25);
  color: var(--primary-color);
}

.cateringbtn2:hover {
  /* scale: 1.1; */
  box-shadow: 0 0 10px rgba(83, 24, 22, 0.6), 0 0 20px rgba(83, 24, 22, 0.4),
    0 0 30px rgba(83, 24, 22, 0.2);
}

/* =========footer======= */

footer {
  height: 60rem;
  background: url(img/footerimg.webp) no-repeat right bottom;
  background-size: cover;
  color: white;
  padding: 3rem;
  text-align: center;
  display: flex;
  align-items: center;
}
.footer-left {
  max-width: 20%;
  /* margin-right: 5rem; */
}

.footer-icons {
  width: 3rem;
  height: 3rem;
  fill: white;
}
.footer-logo {
  width: 100%;
}

.footer-container {
  max-width: 140rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  gap: 5rem;
  justify-content: left;
}

/* Map Column */
.footer-map {
  flex: 1;
  min-width: 30rem;
  max-width: 40%;
  /* max-width: 28.125rem; 450px */
  /* margin-right: 5rem; */
  /* margin-bottom: 2rem; */
}

.footer-map img {
  margin-bottom: 2rem;
}
.footer-map iframe {
  width: 100%;
  height: 100%;
}

/* Content Columns */
.footer-content {
  display: flex;

  align-items: center;
  /* justify-content: space-between; */
  /* min-width: 18.75rem; 300px */
  flex-direction: column;
  /* justify-content: center; */
}

.footer-column {
  margin-bottom: 2rem;
}

.footer-heading {
  color: #ffffff; /* Gold color for headings */
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
}

.footer-info {
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
}

.footer-link {
  color: #fff;
  text-decoration: none;
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #f0c05a;
}

/* Footer Bottom */
.footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 0.0625rem solid white; /* 1px */
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  flex-wrap: wrap;
}

.footer-social {
  display: flex;
  gap: 1.5rem;
}

.social-icon {
  color: #fff;
  font-size: 1.25rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.social-icon:hover {
  color: #f0c05a;
}

/* Responsive Adjustments */
.sticky-header.menu-open {
  background: #000; /* full‑fat black */
  box-shadow: none; /* optional – flat look */
}
/* mobile nav */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: black;
  color: white;
  z-index: 999;
  transition: right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  padding: 4rem 2rem;
}

.mobile-nav-overlay.active {
  right: 0;
}

.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin-top: 5rem;
}

.mobile-nav-list li {
  margin-bottom: 3rem;
  font-size: 2.2rem;
  text-align: center;
}

.mobile-nav-list a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: color 0.3s ease;
}

.mobile-nav-list a:hover {
  color: var(--primary-color);
}

.close-nav-btn {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 4rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}
.sticky-header.hidden {
  display: none;
}

/* Responsive adjustments */

@media (max-width: 1600px) {
  .wrapper {
    max-width: 150rem; /* ~1200px */
    padding: 0 2rem;
  }
  /* nav */
  .navigation-list li a {
    font-size: 1.8rem;
  }
  .tel-container svg {
    width: 2.2rem;
  }

  .lang-btn {
    width: 4rem;
    height: 3rem;
    font-size: 1.3rem;
  }

  /* hero */
  .welcome-text {
    font-size: 1.6rem;
  }
  .hero-content .tagline {
    font-size: 1.6rem;
  }

  .hero-section h1 {
    font-size: 12rem;
  }

  /* about */
  .about-image-carousel {
    width: 80rem;
    height: 45rem;
  }
  .about-image-cow {
    bottom: 33%;
  }
  .about-tagline {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }

  .subheader {
    font-size: 4rem;
    margin-bottom: 0;
  }
  .menu-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  /* menu */
  .menu-section {
    margin-bottom: 7rem;
  }
  .menu-tagline {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }

  /* offer */
  .offer-heading-tagline {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }

  /* catering */
  .catering-tagline {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
  .catering-img {
    width: 65rem;
  }
}

@media (max-width: 1400px) {
  .wrapper {
    max-width: 135rem; /* ~1200px */
    padding: 0 2rem;
  }

  /* hero */
  .welcome-text {
    font-size: 1.8rem;
  }

  .hero-content .tagline {
    font-size: 1.8rem;
  }

  /* about */
  .about-image-carousel {
    width: 65rem;
    height: 45rem;
    margin-right: 3rem;
  }
  .about-image-cow {
    width: 40rem;
    bottom: 40%;
  }
  .about-container {
    padding: 0 3rem;
  }
  /* menu */
  .menu-item h3 {
    font-size: 1.8rem;
  }

  .special-offer {
    max-width: 25rem;
  }

  .special-offer img {
    width: 23rem;
  }

  /* footer */
  .footer {
    height: 45rem;
  }
  .footer-container {
    max-width: 120rem;
  }
  .footer-left {
    max-width: 15%;
  }
  .offer-tagline {
    font-size: 1.6rem;
  }
  .offer-heading-tagline {
    line-height: 2.8rem;
  }
}

@media (max-width: 1200px) {
  .logo {
    height: 7rem;
  }
  .navigation-list li a {
    font-size: 1.6rem;
  }
  .tel-container svg {
    width: 2rem;
  }

  .lang-btn {
    width: 3.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }

  .herobtn1,
  .btn-reservation {
    width: 14rem;
    height: 5rem;
    font-size: 1.3rem;
  }

  .about-image-carousel {
    width: 60rem;
    height: 40rem;
    margin-right: 2rem;
  }
  .about-image-cow {
    width: 40rem;
    bottom: 36%;
    left: 20%;
  }
  .about-tagline {
    font-size: 1.6rem;
    line-height: 2.5rem;
  }

  .subheader {
    font-size: 3rem;
  }
  .menu-title {
    font-size: 2.2rem;
    margin-bottom: 0.3rem;
  }

  .menu-tagline {
    font-size: 1.6rem;
    line-height: 2.5rem;
  }
  .menu-items {
    max-width: 50rem;
  }

  .menu-items h3 {
    font-size: 1.6rem;
  }

  .special-offer {
    max-width: 23rem;
    overflow: visible;
  }

  .special-offer img {
    z-index: 2;
    width: 17rem;
  }
  .special-offers-container {
    width: 60rem;
    overflow-x: auto;
    overflow-y: visible;

    /* overflow-x: auto;
    overflow-y: visible; */
    scroll-snap-type: x mandatory; /* Optional for smooth snap scrolling */
    -webkit-overflow-scrolling: touch;
    /* white-space: nowrap; */
    box-shadow: inset 0 -3px 10px rgba(0, 0, 0, 0.4);
  }
  .special-offers-container::-webkit-scrollbar {
    height: 8px;
  }
  /* .offer-spareribs{
    font-size: 2rem;
  } */

  .special-offers-container::-webkit-scrollbar-track {
    background: #eee; /* or transparent */
    border-radius: 10px;
  }

  .special-offers-container::-webkit-scrollbar-thumb {
    background: #f5a81d; /* your primary color maybe? */
    border-radius: 10px;
  }

  .special-offers-container::-webkit-scrollbar-thumb:hover {
    background: #d68e12;
  }
  /* .special-offer {
    height: 90%;
  } */
  .special-offers-container::-webkit-scrollbar {
    height: 8px;
  }

  .special-offers-container::-webkit-scrollbar-track {
    background: #eee; /* or transparent */
    border-radius: 10px;
  }

  .special-offers-container::-webkit-scrollbar-thumb {
    background: #f5a81d; /* your primary color maybe? */
    border-radius: 10px;
  }

  .special-offers-container::-webkit-scrollbar-thumb:hover {
    background: #d68e12;
  }
  .wrapper-offer {
    justify-content: center;
  }
  .offer-heading-tagline {
    font-size: 1.6rem;
  }

  .catering-img {
    width: 55rem;
  }
  .catering-tagline {
    font-size: 1.6rem;
    line-height: 2.5rem;
  }

  .footer-heading {
    font-size: 2rem;
  }
  .footer-container {
    gap: 3rem;
  }
}

@media (max-width: 1075px) {
  .header-container {
    position: relative; /* anchor for absolute kids */
    display: flex; /* keeps desktop happy if width grows */
    justify-content: center; /* centre flex line */
    align-items: center;
    max-width: none; /* full width */
    padding: 1rem 5rem 0; /* the gap you want */
    min-height: 70px; /* keep at least 70 px for the logo */
    height: auto;
  }
  .mobile-menu-header .logo-container {
    /* position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0; */

    position: static; /* <-- key line */
    transform: none;
  }

  /* .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  } */
  .mobile-menu-header .lang {
    position: absolute;
    left: 5rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    z-index: 1002;
  }

  .mobile-menu-header .lang-btn {
    width: 5rem;
    height: 3.5rem;
    font-size: 1.4rem;
  }

  .logo-container {
    margin: 0 auto;
  }

  .navigation {
    display: flex;
    /* align-items: center; vertical centring never hurts */
  }
  .navigation-list,
  .booking-container {
    display: none !important;
  }

  .mobile-nav-overlay {
    position: fixed;
    top: var(--header-height);
    right: calc(-1 * var(--mobile-menu-width)); /* off-screen */
    width: var(--mobile-menu-width);
    height: calc(100vh - var(--header-height)); /* here’s your calc magic */
    background: black;
    z-index: 999; /* header is z‑index:1000 */
    transition: right 0.3s ease-in-out; /* smooth as a trance riff */
  }

  /* when active, slide in */
  .mobile-nav-overlay.active {
    right: 0;
  }

  .close-nav-btn {
    display: none;
  }

  /* ensure only the burger toggles into X */

  .mobile-menu-toggle {
    position: absolute;
    right: 5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    width: 3rem;
    height: 2.7rem; /* a bit more breathing room for equal spacing */
    cursor: pointer;
    z-index: 1002;
    display: flex;
  }
  .mobile-menu-toggle span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: white;
    transform-origin: center;
    transition: transform 0.4s ease, opacity 0.4s ease;
  }

  .mobile-menu-toggle span:nth-child(1) {
    top: 0;
  }
  .mobile-menu-toggle span:nth-child(2) {
    top: calc(50% - 1.5px); /* center minus half bar height */
  }
  .mobile-menu-toggle span:nth-child(3) {
    top: calc(100% - 3px); /* bottom minus bar height */
  }

  .mobile-menu-toggle.active span:nth-child(1) {
    top: calc(50% - 1.5px);
    transform: rotate(45deg);
  }
  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .mobile-menu-toggle.active span:nth-child(3) {
    top: calc(50% - 1.5px);
    transform: rotate(-45deg);
  }

  /* block body scroll when menu’s active */
  body.menu-open {
    overflow: hidden;
  }

  .wrapper {
    max-width: 100rem;
    padding: 0 5rem;
  }
  .about-heading {
    margin-bottom: 7rem;
  }
  .about-container {
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    padding: 0;
  }
  .about-text-container {
    order: 2; /* comes before carousel */
    width: 100%;
    margin-bottom: 5rem; /* tweak spacing if you like */
  }
  .about-image-carousel {
    order: 1;
    width: 100%;
    padding-top: 60%;
    /* height: 40rem; */
    margin: 0;

    box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 10px,
      rgba(0, 0, 0, 0.12) 0px -5px 10px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
      rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  }
  .about-image-cow {
    bottom: 77%;
    width: 35rem;
  }
  .subheader {
    font-size: 5rem;
  }
  .menu-title {
    font-size: 3rem;
    margin-bottom: 2rem;
  }
  .about-tagline {
    font-size: 2rem;
    line-height: 3rem;
  }
  .menu-section {
    margin-top: -7rem;
  }

  .menu-container {
    flex-direction: column;
    gap: 3rem;
  }

  .menu-description {
    order: 2;
    width: 100%;
    margin: 0;
  }
  .menu-items {
    /* ditch flex, embrace grid */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 2 even columns */
    gap: 2rem;
    width: 100%;
    max-width: none !important;
  }
  .menu-item {
    /* flex: 1 1 clamp(20rem, 22vw, 26rem); */

    width: 100% !important;
    height: auto;
    flex: none !important;
  }
  .thumbnail {
    /* aspect-ratio: 4 / 3; */
    /* width drives ¾‑height        */
    padding-top: 0; /* dump the 100% trick          */
  }

  .menu-tagline {
    font-size: 2rem;
    line-height: 3rem;
  }
  .offer-heading {
    font-size: 3rem;
  }
  .offer-heading-container {
    width: 45%;
  }
  .offer-heading-tagline {
    font-size: 1.8rem;
    line-height: 3rem;
  }
  .catering {
    margin-bottom: 1rem;
  }
  .catering-container {
    flex-direction: column;
    gap: 1rem;
  }
  .catering-img {
    width: 100%;
    height: auto;
    margin: 0;
    /* padding-bottom: 3rem; */
  }
  .catering-texts {
    margin-top: 3rem;
    margin-bottom: 5rem;
  }
  .catering-tagline {
    font-size: 2rem;
    line-height: 3rem;
    margin-bottom: 3rem;
  }
  .catering-btn-container {
    gap: 5rem;
  }
  .cateringbtn1,
  .cateringbtn2 {
    width: 15rem;
    height: 5rem;
    font-size: 1.6rem;
  }

  .header-container > .booking-container {
    display: none !important;
  }
  .menu-item.full-menu h3 {
    font-size: 3rem;
    line-height: 1.3;
  }
}

@media (max-width: 900px) {
  .mobile-menu-toggle {
    width: 2.5rem;
    height: 2.3rem;
  }

  .hero-section h1 {
    font-size: 13rem;
  }
  .welcome-text {
    font-size: 1.6rem;
  }

  .hero-content .tagline {
    width: 65%;
    font-size: 1.6rem;
  }

  .about-heading {
    font-size: 6rem;
    margin-bottom: 8rem;
  }
  .about-image-cow {
    width: 30rem;
    bottom: 77%;
  }
  .subheader {
    font-size: 4rem;
  }
  .menu-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }
  .about-tagline {
    font-size: 1.8rem;
    line-height: 2.5rem;
  }
  .about-text-container {
    margin-bottom: 3rem;
  }
  .menu-tagline {
    font-size: 1.8rem;
    line-height: 2.5rem;
  }
  .menu-section {
    margin-bottom: 5rem;
  }
  .offer-heading-container {
    margin-right: 2rem;
  }
  .offer-heading-tagline {
    font-size: 1.8rem;
    line-height: 2.5rem;
  }
  .offer-tagline {
    font-size: 1.6rem;
  }
  .special-offers-section {
    padding-right: 0rem;
    margin-bottom: 5rem;
  }
  .wrapper-offer {
    padding-right: 0;
  }
  .catering-tagline {
    font-size: 1.8rem;
    line-height: 2.5rem;
  }
  .catering-btn-container {
    gap: 3.5rem;
  }
  .cateringbtn1,
  .cateringbtn2 {
    width: 13rem;
    height: 4rem;
    font-size: 1.4rem;
  }
  .footer-heading {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  footer.footer {
    height: auto;
    padding: 4rem 1rem;
    background-position: center bottom;
  }

  /* turn the old flex row into a 2‑col grid (1 : 3 ratio) */
  .footer-container {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 3fr; /* 25 % | 75 % */
    grid-template-areas:
      "logo   map" /* row‑1 */
      "contact info"; /* row‑2 */
    gap: 4rem;
    align-items: flex-start;
  }

  /* ── grid‑area assignments ─────────────────────────────── */
  .footer-left {
    grid-area: logo;
    align-items: center;
    max-width: none;
    margin-right: 0;
    justify-self: center;
    align-self: center;
  }
  .footer-bottom {
    width: 100%;
  }

  .footer-column.contact {
    grid-area: contact;
  }
  .footer-map {
    grid-area: map;
    margin: 0;
    max-width: none;
  }
  .footer-right {
    grid-area: info;
    justify-self: center;
    width: 100%;
  } /* holds address + hours */
  .footer-content {
    flex-direction: row;
    align-items: start;
    justify-content: space-around;
    /* gap: 5rem; */
  }
  /* ── logo + socials ─────────────────────────────────────− */
  .footer-logo {
    width: 110px;
    margin-bottom: 1rem;
  }
  .footer-social {
    justify-content: flex-start;
    gap: 1rem;
  }

  /* ── map bigger – fills right column ‐‐ */
  .footer-map {
    width: 100%;
  }
  .footer-map iframe {
    width: 100%;
    height: auto;
    border: 0;
  }

  /* ── headings & text size ─────────────────────────────── */
  .footer-heading {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .footer-info,
  .footer-link {
    font-size: 1.4rem;
    line-height: 1.8;
  }

  /* keep your thin divider/social strip at half‑width */
}
@media (max-width: 800px) {
  .about-image-cow {
    width: 30rem;
    bottom: 75%;
  }
}
@media (max-width: 750px) {
  .mobile-menu-header .lang-btn {
    width: 4rem;
    height: 2.5rem;
    font-size: 1.2rem;
  }
  .mobile-menu-toggle {
    width: 2.3rem;
    height: 2rem;
  }
  .welcome-text {
    font-size: 1.4rem;
  }
  .hero-section h1 {
    font-size: 12rem;
    margin-bottom: 1rem;
  }
  .herobtn1,
  .btn-reservation {
    width: 13rem;
    height: 4rem;
    font-size: 1.2rem;
  }

  .hero-content .tagline {
    font-size: 1.6rem;
  }

  .wrapper {
    padding: 0 2rem;
  }
  .about-image-cow {
    left: 23%;
    width: 28rem;
    bottom: 75%;
  }
  .about-image-carousel {
    height: 35rem;
  }
  .about-container {
    gap: 2rem;
  }
  .subheader {
    font-size: 3.8rem;
  }
  .menu-title {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
  }
  .about-tagline {
    font-size: 1.6rem;
  }
  .about-text-container {
    margin-bottom: 1.5rem;
  }

  .menu-tagline {
    font-size: 1.6rem;
  }
  .offer-heading-container {
    min-width: 40%;
  }
  .coming-soon {
    /* font-size: 1.6rem; 
    padding: 0.6rem 1.2rem; 
    border-radius: 0.5rem;  */

    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 6px;
    pointer-events: none;
  }
  .offer-heading-tagline {
    font-size: 1.6rem;
  }

  .catering-tagline {
    font-size: 1.6rem;
  }
  .menu-item.full-menu h3 {
    font-size: 2rem;
  }
}

@media (max-width: 650px) {
  .welcome-text {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
  }
  .hero-section h1 {
    font-size: 11rem;
    margin-bottom: 1rem;
  }
  .hero-section .tagline {
    font-size: 1.6rem;
  }
  .herobtn1,
  .btn-reservation,
  .cateringbtn2 {
    width: 12rem;
    height: 3.5rem;
    font-size: 1.1rem;
  }

  .about-heading {
    margin-top: 2rem;
  }

  .wrapper-offer {
    flex-direction: column;
  }
  .offer-heading-container {
    width: 100%;
    margin-bottom: 2rem;
  }
  .special-offers-section {
    padding-top: 15rem;
    padding-bottom: 6.5rem;
  }
  .offer-container2 {
    width: 100%;
  }
  .special-offers-container {
    width: 100%;
    margin-bottom: 2rem;
  }

  .offer-tagline {
    line-height: 1.4;
  }
}

@media (max-width: 590px) {
  .hero-section h1 {
    font-size: 9rem;
    margin-bottom: 1rem;
  }
  .hero-section .tagline {
    font-size: 1.6rem;
  }
  .about-image-cow {
    width: 25rem;
    bottom: 77%;
  }
  .about-image-carousel {
    height: 30rem;
  }
  .about-heading {
    margin-bottom: 6rem;
  }
  .footer-container {
    display: grid;
    grid-template-columns: 1fr; /* single column */
    grid-template-rows: auto auto auto; /* three rows */
    gap: 2rem; /* spacing between rows */
  }

  /* force each section into its own row */
  .footer-left {
    grid-row: 1;
    grid-column: 1/-1;
  }
  .footer-map {
    grid-row: 2;
    grid-column: 1/-1;
  }
  .footer-right {
    grid-row: 3;
  }
  .footer-column.contact {
    grid-row: 3;
    grid-column: 1;
  }
  .footer-logo {
    width: 14rem;
    margin-bottom: 0;
  }
  .footer-right {
    margin: 0;
  }
  .overlay {
    font-size: 1.6rem;
  }
}

@media (max-width: 500px) {
  .about-heading {
    font-size: 4.5rem;
  }
  .hero-section h1 {
    font-size: 8rem;
    margin-bottom: 1rem;
  }
  .hero-content .tagline {
    font-size: 1.6rem;
    width: 70%;
  }

  .subheader {
    font-size: 3rem;
  }
  .menu-title {
    font-size: 2rem;
  }

  .about-container {
    margin-bottom: 7rem;
  }
  .about-tagline,
  .menu-tagline,
  .catering-tagline,
  .offer-heading-tagline {
    font-size: 1.4rem;
    line-height: 2rem;
  }

  .offer-tagline {
    font-size: 1.4rem;
  }

  .wrapper {
    padding: 0;
  }
  .about-image-cow {
    left: 28%;
    bottom: 77%;
    width: 23rem;
  }
  .about-image-carousel {
    aspect-ratio: 4/3;
    width: 100%;
    height: 100%;
  }

  .carousel-btn {
    padding: 0.5rem; /* Smaller buttons */
    font-size: 1.2rem; /* Smaller arrow icons */
    width: 3rem;
    height: 3rem;
  }

  .carousel-btn.left {
    left: 0.5rem; /* Pull closer to the edge */
  }

  .carousel-btn.right {
    right: 0.5rem;
  }
  .about-text-container {
    padding: 0 1rem;
  }
  .menu-section {
    padding: 0 1rem;
  }
  .special-offers-section {
    padding-left: 1rem;
    padding-bottom: 5rem;
  }
  .menu-item.full-menu h3 {
    font-size: 2rem;
  }

  .footer-map {
    flex: 1;
    min-width: 0; /* Allows it to shrink freely */
    max-width: 100%; /* Makes it responsive */
  }
  .footer-map iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
  }

  .menu-item.full-menu h3 {
    font-size: 1.8rem;
  }
}

@media (max-width: 430px) {
  .mobile-menu-header .lang {
    left: 3rem;
  }
  .mobile-menu-toggle {
    right: 3rem;
  }
  .welcome-text::before,
  .welcome-text::after {
    width: 25px;
  }

  .logo {
    height: 5rem;
  }
  .welcome-text {
    margin-bottom: 3rem;
  }
  .about-image-cow {
    left: 28%;
    width: 20rem;
    bottom: 80%;
  }
  .hero-section h1 {
    font-size: 7rem;
    margin-bottom: 2rem;
  }
  .hero-content .tagline {
    font-size: 1.6rem;
    width: 80%;
  }

  .menu-items {
    gap: 1rem;
  }

  .footer-heading {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
  }
  .footer-container {
    display: grid;
    grid-template-columns: 1fr; /* single column */
    grid-template-rows: auto auto auto auto;
    gap: 1.5rem;
  }
  .footer-right {
    grid-row: 3;
    grid-column: 1/-1;
  }
  .footer-column.contact {
    grid-row: 4;
    grid-column: 1/-1;
  }
  .footer-content {
    gap: 1.5rem;
  }

  .menu-item.full-menu h3 {
    font-size: 1.6rem;
  }
  .subheader {
    font-size: 2.8rem;
  }
}

@media (max-width: 430px) {
  .hero-section h1 {
    font-size: 6rem;
    margin-bottom: 2rem;
  }
  .hero-content .tagline {
    font-size: 1.4rem;
    width: 80%;
  }
  .about-image-cow {
    left: 28%;
    width: 19rem;
    bottom: 82%;
  }
  .menu-section {
    margin-bottom: 3rem;
  }
  .special-offers-section {
    margin-bottom: 3rem;
  }
  .catering-texts {
    margin-top: 1.5rem;
  }

  .menu-items {
    /* allow every column to shrink to zero if needed */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* optional: trim the gap so the cells stay square */
  .menu-items {
    gap: 1rem; /* instead of 2rem */
  }
}
@media (max-width: 400px) {
  .menu-title {
    line-height: 1.1;
  }
}

@media (max-width: 350px) {
  .welcome-text {
    font-size: 1.2rem;
  }
  .hero-section h1 {
    font-size: 5rem;
  }
  .hero-content .tagline {
    font-size: 1.2rem;
  }
  .herobtn1 {
    width: 10rem;
    height: 3rem;
    font-size: 1rem;
  }
  .btn-reservation {
    width: 10rem;
    height: 3rem;
    font-size: 1rem;
    letter-spacing: 0;
  }
  .about-heading {
    font-size: 4rem;
  }
  .about-image-cow {
    width: 17rem;
    bottom: 85%;
  }
  .subheader {
    font-size: 2.5rem;
  }
  .menu-title {
    font-size: 1.6rem;
  }
  .menu-item.full-menu h3 {
    font-size: 1.2rem;
  }
}

/* ≥1200px wide AND ≤800px tall */
@media (min-width: 1200px) and (max-height: 800px) {
  .hero-section {
    padding-top: 10rem; /* push everything down a bit */
  }

  .hero-content h1 {
    font-size: 12rem; /* was 15rem → slightly smaller */
    margin-top: 1rem; /* drop it lower visually */
  }

  .welcome-text {
    font-size: 1.6rem; /* optional: make it slightly smaller too */
  }
}

/* ≥1200px wide AND ≤700px tall */
@media (min-width: 1200px) and (max-height: 700px) {
  .hero-section {
    padding-top: 11rem; /* a bit more space for very short screens */
  }

  .hero-content h1 {
    font-size: 10rem;
    margin-top: 1.2rem;
  }

  .welcome-text {
    font-size: 1.5rem;
  }
}

/* ≥1200px wide AND ≤600px tall */
@media (min-width: 1200px) and (max-height: 600px) {
  .hero-section {
    padding-top: 12rem;
  }

  .hero-content h1 {
    font-size: 9rem;
    margin-top: 1.4rem;
  }

  .welcome-text {
    font-size: 1.4rem;
  }
}

/* ≥1200px wide AND ≤500px tall */
@media (min-width: 1200px) and (max-height: 500px) {
  .hero-section {
    padding-top: 13rem;
  }

  .hero-content h1 {
    font-size: 8rem;
    margin-top: 1.5rem;
  }

  .welcome-text {
    font-size: 1.3rem;
  }
}

/* mobile-only booking block */
.mobile-booking-container {
  padding: 2rem 0 2.5rem;
  display: flex;
  justify-content: center;
  margin-top: auto;
}
.mobile-booking-inner {
  display: flex;
  gap: 1.5rem;
}

/* icons inherit overlay colour */
.mobile-booking-inner svg {
  width: 3rem;
  height: auto;
  fill: currentColor;
}
.mobile-nav-reserve {
  color: #f5a81d !important;
}

/* hide desktop icons, keep mobile ones */
@media (max-width: 330px) {
  .subheader {
    font-size: 2.4rem;
  }
}

/* reservation system */
/* centre everything inside the white popup box */
.reservation-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* wrapper around the resmio iframe */
#resmio-milagro {
  width: 100%;
  /* width: 100%;
  max-width: 420px; */
  margin: 0 auto 2rem; /* horizontally centred, bit of breathing room below */
  overflow: hidden; /* no stray scrollbars */
}
#resmio-milagro iframe {
  width: 100% !important; /* iframe stretches with wrapper   */
  max-width: none !important; /* same: no hard cap               */
  display: block; /* removes stray inline-gap        */
}

/* call reservatuib 
.call-box {
  margin-top: 0rem; 
}

.call-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;

  padding: 1.2rem 2.4rem;
  background: var(--primary-color); 
  color: var(--sub-color); 
  font-size: 1.8rem;
  font-weight: 700;
  border-radius: 9999px; 
  text-decoration: none;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.call-link:hover,
.call-link:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.call-icon {
  width: 2rem;
  height: 2rem;
  fill: currentColor; 
}

@media (max-width: 480px) {
  .call-link {
    font-size: 1.6rem;
  }
  .call-icon {
    width: 1.6rem;
    height: 1.6rem;
  }
}
*/
/* popup */
.tnp__dialog {
  position: relative;
  width: min(980px, 92vw);
  max-height: 86vh;
  margin: 7vh auto;
  background: #fff;
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);

  display: flex;
  align-items: stretch;
  overflow: hidden;
  font-family: "Roboto Mono", sans-serif;
}

/* X button (top right) */
.tnp__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  z-index: 10;
}

.tnp__close:hover {
  background: #d68e12;
  transform: scale(1.05);
}

/* LEFT COLUMN (text block) */
.tnp__left {
  flex: 1 1 55%;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  background: linear-gradient(135deg, #fff9f0, #fff);
}

.tnp__eyebrow {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tnp__title {
  font-size: 3.6rem;
  line-height: 1.2;
  color: var(--sub-color);
  margin: 0;
  font-family: "Lobster", cursive;
}

.tnp__desc {
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--text-color);
  max-width: 90%;
}

.tnp__cta {
  margin-top: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--primary-color);
  color: var(--sub-color);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.tnp__cta:hover {
  background: #d68e12;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* RIGHT COLUMN (image) */
.tnp__right {
  flex: 1 1 45%;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

.tnp__right img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#tn-popup.tnp {
  position: fixed;
  /* detach from document flow */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* cover viewport */
  /* inset: 0;  <- ok too; keeping explicit edges for safety */
  z-index: 2001;
  /* above your sticky header (1000) */
  display: none;
  /* closed by default */
}

#tn-popup.tnp.is-open {
  display: block;
}

/* dark backdrop */
.tnp__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* dialog – desktop flex layout */
.tnp__dialog {
  position: relative;
  width: min(980px, 92vw);
  max-height: 86vh;
  margin: 7vh auto;
  background: #fff;
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* X button top-right */
.tnp__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tnp__close:hover {
  filter: brightness(0.95);
  transform: scale(1.05);
}

/* columns */
.tnp__left {
  flex: 1 1 55%;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  background: linear-gradient(135deg, #fff9f0, #fff);
}

.tnp__right {
  flex: 1 1 45%;
  min-height: 280px;
  overflow: hidden;
}

.tnp__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* beef up text so it doesn’t feel empty */
.tnp__eyebrow {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tnp__title {
  font-size: 3.6rem;
  line-height: 1.2;
  color: var(--sub-color);
  margin: 0;
}

.tnp__desc {
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--text-color);
  max-width: 90%;
}

.tnp__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: var(--primary-color);
  color: var(--sub-color);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.4rem;
}

body.tnp-lock {
  overflow: hidden;
}

/* stop background scroll when open */

@media (max-width: 1024px) {
  .tnp__dialog {
    width: min(860px, 92vw);
    max-height: 88vh;
  }

  .tnp__left {
    padding: 2.4rem 2rem;
  }

  .tnp__title {
    font-size: 3.2rem;
  }

  .tnp__desc {
    font-size: 1.6rem;
  }
}

/* Small tablet / large phones */
@media (max-width: 900px) {
  .tnp__dialog {
    flex-direction: column;
    /* stack image above text */
    width: 92vw;
    max-height: 90vh;
  }

  .tnp__right {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 50vh;
    /* limit so it won’t overflow screen */
    overflow: hidden;
  }

  .tnp__right img {
    width: auto;
    max-width: 100%;
    /* fit to screen width if needed */
    height: auto;
    max-height: 100%;
    /* fit to container height */
    object-fit: contain;
  }

  .tnp__left {
    padding: 2rem 1.6rem;
  }

  .tnp__title {
    font-size: 2.8rem;
  }

  .tnp__desc {
    font-size: 1.5rem;
  }

  .tnp__cta {
    width: 100%;
  }
}

/* Phones */
@media (max-width: 600px) {
  .tnp__close {
    width: 36px;
    height: 36px;
    top: 10px;
    right: 10px;
  }

  .tnp__left {
    gap: 1.2rem;
  }

  .tnp__eyebrow {
    font-size: 1.3rem;
  }

  .tnp__title {
    font-size: 2.4rem;
  }

  .tnp__desc {
    font-size: 1.4rem;
  }

  .tnp__cta {
    padding: 12px 16px;
    font-size: 1.3rem;
  }

  .tnp__right {
    max-height: 40vh;
  }

  .tnp__right img {
    max-height: 100%;
    width: auto;
    /* let width shrink, keep full image visible */
    object-fit: contain;
  }
}
@media (max-width: 900px) {
  .tnp__dialog {
    flex-direction: column;
    /* stack image on top */
    width: 92vw;
    max-height: 90vh;
  }

  .tnp__right {
    flex: none;
    height: 300px;
    /* fixed height for image area */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    /* optional backdrop */
  }

  .tnp__right img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* no cropping, full image visible */
  }
}

/* Phones */
@media (max-width: 600px) {
  .tnp__right {
    height: 220px;
    /* smaller fixed height */
  }

  .tnp__right img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* Extra small phones ~350px */
@media (max-width: 350px) {
  .tnp__title {
    font-size: 2rem;
  }

  .tnp__desc {
    font-size: 1.2rem;
  }

  .tnp__cta {
    font-size: 1.1rem;
    padding: 10px 14px;
  }

  .tnp__right {
    height: 180px;
  }
}

/* Ultra small ~300px */
@media (max-width: 300px) {
  .tnp__title {
    font-size: 1.8rem;
  }

  .tnp__desc {
    font-size: 1.1rem;
  }

  .tnp__cta {
    font-size: 1rem;
    padding: 8px 12px;
  }

  .tnp__right {
    height: 150px;
  }
}

@media (max-width: 900px) {
  .tnp__dialog {
    flex-direction: column;
    /* stack vertically */
  }

  /* put image first */
  .tnp__right {
    order: -1;
    /* move image above text */
    height: 300px;
    /* fixed height for image area */
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #fff9f0, #fff);
    /* white like the rest */
  }

  .tnp__right img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* show full image without crop */
  }

  .tnp__left {
    order: 0;
    /* text below image */
    padding: 2rem 1.6rem;
  }
}

/* Phones (≤600px) */
@media (max-width: 600px) {
  .tnp__right {
    height: 220px;
    /* smaller image height */
    background: linear-gradient(135deg, #fff9f0, #fff);
    /* white */
  }

  .tnp__right img {
    object-fit: contain;
  }
}

.nb.nb--compact {
  --ink: #fff;
  --ink2: #ffffffcc;
  --amber: #f5a81d;
  --lime: #cdd950;
  --ribs: #ff7a59;
  --bg: rgba(82, 41, 0, 0.616);
  --pad: clamp(14px, 2.5vw, 24px);
  --dot: 34px;

  color: var(--ink);
  background: var(--bg);
  min-height: 20vh;
  height: 20vh;
  display: flex;
  align-items: center;
  padding: 0.8rem 0;
  overflow: hidden;
}

.nbc__wrap {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--pad);
  display: grid;
  gap: var(--pad);
  grid-template-columns: 1fr 2fr;
  /* 1/3 | 2/3 */
  align-items: center;
}

/* LEFT side */
.nbc__left {
  display: grid;
  gap: 0.8rem;
  grid-template-rows: auto 1fr;
}

/* --- WEEK LINE --- */
.nbc__week {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0.6rem 0 1rem;
  position: relative;
}

.nbc__week::before {
  content: "";
  position: absolute;
  left: calc(var(--dot) / 2);
  right: calc(var(--dot) / 2);
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 0;
}

/* --- Dots --- */
.nbc__day {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  border: 2px solid #fff;
  background: #a9462d;
  /* filled with your banner color */
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  z-index: 1;
  /* above the line */
  flex: 0 0 var(--dot);
  user-select: none;
}

.nbc__day.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: #1b120e;
}

.nbc__day:hover {
  box-shadow: 0 0 0 3px #ffffff33 inset;
}

/* --- Detail Card --- */
.nbc__card {
  border: 2px solid #fff;
  border-radius: 8px;
  padding: 0.9rem 1.2rem 1.2rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.12);
}

.nbc__date {
  font-size: 1.3rem;
  color: var(--ink2);
  margin-bottom: 0.2rem;
}

.nbc__title {
  font-size: clamp(1.8rem, 2.2vw, 3rem);
  margin: 0.2rem 0 1rem;
  font-weight: 800;
  color: #fff;
}

.nbc__btn {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: #c65b53;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
}

/* --- Right side News Feed --- */
.nbc__news {
  display: grid;
  gap: 12px;
  height: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  overflow: auto hidden;
}

.nbc__news-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
}

.nbc__news-eyebrow {
  font-size: 1.2rem;
  color: var(--ink2);
  margin: 0 0 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nbc__news-title {
  font-size: 1.6rem;
  margin: 0.1rem 0 0.4rem;
  color: #fff;
}

.nbc__news-text {
  font-size: 1.35rem;
  color: var(--ink2);
  margin: 0 0 0.6rem;
}

.nbc__news-link {
  color: var(--amber);
  text-decoration: none;
  font-weight: 700;
}

/* ======================================================
   Responsive adjustments
   ====================================================== */

/* @media (max-width: 1200px) {
  .nb.nb--compact {
    min-height: 18vh;
    height: 18vh;
  }

  .nbc__wrap {
    gap: clamp(10px, 2vw, 16px);
  }
}


@media (max-width: 1075px) {
  .nb.nb--compact {
    min-height: auto;
    height: auto;
    padding: 0.8rem 0 1.2rem;
  }

  .nbc__wrap {
    grid-template-columns: 1fr;
  }

  .nbc__left {
    grid-template-rows: auto auto;
  }

  .nbc__card {
    padding: 0.8rem 1rem 1rem;
  }

  .nbc__title {
    font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  }

  .nbc__news {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 900px) {
  .nb.nb--compact {
    --dot: 30px;
  }

  .nbc__week {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nbc__week::-webkit-scrollbar {
    display: none;
  }

  .nbc__card {
    width: min(560px, 96%);
    margin: 0 auto;
  }

  .nbc__news {
    grid-template-columns: 1fr;
    height: auto;
  }
}

@media (max-width: 750px) {
  .nb.nb--compact {
    padding: 0.6rem 0 0.9rem;
  }

  .nbc__week {
    padding: 0.4rem 0 0.6rem;
  }

  .nbc__week::before {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
  }

  .nbc__card {
    padding: 0.7rem 0.9rem 1rem;
  }

  .nbc__date {
    font-size: 1.2rem;
  }
}

@media (max-width: 650px) {
  .nb.nb--compact {
    --dot: 26px;
  }

  .nbc__day {
    border-width: 1.5px;
  }

  .nbc__card {
    border-width: 1.5px;
  }
}

@media (max-width: 500px) {
  .nbc__news-title {
    font-size: 1.5rem;
  }

  .nbc__news-text {
    font-size: 1.25rem;
  }

  .nbc__news-card {
    border-radius: 10px;
    padding: 10px 12px;
  }
}

@media (max-width: 430px) {
  .nb.nb--compact {
    --dot: 24px;
  }

  .nbc__card {
    width: min(520px, 94%);
  }
}

@media (max-width: 350px) {
  .nb.nb--compact {
    --dot: 22px;
  }

  .nbc__title {
    font-size: 1.9rem;
  }

  .nbc__btn {
    font-size: 1.1rem;
    padding: 0.45rem 1rem;
  }
} */

/* === Week dots: filled by default; highlight today === */
.nb.nb--compact {
  --dot: 34px;
}

.nbc__week::before {
  /* keep your line; this stays behind the dots */
  content: "";
  position: absolute;
  left: calc(var(--dot) / 2);
  right: calc(var(--dot) / 2);
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 0;
}

.nbc__day {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  border: 2px solid #fff;
  background: #a9462d;
  /* fill ALL dots so the line is hidden */
  color: #fff;
  /* day number readable */
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  z-index: 1;
  /* above the line */
  flex: 0 0 var(--dot);
  user-select: none;
}

.nbc__day.is-active {
  background: #f5a81d;
  /* today = amber */
  border-color: #f5a81d;
  color: #1b120e;
  /* better contrast on yellow */
}

/* === FORCE WEEK DOTS STYLE === */
.nbc__day {
  width: var(--dot, 34px);
  height: var(--dot, 34px);
  border-radius: 50%;
  border: 2px solid #fff !important;
  background: #bb958d !important;
  /* filled base color */
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 800;
  font-size: 13px;
  z-index: 1;
  flex: 0 0 var(--dot, 34px);
}

.nbc__day.is-active {
  background: #f5a81d !important;
  /* today highlight */
  border-color: #f5a81d !important;
  color: #1b120e !important;
}

.nbc__week::before {
  content: "";
  position: absolute;
  left: calc(var(--dot, 34px) / 2);
  right: calc(var(--dot, 34px) / 2);
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 0;
}

/* === NEWS SECTION BACKGROUND HIGHLIGHT === */
.nbc__news {
  background: rgba(255, 255, 255, 0.05);
  /* soft glassy contrast */
  border-radius: 14px;
  padding: 1.2rem 1.6rem;
  backdrop-filter: brightness(1.1) blur(3px);
  /* slight glow */
  -webkit-backdrop-filter: brightness(1.1) blur(3px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}

/* make sure it doesn’t squeeze the grid layout */
.nbc__news-card {
  background: rgba(0, 0, 0, 0.25);
  /* darker base for cards */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 14px 16px;
}

/* === Milagro Banner — Warm Amber Glass (no images) === */

/* 1) Banner surface: lighter, yellowish, readable */
.nb.nb--compact {
  --ink: #111;
  /* darker ink for a bright surface */
  --ink2: #00000099;
  --amber: #f5a81d;
  /* today highlight */
  --amber-700: #d9a21a;
  /* hover/highlight depth */
  --amber-500: #eebc35;
  /* mid tone */
  --amber-300: #ffe082;
  /* light lift */
  --sand-100: #fff7dd;
  /* subtle paper tint */

  color: var(--ink);
  /* soft vertical gradient + faint vignette; brighter overall */
  background: radial-gradient(
      120% 100% at 50% 0%,
      rgba(0, 0, 0, 0.1),
      transparent 55%
    ),
    linear-gradient(180deg, rgba(205, 101, 3, 0.677), rgba(255, 123, 0, 0.439));
  backdrop-filter: saturate(1.05) brightness(1.02);
  -webkit-backdrop-filter: saturate(1.05) brightness(1.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

/* 2) Week timeline: lighter line to match */
.nbc__week::before {
  height: 2px;
  background: rgba(0, 0, 0, 0.18);
}

/* 3) Dots: filled (no line bleed), today = amber */
.nb.nb--compact {
  --dot: 34px;
}

.nbc__day {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.65);
  background: var(--amber-500);
  /* filled base for other days */
  color: #111;
  /* readable on warm fill */
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  z-index: 1;
  flex: 0 0 var(--dot);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 6px 14px rgba(0, 0, 0, 0.16);
}

.nbc__day.is-active {
  background: var(--amber);
  border-color: rgba(0, 0, 0, 0.75);
  color: #1b120e;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 8px 18px rgba(0, 0, 0, 0.2);
}

.nbc__day:hover {
  background: var(--amber-300);
}

/* 4) Detail card: light “paper” panel */
.nbc__card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85),
    var(--sand-100)
  );
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 20px rgba(0, 0, 0, 0.12);
}

.nbc__date {
  color: var(--ink2);
}

.nbc__title {
  color: #111;
}

/* 5) News area: separate pale panel so it doesn’t feel empty */
.nbc__news {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.nbc__news-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.75)
  );
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 12px 22px rgba(0, 0, 0, 0.12);
}

.nbc__news-eyebrow {
  color: #5b4a00;
  opacity: 0.8;
}

.nbc__news-title {
  color: #1c1400;
}

.nbc__news-text {
  color: #3a2e00cc;
}

.nbc__news-link {
  color: #5b3d00;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 2px solid var(--amber-700);
}

.nbc__news-link:hover {
  color: #2a1c00;
  border-color: var(--amber);
}

/* 6) Keep dots stretching edge-to-edge across the line */
.nbc__week {
  justify-content: space-between;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0.6rem 0 1rem;
  position: relative;
}

.nbc__week::before {
  left: calc(var(--dot) / 2);
  right: calc(var(--dot) / 2);
  top: 50%;
  transform: translateY(-50%);
}

/* === News card hover animation === */
.nbc__news-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

.nbc__news-card:hover {
  transform: scale(1.035);
  /* gentle pop */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  z-index: 2;
  /* keep above neighbors if multiple cards */
}

/* try */

/* 1) Make the right-side news background reach the viewport edge */
.nb.nb--compact {
  --pad: clamp(14px, 2.5vw, 24px);
}

.nbc__wrap {
  /* keep your current layout, we’ll bleed the news panel only */
  position: relative;
}

/* Bleed the news panel to the right edge, keep inner padding */
.nbc__news {
  /* extend background past the wrapper’s right padding */
  margin-right: calc(-1 * var(--pad));
  padding-right: calc(var(--pad) + 16px);

  /* visually flush with the right edge */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* 2) Make each news card smaller and add breathing room */
:root {
  --news-card-max: 340px; /* cap the card width */
  --news-gap: 16px; /* space between cards */
  --news-pad: 12px 14px; /* inner padding */
}

/* tighten grid and cap card size without breaking your columns */
.nbc__news {
  gap: var(--news-gap);
  align-content: center;
  justify-items: start; /* cards align to grid start */
}

/* cap width + lighter padding so the cards feel less cramped */
.nbc__news-card {
  max-width: var(--news-card-max);
  padding: var(--news-pad);
}

/* make text a touch smaller so it breathes */
.nbc__news-title {
  font-size: 1.45rem;
}
.nbc__news-text {
  font-size: 1.25rem;
}

/* =========================
   NEWS BAND — full-bleed right
   ========================= */

/* Move the background onto a pseudo element that can escape the wrapper */
.nbc__news {
  position: relative;
  z-index: 0; /* create a stacking context for the overlay */
  background: none !important; /* background is drawn by ::before */
  gap: var(--news-gap, 16px);
}

/* Paint from the news grid all the way to the viewport's right edge */
.nbc__news::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; /* start at the grid's left edge */
  right: calc(50% - 50vw); /* extend to the viewport’s right edge */
  background: rgba(255, 255, 255, 0.65); /* your pale panel */
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  z-index: -1; /* sit behind the cards */
}

/* Make the articles a bit smaller/looser (you already started this) */
.nbc__news-card {
  max-width: 340px; /* cap width so it feels airy */
  padding: 12px 14px;
}

.nbc__news-title {
  font-size: 1.45rem;
}
.nbc__news-text {
  font-size: 1.25rem;
}

/* Wide desktop: allow slightly wider cards without cramping */
/* @media (min-width: 1400px) {
  .nbc__news-card {
    max-width: 360px;
  }
} */

/* Keep the bleed when the layout stacks on tablet */
/* @media (max-width: 1075px) {
  .nbc__news::before {
    right: calc(50% - 50vw); 
  }
} */

/* Small phones: slightly tighter padding */
/* @media (max-width: 500px) {
  .nbc__news-card {
    max-width: 320px;
    padding: 10px 12px;
  }
  .nbc__news-title {
    font-size: 1.35rem;
  }
  .nbc__news-text {
    font-size: 1.2rem;
  }
} */

/* try */
/* THEMED NIGHT (LEFT) — floating panel */
.nbc__left {
  position: relative;
  background: rgba(255, 255, 255, 0.72); /* soft paper */
  border: 1px solid rgba(0, 0, 0, 0.12); /* thin outline */
  border-radius: 16px; /* rounded corners */
  padding: 12px 16px; /* inner breathing room */
  margin-block: 10px; /* gap top & bottom so it “floats” */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); /* lift */
  backdrop-filter: saturate(1.05) blur(2px);
  -webkit-backdrop-filter: saturate(1.05) blur(2px);
  z-index: 0;
}

/* Keep the week line and card comfy inside the new panel */
.nbc__week {
  padding-top: 0.4rem;
  padding-bottom: 0.8rem;
}
.nbc__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #fff7dd);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Make sure the left panel still looks tidy when stacked */
@media (max-width: 1075px) {
  .nbc__left {
    padding: 10px 12px;
    margin-block: 8px;
    border-radius: 14px;
  }
}

/* Tiny screens: trim padding so it doesn’t feel bloated */
@media (max-width: 500px) {
  .nbc__left {
    padding: 8px 10px;
    margin-block: 6px;
    border-radius: 12px;
  }
}

/* THEMED NIGHT — tighter proportions & vertical float */
.nbc__left {
  margin-block: 1.2rem; /* more gap above/below */
  padding: 10px 14px; /* less inner padding */
  transform: translateY(0); /* keep level */
}

/* shrink week dots and spacing */
.nbc__day {
  --dot: 28px; /* smaller circles */
  font-size: 12px;
}

/* thin week line spacing */
.nbc__week {
  padding-top: 0.2rem;
  padding-bottom: 0.6rem;
}

/* compress the detail card */
.nbc__card {
  padding: 0.6rem 1rem 0.8rem;
  font-size: 1.3rem;
  line-height: 1.4;
}

/* text sizing inside card */
.nbc__date {
  font-size: 1.1rem;
}
.nbc__title {
  font-size: 1.8rem;
  margin-bottom: 0.6rem;
}
.nbc__btn {
  font-size: 1.1rem;
  padding: 0.4rem 1rem;
}

/* media tweaks */
@media (max-width: 1075px) {
  .nbc__left {
    margin-block: 1rem;
    padding: 8px 12px;
  }
  .nbc__title {
    font-size: 1.6rem;
  }
}
@media (max-width: 600px) {
  .nbc__left {
    margin-block: 0.8rem;
  }
  .nbc__day {
    --dot: 24px;
    font-size: 11px;
  }
  .nbc__title {
    font-size: 1.5rem;
  }
}

/* banner */
/* === Desktop: banner pinned to bottom of hero === */

.hero-section {
  position: relative;
  /* already set, but we assert it */
  height: 100vh;
  /* hero is the full canvas: 80vh visible + 20vh covered by banner */
}

#news-banner {
  position: absolute;
  left: 0;
  bottom: 0;
  /* lock to hero bottom */
  width: 100%;
  height: 15vh;
  /* the bottom 20vh slice */
  z-index: 900;
  /* below your fixed header (1000) */
  display: flex;
  align-items: stretch;
}

/* Float/glass styling */
.nb.nb--compact {
  background: rgba(82, 41, 0, 0.4);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  height: 100%;
  min-height: 15vh;
  padding: 0;
  /* your inner grid handles spacing */
}
#news-banner {
  background: transparent !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15) brightness(1.08);
  backdrop-filter: blur(12px) saturate(1.15) brightness(1.08);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}

/* Kill every background the banner set earlier (you have several) */
.nb.nb--compact,
.nbc__wrap,
.nbc__left,
.nbc__right {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent;
}

/* Right column: remove the full-bleed pale slab */
.nbc__news {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* That grey panel is coming from the ::before pseudo. Remove it. */
.nbc__news::before {
  content: none !important;
  display: none !important;
}

/* Make cards readable without painting the whole side opaque */
.nbc__news-card {
  background: rgba(0, 0, 0, 0.18) !important;
  /* subtle, not grey wall */
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Typography: bright but not blinding */
.nbc__wrap,
.nbc__left,
.nbc__right,
.nbc__news {
  color: rgba(255, 255, 255, 0.95) !important;
}

.nbc__left h2,
.nbc__left h3,
.nbc__news-title {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.nbc__news-text {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Dots and tiny accents can stay; just ensure no banner tint leaks in */
.nbc__week::before {
  background: rgba(255, 255, 255, 0.18) !important;
}
.nbc__left {
  background: rgba(220, 133, 13, 0.806) !important; /* soft amber glow */
  /* -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2); */
  /* border-right: 1px solid rgba(199, 202, 11, 0.719); */
}

.nbc__news {
  background: rgba(158, 47, 7, 0.447) !important;
}

.nbc__card {
  background: rgba(160, 145, 28, 0.213) !important;
}
.nbc__news-card {
  min-width: 25rem;
}

.nbc__news-link,
.nbc__news-eyebrow,
.nbc__date {
  color: white;
}

/* small laptop */
@media (min-width: 1000px) and (max-height: 950px) {
  /* smaller bottom banner so it doesn't crush content */
  #news-banner {
    height: 16vh;
    /* was 20vh; tweak to 17–18vh if you want */
    min-height: 16vh;
  }

  /* make sure hero text never sits under the banner */
  .hero-content {
    padding-bottom: 18vh;
    /* >= banner height for safe clearance */
  }

  /* tighten banner internals (no color changes) */
  .nb.nb--compact {
    padding: 0.5rem 0;
  }

  .nbc__wrap {
    gap: 10px;
  }

  .nbc__left,
  .nbc__news {
    margin-block: 0.4rem;
    padding: 8px 10px;
  }

  /* slightly smaller UI so it breathes on short screens */
  .nbc__day {
    --dot: 28px;
    font-size: 12px;
  }

  .nbc__title {
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .nbc__btn {
    font-size: 0.95rem;
    padding: 0.35rem 0.75rem;
  }

  .nbc__news-title {
    font-size: 1.3rem;
    line-height: 1.25;
  }

  .nbc__news-text {
    font-size: 1.1rem;
    line-height: 1.35;
  }
}
@media (min-width: 1000px) and (max-height: 850px) {
  #news-banner {
    height: 16vh;
    min-height: 16vh;
  }

  .hero-content {
    padding-bottom: 13vh;
  }

  .nbc__title {
    font-size: 1.4rem;
  }

  .nbc__news-title {
    font-size: 1.15rem;
  }

  .nbc__news-text {
    font-size: 1rem;
  }

  .nbc__btn {
    font-size: 0.9rem;
    padding: 0.3rem 0.7rem;
  }
}
@media (min-width: 1000px) and (max-height: 800px) {
  /* tighten banner internals only (no color) */
  .nb.nb--compact {
    padding: 0.45rem 0;
  }

  /* smaller gaps between left/right columns */
  .nbc__wrap {
    gap: 8px;
  }

  /* trim outside space + inner padding on both panels */
  .nbc__left,
  .nbc__news {
    margin-block: 0.35rem;
    padding: 7px 9px;
  }

  /* week line tighter, dots smaller */
  .nbc__week {
    padding: 0.2rem 0 0.4rem;
  }

  .nbc__day {
    --dot: 26px;
    font-size: 11px;
  }

  /* left detail card compact */
  .nbc__card {
    padding: 0.5rem 0.8rem 0.7rem;
  }

  .nbc__date {
    font-size: 1.05rem;
  }

  .nbc__title {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 0.45rem;
  }

  .nbc__btn {
    font-size: 0.95rem;
    padding: 0.32rem 0.75rem;
  }

  /* news list items compact */
  .nbc__news-card {
    padding: 10px 12px;
    border-radius: 10px;
  }

  .nbc__news-title {
    font-size: 1.2rem;
    line-height: 1.25;
    margin-bottom: 0.3rem;
  }

  .nbc__news-text {
    font-size: 1.05rem;
    line-height: 1.35;
  }

  /* keep long titles from blowing the layout */
  .nbc__title,
  .nbc__news-title {
    overflow-wrap: anywhere;
  }
}
@media (min-width: 1000px) and (max-height: 750px) {
  /* #news-banner {
    height: 13vh;
    min-height: 13vh;
  } */

  .hero-content {
    padding-bottom: 14vh;
  }

  /* keep content clear of banner */

  .nb.nb--compact {
    padding: 0.42rem 0;
  }

  .nbc__wrap {
    gap: 7px;
  }

  .nbc__left,
  .nbc__news {
    margin-block: 0.32rem;
    padding: 6px 8px;
  }

  .nbc__week {
    padding: 0.18rem 0 0.35rem;
  }

  .nbc__day {
    --dot: 24px;
    font-size: 10.5px;
  }

  .nbc__card {
    padding: 0.45rem 0.7rem 0.6rem;
  }

  .nbc__date {
    font-size: 1rem;
  }

  .nbc__title {
    font-size: 1.45rem;
    line-height: 1.2;
    margin-bottom: 0.4rem;
  }

  .nbc__btn {
    font-size: 0.92rem;
    padding: 0.3rem 0.7rem;
  }

  .nbc__news-card {
    padding: 9px 10px;
    border-radius: 9px;
  }

  .nbc__news-title {
    font-size: 1.15rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
  }

  .nbc__news-text {
    font-size: 1rem;
    line-height: 1.35;
  }

  .nbc__title,
  .nbc__news-title {
    overflow-wrap: anywhere;
  }
}

/* ≤700px tall — compact again */
@media (min-width: 1000px) and (max-height: 700px) {
  /* #news-banner {
    height: 12vh;
    min-height: 12vh;
  } */

  .hero-content {
    padding-bottom: 13vh;
  }

  .nb.nb--compact {
    padding: 0.38rem 0;
  }

  .nbc__wrap {
    gap: 6px;
  }

  .nbc__left,
  .nbc__news {
    margin-block: 0.28rem;
    padding: 6px 7px;
  }

  .nbc__week {
    padding: 0.16rem 0 0.32rem;
  }

  .nbc__day {
    --dot: 22px;
    font-size: 10px;
  }

  .nbc__card {
    padding: 0.42rem 0.65rem 0.55rem;
  }

  .nbc__date {
    font-size: 0.98rem;
  }

  .nbc__title {
    font-size: 1.4rem;
    margin-bottom: 0.35rem;
  }

  .nbc__btn {
    font-size: 0.9rem;
    padding: 0.28rem 0.65rem;
  }

  .nbc__news-card {
    padding: 8px 9px;
    border-radius: 8px;
  }

  .nbc__news-title {
    font-size: 1.1rem;
  }

  .nbc__news-text {
    font-size: 0.98rem;
  }
}

/* ≤650px tall — minimal but readable */
@media (min-width: 1000px) and (max-height: 650px) {
  /* #news-banner {
    height: 11vh;
    min-height: 11vh;
  } */

  .hero-content {
    padding-bottom: 12vh;
  }

  .nb.nb--compact {
    padding: 0.35rem 0;
  }

  .nbc__wrap {
    gap: 6px;
  }

  .nbc__left,
  .nbc__news {
    margin-block: 0.25rem;
    padding: 5px 7px;
  }

  .nbc__week {
    padding: 0.14rem 0 0.28rem;
  }

  .nbc__day {
    --dot: 20px;
    font-size: 9.5px;
  }

  .nbc__card {
    padding: 0.4rem 0.6rem 0.5rem;
  }

  .nbc__date {
    font-size: 0.95rem;
  }

  .nbc__title {
    font-size: 1.35rem;
    margin-bottom: 0.3rem;
  }

  .nbc__btn {
    font-size: 0.88rem;
    padding: 0.26rem 0.6rem;
  }

  .nbc__news-card {
    padding: 7px 8px;
    border-radius: 8px;
  }

  .nbc__news-title {
    font-size: 1.05rem;
  }

  .nbc__news-text {
    font-size: 0.95rem;
  }
}

@media (max-width: 900px) {
  .hero-section {
    height: 110vh;
  }
  .hero-content {
    margin-bottom: 10rem;
  }
  /* banner height only */
  #news-banner {
    height: 30vh;
    min-height: 30vh;
    display: flex;
    align-items: stretch;
    margin-bottom: 0px;
  }

  .nb.nb--compact {
    height: 20vh;
    min-height: 20vh;
    padding: 0.4rem 0 0.6rem;
    /* lighter vertical breathing */
  }

  /* stack the two panels and remove wasted space */
  .nbc__wrap {
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 0 0.9rem;
  }

  /* LEFT: date line + card */
  .nbc__week {
    padding: 0.2rem 0 0.4rem;
  }

  .nbc__day {
    --dot: 24px;
    font-size: 11px;
  }

  /* smaller day dots */
  .nbc__left {
    margin-block: 0rem;
    padding: 6px 8px;
  }

  .nbc__card {
    padding: 0.5rem 0.75rem 0.65rem;
    border-radius: 8px;
  }

  .nbc__date {
    font-size: 1.05rem;
  }

  .nbc__title {
    font-size: clamp(1.35rem, 3.6vw, 1.65rem);
    margin-bottom: 0.35rem;
    line-height: 1.2;
  }

  .nbc__btn {
    font-size: 0.95rem;
    padding: 0.32rem 0.75rem;
  }

  /* RIGHT: news feed box and items */
  .nbc__news {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-block: 0.3rem;
    padding: 6px 8px;
  }

  .nbc__news-card {
    padding: 8px 9px;
    border-radius: 8px;
    min-width: 20rem;
  }

  .nbc__news-title {
    font-size: 1.15rem;
    line-height: 1.2;
    margin-bottom: 0.25rem;
  }

  .nbc__news-text {
    font-size: 1rem;
    line-height: 1.3;
  }

  /* keep long titles from exploding layout without killing content */
  .nbc__title,
  .nbc__news-title {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 650px) {
  .nbc__news-card {
    padding: 5px 7px;
    border-radius: 8px;
    min-width: 15rem;
  }
}
/* tiny phones: shave a little more, but still 20vh banner */
@media (max-width: 500px) {
  .hero-section {
    height: 110vh;
  }
  #news-banner {
    height: 30vh;
    min-height: 30vh;
    display: flex;
    align-items: stretch;
    margin-bottom: 0px;
  }

  .nbc__day {
    --dot: 22px;
    font-size: 10px;
  }

  .nbc__left,
  .nbc__news {
    padding: 5px 7px;
    margin-block: 0.25rem;
  }

  .nbc__card {
    padding: 0.45rem 0.65rem 0.6rem;
  }

  .nbc__title {
    font-size: 1.3rem;
  }

  .nbc__news-title {
    font-size: 1.05rem;
  }

  .nbc__news-text {
    font-size: 0.95rem;
  }
}
@media (max-width: 500px) and (max-height: 700px) {
  #news-banner {
    height: 31vh;
    min-height: 31vh;
    display: flex;
    align-items: stretch;
    margin-bottom: 0px;
  }
}
@media (max-width: 500px) and (max-height: 600px) {
  #news-banner {
    height: 33vh;
    min-height: 33vh;
    display: flex;
    align-items: stretch;
    margin-bottom: 0px;
  }
}
@media (max-width: 380px) {
  .nbc__day {
    --dot: 20px;
  }

  .nbc__title {
    font-size: 1.2rem;
  }

  .nbc__btn {
    font-size: 0.9rem;
    padding: 0.28rem 0.65rem;
  }
}

/* events page */
/* Page skin on events.html <body class="events-page"> */
.events-page {
  background: linear-gradient(to bottom, #9f4f00 0%, #ffffff 15%);
  color: #1f1a14;
}

/* Main wrapper spacing for events page */
.page-events {
  padding-top: clamp(8rem, 6rem + 2vw, 10rem);
  padding-bottom: 6rem;
}

/* Intro block */
.events-hero {
  padding: 2rem;
}

.events-title {
  font-family: "Lobster", sans-serif;
  font-size: clamp(2.8rem, 2rem + 1.6vw, 4rem);
  color: var(--sub-color);
  margin-bottom: 0.8rem;
}

.events-sub {
  font-size: 1.6rem;
  line-height: 1.6;
  color: rgba(31, 26, 20, 0.75);
}

/* Section strips (Thementage / News) */
.events-strip,
.news-strip {
  background: #ffffff;
  border: 0.1rem solid rgba(31, 26, 20, 0.12);
  border-radius: 0.8rem;
  padding: 2rem;
  margin: 2.5rem 0 3.5rem;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.05);
}

.strip-heading {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

/* Card grids */
.page-events .card-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.page-events .news-strip .card-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Cards */
.page-events .event-card,
.page-events .news-card {
  background: #ffffff;
  border-radius: 0.8rem;
  overflow: hidden;
  box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-events .event-card:hover,
.page-events .news-card:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.8rem 2.2rem rgba(0, 0, 0, 0.12);
}

/* Media area uses inline background-image in events.html */
.page-events .card-media {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}

/* Card body/content */
.page-events .card-body {
  padding: 1.2rem 1.4rem 1.6rem;
  display: grid;
  gap: 0.6rem;
  color: #1f1a14;
}

.page-events .card-title {
  font-size: 1.6rem;
  color: var(--sub-color);
}

.page-events .card-text {
  font-size: 1.4rem;
  color: rgba(31, 26, 20, 0.85);
}

.page-events .badge {
  justify-self: start;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: var(--primary-color);
  color: #ffffff;
}

/* =========================
   RESPONSIVE (matches page’s breakpoints)
   ========================= */

/* <=1600: 3-up themed cards, 4-up news */
@media (max-width: 1600px) {
  .page-events .card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-events .news-strip .card-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* <=1400: just tighten the gaps a hair */
@media (max-width: 1400px) {
  .page-events .card-row {
    gap: 1.8rem;
  }
}

/* <=1200: same as 1600 rules (safe redundancy for mid screens) */
@media (max-width: 1200px) {
  .page-events .card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-events .news-strip .card-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* <=1075: grid holds at 3 & 4; keep spacing solid */
@media (max-width: 1075px) {
  .page-events .card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  .page-events .news-strip .card-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* <=900: drop to 2-up themed, 3-up news; shrink title a touch */
@media (max-width: 900px) {
  .page-events .card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-events .news-strip .card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .events-title {
    font-size: clamp(2.6rem, 2rem + 1vw, 3.4rem);
  }
}

/* <=750: tighten grid gaps */
@media (max-width: 750px) {
  .page-events .card-row,
  .page-events .news-strip .card-row {
    gap: 1.6rem;
  }
}

/* <=650: news to 2-up */
@media (max-width: 650px) {
  .page-events .news-strip .card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* <=590: header clearance a bit smaller */
@media (max-width: 590px) {
  .page-events {
    padding-top: clamp(7rem, 6rem + 2vw, 9rem);
  }

  .events-sub {
    font-size: 1.4rem;
  }
}

/* <=500: single-column everywhere */
@media (max-width: 500px) {
  .page-events .card-row,
  .page-events .news-strip .card-row {
    grid-template-columns: 1fr;
  }
}

/* <=430: title size down a hair */
@media (max-width: 430px) {
  .events-title {
    font-size: clamp(2.4rem, 2rem + 1vw, 3rem);
  }
}

/* <=400: a little less padding inside cards */
@media (max-width: 400px) {
  .page-events .card-body {
    padding: 1rem 1.2rem 1.4rem;
  }
}

/* <=350: keep sub text comfy */
@media (max-width: 350px) {
  .events-sub {
    line-height: 1.5;
  }
}

/* =========================
   EVENT POPUP (desktop)
   ========================= */
.event-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  /* hidden by default */
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.65);
  /* dark overlay */
  backdrop-filter: blur(4px);
}

.event-popup.active {
  display: flex;
  /* show when triggered */
}

.popup-content {
  width: 90%;
  height: 85vh;
  display: grid;
  grid-template-columns: 45% 55%;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.35);
}

/* Left side — image */
/* .popup-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
} */

.popup-left {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e08505;
  /* optional, so empty space looks intentional */
}

.popup-left img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  /* preserves full image, no crop */
  display: block;
}

/* Right side — text and scroll */
.popup-right {
  position: relative;
  padding: 2rem 3rem;
  overflow-y: auto;
  color: #1f1a14;
  display: flex;
  flex-direction: column;
}

.popup-title {
  font-size: 5rem;
  margin-bottom: 0.6rem;
  color: var(--sub-color, #a33);
}

.popup-sub {
  font-size: 3rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-family: "Dancing Script", cursive;
  font-weight: bold;
}

.popup-desc {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.popup-cta {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 0.8rem 0;
  margin-top: 1rem;

  /* faint fade so the button doesn’t crash into text */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.7) 60%,
    rgba(255, 255, 255, 0)
  );
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.popup-btn {
  display: inline-block;
  background: var(--primary-color, #b86b00);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  transition: background 0.2s ease;
  font-size: 2rem;
}

.popup-btn:hover {
  background: #000;
}

/* Close button */
.popup-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2.2rem;
  border: none;
  background: none;
  color: #444;
  cursor: pointer;
  transition: color 0.2s;
}

.popup-close:hover {
  color: #000;
}

/* Scrollbar cosmetics */
.popup-right::-webkit-scrollbar {
  width: 6px;
}

.popup-right::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.popup-cta {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  /* <<< creates a gap between text and line */
  padding-top: 2rem;
  /* extra air if needed */
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  /* optional subtle line */
}

/* mobile */
/* === ≤900px ONLY: center modal, stacked layout, readable text === */
/* === ≤900px: same layout, just balanced fonts + spacing === */
@media (max-width: 1000px) {
  /* image side */
  .popup-left img {
    object-fit: contain;
    /* no cropping */
    width: 100%;
    height: 100%;
  }

  /* right side tweaks */
  .popup-right {
    padding: 1.8rem 2rem 6rem;
    /* keep space for button */
    overflow-y: auto;
  }

  /* close button stays easy to tap */
  .popup-close {
    top: 0.8rem;
    right: 1.2rem;
    font-size: 2.2rem;
  }

  /* bigger readable text */
  .popup-title {
    font-size: 4rem;
    line-height: 1.25;
    margin-right: 2.6rem;
  }

  .popup-sub {
    font-size: 3rem;
    margin: 0.6rem 0 1rem;
  }

  .popup-desc {
    font-size: 1.8rem;
    line-height: 1.6;
  }

  /* bottom button centered */
  .popup-cta {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.96),
      rgba(255, 255, 255, 0)
    );
  }

  .popup-btn {
    /* min-width: 220px; */
    padding: 0.8rem 1.6rem;
    font-size: 1.05rem;
  }
}

@media (max-width: 800px) {
  .popup-title {
    font-size: 3.6rem;
  }

  .popup-sub {
    font-size: 2.6rem;
  }

  .popup-desc {
    font-size: 1.6rem;
  }
}

/* === ≤700px: switch popup to stacked layout === */
/* === ≤700px: stack ONLY, no modal size changes === */
@media (max-width: 700px) {
  /* stack the two halves; keep whatever width/height you already set elsewhere */
  .popup-content {
    display: flex;
    flex-direction: column;
  }

  /* image on top; don't let it eat all vertical space */
  .popup-left {
    order: 0;
  }

  .popup-left img {
    width: 100%;
    height: auto;
    max-height: 40vh;
    /* cap so it can't take over; still shows full image */
    object-fit: contain;
  }

  /* text panel below; must be allowed to scroll in a flex column */
  .popup-right {
    order: 1;
    min-height: 0;
    /* critical so overflow can actually happen in flex */
    overflow-y: auto;
    /* now it scrolls */
  }

  /* === ≤700px: stack ONLY, no modal size changes === */
  @media (max-width: 700px) {
    /* stack the two halves; keep whatever width/height you already set elsewhere */
    .popup-content {
      display: flex;
      flex-direction: column;
    }

    /* image on top; don't let it eat all vertical space */
    .popup-left {
      order: 0;
    }

    .popup-left img {
      width: 100%;
      height: auto;
      max-height: 40vh;
      /* cap so it can't take over; still shows full image */
      object-fit: contain;
    }

    /* text panel below; must be allowed to scroll in a flex column */
    .popup-right {
      order: 1;
      min-height: 0;
      /* critical so overflow can actually happen in flex */
      overflow-y: auto;
      /* now it scrolls */
    }
  }
}

@media (max-width: 700px) {
  /* 1) Make the right side a simple column that can scroll */
  .popup-right {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1.6rem 1.8rem;
    /* remove the old bottom padding used for absolute btn */
    gap: 1rem;
  }

  .popup-title {
    margin-bottom: 0rem;
  }

  /* let the text take space, then the button comes after */
  .popup-desc {
    flex: 1 0 auto;
    margin-bottom: 0rem;
  }
  .popup-sub {
    margin: 0rem;
  }
  /* 2) Nuke every absolute/sticky remnant for the button */
  .popup-cta {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: none;
  }
}
@media (max-width: 500px) {
  .popup-title {
    font-size: 3rem;
  }

  .popup-sub {
    font-size: 2.4rem;
  }

  .popup-desc {
    font-size: 1.4rem;
  }
}

@media (max-width: 350px) {
  .popup-title {
    font-size: 2.6rem;
  }

  .popup-sub {
    font-size: 2.2rem;
  }
  .popup-desc {
    font-size: 1.2rem;
  }
}

/* test */
/* ===== DESKTOP: hard-lock the event modal to 16:9 ===== */
/* === DESKTOP: 16:9 modal that scales to fill most of the screen === */
@media (min-width: 700px) {
  .event-popup.active {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .event-popup .popup-content {
    /* kill previous sizing */
    aspect-ratio: auto !important;
    padding: 0 !important;
    position: relative; /* anchor the X */
    overflow: hidden; /* keep edges clean */
    box-sizing: border-box;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);

    /* --- hard 16:9 while scaling with viewport --- */
    /* use up to 96% of the limiting viewport side, no fixed px cap */
    width: min(96vw, calc(96vh * 16 / 9)) !important;
    height: min(96vh, calc(96vw * 9 / 16)) !important;

    /* layout inside the locked box */
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 24px;
  }

  /* X button stays visible */
  .event-popup .popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 5;
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: #333;
    cursor: pointer;
  }

  /* image column (poster 4:5, no crop) */
  .event-popup .popup-left {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    background: #f6f6f6;
  }
  .event-popup .popup-left img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
  }

  /* text column scrolls if content is long instead of stretching the box */
  .event-popup .popup-right {
    display: grid;
    grid-template-rows: auto auto 1fr auto; /* title, sub, body, CTA */
    padding: 18px 22px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  #popup-desc {
    overflow: auto;
    min-height: 0;
    padding-right: 2.5rem;
  }
  .popup-right {
    padding-right: 3rem;
  }
}

/* === CLOSE BUTTON: big, visible, unmistakable === */
.event-popup .popup-close {
  position: absolute;
  top: 14px;
  right: 35px;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  background: #ffffffee; /* light background against dark overlay */
  border: 2px solid #333;
  border-radius: 50%;
  color: #333;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.event-popup .popup-close:hover {
  background: #f5a81d;
  color: #000;
  border-color: #f5a81d;
  transform: scale(1.05);
}

/* === MOBILE: move the ✕ outside the modal box === */
@media (max-width: 700px) {
  .event-popup .popup-close {
    position: fixed; /* detach from the modal box */
    top: 30px; /* distance from viewport top */
    right: 35px; /* distance from viewport right */
    z-index: -1; /* always on top */
    background: #ffffffcf !important;
    border: 2px solid #333;
    border-radius: 0 !important;
    color: #333;
    font-size: 1.8rem;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;

    width: 44px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffffee;
    border: 2px solid #333;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: none; /* flat bottom */
    color: #333;
    font-size: 2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--amber);
    /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
    display: none;
  }

  .event-popup .popup-close:hover {
    background: #f5a81d;
    color: #000;
    border-color: #f5a81d;
  }
}

/* === MOBILE STACK: proper top line + centered CTA === */
@media (max-width: 700px) {
  /* the container that holds the button */
  .event-popup .popup-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    border-top: 1.5px solid rgba(0, 0, 0, 0.15); /* clean line on top */
    margin-top: 1.5rem; /* equal spacing to content above */
    padding-top: 2rem;
    /* margin-bottom: 1.5rem; equal spacing below */
    text-align: center;
  }

  .event-popup .popup-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    background: #f5a81d;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    /* display: none !important; */
  }

  .event-popup .popup-btn:hover {
    background: #ffbd42;
    color: #000;
  }
}
@media (max-width: 610px) {
  .popup-cta {
    border-top: 1.5px solid rgba(0, 0, 0, 0.15); /* clean line on top */
    margin-top: 1.5rem; /* equal spacing to content above */
    padding-top: 0rem;
  }
}
@media (max-width: 500px) {
  .event-popup .popup-cta {
    padding-bottom: -2rem !important;
    /* margin-bottom: -2rem; */
  }
}

/* === remove mobile bottom gap only === */
@media (max-width: 700px) {
  .event-popup .popup-content {
    padding-top: 0rem;
    height: auto !important; /* let the content define height */
    aspect-ratio: auto !important;
  }

  /* if there’s still a tiny sliver, kill bottom margins */
  .event-popup .popup-content > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* === extra-small screens (≤400px): tighten Reservieren button spacing === */
@media (max-width: 400px) {
  .event-popup .popup-cta {
    margin-top: 1rem; /* less gap above */
    padding-top: 1rem; /* same above the divider */
    margin-bottom: -1rem; /* less gap below */
  }

  .event-popup .popup-btn {
    padding: 8px 14px; /* slightly smaller button */
    font-size: 0.95rem; /* scale text down a touch */
  }
}