/* Preloader — wsg.css defaults to #fff; use primary brand color instead. */
.preloader {
  background-color: var(--k-brand-primary, #1a1a1a);
}

/* Hero overlay copy — loads after wsg.css; rewritten on each publish */
@media (min-width: 992px) {
  .textover p {
    padding: 0 170px !important;
  }
}

/* Optional homepage hero background video. When present, hide the still image
   (solid brand color shows under the preloader); video covers the hero once it
   plays. On error, JS removes .brand-hero-has-video to restore the image. */
.fly-slider-full .carousel-inner .item { position: relative; overflow: hidden; }
.fly-slider-full .item.brand-hero-has-video {
  background-image: none !important;
  background-color: var(--k-brand-primary, #1a1a1a);
}
.fly-slider-full .brand-hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
.fly-slider-full .textover { z-index: 2; }

/* ===========================================================================
   Desktop header layout — logo left, single nav line floated right.

   The legacy theme split the nav into left/right clusters around a centered
   logo, with DIFFERENT sticky vs non-sticky spacing across several files and
   ~6 width breakpoints. We replace that with ONE flex row applied IDENTICALLY
   to the normal and sticky states (so they can't drift): the logo is pinned to
   the left, and the nav menu is justified hard to the right. This file loads
   last, so it wins the cascade. Applies to both image-logo and text-logo
   headers. Scoped to (min-width:992px) so the mobile menu (<992px) is
   untouched. */
@media (min-width: 992px) {
  /* Header is a single flex row, same box in both states. */
  .fly-header-site.fly-header-type-1,
  .fly-header-site.fly-header-type-1.sticky-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    /* Bar stays full-width (sticky background spans the screen); the logo↔menu
       content zone is capped at 1500px and centered via responsive padding,
       with a 40px minimum gutter on narrower desktops. */
    padding: 12px max(40px, calc((100% - 1500px) / 2)) !important;
  }

  /* Logo: pinned left, natural width, no legacy centering margins/offsets. */
  .fly-header-type-1 .fly-wrap-logo,
  .fly-header-type-1.sticky-menu .fly-wrap-logo {
    flex: 0 0 auto !important;
    position: static !important;
    top: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    max-width: none !important;
    max-height: none !important;
  }

  /* Text logo: cap the available area (desktop + sticky) so a long wordmark
     wraps to a second line instead of overflowing or shoving the nav. Image
     logos keep their own sizing (scoped to .brand-logo-is-text). */
  .brand-logo-is-text .fly-header-type-1 .fly-wrap-logo,
  .brand-logo-is-text .fly-header-type-1.sticky-menu .fly-wrap-logo {
    max-width: 460px !important;
  }

  /* Text wordmark sizing. A capped font size + the area max-width above means
     short names sit on one line and long names break onto a second line. The
     !important overrides the inline font-size fitLogoText() writes (we let that
     keep driving the mobile header only, below). */
  .brand-logo-is-text .fly-header-type-1 .logowhite .brand-logo-text,
  .brand-logo-is-text .fly-header-type-1 .logoblack .brand-logo-text {
    font-size: clamp(30px, 3.2vw, 45px) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  /* Sticky bar: a slightly smaller wordmark keeps the fixed bar compact; it
     still wraps to a second line within the same capped area when needed. */
  .brand-logo-is-text .fly-header-type-1.sticky-menu .logowhite .brand-logo-text,
  .brand-logo-is-text .fly-header-type-1.sticky-menu .logoblack .brand-logo-text {
    font-size: 34px !important;
  }

  /* Nav cluster: hugs the right edge as a two-row stack (primary nav on top,
     secondary nav below), the whole block vertically centered on the logo. */
  .fly-header-type-1 .fly-nav-wrap,
  .fly-header-type-1.sticky-menu .fly-nav-wrap {
    flex: 0 1 auto !important;
    width: auto !important;
    position: static !important;
    top: 0 !important;
    margin: 0 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
  }

  /* Links justified to the right. */
  .fly-header-type-1 .fly-nav-wrap .fly-nav-menu,
  .fly-header-type-1.sticky-menu .fly-nav-wrap .fly-nav-menu {
    text-align: right !important;
    margin: 0 !important;
  }

  /* Primary nav link spacing — identical in both states. Symmetric vertical
     padding keeps the link text vertically centered while preserving the
     padding-bottom dropdown hover bridge. */
  .fly-header-type-1 #fly-menu-primary > .fly-nav-menu > li,
  .fly-header-type-1.sticky-menu #fly-menu-primary > .fly-nav-menu > li {
    margin-left: 36px !important;
    padding-top: 16px !important;
    padding-bottom: 8px !important;
  }
  .fly-header-type-1 .fly-site-navigation .fly-nav-menu li:first-child,
  .fly-header-type-1.sticky-menu .fly-site-navigation .fly-nav-menu li:first-child {
    margin-left: 0 !important;
  }

  /* Pull the primary-row hover underline closer to the text (was 7px). */
  .fly-header-type-1 #fly-menu-primary .fly-nav-menu li a,
  .fly-header-type-1.sticky-menu #fly-menu-primary .fly-nav-menu li a {
    padding-bottom: 2px !important;
  }

  /* Secondary nav — second line under the primary nav, floated right, about
     half the primary font size, in a contrasting serif font. */
  .fly-header-type-1 #fly-menu-secondary,
  .fly-header-type-1.sticky-menu #fly-menu-secondary {
    margin-top: -2px !important;
  }
  /* Direct children only (> li, > a) so the second-row spacing and italic
     styling never leak into nested dropdown items (e.g. Galleries submenu). */
  .fly-header-type-1 #fly-menu-secondary > .fly-nav-menu > li,
  .fly-header-type-1.sticky-menu #fly-menu-secondary > .fly-nav-menu > li {
    margin-left: 22px !important;
    padding-top: 0 !important;
    padding-bottom: 6px !important;
  }
  .fly-header-type-1 #fly-menu-secondary > .fly-nav-menu > li > a,
  .fly-header-type-1.sticky-menu #fly-menu-secondary > .fly-nav-menu > li > a {
    font-size: 21px !important;
    font-style: italic !important;
    /* Hover/active underline sits 2px below the text, like the primary row. */
    padding-bottom: 2px !important;
  }

  /* Secondary nav row (Reservations / Parties / etc.) — social icons moved to .brand-top-bar */

  /* Utility bar sits above the absolute header; keep logo/nav below it until sticky. */
  .brand-top-bar + .fly-header-site.fly-header-type-1:not(.sticky-menu),
  .has-brand-top-bar .fly-header-site.fly-header-type-1:not(.sticky-menu) {
    top: var(--brand-top-bar-height, 40px) !important;
  }

  /* Top-level nav items that host a dropdown need an explicit positioning
     context (theme sets this, but we restate it so secondary-row dropdowns
     never anchor to the nav cluster). */
  .fly-header-type-1 .fly-site-navigation .fly-nav-menu > li {
    position: relative !important;
  }

  /* Nav dropdowns (Menus, Galleries, Order Online): center under the parent
     item. The box is wider than its parent <li> ("Youtube Videos" > "Galleries"),
     so left:0+right:0+margin:auto is over-constrained and browsers pin it to
     left:0 and let it spill right. left:50% + translateX(-50%) centers reliably
     regardless of relative widths; right:auto avoids the over-constraint. */
  .fly-header-type-1 .fly-site-navigation .fly-nav-menu > li > ul {
    width: max-content !important;
    min-width: 150px !important;
    max-width: 90vw !important;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    top: 100% !important;
    padding: 16px 24px 20px !important;
    text-align: center !important;
    background-color: var(--k-brand-primary, #1a1a1a) !important;
  }
  .fly-header-type-1 .fly-site-navigation .fly-nav-menu > li > ul > li {
    margin: 0 !important;
    padding: 0 !important;
  }
  .fly-header-type-1 .fly-site-navigation .fly-nav-menu > li > ul > li > a {
    display: block !important;
    white-space: nowrap !important;
    text-align: center !important;
    padding: 6px 0 !important;
  }

  /* Secondary-row dropdown labels: not italic (row links are italic; submenu
     items should read like primary-row dropdowns). */
  .fly-header-type-1 #fly-menu-secondary .fly-nav-menu > li > ul > li > a,
  .fly-header-type-1.sticky-menu #fly-menu-secondary .fly-nav-menu > li > ul > li > a {
    font-style: normal !important;
    font-size: 18px !important;
  }

  /* The secondary nav row overlaps the bottom of a primary item. A slow move
     into the dropdown was hitting that row and closing the menu. While the
     item is hovered, keep it (and an invisible bridge as wide as the dropdown)
     above that row so the pointer never leaves the item on the way down. */
  .fly-header-type-1 #fly-menu-primary > .fly-nav-menu > li:hover,
  .fly-header-type-1.sticky-menu #fly-menu-primary > .fly-nav-menu > li:hover {
    z-index: 40;
  }
  .fly-header-type-1 .fly-site-navigation .fly-nav-menu > li > ul::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 36px;
  }

}

