:root {
  --bar-green: #228C4F;
  --bar-navgreen: #255c33;
  --bar-black: #020202;
  --bar-gold: #f7b733;
  --bar-orange: #d16c00;
  --bar-text-light: #f5f5f5;
  --bar-text-muted: #c0c0c0;

  --heading-font: 'Uncial Antiqua', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================
   GLOBAL
   ========================= */
html, body {
  width: 100%;
  overflow-x: hidden;
 }

body.site-body {
  margin: 0;
  font-family: var(--body-font);
  color: var(--bar-text-light);
  background: linear-gradient(
    135deg,
    var(--bar-black) 0%,
    var(--bar-black) 40%,
    var(--bar-green) 100%
  );
}

/* Generic section titles */
.section-title {
  font-family: var(--heading-font);
  font-size: 1.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bar-gold);
}


.subsection-title {
  font-family: var(--heading-font);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Shared elevated panel */
.hero-content,
.about-block,
.hours-block,
.card,
.hero-video-wrapper,
.tour-video-wrapper {
  background: rgba(2, 2, 2, 0.9);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
}

.hero-text {
  font-family: var(--body-font);
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--bar-text-muted);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.about-block {
  padding: 2.25rem 2rem;
  border: 1px solid var(--bar-gold)
}

.about-block p {
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Hover lift for standard cards */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.95);
}

/* =========================
   HEADER / NAVBAR
   ========================= */

.site-header {
  position: relative;
  z-index: 1000;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.site-navbar {
  background: var(--bar-navgreen);
  border-bottom: 2px solid var(--bar-black);
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

/* Tighter container so brand sits closer to the left */
.site-navbar .container {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 1rem;
  padding-right: 1.25rem;
}

/* Brand area */
.site-navbar .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 1.25rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--bar-gold);
}

.site-navbar .navbar-brand img {
  height: 80px;            /* was 110px — better for mobile */
  width: auto;
  display: block;
}

/* Desktop: allow a larger logo */
@media (min-width: 992px) {
  .site-navbar .navbar-brand img {
    height: 110px;
  }
}

/* Apply Irish display font to headings (NOT nav links) */
.section-title,
.subsection-title,
.footer-title {
  font-family: var(--heading-font);
}

