/*
 * Nesa Underwear site header styles.
 */

/* The DM Sans Google-Fonts @import that was here is deleted: nothing
 * referenced the family, and the request leaked every visit to Google —
 * the site's fonts are self-hosted (assets/css/fonts.css). */

:root {
  /*
   * The inherited palette's green, retired.
   *
   * #1f8a3a was the previous build's accent and still drove ~15 hover, focus
   * and active states — nav links, breadcrumbs, cart-table links, the profile
   * sync button. Nesa's palette has exactly one saturated colour and it is
   * reserved for sale prices (see tokens.css), so these resolve to ink instead.
   * Redefined here rather than edited at each of the 15 call sites.
   */
  --bp-green:        var(--nesa-ink);
  --bp-green-dark:   #000000;
  --bp-announce-bg:  var(--nesa-ink);
  --bp-text:         var(--nesa-ink);
  --bp-muted:        var(--nesa-ink-soft);
  --bp-border:       var(--nesa-line);
  --bp-surface:      var(--nesa-cream);
  --bp-bg:           #ffffff;
  --bp-pill-radius:  9999px;
}

@media (max-width: 1024px) { .bp-site-header { display: none; } }

.bp-site-header {
  background: #ffffff !important;
  color: var(--bp-text);
  font-family: var(--oxa-font-sans);
  border-bottom: 1px solid var(--bp-border);
}

.bp-container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Align the header content box with the page content column
 * (cart / shop / single-product main column = 1280px, flush — matches the
 * breadcrumb, page title and cart table). Scoped to the header so the footer
 * and announcement bar keep their own widths. */
.bp-site-header .bp-container {
  max-width: 1280px;
  padding-inline: 0;
}

/*
 * Announcement bar: no rules here.
 *
 * The inherited block painted the bar from --bp-announce-bg and fixed it to a
 * 40px flex row, both of which the Nesa block further down restates from
 * --nesa-announce-*. Deleted rather than overridden — an override would have
 * left the old palette variable resolving underneath.
 */

/* ---------- Primary row ---------- */
.bp-header-main { padding-block: 1rem; }
.bp-header-main__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Logo */
.bp-logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }

/* Search */
.bp-search { flex: 1; position: relative; display: flex; align-items: center; }
.bp-search__icon {
  position: absolute; left: 1rem; color: var(--bp-muted);
  pointer-events: none; display: flex; align-items: center;
}
.bp-search__input {
  width: 100%; height: 48px; padding: 0 1rem 0 3rem;
  border: 1px solid var(--bp-border); border-radius: var(--bp-pill-radius);
  font-size: 0.9375rem; color: var(--bp-text); background: var(--bp-bg);
  outline: none; transition: border-color 0.2s ease;
}
.bp-search__input:focus { border-color: var(--nesa-ink); }
.bp-search__input::placeholder { color: var(--bp-muted); }

/* Auth button — fills green on hover */
.bp-auth {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0 1.5rem; height: 52px;
  border: 1px solid var(--bp-border); border-radius: var(--bp-pill-radius);
  color: var(--bp-text); font-size: 0.875rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer; background: var(--bp-bg);
}
.bp-auth:hover {
  background: var(--nesa-ink);
  border-color: var(--nesa-ink);
  color: #fff;
}
.bp-auth__icon { display: flex; align-items: center; flex-shrink: 0; }
.bp-auth__label { font-size: 0.875rem; }

/* Auth dropdown */
.bp-auth-wrap { position: relative; }
.bp-auth-dropdown {
  position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 200px;
  background: var(--bp-bg); border: 1px solid var(--bp-border);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  padding: 0.5rem 0; opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 9001;
}
.bp-auth-wrap:hover .bp-auth-dropdown { opacity: 1; visibility: visible; }
.bp-auth-dropdown__item {
  display: block; padding: 0.625rem 1.25rem; font-size: 0.9375rem;
  color: var(--bp-text); text-decoration: none; transition: background 0.15s ease;
}
.bp-auth-dropdown__item:hover { background: var(--bp-surface); }

