/*
Theme Name: Bar Kap
Theme URI: https://barkap.sg
Author: Bar Kap
Author URI: https://barkap.sg
Description: Custom theme for Bar Kap — A House of Rooms. A Society of Spirits.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: barkap
*/

/* ===== FONTS ===== */
@font-face {
  font-family: 'Patron';
  src: url('./assets/Patron-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Patron';
  src: url('./assets/Patron-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ===== CSS VARIABLES ===== */
:root {
  --color-navy: #001521;
  --color-navy-light: #001a2a;
  --color-navy-dark: #000000;
  --color-cream: #E8E4D3;
  --color-cream-light: #E8E4D3;
  --color-gold: #c9a96e;
  --color-gold-dark: #8a6d3b;
  --color-overlay-blue: #002941;
  --color-overlay-burgundy: #31020F;
  --color-overlay-green: #162012;
  --color-overlay-red: #35070B;
  --color-footer: #272727;

  --font-serif: 'Baskervville', Georgia, 'Times New Roman', serif;
  --font-sans: 'Patron', system-ui, -apple-system, sans-serif;
}

/* ===== NAVBAR SCROLLED STATE ===== */
#navbar.is-scrolled {
  background-color: rgba(0, 21, 33, 0.95);
  backdrop-filter: blur(10px);
}

/* ===== LOADER ===== */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #001521;
  display: flex;
  align-items: center;
  justify-content: center;
}
#loader-logo {
  width: 72px;
  height: 107px;
  pointer-events: none;
}

/* ===== BASE ===== */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: linear-gradient(to bottom, var(--color-navy) 0%, var(--color-navy) 50%, var(--color-navy-dark) 100%);
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: 14px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth scroll overrides for Lenis */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
}

.tracking-widest-custom {
  letter-spacing: 0.25em;
}

/* ===== ROOM CARDS ===== */
.room-card {
  position: relative;
  overflow: hidden;
}
.room-card .room-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.room-card .room-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 50% 50%;
}

/* ===== NAV LINK HOVER ===== */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-cream);
  transition: width 0.3s ease;
}
.nav-link:hover::after {
  width: 100%;
}

/* ===== CTA LINKS ===== */
.cta-link {
  text-decoration: none;
  border-bottom: 1px solid var(--color-cream);
  padding-bottom: 4px;
  transition: opacity 0.3s ease;
}
.cta-link:hover {
  opacity: 0.7;
}

/* ===== DISCOVER LABEL LINK ===== */
.discover-label-link {
  position: relative;
  text-decoration: none;
}
.discover-label-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-gold);
  transition: width 0.3s ease;
}
.discover-label-link:hover::after {
  width: 100%;
}

/* ===== DISCOVER SECTION ===== */
.discover-section {
  position: relative;
  isolation: isolate;
}
.discover-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url(./assets/background-texture.png);
  background-repeat: repeat-x;
  background-size: 1500px;
  background-position: bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  z-index: -1;
  pointer-events: none;
}

/* ===== FOOTER DIVIDER ===== */
.footer-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(232, 220, 200, 0.2), transparent);
}

/* ===== FOOTER HOURS TABLE ===== */
.footer-hours table {
  border-collapse: collapse;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}
.footer-hours td {
  padding-right: 2rem;
  padding-bottom: 0.25rem;
  vertical-align: top;
}
.footer-hours tr:last-child td {
  padding-bottom: 0;
}

/* ===== FOOTER CONTACT LINKS (wysiwyg output) ===== */
.footer-contact-links {
  line-height: 1.75;
}
.footer-contact-links p {
  margin: 0;
}
.footer-contact-links a {
  display: block;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-widest-custom, 0.2em);
  text-transform: uppercase;
  color: var(--color-cream, #E8E4D3);
  margin-bottom: 0.75rem;
  text-decoration: none;
}
.footer-contact-links a:last-child {
  margin-bottom: 0;
}

/* ===== HERO BODY WYSIWYG ===== */
.hero-body p {
  margin-bottom: 1.25em;
}
.hero-body p:last-child {
  margin-bottom: 0;
}
.hero-body em,
.hero-body i {
  font-style: italic;
}

/* ===== SUB-TEXT ===== */
.sub-text {
  display: block;
  font-size: 1.25em;
  font-family: var(--font-serif);
  font-weight: 400;
}

/* ===== HERITAGE WYSIWYG ===== */
.heritage-wysiwyg p {
  margin-bottom: 1.25em;
}
.heritage-wysiwyg p:last-child {
  margin-bottom: 0;
}

