/* ==========================================================================
   Wonder Makers — storefront-matching header & footer for the WooCommerce
   commerce pages. Self-contained, scoped under .wm-header / .wm-footer so it
   never collides with the parent theme's bootstrap / custom.css. Loaded LAST
   (after custom.css) so element-level parent rules lose the cascade.
   Brand tokens mirror the storefront tailwind.config.js exactly.
   --------------------------------------------------------------------------
   ink #0A1E33  slate #3D5570  mute #6B7C92  rule #E2E6EC  tint #F4F6F9
   accent #1E5BA8
   ========================================================================== */

:root {
  --wm-ink: #0A1E33;
  --wm-slate: #3D5570;
  --wm-mute: #6B7C92;
  --wm-rule: #E2E6EC;
  --wm-tint: #F4F6F9;
  --wm-accent: #1E5BA8;
}

/* ---- PARENT PAGE CHROME WE'RE REMOVING ---------------------------------- */
/* The periwinkle page-title banner (<div class="shopheader"><h1>…</h1></div>)
   isn't part of the storefront — hide it on every commerce page. */
.shopheader {
  display: none !important;
}

/* The parent theme's generic `header { position: fixed; background:#fff;
   width:100%; z-index:9999 }` rule hits EVERY <header> tag — including
   WooCommerce/WP's `<header class="entry-header">` (the page-title wrapper),
   turning it into a full-width white bar floating over the content. Reset
   every <header> that isn't ours back to normal flow. */
header:not(.wm-header) {
  position: static !important;
  width: auto !important;
  background: none !important;
  z-index: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ---- HEADER ------------------------------------------------------------- */
/* Parent theme makes <header> position:fixed (with no body padding to match),
   and body{overflow-x:hidden} breaks position:sticky — both cause the white bar
   to overlap content on scroll. Force the header into normal document flow. */
header.wm-header {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  background: #fff !important;
  border-bottom: 1px solid var(--wm-rule);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.wm-header__bar {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}
@media (min-width: 768px) {
  .wm-header__bar { padding: 1rem 1.5rem; }
}

.wm-header__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  text-decoration: none;
  flex: 0 0 auto;
}
/* High specificity + !important so no parent/inline rule (or stale cache) can
   blow the logo up to its natural ~1600px width. */
header.wm-header .wm-header__logo img {
  height: 2.25rem !important;
  width: auto !important;
  max-width: 280px !important;
  min-width: 0 !important;
  display: block !important;
}
@media (min-width: 768px) {
  header.wm-header .wm-header__logo img { height: 2.75rem !important; }
}
.wm-header__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--wm-mute);
}

.wm-header__nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .wm-header__nav { display: flex; }
}
.wm-header__nav a {
  color: var(--wm-slate);
  text-decoration: none;
  transition: color 0.15s ease;
}
.wm-header__nav a:hover { color: var(--wm-ink); }

.wm-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
}
.wm-header__account {
  display: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wm-slate);
  text-decoration: none;
  transition: color 0.15s ease;
}
@media (min-width: 640px) {
  .wm-header__account { display: inline; }
}
.wm-header__account:hover { color: var(--wm-ink); }

.wm-header__cart {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--wm-ink);
  text-decoration: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.wm-header__cart svg { height: 1.25rem; width: 1.25rem; }
.wm-header__cart .wm-cart-count {
  min-width: 1.1rem;
  text-align: center;
}

/* mobile horizontal-scroll nav strip (matches storefront) */
.wm-header__mobile {
  border-top: 1px solid var(--wm-rule);
  background: var(--wm-tint);
}
@media (min-width: 1024px) {
  .wm-header__mobile { display: none; }
}
.wm-header__mobile-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  -webkit-overflow-scrolling: touch;
}
.wm-header__mobile-inner a {
  white-space: nowrap;
  color: var(--wm-slate);
  text-decoration: none;
}
.wm-header__mobile-inner a:hover { color: var(--wm-ink); }

/* ---- FOOTER ------------------------------------------------------------- */
/* Sticky footer: short pages (notably the My Account login) otherwise leave a
   band of white below the footer. Make the body a full-height flex column and
   let the footer absorb the slack so it always sits at the bottom of the
   viewport. The footer is a direct child of <body>, so this is reliable. */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh;
}

footer.wm-footer {
  margin-top: auto; /* push to bottom on short pages; collapses to 0 on tall ones */
  padding: 0;
  border-top: 1px solid var(--wm-rule);
  background: var(--wm-tint);
  color: var(--wm-slate);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.wm-footer__grid {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  padding: 3rem 1rem;
}
@media (min-width: 768px) {
  .wm-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 3rem 1.5rem;
  }
}

.wm-footer__brand-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--wm-slate);
  margin: 0;
}
.wm-footer__blurb {
  margin: 0.75rem 0 0;
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--wm-slate);
}
.wm-footer__iso {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--wm-rule);
  padding: 0.25rem 0.625rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--wm-slate);
}
.wm-footer__iso .wm-dot {
  height: 0.375rem;
  width: 0.375rem;
  background: var(--wm-accent);
  display: inline-block;
}

.wm-footer__col h3 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wm-ink);
}
.wm-footer__col ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.wm-footer__col a {
  color: var(--wm-slate);
  text-decoration: none;
  transition: color 0.15s ease;
}
.wm-footer__col a:hover { color: var(--wm-ink); }
.wm-footer__col address {
  font-style: normal;
  line-height: 1.6;
  padding-top: 0.5rem;
}
.wm-footer__col .wm-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.wm-footer__bottom { border-top: 1px solid var(--wm-rule); }
.wm-footer__bottom-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  font-size: 0.75rem;
  color: var(--wm-slate);
}
.wm-footer__bottom-inner p { margin: 0; }
@media (min-width: 768px) {
  .wm-footer__bottom-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem;
  }
}
.wm-footer__tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}