/* ============================================================
   JAMAR — Site chrome: header (.jm-h-*) and footer (.jm-f-*)
   Ported from the Claude Design handoff (pages/chrome.css —
   00a Header utility-led .jb-hdr-a-*, 11a Footer dense .jb-footer-a-*)
   onto the --jm--* tokens in ../bricks-tokens.css (load that first).

   Built for the Bricks templates "jamar-main-header" and
   "jamar-main-footer". The header uses native Bricks elements
   (Nav (Nestable), Dropdown, Toggle, Search, Mini cart), so parts of
   it are styled by the markup Bricks renders (.brx-nav-nested-items,
   .brx-submenu-toggle, .mini-cart-link …). Bricks' own element CSS
   sits in @layer bricks, so these unlayered rules win without
   !important.

   Every rule is scoped to .jm-h / .jm-f, so this file is inert next
   to the older Header (65) and Footer (220) templates.

   Breakpoints follow Bricks: 991px tablet (mobile menu), 767px
   mobile landscape, 478px mobile portrait.
   ============================================================ */

/* ---------- Skip links (rendered by Bricks) ---------- */

.skip-link:focus {
  z-index: var(--jm--z-toast);
  padding: var(--jm--space-xs) var(--jm--space-s);
  background: var(--jm--color-text);
  color: var(--jm--color-surface);
  font-weight: var(--jm--weight-semibold);
  text-decoration: none;
}

/* ============================================================
   Header
   ============================================================ */

/* Declared on #brx-header as well, because the sticky offset below is set there
   and custom properties only inherit downwards. */
.jm-h,
#brx-header:has(> .jm-h) { --jm-h-util-h: 32px; }

.jm-h {
  --jm-h-main-h: 72px;
  background: var(--jm--color-surface);
}

/* Sticky: the template's native "Sticky header" setting gives #brx-header
   .brx-sticky, which Bricks positions as fixed (it would cover the top of
   every page and pin the utility bar). Switch it to position: sticky and
   offset it by the utility bar's height: the header stays in the page flow,
   the utility bar scrolls away and the main bar stays pinned — no script,
   no layout jump. Bricks still adds .scrolling after the page scrolls. */
#brx-header.brx-sticky:has(> .jm-h) {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--jm-h-util-h));
}

/* ---------- Band 1 — utility bar ---------- */

.jm-h-util {
  height: var(--jm-h-util-h);
  background: var(--jm--color-surface-alt);
  border-bottom: 1px solid var(--jm--color-border);
  font-size: var(--jm--text-xs);
  color: var(--jm--color-text-muted);
}
.jm-h-util__row {
  display: flex;
  align-items: center;
  gap: var(--jm--space-m);
  height: 100%;
}
.jm-h-util__tag {
  margin: 0;
  font-family: var(--jm--font-mono);
  letter-spacing: var(--jm--tracking-wide);
}
.jm-h-util__mid {
  display: flex;
  align-items: center;
  gap: var(--jm--space-s);
  margin-right: auto;
}
.jm-h-util__phone {
  --jm-icon-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: var(--jm--space-2xs);
  color: var(--jm--color-text);
  font-weight: var(--jm--weight-semibold);
  text-decoration: none;
}
.jm-h-util__hours {
  padding: var(--jm--space-3xs) var(--jm--space-xs);
  border-radius: var(--jm--radius-pill);
  background: color-mix(in srgb, var(--jm--color-text) 5%, transparent);
  font-family: var(--jm--font-mono);
}
.jm-h-util__right {
  display: flex;
  align-items: center;
  gap: var(--jm--space-s);
}
.jm-h-util__link,
.jm-h-util__social {
  color: var(--jm--color-text-muted);
  text-decoration: none;
}
.jm-h-util__social {
  --jm-icon-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: var(--jm-h-util-h);
}
.jm-h-util__phone:hover,
.jm-h-util__link:hover,
.jm-h-util__social:hover { color: var(--jm--color-brand); }
.jm-h-util__sep {
  width: 1px;
  height: 16px;
  background: var(--jm--color-border);
}

/* ---------- Language switcher (custom element jm-lang-switcher) ---------- */

