/*Enter Custom CSS Here*/

/* =========================================
   Paper / noise texture
   ========================================= */
body,
.home-page-bg section:nth-child(3),
.internal-page-section,
.body-content,
.noise-bg {
  background-image: url("https://media-library-activestorage-production.s3.us-east-2.amazonaws.com/vxed6sfqgq5ys700a4936u139l1y");
  background-repeat: repeat;
  background-position: top left;
}

body,
.home-page-bg section:nth-child(3),
.internal-page-section,
.body-content {
  background-color: var(--color-3);
}

/* the promo cards sit on the texture, so keep their own fill clean */
.promo .uk-card {
  background-color: var(--color-3);
}

/* =========================================
   Header — beige once the page is scrolled
   ========================================= */
.navbar.scroll {
  background-color: var(--color-3) !important;
  background-image: url("https://media-library-activestorage-production.s3.us-east-2.amazonaws.com/vxed6sfqgq5ys700a4936u139l1y");
  background-repeat: repeat;
  background-position: top left;
  box-shadow: 2px 4px 6px -3px var(--color-4-opacity) !important;
}

#header.scroll .nav-link {
  color: var(--color-4);
}

/* the hamburger is a masked shape filled by background, so it
   needs a dark fill against the beige header. The template
   targets it with an ID, so match that specificity. */
#header.scroll .navbar-toggler .navbar-toggler-icon {
  background: var(--color-4) !important;
}

/* side menu — only the logo strip takes the footer navy */
#offcanvasNavbar .offcanvas-header {
  background-color: var(--footer);
}

/* the close X is a masked shape; shrink the mask */
#header #offcanvasNavbar .btn-close {
  -webkit-mask-size: 55%;
  mask-size: 55%;
}

#header #offcanvasNavbar .btn-close:hover {
  -webkit-mask-size: 65%;
  mask-size: 65%;
}

/* =========================================
   Mailing list alert bar — beige
   ========================================= */
#mailingListAlert {
  background-color: var(--color-2) !important;
  border-color: var(--color-2);
}

#mailingListAlert,
#mailingListAlert strong,
#mailingListAlert span {
  color: var(--color-3);
}

#mailingListAlert .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* =========================================
   Home — address bar under the hero
   ========================================= */
