/* The Backroom — site-specific styles layered on top of the Delici template */

/* brass gold sampled from the logo artwork
   (overrides the template's paler champagne rgb(228,197,144)) */
:root{
  --main-color: rgb(229,195,80);
}

/* ---------- Banner (CSS slate/gold backdrop — replaces placeholder photos) ---------- */
.inner-banner .image-layer.backroom-layer{
  background-image:
    radial-gradient(ellipse 85% 65% at 50% 118%, rgba(229,195,80,0.16), rgba(229,195,80,0) 62%),
    linear-gradient(180deg, rgb(9,9,10) 0%, rgb(23,24,25) 100%);
}

/* ---------- Shared menu helpers ---------- */
.price-note{
  position: relative;
  text-align: center;
  color: var(--color-one);
  font-style: italic;
  font-size: var(--font-14);
  margin-top: -25px;
  margin-bottom: 45px;
}

.menu-note{
  position: relative;
  color: var(--main-color);
  font-style: italic;
  font-size: var(--font-14);
  margin-bottom: 25px;
}

.menu-group-title{
  position: relative;
  font-family: var(--font-family-Forum);
  color: var(--main-color);
  font-size: var(--font-24);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 35px 0 22px;
}

.menu-one .menu-col .inner > .menu-group-title:first-child{
  margin-top: 0;
}

/* brass dish names to match the logo */
.menu-one .menu-col .dish-block .title .ttl a{
  color: var(--main-color);
}

/* tighter rhythm for long price lists (beers, spirits, wines…) */
.menu-one .menu-col .dish-block.compact{
  margin-bottom: 16px;
}

/* ---------- Food / Drinks tab switcher ---------- */

/* the template's overflow:hidden on .page-wrapper (global.css + responsive.css)
   kills position:sticky; clip prevents sideways overflow without creating a
   scroll container. body prefix outranks responsive.css, which loads later. */
body .page-wrapper{
  overflow: clip;
}
.backroom-tabs{
  position: relative;
  background-color: var(--color-four);
}

.backroom-tabs .buttons{
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: var(--color-four);
  padding: 22px 0;
  border-bottom: 1px solid var(--white-color-opacity-four);
  text-align: center;
  font-family: var(--font-family-Forum);
  transition: top 300ms ease;
}

/* when the main top bar slides in (scroll up), drop the sticky switcher
   below it so the two bars stack instead of the header covering the tabs.
   --fixed-header-offset is measured by the inline script on index.html. */
body:has(.main-header.fixed-header.header-down) .backroom-tabs .buttons{
  top: var(--fixed-header-offset, 41px);
}

.backroom-tabs .tab-buttons .tab-btn{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 45px;
  font-size: var(--font-22);
  line-height: 25px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-color);
  cursor: pointer;
  padding-bottom: 5px;
  transition: color 300ms ease;
}

.backroom-tabs .tab-buttons .tab-btn:hover{
  color: var(--main-color);
}

.backroom-tabs .tab-buttons .tab-btn:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 5px;
  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
  transform: scaleX(0);
  transition: all 300ms ease;
}

.backroom-tabs .tab-buttons .tab-btn.active-btn{
  color: var(--main-color);
}

.backroom-tabs .tab-buttons .tab-btn.active-btn:before{
  transform: scaleX(1);
}

.backroom-tabs .tab-buttons .tab-btn:after{
  content: '';
  position: absolute;
  left: 100%;
  margin-left: 41px;
  top: 50%;
  margin-top: -5px;
  height: 8px;
  width: 8px;
  border: 1px solid var(--main-color);
  transform: rotate(45deg);
}

.backroom-tabs .tab-buttons .tab-btn:last-child:after{
  display: none;
}

.backroom-tabs .pdf-line{
  position: relative;
  background-color: var(--color-four);
  text-align: center;
  padding-bottom: 60px;
}

.backroom-tabs .pdf-line a{
  color: var(--color-one);
  font-size: var(--font-14);
  text-decoration: underline;
}

