/* ─────────────────────────────────────────────────────────────
   Header (sticky, glassy) + Footer (dark "console")
   These styles assume the header/footer markup in
   template-parts/header/ and template-parts/footer/.
   ───────────────────────────────────────────────────────────── */

.tw-header {
  display: flex;
  align-items: center;
  height: 76px;
  padding: 0 var(--tw-container-pad);
  border-bottom: 1px solid var(--tw-line-soft);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky; top: 0;
  z-index: var(--tw-z-header);
}
.tw-header .tw-logo { height: 22px; display: inline-flex; align-items: center; gap: 8px; }
.tw-header .tw-logo-mark { color: var(--tw-ink); }

/* Logo image — same anchor that may render either vlines+text or an <img>. */
.tw-logo-img {
  display: block;
  height: 28px;
  width: auto;
}
.tw-logo-img--invert {
  /* dark logo on the dark footer */
  filter: brightness(0) invert(1);
}

.tw-nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: 36px;
}
.tw-nav .tw-nav-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 76px;
  padding: 0 16px;
  font-size: 14px;
  color: var(--tw-ink-2);
  cursor: pointer;
  text-decoration: none;
}
.tw-nav .tw-caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px,-1px);
  opacity: .6;
}
.tw-nav .tw-nav-item::after {
  content: "";
  position: absolute; left: 16px; right: 16px; bottom: 18px;
  height: 2px; background: var(--tw-mint);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s var(--tw-ease);
}
.tw-nav .tw-nav-item:hover::after,
.tw-nav .tw-nav-item.is-active::after { transform: scaleX(1); }
.tw-nav .tw-nav-item.is-active { color: var(--tw-ink); font-weight: 600; }
.tw-nav .tw-nav-sep {
  width: 1px; height: 16px;
  background: var(--tw-line);
  align-self: center;
  margin: 0 4px;
}

.tw-search {
  flex: 1;
  max-width: 380px;
  margin-left: 24px;
  display: flex; align-items: center; gap: 10px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--tw-line);
  border-radius: 999px;
  background: var(--tw-paper-2);
  color: var(--tw-mute);
  font-size: 13.5px;
}
.tw-search input {
  border: 0; background: transparent; outline: none;
  width: 100%;
  font: inherit; color: var(--tw-ink-2);
}
.tw-search .tw-kbd {
  margin-left: auto;
  font-family: var(--tw-mono); font-size: 10.5px;
  color: var(--tw-mute);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--tw-line);
  background: #fff;
}

.tw-actions {
  display: flex; align-items: center; gap: 6px;
  margin-left: 16px;
}
.tw-icon-btn {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--tw-ink);
  position: relative;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.tw-icon-btn:hover { background: var(--tw-paper-2); }
.tw-icon-btn .tw-badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--tw-mint);
  color: #062319;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
  font-family: var(--tw-mono);
}

/* Language switcher in header */
.tw-lang-switch {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  font-family: var(--tw-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tw-mute);
}
.tw-lang-switch a,
.tw-lang-switch span {
  padding: 4px 8px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}
.tw-lang-switch [aria-current="true"] {
  color: var(--tw-ink);
  background: var(--tw-paper-2);
}

/* ───── Footer "console" ───── */
.tw-footer {
  background: var(--tw-glass-900);
  color: #c6d2cc;
  padding: 48px var(--tw-container-pad) 24px;
}
.tw-footer .tw-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  max-width: var(--tw-container-max);
  margin: 0 auto;
}
.tw-footer h5 {
  font-family: var(--tw-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-mute-2);
  font-weight: 500;
  margin: 0 0 14px;
}
.tw-footer a, .tw-footer li {
  display: block;
  color: #c6d2cc;
  font-size: 13.5px;
  line-height: 2;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────
   Main navigation in Salient header (top_nav) — tuned to the v3 mockup:
   14px, ink-2 color, mint hover, animated mint underline under the
   active / hovered item. Scopes to #header-outer so we only touch the
   Salient header, never our own template parts.
   ───────────────────────────────────────────────────────────── */
#header-outer #top nav > ul > li > a,
#header-outer .sf-menu > li > a {
  font-family: var(--tw-display, "Space Grotesk", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--tw-ink-2, #2A2F2C);
  transition: color var(--tw-dur-fast, .18s) ease;
}
#header-outer #top nav > ul > li > a:hover,
#header-outer .sf-menu > li.current-menu-item > a,
#header-outer .sf-menu > li.sfHover > a {
  color: var(--tw-mint-600, #1FB37C);
}

/* Animated mint underline — mirror of mockup .tw-nav .nav-item::after.
   Salient draws its own underline element; recolor + thin it to match. */
#header-outer .sf-menu > li > a::before,
#header-outer #top nav > ul > li > a::before {
  background-color: var(--tw-mint, #2DCE92) !important;
  height: 2px !important;
}

/* Caret on items that have a dropdown — subtle, matches mockup. */
#header-outer .sf-menu > li.menu-item-has-children > a .sf-sub-indicator,
#header-outer .sf-menu > li.megamenu > a .sf-sub-indicator {
  opacity: .55;
}

/* ───── Utility menu items in Salient nav (Promocje / Outlet) ───── */
/* These are tagged via _tw_nav_role meta → CSS class on the <li>.
   We don't replace Salient's markup; we only style its flagged items. */
#header-outer .sf-menu li.tw-nav-role-utility > a,
#header-outer .sf-menu li.tw-nav-role-utility > a:visited,
.nectar-mobile-menu li.tw-nav-role-utility > a {
  color: var(--tw-mint-600, #1FB37C) !important;
  font-weight: 600;
}
#header-outer .sf-menu li.tw-nav-role-utility > a:hover,
.nectar-mobile-menu li.tw-nav-role-utility > a:hover {
  color: var(--tw-mint, #2DCE92) !important;
}

/* Footer wordmark (text fallback when no logo image is uploaded). */
.tw-footer .tw-footer__wordmark { color: #fff; }

/* Footer tagline paragraph. */
.tw-footer .tw-footer__tagline {
  margin-top: 14px;
  color: #c6d2cc;
  max-width: 32ch;
}
.tw-footer ul { list-style: none; padding: 0; margin: 0; }
.tw-footer .tw-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--tw-mono);
  font-size: 11px;
  color: var(--tw-mute-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: var(--tw-container-max);
  margin-left: auto; margin-right: auto;
}

@media (max-width: 960px) {
  .tw-footer .tw-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .tw-footer .tw-grid { grid-template-columns: 1fr; }
}