.address-bar p {
  font-family: var(--headers-font);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.address-bar a {
  text-decoration: none;
}

/* =========================================
   Display headings — logo typeface
   ========================================= */
h1,
.h1,
h2,
.h2,
.banner-title,
.menu-cat,
.promo-title,
.location-name-heading {
  font-family: var(--display-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* menu item names and the home intro line stay in the text-weight family */
.menu-item .item,
.menu-name-wrapper .item,
.h2-home-section {
  font-family: var(--headers-font);
  text-transform: none;
  letter-spacing: normal;
}

/* the wordmark line, tracked out like the logo */
.home-page-bg h1 {
  letter-spacing: 0.06em;
}

/* offset teal shadow, as on the logo */
.banner-title,
.home-page-bg h1 {
  text-shadow: 4px 4px 0 var(--color-1);
  letter-spacing: 7px;
}

/* the hero sub-line stays light and tracked out, like "ON HARRISON" */
.home-page-bg h1 .small {
  font-family: var(--headers-font);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-shadow: none;
}

/* rules either side, as under the wordmark */
.hero-subline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  max-width: 720px;
  margin: 1rem auto 0;
  font-size: 1.15rem;
  line-height: 1.5;
}

.hero-subline::before,
.hero-subline::after {
  content: "";
  flex: 1 1 auto;
  height: 7px;
  border-top: 2px solid var(--color-4);
  border-bottom: 2px solid var(--color-4);
}

.hero-subline-text {
  flex: 0 1 auto;
}

/* Photo rows on menu / bar pages: equal height, cropped to fill */
.menu-photo {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .menu-photo {
    height: 240px;
  }
}

/* Shorter hero video on mobile (UIkit sets min-height inline, so !important) */
@media (max-width: 767.98px) {
  .hero.uk-cover-container {
    min-height: 51vh !important;
    max-height: 51vh;
  }
}

@media (max-width: 575.98px) {
  .hero-subline {
    gap: 0.9rem;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 767.98px) {
  .banner-title,
  .home-page-bg h1 {
    text-shadow: 3px 3px 0 var(--color-1);
  }
}

/* =========================================
   Section heading flourish — double rule
   either side, as on the current site
   ========================================= */
.menu-cat,
.section-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
}

.menu-cat::before,
.menu-cat::after,
.section-flourish::before,
.section-flourish::after {
  content: "";
  flex: 1 1 auto;
  max-width: 220px;
  height: 7px;
  border-top: 2px solid var(--color-4);
  border-bottom: 2px solid var(--color-4);
}

/* teal offset shadow on menu category headings */
.menu-cat {
  text-shadow: 3px 3px 0 var(--color-1);
}

/* =========================================
   Triangle cluster ornament, from the menus
   ========================================= */
.triangles {
  display: block;
  height: 16px;
  margin: 1.75rem auto;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='82'%20height='16'%20viewBox='0%200%2082%2016'%3E%3Cpolygon%20points='0,16%2012,16%206,2'%20fill='%236DCDB8'/%3E%3Cpolygon%20points='18,16%2030,16%2024,2'%20fill='%236DCDB8'/%3E%3Cpolygon%20points='36,16%2048,16%2042,2'%20fill='%236DCDB8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 82px 16px;
}

/* =========================================
   Customer reviews section
   ========================================= */
#reviews .testimonial-carousel {
  background-color: #d9e1ea;
  background-image: url("https://media-library-activestorage-production.s3.us-east-2.amazonaws.com/vxed6sfqgq5ys700a4936u139l1y");
  background-repeat: repeat;
  background-position: top left;
}

/* =========================================
   Section divider strip
   ========================================= */
.band-rule {
  height: 10px;
  width: 100%;
  background-color: var(--color-2);
}

/* =========================================
   Rounded hairline frame, as on the printed
   menus (Handhelds / All American Breakfast)
   ========================================= */
.menu-frame {
  border: 1px dashed var(--color-1);
  border-radius: 18px;
  padding: 1.75rem 1.5rem 0.5rem;
  margin-top: 1rem;
}

/* =========================================
   Menu rows — the template already draws the
   dotted leader, just let it sit on the paper
   ========================================= */
.menu-item .card-body {
  background: transparent;
  border: 0;
}

/* =========================================
   The Bar — page intro
   ========================================= */
.bar-intro { 
  margin: 0 auto 1rem;
  text-align: center;
}

.bar-intro .lead {
  margin-bottom: 1.25rem;
}

/* an odd last item sits in the first column, not centred */
.menu-item-container .row.justify-content-center {
  justify-content: flex-start !important;
}

/* Hero: fill the banner and center the photo on every screen above mobile */
@media (min-width: 769px) {
  .banner-image {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
  }
}
/* For photos where the dish sits low in the shot */
img.focus-bottom {
  object-position: 50% 100%!important;
}


.address-bar a {
  color: var(--color-1);
}
.promo .uk-card .popup-image {
  display: block;
  height: 100%;
}

/* =========================================
   Footer — social icons + Hufft Marchand
   Hospitality lockup
   ========================================= */
.footer-socials {
  margin-top: 1.5rem;
}

.hmh-link {
  text-decoration: none;
}

.hmh-link .hmh-logo {
  max-height: 120px;
  width: auto;
  margin: 0 auto;
  display: block;
}

.hmh-link .hmh-wordmark {
  margin-top: 0.5rem;
  color: var(--footer-text, #ffffff);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.3;
  transition: color 0.25s ease;
}

.hmh-link:hover .hmh-wordmark,
.hmh-link:focus-visible .hmh-wordmark {
  color: var(--color-2);
}

.hmh-link:focus-visible {
  outline: 2px solid var(--color-2);
  outline-offset: 4px;
}