.jm-h-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--jm--space-2xs);
  font-family: var(--jm--font-mono);
  font-size: var(--jm--text-xs);
  letter-spacing: var(--jm--tracking-wide);
}
.jm-h-lang__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--jm-h-util-h);
  padding-inline: var(--jm--space-2xs);
  color: var(--jm--color-text-muted);
  text-decoration: none;
}
a.jm-h-lang__item:hover { color: var(--jm--color-brand); }
.jm-h-lang__item[aria-current] {
  color: var(--jm--color-text);
  font-weight: var(--jm--weight-bold);
}
.jm-h-lang__sep { color: var(--jm--color-text-subtle); }

/* ---------- Band 2 — main bar ---------- */

.jm-h-main {
  height: var(--jm-h-main-h);
  background: var(--jm--color-surface);
  border-bottom: 1px solid transparent;
  transition: border-color var(--jm--duration-base) var(--jm--ease-out);
}
/* Bricks adds .scrolling to #brx-header once the page has scrolled. */
#brx-header.scrolling .jm-h-main { border-bottom-color: var(--jm--color-border); }

.jm-h-main__row {
  display: flex;
  align-items: center;
  gap: var(--jm--space-l);
  height: 100%;
}

.jm-h-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.jm-h-brand .bricks-site-logo {
  display: block;
  width: auto;
  height: 40px;
}

/* ---------- Primary nav (Nav (Nestable)) — desktop ---------- */

.jm-h-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.jm-h-nav__items {
  display: flex;
  align-items: center;
  gap: var(--jm--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-h-nav__link,
.jm-h-nav__dd > .brx-submenu-toggle > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--jm--text-base);
  font-weight: var(--jm--weight-medium);
  color: var(--jm--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.jm-h-nav__link:hover,
.jm-h-nav__dd:hover > .brx-submenu-toggle > span { color: var(--jm--color-brand); }

/* Active page — Bricks sets aria-current="page" on the matching link. */
.jm-h-nav__link[aria-current="page"]::after,
.jm-h-nav__dd > .brx-submenu-toggle.aria-current > span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: var(--jm--color-brand);
}

/* Dropdown toggle ("Company ▾") */
.jm-h-nav__dd > .brx-submenu-toggle {
  display: flex;
  align-items: center;
  gap: var(--jm--space-3xs);
}
.jm-h-nav__dd > .brx-submenu-toggle > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--jm--color-text-muted);
  cursor: pointer;
}
.jm-h-nav__dd > .brx-submenu-toggle > button > * {
  width: 10px;
  height: 10px;
  transition: transform var(--jm--duration-base) var(--jm--ease-out);
}
.jm-h-nav__dd > .brx-submenu-toggle > button[aria-expanded="true"] > * { transform: rotate(180deg); }
.jm-h-nav__dd > .brx-submenu-toggle > button:focus-visible {
  outline: 2px solid var(--jm--color-brand);
  outline-offset: 2px;
}

/* Dropdown panel */
.jm-h-nav__menu {
  min-width: 220px;
  margin: 0;
  padding: var(--jm--space-xs) 0;
  list-style: none;
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
  box-shadow: var(--jm--shadow-soft);
}
.jm-h-nav__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--jm--space-m);
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-medium);
  color: var(--jm--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.jm-h-nav__sublink:hover,
.jm-h-nav__sublink[aria-current="page"] {
  background: var(--jm--color-surface-alt);
  color: var(--jm--color-brand);
}

/* Drawer-only extras and the close toggle stay hidden on desktop. */
.jm-h-nav__items > li:has(> .jm-h-drawer) { display: none; }

/* ---------- Actions: search, account, mini cart, CTA ---------- */

.jm-h-actions {
  display: flex;
  align-items: center;
  gap: var(--jm--space-2xs);
  flex-shrink: 0;
}

/* Shared 44 px round icon button. Search and Mini cart render their own
   buttons; the icon itself is the theme's CSS-mask icon, taken from the
   jm-icon--{name} class on the element root (the --jm-icon property
   inherits), so all header icons share one style. */
.jm-h-icon-btn,
.jm-h-search > .toggle,
.jm-h-cart .mini-cart-link {
  --jm-icon-size: 1.25rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--jm--color-text);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--jm--duration-base) var(--jm--ease-out);
}
.jm-h-icon-btn:hover,
.jm-h-search > .toggle:hover,
.jm-h-cart .mini-cart-link:hover {
  background: var(--jm--color-surface-alt);
  color: var(--jm--color-text);
}
.jm-h-search > .toggle:focus-visible,
.jm-h-cart .mini-cart-link:focus-visible {
  outline: 2px solid var(--jm--color-brand);
  outline-offset: 2px;
}
.jm-h-search > .toggle > i,
.jm-h-search > .toggle > svg,
.jm-h-cart .cart-icon > i,
.jm-h-cart .cart-icon > svg { display: none; }
.jm-h-search > .toggle::before,
.jm-h-cart .cart-icon::before {
  content: '';
  display: block;
  width: var(--jm-icon-size);
  height: var(--jm-icon-size);
  background-color: currentColor;
  -webkit-mask: var(--jm-icon) center / contain no-repeat;
          mask: var(--jm-icon) center / contain no-repeat;
}
.jm-h-cart .cart-icon {
  position: relative;
  display: inline-flex;
}

