/* VC Massage Therapy — responsive single-screen landing (black & gold) */
:root{
  --bg:#070707;
  --card:#0f0f0f;
  --gold:#D4AF37;
  --muted:#bdbdbd;
  --accent:rgba(212,175,55,0.08);
}

/* Honey Script local font (provided in assets/honey_script/) */
@font-face {
  font-family: 'Honey Script';
  src: url('assets/honey_script/HoneyScript-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Honey Script';
  src: url('assets/honey_script/HoneyScript-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
html,body{height:100vh;margin:0;padding:0;background-color:var(--bg);color:#fff;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;overflow:hidden;scrollbar-gutter:stable}
/* page background: image with dark overlay for legibility */
.body-bg{
  /* page background image sits behind the solid content card */
  background-image: url('assets/BG.png');
  background-color: var(--bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* fixed gives a subtle parallax on desktop; disable on small screens */
  background-attachment: fixed;
}

/* Disable fixed background on mobile to avoid jank */
@media (hover:none){
  .body-bg{ background-attachment: scroll; }
}
.wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
/* Pull-to-refresh indicator */
.pull-refresh{position:fixed;top:12px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:8px;background:rgba(0,0,0,0.6);backdrop-filter:blur(6px);color:var(--gold);padding:6px 10px;border-radius:9999px;border:1px solid rgba(255,255,255,0.18);z-index:2000;box-shadow:0 8px 18px rgba(0,0,0,0.5)}
.pull-refresh-visible{display:flex}
.pull-refresh .spinner{width:16px;height:16px;border:2px solid rgba(212,175,55,0.25);border-top-color:var(--gold);border-radius:50%;animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
 .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
 .skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;border:1px solid rgba(255,255,255,0.3);border-radius:6px;z-index:2000}
.card{width:min(1200px,94%);max-height:calc(100vh - 48px);height:auto;display:grid;grid-template-columns:1fr;gap:24px;border-radius:14px;padding:84px 20px 20px;border:1px solid rgba(212,175,55,0.08);background:var(--card);box-shadow:0 10px 30px rgba(0,0,0,0.6);overflow:hidden;position:relative}
/* LEFT */
.left{display:flex;flex-direction:column;gap:18px;align-items:center;overflow:auto}
.brand{display:flex;flex-direction:row;align-items:center;gap:18px;justify-content:center;width:100%;grid-column:1 / -1;margin-bottom:6px}
.brand{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:1600}
.logo{width:clamp(56px,8vw,110px);height:clamp(56px,8vw,110px);margin-bottom:0}
.titles{width:auto;text-align:left}
.titles h1{font-family:'Cinzel', serif;margin:0;color:var(--gold);font-size:clamp(28px,4.2vw,44px);line-height:1;letter-spacing:clamp(1px,0.25vw,2.2px);font-weight:500;text-transform:uppercase}
.tag{margin:4px 0 0;color:var(--muted);font-size:14px}
.menu-wrap{width:100%;display:flex;flex-direction:column;gap:12px}
/* Discreet bottom-right policies link (no scrolling) */
.policy-bottom-link{position:absolute;bottom:10px;right:14px;color:var(--gold);text-decoration:none;font-weight:600;font-size:12px;opacity:0.7}
.policy-bottom-link:hover{opacity:1;text-decoration:underline;text-underline-offset:2px}
.policy-bottom-link:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* center the business card menu inside the left content area */
.card-business{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:12px 0 18px 0;
  /* Ensure the menu sits below the absolutely positioned brand */
  margin-top: 36px;
  /* span whole card so the menu centers across both columns */
  grid-column: 1 / -1;
}

/* Mobile landscape fixes: compress spacing and scale elements to fit */
@media (orientation: landscape) and (hover:none){
  .wrap{ padding: 2px; height: 100dvh; align-items:flex-start; }
  .brand{ position: relative !important; top: 0 !important; left: auto !important; transform:none; margin-bottom: -12px; width:100%; display:flex; align-items:center; justify-content:center; gap:4px }
  .titles{ text-align:center }
  .logo{ width: clamp(40px,5.5vw,68px); height: clamp(40px,5.5vw,68px); }
  .titles h1{ font-size: clamp(20px,3.2vw,30px); letter-spacing: 1px; }
  .card{ padding: 4px 6px 4px; height: 100dvh; max-height: 100dvh; }
  .card-business{ flex:1; display:flex; flex-direction:column; justify-content:flex-start; min-height:0; }
  .menu-wrap{ margin-top: 0 !important; gap: 6px; }
  .menu-control{ gap: 6px; margin-top: 0; margin-bottom: 4px; position: relative; top: -24px; }
  .toggle-btn{ padding: 6px 9px; font-size: 11px; }
  .flip-card{ margin-top: -8px; min-height: 0; flex:1; justify-content:flex-start; }
  .menu-image{ width: clamp(420px, 70vw, 980px); max-height: 66vh; }
  .review-list{ max-height: 54vh; }
  .policy-bottom-link{ bottom: 6px; right: 10px; font-size: 11px; }
}

/* Extremely short screens (e.g., small phones in landscape) */
@media (max-height: 420px) and (hover:none){
  .card{ padding: 20px 8px 8px; }
  .menu-image{ max-height: 56vh; }
  .review-list{ max-height: 46vh; }
}

/* Laptop/tablet landscape tuning (fit contact panel, avoid overlap) */
@media (orientation: landscape) and (max-height: 900px){
  .contact-face .contact-inner{max-width:760px}
  .contact-face .contact-info{padding:20px 16px;max-height:70vh;overflow:auto}
  .contact-face .contact-grid{gap:12px}
  .contact-face .contact-item a{font-size:16px}
  .contact-face .address{font-size:15px}
  .contact-face .hours .day, .contact-face .hours .time{font-size:14px}
}
.section-title{margin:0;color:var(--gold);font-size:16px;font-weight:600;letter-spacing:0.4px}
.menu-image{
  /* Increased minimum and a larger viewport fraction so the menu reads larger
     while remaining responsive on small screens. The clamp values balance
     phone/tablet/desktop layouts. */
  width: clamp(420px, 68vw, 1090px);
  max-width: 100%;
  height: auto;
  /* Allow the menu image to occupy more vertical space but still leave room
     for header and controls. */
  max-height: 74vh;
  object-fit: contain;
  border-radius:10px;
  border: none;
  background: transparent;
  box-shadow: none;
  transition: opacity 320ms ease-in-out, transform 320ms ease-in-out;
  opacity: 1;
}
.menu-image.fade-out{opacity:0;transform:scale(0.995)}
.menu-thumb{display:inline-block;margin-top:6px;padding:0;border-radius:10px;background:transparent;border:none;cursor:pointer;position:relative;overflow:hidden}
.menu-thumb .menu-image{border-radius:10px;display:block}
 .menu-thumb:focus-visible{outline:2px solid #fff;outline-offset:2px}
.menu-caption{font-size:13px;color:var(--muted);margin-top:6px}

/* Overlay hint for enlarging menu */
.enlarge-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  color: var(--gold);
  padding: 8px 12px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(212, 175, 55, 0.4);
  opacity: 0.85;
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  /* Fix for backface visibility on some devices */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Ensure the hint is only visible on the active face to prevent bleed-through */
.flip-card:not(.flipped) .flip-back .enlarge-hint {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.flip-card.flipped .flip-front .enlarge-hint {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.menu-thumb:hover .enlarge-hint {
  opacity: 1;
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.05);
  border-color: var(--gold);
}

.enlarge-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.extra-thumbs{display:flex;gap:10px;margin-top:10px;align-items:center}
.extra-thumbs .gallery-thumb{padding:0;border-radius:8px;background:transparent;border:none;cursor:pointer}
.thumb-image{width:120px;height:auto;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 18px rgba(0,0,0,0.45)}

/* highlight state for cycling thumbnails */
.gallery-thumb.thumb-active .thumb-image{border-color:var(--gold);box-shadow:0 8px 20px rgba(212,175,55,0.12);transform:translateY(-4px) scale(1.03)}

/* new gallery section */
.gallery-wrap{margin-top:20px}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gallery-item{text-align:center}
.gallery-image{width:100%;height:auto;max-height:300px;object-fit:cover;border-radius:12px;border:1px solid rgba(212,175,55,0.08);box-shadow:0 8px 24px rgba(0,0,0,0.4);transition:transform 0.3s ease}
.gallery-image:hover{transform:scale(1.02)}
.gallery-caption{margin-top:8px;color:var(--gold);font-size:14px;font-weight:600}

/* Make sure menu stays visually dominant */
.menu-wrap{display:flex;flex-direction:column;align-items:center}

/* language toggle button above the menu */
.menu-control{display:flex;justify-content:center;width:100%;margin-bottom:8px}
.menu-control{position:relative;z-index:1550}
.toggle-btn{background:rgba(212,175,55,0.05);border:1px solid rgba(212,175,55,0.25);color:var(--gold);padding:9px 16px;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:0.5px;transition:all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);backdrop-filter:blur(10px)}
.toggle-btn:hover{background:rgba(212,175,55,0.12);border-color:rgba(212,175,55,0.45);transform:translateY(-1px)}
.toggle-btn[aria-pressed="true"]{background:rgba(212,175,55,0.15);border-color:rgba(212,175,55,0.5)}
 .toggle-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Ensure the card images container centers its children (the flip card) */
.card-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 3D flip card that swaps English/Spanish menu images */
.flip-card{perspective:1000px;display:flex;align-items:center;justify-content:center;width:100%;margin-top:12px;z-index:1200;position:relative}
.flip-inner{z-index:1200}
.flip-inner{position:relative;transition:transform 600ms cubic-bezier(.2,.9,.2,1);transform-style:preserve-3d;display:inline-block}
.flip-front,.flip-back{backface-visibility:hidden;-webkit-backface-visibility:hidden;display:block}
.flip-back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;align-items:center;justify-content:center}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}

/* ensure the flipped faces align; preserve spacing for the image size rules already defined */
.flip-front .menu-image,.flip-back .menu-image{display:block}

/* Contact face styles (hidden until toggled) */
.contact-face{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:12px;border-radius:10px;backface-visibility:hidden;transform:rotateY(-180deg);opacity:0;pointer-events:none;transition:transform 600ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease-in-out}
.contact-face .contact-inner{max-width:720px;width:100%;text-align:center;color:#fff}
.contact-face .contact-info{
  background: linear-gradient(180deg, rgba(20,20,20,0.95), rgba(10,10,10,0.98));
  padding: 32px 24px;
  border-radius: 16px;
  border: 1px solid rgba(212,175,55,0.15);
  box-shadow: 0 20px 50px rgba(0,0,0,0.8);
  width: 100%;
  max-width: 420px;
  backdrop-filter: blur(10px);
  margin: 0 auto;
}
.contact-face .contact-grid{display:flex;flex-direction:column;gap:20px;align-items:center}
.contact-face .contact-item{
  color:var(--muted);
  font-size:16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.contact-face .contact-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.contact-face .contact-item a{color:#fff;text-decoration:none;font-weight:500;font-size:18px;transition:color 0.2s}
.contact-face .contact-item a:hover{color:var(--gold)}
 .contact-face .contact-item a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.contact-face .contact-label{color:var(--gold);font-family:'Cinzel', serif;font-weight:700;font-size:16px;letter-spacing:1.2px;margin-bottom:8px}
.contact-face .address {
  line-height: 1.6;
  font-size: 16px;
  color: #f0f0f0;
}

/* Styled hours table */
.contact-face .hours {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-face .hours div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.contact-face .hours .day {
  color: var(--gold);
  font-weight: 500;
  font-size: 15px;
}
.contact-face .hours .time {
  color: #fff;
  font-weight: 400;
  font-size: 15px;
}

/* when contact visible, rotate the flip-inner away and bring in contact-face */
.flip-card.contact-visible .flip-inner{pointer-events:none}
.flip-card.contact-visible .contact-face{transform:rotateY(0);opacity:1;pointer-events:auto;z-index:1250}
.flip-card.reviews-visible .reviews-face{transform:rotateY(0);opacity:1;pointer-events:auto;z-index:1250}

/* When the contact face is visible, hide the front/back menu faces completely
   so they cannot be seen beneath the contact panel. We use opacity +
   pointer-events to keep transitions smooth and prevent interaction. */
.flip-card.contact-visible .flip-front,
.flip-card.contact-visible .flip-back,
.flip-card.reviews-visible .flip-front,
.flip-card.reviews-visible .flip-back {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
}

/* Reviews face styles (similar to contact) */
.reviews-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;border-radius:10px;backface-visibility:hidden;transform:rotateY(-180deg);opacity:0;pointer-events:none;transition:transform 600ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease-in-out}
.reviews-face .reviews-inner{max-width:720px;width:100%;text-align:left;color:var(--text-dark, #202124);padding:10px}

/* Google-modal-like white panel inside the dark site */
.reviews-face .reviews-inner .panel{
  /* Keep the reviews panel dark to match the site, but increase contrast for text */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: #ffffff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.03);
}
.review-list{display:flex;flex-direction:column;gap:8px;margin-top:6px;max-height:56vh;overflow:auto;padding-right:6px}
.review-item{background:transparent;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.03);display:block}
.review-row{display:flex;gap:12px;align-items:flex-start}
.review-avatar{width:44px;height:44px;border-radius:50%;flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2b2b2b,#1a1a1a);color:var(--gold);font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,0.6)}
.review-meta{flex:1;min-width:0}
.review-author-name{font-weight:800;color:var(--gold);font-size:15.5px;letter-spacing:0.2px;text-shadow:0 1px 0 rgba(0,0,0,0.5)}
.review-date{font-size:12px;color:#cfcfcf;margin-top:2px}
.review-stars{margin-top:6px}
.review-stars i{color:var(--gold);margin-right:6px;font-size:14px;opacity:1;display:inline-block}
.review-stars i::before{content:'★';}

/* also style the legacy .review-author block used by the non-parsed renderer */
.review-author{font-weight:800;color:var(--gold);font-size:15.5px;margin-bottom:6px}
.review-text{color:#b0b0b0;font-size:15px;line-height:1.5;margin-top:10px}
.review-empty{color:#cfcfcf;padding:18px;text-align:center}

/* OCR progress indicator */
.ocr-progress{color:var(--muted);font-size:14px;text-align:center;margin:8px 0}

@media (max-width:900px){
  .thumb-image{width:100px}
  .toggle-btn{padding:8px 12px;font-size:12px}
  .review-list{max-height:50vh}
  .review-author-name{font-size:14px}
  .review-text{font-size:14px}
}
@media (max-width:700px){
  .extra-thumbs{gap:8px}
  .thumb-image{width:88px}
  .toggle-btn{padding:7px 10px;font-size:11px;gap:4px}
  .menu-control{gap:4px}
  .review-list{max-height:48vh;padding-right:4px}
  .review-item{padding:10px 0}
  .review-author-name{font-size:13px}
  .review-date{font-size:11px}
  .review-text{font-size:13px}
  .review-avatar{width:36px;height:36px;font-size:14px}
  
  /* Responsive contact card adjustments */
  .contact-face .contact-info{
    padding: 24px 16px;
    max-width: 90%;
  }
  .contact-face .contact-grid{
    gap: 16px;
  }
  .contact-face .contact-item a{
    font-size: 16px;
  }
  .contact-face .address{
    font-size: 14px;
  }
  .contact-face .contact-item{
    padding-bottom: 12px;
  }
}

/* modal / lightbox styles */
.menu-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1900;width:100vw;height:100dvh}
.menu-modal[aria-hidden="false"]{display:flex}
.menu-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.75));backdrop-filter:blur(6px)}
.menu-panel{
  position:relative;
  z-index:1910;
  /* keep panel slightly inset from the viewport */
  max-width:calc(100vw - 64px);
  max-height:calc(100dvh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}
.menu-panel-inner{
  /* allow content to size naturally and stay centered */
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
}
.menu-full{
  /* Larger lightbox so the full menu fills more of the viewport */
  width: auto;
  height: auto;
  max-width: 98vw;
  max-height: 96dvh;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(212,175,55,0.06);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
/* Mobile landscape: constrain enlarged image more tightly */
@media (orientation: landscape) and (hover:none){
  .menu-full{ max-width: 96vw; max-height: 86dvh; }
  .modal-close{ width:40px;height:40px }
  /* Make policies modal scroll inside the panel */
  #policyModal .policy-content, #policyModalEs .policy-content{
    max-height: calc(86dvh - 64px);
    overflow: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,0.55) rgba(255,255,255,0.08);
  }
  #policyModal .policy-content::-webkit-scrollbar,
  #policyModalEs .policy-content::-webkit-scrollbar{ width: 8px }
  #policyModal .policy-content::-webkit-scrollbar-thumb,
  #policyModalEs .policy-content::-webkit-scrollbar-thumb{ background: rgba(212,175,55,0.55); border-radius: 6px }
  #policyModal .policy-content::-webkit-scrollbar-track,
  #policyModalEs .policy-content::-webkit-scrollbar-track{ background: rgba(255,255,255,0.08) }
}
@media (orientation: landscape) and (max-width:900px){
  .menu-full{ max-width: 96vw; max-height: 88dvh }
}
.policy-content{max-width:860px;color:#eaeaea}
.policy-content h3{color:var(--gold);margin:8px 0 4px 0;font-weight:600}
.policy-content p{margin:6px 0 12px 0;line-height:1.55}
.modal-close{position:absolute;right:12px;top:12px;background:rgba(12,12,12,0.45);backdrop-filter:blur(8px);border:1px solid rgba(212,175,55,0.35);color:transparent;font-size:0;line-height:1;border-radius:50%;cursor:pointer;z-index:1920;box-shadow:0 8px 20px rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;width:48px;height:48px}
.modal-close::before,.modal-close::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:2px;background:var(--gold);border-radius:2px}
.modal-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.modal-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.modal-close:hover{background:rgba(12,12,12,0.6);transform:scale(1.06)}
.modal-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.modal-close:active{transform:scale(0.96)}
 .site-footer{padding:16px;border-top:1px solid rgba(212,175,55,0.08);background:transparent;color:#fff}
.site-footer .footer-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:10px}
.site-footer details{background:rgba(255,255,255,0.02);border:1px solid rgba(212,175,55,0.08);border-radius:8px;padding:10px}
.site-footer summary{color:var(--gold);font-weight:600;cursor:pointer}
.site-footer p{margin:8px 0;color:#d8d8d8;font-size:14px}
.site-footer details:focus-visible{outline:2px solid #fff;outline-offset:2px}
.footer-links{margin-bottom:10px}
.footer-link{color:var(--gold);text-decoration:none;font-weight:600}
.footer-link:hover{text-decoration:underline;text-underline-offset:2px;color:#f6d88a}
.footer-link:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* when modal open, keep layout but allow modal to handle focus; avoid page scroll */
.modal-open{}

/* RIGHT (contact) */
.right{display:flex;align-items:center;justify-content:center}
.contact-card{width:100%;background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));padding:18px;border-radius:12px;border:1px solid rgba(212,175,55,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.contact-card h3{margin:0 0 12px;color:var(--gold);font-size:18px}
.contact-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.icon{width:44px;height:44px;border-radius:10px;background:rgba(212,175,55,0.06);display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:700}
.contact-link{color:#fff;text-decoration:none;font-size:15px}
.divider{height:1px;background:rgba(255,255,255,0.03);margin:12px 0;border-radius:2px}
.address{color:var(--muted);font-size:14px;margin:6px 0}
.maps{display:inline;color:var(--gold);text-decoration:none;font-weight:600;margin-top:6px;transition:color 200ms ease}
.maps::after{content:'↗';font-size:11px;opacity:0.6;margin-left:4px}
.maps:hover{color:#f6d88a;text-decoration:underline;text-underline-offset:2px}
.maps:focus-visible{outline:2px solid #fff;outline-offset:2px;text-decoration:underline}
.hours{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.hours .day{color:var(--muted);margin-right:8px}
.hours .time{float:right;color:#fff}
.socials{display:flex;gap:12px;margin-top:12px}
.social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.6px solid rgba(212,175,55,0.35);background:rgba(212,175,55,0.08);color:var(--gold);text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,0.4);transition:transform .18s ease, background .18s ease, box-shadow .18s ease}
.social:hover{background:rgba(212,175,55,0.16);transform:scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,0.5)}
.social:active{transform:scale(0.97)}
.social:focus-visible{outline:2px solid #fff;outline-offset:2px}
.social i{font-size:20px;color:var(--gold)}

/* make sure layout fits without scrolling — scale on smaller screens */
@media (max-width:900px){
  .card{grid-template-columns:1fr;height:auto;max-height:none;padding:84px 16px 16px}
  /* allow a larger fraction of the viewport on tablets so the menu
     is still prominent but won't overflow */
  .menu-image{max-height:56vh}
  .titles h1{font-size:36px;letter-spacing:1.6px}
}
@media (min-width:901px){
  html, body { overflow: hidden; }
  .card{height:auto;max-height:none;padding:96px 20px 20px}
  .card-business{margin-top:48px}
  .menu-image{width: clamp(480px, 62vw, 1040px);max-height:64vh}
  .flip-card{margin-top:16px}
  .titles h1{font-size:40px;letter-spacing:2px}
}
@media (min-width:701px) and (max-height:700px){
  .card{padding:72px 16px 16px}
  .titles h1{font-size:32px;letter-spacing:1.6px}
  .menu-image{max-height:52vh}
  .menu-control{margin-bottom:6px}
}
/* Mobile touch layout only (avoid applying to narrow desktop windows) */
@media (max-width:700px) and (hover:none){
  /* Fix scroll and layout on mobile */
  html, body {
    height: 100%;
    overflow: hidden;
    position: fixed; /* Lock scroll on iOS */
    width: 100%;
  }

  .wrap {
    display: flex;
    height: 100dvh; /* Use dynamic viewport height to account for browser bars */
    max-height: 100%;
    padding: 12px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .card {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1; /* Fill the wrap minus padding */
    height: auto; /* Let flex handle height */
    max-height: 100%; /* Never exceed parent */
    margin: 0;
    padding: 80px 8px 16px 8px;
    grid-template-columns: none;
    grid-auto-rows: auto;
    overflow: hidden; /* Prevent any internal overflow from expanding the card */
  }

  /* Reset brand position */
  .brand {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-bottom: 4px;
    gap: 4px;
    padding: 0;
    background: transparent;
    z-index: 1600;
  }
  /* Smaller logo to save space */
  .logo {
    width: 50px; /* Reduced logo size */
    height: 50px;
  }
  .titles h1 {
    font-size: 22px; /* Reduced title size */
    letter-spacing: 1.1px;
  }

  /* Main content area expands to fill available space */
  .card-business {
    margin-top: 0;
    padding-top: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the menu/buttons */
    min-height: 0; /* Allow shrinking */
    overflow: hidden; /* Ensure flex child doesn't spill */
  }

  /* Container for images/buttons */
  .card-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
  }

  /* Menu control buttons */
  .menu-control {
    margin-top: 0;
    margin-bottom: 6px;
    position: relative;
    top: 0;
    flex-shrink: 0;
    z-index: 1750;
  }
  .menu-wrap{ margin-top: 0 !important; gap: 6px }
  .toggle-btn{ padding:10px 16px; font-size:13px }

  /* Flip card container */
  .flip-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
  }

  /* Ensure images scale down to fit */
  .menu-image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }
  
  /* Reset others */
  .right{align-items:flex-start; display: none;} /* Hide empty right col if present */
  .review-list{position:relative}
  .review-list::after{content:none}
}

/* Narrow desktop window: prevent overlap without scrolling */
@media (max-width:700px) and (hover:hover){
  html, body { height: 100vh; min-height: 100vh; overflow: hidden; position: static; }
  .wrap { min-height: 100vh; padding: 12px; }
  .card { padding: 96px 12px 12px; height: auto; max-height: none; }
  .brand { position: static; transform: none; margin-bottom: 8px; }
  .card-business { margin-top: 0; padding-top: 0; }
  .flip-card { margin-top: 8px; }
  .menu-image { max-height: 62vh; width: clamp(360px, 86vw, 960px); }
}

@media (max-width:480px){
  .card{padding:70px 6px 6px}
  .logo{width:56px;height:56px}
  .titles h1{font-size:22px;letter-spacing:1px}
  .menu-image{max-height:55vh}
  .review-list{max-height:45vh}
  .toggle-btn{padding:9px 14px;font-size:12px}
  .brand{z-index:1700}
  .menu-control{z-index:1700}
  .flip-card{z-index:1100}
  
  /* Tighter contact card for small screens */
  .contact-face .contact-info{
    padding: 20px 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    max-width: 96%;
  }
  .contact-face .contact-grid{
    gap: 14px;
  }
  .contact-face .contact-label{font-size:14px;margin-bottom:6px}
  .contact-face .contact-item a{
    font-size: 15px;
  }
  .contact-face .hours .day, 
  .contact-face .hours .time{
    font-size: 13px;
  }
  
  /* Bring hours closer together on mobile */
  .contact-face .hours div {
    justify-content: center;
    gap: 12px;
  }
}

/* small tweaks */
*{box-sizing:border-box}

/* FINAL override: mobile landscape should have minimal top padding */
@media (max-width:700px) and (hover:none) and (orientation: landscape){
  .wrap{ padding: 2px !important; }
  .card{ padding: 6px 6px 8px !important; }
  .brand{ top: 0 !important; margin-bottom: 0 !important; }
  .menu-control{ margin-top: 0 !important; }
}

@media (orientation: landscape) and (max-width: 900px){
  .card{ padding: 4px 6px 4px !important; height: 100dvh !important; }
  .brand{ position: relative !important; top: 0 !important; left: auto !important; transform: none !important; margin-bottom: -12px !important; }
  .menu-wrap{ margin-top: 0 !important; }
  .menu-control{ margin-top: 0 !important; position: relative; top: -24px !important; }
  .flip-card{ margin-top: -8px !important; }
}
@media (orientation: landscape) and (hover:none){
  .contact-face .contact-info{padding:16px 12px;max-width:92%;max-height:60vh;overflow:auto;position:relative;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,0.55) rgba(255,255,255,0.08)}
  .contact-face .contact-info::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background:linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.55));pointer-events:none}
  .contact-face .contact-info::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.55));pointer-events:none}
  .contact-face .contact-info::-webkit-scrollbar{width:8px}
  .contact-face .contact-info::-webkit-scrollbar-thumb{background:rgba(212,175,55,0.55);border-radius:6px}
  .contact-face .contact-info::-webkit-scrollbar-track{background:rgba(255,255,255,0.08)}
  .contact-face .contact-grid{gap:10px}
  .contact-face .contact-label{font-size:13px;margin-bottom:6px}
  .contact-face .contact-item a{font-size:16px}
  .contact-face .address{font-size:14px}
  .contact-face .hours .day,.contact-face .hours .time{font-size:13px}
  .socials{gap:10px}
  .social{width:38px;height:38px}
  .social i{font-size:18px}
}