/* ===== DARK PANEL ===== */
.dark-panel {
  background: linear-gradient(to bottom, #001521 0%, #000000 100%);
}
/* Texture layer — fades in from bottom */
.dark-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dark-panel-texture);
  background-repeat: repeat-x;
  background-size: 1500px;
  background-position: bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  z-index: 0;
  pointer-events: none;
}

/* ===== ROOM DETAIL ===== */
.room-detail-circle {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  overflow: hidden;
}
@media (min-width: 768px) {
  .room-detail-circle {
    width: 400px;
    height: 400px;
  }
}

/* ===== ANIMATION HELPERS ===== */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
}
.reveal-fade {
  opacity: 0;
}

/* ===== WINDOW CUTOUT OVERLAY ===== */
#window-cutout-overlay {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 0 200vmax #001521;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}
#window-cutout-inner-text {
  position: absolute;
  opacity: 0;
}

/* ===== HERO YOUTUBE BACKGROUND ===== */
.hero-yt-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Scale iframe to cover the container regardless of aspect ratio, zoomed 120% to hide YouTube UI at edges */
.hero-yt-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  /* 16:9 — always wider/taller than viewport */
  width: max(100%, calc(100vh * 16 / 9));
  height: max(100%, calc(100vw * 9 / 16));
  border: 0;
  pointer-events: none;
}

/* ===== HERO GRADIENT ===== */
.hero-gradient {
  background: linear-gradient(to bottom,
    rgba(0, 21, 33, 0) 0%,
    rgba(0, 21, 33, 0.3) 60%,
    rgba(0, 21, 33, 0.95) 90%,
    rgba(0, 21, 33, 1) 100%
  );
}

/* ===== HERO OVERLAY (DARKER) ===== */
.hero-overlay-dark {
  background: linear-gradient(to bottom,
    rgba(0, 21, 33, 0.25) 0%,
    rgba(0, 21, 33, 0.65) 55%,
    rgba(0, 21, 33, 0.98) 90%,
    rgba(0, 21, 33, 1) 100%
  );
}

/* Hero banner (flexible content): separate treatment for video vs still image */
.hero-banner-overlay--video {
  background-color: rgba(0, 0, 0, 0.55);
}
.hero-banner-overlay--image {
  background-color: rgba(0, 0, 0, 0.55);
}


/* ===== EVENT LIST ===== */
.event-card__poster {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: rgba(0, 21, 33, 0.6);
  overflow: hidden;
}

.event-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.event-card:hover .event-card__img {
  transform: scale(1.04);
}


/* ===== VISIT PAGE — CONTACT FORM ===== */
.visit-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .visit-form__submit {
    width: auto;
  }
}

.visit-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.visit-form__field label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 228, 211, 0.6);
}

.visit-form__field input,
.visit-form__field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(232, 228, 211, 0.25);
  color: var(--color-cream);
  font-family: var(--font-patron, sans-serif);
  font-size: 0.875rem;
  padding: 0.5rem 0;
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
}

.visit-form__field input::placeholder,
.visit-form__field textarea::placeholder {
  color: rgba(232, 228, 211, 0.3);
}

.visit-form__field input:focus,
.visit-form__field textarea:focus {
  border-bottom-color: var(--color-gold);
}

.visit-form__field textarea {
  resize: none;
}

.visit-form__phone-wrapper {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(232, 228, 211, 0.25);
  transition: border-color 0.2s ease;
}

.visit-form__select {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(232, 228, 211, 0.25);
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0.5rem 0;
  outline: none;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease;
}
.visit-form__select:focus {
  border-bottom-color: var(--color-gold);
}
.visit-form__select option {
  background: var(--color-navy);
  color: var(--color-cream);
}

.visit-form__phone-wrapper:focus-within {
  border-bottom-color: var(--color-gold);
}

.visit-form__phone-country {
  background: transparent;
  border: none;
  color: rgba(232, 228, 211, 0.5);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding-right: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.visit-form__phone-country option {
  background: var(--color-navy);
  color: var(--color-cream);
}

.visit-form__phone-wrapper input {
  border: none;
  flex: 1;
}

.visit-form__submit {
  align-self: flex-end;
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-cream);
  cursor: pointer;
  font-family: var(--font-patron, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 0.75rem 2rem;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}

.visit-form__submit:hover {
  background: var(--color-gold);
  color: var(--color-navy);
}


/* ===== CF7 FORM STYLING (matches .visit-form) ===== */
.barkap-cf7-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Remove default <p> margins */
.barkap-cf7-form .wpcf7-form p {
  margin: 0;
}

/* Label: small caps, sits above the input */
.barkap-cf7-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 228, 211, 0.6);
}

