/* HERO ON HOME PAGE ONLY */
/* Hero Image - Always show bottom, clip from top */
.hero-image {object-fit: cover; object-position: center bottom; width: 100%; height: 100%;}

/* Responsive hero height - large viewports */
.hero-section {min-height: 100vh;}
@media (min-width: 1024px) {.hero-section {min-height: 100vh;}}
@media (max-height: 700px) {.hero-section {min-height: 95vh;}}

/* ---- Hero at 1024px and below: natural image height, CTAs over photo bottom ---- */
@media (max-width: 1024px) {#hero-hme {min-height: unset; height: auto; display: block; padding-top: 0;}
#hero-img-wrap {position: relative; inset: auto;}
.hero-image {width: 100%; height: auto; object-fit: unset; display: block;}
#hero-flex-grow {display: none;}
/* CTAs overlap the bottom of the photo */
#hero-ctas {position: relative; z-index: 10; flex-direction: row; margin-top: -72px; margin-bottom: 0; padding-bottom: 15px;}
#hero-ticker-wrap {margin-top: 0;}
}

/* At 480px and below: stack buttons, drop them below the photo naturally */
@media (max-width: 480px) {#hero-ctas {flex-direction: column; margin-top: 0; padding-top: 16px; padding-bottom: 0;}}

/* ===== Small phones (max 600px): solid white header bar, hero photo shifted below ===== */
@media (max-width: 600px) {
/* Logo can grow now that it no longer sits over the photo */
#logo-wrap  {height: 110px;}
#logo-large {height: 110px;}
/* Solid white header instead of the gradient-over-photo, with trimmed padding */
#navbar {background-color: #fff; padding-top: 0.625rem; padding-bottom: 0.625rem;}
#nav-gradient {display: none;}
/* White band behind the logo/toggle so no black sliver shows while scrolling */
#hero-hme::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 130px; background: #fff; z-index: 5; pointer-events: none;}
/* Push the hero down so the photo begins flush below the header bar */
#hero-hme {padding-top: 130px;}
/* Black toggle, no shadow, so it contrasts on the white bar */
#mobile-toggle {color: #020202;}
#mobile-toggle .bars {filter: none;}
}

/* When the Home Pg tavern/stay sections stack (below md), drop the text column's top
   padding so each heading sits close to its photo */
@media (max-width: 767px) {#tavern .py-8, #stay .py-8 {padding-top: 0;}}

/* overlay shadow */
#hero-hme::after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; 
background: linear-gradient(180deg,rgba(0,0,0,0.30) 0%,rgba(0,0,0,0.00) 15%);}
/* end hero on home pg */



/* ============================================================
   ANNOUNCEMENT TICKER
   ============================================================ */
/* Shared ticker styles */
.ticker-wrap {overflow: hidden; background-color: #000; padding: 15px 18px;}
.ticker-track {display: -webkit-box; display: -ms-flexbox; display: flex; white-space: nowrap; -webkit-animation: ticker-scroll 10s linear infinite; animation: ticker-scroll 10s linear infinite;}
.ticker-track:hover {-webkit-animation-play-state: paused; animation-play-state: paused;}
.ticker-item {font-size: 1.25rem; font-weight: 500; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; padding-right: 5rem; -webkit-user-select: none; user-select: none;}
.ticker-divider {color: #d31212; font-size: 1.25rem; font-weight: 500; padding-right: 5rem; -webkit-user-select: none; user-select: none;}
@-webkit-keyframes ticker-scroll {
0% {-webkit-transform: translateX(0); transform: translateX(0);}
100% {-webkit-transform: translateX(-50%); transform: translateX(-50%);}
}
@keyframes ticker-scroll {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}
/* Full-width version — edge to edge */
.ticker-wrap-full {overflow: hidden; background-color: #000; padding: 0; width: 100%;}

/* ---- Ticker pause button ---- */
.ticker-pause-btn { float: right; background: transparent; border: 1px solid rgba(255,255,255,0.35); color: #bbb; font-size: 0.7rem; line-height: 1.5; padding: 8px 10px 3px;
margin: 9px 6px 5px 10px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 2px;}
.ticker-pause-btn:hover, .ticker-pause-btn:focus {background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.6); outline: 2px solid rgba(255,255,255,0.5);
outline-offset: 2px;}

/* Reduced motion: pause the JS-driven scroll via inline script;
   also suppress any CSS transitions within the ticker */
@media (prefers-reduced-motion: reduce) {
.p7hls-wrapper {transition: none !important;}
.p7hls-item {transition: none !important;}
}

/* Home page CTA button base — sitewide variants (.cta-red, .cta-wht) are in the sitewide CSS */
.cta-hme {padding: 1rem 2.5rem; font-weight: bold; font-size: 1.125rem; line-height: 1.125; text-transform: uppercase; letter-spacing: 0.05em; transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
min-width: 220px; border-style: none; text-decoration: none !important; text-align: center; cursor: pointer; display: inline-block;}

/* Hero CTA overrides at <=1024px (home page only) */
@media (max-width: 1024px) {#hero-ctas .cta-hme {padding-left: 1.5rem; padding-right: 1.5rem; min-width: 160px;}}
.pix-txt {width: 100%;}

#stay .hours-block {border: 1px solid #fff;}


/* ============================================================
   VIDEO PANEL
   ============================================================ */
.wst-video-panel {background-color: #faf59a; border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem;}

/* At the two-column breakpoint the panel bleeds out to the container's full width
   (cancelling the 1.5rem gutter) and .wst-video-inner puts that gutter back, so the
   grid columns inside match #tavern and #stay to the pixel. Do not change the inner
   padding — extra breathing room for the copy goes on .wst-video-text instead, so the
   grid geometry (and the thumbnail's centre line) stays put */
@media (min-width: 768px) {
.wst-video-panel {margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 0; padding-right: 0;}
.wst-video-inner {padding-left: 1.5rem; padding-right: 1.5rem;}
.wst-video-text {padding-left: 1rem;}
}
.wst-video-text h2 {text-wrap: balance;}
.wst-video-text p {margin-bottom: 0;}
.wst-video-cap {margin-top: 1.25rem; font-size: 0.9375rem; font-style: italic; line-height: 1.4;}
/* Thumbnail capped at its native 480 width and centred in its column, which puts its
   centre line on the centre of the .wst-photo in #stay below */
.wst-video-media {max-width: 480px; margin-left: auto; margin-right: auto;}
.video-thumb {position: relative; display: block; overflow: hidden; border-radius: 3px; background-color: #000; line-height: 0;}
/* The hq2 source is 480x360 (4:3) with 45px letterbox bars; cover-cropping to 16:9
   trims exactly those bars and leaves the full 480x270 picture area */
.video-thumb img {display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;}

/* Play badge, bottom-centred in translucent YouTube red so it clears the action */
.video-thumb::before {content: ''; position: absolute; left: 50%; bottom: 14px; width: 62px; height: 44px; margin-left: -31px; background-color: rgba(255,0,0,0.75); border-radius: 10px; transition: background-color 0.18s ease;}
.video-thumb::after {content: ''; position: absolute; left: 50%; bottom: 25px; width: 0; height: 0; margin-left: -6px; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 18px solid #fff;}
.video-thumb:hover::before, .video-thumb:focus::before, .video-thumb:focus-visible::before {background-color: #ff0000;}
.video-thumb:focus {outline: 3px solid #d31212; outline-offset: 3px;}
.video-thumb:focus-visible {outline: 3px solid #d31212; outline-offset: 3px;}
@media (max-width: 479px) {
.video-thumb::before {bottom: 10px; width: 50px; height: 36px; margin-left: -25px; border-radius: 8px;}
.video-thumb::after {bottom: 19px; margin-left: -5px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 15px solid #fff;}
}
.wst-video-link {margin: 0.875rem 0 0; font-size: 1.0625rem; font-weight: bold; line-height: 1.3; text-align: center;}
.wst-video-link a {color: #d31212;}

@media (prefers-reduced-motion: reduce) {
.video-thumb::before {transition: none;}
}