/* ==========================================================================
   The Sewing Birdie — header (announcement bar, header row, mega menu,
   search overlay, mobile drawer, minimal checkout header)
   Matches mockups/Header.dc.html and the header in mockups/Checkout.dc.html.
   ========================================================================== */

/* --- Announcement bar ----------------------------------------------------
   The mockup's bar is `display:block; padding:10px 16px; font-size:13px;
   letter-spacing:.08em; uppercase` (Header.dc.html), which measures 40.14px
   tall — under the 44px minimum touch target 01-shared-context.md §4 requires,
   and the whole bar is the link, so the bar itself is the target. It keeps
   every value the design gives it (type size, tracking, uppercase, colour,
   10px/16px padding) and gains `min-height: var(--sb-tap)` with the label
   centred in it; box-sizing is stated so the 44px is the bar's OUTER height
   rather than 44px of content plus padding. It is a flex container only so the
   one line of text (two lines at 390px, where the bar already measured 60px)
   can be centred; it is still a full-width block-level box. */
.tsb-announce {
  align-items: center;
  background-color: var(--sb-accent-strong);
  box-sizing: border-box;
  color: var(--sb-surface);
  display: flex;
  font-size: var(--sb-size-caption);
  justify-content: center;
  letter-spacing: 0.08em;
  min-height: var(--sb-tap);
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.tsb-announce:hover,
.tsb-announce:focus {
  background-color: var(--sb-accent-hover);
  color: var(--sb-surface);
  text-decoration: underline;
}

/* --- Header row ---------------------------------------------------------- */
/* Kadence's own CSS writes to #masthead by id ("background:#c89484"), and the
   transparent-header settings position it absolutely on the front page. The id
   is kept so anything else that looks for #masthead still finds the header, so
   those two rules have to be answered at equal-or-higher specificity.

   The bar is --sb-surface (white), not --sb-bg: production's header ran on its
   white "surface" token over the warm #FAF8F5 page, and a white bar keeps the
   lockup crisp against the warm background. */
#masthead.tsb-header,
.transparent-header #masthead.tsb-header,
.mobile-transparent-header #masthead.tsb-header {
  background-color: var(--sb-surface);
  position: relative;
  /* Kadence's mobile-transparent-header rule sets z-index:100 on #masthead,
     which would paint the header above the mobile drawer (z-index 60). */
  z-index: 30;
}

.tsb-header {
  background-color: var(--sb-surface);
  border-bottom: 1px solid var(--sb-line);
  font-family: var(--sb-font-body);
  position: relative;
  z-index: 30;
}

.tsb-header__bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-inline: auto;
  max-width: var(--sb-wrap);
  padding: 14px var(--sb-gutter);
}

.tsb-wordmark {
  align-items: center;
  color: var(--sb-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--sb-font-display);
  font-size: 34px;
  line-height: 1;
  /* 44px touch target: the type size is the mockup's, the box around it is not
     (measured 34px tall desktop / 26px mobile before this). */
  min-height: var(--sb-tap);
  text-decoration: none;
}

.tsb-wordmark:hover,
.tsb-wordmark:focus {
  color: var(--sb-ink);
}

/* --- Wordmark lockup: the owner's logo, then the serif wordmark ----------
   The anchor holds ONE inline-flex lockup rather than two flex items. Keeping
   it as a single box means the flex item the 44px bar centres is still one
   thing, and inside it the logo and the text share a formatting context, so
   `align-items: baseline` puts the image's bottom edge on the text's baseline
   — an inline-level replaced element's baseline IS its bottom margin edge.

   The alternative (align-items: baseline on the anchor itself) was tried and
   rejected: in a single-line flex container the flex line fills the 44px box
   and a baseline-aligned group is placed from the cross-start edge, so the
   text jumped ~5px up inside its target.

   The image is --sb-wordmark-logo-h tall (0.841em = cap height / the artwork's
   share of the PNG) and nudged down by the artwork's own transparent bottom
   padding so the ARTWORK, not the invisible padding, sits on the baseline.
   width:auto plus the img's real width/height attributes give the browser the
   aspect ratio before the file arrives, so the box is reserved and CLS stays 0
   — never hard-code the ratio here, the owner can swap the image in the
   Customizer and the ratio is whatever the new attachment is. */