/* CF7 span wrap around each control */
.barkap-cf7-form .wpcf7-form-control-wrap {
  display: block;
}

/* All inputs, selects, textareas */
.barkap-cf7-form input[type="text"],
.barkap-cf7-form input[type="email"],
.barkap-cf7-form input[type="tel"],
.barkap-cf7-form textarea,
.barkap-cf7-form select {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(232, 228, 211, 0.25);
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0.5rem 0;
  outline: none;
  width: 100%;
  transition: border-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.barkap-cf7-form input[type="text"]:focus,
.barkap-cf7-form input[type="email"]:focus,
.barkap-cf7-form input[type="tel"]:focus,
.barkap-cf7-form textarea:focus,
.barkap-cf7-form select:focus {
  border-bottom-color: var(--color-gold);
}
.barkap-cf7-form input::placeholder,
.barkap-cf7-form textarea::placeholder {
  color: rgba(232, 228, 211, 0.3);
}
.barkap-cf7-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E8E4D3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  padding-right: 1.25rem;
  cursor: pointer;
}
.barkap-cf7-form select option {
  background: var(--color-navy);
  color: var(--color-cream);
}

/* Textarea */
.barkap-cf7-form textarea {
  resize: none;
  min-height: 120px;
}

/* First name + Last name: two-col grid */
/* CF7 puts both labels inside one <p>, so target the <p> */
.barkap-cf7-form .visit-form__row p {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.barkap-cf7-form .visit-form__row p br {
  display: none;
}
@media (max-width: 480px) {
  .barkap-cf7-form .visit-form__row p {
    grid-template-columns: 1fr;
  }
}

/* Phone wrapper: country select + tel side by side */
.barkap-cf7-form .visit-form__phone-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0;
}
.barkap-cf7-form .visit-form__phone-wrapper p {
  display: contents;
}
.barkap-cf7-form .visit-form__phone-wrapper .wpcf7-form-control-wrap {
  display: contents;
}
.barkap-cf7-form .visit-form__phone-wrapper select {
  width: auto;
  flex-shrink: 0;
  padding-right: 1.3rem;
  background-position: right 0.35rem center;
  color: rgba(232, 228, 211, 0.5);
}
.barkap-cf7-form .visit-form__phone-wrapper input[type="tel"] {
  flex: 1;
}

/* Submit button */
.barkap-cf7-form input[type="submit"] {
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-cream);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 0.75rem 2rem;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
  width: 100%;
}
.barkap-cf7-form input[type="submit"]:hover {
  background: var(--color-gold);
  color: var(--color-navy);
}

/* Validation messages */
.barkap-cf7-form .wpcf7-not-valid-tip {
  font-size: 0.7rem;
  color: #e07070;
  margin-top: 0.25rem;
}
.barkap-cf7-form .wpcf7-response-output {
  font-size: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(232, 228, 211, 0.2);
  color: rgba(232, 228, 211, 0.7);
  margin: 0;
}


/* ===== GETTING HERE — MAP ===== */
.getting-here__map {
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(232, 228, 211, 0.1);
}

.getting-here__map iframe {
  display: block;
  width: 100%;
  height: 480px;
}

@media (min-width: 1024px) {
  .getting-here__map {
    height: 100%;
    min-height: 480px;
  }
  .getting-here__map iframe {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 480px;
  }
}

@media (max-width: 768px) {
  .getting-here__map iframe {
    height: 320px;
  }
}

/* ===== ROOM DETAIL — MOBILE ===== */
/* On small screens the full-bleed sections should be tall enough for content */
@media (max-width: 640px) {
  .room-detail--full {
    min-height: auto !important;
  }
}

/* ===== CARD GRID — MOBILE ===== */
/* Tighten letter-spacing on card names so text doesn't overflow on narrow screens */
@media (max-width: 480px) {
  .room-card-wrapper p {
    letter-spacing: 0.1em;
  }
}

