:root{
  --ink:#151515;
  --paper:#f3efe6;
  --olive:#2f6f4e;
  --gold:#b7822d;
  --rust:#a54a33;
  --muted:#6a6a6a;
  --shadow: 0 12px 30px rgba(0,0,0,.10);
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

html{
  scroll-behavior: smooth;
}

#availability{
  scroll-margin-top: 84px;
}

.navbar-custom{
  background-color: #f7f1dd;
  --bs-bg-opacity: 1;
}

.navbar-social .nav-social-btn{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.2);
  color: #2d2d2d;
  text-decoration: none;
  font-weight: 700;
  font-size: .8rem;
  background: rgba(255,255,255,.6);
  transition: transform .15s ease, background-color .2s ease;
}

.navbar-social .nav-social-btn svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.navbar-social .nav-social-btn:hover{
  background: rgba(255,255,255,.85);
  transform: translateY(-1px);
}

.navbar-custom .navbar-toggler{
  border: 0;
  box-shadow: none;
  background-color: rgba(255,255,255,.5);
}

.navbar-custom .navbar-toggler:focus{
  outline: none;
  box-shadow: none;
}

.navbar-custom .navbar-toggler-icon{
  background-image: none;
  position: relative;
  width: 26px;
  height: 2px;
  background-color: #2d2d2d;
  border-radius: 2px;
  transition: background-color .25s ease, transform .25s ease;
}

.navbar-custom .navbar-toggler-icon::before,
.navbar-custom .navbar-toggler-icon::after{
  content: "";
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background-color: #2d2d2d;
  border-radius: 2px;
  transition: transform .25s ease, top .25s ease, opacity .25s ease;
}

.navbar-custom .navbar-toggler-icon::before{
  top: -7px;
}

.navbar-custom .navbar-toggler-icon::after{
  top: 7px;
}

.navbar-custom .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
  background-color: transparent;
}

.navbar-custom .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{
  top: 0;
  transform: rotate(45deg);
}

.navbar-custom .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{
  top: 0;
  transform: rotate(-45deg);
}

#paymentStatusWrap{
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1060;
  width: min(960px, calc(100% - 2rem));
  pointer-events: none;
}

#paymentStatusWrap .alert{
  pointer-events: auto;
}

#paymentStatusWrap .alert{
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s ease, transform .4s ease;
}

#paymentStatusWrap .alert.status-visible{
  opacity: 1;
  transform: translateY(0);
}

#paymentStatusWrap .alert.status-hide{
  opacity: 0;
  transform: translateY(-6px);
}

h1,h2,h3{ font-family: "Playfair Display", Georgia, serif; }

/* Paper texture block */
.paper{
  background-color: var(--paper);
  background-image:
    url("../images/dynamic-style.webp");
  background-size: cover;
  background-repeat: repeat;
  background-position: center;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* top strip: no border-top, add bottom divider */
.paper--top{
  border-top: 0;
  border-bottom: 1px solid rgba(0,0,0,.10);
  position: relative;
  z-index: 2; /* sits above hero */
  overflow: visible;
}

.brand-logo{
  width: min(65vw, 260px);
  /* make it feel like it’s “printed” */
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.10));
  position: relative;
  z-index: 3;
  transform: translateY(36px);
  margin-bottom: -36px;
}

.brand-wrap{
  margin-top: -24px;
}

/* HERO */
.hero{
  position: relative;
  height: 480px;
  min-height: 480px;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.10);
}

.hero--overlap,
.hero-overlap{
  /* pulls hero up so logo overlaps it */
  margin-top: -40px;
  padding-top: 40px; /* keeps content from jumping */
}

.hero-bg{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
}

.hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 45%, rgba(0,0,0,.60)),
    radial-gradient(circle at 50% 40%, rgba(0,0,0,.10), rgba(0,0,0,.55));
}

.hero-content{
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: 480px;
}

.hero-title{
  font-weight: 700;
  letter-spacing: .3px;
  text-shadow: 0 6px 20px rgba(0,0,0,.35);
  font-size: clamp(1.9rem, 5.4vw, 2.6rem);
}

.hero-sub{
  max-width: 38ch;
  font-size: 1rem;
  opacity: .95;
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Buttons */
.btn-cta{
  background: var(--rust);
  border: 0;
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  transition: background-color .2s ease, color .2s ease, filter .2s ease;
}

.btn-cta:hover{
  background: #8f3d2a;
  color: #fff;
}

.btn-cta-outline{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.65);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .3px;
}

.btn-cta-outline:hover{
  background: rgba(255,255,255,.85);
  color: var(--ink);
}

