/* ===== Fancy Venue (WRS) ===== */
.fancyvenue { --bg:#000; --fg:#fff; --accent:#e21825; --dk:#0c0c0c; }
.fancyvenue { background:var(--bg); color:var(--fg); }
.fv-wrap { max-width:1100px; margin:0 auto; padding:24px 16px 56px; text-align:center; }

/* base reveal (overridden per element on .in) */
.fv-seq { opacity:0; transform: translateY(18px) rotate(-0.5deg); will-change: transform, opacity; }

/* Title – rotate 0 → 1deg */
@keyframes fv-title-pop {
  0%   { transform: scale(.9) rotate(0deg); opacity:0; }
  80%  { transform: scale(1.02) rotate(.6deg); opacity:1; }
  100% { transform: scale(1) rotate(1deg); opacity:1; }
}

.fv-title {
  font-family:'blackno7blacklabel',system-ui,sans-serif;
  text-transform:lowercase;
  color:var(--accent);
  font-size: clamp(32px,6vw,48px);
  margin:12px 0 18px;
}

.fv-title.in {
  animation: fv-title-pop 0.9s ease-out forwards;
}


.fv-headswap {
  position: relative;
  display: grid;
  place-items: center;
  height: auto;           /* JS will set this explicitly */
  min-height: 0;          /* remove old min-height */
  margin-bottom: 10px;    /* tighter gap under headlines */
}

.fv-headswap .fv-headline{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;    /* headline sits top/center */
  text-align: center;
  opacity: 0;
  filter: blur(0);
  pointer-events: none;         /* disabled by default - JS will manage this */
  z-index: 0;                   /* sits under the active one - JS will manage this */
}


/* headline size (+20%), lowercase, white */
.fv-headline{
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  text-transform: lowercase;
  color: #fff;
  line-height: 1.02;
  font-size: clamp(60px, 11.5vw, 92px);
  margin: 0;
}

.fv-headline a{
  color: inherit;
  text-decoration: none;
}

/* small subline */
.fv-headline small{
  display: block;
  margin-top: 6px;
  font-family: 'chandler-42-regular', serif;
  font-size: clamp(16px, 3vw, 20px);
}

/* angles */
.mod-cocktails { transform: rotate(-2deg); }
.mod-express   { transform: rotate( 1deg); }

/* <small> rotates AWAY from parent */
.mod-cocktails small { transform: rotate( 1deg); }
.mod-express   small { transform: rotate(-1deg); }

/* Keyframes: fade/blur only at transitions; rotate from 0° -> final on fade-in */
@keyframes fvCocktails {
  0%   { opacity:0; filter:blur(6px); transform:rotate(0deg); }
  6%   { opacity:1; filter:blur(0);   transform:rotate(-2deg); }
  44%  { opacity:1; filter:blur(0);   transform:rotate(-2deg); }
  50%  { opacity:0; filter:blur(4px); transform:rotate(-2deg); }
  100% { opacity:0; filter:blur(0);   transform:rotate(-2deg); }
}
@keyframes fvExpress {
  0%,49% { opacity:0; filter:blur(0);   transform:rotate( 1deg); }
  50%    { opacity:0; filter:blur(6px); transform:rotate(0deg); }
  56%    { opacity:1; filter:blur(0);   transform:rotate( 1deg); }
  94%    { opacity:1; filter:blur(0);   transform:rotate( 1deg); }
  100%   { opacity:0; filter:blur(4px); transform:rotate( 1deg); }
}

/* Run both in sync (single duration); enable clicks & raise z-index for the visible one */
.mod-cocktails.in { 
  animation: fvCocktails 5s ease-in-out infinite; 
}

.mod-express.in { 
  animation: fvExpress 5s ease-in-out infinite; 
}
/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .fv-headswap{ min-height: auto; }
  .fv-headswap .fv-headline{ position: static; opacity:1; filter:none; transform:none; pointer-events:auto; }
}



/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mod-cocktails.in, .mod-express.in { animation: none; opacity: 1; visibility: visible; }
}

/* =========================
   HOURS + ADDRESS — CLEAN
   ========================= */
.fv-info{
  /* keep this whole unit off the H2 above */
  margin: clamp(16px, 3vw, 32px) auto 10px;
  max-width: 980px;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(14px, 3vw, 24px);
}

/* -------- Hours card -------- */
.fv-hours{
  background: #0b0b0b;
  border: 2px solid var(--accent);
  transform: rotate(-1.2deg);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding: clamp(18px, 2.4vw, 24px);   
  width: clamp(360px, 64vw, 720px);    
  min-height: 200px;
  gap: clamp(12px, 2vw, 18px);  /* ADD THIS LINE for consistent spacing */
}

.fv-hours p{
  margin: 0;
  font-family: 'chandler-42-regular', serif;
  line-height: 1.35;
}

.fv-copy    { opacity:.95; }
.fv-under18 { margin-top:auto; opacity:.9; } /* pinned to bottom */