/* ===== MENU BOX REVEAL ===== */
#menu-box-reveal {
  background: var(--color-navy, #001521);
  --menu-box-minimized-scale: 1.2;
  --menu-box-docked-y: 230px;
  --menu-card-gap-desktop: 36px;
  --menu-card-gap-mobile: 14px;
  --menu-card-lift-offset: 16px;
}
.menu-box-stage {
  perspective: 1200px;
  min-height: 150vh;
  height: auto;
}
.menu-box-wrap {
  width: clamp(240px, 28vw, 420px);
  aspect-ratio: 16 / 10;
  z-index: 60;
}
.menu-box-wrap .menu-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  scale: 1.5;
}
.menu-box--closed {
  transform: translateY(-124px);
  pointer-events: auto;
  cursor: pointer;
}
.menu-box-closed-hotspot {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 34%;
  height: 46%;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  z-index: 70;
  cursor: pointer;
}
.menu-box-closed-hotspot__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(232, 228, 211, 0.92);
  transform: translate(-50%, -50%);
}
.menu-box-closed-hotspot__icon::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(232, 228, 211, 0.45);
  border-radius: 999px;
  animation: menuHotspotPulse 1.8s ease-out infinite;
}
.menu-box-closed-hotspot__tooltip {
  position: absolute;
  top: calc(50% - 42px);
  left: 50%;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 228, 211, 0.95);
  background: rgba(0, 21, 33, 0.92);
  border: 1px solid rgba(232, 228, 211, 0.25);
  padding: 8px 12px;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.menu-box-closed-hotspot:hover .menu-box-closed-hotspot__tooltip,
.menu-box-closed-hotspot:focus-visible .menu-box-closed-hotspot__tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}
.menu-box-hotspots {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: auto;
}
.menu-box-hotspot {
  position: absolute;
  width: 26%;
  height: 28%;
  border: 0;
  background: transparent;
  opacity: 1;
  pointer-events: none;
  cursor: pointer;
}
.menu-box-hotspot--left {
  left: 12%;
  top: 44%;
  transform: translate(-50%, -50%);
}
.menu-box-hotspot--bottom-left {
  left: 28%;
  top: 76%;
  transform: translate(-50%, -50%);
}
.menu-box-hotspot--bottom-right {
  right: 10%;
  top: 76%;
  transform: translate(50%, -50%);
}
.menu-box-hotspot--right {
  right: 11%;
  top: 44%;
  transform: translate(50%, -50%);
}
.menu-box-hotspot--center {
  left: 67%;
  top: 52%;
  width: 30%;
  height: 40%;
  transform: translate(-50%, -50%);
}
.menu-box-hotspot__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(232, 228, 211, 0.9);
  transform: translate(-50%, -50%);
}
.menu-box-hotspot__icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(232, 228, 211, 0.45);
  border-radius: 999px;
  animation: menuHotspotPulse 1.8s ease-out infinite;
}
.menu-box-hotspot__tooltip {
  position: absolute;
  top: calc(50% - 38px);
  left: 50%;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 228, 211, 0.95);
  background: rgba(0, 21, 33, 0.92);
  border: 1px solid rgba(232, 228, 211, 0.25);
  padding: 8px 12px;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.menu-box-hotspot:hover .menu-box-hotspot__tooltip,
.menu-box-hotspot:focus-visible .menu-box-hotspot__tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes menuHotspotPulse {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.32);
    opacity: 0;
  }
}
.menu-card-deck {
  /* Cards are positioned absolutely via GSAP, centered on the stage */
  pointer-events: none;
}
.menu-card {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Larger on mobile so card text is legible; capped on desktop. */
  width: clamp(160px, 11vw, 180px);
  height: auto;
  transform-origin: 50% 85%;
  will-change: transform, opacity;
  opacity: 0;
  pointer-events: none;
}
.menu-card__image {
  display: block;
  width: 100%;
  height: auto;
}
.menu-card__label {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 228, 211, 0.92);
}

/* Push the box+cards into the lower half of the stage so the heading at
   the top has clear space and the cards (lifted above the box) don't
   crash into it. The deck uses transform (the GSAP-animated child is
   .menu-card-track, so this transform is preserved). */
.menu-box-wrap {
  margin-top: 32vh;
}
.menu-card-deck {
  transform: translateY(32vh);
}
@media (max-width: 767px) {
  #menu-box-reveal {
    --menu-card-gap-mobile: 10px;
    --menu-card-lift-offset: 10px;
    overflow-x: clip;
  }
  .menu-box-stage {
    overflow-x: clip !important;
  }
  .menu-box-wrap {
    margin-top: 42vh;
  }
  .menu-card-deck {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 100vw;
    transform: translate(-50%, 42vh);
    overflow: hidden;
  }
  .menu-card {
    width: clamp(118px, 38vw, 150px);
  }
}

/* ===== MENU CARDS REVEAL (first card per category, no box) ===== */
#menu-cards-reveal,
.menu-cards-reveal-section {
  background-color: var(--color-navy);
}