/* ===========================================================================
   Text wordmark sizing — MOBILE (<992px).
   CSS wraps the header wordmark to at most two lines; fitLogoText() skips mobile.
   =========================================================================== */
.brand-logo-is-text .fly-header-site .logowhite .brand-logo-text,
.brand-logo-is-text .fly-header-site .logoblack .brand-logo-text {
  white-space: nowrap;
  display: inline-block;
  max-width: none !important;
  line-height: 1.1;
}

/* Mobile: give the wrapper most of the bar width so the JS has room to work,
   and vertically center the text logo inside the sticky header bar. */
@media (max-width: 991px) {
  .brand-logo-is-text .fly-header-site .logowhite .brand-logo-text,
  .brand-logo-is-text .fly-header-site .logoblack .brand-logo-text {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    max-width: 68vw !important;
    font-size: clamp(2rem, 4.5vw, 1.35rem) !important;
    line-height: 1.15 !important;
    text-align: center !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .brand-logo-is-text .fly-header-site .fly-wrap-logo {
    max-width: 72vw !important;
    flex: 0 1 72vw !important;
  }

  /* Sticky bar: flex-center the logo vertically so it doesn't sit at the top. */
  .brand-logo-is-text .fly-header-site.sticky-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .brand-logo-is-text .fly-header-site.sticky-menu .fly-wrap-logo {
    margin-top: 0 !important;
  }
}

/* Website Builder → Website Fonts.
   Must load after style.css / wsg.css so Oswald !important rules lose.
   Stacks come from css/brand-vars.php CSS variables. */
h1,
h2,
h3,
.fly-section-image-title-before,
.homeh1,
.homeh2,
.brandfont,
.brandfontwhite,
.textover p {
  font-family: var(--k-brand-heading-font, 'Oswald', sans-serif) !important;
}
.fly-header-site .fly-site-navigation .fly-nav-menu li a,
.fly-header-site .fly-site-navigation .fly-nav-menu li span,
.brand-menu-switch-scroller a,
.mm-listview > li > a,
.mm-listview > li > span,
.sticky-mobile-footer a,
.sticky-mobile-footer span {
  font-family: var(--k-brand-nav-font, 'Oswald', sans-serif) !important;
}