/* ==================================================================
   THE CART AFFORDANCE'S OWN STYLESHEET — `assets/cdd-cart-nav.css`,
   enqueued as `cleverdog-cart-nav` (functions.php, the wp_enqueue_scripts
   action), ON EVERY PAGE, AUTHORED OR NOT.

   ⛔ #1990 — WHY THIS IS NOT IN style.css ANY MORE. Rick, 10 Sep 2026, two
   screenshots of the same site at the same moment: on the home page a stray
   black dot to the left of the cart and a red square jammed against the icon;
   on the shop page the same cart drawn correctly. One component
   (`cdd_nav_with_cart()` appends the same `<ul class="cdd-cart-nav">` to the
   build's header on every page), two results. The difference, read off the two
   pages' raw HTML: `/shop/` carries `<link id="cleverdog-base-css">` and the home
   page does not — #1940 dequeues the theme stylesheet on an authored page at
   priority 100, and every rule below lived in that stylesheet. So on an
   authored page the `<ul>` fell back to the browser's own `list-style: disc`
   (the dot) and the badge kept the build's button padding with none of the
   geometry reset below (the square). These rules are the component's, not the
   theme's; they travel with the markup, in a handle nothing dequeues.
   ================================================================== */

/* ------------------------------------------------------------------
   ⭐ THE CART AFFORDANCE (functions.php: cdd_nav_with_cart) — the shape,
   not the colour. Rick, 10 Sep: *"I don't see the normal icon for the cart."*

   ⛔ THIS FILE SETS NO COLOUR ON IT AND THAT IS DELIBERATE. The link wears the
   build's own shared menu-link classes and the badge wears the build's own
   action classes, both harvested off the build's markup at render time. A colour
   here would be the theme overruling the design it exists to serve — #1940's
   rule. What is left for this file is geometry: the icon's size, the badge's
   placement on it, and the tap target.

   NN/g, *Adding an Item to a Shopping Cart*: the badge is "superimposed on the
   cart icon", so it is positioned on the icon rather than set beside it.
   https://www.nngroup.com/articles/cart-feedback/
   ------------------------------------------------------------------ */
.cdd-cart-link-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  line-height: 1;
}
.cdd-cart-icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
/* ⚠ THE BADGE WEARS THE BUILD'S ACTION CLASS FOR ITS COLOUR AND NOTHING ELSE.
   Measured: with `nav__link--cta` on it the badge came out **42x17 for the single
   digit "3"**, because that class carries this build's BUTTON padding as well as
   its colour. Colour is what was wanted; the geometry is reset here. Written as
   its own block after the class so it wins on order at equal specificity, and
   ⛔ AND IT NEEDED TWO CLASSES, NOT ONE — MEASURED TWICE. At `.cdd-cart-count`
   alone the badge stayed 42x17: the build's own class is also one class, and its
   stylesheet is enqueued after the theme's, so a tie went to the build. Scoped to
   its own wrapper (0,2,0) it wins on specificity. `.cdd-cart-count` on its own
   below still carries the fallback colour for a build whose menu has no
   action-emphasised item to lend. */
/* GEOMETRY at (0,2,0) — it must beat the build's own action class, which is one
   class in a stylesheet enqueued after this one. Colour is NOT in this block:
   putting it here beat the build's class too and the badge came out the theme's
   gold, rgb(186,151,20), which is the exact fault #1946 spent a night removing
   from the buttons. Measured, both times. */
.cdd-cart-link-inner .cdd-cart-count {
  position: absolute;
  top: -7px;
  left: 11px;
  min-width: 17px;
  width: auto;
  height: 17px;
  padding: 0 4px;
  margin: 0;
  border: none;
  box-shadow: none;
  letter-spacing: 0;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
/* COLOUR at (0,1,0), and it is a FALLBACK ONLY — for a build whose menu has no
   action-emphasised item and so handed the badge no classes of its own. Where
   the build did lend one, that class is also (0,1,0) and later in the cascade,
   so the build's own action colour wins, which is the whole design. */
.cdd-cart-count {
  background: var(--wp--preset--color--accent);
  color: var(--wp--custom--text-on-accent, var(--wp--preset--color--base));
}
.cdd-cart-subtotal { font-variant-numeric: tabular-nums; }

/* ⛔ 44x44 IS THE HOUSE TAP TARGET (Apple's guidance; WCAG 2.2 SC 2.5.8's AA bar
   is 24x24 and we are deliberately better than AA — see scripts/mobile-review.mjs).
   A 20px icon in a menu whose other items are words would otherwise be the one
   control on the page too small to hit. */
.cdd-cart-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

/* The cart's own one-item list — a sibling of the build's menu, never a member
   of it, so it survives whatever that build does to collapse its navigation on a
   phone (see cdd_nav_with_cart()). It carries no dress of its own: the `<li>` and
   its link wear the build's own classes. */
.cdd-cart-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.cdd-cart-nav > li { margin: 0; padding: 0; list-style: none; }

/* ⚠ AND ON A PHONE THE SUBTOTAL COMES OFF. Measured at 390 with it in: the
   header bar is a 350px flex row holding a 191px brand, a 111px "Menu" button
   and a 120px cart — 422px of content, and the cart ran to x=414 on a 390px
   screen, overlapping the menu button and clipping off the edge.

   NN/g's subtotal guidance is explicitly conditional — *"If possible, include the
   cart subtotal near the icon as well"* — and on a phone it is not possible
   without pushing a real control off the screen. The icon and the count badge,
   which are the load-bearing half of that guideline, stay at every width; the
   accessible name still carries the subtotal in full, so nothing is lost to a
   screen reader. Without it the cart is 44px and the row is 346px of 350.
   https://www.nngroup.com/articles/cart-feedback/ */
@media (max-width: 600px) {
  .cdd-cart-subtotal { display: none; }
}
.cdd-cart-nav { flex: 0 0 auto; }

/* ------------------------------------------------------------------
   #1992 — THE DRAWER. WooCommerce's Mini-Cart block is rendered beside the
   cart link (functions.php: cdd_mini_cart_drawer_markup) so add-to-cart opens
   its drawer on every page the build's header reaches. Its own button is
   visually hidden — still in the DOM, still focusable by script — because the
   build's cart link is the one control a customer sees; a click on that link
   is forwarded to this button (the wp_footer script). The drawer itself is the
   block's, positioned by the block's own stylesheet, and is not touched here.
   ------------------------------------------------------------------ */
.cdd-mini-cart { display: contents; }
.cdd-mini-cart .wc-block-mini-cart__button {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}