/* ─────────────────────────────────────────────────────────────────
   Bricks & Blooms — Dual-brand header logo layout
   Bricks & Blooms + Fantastic Flowers logos side-by-side,
   bleeding above and below the fixed navbar bar.
   ───────────────────────────────────────────────────────────────── */

/*
 * Strategy
 * ─────────
 * Keep the menubar at a fixed visual height so fixed-header overlap
 * math remains stable across templates. We center all header content
 * inside that height and keep overflow visible so logos can bleed.
 *
 * The Sway theme applies margin-top: 18px to cart/search icons, which
 * drags right-side controls down. We reset those margins to preserve
 * equal top/bottom spacing around the CTA buttons.
 */

/* ── Height tokens ───────────────────────────────────────────── */

:root {
  --bb-nav-h:  65px;  /* Match Sway default nav band height */
  --bb-logo-h: 78px;  /* Logo render height — bleeds above & below bar */
  --bb-fixed-header-offset: calc(var(--bb-topbar-h) + var(--bb-nav-h));
  --bb-logo-scale-top: 1;
  --bb-logo-scale-scroll: 1;
  --bb-logo-shift-top: 0px;
  --bb-logo-shift-scroll: 0px;
}

/* ── Menubar: fixed height, overflow visible ────────────────── */

.menubar {
  min-height: var(--bb-nav-h) !important;
  padding:    0 !important;
  overflow:   visible !important;
}

/* Reset Sway's asymmetric margin-top on cart/search so flex
   centering is the only vertical anchor for right-side icons. */
.menubar .topbar-search,
.navbar.navbar-default .menubar .keydesign-cart {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Sway keeps padding-bottom on cart wrapper, which makes the icon
   appear lower than center in the desktop nav controls. */
.menubar .main-nav-extra-content .keydesign-cart {
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.menubar .main-nav-extra-content .keydesign-cart > a,
.menubar .main-nav-extra-content .keydesign-cart > a .cart-icon-container,
.menubar .main-nav-extra-content .keydesign-cart > a .sway-shopping-cart-header {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.menubar .main-nav-extra-content .keydesign-cart > a .cart-icon-container {
  position: relative !important;
  min-width: 18px;
}

.menubar .main-nav-extra-content .keydesign-cart > a .cart-icon-container .badge {
  position: absolute !important;
  top: -7px;
  right: -9px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  z-index: 2;
}

/* The Bootstrap container and the inner flex wrapper must also
   allow overflow so the images aren't clipped. */
.menubar > .container,
.menubar > .container > * {
  overflow: visible !important;
}

.menubar > .container {
  min-height:  var(--bb-nav-h) !important;
  align-items: center !important;
}

.menubar .main-nav-extra-content,
.menubar .header-bttn-wrapper,
.menubar .search-cart-wrapper {
  display: flex !important;
  align-items: center !important;
}

/* ── Logo group: side-by-side flex row ───────────────────────── */

#logo {
  overflow: visible !important;
  position: relative !important;
  z-index:  200 !important;
}

.bb-logo-group {
  display:     flex !important;
  align-items: center !important;
  gap:         10px !important;
  overflow:    visible !important;
}

/* ── Each logo item ──────────────────────────────────────────── */

a.bb-logo-item,
.bb-logo-item {
  display:         flex !important;
  align-items:     center !important;
  text-decoration: none !important;
  overflow:        visible !important;
  line-height:     0 !important; /* collapse inline baseline gap */
}

/* ── Logo images — taller than the bar so they bleed ────────── */

.bb-logo-group img,
.bb-logo-group .fixed-logo,
.bb-logo-group .nav-logo {
  height:   var(--bb-logo-h) !important;
  width:    auto !important;
  max-width: none !important;
  position: relative !important;
  z-index:  200 !important;
  transform: translateY(var(--bb-logo-shift-top)) scale(var(--bb-logo-scale-top));
  transform-origin: center center;
  transition: transform 560ms cubic-bezier(0.2, 0.75, 0.25, 1);
  /* Keep images crisp — no squashing */
  object-fit: contain !important;
}

/* Desktop/tablet logo behavior:
   top of page = 80%, scrolled (.navbar-shrink) = 120% */
@media (min-width: 768px) {
  :root {
    --bb-logo-scale-top: 0.8;
    --bb-logo-scale-scroll: 1.2;
    --bb-logo-shift-top: 0px;
    --bb-logo-shift-scroll: 12px;
  }

  .bb-logo-group img,
  .bb-logo-group .fixed-logo,
  .bb-logo-group .nav-logo {
    transform: translateY(var(--bb-logo-shift-top)) scale(var(--bb-logo-scale-top)) !important;
  }

  .navbar.navbar-default.navbar-shrink .bb-logo-group img,
  .navbar.navbar-default.navbar-shrink .bb-logo-group .fixed-logo,
  .navbar.navbar-default.navbar-shrink .bb-logo-group .nav-logo {
    transform: translateY(var(--bb-logo-shift-scroll)) scale(var(--bb-logo-scale-scroll)) !important;
  }
}

/* Pink dot separator between the two brand logos */
.bb-logo-ff {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.bb-logo-ff::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E9477A;
  margin-right: 22px;
  flex-shrink: 0;
}

/* ── Scroll-state: Sway JS adds .fixed-header to <body> ─────── */

.fixed-header .bb-logo-group .fixed-logo,
.fixed-header .bb-logo-group .nav-logo,
.fixed-header .bb-logo-group img {
  height: var(--bb-logo-h) !important;
}

/* ── Feature sections sticky rows (Floral/Landscaping pages) ───
   Keep sticky tab rows below the fixed topbar + nav stack. */

#single-page .feature-sections-tabs {
  top: calc(var(--bb-fixed-header-offset) + 2px) !important;
}

.admin-bar #single-page .feature-sections-tabs {
  top: calc(var(--bb-fixed-header-offset) + 32px + 2px) !important;
}