.menu-cards-reveal__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 40px;
}

/* Mobile / tablet: 3 columns, centered partial rows (same idea as desktop) */
.menu-cards-reveal__grid > * {
  box-sizing: border-box;
  flex: 0 1 calc((100% - 2 * 1.5rem) / 3);
  max-width: calc((100% - 2 * 1.5rem) / 3);
  min-width: 0;
}

@media (min-width: 1024px) {
  /* 5 “columns”: flex + justify center so 4 cards stay grouped in the middle */
  .menu-cards-reveal__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 80px;
  }

  .menu-cards-reveal__grid > * {
    box-sizing: border-box;
    flex: 0 1 calc((100% - 4 * 2rem) / 5);
    max-width: calc((100% - 4 * 2rem) / 5);
    min-width: 0;
  }
}

.menu-cards-reveal__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 0;
}

.menu-cards-reveal__item:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 4px;
}

.menu-cards-reveal__item:hover .menu-cards-reveal__image {
  opacity: 0.92;
}

.menu-cards-reveal__swap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.menu-cards-reveal__swap.is-expanded {
  gap: 1rem;
  align-items: center;
}

.menu-cards-reveal__panels {
  flex-shrink: 0;
}

.menu-cards-reveal__panels:not([hidden]) {
  display: block;
  width: 100%;
}

.menu-cards-reveal__panel {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  max-width: 100%;
}

.menu-cards-reveal__teasers {
  flex-shrink: 0;
  transition:
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top center;
  will-change: transform, opacity;
}

.menu-cards-reveal__swap.is-expanded .menu-cards-reveal__teasers {
  transform: scale(1) translateY(0);
  opacity: 1;
  width: 800px;
  margin-top: 40px;
}

.menu-cards-reveal__swap.is-expanded .menu-cards-reveal__teasers .menu-cards-reveal__grid {
  gap: 20px;
  margin-top: 0;
  transition: gap 0.45s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.45s ease;
}

.menu-cards-reveal__swap.is-expanded .menu-cards-reveal__teasers .menu-cards-reveal__image {
  max-width: 100px;
  transition: max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

.menu-cards-reveal__swap.is-expanded .menu-cards-reveal__teasers .menu-cards-reveal__label {
  font-size: 9px;
  margin-top: 6px;
  transition: font-size 0.4s ease, margin-top 0.4s ease;
}

@media (min-width: 1024px) {
  .menu-cards-reveal__swap.is-expanded {
    gap: 20px;
  }

  .menu-cards-reveal__swap.is-expanded .menu-cards-reveal__teasers .menu-cards-reveal__image {
    max-width: 120px;
  }

  .menu-cards-reveal__swap.is-expanded .menu-cards-reveal__teasers .menu-cards-reveal__grid {
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-cards-reveal__teasers,
  .menu-cards-reveal__swap.is-expanded .menu-cards-reveal__teasers .menu-cards-reveal__grid,
  .menu-cards-reveal__swap.is-expanded .menu-cards-reveal__teasers .menu-cards-reveal__image,
  .menu-cards-reveal__swap.is-expanded .menu-cards-reveal__teasers .menu-cards-reveal__label {
    transition-duration: 0.01ms !important;
  }
}

.menu-cards-reveal__teasers[hidden] {
  display: none;
}

.menu-cards-reveal__panels[hidden] {
  display: none;
}

.menu-cards-reveal__panel[hidden] {
  display: none;
}

.menu-cards-reveal__grid--revealed {
  align-items: start;
}

.menu-cards-reveal__grid--revealed .menu-cards-reveal__image {
  cursor: pointer;
}

.menu-cards-reveal__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.menu-cards-reveal__image {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 0.25s ease;
}

.menu-cards-reveal__label {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 228, 211, 0.92);
}

.menu-cards-reveal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.5rem;
}

.menu-cards-reveal__action {
  display: inline-block;
  border: 1px solid rgba(232, 228, 211, 0.4);
  color: var(--color-cream);
  padding: 0.75rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.menu-cards-reveal__action:hover,
.menu-cards-reveal__action:focus-visible {
  background-color: rgba(232, 228, 211, 0.1);
  border-color: rgba(232, 228, 211, 0.65);
  outline: none;
}

.menu-cards-reveal__action:focus-visible {
  box-shadow: 0 0 0 2px rgba(232, 228, 211, 0.35);
}

/* ===== MENU SLIDER ===== */
.menu-slider__viewport {
  max-width: 1100px;
}
.menu-slider__stage {
  position: relative;
  width: 100%;
  /* Stage must reserve at least the image's maximum rendered height so the
     absolutely-positioned slides don't overflow up into the heading. */
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.5s ease,
              filter 0.5s ease;
  will-change: transform, opacity;
  opacity: 0;
  pointer-events: none;
  filter: brightness(0.55);
}
.menu-slide img {
  display: block;
  max-width: min(90vw, 720px);
  max-height: 75vh;
  width: auto;
  height: auto;
  box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.6);
}

