/*
Theme Name: Demarchelier Bistro
Description: Custom WordPress theme for Demarchelier Bistro - Classic French Bistro in Greenport
Version: 1.0
Author: Rick Owadally
Author URI: https://rickthewebdev.com
Theme URI: https://subtenantstudios.com
Text Domain: demarchelier
*/

/* Import Google Fonts with display=swap for better performance */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Lora:wght@400;500&family=Parisienne&family=Playfair+Display:wght@600;700&display=swap');

/* CSS Variables */
:root{
  --bg:#F7F4EF; 
  --ink:#1F1F1F; 
  --burgundy:#7A1F2A;
  --gold:#C9A227; 
  --gray:#6E6E6E; 
  --resy:#D73D38;
  --max:1400px;
  --font-heading: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --font-accent: "Parisienne", "Brush Script MT", cursive;
  --font-outlined: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --logo-kerning-main: 0.015em;
  --logo-kerning-bistro: 0.05em;
}

/* Reset and Base Styles */
html{
  box-sizing:border-box; 
  -webkit-overflow-scrolling: touch;
}
body{
  margin:0; 
  background:var(--bg); 
  color:var(--ink);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}
*,*:before,*:after{box-sizing:inherit}
img{max-width:100%; height:auto; display:block}
a{color:var(--burgundy); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:0 24px; width: 100%; box-sizing: border-box}

/* Accessibility */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; background:#fff; padding:8px 12px; border:2px solid var(--gold); z-index:1000}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}

/* Preloader - Wood and Burgundy Theme */
.preloader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2a1f1c;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
  opacity: 1;
  visibility: visible;
  position: relative;
}

.preloader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(42,31,28,0.8) 0%, rgba(42,31,28,0) 100%);
  pointer-events: none;
  z-index: -1;
}

.preloader::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.03) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 50px 50px, 30px 30px, 40px 40px;
  pointer-events: none;
  z-index: -1;
}

.preloader.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-content{
  text-align: center;
  max-width: 400px;
  padding: 2rem;
}



/* Removed subtitle - no longer needed */



/* Loading spinner - Clean and simple */
.loading-spinner{
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  margin: 0 auto;
  opacity: 1;
  animation: spin 1s linear infinite;
}

@keyframes shimmer{
  0%{transform: translateX(-100%)}
  100%{transform: translateX(100%)}
}

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

@keyframes fadeIn{
  from{opacity: 0}
  to{opacity: 1}
}

@keyframes spin{
  0%{transform: rotate(0deg)}
  100%{transform: rotate(360deg)}
}

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