.section-title{
  font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
}

/* OUR MENUS kicker */
.kicker-text{
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .22rem;
  color: rgba(0,0,0,.62);
}
.kicker-line{
  width: 54px;
  height: 1px;
  background: rgba(0,0,0,.25);
}

/* Menu thumbs */
.menu-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* Testimonials */
.testimonial-card{
  max-width: 720px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  padding: 2rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.testimonial-quote{
  font-size: 1.1rem;
  font-weight: 500;
  color: rgba(0,0,0,.85);
}

.testimonial-meta{
  font-weight: 700;
  color: rgba(0,0,0,.6);
}

.carousel-control-prev,
.carousel-control-next{
  width: 48px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: invert(1);
}

/* Gold button */
.btn-gold{
  background: var(--gold);
  border: 0;
  color: #fff;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .3px;
  box-shadow: var(--shadow);
  transition: background-color .2s ease, color .2s ease, filter .2s ease;
}

.btn-gold:hover{
  background: #a87427;
  color: #fff;
}

/* Steps */
.step-pill{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgb(225 229 210);
  font-weight: 700;
  color: rgba(0,0,0,.78);
}

.step-num{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--olive);
  color: #fff;
  font-weight: 900;
  font-size: .9rem;
}

.tiny-note{
  font-size: .85rem;
  color: rgba(0,0,0,.55);
}

.card-soft{
  background: rgb(225 229 212);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.calendar{
  background: rgba(255,255,255,.6);
  border-radius: 12px;
  padding: 8px;
  --bs-link-color: #151515;
  --bs-link-hover-color: #151515;
}

.calendar .fc-header-toolbar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.calendar .fc-header-toolbar .fc-toolbar-chunk:first-child{
  justify-self: start;
}

.calendar .fc-header-toolbar .fc-toolbar-chunk:last-child{
  justify-self: end;
}

@media (max-width: 768px){
  .calendar.fc .fc-button,
  .calendar.fc .fc-button-primary{
    padding: .2rem .35rem !important;
    font-size: .8rem !important;
    line-height: 1 !important;
  }

  .calendar.fc .fc-button .fc-icon{
    font-size: .8rem !important;
  }

  .calendar.fc .fc-prev-button,
  .calendar.fc .fc-next-button{
    min-width: 28px !important;
    min-height: 28px !important;
    padding: .15rem .25rem !important;
  }

  .calendar.fc .fc-daygrid-day{
    height: 42px;
  }

  .calendar.fc .fc-daygrid-day-frame{
    height: 100%;
    min-height: 0 !important;
  }

  .calendar.fc .fc-scrollgrid-sync-table{
    height: auto !important;
  }

  .calendar.fc .fc-daygrid-body,
  .calendar.fc .fc-daygrid-body-unbalanced{
    height: auto !important;
  }

  .calendar.fc .fc-daygrid-day-top{
    padding-top: 2px;
  }
}

@media (max-width: 800px){
  .fc .fc-daygrid-body-natural .fc-daygrid-day-events{
    margin-bottom: -5px;
  }
}

.price-box{
  background: rgba(255,255,255,.7);
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 12px;
}

.fc .fc-daygrid-day.is-booked,
.fc .fc-daygrid-day.is-booked.fc-day-today{
  background: #e6e6e6;
}

.fc .fc-daygrid-day.is-booked .fc-daygrid-day-number{
  color: rgba(0,0,0,.45);
}

.fc .fc-daygrid-day.is-booked .fc-daygrid-day-top{
  opacity: .65;
}

.fc .fc-bg-event{
  background: #2d2d2d;
}

.fc .fc-bg-event .fc-event-main{
  background: #2d2d2d;
}

.fc .fc-day-today{
  background: rgba(47,111,78,.12);
}

.fc .fc-daygrid-day.fc-day-disabled{
  background: rgba(0,0,0,.05);
}

.calendar.fc a{
  color: #151515 !important;
}

/* Larger screens */
@media (min-width: 768px){
  .hero{ height: 480px; min-height: 480px; }
  .hero-content{ min-height: 480px; }
  .hero--overlap{ margin-top: -40px; padding-top: 40px; }
  .kicker-line{ width: 72px; }
  .brand-wrap{ margin-top: -32px; }
}

@media (min-width: 768px){
  .brand-logo{
    width: min(380px, 60vw);
    transform: translateY(52px);
    margin-bottom: -52px;
  }
}

@media (min-width: 992px){
  .booking-grid > [class*="col-"]{
    display: flex;
  }

  .booking-grid .card-soft{
    align-self: flex-start;
  }
}