/* =========================================================================
   Brand atmosphere — site-wide.
   Direction sourced from design-inspiration.png: deep navy -> indigo,
   electric-blue glow, glassy chrome. Logo: logo-style1.png.
   Loads on every page so the inspiration carries throughout the site.
   ========================================================================= */

:root {
  /* Inspiration palette — deep navy/indigo with electric-blue accent. */
  --brand:        oklch(0.50 0.15 262);
  --brand-strong: oklch(0.42 0.15 264);
  --brand-deep:   oklch(0.235 0.090 270);
  --brand-deeper: oklch(0.175 0.075 272);
  --brand-abyss:  oklch(0.125 0.060 274);
  --brand-indigo: oklch(0.215 0.110 292);

  --accent:       oklch(0.72 0.16 244);   /* electric blue */
  --glow:         oklch(0.74 0.17 250 / 0.55);

  --brand-tint:   oklch(0.955 0.020 268);
  --brand-tint-2: oklch(0.920 0.034 270);
}

/* ---- Logo (header) ---- */
.wt-brand--logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.wt-brand__logo {
  height: 100px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 18px oklch(0.55 0.16 255 / 0.65));
}
@media (max-width: 900px) {
  .wt-brand__logo {
    height: 84px;
  }
}

.wt-header__inner {
  min-height: 112px;
}
@media (max-width: 900px) {
  .wt-header__inner {
    min-height: 96px;
  }
}

/* ---- Logo (footer) ---- */
.wt-footer__logo {
  height: clamp(38px, 5vw, 54px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px oklch(0.55 0.16 255 / 0.4));
}

/* ---- Top bar: darkest indigo ---- */
.wt-topbar {
  background: linear-gradient(90deg, var(--brand-abyss), var(--brand-deeper));
  color: oklch(0.80 0.04 258);
  border-bottom: 1px solid oklch(1 0 0 / 0.05);
}

/* ---- Header: navy -> indigo with an electric glow seam ---- */
.wt-header {
  position: sticky;
  background:
    radial-gradient(120% 180% at 12% -40%, oklch(0.42 0.16 258 / 0.55), transparent 60%),
    linear-gradient(118deg, var(--brand-abyss) 0%, var(--brand-deeper) 46%, var(--brand-indigo) 100%);
  box-shadow:
    inset 0 -1px 0 oklch(1 0 0 / 0.06),
    0 1px 0 oklch(0.6 0.16 258 / 0.25);
}
.wt-header.is-stuck {
  background:
    radial-gradient(120% 160% at 12% -50%, oklch(0.42 0.16 258 / 0.4), transparent 58%),
    linear-gradient(118deg, var(--brand-abyss), var(--brand-deeper));
  backdrop-filter: saturate(140%);
  box-shadow:
    inset 0 -1px 0 oklch(1 0 0 / 0.06),
    0 10px 30px -12px oklch(0.12 0.06 274 / 0.7);
}

/* Nav links: subtle glow interaction */
.wt-nav a {
  position: relative;
  transition: background 200ms cubic-bezier(0.32, 0.72, 0, 1),
              color 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.wt-nav a:hover,
.wt-nav .current-menu-item > a,
.wt-nav .current_page_item > a {
  background: oklch(0.6 0.16 256 / 0.18);
  box-shadow: inset 0 0 0 1px oklch(0.7 0.16 252 / 0.3);
  color: #fff;
}

.wt-iconbtn {
  border-color: oklch(0.7 0.14 252 / 0.28);
  background: oklch(0.6 0.16 256 / 0.1);
}
.wt-iconbtn:hover {
  background: oklch(0.6 0.16 256 / 0.2);
  box-shadow: 0 0 0 1px oklch(0.7 0.16 252 / 0.35), 0 6px 18px -8px var(--glow);
}

/* ---- Category strip: deepened, glassy ---- */
.wt-catbar {
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-indigo));
  border-top: 1px solid oklch(1 0 0 / 0.06);
}

/* ---- Footer: deep indigo with ambient glow ---- */
.wt-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 100% 0%, oklch(0.35 0.15 268 / 0.5), transparent 55%),
    linear-gradient(160deg, var(--brand-deeper), var(--brand-abyss));
}
.wt-footer::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--glow), transparent 65%);
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.wt-footer > * { position: relative; z-index: 1; }

/* ---- Selection + focus tuned to the indigo accent ---- */
::selection { background: oklch(0.62 0.16 262 / 0.35); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .wt-header, .wt-header.is-stuck { backdrop-filter: none; }
}