/* Cart badge — one of the three places red is used in the header. */
.jm-h-cart .cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--jm--space-2xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--jm--color-surface);
  border-radius: var(--jm--radius-pill);
  background: var(--jm--color-brand);
  color: var(--jm--color-on-brand);
  font-size: 0.625rem;
  font-weight: var(--jm--weight-bold);
  line-height: 1;
}

/* Mini cart off-canvas panel */
.jm-h-cart .cart-detail {
  background: var(--jm--color-surface);
  color: var(--jm--color-text);
  box-shadow: var(--jm--shadow-card);
}
.jm-h-cart .bricks-mini-cart-close {
  width: 44px;
  height: 44px;
}

/* Search overlay */
.jm-h-search .bricks-search-overlay {
  z-index: var(--jm--z-overlay);
  background: color-mix(in srgb, var(--jm--color-surface) 97%, transparent);
}
.jm-h-search .bricks-search-overlay .title {
  font-size: var(--jm--text-2xl);
  color: var(--jm--color-text);
}
.jm-h-search .bricks-search-overlay input[type="search"] {
  height: 56px;
  padding-inline: var(--jm--space-m);
  font: inherit;
  font-size: var(--jm--text-l);
  color: var(--jm--color-text);
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border-strong);
  border-radius: var(--jm--radius-s);
}
.jm-h-search .bricks-search-overlay input[type="search"]:focus {
  outline: none;
  border-color: var(--jm--color-brand);
  box-shadow: var(--jm--shadow-focus);
}
.jm-h-search .bricks-search-overlay .close {
  width: 44px;
  height: 44px;
  font-size: var(--jm--text-2xl);
  color: var(--jm--color-text);
}

.jm-h-cta {
  margin-left: var(--jm--space-xs);
  min-height: 44px;
  white-space: nowrap;
}

/* Small desktop (992–1279 px): the bar holds six links (EN) or five long
   PL ones ("Zamówienia indywidualne"), so it tightens before the mobile
   menu takes over at 991 px. Widths measured in Chrome on 2026-10-24. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .jm-h-main__row { gap: var(--jm--space-m); }
  .jm-h-nav__items { gap: var(--jm--space-m); }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .jm-h-main__row { gap: var(--jm--space-s); }
  .jm-h-nav__items { gap: var(--jm--space-s); }
  .jm-h-nav__link,
  .jm-h-nav__dd > .brx-submenu-toggle > span { font-size: var(--jm--text-s); }
  .jm-h-cta { margin-left: 0; }
}
/* PL below 1100 px: no room for the header button; the first nav link
   ("Zamówienia indywidualne") goes to the same page. */
@media (min-width: 992px) and (max-width: 1099px) {
  :lang(pl) .jm-h-cta { display: none; }
}
/* EN below 1024 px, since Design joined the bar (2026-10-27): same reason,
   "Custom orders" is the first nav link. Checked 992–1920 px. */
@media (min-width: 992px) and (max-width: 1023px) {
  .jm-h-cta { display: none; }
}

/* ---------- Tablet / mobile (≤ 991 px): Nav (Nestable) mobile menu ---------- */