/* Active page: front and centre */
.menu-slide.is-active {
  transform: translate(-50%, -50%) translateX(0) scale(1);
  opacity: 1;
  filter: brightness(1);
  z-index: 3;
  pointer-events: auto;
}

/* Next page peeks behind, offset to the right */
.menu-slide.is-next {
  transform: translate(-50%, -50%) translateX(60px) scale(0.96);
  opacity: 1;
  z-index: 2;
  filter: brightness(0.5);
}

/* Prev page peeks behind, offset to the left */
.menu-slide.is-prev {
  transform: translate(-50%, -50%) translateX(-60px) scale(0.96);
  opacity: 1;
  z-index: 2;
  filter: brightness(0.5);
}

.menu-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream, #E8E4D3);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 5;
  opacity: 0.7;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.menu-slider__nav:hover {
  opacity: 1;
}
.menu-slider__nav--prev { left: 0; }
.menu-slider__nav--next { right: 0; }
.menu-slider__nav--prev:hover { transform: translate(-4px, -50%); }
.menu-slider__nav--next:hover { transform: translate(4px, -50%); }

@media (max-width: 640px) {
  .menu-slider__stage { min-height: 60vh; }
  .menu-slide.is-next { transform: translate(-50%, -50%) translateX(28px) scale(0.94); }
  .menu-slide.is-prev { transform: translate(-50%, -50%) translateX(-28px) scale(0.94); }
  .menu-slider__nav { width: 40px; height: 40px; }
}

/* ============================================================
   JING STUDIO — scoped overrides
   Activated only on the Jing Studio page template.
   ============================================================ */

@font-face {
  font-family: 'Denton Test';
  src: url('./assets/Denton Test Light 300.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Denton Test';
  src: url('./assets/Denton Test Bold 700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aileron';
  src: url('./assets/Aileron-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aileron';
  src: url('./assets/Aileron-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body.page-template-page-jing-studio {
  --jing-purple: #392893;
  --jing-green: #3B6F0F;
  --jing-blue: #1297C3;
  --jing-cream: #F4F0E4;
  --jing-ink: #1A1340;

  --color-navy: #2a1d70;
  --color-navy-light: #392893;
  --color-navy-dark: #1A1340;
  --color-cream: #F4F0E4;
  --color-cream-light: #FFFFFF;
  --color-gold: #1297C3;
  --color-gold-dark: #3B6F0F;
  --color-footer: #1A1340;

  --font-serif: 'Denton Test', Georgia, 'Times New Roman', serif;

  background: #ffffff;
  color: var(--jing-ink);
}

body.page-template-page-jing-studio {
  font-family: 'Aileron', system-ui, sans-serif;
}

body.page-template-page-jing-studio h1,
body.page-template-page-jing-studio h2,
body.page-template-page-jing-studio h3,
body.page-template-page-jing-studio h4 {
  font-family: 'Denton Test', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
}

/* All body copy on Jing Studio uses Aileron */
body.page-template-page-jing-studio p,
body.page-template-page-jing-studio li,
body.page-template-page-jing-studio .jing-hero__body,
body.page-template-page-jing-studio .jing-hero__tagline,
body.page-template-page-jing-studio .jing-tea-card__origin,
body.page-template-page-jing-studio .jing-tea-card__desc,
body.page-template-page-jing-studio .jing-intro__body,
body.page-template-page-jing-studio .jing-intro__body p {
  font-family: 'Aileron', system-ui, sans-serif;
}

/*
 * Visit (#plan-your-visit + #getting-here): on Jing Studio the body overrides
 * Tailwind theme vars — reset inside #visit so colors/fonts match page-jing-visit.php.
 */
body.page-template-page-jing-studio #visit {
  --font-serif: 'Baskervville', Georgia, 'Times New Roman', serif;
  --color-navy: #001521;
  --color-navy-light: #001a2a;
  --color-navy-dark: #000000;
  --color-cream: #e8e4d3;
  --color-cream-light: #e8e4d3;
  --color-gold: #c9a96e;
  --color-gold-dark: #8a6d3b;
  --color-footer: #272727;
}

body.page-template-page-jing-studio #visit p,
body.page-template-page-jing-studio #visit li,
body.page-template-page-jing-studio #visit .heritage-wysiwyg {
  font-family: 'Patron', system-ui, sans-serif;
}

body.page-template-page-jing-studio #visit h1,
body.page-template-page-jing-studio #visit h2,
body.page-template-page-jing-studio #visit h3,
body.page-template-page-jing-studio #visit h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0;
}

/* ===== Navbar (Jing purple — always on, scrolled or not) ===== */
body.page-template-page-jing-studio #navbar,
body.page-template-page-jing-studio #navbar.is-scrolled,
body.page-template-page-jing-visit #navbar,
body.page-template-page-jing-visit #navbar.is-scrolled {
  background-color: #2a1d70;
  backdrop-filter: blur(10px);
}