.backroom-tabs .pdf-line a:hover{
  color: var(--main-color);
}

/* ---------- Landing page menu cards ---------- */
.menu-cards{
  position: relative;
  background-color: var(--color-four);
  padding-top: var(--padding-top-90);
  padding-bottom: var(--padding-bottom-60);
}

.menu-card{
  position: relative;
  border: 1px solid rgba(229,195,80,0.35);
  padding: 55px 40px 45px;
  text-align: center;
  margin-bottom: 30px;
  transition: all 0.4s ease;
}

.menu-card:hover{
  border-color: var(--main-color);
  transform: translateY(-6px);
}

.menu-card .ornament{
  margin-bottom: 20px;
}

.menu-card .ornament img{
  width: 120px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.menu-card h3{
  font-family: var(--font-family-Forum);
  color: var(--white-color);
  font-size: var(--font-34);
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.menu-card .text{
  color: var(--color-one);
  margin-bottom: 30px;
}

.menu-card .pdf-link{
  display: inline-block;
  margin-top: 18px;
  color: var(--color-one);
  font-size: var(--font-14);
  text-decoration: underline;
}

.menu-card .pdf-link:hover{
  color: var(--main-color);
}

/* ---------- Soft-launch strip (landing) ---------- */
.launch-strip{
  position: relative;
  background-color: var(--color-five);
  padding-top: var(--padding-top-90);
  padding-bottom: var(--padding-bottom-90);
  text-align: center;
}

.launch-strip .text{
  color: var(--color-one);
  max-width: 560px;
  margin: 0 auto 35px;
}

/* ---------- Invitation page ---------- */
.invite-section{
  position: relative;
  background-color: var(--color-four);
  padding-top: var(--padding-top-90);
  padding-bottom: var(--padding-bottom-90);
}

.invite-section .invite-image{
  position: relative;
  margin-bottom: 40px;
}

.invite-section .invite-image .image{
  position: relative;
  border: 1px solid rgba(229,195,80,0.4);
  padding: 10px;
}

.invite-section .invite-image img{
  display: block;
  width: 100%;
}

.invite-section .invite-content{
  position: relative;
  padding-left: var(--padding-left-30);
}

.invite-section .invite-content h2{
  font-family: var(--font-family-Forum);
  color: var(--white-color);
  font-size: var(--font-42);
  line-height: 1.2em;
  margin-bottom: 25px;
}

.invite-section .invite-content .text{
  color: var(--color-one);
  margin-bottom: 30px;
  max-width: 480px;
}

.invite-section .invite-content .pattern-image img{
  width: 140px;
  height: auto;
  margin-bottom: 25px;
}

.invite-datetime{
  font-family: var(--font-family-Forum);
  font-size: var(--font-30);
  color: var(--main-color);
  line-height: 1.4em;
  margin-bottom: 30px;
}

.invite-location{
  color: var(--white-color-opacity);
  margin-bottom: 30px;
}

.invite-badge{
  display: inline-block;
  border: 1px solid var(--main-color);
  color: var(--white-color);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: var(--font-14);
  padding: 9px 20px;
  margin-bottom: 35px;
}

.invite-note{
  color: var(--color-one);
  font-size: var(--font-14);
  font-style: italic;
  margin-top: 18px;
}

/* centered variant — used now that the poster image was removed from the page */
.invite-section .invite-content.centered{
  padding-left: 0;
  text-align: center;
}

.invite-section .invite-content.centered .text{
  margin-left: auto;
  margin-right: auto;
}

.invite-section .invite-content.centered .pattern-image img{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media (max-width: 991px){
  .invite-section .invite-content{
    padding-left: 0;
    padding-top: 10px;
  }
}

/* ---------- RSVP modal ---------- */
.rsvp-modal{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
}

.rsvp-modal.show{
  display: block;
}

.rsvp-overlay{
  position: absolute;
  inset: 0;
  background: rgba(5,5,6,0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.rsvp-box{
  position: relative;
  max-width: 480px;
  margin: 8vh auto 0;
  max-height: 84vh;
  overflow-y: auto;
  background-color: var(--color-four);
  border: 1px solid rgba(229,195,80,0.4);
  padding: 50px 45px 45px;
  text-align: center;
}

.rsvp-close{
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--color-one);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.rsvp-close:hover{
  color: var(--main-color);
}

.rsvp-logo{
  margin-bottom: 25px;
}

.rsvp-logo img{
  width: 170px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.rsvp-kicker{
  color: var(--main-color);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: var(--font-13);
  margin-bottom: 12px;
}

.rsvp-box h3{
  font-family: var(--font-family-Forum);
  color: var(--white-color);
  font-size: var(--font-36);
  margin-bottom: 8px;
}

.rsvp-when{
  font-family: var(--font-family-Forum);
  color: var(--main-color);
  font-size: var(--font-18);
  letter-spacing: 1px;
  margin-bottom: 30px;
}

.rsvp-field{
  margin-bottom: 18px;
}

.rsvp-field input{
  width: 100%;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid var(--white-color-opacity-four);
  color: var(--white-color);
  padding: 14px 18px;
  font-size: var(--font-15);
  transition: border-color 300ms ease;
}

.rsvp-field input:focus{
  outline: none;
  border-color: var(--main-color);
}

.rsvp-field input::placeholder{
  color: var(--color-one);
}

.rsvp-error{
  color: #e08f8f;
  font-size: var(--font-14);
  margin: -4px 0 16px;
}

.rsvp-submit{
  width: 100%;
  margin-top: 6px;
  border: none;
  cursor: pointer;
}

.rsvp-submit.sending{
  opacity: 0.6;
  pointer-events: none;
}

.rsvp-step-thanks .rsvp-thanks-text{
  color: var(--color-one);
  line-height: 1.9em;
}

body.rsvp-modal-open{
  overflow: hidden;
}

@media (max-width: 599px){
  .rsvp-box{
    margin: 5vh 16px 0;
    padding: 40px 24px 35px;
  }
}

/* ---------- Centered header logo ---------- */
.main-header .main-box .logo-box{
  float: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}

/* scale with the viewport: ~240px wide on big screens down to 150px on phones
   (the template hard-codes height:50px — in style.css AND again in
   responsive.css under 991px, which loads last; the body prefix outranks it) */
body .main-header .main-box .logo-box .logo img{
  height: auto;
  width: clamp(150px, 15vw, 240px);
  /* the logo-box is absolutely positioned (shrink-to-fit), so bootstrap's
     img{max-width:100%} turns circular and caps the logo — disable it */
  max-width: none;
}

/* slimmer again once the compact bar is pinned after scrolling */
body .main-header.fixed-header .main-box .logo-box .logo img{
  height: auto;
  width: 130px;
}

/* ---------- Invitation page header: bigger logo, sitting lower ---------- */
.main-header.invite-header .header-upper{
  padding-top: 35px;
}

body .main-header.invite-header .main-box .logo-box .logo img{
  height: auto;
  width: clamp(220px, 30vw, 320px);
}

/* once the compact bar pins on scroll, return to the slim layout */
.main-header.invite-header.fixed-header .header-upper{
  padding-top: 0;
}

/* this page's header has no nav/toggler, so the box collapses on phones and
   the absolutely-centered logo pokes above the bar — give it real height */
.main-header.invite-header.fixed-header .main-box{
  min-height: 74px;
}

/* the template slides the pinned bar up 51px to hide a nav row this page
   doesn't have, which clips the logo — keep the whole bar on screen */
.main-header.invite-header.fixed-header.header-down{
  top: 0;
}

body .main-header.invite-header.fixed-header .main-box .logo-box .logo img{
  height: auto;
  width: 130px;
}

/* ---------- Footer / misc fixes ---------- */
.main-footer .logo img{
  max-width: 230px;
  height: auto;
}

.hidden-bar .inner-box .logo-box img{
  max-width: 200px;
  max-height: none;
  height: auto;
  margin: 0 auto;
  display: block;
}