.tsb-wordmark__lockup {
  align-items: baseline;
  display: inline-flex;
  gap: var(--sb-wordmark-logo-gap);
}

/* Two classes, not one: WooCommerce ships `.woocommerce-page img { height: auto;
   max-width: 100% }` at specificity (0,1,1), which BEATS a single-class rule
   (0,1,0). With only `.tsb-wordmark__logo` the image fell back to its intrinsic
   250px height on /shop/, /cart/, /checkout/, /my-account/ and every product
   page — i.e. everywhere except pages that are not WooCommerce pages. The extra
   class takes this to (0,2,0), which wins wherever it loads. */
/* INK, not the artwork's own pale grey (owner decision, Phase 2).
   The mark's stroke measured #8F8387 = 3.44:1 on --sb-bg while the wordmark next
   to it is --sb-ink at 13.47:1, so the pair read as two different colours and the
   mark as washed out. This paints the mark in --sb-ink while keeping the
   artwork's alpha, so every stroke keeps its exact anti-aliasing, nothing is
   redrawn, and attachment 138 is never touched.

   `brightness(0)` flattens the artwork to a single black silhouette; the rest of
   the chain walks that black back up to exactly #2D2A26. Verified in a real
   browser against a solid black swatch: the chain renders rgb(45,42,38),
   byte-identical to --sb-ink. invert() sets the level, sepia() warms it,
   saturate() and brightness() trim it to the exact value. If --sb-ink ever
   moves, re-derive the chain — this is the one place the token is duplicated,
   because a CSS filter cannot read a custom property.

   Why flatten rather than scale (`brightness(0.45)` and friends)? Attachment
   138's ALPHA is a clean silhouette of the whole mark — 81,376 of its 92,750
   pixels are fully transparent and the rest is one connected drawing — but its
   RGB is not a single colour: 149 distinct values, including a saturated dark
   brown (#381A04, the curved wordmark) and a lighter warm grey (#8F8387, the
   bird outline). Scaling would need the outline's grey driven down to ink, which
   takes the brown to ~17.5:1 — i.e. darker than the wordmark — so the lockup
   would stop being uniform and the artwork would go near black. Flattening puts
   every stroke at the wordmark's own value: nothing is blacker than --sb-ink.
   The drawing survives because its detail is geometry (outlines over the
   transparent page), not tone — checked at the rendered 28.6px, where the bird's
   head, eye, wing line, the needle and the small curved wordmark all still read.
   Measurements: reports/phase-2-logo-dark-contrast.md. */
.tsb-wordmark .tsb-wordmark__logo {
  display: block;
  flex: none;
  filter: brightness(0) invert(0.135) sepia(0.75) saturate(0.6) brightness(1.06);
  height: var(--sb-wordmark-logo-h);
  transform: translateY(var(--sb-wordmark-logo-nudge));
  width: auto;
}

/* The wordmark is the link's accessible name; keep it on one line so the pair
   never breaks into two rows inside the target. */
.tsb-wordmark__text {
  white-space: nowrap;
}

/* --- Primary navigation -------------------------------------------------- */
.tsb-nav {
  align-items: center;
  display: flex;
  /* 320px, not 360px: flex line BREAKING uses the flex BASE size, not the
     content size, so on a 1024px viewport (961px of content, 15px scrollbar)
     bases of 360+360 + the 262px wordmark lockup + two 16px gaps = 1013.6px
     overflowed the line and dropped the utilities onto a second row, making the
     header 128px tall instead of 72px. 320+320+262+32 = 934px clears it. The
     values are still symmetric, so the grown sizes at 1240px and up are
     unchanged (measured 449.2px each at 1440px, before and after). */
  flex: 1 1 320px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 500;
  gap: 0 24px;
  letter-spacing: var(--sb-tracking-nav);
  text-transform: uppercase;
}