/* Smaller logo on Jing Studio (desktop + mobile menu) */
body.page-template-page-jing-studio #navbar img,
body.page-template-page-jing-studio #mobile-menu img,
body.page-template-page-jing-visit #navbar img,
body.page-template-page-jing-visit #mobile-menu img {
  height: 2rem;
}
@media (min-width: 768px) {
  body.page-template-page-jing-studio #navbar img,
  body.page-template-page-jing-visit #navbar img {
    height: 2.5rem;
  }
}

/* ===== Hero =====
   Stacking: bg image (z-0) < purple overlay (z-1) < text (z-10)
*/
.jing-hero {
  color: var(--jing-cream);
}

.jing-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.55);
}
.jing-hero__heading {
  font-family: 'Denton Test', Georgia, serif;
  font-weight: 700;
  color: #FFF;
}
.jing-hero__body,
.jing-hero__tagline {
  color: #FFF;
  font-size: 24px;
  font-family: 'Patron', system-ui, sans-serif;
}

/* ===== Jing About (text styles independent from hero) ===== */
.jing-about__body {
  color: #FFFFFF;
  font-size: 24px;
  font-family: 'Patron', system-ui, sans-serif;
}
@media (min-width: 768px) {
  .jing-about__body {
    font-size: 16px;
  }
}
body.page-template-page-jing-studio .jing-about__body p,
body.page-template-page-jing-studio .jing-about__body li {
  font-family: 'Patron', system-ui, sans-serif;
}
body.page-template-page-jing-studio .jing-about__body a {
  color: #2a1d70;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.jing-about__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 11px 24px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  font-family: 'Patron', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.jing-about__button:hover,
.jing-about__button:focus-visible {
  background-color: #FFFFFF;
  color: #2a1d70;
  border-color: #FFFFFF;
}

/* ===== Tea Gallery ===== */
.jing-tea-gallery {
  background: #ffffff;
  color: var(--jing-ink);
}
.jing-tea-gallery__heading {
  font-family: 'Denton Test', Georgia, serif;
  font-weight: 700;
  color: var(--jing-purple);
  letter-spacing: 0;
}
.jing-tea-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.jing-tea-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.jing-tea-card__divider {
  display: block;
  width: 28px;
  height: 1px;
  margin: 0 auto;
  background-color: var(--jing-blue);
}
body.page-template-page-jing-studio .jing-tea-card__name {
  font-family: 'Aileron', system-ui, sans-serif !important;
  font-weight: 700;
  color: var(--jing-purple);
}
.jing-tea-card__origin {
  color: var(--jing-ink);
  opacity: 0.7;
  font-family: 'Patron', system-ui, sans-serif;
}
.jing-tea-card__desc {
  color: var(--jing-ink);
  opacity: 0.85;
  font-family: 'Patron', system-ui, sans-serif;
  line-height: 1.7;
}

/* ===== Intro (image + text blocks with themed backgrounds) ===== */
.jing-intro {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  z-index: 0;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .jing-intro {
    padding-bottom: 8rem;
  }
}
.jing-intro__inner {
  position: relative;
  z-index: 1;
}
#footer {
  position: relative;
  z-index: 2;
}
.jing-intro__deco {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.jing-intro__deco--1 {
  top: -40px; left: -60px;
  width: 350px;  height: 700px;
  background-image: url('./assets/jing-side-bg.png');
}
.jing-intro__deco--2 {
  top: 200px;  bottom: auto; right: -10px;
  width: 400px; height: 700px;
  background-image: url('./assets/jing-side-bg-2.png');
}
.jing-intro__deco--3 {
  top: 40px;  right: 0px;
  width: 600px; height: 100px;
  background-image: url('./assets/jing-side-bg-3.png');
  background-position: left center;
}
@media (max-width: 767px) {
  .jing-intro__deco--1 { width: 250px; height: 600px; top: 150px; }
  .jing-intro__deco--2 { width: 250px; height: 650px; bottom: 30px; top: auto; }
  .jing-intro__deco--3 { width: 240px; height: 70px; top: -10px; }
}
.jing-intro__block {
  min-height: 420px;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}
.jing-intro__block + .jing-intro__block {
  margin-top: 3rem;
}
@media (min-width: 768px) {
  .jing-intro__block + .jing-intro__block {
    margin-top: 5rem;
  }
}
.jing-intro__media {
  height: 100%;
  min-height: 320px;
}
.jing-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jing-intro__copy {
  align-self: center;
  color: #ffffff;
  text-align: left;
}
.jing-intro__block--reverse .jing-intro__copy {
  text-align: right;
}
.jing-intro__copy-inner {
  max-width: 90%;
}
.jing-intro__block--reverse .jing-intro__copy-inner {
  margin-left: auto;
}
@media (max-width: 767px) {
  .jing-intro__copy-inner { max-width: 100%; }
}
.jing-intro__block--blue .jing-intro__copy {
  background: linear-gradient(to right, #1297C3 50%, rgba(18, 151, 195, 0.70) 75%, rgba(18, 151, 195, 0) 100%);
}
.jing-intro__block--blue.jing-intro__block--reverse .jing-intro__copy {
  background: linear-gradient(to left, #1297C3 50%, rgba(18, 151, 195, 0.70) 75%, rgba(18, 151, 195, 0) 100%);
}
.jing-intro__block--pink .jing-intro__copy {
  background: linear-gradient(to right, #c85266 50%, rgba(200, 82, 102, 0.70) 75%, rgba(200, 82, 102, 0) 100%);
}
.jing-intro__block--pink.jing-intro__block--reverse .jing-intro__copy {
  background: linear-gradient(to left, #c85266 50%, rgba(200, 82, 102, 0.70) 75%, rgba(200, 82, 102, 0) 100%);
}
@media (max-width: 767px) {
  .jing-intro__block--blue .jing-intro__copy,
  .jing-intro__block--blue.jing-intro__block--reverse .jing-intro__copy {
    background: linear-gradient(to bottom, #1297C3 60%, rgba(18, 151, 195, 0.70) 85%, rgba(18, 151, 195, 0) 100%);
  }
  .jing-intro__block--pink .jing-intro__copy,
  .jing-intro__block--pink.jing-intro__block--reverse .jing-intro__copy {
    background: linear-gradient(to bottom, #c85266 60%, rgba(200, 82, 102, 0.70) 85%, rgba(200, 82, 102, 0) 100%);
  }
  .jing-intro__copy,
  .jing-intro__block--reverse .jing-intro__copy {
    text-align: left;
  }
}
.jing-intro__body {
  font-family: 'Patron', system-ui, sans-serif;
}
.jing-intro__body p { margin-bottom: 1rem; }
.jing-intro__attribution {
  font-family: 'Denton Test', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.15em;
}

@media (min-width: 768px) {
  .jing-intro__block { min-height: 480px; }
  .jing-intro__copy {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}

.jing-hero__image{
  max-width:100px;
}

.jing-menu {
  color: #f6efcf;
}
.jing-menu__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) {
  .jing-menu__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .jing-menu__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.jing-menu__card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  aspect-ratio: 2 / 3;
  background: #0c0c0c;
}
.jing-menu__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 300ms ease;
}
.jing-menu__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: #f6efcf;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.38) 55%, rgba(0, 0, 0, 0.06) 100%);
  opacity: 0;
  transition: opacity 280ms ease;
}
.jing-menu__card:hover .jing-menu__overlay,
.jing-menu__card:focus-within .jing-menu__overlay {
  opacity: 1;
}
.jing-menu__card:hover .jing-menu__image,
.jing-menu__card:focus-within .jing-menu__image {
  transform: scale(1.03);
}
.jing-menu__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  color: #f6efcf;
  font-family: 'Denton Test', Georgia, serif;
}
.jing-menu__desc {
  margin: 0.75rem 0 0;
  font-size: 16px;
  line-height: 1.4;
  color: #f6efcf;
  font-family: 'Aileron', system-ui, sans-serif;
}
.jing-menu__line {
  display: block;
  width: 86px;
  height: 3px;
  margin-top: 1.25rem;
  background: #f6efcf;
}