/* BIG CTA */
.fv-book{
  display:inline-block;
  width:min(560px, 100%);
  margin: 0;
  padding: clamp(14px, 1.8vw, 18px) clamp(18px, 2.4vw, 24px);
  background: var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  text-decoration:none;
  text-transform:lowercase;
  font-family:'blackno7blacklabel', system-ui, sans-serif;
font-size: clamp(22px, 3.4vw, 26px);  line-height:1;
  transform: rotate(-1.5deg);
  transition: transform .15s ease;
}
.fv-book:hover{ transform: rotate(0deg);
    text-decoration:none;
 }
 
 /* Make parking rule more specific */
 .fv-hours .fv-parking {
   margin: 0;
   font-family: 'blackno7blacklabel', system-ui, sans-serif !important;
   text-transform: lowercase;
   font-size: clamp(14px, 2.8vw, 18px);
   animation: fv-parking-flash 2s ease-in-out infinite;
 }

 .fv-hours .fv-parking a {
   color: inherit;
   text-decoration: none;
   font-family: inherit; /* Inherit the blackno7 font */
 }

 .fv-hours .fv-parking a:hover {
   color: var(--accent);
   text-decoration: none;
 }

 /* Flashing animation */
 @keyframes fv-parking-flash {
   0%, 50%, 100% { opacity: 1; }
   25%, 75% { opacity: 0.6; }
 }

/* -------- Red address stamp (in flow) -------- */
.fv-stamp{
  background: var(--accent);
  color: #fff;                         /* black text (not white) */
  font-family: 'chandler-42-regular', serif;
  padding: 12px 16px;
  transform: rotate(1.2deg);           /* opposite tilt */
  white-space: nowrap;

  /* overlap the hours card slightly without leaving flow */
  align-self: flex-end;                 /* ride the bottom edge of the row */
  margin-left: -18px;                   /* bite into right edge */
  margin-top: 12px;                     /* sit near card’s bottom */
}

@media (min-width: 980px){
  .fv-info{
    flex-direction: row;
  }
  .fv-stamp{
    /* stronger overlap at the bottom-right corner */
    margin-left: -60px;  /* CHANGE: from -22px to -60px for more overlap */
    margin-top: 18px;
    transform: rotate(1.2deg);
  }
}

