/* Written on each publish by the deploy agent. Loads after wsg.css so it wins. */

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

/* Utility top bar (phone + social): absolute over hero; push main header below it.
   Header is position:absolute; without this offset the logo/nav overlap the bar. */
.brand-top-bar {
  --brand-top-bar-height: 40px;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 210 !important;
  width: 100% !important;
  height: var(--brand-top-bar-height) !important;
  box-sizing: border-box !important;
  background: var(--k-brand-primary) !important;
  color: #fff !important;
}
.brand-top-bar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 30px !important;
  box-sizing: border-box !important;
}
.brand-top-bar-phone,
.brand-top-bar-social {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  white-space: nowrap !important;
}
.brand-top-bar-label {
  color: #fff !important;
}
.brand-top-bar-phone a {
  color: #fff !important;
  text-decoration: none !important;
}
.brand-top-bar-social {
  gap: 14px !important;
}
.brand-top-bar-social-link {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.brand-top-bar-social-link:hover,
.brand-top-bar-social-link:focus {
  color: var(--k-brand-secondary) !important;
}
.brand-top-bar + .fly-header-site:not(.sticky-menu),
.has-brand-top-bar .fly-header-site:not(.sticky-menu) {
  top: var(--brand-top-bar-height, 40px) !important;
}
@media (max-width: 767px) {
  .brand-top-bar { --brand-top-bar-height: 36px; }
  .brand-top-bar-inner { padding: 0 30px !important; }
  .brand-top-bar-phone,
  .brand-top-bar-social { font-size: 13px !important; }
}

/* Hero overlay copy — horizontal inset */
@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). Builder-chosen sizes use
     .brand-logo-fixed-size and keep their inline font-size instead. */
  .brand-logo-is-text .fly-header-type-1 .logowhite .brand-logo-text:not(.brand-logo-text--desktop):not(.brand-logo-text--mobile),
  .brand-logo-is-text .fly-header-type-1 .logoblack .brand-logo-text:not(.brand-logo-text--desktop):not(.brand-logo-text--mobile) {
    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:not(.brand-logo-text--desktop):not(.brand-logo-text--mobile),
  .brand-logo-is-text .fly-header-type-1.sticky-menu .logoblack .brand-logo-text:not(.brand-logo-text--desktop):not(.brand-logo-text--mobile) {
    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 row: social icons after Careers (same links as footer). The "|"
     and icons render only when social URLs are configured in the builder. */
  .fly-header-type-1 #fly-menu-secondary .fly-nav-menu > li.brand-secondary-nav-social,
  .fly-header-type-1.sticky-menu #fly-menu-secondary .fly-nav-menu > li.brand-secondary-nav-social {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
  }
  /* Divider drawn as a CSS bar (not the "|" glyph) so it's always perfectly
     vertical regardless of the row's italic font. */
  .fly-header-type-1 #fly-menu-secondary .brand-nav-social-sep,
  .fly-header-type-1.sticky-menu #fly-menu-secondary .brand-nav-social-sep {
    display: inline-block !important;
    width: 3px !important;
    height: 25px !important;
    margin: -2px 23px 3px 6px !important;
    background: currentColor !important;
    opacity: 1.0 !important;
    transform: none !important;
    font-size: 0 !important;
    user-select: none !important;
  }
  .fly-header-type-1 #fly-menu-secondary .brand-nav-social-icons,
  .fly-header-type-1.sticky-menu #fly-menu-secondary .brand-nav-social-icons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-top: 6px !important;
  }
  .fly-header-type-1 #fly-menu-secondary .brand-secondary-social-link,
  .fly-header-type-1.sticky-menu #fly-menu-secondary .brand-secondary-social-link {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 0 !important;
    font-style: normal !important;
    text-decoration: none !important;
    color: #fff !important;
    transition: color 0.2s ease !important;
  }
  .fly-header-type-1 #fly-menu-secondary .brand-secondary-social-link i,
  .fly-header-type-1.sticky-menu #fly-menu-secondary .brand-secondary-social-link i {
    color: inherit !important;
  }
  .fly-header-type-1 #fly-menu-secondary .brand-secondary-social-link:hover,
  .fly-header-type-1 #fly-menu-secondary .brand-secondary-social-link:focus,
  .fly-header-type-1.sticky-menu #fly-menu-secondary .brand-secondary-social-link:hover,
  .fly-header-type-1.sticky-menu #fly-menu-secondary .brand-secondary-social-link:focus {
    color: var(--k-brand-secondary) !important;
    text-decoration: none !important;
  }
  #mobile-menu .desktop-only-nav-social {
    display: none !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;
  }

  /* Sticky bar only: slightly less top/bottom padding. */
  .fly-header-site.fly-header-type-1.sticky-menu {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* ===========================================================================
   Mobile nav (portrait + landscape, < 992px): widen the text wordmark.
   The 14ch cap in brand-vars.php keeps the header logo narrow on phones; let it
   use more of the available bar width before wrapping.
   =========================================================================== */
@media (max-width: 991px) {
  .brand-logo-is-text .fly-header-site .logowhite .brand-logo-text:not(.brand-logo-text--desktop):not(.brand-logo-text--mobile),
  .brand-logo-is-text .fly-header-site .logoblack .brand-logo-text:not(.brand-logo-text--desktop):not(.brand-logo-text--mobile) {
    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: 75vw !important;
  }
}