/* Nav links (default + all states) */
.site-nav-link,
.site-nav-link:visited {
  color: #fff !important;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-nav-link:hover,
.site-nav-link:focus,
.site-nav-link:active {
  color: var(--bar-gold) !important;
  text-decoration: none;
}

/* Larger nav font on desktop */
@media (min-width: 992px) {
  .site-navbar .navbar-nav .site-nav-link {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.2rem;
  }
}

/* Mobile navbar dropdown (collapsed menu) */
@media (max-width: 991.98px) {
  .site-navbar .container {
    position: relative;
  }

  .site-navbar-collapse {
    background: var(--bar-black);
    margin-top: 0.75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    box-sizing: border-box;
  }

  .site-navbar-collapse .site-nav-link {
    padding: 0.55rem 0;
    display: block;
  }

  .site-navbar-collapse .site-nav-cta {
    margin-top: 0.75rem;
  }

  /* Keep CTA pill sized on mobile */
  .site-navbar-collapse .btn-book-nav {
    width: auto;
    display: inline-block;
  }
}

/* Nav CTA button (ORDER NOW) */
.btn-book-nav {
  background-color: #020202;
  color: var(--bar-gold);
  border-radius: 999px;
  padding: 0.5rem 1.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid var(--bar-gold);
  transition: all 0.2s ease-in-out;
}

.btn-book-nav:hover,
.btn-book-nav:focus {
  background-color: var(--bar-gold);
  color: #020202;
  border-color: var(--bar-gold);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

/* Toggler */
.site-navbar-toggler {
  border: none;
}

.site-navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.site-navbar-toggler .fas {
  color: var(--bar-gold);
  font-size: 1.8rem;
}


/* =========================
   TOP SOCIAL BANNER
   ========================= */

.top-social-banner {
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  padding: 0.35rem 0;
}

.top-social-banner .container {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 1rem;
  padding-right: 1.5rem;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.top-social-text {
  color: var(--bar-text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.top-social-link {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 0.2s ease;
}

.top-social-link:hover,
.top-social-link:focus {
  color: var(--bar-gold);
  text-decoration: none;
}

/* Slightly tighten on phones */
@media (max-width: 575.98px) {
  .top-social-text { font-size: 0.8rem; }
  .top-social-link { font-size: 0.85rem; }
}

/* Keep the social banner on ONE line */
.top-social-banner .container {
  justify-content: space-between; /* text left, handle right */
}

/* Prevent internal wrapping */
.top-social-text,
.top-social-link {
  white-space: nowrap;
}

/* Allow the left text to shrink instead of wrapping */
.top-social-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep the handle visible */
.top-social-link {
  flex-shrink: 0;
}

/* Optional: on very small phones */
@media (max-width: 420px) {
  .top-social-banner .container {
    justify-content: center;
  }
  .top-social-text {
    font-size: 12px;
    display: inline;
    flex: 0 1 auto;
    overflow: visible;
    text-overflow: unset;
  }
  .top-social-link {
  font-size: 12px;
  }
}

/* Fallback placeholder */
.video-placeholder {
  background: rgba(0, 0, 0, 0.6);
  color: var(--bar-text-muted);
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
}

/* =========================
   ABOUT + HOURS
   ========================= */

.hours-block {
  padding: 2rem 1.5rem;
}

/* Base list reset */
.hours-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

/* Each row: day on left, time on right */
.hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hours-list li:last-child {
  border-bottom: none;
}

/* Day label */
.hours-day {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Time label */
.hours-time {
  font-size: 0.9rem;
  color: var(--bar-text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 1rem;
}

/* =========================
   MENU & DRINKS CARDS (HOME SECTION)
   ========================= */

.section-menu-drinks {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Layout gutter for cards in this section only */
.section-menu-drinks .col-md-6 {
  margin-bottom: 1.75rem;
}

/* Card base (home menu/drinks teaser cards) */
.section-menu-drinks .card-menu,
.section-menu-drinks .card-drinks {
  border-radius: 1.25rem;
  border: 1px solid var(--bar-gold);
  background: rgba(2, 2, 2, 0.9);
  min-height: 380px;
}

/* Image wrapper */
.section-menu-drinks .card-menu .card-image-wrapper,
.section-menu-drinks .card-drinks .card-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem 1.25rem 0 0;
}

.section-menu-drinks .card-menu .card-image-wrapper img,
.section-menu-drinks .card-drinks .card-image-wrapper img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

/* Card body (scoped) */
.section-menu-drinks .card-menu .card-body,
.section-menu-drinks .card-drinks .card-body {
  padding: 1.5rem;
}

/* Titles & text (scoped) */
.section-menu-drinks .card-menu .card-title,
.section-menu-drinks .card-drinks .card-title {
  font-family: var(--heading-font);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.section-menu-drinks .card-menu .card-text,
.section-menu-drinks .card-drinks .card-text {
  font-size: 0.95rem;
  color: var(--bar-text-muted);
}

/* Button on those cards */
.section-menu-drinks .btn-card {
  background-color: transparent;
  color: var(--bar-gold);
  border-radius: 999px;
  padding: 0.45rem 1.4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border: 1px solid var(--bar-gold);
}

.section-menu-drinks .btn-card:hover,
.section-menu-drinks .btn-card:focus {
  background-color: var(--bar-gold);
  color: var(--bar-black);
}

/* =========================
   UPCOMING EVENTS
   ========================= */

.section-events {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Make gutters bigger between event cards */
.section-events .row {
  margin-left: -1rem;
  margin-right: -1rem;
}

.section-events .col-md-4 {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1.75rem;
}

/* Taller event cards */
.section-events .card-event {
  min-height: 400px;
  border: 2px white solid;
}

.section-hr {
  background-color: var(--bar-green)
}

/* Event cards */
.card-event {
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(2, 2, 2, 0.9);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-event:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.95);
}

/* Event image fills top */
.card-event .event-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

/* Content area */
.event-overlay {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.event-title {
  font-family: var(--heading-font);
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.event-meta {
  font-size: 0.85rem;
  color: var(--bar-text-muted);
}

/* =========================
   VIRTUAL TOUR
   ========================= */

.section-tour {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* =========================
   FOOTER
   ========================= */

.footer-main {
  background-color: var(--bar-black);
  border-top: 2px solid var(--bar-green);
}

.footer-title {
  font-family: var(--heading-font);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.footer-main p,
.footer-main li {
  color: var(--bar-text-muted);
  font-size: 0.9rem;
}

.footer-link {
  color: var(--bar-text-light);
  text-decoration: none;
}

.footer-link:hover,
.footer-link:focus {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom-bar {
  background-color: #010101;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom-text {
  color: var(--bar-text-muted);
  font-size: 0.85rem;
}

.social-link {
  color: var(--bar-text-muted);
}

.social-link:hover,
.social-link:focus {
  color: #fff;
}

/* Center footer on small screens */
@media (max-width: 767.98px) {
  .footer-main {
    text-align: center;
  }
  .footer-bottom-bar {
    text-align: center;
  }
}

/* =========================
   MENU PAGES (FOOD & DRINKS)
   ========================= */

.section-menu-page {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Main panel on the left (list of items) */
.menu-panel {
  background: rgba(2, 2, 2, 0.9);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  padding: 2.25rem 2rem;
}

/* Section headings inside menu pages */
.menu-section {
  margin-bottom: 3rem;
}

.menu-section-title {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bar-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  padding-bottom: 0.75rem;
  margin-bottom: 1.75rem;
}

/* (legacy .menu-item-based layout is still here for any pages that use it) */

.menu-item {
  padding-bottom: 1rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
}

.menu-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.menu-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 0.25rem;
}

.menu-item-name {
  font-size: 0.98rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.menu-item-meta {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bar-text-muted);
}

.menu-item-price {
  font-size: 0.95rem;
  white-space: nowrap;
  margin-left: 1rem;
}

/* Description text under each item */
.menu-item-description {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--bar-text-muted);
}

/* Right-hand gallery column (photos) */
.menu-gallery {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.menu-gallery-item img {
  display: block;
  width: 100%;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  object-fit: cover;
  max-height: 260px;
}

/* Responsive tweaks for small screens */
@media (max-width: 575.98px) {
  .menu-item-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-item-price {
    margin-left: 0;
    margin-top: 0.25rem;
  }

  .menu-panel {
    padding: 1.75rem 1.25rem;
  }
}

/* =========================
   BOOKINGS PAGE
   ========================= */

.section-bookings {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section-bookings .section-intro {
  max-width: 560px;
  color: var(--bar-text-muted);
  font-size: 0.95rem;
}

/* Left gallery column */
.booking-gallery {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.booking-gallery-item img {
  display: block;
  width: 100%;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  object-fit: cover;
  height: auto;
  max-height: 260px;
}

/* Right form panel */
.booking-form-panel {
  background: rgba(2, 2, 2, 0.9);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  padding: 2.25rem 2rem;
  min-height: 700px;
}

/* Form controls in dark theme */
.booking-form .form-control,
.booking-form select,
.booking-form textarea {
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--bar-text-light);
  font-size: 1rem;
}

.booking-form .form-control::placeholder,
.booking-form textarea::placeholder {
  color: var(--bar-text-muted);
}

.booking-form .form-control:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: var(--bar-gold);
  box-shadow: 0 0 0 0.1rem rgba(247, 183, 51, 0.35);
  background-color: rgba(0, 0, 0, 0.9);
}

.booking-form label {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--bar-text-muted);
}

/* Full-width submit button */
.booking-form .btn-book-hero {
  width: 100%;
}

/* Mobile tweaks */
@media (max-width: 575.98px) {
  .booking-form-panel {
    padding: 1.75rem 1.25rem;
  }
}

@media (min-width: 992px) {
  /* CATERING: keep images from getting huge */
  #catering .booking-gallery-item img{
    height: auto;
    max-height: 240px;
    object-fit: cover;
  }
}

/* BOOKINGS ONLY: match form panel height to left photo column (desktop only) */
@media (min-width: 992px) {

  /* Make the two columns stretch to same height */
  #private-bookings .booking-split-row {
    align-items: stretch;
  }

  /* KEY FIX: make each column a flex container so children can fill height */
  #private-bookings .booking-split-row > .col-lg-6 {
    display: flex;
  }

  /* Ensure the inner blocks can expand to fill the column */
  #private-bookings .booking-gallery,
  #private-bookings .booking-form-panel {
    width: 100%;
  }

  /* Let the form panel actually stretch */
  #private-bookings .booking-form-panel {
    height: auto;      /* optional */
    min-height: 0;     /* overrides 700px on desktop so it can match left */
    display: flex;
    flex-direction: column;
  }

  /* Optional: push submit button to the bottom so it looks “anchored” */
  #private-bookings .booking-form {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  #private-bookings .booking-form button[type="submit"] {
    margin-top: auto;
  }

  /* Your left side equalize rules can stay */
  #private-bookings .booking-gallery {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  #private-bookings .booking-gallery-item {
    flex: 1 1 0;
  }

  #private-bookings .booking-gallery-item img {
    height: 100%;
    max-height: none; /* overrides the 260px cap on desktop */
    object-fit: cover;
  }
}


/* =========================
   HAUNTED PAGE – VIDEOS
   ========================= */

.section-haunted-videos {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.haunted-video-card {
  background: rgba(2, 2, 2, 0.9);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  margin-bottom: 1.75rem;
}

.haunted-video-meta {
  padding: 1rem 1.5rem 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.haunted-video-title {
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.haunted-video-stats {
  font-size: 0.85rem;
  color: var(--bar-text-muted);
  margin: 0;
}

/* =========================
   HAUNTED PAGE – SCRAPBOOK COLLAGE
   ========================= */

.section-haunted-gallery {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.ghost-collage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

/* Photo "polaroid" cards */
/* =========================
   HAUNTED PAGE – SCRAPBOOK COLLAGE (ALIGN IMAGES)
   ========================= */

/* Make each card a consistent layout */
.ghost-photo-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #000;
}

/* Force every image into the same “frame” size */
.ghost-photo-card img{
  width: 100%;
  height: 400px;
  aspect-ratio: 4 / 3;   /* keeps all images same shape */
  object-fit: cover;     /* crops instead of stretching */
  border-radius: 0.75rem;
  margin-bottom: 0.6rem;
  background: #000;      /* nice if an image is slow to load */
}

/* Fallback for older browsers (optional) */
@supports not (aspect-ratio: 1 / 1){
  .ghost-photo-card img{
    height: 240px;
  }
}

/* Keep captions aligned consistently */
.ghost-photo-caption{
  margin-top: auto;      /* pushes caption to bottom if cards differ */
  padding-left: 1em;
}


/* Subtle tilt for scrapbook feel */
.ghost-photo-card.tilt-left {
  transform: rotate(-2.5deg);
}

.ghost-photo-card.tilt-right {
  transform: rotate(2.5deg);
}

/* Straighten + lift on hover */
.ghost-photo-card:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.98);
}

/* Responsive: fewer columns on small screens */
@media (max-width: 991.98px) {
  .ghost-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .ghost-collage {
    grid-template-columns: 1fr;
  }
}

/* =========================
   AWARDS & PRESS
   ========================= */

.section-awards {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Use the same elevated panel look as other cards */
.award-card {
  background: rgba(2, 2, 2, 0.9);
  border-radius: 1.25rem;
  border: 1px solid var(--bar-gold);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.award-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.95);
}

.award-card-body {
  padding: 1.75rem 1.5rem;
}

.award-title {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
}

.award-source {
  font-size: 0.9rem;
  color: var(--bar-text-muted);
  margin-bottom: 0.15rem;
}

.award-year {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bar-gold);
  margin-bottom: 0.75rem;
}

.award-text {
  font-size: 0.9rem;
  color: var(--bar-text-light);
  margin-bottom: 0;
}

/* =========================
   HERO
   ========================= */

.section-hero {
  padding-top: 5.5rem;   /* was 4rem – makes hero taller */
  padding-bottom: 5.5rem;
}

.hero-content {
  padding: 2.25rem;
}

/* Hero text size */
.hero-title {
  font-size: clamp(2.0rem, 6.5vw, 3.2rem);
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

@media (max-width: 575.98px){
  .section-hero{
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .hero-content{
    padding: 1.6rem 1.25rem;
  }

  .hero-title{
    letter-spacing: 0.12em;
  }
}

.hero-tagline {
  color: var(--bar-text-muted);
  margin-bottom: 1rem;
}

/* Hero button */
.btn-book-hero {
  background-color: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 0.5rem 1.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid var(--bar-gold);
}


.btn-book-hero:hover,
.btn-book-hero:focus {
  background-color: var(--bar-gold);
  color: var(--bar-black);
}


.btn-vt-book {
  background-color: var(--bar-black);
  color: #fff;
  border-radius: 999px;
  padding: 0.5rem 1.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid var(--bar-gold);
}

.btn-vt-book:hover,
.btn-vt-book:focus {
  background-color: var(--bar-gold);
  color: var(--bar-black);
}


/* Hero / tour videos */
.hero-video-wrapper,
.tour-video-wrapper {
  border-radius: 1.25rem;
  overflow: hidden;
}

.hero-video-wrapper video,
.tour-video-wrapper video {
  display: block;
  width: 100%;
}

/* Desktop: overlap hero text slightly on top of the video */
/* Desktop: NO overlap, keep a clean gap */
@media (min-width: 992px) {
  .section-hero .container { overflow: visible; }

  .hero-row { position: relative; }

  .hero-content {
    position: relative;
    z-index: 2;
  }

  .hero-video-wrapper {
    position: relative;
    z-index: 1;
    margin-left: 0;          /* was -3rem */
    min-height: 380px;
  }

  /* optional: make the gap a touch bigger */
  .section-hero .col-lg-6:last-child {
    padding-left: 2rem;
  }
}

/* =========================
   MENU ROW STYLING
   ========================= */

/* Each item is one row: thumbnail | text + price */
.menu-item-row {
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.menu-item-row:last-child {
  border-bottom: none;
}

/* Thumbnail on the left */
.menu-item-thumb {
  flex: 0 0 auto;
}

.menu-item-thumb img {
  width: 96px;
  height: 96px;
  border-radius: 0.75rem;
  object-fit: cover;
  display: block;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.8);
}

/* Right side: text + price */
.menu-item-main {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.menu-item-text {
  flex: 1 1 auto;
}

/* Name + description */
.menu-item-name {
  font-weight: 600;
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-bottom: 0.25rem;
}

.menu-item-desc {
  font-size: 0.9rem;
  color: var(--bar-text-muted);
  margin: 0;
}

/* Price aligned to the right */
.menu-price {
  font-weight: 700;           /* a bit bolder */
  font-size: 1.05rem;         /* slightly larger than before */
  margin-left: 1.5rem;        /* keep the gap from the text */
  white-space: nowrap;
}
/* Mobile: stack under the image */
@media (max-width: 575.98px) {
  .menu-item-row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .menu-item-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-price {
    margin-left: 0;
    margin-top: 0.35rem;
  }
}

/* =========================
   VIRTUAL TOUR – PORTRAIT VIDEO
   ========================= */

/* Frame for the vertical video */
.tour-video-wrapper-portrait {
  width: 100%;          /* nice, cinematic width on desktop */
  margin: 0 auto;            /* center in the container */
  background: rgba(2, 2, 2, 0.9);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  padding: 0.75rem;          /* small inner frame around the video */
  height: auto;
  max-height: 600px;
}

/* Let the video keep its portrait shape but still feel big */
.tour-video-wrapper-portrait video {
  width: 100%;               /* fill the wrapper width */
  height: auto;              /* keep aspect ratio */
  border-radius: 0.9rem;
  display: block;
}

/* On small screens full-width */
@media (max-width: 575.98px) {
  .tour-video-wrapper-portrait {
    max-width: 100%;
    padding: 0.5rem;

    /* make it feel bigger on phones */
    min-height: 70vh;          /* try 60–75vh */
    max-height: none;          /* override the 600px cap on mobile */
  }

  .tour-video-wrapper-portrait video {
    height: 70vh;              /* match the wrapper’s min-height */
    width: 100%;
    object-fit: cover;         /* crop nicely vs shrinking */
  }
}



/* =========================
   CTA BUTTON ROW (INDEX)
   ========================= */

.section-cta-row {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.btn-cta-contrast {
  background: rgba(255, 255, 255, 0.10);      /* visible on black */
  border: 3px solid var(--bar-green); /* gold-ish border */
  color: #ffffff;                              /* default text */
  border-radius: 999px;
  padding: 0.9rem 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-cta-contrast:hover,
.btn-cta-contrast:focus {
  color: var(--bar-gold);                      /* text turns gold */
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

/* =========================
   SPECIALS PAGE
   ========================= */


.specials-header{
  position: relative;
  overflow: hidden;

  background: rgba(2, 2, 2, 0.92);
  border-radius: 1.25rem;
  padding: 1.6rem 1.75rem;
  text-align: center;

  border: 1px solid var(--bar-gold);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.75);
}

.specials-header::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:180%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(247,183,51,0.18) 45%,
    transparent 100%
  );
  transform: rotate(18deg);
  animation: specialsSheen 6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes specialsSheen{
  0%   { left:-70%; opacity:0; }
  15%  { opacity:1; }
  45%  { left:120%; opacity:0; }
  100% { left:120%; opacity:0; }
}

.specials-title{
  position: relative;
  z-index: 1;
  font-family: var(--heading-font);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0;
  color: var(--bar-gold);
  font-weight: 900;
  font-size: 2rem;
}

.specials-header .hero-tagline{
  position: relative;
  z-index: 1;
  color: rgba(245,245,245,0.90);
  font-size: 1.05rem;
  margin-top: 0.35rem;
}



.section-specials {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.specials-panel {
  background: rgba(2, 2, 2, 0.9);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  padding: 2.25rem 2rem;
}

.specials-grid {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Desktop layouts */
.specials-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.specials-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.specials-card {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(247, 183, 51, 0.22);
  border-radius: 1.1rem;
  padding: 1.25rem 1.1rem;
  min-height: 130px;
}

.specials-day {
  font-family: var(--heading-font);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  color: var(--bar-gold);
  margin-bottom: 0.65rem;
  text-decoration: underline;
}

.specials-deal {
  color: var(--bar-text-light);
  font-size: 1rem;
  line-height: 1.55;
  font-family: var(--body-font);
}


.specials-note {
  color: var(--bar-text-muted);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* Tablet */
@media (max-width: 991.98px) {
  .specials-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .specials-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .specials-panel {
    padding: 1.75rem 1.25rem;
  }
  .specials-grid-4,
  .specials-grid-3 {
    grid-template-columns: 1fr;
  }
}


/* =========================
   WEEKLY SPECIALS – BEER LOGOS GRID
   ========================= */

.beer-logos-panel{
  background: rgba(2, 2, 2, 0.9);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  padding: 2.25rem 2rem;
}

.beer-logos-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Make each logo tile wider (landscape) */
.beer-logo-card{
  aspect-ratio: 16 / 9;     /* was effectively ~1/1 */
  min-height: 140px;        /* optional safety */
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--bar-green)
}

/* Fill the tile */
.beer-logo-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* keeps them filling; will crop */
  display: block;
}


/* Tablet */
@media (max-width: 991.98px){
  .beer-logos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: stack */
@media (max-width: 575.98px){
  .beer-logos-panel{
    padding: 1.75rem 1.25rem;
  }
  .beer-logos-grid{
    grid-template-columns: 1fr;
  }
  .beer-logo-card{
    min-height: 120px;
    min-width: 200px;
  }
}

/* =========================
   SPECIALS: TRIANGLE BULLETS
   Put this at the END of your CSS
   ========================= */

.section-specials .specials-card .specials-deal{
  position: relative;
  padding-left: 1.35rem;   /* space for triangle */
  margin: 0.25rem 0;       /* optional: nicer spacing */
}

.section-specials .specials-card .specials-deal::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;             /* aligns triangle with first text line */
  transform: translateY(-50%);

  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--bar-green);
}

.section-specials .specials-card:hover .specials-deal::before{
  border-left-color: var(--bar-gold);
}



/* Keep nav items on the BODY font (not the Uncial heading font) */
.site-navbar .site-nav-link,
.site-navbar .site-nav-link:visited,
.site-navbar .site-nav-link:hover,
.site-navbar .site-nav-link:focus,
.site-navbar .site-nav-link:active {
  font-family: var(--heading-font) !important;
}