/* ---------------------------------------------------------------------------
   Chrome the source inlined into wp_head rather than shipping as a stylesheet:
   the welcome bar, plus our SVG wordmark (which replaces the source's raster logo).

   Values transcribed from RECON-DESIGN §3. Kept in a real stylesheet so it is
   cacheable and editable, instead of inlined on every response.
   --------------------------------------------------------------------------- */

/* --- welcome bar ------------------------------------------------------- */

.mmps-welcome-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;                       /* above the header, which is 100 */
  background: #0f0f0f;
  color: #fff;
  box-shadow: 0 2px 10px rgba(15, 15, 15, 0.18);
}

.mmps-welcome-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.3;
}

.mmps-welcome-bar__tag {
  flex: none;
  background: #fff;
  color: #0f0f0f;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.mmps-welcome-bar__text { color: #ededed; }
.mmps-welcome-bar__text strong { color: #fff; font-weight: 700; }

.mmps-bar-sm { display: none; }

@media (max-width: 600px) {
  .mmps-welcome-bar__inner { font-size: 0.82rem; padding: 0.55rem 14px; }
  .mmps-bar-lg { display: none; }
  .mmps-bar-sm { display: inline; }
}

/* --- bar offsets -------------------------------------------------------
   CRITICAL, and easy to miss: the source kept these rules INLINE in wp_head,
   not in any stylesheet. Forking the source's .css files therefore gives you a
   header that sits at top:0 and is overlapped by the promo bar on every page.
   Transcribed from RECON-DESIGN §1.                                       */

.mmps-has-bar { --mmps-bar-h: 40px; }

.mmps-has-bar .site-header { top: var(--mmps-bar-h); }

.mmps-has-bar .site-main { padding-top: calc(80px + var(--mmps-bar-h)); }

.mmps-has-bar.woocommerce-account .site-main,
.mmps-has-bar.woocommerce-cart .site-main,
.mmps-has-bar.woocommerce-checkout .site-main {
  padding-top: calc(100px + var(--mmps-bar-h));
}

/* The hero owns its own top padding on the front page. */
.mmps-has-bar.home .site-main { padding-top: 0; }
.mmps-has-bar.home .hero { padding-top: calc(120px + var(--mmps-bar-h)); }

.mmps-has-bar .main-nav.active { top: calc(70px + var(--mmps-bar-h)); }

/* FIX — this is a defect on the SOURCE too, which hardcodes 40px at every width.
   Measured with tools/measure.py: the bar is 38.09px tall down to 400px, then
   wraps to two lines and becomes 51.72px at 390px — while .site-header stays
   pinned at top:40px. Result: the header overlaps the bar by ~12px on a phone
   (390px is iPhone 12/13/14/15 width, so this hits the most common device).

   Rather than hardcode a second magic height at a breakpoint that sits only
   10px away from the wrap point, drop the "WELCOME" pill on very narrow screens.
   That returns ~80px to the text, which then fits one line and keeps the 40px
   token valid everywhere. The pill is decorative; the offer is the message. */
@media (max-width: 420px) {
  .mmps-welcome-bar__tag { display: none; }
  .mmps-welcome-bar__inner { gap: 0; }
}

/* --- wordmark ----------------------------------------------------------
   Replaces the source's logo.jpg. The source needed mix-blend-mode:multiply to
   sit a white-background JPEG on the glass header; an inline SVG needs no such
   hack, stays sharp on any display, and adds no HTTP request.            */

.site-logo { display: inline-flex; align-items: center; text-decoration: none; }
.mps-wordmark { display: block; height: 56px; width: auto; }

@media (max-width: 480px) { .mps-wordmark { height: 44px; } }
@media (max-width: 380px) { .mps-wordmark { height: 38px; } }

.footer-logo .mps-wordmark { height: 64px; margin-bottom: 16px; }

/* --- skip link ---------------------------------------------------------
   The source has no skip link. Added: with a fixed header and a promo bar, a
   keyboard user otherwise tabs through the whole nav on every page.       */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: #0f0f0f;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}

.skip-link:focus { left: 0; color: #fff; }

/* --- research-use notice -----------------------------------------------
   Added, not replicated: the source carries no research-use statement anywhere.
   Given what the catalogue actually is, it belongs in the footer of every page,
   on its own line rather than trailing the copyright.                     */

.footer-ruo {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

/* --- hero container width ----------------------------------------------
   SOURCE DEFECT, fixed deliberately.

   `.hero` is `display:flex; align-items:center` and `.hero-inner` carries the
   `container` class. But a flex item sizes to its content (`flex:0 1 auto`), so
   `max-width:1200px` only ever caps it — it never makes it fill. Measured on our
   build the hero container is 1056px while every other `.container` on the page
   is 1200px, so the hero headline sits ~72px right of the section headings below
   it and nothing on the page lines up.

   The source has the same CSS, and by arithmetic renders ~1128px there (560px
   hero-content + 48px gap + a 520px capped image) — so it misaligns too, just by
   less. The `container` class states the intent; flex shrinkage defeats it.

   `width:100%` makes the flex item honour the container it says it is. */

.hero-inner { width: 100%; }

/* --- Woo clearfix kill --------------------------------------------------
   REQUIRED, and not present in any of the source's stylesheets we forked.
   WooCommerce's `ul.products::before/::after` clearfix pseudo-elements become
   GRID ITEMS once `.products` is display:grid, so the first row silently gains
   two invisible cells and every card shifts. STANDARDS calls this out by name. */

.products-grid::before,
.products-grid::after,
ul.products::before,
ul.products::after { content: none; display: none; }

.products-grid { list-style: none; padding: 0; margin: 0; }