/* Cart button — black default, green on hover, white text always */
.bp-cart {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0 1.25rem; height: 52px;
  background: var(--nesa-ink); color: #fff;
  border-radius: var(--bp-pill-radius); font-size: 0.875rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background 0.2s ease; cursor: pointer; border: none; position: relative;
}
.bp-cart:hover { background: var(--nesa-ink); color: #fff; }
.bp-cart__icon { display: flex; align-items: center; }
.bp-cart__amount { font-size: 0.9375rem; }
.bp-cart__count {
  position: absolute; top: 6px; right: 6px;
  min-width: 20px; height: 20px; border-radius: 9999px;
  background: var(--bp-green); color: #fff;
  font-size: 0.75rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* ---------- Secondary nav row ---------- */
.bp-header-nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.bp-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 0;
}
/*
 * Horizontal spacing only — vertical sizing belongs to .bp-nav__link.
 *
 * This rule used to carry `padding: 0 1rem; height: 62px`, both left over from
 * the old two-row header. Two problems, and it outspecifies .bp-nav__link
 * (0,2,1 against 0,1,0), so it won both:
 *
 *   - `height: 62px` pinned the label box to 62px at the TOP of the row
 *     instead of letting it stretch. In a 68px row that was 3px off centre and
 *     went unnoticed; at 80px it became a visible 9px, which is why the labels
 *     read as sitting high.
 *   - `padding: 0 1rem` is a shorthand, so it also set padding-block: 0 and
 *     silently discarded the padding-block on .bp-nav__link.
 *
 * `padding-inline` keeps the horizontal spacing byte-identical while leaving
 * the block axis alone. Fixed here rather than by adding !important further
 * down, which would only have moved the conflict.
 */
.bp-nav__item > a,
.bp-nav__trigger {
  display: inline-flex; align-items: center; gap: 0.375rem;
  /*
   * 13px / 0.5rem, down from 16px / 1rem.
   *
   * Eight uppercase items at 16px with 0.09em tracking and 32px of padding each
   * came to roughly 1,100px of nav. Added to the logo, the 300px search and the
   * three action icons that overflowed the row, and OUTLET ended up underneath
   * the search box.
   */
  padding-inline: 0.5rem;
  font-size: 13px; font-weight: 500; color: var(--nesa-ink);
  text-decoration: none; white-space: nowrap; transition: color 0.2s ease;
}
/* No color change on hover — keep the same var(--nesa-ink) */
.bp-nav__item > a:hover,
.bp-nav__item:hover > a,
.bp-nav__trigger:hover { color: var(--nesa-ink); }
.bp-nav__caret { display: inline-flex; align-items: center; opacity: 0.5; transition: transform 0.2s ease; }
.bp-nav__item--has-children:hover .bp-nav__caret { transform: rotate(180deg); }

/* First nav item sits flush-left with the logo / content edge */
.bp-nav__list > .bp-nav__item:first-child > a,
.bp-nav__list > .bp-nav__item:first-child .bp-nav__trigger {
  padding-left: 0;
}

/* Meta blocks */
.bp-header-meta { display: flex; align-items: center; gap: 1.5rem; }
.bp-meta-block { display: flex; align-items: center; gap: 0.625rem; }
.bp-meta-block__icon { display: flex; align-items: center; color: var(--nesa-ink); }
.bp-meta-block__img { display: block; width: 28px; height: 28px; object-fit: contain; }
.bp-meta-block__text {
  display: flex; flex-direction: column; gap: 0.125rem;
  font-family: var(--nesa-font-sans);
}
.bp-meta-block__top { font-size: 13px; color: var(--nesa-ink); }
.bp-meta-block__bottom { font-size: 16px; font-weight: 600; color: var(--nesa-ink); }
.bp-meta-block__bottom--phone,
.bp-meta-block__bottom--phone:hover,
.bp-meta-block__bottom--phone:focus {
  color: var(--nesa-ink);
  text-decoration: none;
  opacity: 1;
}

/* ══ Nesa header ═══════════════════════════════════════════════════════════
 *
 * Single row — logo, nav, search, actions — with the mega panel dropping from
 * its bottom edge. Appended after the inherited rules so these win on source
 * order without !important.
 */

.bp-site-header {
  position: relative;
  background: var(--nesa-bg);
  z-index: 50;
}

/* ── Announcement bar ──────────────────────────────────────────────────── */

.bp-announcement {
  background: var(--nesa-announce-bg, var(--nesa-ink));
  color: var(--nesa-announce-ink, #fff);
}

/*
 * One centred message.
 *
 * This was a three-column grid, one column per slot. SCRUM-663 point 4 asks
 * for the single line, so the grid and the `:has(:only-child)` fallback that
 * used to collapse it are both gone — a flex row centres the one item without
 * needing the fallback at all.
 */
.bp-announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--nesa-gutter);
}

