/* ==========================================================================
   Header cart link — components/header-cart.css
   Enqueued by inc/header-cart.php (versioned via mc_asset_version, not
   @import'ed — see the note in main.css about @import'ed partials caching
   forever). Markup is the `a.header-cart` fragment in the same file.

   Sits as the last flex child of .header__main-inner (components/header.css).
   On desktop the primary nav carries margin-left:auto, so nav + cart naturally
   sit together at the right. On mobile the nav is hidden and the cart moves
   ahead of the hamburger — see the media query at the bottom.
   ========================================================================== */

.header-cart {
  --cart-navy: #092246;
  --cart-gold: #f4c430;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md, 8px);
  color: var(--cart-navy);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header-cart:hover,
.header-cart:focus-visible {
  background: rgba(9, 34, 70, 0.08);
  color: var(--cart-navy);
}

.header-cart:focus-visible {
  outline: 2px solid var(--cart-gold);
  outline-offset: 2px;
}

.header-cart__icon {
  display: block;
  width: 24px;
  height: 24px;
}

/* Badge — hidden until the cart has something in it. The whole <a> is the
   WooCommerce fragment, so .has-items is re-evaluated server-side on every
   fragment refresh; no JS toggling needed here. */
.header-cart__count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cart-gold);
  color: var(--cart-navy);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #ffffff;
  display: none;
}

.header-cart.has-items .header-cart__count {
  display: block;
}

/* The compact (scrolled) header shrinks the logo; keep the cart in proportion. */
.site-header.is-compact .header-cart {
  width: 40px;
  height: 40px;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* DOM order is brand → toggle → (hidden nav) → cart. Wanted visual order is
     brand … cart, toggle. The auto margin pushes cart + toggle to the right as
     a pair; `order` swaps them so the hamburger stays outermost. Both rules are
     additive — nothing in header.css is overridden. */
  .header-cart {
    order: 2;
    margin-left: auto;
  }

  .header__toggle {
    order: 3;
  }

  /* .header__main-inner's 3rem gap is tuned for desktop nav spacing; with only
     cart + toggle visible on the right it reads as a hole. Only these two items
     are affected — the brand is separated by the auto margin, not the gap. */
  .header__main-inner {
    gap: 1rem;
  }
}