/* Header */
.site-header{
  position:sticky; 
  top:0; 
  z-index:999; 
  background:#fff; 
  border-bottom:1px solid #e8e2d8; 
  transform: translateZ(0); 
  will-change: transform;
  /* Ensure sticky positioning works with viewport height fixes */
  position: -webkit-sticky;
  position: sticky;
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.logo{font-family:"Times New Roman", Times, serif; font-weight:700; font-size:28px; letter-spacing:var(--logo-kerning-main); color:var(--burgundy); text-transform:uppercase; text-align:center; line-height:1.1; text-decoration:none; transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden; display:inline-block}
.logo:hover{text-decoration:none; transform:scale(1.1) translateY(-3px); filter:brightness(1.2); text-shadow:0 6px 12px rgba(122,31,42,0.4); color:#8B0000}
.logo:before{content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition:left 0.6s ease; z-index:1; pointer-events:none}
.logo:hover:before{left:100%}
.logo .bistro{font-size:20px; font-weight:600; letter-spacing:var(--logo-kerning-bistro); display:block; margin-top:-2px}
nav a{margin:0 10px; color:var(--ink); text-decoration:none; transition:all 0.3s ease; position:relative; padding:8px 0}
nav a:not(.btn):hover{color:var(--burgundy); transform:translateY(-2px); text-shadow:0 2px 4px rgba(122,31,42,0.2); text-decoration:none}
nav a:not(.btn):after{content:""; position:absolute; bottom:0; left:50%; width:0; height:2px; background:var(--burgundy); transition:all 0.3s ease; transform:translateX(-50%)}
nav a:not(.btn):hover:after{width:100%}
.btn{display:inline-block; padding:.75rem 1.25rem; border:1px solid var(--burgundy); border-radius:4px; font-family:var(--font-body); font-weight:500; font-size:1.05rem; text-decoration:none; transition:all 0.6s ease; position:relative}
.btn:hover{text-decoration:none; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.btn.book{background:var(--resy); border-color:var(--resy); color:#fff}
.btn.book:hover{background:#fff; color:var(--resy); border-color:var(--resy)}
.btn:not(.book){background:#fff; border-color:var(--burgundy); color:var(--burgundy)}
.btn:not(.book):hover{background:var(--burgundy); color:#fff; border-color:var(--burgundy)}
.btn.fade-in-up{transition:all 0.6s ease !important}
.menu-toggle{display:none; border:none; padding:0; background:transparent; cursor:pointer; width:30px; height:24px; position:relative}
.menu-toggle span{display:block; width:100%; height:2px; background:var(--burgundy); position:absolute; transition:all 0.3s ease; border-radius:1px}
.menu-toggle span:nth-child(1){top:0}
.menu-toggle span:nth-child(2){top:50%; transform:translateY(-50%)}
.menu-toggle span:nth-child(3){bottom:0}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg); top:50%; margin-top:-1px}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg); bottom:50%; margin-bottom:-1px}

/* Announcement bar */
.announce{
  background:var(--burgundy); 
  border-top:1px solid var(--burgundy); 
  border-bottom:1px solid var(--burgundy); 
  overflow:hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}
.announce p{margin:0; padding:.75rem 0; font-size:1.1rem; font-weight:500; color:#fff; white-space:nowrap; animation:marquee 35s linear infinite; letter-spacing:0.8px; display:inline-block}
.announcement-prefix{font-weight:700; color:var(--gold); margin-right:12px; text-transform:uppercase; font-size:1em; letter-spacing:1px}
@keyframes marquee{
  0%{transform:translateX(100vw)}
  100%{transform:translateX(-100%)}
}

/* Hero */
.hero{position:relative; height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; perspective:1000px; padding-top:80px; transform: translateZ(0); contain: layout style paint;}
.hero-bg{position:absolute; inset:-20%; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity 2s ease-in-out; transform:translateZ(-100px) scale(1.2); will-change:transform; backface-visibility: hidden; z-index:1}
.hero-bg.active{opacity:1} /* Active background should be visible */
.hero-content{position:relative; z-index:3; transform:translateZ(50px); backface-visibility: hidden; transform-origin: center center}
.hero:after{content:""; position:absolute; inset:0; background:rgba(0,0,0,0.5); z-index:2}
.hero .inner{position:relative; padding:3.5rem 1rem; z-index:3; transform:translateZ(50px); max-width:800px; margin:0 auto; backface-visibility: hidden}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading); font-weight:600; line-height:1.2; letter-spacing:0.2px; margin:.2em 0 .4em}
h1{font-family:var(--font-outlined); font-weight:600; font-size:clamp(42px, 7vw, 72px); letter-spacing:1px; text-transform:uppercase}
h2{font-size:clamp(32px, 4.5vw, 48px)}
h3{font-size:clamp(24px, 3vw, 32px)}

/* Outlined heading style */
.outlined-heading{
  font-family: var(--font-outlined);
  font-weight: 600;
  font-size: clamp(42px, 6vw, 60px);
  color: transparent;
  -webkit-text-stroke: 1px var(--burgundy);
  text-stroke: 1px var(--burgundy);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0.3em 0 0.3em;
}
.sub{color:#f1ede7; margin:.4rem 0 1.7rem; font-size:clamp(18px, 2.5vw, 26px); font-weight:500; letter-spacing:0.3px; text-wrap:balance; overflow-wrap:normal; line-height:1.4}

/* Hero shimmer effect */
.hero h1, .hero .sub{
  background: linear-gradient(90deg, #fff, #fef8f0, #fff, #fef8f0, #fff);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer 12s linear infinite;
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.3));
}

.hero-brand{
  font-family: var(--font-heading);
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 600;
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
  margin-bottom: 0;
  text-transform: uppercase;
  opacity: 0.9;
}

.hero h1{
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: 1.5px;
  margin-top: -0.5rem;
  margin-bottom: 0.6rem;
}

@keyframes shimmer{
  0%{background-position: 200% center}
  100%{background-position: -200% center}
}

/* Sections */
section{padding:80px 0; scroll-margin-top:120px; transform: translateZ(0)}
.about{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; padding:40px 0}

/* About Carousel */
.about-carousel{
  position: relative;
  width: 100%;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.about-carousel-image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 2s ease-in-out, transform 2s ease-in-out;
  border-radius: 8px;
}

.about-carousel-image.active{
  opacity: 1;
  transform: scale(1);
}

/* About carousel indicators */
.about-carousel-indicators{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.about-carousel-indicator{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.about-carousel-indicator.active{
  background: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,1);
  transform: scale(1.2);
}

/* Scroll animations */
.fade-in-up{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible{
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left{
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.visible{
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right{
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-right.visible{
  opacity: 1;
  transform: translateX(0);
}

.about p{
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.7;
}
.accent{
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--burgundy);
}
.divider{height:1px; background:linear-gradient(to right, var(--gold), transparent); margin:24px 0}

/* Accent script utility. Use for a single short word only. */
.accent-script{ 
  font-family: var(--font-accent);
  font-size: 1.1em;
  letter-spacing: 0.5px;
}

.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:40px 0}
.card{background:#fff; padding:20px; border:1px solid #e8e2d8; border-radius:8px}
.card h3{margin-top:0}

/* Location map styling */
.location-map{
  margin-top: 12px;
}

.location-map{
  margin-top: 12px;
  border-radius: 4px;
  transition: box-shadow 0.2s ease, outline 0.2s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.location-map:hover{
  outline: 3px solid var(--gold);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.location-map iframe{
  width: 100%;
  height: 180px;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease;
}

.menu{
  background: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), 
              url("https://images.unsplash.com/photo-1414235077428-338989a2e8c0?q=80&w=2000&auto=format&fit=crop") center/cover no-repeat;
  border-top: 1px solid #e8e2d8;
  border-bottom: 1px solid #e8e2d8;
  position: relative;
  padding: 60px 0;
}

.menu .container{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.menu h2{
  margin-bottom: 2rem;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  letter-spacing: 1px;
}

.menu ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  text-align: left;
}

.menu ul li{
  position: relative;
  padding: 0.75rem 0;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  border-bottom: 1px solid rgba(122, 31, 42, 0.15);
}

.menu ul li:before{
  content: "•";
  color: var(--burgundy);
  font-weight: bold;
  font-size: 1.2rem;
  position: absolute;
  left: -1.5rem;
  top: 0.75rem;
}

.menu .btn{
  margin-top: 1.5rem;
  font-size: 1.1rem;
  padding: 1rem 2rem;
  background: var(--burgundy);
  color: #fff;
  border-color: var(--burgundy);
  transition: all 0.3s ease;
}

.menu .btn:hover{
  background: #fff;
  color: var(--burgundy);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(122, 31, 42, 0.2);
}

.gallery-card{display:flex; justify-content:space-between; align-items:center; gap:16px; background:#fff; border:1px solid #e8e2d8; border-radius:8px; padding:20px}
.gallery-card img{width:160px; border-radius:6px}

/* Enhanced gallery section */
.gallery-section{
  background: #fff;
  border-top: 1px solid #e8e2d8;
  border-bottom: 1px solid #e8e2d8;
}

.gallery-content{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}

/* Gallery copy positioning - move to right side */
.gallery-content > div:first-child {
  grid-column: 2;
  grid-row: 1;
}

.gallery-images {
  grid-column: 1;
  grid-row: 1;
}

/* Mobile override - reset grid positioning for single column layout */
@media (max-width: 768px) {
  .gallery-content > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }
  
  .gallery-images {
    grid-column: 1;
    grid-row: 2;
  }
}

.gallery-images{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  grid-template-rows: repeat(2, 250px);
}

.gallery-images img{
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e8e2d8;
}

/* Google Maps Optimization */
.location-map {
  position: relative;
  min-height: 250px;
  background: #f5f5f5;
  border-radius: 4px;
  margin-top: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, outline 0.2s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.location-map:hover {
  outline: 3px solid var(--gold);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.location-map iframe {
  width: 100%;
  height: 250px;
  border: 0;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}



/* Map styling */
.location-map {
  position: relative;
  margin-top: 12px;
}

.location-map img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 4px;
  transition: box-shadow 0.2s ease, transform 0.3s ease;
}

.map-image-link {
  display: block;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23c9a227"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') 12 12, auto;
}

.map-image-link:hover img {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transform: scale(1.15);
}

.map-image-link:hover {
  text-decoration: none;
}

.map-link {
  display: inline-block;
  margin-top: 12px;
  background: var(--burgundy);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.map-link:hover {
  background: #8a1a23;
  transform: translateY(-1px);
  color: white;
  text-decoration: none;
}

/* Footer map link with gold location cursor */
.footer-map-link {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23c9a227"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') 12 12, auto;
}

/* Footer phone link with gold phone cursor */
.footer-phone-link {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23c9a227"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>') 12 12, auto;
}

/* Footer email link with gold email cursor */
.footer-email-link {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23c9a227"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') 12 12, auto;
}

/* Footer address link with gold location cursor */
.footer-address-link {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23c9a227"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') 12 12, auto;
}

/* Contact section phone link with gold phone cursor */
.contact-phone-link {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23c9a227"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>') 12 12, auto;
}

/* Contact section email link with gold email cursor */
.contact-email-link {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23c9a227"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') 12 12, auto;
}

/* Sign up section */
.signup-section{
  background: #faf9f7;
  border-top: 1px solid #e8e2d8;
  border-bottom: 1px solid #e8e2d8;
  position: relative;
}



.signup-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  padding: 64px 0;
}

.signup-content{
  background: rgba(255,255,255,0.9);
  padding: 32px;
  border-radius: 8px;
  border: 1px solid rgba(232, 226, 216, 0.8);
}

.signup-content p{
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-top: 1rem;
}

.signup-form{
  background: #faf9f7;
  padding: 32px;
  border-radius: 8px;
  border: 1px solid #e8e2d8;
}

.form-group{
  margin-bottom: 20px;
}

.form-group label{
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.form-group input,
/* Contact Form 7 Styling */
.wpcf7-form {
  margin: 0;
}

.wpcf7-form label {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e8e2d8;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  transition: border-color 0.2s ease;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.1);
}

.wpcf7-form textarea {
  resize: vertical;
  min-height: 100px;
}

.wpcf7-form input[type="submit"] {
  display: inline-block;
  padding: .75rem 1.25rem;
  border: 1px solid var(--resy);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.05rem;
  text-decoration: none;
  background: var(--resy);
  color: #fff;
  cursor: pointer;
  transition: all 0.6s ease;
}

.wpcf7-form input[type="submit"]:hover {
  background: #fff;
  color: var(--resy);
  border-color: var(--resy);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.wpcf7-response-output {
  margin: 16px 0 0 0;
  padding: 12px;
  border-radius: 4px;
  font-family: var(--font-body);
}

.wpcf7-mail-sent-ok {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.wpcf7-validation-errors {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.wpcf7-spam-blocked {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}
.form-group textarea{
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e8e2d8;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.1);
}

.form-group textarea{
  resize: vertical;
  min-height: 100px;
}

/* Footer */
.site-footer{padding:24px 0 40px 0; color:var(--gray)}

/* Footer bottom layout */
.footer-bottom-content {
  text-align: left;
  margin-top: 1em;
}

/* Mobile footer layout */
@media (max-width: 768px) {
  .footer-bottom-content {
    text-align: center;
  }
}
.site-footer a{color:var(--ink)}
.foot-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; border-top:1px solid #e8e2d8; padding-top:24px}
.site-footer .container:last-child{margin-top:24px; padding-top:16px; border-top:1px solid #e8e2d8; text-align:left}

/* Social icons */
.social-icons{
  display: flex;
  gap: 12px;
  margin: 1rem 0;
  justify-content: flex-start;
  align-items: center;
}

.social-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #fff;
  color: var(--burgundy);
  border: 2px solid var(--burgundy);
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 20px;
}

.social-icon:hover{
  background: var(--burgundy);
  color: #fff;
  transform: translateY(-2px);
}

/* Override footer link colors for social icons */
.site-footer .social-icon{
  color: var(--burgundy) !important;
  border-color: var(--burgundy) !important;
}

.site-footer .social-icon:hover{
  background: var(--burgundy) !important;
  color: #fff !important;
}

/* WordPress specific styles */
.wp-block-image img {
  max-width: 100%;
  height: auto;
}

.alignwide {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
  max-width: 100vw;
}

.alignfull {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
  max-width: 100vw;
  width: 100vw;
}

/* Mobile fixes for wide/full alignment */
@media (max-width: 900px) {
  .alignwide,
  .alignfull {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 900px){
  .nav-wrap{padding:20px 0}
  .logo{font-size:24px; margin-left:16px; letter-spacing:var(--logo-kerning-main)}
  .logo .bistro{font-size:18px; letter-spacing:var(--logo-kerning-bistro)}
  .menu-toggle{margin-right:16px}
  .about{grid-template-columns:1fr; padding: 0 1.5rem; margin-top: 2rem}
  .about-carousel{height:350px; padding: 1.5rem 1.5rem 0 1.5rem}
  .info-grid{grid-template-columns:1fr}
  .menu ul{
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .menu ul li{
    padding: 0.5rem 0;
    font-size: 1.1rem;
  }
  
  .menu ul li:before{
    left: -1rem;
    top: 1rem;
  }
  .gallery-content{grid-template-columns:1fr; gap:32px}
  .gallery-images{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 200px);
  }
  .signup-grid{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr; gap:16px; text-align:center}
  .social-icons{justify-content:center}
  
  /* Contact section social icons - left align on mobile */
  .card .social-icons{
    justify-content: flex-start !important;
  }
  nav{display:none; transition:none}
  .menu-toggle{display:flex; flex-direction:column; justify-content:space-between}
  .nav-open nav{display:block; position:absolute; top:100%; left:0; right:0; background:#fff; padding:20px 16px; border-bottom:1px solid #e8e2d8; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:1000; text-align:center; transition:none}
  .nav-open nav a{display:inline-block; padding:12px 0; border-bottom:1px solid #f5f5f5; font-size:1.1rem; background:#fff; position:relative; text-align:center; width:auto; margin:0 8px; transition:none}
  .nav-open nav a:not(.btn):after{display:none}
  .nav-open nav a:not(.btn):hover:after{display:none}
  .nav-open nav a:last-child{border-bottom:none}
  .nav-open nav .btn{display:inline-block; margin-top:8px; background:var(--resy); color:#fff; border-color:var(--resy); width:100%; text-align:center; padding:12px 16px}
  .hero .btn{display:inline-block; margin-top:14px; min-width:200px; text-align:center}
  
  /* Mobile hero adjustments for better breathing room */
.hero .inner{padding:3.5rem 1rem; transform: translateZ(50px) translateY(-20px)}
  
  /* Mobile preloader adjustments */
  .preloader-logo{font-size:2rem}
  .preloader-subtitle{font-size:0.9rem}
  .loading-spinner{width:32px; height:32px}
  
  /* Mobile hero background focal point */
  .hero-bg{background-position:top 25%}
  
  /* Mobile button fixes - prevent hover effects on touch devices */
  .btn{
    transform: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  }
  
  .btn:hover{
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Fix announcement banner overflow on mobile */
  .announce{
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 100vw;
    transform: translateZ(0);
  }
  
  .announce p{
    white-space: nowrap;
    animation: marquee-mobile 35s linear infinite;
    text-align: left;
    display: inline-block;
    padding-left: 100%;
    box-sizing: border-box;
    max-width: none;
  }
  
  @keyframes marquee-mobile {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  .btn.book{
    background: var(--resy) !important;
    color: #fff !important;
    border-color: var(--resy) !important;
    position: relative;
    z-index: 10;
    overflow: visible;
  }
  
  .btn.book:hover{
    background: var(--resy) !important;
    color: #fff !important;
    border-color: var(--resy) !important;
  }
  
  .btn:not(.book){
    background: #fff !important;
    color: var(--burgundy) !important;
    border-color: var(--burgundy) !important;
  }
  
  .btn:not(.book):hover{
    background: #fff !important;
    color: var(--burgundy) !important;
    border-color: var(--burgundy) !important;
  }
  
  /* Ensure buttons don't get cut off on mobile */
  .hero .btn{
    margin: 14px auto;
    display: block;
    width: auto;
    max-width: 280px;
    position: relative;
    z-index: 10;
  }
  
  /* Fix for any overlapping elements */
  .hero-content{
    position: relative;
    z-index: 5;
  }
}

/* Larger mobile screens (iPhone 14 Plus, etc.) */
@media (min-width: 430px) and (max-width: 900px){
  /* Removed conflicting hero inner adjustments */
  
  /* iPhone 14 Plus and similar large mobile screens */
  .hero h1{
    font-size: 2.5rem;
    line-height: 1.1;
  }
  
  .hero .sub{
    font-size: 1.1rem;
    line-height: 1.3;
  }
  
  .hero .location{
    font-size: 0.9rem;
    line-height: 1.4;
  }
}

/* iPhone 14 Plus specific adjustments */
@media (min-width: 430px) and (max-width: 500px){
  /* Removed conflicting hero inner adjustments */
  
  .hero h1{
    font-size: 2.3rem;
    line-height: 1.1;
  }
  
  .hero .sub{
    font-size: 1rem;
    line-height: 1.3;
  }
}

/* Tablet and narrow desktop - add more margin to navigation */
@media (min-width: 901px) and (max-width: 1400px){
  .nav-wrap{
    padding: 12px 32px;
  }
  
  .logo{
    margin-left: 0;
  }
  
  nav a{
    margin: 0 12px;
  }
  
  nav .btn{
    margin-left: 16px;
  }
}

/* IntersectionObserver Animation Styles */
.fade-in-up, .fade-in-left, .fade-in-right {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.fade-in-left {
  transform: translateX(-60px);
}

.fade-in-right {
  transform: translateX(60px);
}

/* Animation triggers */
.fade-in-up.is-visible,
.fade-in-left.is-visible,
.fade-in-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Legacy support for older browsers */
.fade-in-up.visible,
.fade-in-left.visible,
.fade-in-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Mobile animations - slide up with emphasis */
@media (max-width: 768px) {
  .fade-in-up, .fade-in-left, .fade-in-right {
    transform: translateY(60px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  }
  
  .fade-in-left {
    transform: translateY(60px);
  }
  
  .fade-in-right {
    transform: translateY(60px);
  }
  
  .fade-in-up.is-visible,
  .fade-in-left.is-visible,
  .fade-in-right.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Gallery mobile layout */
  .gallery-content {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 22px 0 48px 0;
    text-align: center;
  }
  
  .gallery-images {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 200px);
    gap: 12px;
  }
  
  .gallery-images img {
    height: 200px;
  }
}

/* Motion preferences */
*{transition:color .2s ease, background-color .2s ease, border-color .2s ease}
@media (prefers-reduced-motion: reduce){
  *{transition:none}
  .hero-bg{transition:none}
  .about-carousel-image{transition:none}
  .announce p{animation:none; text-align:center}
  .hero h1, .hero .sub{
    animation:none;
    background:none;
    color:#fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }
  .hero-bg, .hero .inner{transform:none !important}
  .fade-in-up, .fade-in-left, .fade-in-right{
    opacity:1; 
    transform:none; 
    will-change: auto;
    transition: none;
  }
  .fade-in-up.is-visible,
  .fade-in-left.is-visible,
  .fade-in-right.is-visible,
  .fade-in-up.visible,
  .fade-in-left.visible,
  .fade-in-right.visible {
    opacity: 1;
    transform: none;
  }
}

/* Touch device optimizations - disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn:hover{
    transform: none !important;
    box-shadow: none !important;
  }
  
  .btn.book:hover{
    background: var(--resy) !important;
    color: #fff !important;
    border-color: var(--resy) !important;
  }
  
  .btn:not(.book):hover{
    background: #fff !important;
    color: var(--burgundy) !important;
    border-color: var(--burgundy) !important;
  }
  
  .logo:hover{
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
  }
  
  nav a:not(.btn):hover{
    transform: none !important;
    text-shadow: none !important;
  }
  
  nav a:not(.btn):hover:after{
    width: 0 !important;
  }
} 
/* Remove sticky positioning from captcha widget */
.grecaptcha-badge,
div[class*="grecaptcha-badge"],
iframe[src*="recaptcha"] {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
}

/* Additional specificity for Contact Form 7 reCAPTCHA */
.wpcf7-form .grecaptcha-badge,
form .grecaptcha-badge {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
}

/* Hide reCAPTCHA widget and add legal copy to footer instead */
.grecaptcha-badge,
.grecaptcha-badge *,
iframe[src*="recaptcha"],
iframe[src*="google"],
div[class*="recaptcha"],
div[id*="recaptcha"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}