.bp-announcement__item {
  margin: 0;
  text-align: center;
  font-family: var(--nesa-font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.bp-announcement__item strong { font-weight: 600; }

.bp-announcement__link {
  margin-left: .5em;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Header row ────────────────────────────────────────────────────────── */

/*
 * No vertical padding on the row.
 *
 * The inherited rule put `padding-block: 1rem` on .bp-header-main, which is the
 * element that draws the bottom hairline. That pushed the rule 16px below the
 * nav links, so the active underline — which sits at the bottom of its link —
 * floated above the line instead of resting on it. Row height comes from
 * min-height on __inner instead, so the underline and the hairline meet.
 */
.bp-header-main {
  padding-block: 0;
  border-bottom: 1px solid var(--nesa-line);
}

/* One hairline, not two: .bp-site-header carries its own border-bottom in the
 * inherited rules, which doubled up with the row's. */
.bp-site-header { border-bottom: 0; }

/* Full-bleed. The inherited rule pins .bp-site-header .bp-container to a
 * centred 1280px column, which left the logo floating well inside the left
 * edge instead of aligning with it. */
.bp-site-header .bp-container,
.bp-header-main .bp-container {
  width: 100%;
  max-width: none;
  padding-inline: var(--nesa-gutter);
}

.bp-header-main__inner {
  display: flex;
  align-items: stretch;   /* lets the nav links span the full row height */
  gap: clamp(1rem, 2vw, 2.5rem);
  /* 80px, up from 68px: the logo went 44px -> 56px and this keeps the same
   * 12px of clearance above and below it. The mobile header runs its own logo
   * at 90px, which is part of why 44px read small here by comparison. */
  min-height: 80px;
}

/* Logo, search and actions stay vertically centred; only the nav stretches. */
.bp-header-main__inner > .custom-logo-link,
.bp-header-main__inner > .bp-logo,
.bp-header-main__inner > .bp-search,
.bp-header-main__inner > .bp-header-actions { align-self: center; }

.custom-logo-link,
.bp-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

/*
 * Logo size — the single source of truth, identical on every page.
 *
 * `.custom-logo` on its own (0,1,0) loses to WooCommerce's
 * `.woocommerce img,.woocommerce-page img{height:auto;max-width:100%}` in
 * woocommerce-layout.css (0,1,1), and `body` carries `woocommerce
 * woocommerce-page` on shop, category, product, cart, checkout and account
 * pages — but not on the homepage. So the logo kept its 44px there and fell
 * back to its intrinsic 826x404 everywhere else, which is what pulled the
 * header row apart. `.bp-site-header img.custom-logo` (0,2,1) outspecifies
 * the WooCommerce rule, so no !important and no page-scoped exceptions.
 *
 * max-width is none on purpose: height is what fixes the logo's size, and a
 * width cap would squash a wider logo file instead of scaling it.
 */
.bp-site-header img.custom-logo,
.bp-site-header .custom-logo-link img {
  height: var(--nesa-logo-h);
  max-height: var(--nesa-logo-h);
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

.bp-logo--wordmark { flex-direction: column; line-height: 1; color: var(--nesa-ink); }
.bp-logo__name { font-family: var(--nesa-font-serif); font-size: 2.125rem; letter-spacing: .02em; }
.bp-logo__sub {
  font-family: var(--nesa-font-sans);
  font-size: .5625rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .34em; text-indent: .34em;
  color: var(--nesa-ink-soft);
}

/* ── Search ────────────────────────────────────────────────────────────── */

.bp-search {
  position: relative;
  display: flex;
  align-items: center;
  /* 240px: the search does not need to be the widest thing in the row, and the
   * nav has eight items to fit beside it. */
  flex: 0 1 240px;
  margin-left: auto;   /* pushes search + actions to the right edge */
}

.bp-search__icon {
  position: absolute;
  left: .75rem;
  display: flex;
  color: var(--nesa-ink-soft);
  pointer-events: none;
}

.bp-search__input {
  width: 100%;
  height: 42px;
  padding: 0 .875rem 0 2.25rem;
  border: 1px solid var(--nesa-line);
  border-radius: 0;
  background: var(--nesa-bg);
  font-family: var(--nesa-font-sans);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--nesa-ink);
  transition: border-color var(--oxa-dur) var(--oxa-ease);
}
.bp-search__input::placeholder { color: var(--nesa-ink-soft); text-transform: uppercase; letter-spacing: .1em; }
.bp-search__input:focus { outline: none; border-color: var(--nesa-ink); }

/* ── Actions ───────────────────────────────────────────────────────────── */

.bp-header-actions {
  display: flex;
  align-items: center;
  /* Tight: each .bp-action is a 44px box with its own padding, so the icons
   * already sit ~18px apart at a 4px gap. The previous clamp reached 24px on a
   * wide screen, which spaced the three icons out like separate controls rather
   * than one cluster. */
  gap: clamp(.125rem, .4vw, .375rem);
  flex-shrink: 0;
}

/*
 * Icon buttons (SCRUM-663 point 4).
 *
 * 44px square, which is the minimum comfortable touch target — the icon itself
 * is 22px and the rest is padding, so the tap area is right on a phone without
 * the icons looking oversized on a desktop header.
 */
.bp-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--nesa-ink);
  transition: opacity var(--oxa-dur) var(--oxa-ease);
}
.bp-action:hover { opacity: .6; }

/* 26px, up from the 22px in the SVG's own attributes. Sized here rather than on
 * each <svg> so the three icons cannot drift apart, and the 44px touch target
 * around them is unchanged. */
.bp-action__icon {
  display: block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

/*
 * Cart count.
 *
 * Sits on the bag rather than beside it, so adding an item does not shift the
 * three icons sideways. Rendered only above zero — see header.php.
 */
/*
 * `hidden` must actually hide it.
 *
 * The rule below sets `display: inline-flex`, which beats the user-agent's
 * `[hidden] { display: none }` — author styles win. So the wishlist badge, which
 * is rendered with `hidden` at zero so the script can update it in place,
 * displayed a "0" instead of nothing.
 */
.bp-action__count[hidden] { display: none; }

.bp-action__count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding-inline: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nesa-ink);
  color: #fff;
  border-radius: 999px;   /* the one pill on the page: it is a count, not a UI surface */
  font-family: var(--nesa-font-sans);
  font-size: .5625rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1200px) {
  .bp-search { flex-basis: 200px; }
}