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

/* ───── Site-wide topbar (above header) ───── */
.tw-topbar {
  background: var(--tw-glass-900, #0b0f0d);
  color: #c6d2cc;
  font-size: 12.5px;
  line-height: 1.35;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tw-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding: 6px var(--tw-container-pad, 24px);
}
.tw-topbar__messages {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 1.35em;
}
.tw-topbar__message {
  margin: 0;
  display: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tw-topbar__message.is-active {
  display: block;
}
.tw-topbar__label {
  color: var(--tw-mint, #2dce92);
  font-family: var(--tw-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.tw-topbar__sep { opacity: 0.45; margin: 0 6px; }
.tw-topbar__cta {
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tw-topbar__cta:hover { color: var(--tw-mint, #2dce92); }

body.has-tw-topbar {
  --tw-topbar-height: 34px;
}

/* Sticky stack: topbar + header (+ homepage promo when present). */
.tw-site-chrome {
  position: sticky;
  top: 0;
  z-index: var(--tw-z-header, 100);
}
body.admin-bar .tw-site-chrome {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .tw-site-chrome {
    top: 46px;
  }
}
.tw-site-chrome .tw-promo-bar {
  margin: 0;
  border-top: 0;
}

.tw-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  height: 76px;
  padding: 0 var(--tw-container-pad);
  min-width: 0;
  border-bottom: 1px solid var(--tw-line-soft);
  background: rgba(255,255,255,.85);
  position: relative;
  z-index: 0;
  isolation: isolate;
}
/* Blur on a pseudo — not on the header itself — so mega menu / search panels
   with position:fixed use the viewport and --tw-megamenu-top (synced in JS). */
.tw-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}
.tw-header .tw-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(160px, 38vw);
  height: 28px;
  overflow: hidden;
  text-decoration: none;
}
.tw-header .tw-logo-mark {
  color: var(--tw-ink);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

/* Logo image — cap intrinsic SVG/PNG size (GP sets img { max-width:100% }). */
.tw-header .tw-logo-img {
  display: block;
  width: auto;
  height: 28px;
  max-width: 100%;
  max-height: 28px;
  object-fit: contain;
  object-position: left center;
}
.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: 24px;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.tw-nav .tw-nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tw-nav .tw-nav-menu > .menu-item {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.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;
}

/* Search field + live panel: see assets/css/search.css */

.tw-actions {
  display: flex; align-items: center; gap: 6px;
  margin-left: 8px;
  flex-shrink: 0;
}
.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;
}

/* NOTE: visual overrides for Salient parent (sf-menu coloring, utility
   nav, mint underline, mega menu container) live in gp-overrides.css
   — the LAST stylesheet enqueued. Keep this file scoped to Techwish-owned
   markup (.tw-header, .tw-footer, .tw-logo-img). */

/* 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;
  /* Salient resets <p> to line-height: 1 inside its footer scope;
     force a readable rhythm so multi-line taglines don't overlap. */
  line-height: 1.5;
  font-size: 14px;
}
.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; }
}