/* The nav never wraps ITSELF. The ul is the nav's min-content box, so letting it
   wrap let the nav shrink below its own single-row width (379.5px measured at
   14px) and break the menu onto a second line inside an otherwise one-line
   header — at 1080px and 1100px that made the header 116px tall. With nowrap the
   nav's min-content is the whole row, the flexbox floor takes over, and the
   utilities give up the width instead. If the nav ever outgrows the row, the
   BAR wraps it onto its own line (it is flex-wrap:wrap) rather than overflowing
   sideways. */
.tsb-nav > ul {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tsb-nav a,
.tsb-nav button.tsb-mega-trigger {
  align-items: center;
  background: none;
  border: 0;
  color: var(--sb-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 6px;
  letter-spacing: inherit;
  min-height: 44px;
  padding: 0;
  text-decoration: none;
  text-transform: inherit;
}

.tsb-nav a:hover,
.tsb-nav a:focus,
.tsb-nav button.tsb-mega-trigger:hover,
.tsb-nav button.tsb-mega-trigger:focus {
  color: var(--sb-accent-hover);
}

.tsb-mega-trigger__chevron {
  transition: transform var(--sb-transition);
}

.tsb-mega-trigger[aria-expanded='true'] .tsb-mega-trigger__chevron {
  transform: rotate(180deg);
}

/* --- Header actions ------------------------------------------------------ */
.tsb-actions {
  align-items: center;
  display: flex;
  /* 320px to match .tsb-nav — see the note there. Symmetric, so the grown
     widths are unchanged. */
  flex: 1 1 320px;
  font-size: 14px;
  gap: 8px;
  justify-content: flex-end;
}

.tsb-actions__icon {
  align-items: center;
  background: none;
  border: 0;
  color: var(--sb-ink);
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  width: 44px;
}

.tsb-actions__icon:hover,
.tsb-actions__icon:focus {
  color: var(--sb-accent-hover);
}

.tsb-actions__cart {
  align-items: center;
  /* Kadence's own reset is `button, .button, ... { background:
     var(--global-palette-btn-bg); border: 0 }`. Every other button-shaped
     control in this header declares its own background, so when the cart icon
     becomes a real <button> (it is an <a> until the slide-out drawer is
     enabled) it was the only one left picking that up — it painted as a solid
     terracotta block instead of the bare icon the header mockup shows. Declare
     it here so the cart cannot change shape when the drawer lands. */
  background: none;
  border: 0;
  color: var(--sb-ink);
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  height: 44px;
  padding: 0 6px;
  text-decoration: none;
}

.tsb-actions__cart:hover,
.tsb-actions__cart:focus {
  color: var(--sb-accent-hover);
}

.tsb-actions__count {
  font-variant-numeric: tabular-nums;
}

.tsb-actions__count[data-count='0'] {
  color: var(--sb-muted);
}

.tsb-currency {
  align-items: center;
  display: flex;
}

.tsb-currency select {
  min-height: 40px;
  padding: 8px 10px;
  width: auto;
}

.tsb-hamburger {
  align-items: center;
  background: none;
  border: 0;
  color: var(--sb-ink);
  cursor: pointer;
  display: none;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

/* --- Mega menu panel ----------------------------------------------------- */
.tsb-mega {
  background-color: var(--sb-surface);
  border-bottom: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-panel);
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 40;
}

.tsb-mega[hidden] {
  display: none;
}

.tsb-mega__inner {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-inline: auto;
  max-width: var(--sb-wrap);
  padding: 32px var(--sb-gutter) 40px;
}

.tsb-mega__col {
  display: flex;
  flex-direction: column;
  /* Spacing lives on the 44px targets below, not in the gap: keeping a 10px gap
     as well would have pushed the links twice as far apart as the mockup. */
  gap: 0;
}

/* The heading-to-links spacing the mockup shows; the links themselves are 44px
   tall touch targets for the same reason. */
.tsb-mega__col > .tsb-mega__heading {
  padding-bottom: 10px;
}

.tsb-mega__heading {
  color: var(--sb-muted);
  font-size: var(--sb-size-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tsb-mega__col a {
  align-items: center;
  color: var(--sb-ink);
  display: inline-flex;
  min-height: var(--sb-tap);
  text-decoration: none;
}

.tsb-mega__col a:hover,
.tsb-mega__col a:focus {
  color: var(--sb-accent-hover);
  text-decoration: underline;
}

.tsb-mega__col a.is-strong {
  font-weight: 600;
}

.tsb-mega__col a[data-tsb-placeholder]::after {
  content: ' *';
  color: var(--sb-muted);
}

.tsb-mega__feature {
  color: var(--sb-ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}

.tsb-mega__feature img {
  aspect-ratio: 4 / 3;
  background-color: var(--sb-photo);
  border-radius: var(--sb-r-img);
  object-fit: cover;
  width: 100%;
}

.tsb-mega__feature-title {
  font-family: var(--sb-font-display);
  font-size: 22px;
  line-height: 1.2;
}

/* --- Search overlay ------------------------------------------------------ */
.tsb-search {
  background-color: var(--sb-surface);
  border-bottom: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-panel);
  left: 0;
  padding: 20px var(--sb-gutter);
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 40;
}

.tsb-search[hidden] {
  display: none;
}

.tsb-search__inner {
  display: flex;
  gap: 10px;
  margin-inline: auto;
  max-width: var(--sb-wrap);
}

.tsb-search__inner input[type='search'] {
  flex: 1 1 auto;
}

/* --- Icons --------------------------------------------------------------- */
/* An inline SVG inside a flex row has flex-shrink:1 and min-width:auto -> 0,
   so a tight row can squeeze an icon to zero width and make it disappear. */
.tsb-header svg,
.tsb-drawer svg,
.tsb-footer svg {
  flex: none;
}

/* --- Mobile drawer ------------------------------------------------------- */
.tsb-drawer {
  background-color: var(--sb-surface);
  border-right: 1px solid var(--sb-line);
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  left: 0;
  max-width: 360px;
  overflow-y: auto;
  padding: 20px var(--sb-gutter) 40px;
  position: fixed;
  top: 0;
  transform: translateX(-100%);
  transition: transform var(--sb-transition);
  width: 90%;
  z-index: 60;
}

.tsb-drawer[hidden] {
  display: none;
}

.tsb-drawer.is-open {
  transform: translateX(0);
}

.tsb-drawer__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.tsb-drawer__title {
  color: var(--sb-ink);
  font-family: var(--sb-font-display);
  font-size: 26px;
  line-height: 1.1;
  min-width: 0;
}

.tsb-drawer__close,
.tsb-hamburger,
.tsb-actions__icon,
.tsb-actions__cart {
  flex: none;
}

.tsb-drawer:focus {
  outline: none;
}

.tsb-drawer__close {
  align-items: center;
  background: none;
  border: 0;
  color: var(--sb-ink);
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.tsb-drawer nav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Currency switcher in the drawer -------------------------------------
   Only the header instance is hidden on phones, so the drawer carries the
   switcher. account.css hides the shell's <label> site-wide (the mockup shows
   no label next to the header select); here it is shown again, because a bare
   select in a list of nav links has no context. */
.tsb-drawer__currency {
  border-top: 1px solid var(--sb-line);
  padding-top: 20px;
}

.tsb-drawer__currency .tsb-currency {
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.tsb-drawer__currency .tsb-currency label {
  clip: auto;
  clip-path: none;
  color: var(--sb-muted);
  font-size: var(--sb-size-caption);
  height: auto;
  letter-spacing: var(--sb-tracking-eyebrow, 0.12em);
  overflow: visible;
  position: static;
  text-transform: uppercase;
  white-space: normal;
  width: auto;
}

.tsb-drawer__currency .tsb-currency select {
  min-height: 44px;
  width: 100%;
}

.tsb-drawer nav a,
.tsb-drawer summary,
.tsb-drawer nav button {
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sb-line);
  color: var(--sb-ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  justify-content: space-between;
  letter-spacing: var(--sb-tracking-nav);
  min-height: 48px;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
}

.tsb-drawer details ul {
  padding-left: 12px;
}

.tsb-drawer details a {
  border-bottom: 0;
  min-height: 44px;
  text-transform: none;
}

/* "My pattern library" sits directly in the drawer, outside <nav>, so it needs
   the same 44px target as the nav links (it measured 25px tall). */
.tsb-drawer > a {
  align-items: center;
  display: inline-flex;
  min-height: var(--sb-tap);
}

.tsb-scrim {
  background-color: rgba(45, 42, 38, 0.45);
  border: 0;
  bottom: 0;
  cursor: pointer;
  left: 0;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}

.tsb-scrim[hidden] {
  display: none;
}

body.tsb-scroll-locked {
  overflow: hidden;
}

/* --- Minimal checkout header -------------------------------------------- */
.tsb-header--minimal .tsb-header__bar {
  justify-content: space-between;
  max-width: var(--sb-wrap-checkout);
  padding: 18px var(--sb-gutter);
}

.tsb-header--minimal .tsb-wordmark {
  font-size: 30px;
}

.tsb-secure {
  align-items: center;
  color: var(--sb-muted);
  display: flex;
  font-size: 14px;
  gap: 8px;
  margin: 0;
}

/* The order-received bar carries a LINK in this slot instead of the Stripe line
   (Thanks.dc.html: `font-size:14px; font-weight:600`, ink, top-right, and the
   arrow in its label). `.tsb-secure` stays the row contract — same slot, same
   size, same 1100px bar — and the anchor gets the type and the 44px target the
   muted Stripe sentence does not need, because it is a control rather than
   text. Hover is the header's own accent, not the mockup's placeholder berry. */
.tsb-header--minimal a.tsb-secure {
  align-items: center;
  color: var(--sb-ink);
  display: inline-flex;
  font-weight: 600;
  min-height: var(--sb-tap);
  text-decoration: none;
}

.tsb-header--minimal a.tsb-secure:hover,
.tsb-header--minimal a.tsb-secure:focus {
  color: var(--sb-accent-hover);
  text-decoration: underline;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .tsb-nav,
  .tsb-wordmark {
    display: none;
  }

  .tsb-hamburger {
    display: inline-flex;
  }

  .tsb-header__bar {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* 20px, not Phase 1's 26px: the owner's logo now shares this row, and the
     bar is nowrap with four 44px targets plus the cart on the right. Measured
     at 390px, the 26px wordmark was already 158px and the row ran to within
     4px of the viewport edge; the lockup needs to fit the same 158px. The
     lockup is (text + logo + gap) = 7.57 x font-size px, so 20px -> ~152px. */
  .tsb-header__bar .tsb-wordmark--mobile {
    display: inline-block;
    font-size: 20px;
  }

  .tsb-actions {
    flex: 0 1 auto;
    gap: 0;
  }

  /* The header instance only; the drawer renders its own instance below 1024px
     (see template-parts/header/mobile-drawer.php). */
  .tsb-header__bar .tsb-currency {
    display: none;
  }
}

@media (min-width: 1024px) {
  .tsb-wordmark--mobile {
    display: none;
  }

  .tsb-nav {
    justify-content: flex-start;
  }
}