/* ── Mobile: shrink logos proportionally ────────────────────── */

@media (max-width: 991px) {
  :root {
    --bb-nav-h:  58px;
    --bb-logo-h: 64px;
  }

  .bb-logo-ff::before {
    width: 6px;
    height: 6px;
    margin-right: 16px;
  }

  .bb-logo-ff {
    padding-left: 0 !important;
  }
}

@media (max-width: 767px) {
  :root {
    --bb-nav-h:  58px;
    --bb-logo-h: 56px;
  }

  .navbar.navbar-default .menubar,
  .navbar.navbar-default .menubar > .container {
    background-color: #fff !important;
  }

  .navbar.navbar-default .menubar .container {
    min-height: var(--bb-nav-h) !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    max-height: calc(100vh - var(--bb-topbar-h-mobile)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #logo {
    min-height: var(--bb-nav-h) !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── Hide desktop-only wrappers on mobile ──────────────────────
     .search-cart-wrapper = desktop search+cart icons (mobile has its
     own in .navbar-header). .header-bttn-wrapper is hidden by default
     and shown by Sway's sibling-selector CSS when the menu is open.
     We must NOT hide the .main-nav-extra-content parent or that
     sibling selector (.navbar-collapse[aria-expanded] ~ .main-nav-…)
     is defeated before it can fire. */
  .menubar .search-cart-wrapper {
    display: none !important;
  }

  /* Hide CTA buttons by default on mobile */
  .menubar .main-nav-extra-content .header-bttn-wrapper {
    display: none !important;
  }

  /* When hamburger is open, show CTA buttons inside the open menu */
  .navbar-fixed-top .navbar-collapse[aria-expanded="true"] ~ .main-nav-extra-content .header-bttn-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px 16px 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 8px !important;
  }

  /* ── Vertically centre mobile nav icons ────────────────────────
     Sway floats .topbar-search.mobile-search with margin-top:10px,
     misaligning it and .mobile-cart vs the hamburger toggle.
     Flexing .navbar-header aligns all three children on the midline. */
  .navbar-header {
    display: flex !important;
    align-items: center !important;
    float: right !important;
    min-height: var(--bb-nav-h) !important;
    gap: 10px;
  }

  .navbar-header .mobile-cart {
    order: 1;
  }

  .navbar.navbar-default .menubar .topbar-search.mobile-search {
    order: 2;
    float: none !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .navbar-header .navbar-toggle {
    order: 3;
    margin: 0 0 0 2px !important;
    align-self: center !important;
  }

  .navbar-header .mobile-cart {
    display: flex !important;
    align-items: center !important;
  }

  /* ── Fix hamburger-open animation jump ─────────────────────────
     Sway sets max-height: calc(100vh - 65px) assuming only a 65px nav.
     Our topbar (72px) + nav (52px) = 124px combined, so the collapse
     overshoots the viewport during its open animation, then snaps
     back — creating the visible jump. Override to the real height. */
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
  }

  .navbar.navbar-default .navbar-nav {
    max-height: none !important;
    width: 100% !important;
    margin-top: 18px !important;
    margin-bottom: 12px !important;
    padding: 0 16px !important;
    box-sizing: border-box;
  }

  #main-menu {
    clear: both !important;
    width: 100% !important;
  }

  #main-menu .navbar-nav > li {
    width: 100% !important;
  }

  #main-menu .navbar-nav > li > a {
    width: calc(100% - 56px) !important;
  }

  #main-menu .navbar-nav .menu-item-has-children .mobile-dropdown {
    right: 16px !important;
  }

  .bb-logo-group img,
  .bb-logo-group .fixed-logo,
  .bb-logo-group .nav-logo {
    transform: translateY(2px) scale(1);
  }

  .admin-bar #single-page .feature-sections-tabs {
    top: calc(var(--bb-fixed-header-offset) + 46px + 2px) !important;
  }

  .bb-logo-ff::before {
    width: 5px;
    height: 5px;
    margin-right: 12px;
  }

  .bb-logo-ff {
    padding-left: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-logo-group img,
  .bb-logo-group .fixed-logo,
  .bb-logo-group .nav-logo {
    transition: none;
  }
}