@media (max-width: 991px) {
  .jm-h { --jm-h-main-h: 56px; }

  /* Utility bar: phone + language only */
  .jm-h-util__tag,
  .jm-h-util__hours,
  .jm-h-util__link,
  .jm-h-util__social,
  .jm-h-util__sep { display: none; }

  .jm-h-main__row { gap: var(--jm--space-xs); }
  .jm-h-brand { margin-right: auto; }
  .jm-h-brand .bricks-site-logo { height: 28px; }

  /* Order: logo · search · cart · hamburger */
  .jm-h-nav { flex: 0 0 auto; order: 3; }
  .jm-h-actions { order: 2; }
  .jm-h-account,
  .jm-h-cta { display: none; }

  /* Hamburger (Toggle element) */
  .jm-h-burger {
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--jm--color-text);
    --brxe-toggle-scale: 0.7;
  }

  /* The drawer: Bricks shows .brx-nav-nested-items as a fixed full-screen
     layer and toggles .brx-open on the nav. Turn it into a panel on the
     right with a dimmed page behind it. */
  .jm-h-nav .jm-h-nav__items {
    left: auto;
    width: min(100%, 400px);
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--jm--space-3xl) var(--jm--container-pad) var(--jm--space-l);
    background: var(--jm--color-surface);
    box-shadow: 0 0 0 100vmax var(--jm--color-overlay);
  }
  .jm-h-nav__items > li {
    border-bottom: 1px solid var(--jm--color-border);
  }
  .jm-h-nav__items > li:has(> .jm-h-drawer) {
    display: block;
    border-bottom: 0;
  }
  .jm-h-nav__items > li:has(> .brx-toggle-div) { border-bottom: 0; }

  .jm-h-nav__link,
  .jm-h-nav__dd > .brx-submenu-toggle > span {
    width: 100%;
    min-height: 52px;
    font-size: var(--jm--text-l);
  }
  .jm-h-nav__link[aria-current="page"]::after,
  .jm-h-nav__dd > .brx-submenu-toggle.aria-current > span::after {
    right: auto;
    width: var(--jm--space-m);
  }
  .jm-h-nav__dd > .brx-submenu-toggle { justify-content: space-between; }
  .jm-h-nav__dd > .brx-submenu-toggle > button { width: 44px; }

  /* Company: opens in place inside the drawer */
  .jm-h-nav__menu {
    min-width: 0;
    padding: 0 0 var(--jm--space-xs) var(--jm--space-s);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .jm-h-nav__sublink { padding-inline: 0; font-size: var(--jm--text-base); }
  .jm-h-nav__sublink:hover,
  .jm-h-nav__sublink[aria-current="page"] { background: none; }

  /* Close toggle, top right of the panel */
  .jm-h-burger--close {
    position: absolute;
    top: var(--jm--space-s);
    right: var(--jm--container-pad);
  }

  /* Drawer extras: CTA, account, phone, hours */
  .jm-h-drawer {
    display: flex;
    flex-direction: column;
    gap: var(--jm--space-s);
    padding-top: var(--jm--space-l);
  }
  .jm-h-drawer__cta { width: 100%; min-height: 48px; }
  .jm-h-drawer__link {
    --jm-icon-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    gap: var(--jm--space-xs);
    min-height: 44px;
    font-weight: var(--jm--weight-medium);
    color: var(--jm--color-text);
    text-decoration: none;
  }
  .jm-h-drawer__link:hover { color: var(--jm--color-brand); }
  .jm-h-drawer__hours {
    margin: 0;
    font-family: var(--jm--font-mono);
    font-size: var(--jm--text-xs);
    color: var(--jm--color-text-muted);
  }
}

/* Drawer slides in only when motion is welcome. */
@media (max-width: 991px) and (prefers-reduced-motion: no-preference) {
  .jm-h-nav .jm-h-nav__items {
    transform: translateX(24px);
    transition: opacity var(--jm--duration-base) var(--jm--ease-out),
                visibility var(--jm--duration-base) var(--jm--ease-out),
                transform var(--jm--duration-slow) var(--jm--ease-out);
  }
  .jm-h-nav.brx-open .jm-h-nav__items { transform: none; }
}

/* ============================================================
   Footer — dense (dark)
   ============================================================ */

.jm-f {
  background: var(--jm--color-surface-dark);
  color: var(--jm--color-on-surface-dark);
}
.jm-f__inner {
  padding-block: var(--jm--space-2xl) var(--jm--space-m);
}
.jm-f__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--jm--space-xl);
}

