/**
 * The site header and footer — the chrome that wraps every page, coded and
 * Elementor alike. It replaces Astra's own header/footer markup, so it also
 * has to undo Astra's global list, link and button styling rather than
 * inherit it the way `.cs-page` does.
 *
 * Tokens come from base.css, which is now enqueued sitewide. The wrap sits at
 * the design's 1120px measure, matching the shop.
 */

.cs-chrome {
  --wrap-max: 1120px;

  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
}

.cs-chrome *,
.cs-chrome *::before,
.cs-chrome *::after { box-sizing: border-box; }

/* Astra ships margins and bullets on these; the chrome is laid out with flex. */
.cs-chrome :where(p, ul, li) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-chrome a { color: inherit; text-decoration: none; }
.cs-chrome a:hover { text-decoration: none; }
.cs-chrome :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── header ─────────────────────────────────────────────── */
.cs-head {
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
  background: var(--color-bg);
  border-bottom: var(--line-hair);
  color: var(--color-text);
}

body.admin-bar .cs-head { top: 32px; }

.cs-head .head-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--wrap-max);
  padding: var(--space-3) var(--space-8);
}

.cs-chrome .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
}

.cs-chrome .brand-mark {
  width: var(--mark-size);
  height: var(--mark-size);
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.cs-chrome .brand-name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* ── navigation ─────────────────────────────────────────── */
/* `wp_nav_menu` owns this markup, so the rules hang off the list it prints
   rather than off bare anchors the way the design export does. */
.cs-head .nav-wrap { margin-inline: auto; }

.cs-head .nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.cs-head .nav-links li { position: relative; }

.cs-head .nav-links a {
  display: block;
  font-size: var(--fs-nav);
  color: var(--color-text);
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
}

.cs-head .nav-links a:hover { color: var(--color-accent-700); }

.cs-head .nav-links .current-menu-item > a,
.cs-head .nav-links .current-menu-ancestor > a,
.cs-head .nav-links .current_page_parent > a {
  color: var(--color-accent-700);
  border-bottom-color: var(--color-accent);
}

/* One level of children, opened on hover and on keyboard focus. */
.cs-head .nav-links .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 180px;
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: var(--line-hair);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-text) 12%, transparent);
}

.cs-head .nav-links li:hover > .sub-menu,
.cs-head .nav-links li:focus-within > .sub-menu { display: flex; }

.cs-head .nav-links .sub-menu a { border-bottom: 0; }

/* ── header actions ─────────────────────────────────────── */
.cs-head .head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Astra styles Woo buttons at (0,2,1) via `.woocommerce-js a.button`, so this
   carries a `body` prefix and an element type to outrank it without
   `!important` — the same shape base.css uses for the page buttons. */
body .cs-chrome a.btn,
body .cs-chrome button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

body .cs-chrome a.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

body .cs-chrome a.btn-primary:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: var(--color-bg);
}

body .cs-chrome a.btn-primary:active {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
}

.cs-head .cart-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-accent-700);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
}

/* An empty cart shows no badge. The element still has to be in the DOM for
   WooCommerce's fragment refresh to replace it, so it is hidden rather than
   skipped — and this has to outrank the `display: flex` above. */
.cs-head .cart-count.cart-count-empty { display: none; }

/* The design draws the count as an accent pill on a cream ground; inside the
   filled primary button the two swap so the badge stays legible. */
.cs-head .cart-pill:hover .cart-count { color: var(--color-accent-600); }

.cs-head .menu-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bar-gap);
  width: var(--mark-size);
  height: var(--mark-size);
  padding: 0;
  border-radius: 999px;
  border: var(--line-hair);
  background: transparent;
  cursor: pointer;
}

.cs-head .menu-btn:hover { background: var(--color-accent-100); }

.cs-head .menu-bar {
  width: var(--bar-w);
  height: var(--bar-h);
  border-radius: 999px;
  background: var(--color-text);
}

/* ── footer ─────────────────────────────────────────────── */
.cs-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-brand-blue);
  color: var(--color-neutral-100);
}

.cs-foot .foot-inner {
  display: flex;
  flex-direction: row;
  gap: var(--space-10);
  width: 100%;
  max-width: var(--wrap-max);
  padding: var(--space-12) var(--space-8) var(--space-6);
}

.cs-foot .foot-lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 34%;
}

.cs-foot .foot-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-neutral-100);
}

.cs-foot .foot-note {
  font-size: var(--fs-small);
  color: var(--color-blue-200);
  max-width: 34ch;
}

.cs-foot .foot-cols {
  display: flex;
  flex-direction: row;
  gap: var(--space-10);
  flex: 1 1 66%;
}

/* Equal shares of the row rather than shrink-wrapped and packed left, so the
   three headings sit apart across the full width. */
.cs-foot .foot-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 0;
  min-width: 0;
}

.cs-foot .foot-title {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue-300);
}

.cs-foot .foot-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-foot .foot-link {
  font-size: var(--fs-small);
  color: var(--color-neutral-100);
}

.cs-foot a.foot-link:hover { color: var(--color-accent-300); }

.cs-foot .foot-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--wrap-max);
  padding: var(--space-4) var(--space-8) var(--space-8);
  font-size: var(--fs-micro);
  color: var(--color-blue-200);
  border-top: 1px solid var(--color-blue-700);
}

.cs-foot .foot-pay {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}

.cs-foot .pay-chip {
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--color-blue-600);
  font-size: var(--fs-micro);
}

/* ── tablet ─────────────────────────────────────────────── */
/* The export uses `@container`; without a container ancestor on the live page
   those queries never match, so the breakpoints are the `@media` pair the rest
   of the theme already uses. */
@media (max-width: 900px) {
  .cs-head .head-inner,
  .cs-foot .foot-inner,
  .cs-foot .foot-bottom { padding-inline: var(--space-6); }

  .cs-head .nav-links { gap: var(--space-4); }
  .cs-foot .foot-inner { flex-direction: column; gap: var(--space-8); }
}

/* ── mobile ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .cs-head .head-inner,
  .cs-foot .foot-inner,
  .cs-foot .foot-bottom { padding-inline: var(--space-4); }

  body.admin-bar .cs-head { top: 46px; }

  .cs-head .head-inner { gap: var(--space-3); flex-wrap: wrap; }
  .cs-head .brand-name { white-space: nowrap; }
  .cs-head .head-actions { margin-left: auto; }
  .cs-head .menu-btn { display: flex; }

  /* One nav in the DOM: on mobile it becomes the panel the button opens,
     so the menu is never duplicated for screen readers. */
  .cs-head .nav-wrap {
    display: none;
    order: 3;
    width: 100%;
    margin-inline: 0;
  }

  .cs-head[data-nav-open="true"] .nav-wrap { display: block; }

  .cs-head .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: var(--space-3);
  }

  .cs-head .nav-links a {
    padding-block: var(--space-3);
    border-bottom: var(--line-hair);
  }

  .cs-head .nav-links .current-menu-item > a,
  .cs-head .nav-links .current-menu-ancestor > a,
  .cs-head .nav-links .current_page_parent > a { border-bottom-color: var(--color-accent); }

  .cs-head .nav-links .sub-menu {
    position: static;
    display: flex;
    min-width: 0;
    margin-top: 0;
    padding: 0 0 0 var(--space-4);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Stacked, so the columns go back to sizing on their content. */
  .cs-foot .foot-cols { flex-direction: column; gap: var(--space-6); }
  .cs-foot .foot-col { flex: none; }
  .cs-foot .foot-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  body .cs-chrome a.btn,
  body .cs-chrome button.btn { transition: none; }
}