/* =========================================================================
   Header / nav chrome  +  site footer
   ========================================================================= */
.bloom-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bloom-mist);
}

.bloom-header__inner {
  width: min(100% - 16px, 1340px);
  margin-inline: auto;
  min-height: var(--bloom-header-height);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Logo: hidden on desktop (nav stays centered); shown in the mobile bar.
   !important is required because two things override a normal selector on the
   live site: WooCommerce's `.woocommerce-page img` reset (height:auto) on shop
   pages, and EWWW's lazy-load, which swaps in a natural-size (900×378) base64
   placeholder. With max-width:100% that placeholder fills the phone width — the
   "huge logo" bug. !important pins the height everywhere; the logo also carries
   `skip-lazy` (header.php) so EWWW serves the real image, not the placeholder. */
.bloom-header__logo { display: none; }
.bloom-header .bloom-header__logo-img {
  display: block;
  height: clamp(32px, 9vw, 42px) !important;
  width: auto !important;
  max-width: 100% !important;
}

.bloom-header__nav { width: 100%; }
.bloom-header__nav .bloom-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(6px, 1.1vw, 16px);
  width: 100%;
}
.bloom-menu li { display: flex; }

.bloom-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--bloom-green);
  font-family: var(--bloom-font-body);
  font-weight: 600;
  font-size: clamp(.66rem, .92vw, .84rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px clamp(10px, 1.3vw, 22px);
  border-radius: 0 0 14px 14px;
  transition: background .18s ease;
}
.bloom-menu a:hover,
.bloom-menu .current-menu-item > a,
.bloom-menu .current_page_item > a { background: var(--bloom-green-d); }

/* "Basket" tab (appended to the primary nav) — a count bubble appears once the
   basket holds something; contrasts against the green tab (cream on green). */
.bloom-menu__basket a { gap: 7px; }
.bloom-menu__basket .bloom-cart__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bloom-cream);
  color: var(--bloom-forest);
  font-size: .72rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.bloom-menu__basket .bloom-cart__count.is-empty { display: none; }

/* Hamburger (mobile only) */
.bloom-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: transparent;
  border: 2px solid var(--bloom-forest);
  border-radius: 10px;
  cursor: pointer;
}
.bloom-header__toggle span {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  background: var(--bloom-forest);
  transition: transform .2s ease, opacity .2s ease;
}

/* Site footer */
.bloom-sitefooter {
  background: var(--bloom-forest);
  color: rgba(236, 234, 218, 0.7);
  padding: 16px 0;
}
.bloom-sitefooter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 22px;
  flex-wrap: wrap;
}
.bloom-sitefooter__copy { font-size: .8rem; letter-spacing: .02em; }
.bloom-sitefooter__credit { display: inline-block; margin-left: 10px; }
.bloom-sitefooter__credit a {
  color: var(--bloom-cream);
  text-decoration: none;
  transition: color .12s ease;
}
.bloom-sitefooter__credit a:hover { color: #fff; text-decoration: underline; }
.bloom-sitefooter__links {
  display: flex;
  align-items: center;
  gap: 0 12px;
  flex-wrap: wrap;
  font-size: .8rem;
}
.bloom-sitefooter__links a {
  color: var(--bloom-cream);
  text-decoration: none;
  transition: color .12s ease;
}
.bloom-sitefooter__links a:hover { color: #fff; text-decoration: underline; }
.bloom-sitefooter__sep { color: rgba(236, 234, 218, 0.4); }

@media (max-width: 560px) {
  .bloom-sitefooter__inner { flex-direction: column; text-align: center; }
}

/* -------------------------------------------------------------------------
   Mobile drawer
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bloom-header__inner { align-items: center; justify-content: space-between; gap: 12px; }
  .bloom-header__logo { display: flex; align-items: center; flex: none; text-decoration: none; }
  .bloom-header__toggle { display: flex; flex: none; }

  .bloom-header__nav {
    position: fixed;
    inset: var(--bloom-header-height) 0 auto 0;
    display: block;
    background: var(--bloom-mist);
    box-shadow: 0 12px 18px -10px rgba(0, 73, 44, 0.4);
    max-height: 0;
    overflow-y: auto;
    transition: max-height .3s ease;
  }
  .bloom-header__nav.is-open { max-height: calc(100vh - var(--bloom-header-height)); }
  .bloom-header__nav .bloom-menu {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    width: 100%;
  }
  .bloom-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(0, 73, 44, 0.14);
  }
  .bloom-menu li:last-child { border-bottom: 0; }
  .bloom-menu a {
    flex: 1;
    justify-content: flex-start;
    text-align: left;
    background: transparent;
    color: var(--bloom-forest);
    border-radius: 0;
    padding: 15px 24px;
    font-size: 1.02rem;
  }
  .bloom-menu a:hover,
  .bloom-menu .current-menu-item > a,
  .bloom-menu .current_page_item > a { background: var(--bloom-green); color: #fff; }

  .bloom-header.is-open .bloom-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .bloom-header.is-open .bloom-header__toggle span:nth-child(2) { opacity: 0; }
  .bloom-header.is-open .bloom-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}