@media (max-width: 979.98px){
  .fv-info{
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .fv-hours{
    width: min(94vw, 760px);
  }
  .fv-stamp{
    /* bigger and more overlap */
    font-size: clamp(16px, 4.5vw, 20px);  /* CHANGE: bigger text */
    padding: 12px 16px;                   /* CHANGE: more padding */
    max-width: 70vw;                      /* CHANGE: allow wider */
    margin-left: auto;                    
    margin-top: -25px;                    /* CHANGE: from -14px to -40px for more overlap */
    white-space: normal;               
  }
}


/* Live music – pulse 1→1.04 with fixed -1deg rotation */
@keyframes fv-pulse { 0%,100%{ transform: rotate(-1deg) scale(1); } 50%{ transform: rotate(-1deg) scale(1.04); } }

.fv-live{
  margin: 24px auto 24px;  /* Center it */
  color: var(--accent);
  font-family: 'blackno7blacklabel', system-ui, sans-serif; 
  text-transform: lowercase;
  font-size: clamp(32px, 8vw, 44px);
  transform: rotate(-1deg);
  text-align: center;
}

.fv-live small{ 
  display: block;  /* Back to block, on its own line */
  color: var(--accent);  /* Keep red */
  font-family: 'chandler-42-regular', serif;
  font-size: clamp(14px, 3vw, 20px);
  line-height: 1;
  transform: rotate(2deg);  /* Keep tilted */
}

.fv-live.in{ animation: fv-pulse 2.2s ease-in-out infinite; }

/* Link styling for live music */
.fv-live a {
  color: inherit;           /* Keep red color from parent */
  text-decoration: none;    /* No underlines */
  display: block;           /* Maintain block behavior */
  transition: color .2s ease;
}

.fv-live a:hover {
  color: #fff;              /* White on hover */
  text-decoration: none;    /* Still no underlines */
}

.fv-live a small {
  color: inherit;           /* Inherit from link, not parent */
}

/* Buttons - vertical stack */
.fv-btnrow{ 
  margin: 20px auto;
  max-width: 980px;
  text-align: center;
}

/* Base button styles */
.fv-btn{
  display: block;
  margin: 16px auto;
  text-decoration: none;
  color: #fff;
  border: 2px solid var(--accent); 
  text-transform: lowercase;
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  background: #000;
  transition: transform .15s ease, background-color .15s ease;
  line-height: 1;
  text-align: center;
}

/* Main buttons (Food & Drinks) - wider */
.fv-btn-main{
  width: clamp(320px, 60vw, 500px);
  padding: clamp(14px, 1.8vw, 18px) clamp(18px, 2.4vw, 24px);
  font-size: clamp(22px, 3.4vw, 26px);  /* Increased from 18px to 20px */
}

/* Minor button (Non-Gluten) - narrower */
.fv-btn-minor{
  width: clamp(280px, 50vw, 420px);
  padding: clamp(10px, 1.4vw, 14px) clamp(14px, 1.8vw, 18px);
  font-size: clamp(14px, 2.6vw, 20px);
}

/* Button 1 (Food Menu) - stays centered, angled left */
.fv-btn-main:first-child.in { 
  transform: rotate(-1.8deg);
}

/* Button 2 (Drinks List) - shifts right, angled right */
.fv-btn-main:last-child.in { 
  transform: rotate(1.5deg);
  margin-left: auto;
  margin-right: clamp(0px, 10vw, 120px);
}

/* Button 3 (Non-Gluten) - shifts right, slight angle */
.fv-btn-minor.in{
  transform: rotate(-0.8deg);
  margin-left: auto;
  margin-right: clamp(0px, 10vw, 120px);
}

/* Hover effects - straighten all buttons */
.fv-btn-main:first-child.in:hover { 
  transform: rotate(0deg);
  background: #111;
  text-decoration: none;
}

.fv-btn-main:last-child.in:hover { 
  transform: rotate(0deg);
  background: #111;
  text-decoration: none;
  margin-left: auto;
  margin-right: clamp(0px, 10vw, 120px);
}

/* Make this more specific than .fv-seq.in */
a.fv-btn-minor.in {
  transform: rotate(-0.8deg);
  margin-left: auto;
  margin-right: clamp(0px, 10vw, 120px);
}

a.fv-btn-minor.in:hover {
  transform: rotate(0deg);
  background: #111;
  text-decoration: none;
  margin-left: auto;
  margin-right: clamp(0px, 10vw, 120px);
}

/* Mobile: center all buttons */
@media (max-width: 768px){
  .fv-btn-minor.in,
  .fv-btn-main:last-child.in {
    margin-left: auto;
    margin-right: auto;
  }
  
  .fv-btn-main:last-child.in:hover,
  .fv-btn-minor.in:hover {
    margin-left: auto;
    margin-right: auto;
  }
}


/* Takeaway block - align with drinks button */
.fv-takeaway{ 
  margin-top: 20px;
  margin-left: auto;
  margin-right: clamp(0px, 10vw, 120px);  /* Same alignment as drinks button */
  max-width: clamp(320px, 60vw, 500px);   /* Same width as main buttons */
  text-align: center;
  background: #0b0b0b;
    border: 2px solid var(--accent);
    padding: clamp(16px, 2.4vw, 22px);
    transform: rotate(1.2deg);
}

/* Add takeaway heading */
.fv-takeaway h3 {
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  text-transform: lowercase;
  color: var(--accent);
  font-size: clamp(28px, 6vw, 36px);  /* Smaller than live music */
  margin: 0 0 12px 0;
  transform: rotate(-1.2deg);  /* Slight tilt */
}

/* Call to order line - tilted */
.fv-takeaway p{ 
  font-family:'chandler-42-regular',serif; 
  margin:0 0 12px; 
  transform: rotate(-0.8deg);  /* Tilt the text line */
}

.fv-takeaway .hl{ 
  color: var(--accent); 
  text-decoration: none;
}

.fv-takeaway .hl:hover{ 
  text-decoration: underline;
  color: var(--fg); 
  
}
/* Order button - prominent like book a table */
.fv-order{
  display: block;
  width: 100%;
  margin: 0 auto 12px;
  padding: clamp(14px, 1.8vw, 18px) clamp(18px, 2.4vw, 24px);
  font-size: clamp(22px, 3.4vw, 26px);  /* Increased from 18px to 20px */
  text-decoration: none; 
  text-transform: lowercase;
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  background: var(--accent); 
  color: #fff; 
  border: 2px solid var(--accent);
  transform: rotate(-1.8deg); 
  transition: transform .15s ease;
  line-height: 1;
}

.fv-order:hover{ 
  transform: rotate(0deg); 
  background: #111;
  text-decoration:none;
}

/* Availability line */
.fv-availability{ 
  margin-top: 10px; 
  font-family: 'chandler-42-regular', serif; 
  opacity: .95; 
}

/* Mobile: center everything */
@media (max-width: 768px){
  .fv-takeaway {
    margin-left: auto;
    margin-right: auto;
    width: min(94vw, 760px);  /* Same as .fv-hours on mobile */
  }
  
  .fv-btn-minor.in,
  .fv-btn-main:last-child.in {
    margin-left: auto;
    margin-right: auto;
  }
  
  .fv-btn-main:last-child.in:hover,
  .fv-btn-minor.in:hover {
    margin-left: auto;
    margin-right: auto;
  }
}
/* Utility when .in is added by JS for items without special keyframes */
.fv-seq.in { opacity:1;  }