/* Links — muted white; hover goes full white with a red underline.
   Red text on the dark surface would fall below 4.5:1, so red is the
   underline, not the text. */
.jm-f a {
  color: color-mix(in srgb, var(--jm--color-on-surface-dark) 78%, transparent);
  text-decoration: none;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}
.jm-f a:hover {
  color: var(--jm--color-on-surface-dark);
  text-decoration: underline;
  text-decoration-color: var(--jm--color-brand);
}

/* ---------- Column 1 — brand & legal ---------- */

.jm-f-brand__logo {
  display: inline-flex;
  margin-bottom: var(--jm--space-m);
}
.jm-f-brand__logo img {
  display: block;
  width: auto;
  height: 36px;
}
.jm-f-brand__blurb {
  max-width: 38ch;
  margin: 0 0 var(--jm--space-m);
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-relaxed);
  color: color-mix(in srgb, var(--jm--color-on-surface-dark) 78%, transparent);
}
.jm-f-legal {
  margin: 0 0 var(--jm--space-m);
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-relaxed);
  color: color-mix(in srgb, var(--jm--color-on-surface-dark) 70%, transparent);
}
.jm-f-legal p { margin: 0; }
.jm-f-legal__co {
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-on-surface-dark);
}
/* Placeholder chip for values still to be supplied — same role as .jm-c-legal__todo. */
.jm-f-todo {
  display: inline-block;
  padding: 0 var(--jm--space-2xs);
  border-radius: var(--jm--radius-xs);
  background: color-mix(in srgb, var(--jm--color-warning) 30%, transparent);
  color: var(--jm--color-on-surface-dark);
  font-size: var(--jm--text-xs);
  letter-spacing: var(--jm--tracking-wide);
}

.jm-f-social {
  display: flex;
  gap: var(--jm--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-f .jm-f-social__link {
  --jm-icon-size: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--jm--color-on-surface-dark);
  transition: background var(--jm--duration-base) var(--jm--ease-out);
}
.jm-f .jm-f-social__link:hover {
  background: color-mix(in srgb, var(--jm--color-on-surface-dark) 8%, transparent);
  text-decoration: none;
}

/* ---------- Columns 2–4 — link lists ---------- */

.jm-f-col__h {
  margin: 0 0 var(--jm--space-s);
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-bold);
  line-height: var(--jm--leading-normal);
  letter-spacing: var(--jm--tracking-wide);
  text-transform: uppercase;
  color: var(--jm--color-on-surface-dark);
}
.jm-f-nav {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-f-nav a,
.jm-f-nav__btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: var(--jm--text-s);
}
/* "Cookie settings": a button (Complianz opens its banner on
   button.cmplz-manage-consent), styled like the links around it. */
.jm-f-nav__btn {
  margin: 0;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
  text-align: start;
  color: color-mix(in srgb, var(--jm--color-on-surface-dark) 78%, transparent);
  background: none;
  border: 0;
  cursor: pointer;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}
.jm-f-nav__btn:hover {
  color: var(--jm--color-on-surface-dark);
  text-decoration: underline;
  text-decoration-color: var(--jm--color-brand);
}
.jm-f-nav__btn:focus-visible {
  outline: none;
  box-shadow: var(--jm--shadow-focus);
  border-radius: var(--jm--radius-xs);
}

/* ---------- Bottom strip ---------- */

.jm-f-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--jm--space-xs) var(--jm--space-l);
  margin-top: var(--jm--space-xl);
  padding-top: var(--jm--space-s);
  border-top: 1px solid color-mix(in srgb, var(--jm--color-on-surface-dark) 12%, transparent);
  font-size: var(--jm--text-xs);
  color: color-mix(in srgb, var(--jm--color-on-surface-dark) 65%, transparent);
}
.jm-f-bottom p { margin: 0; }

@media (max-width: 991px) {
  .jm-f__grid { grid-template-columns: 1fr 1fr; gap: var(--jm--space-l); }
}
@media (max-width: 767px) {
  .jm-f-nav a,
  .jm-f-nav__btn { min-height: 44px; }
}
@media (max-width: 478px) {
  .jm-f__grid { grid-template-columns: 1fr; }
}