/* ==========================================================================
   KULIC Advisory — Header Command Rail + Mono Executive Nav
   Wave 137 · additive only · no layout rewrite of existing components
   1) .ka-timerail  — world-clock / date / temperature rail in the header centre
   2) nav typography aligned to the KULIC wordmark (JetBrains Mono, caps)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) COMMAND RAIL
   -------------------------------------------------------------------------- */

.ka-timerail {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.ka-timerail * { white-space: nowrap; }

.ka-timerail .tr-cell {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  padding: 0 clamp(.55rem, .85vw, 1rem);
}

.ka-timerail .tr-cell + .tr-cell::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 14px;
  content: "";
  background: rgba(230, 184, 79, .22);
  transform: translateY(-50%);
}

.ka-timerail .tr-city {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .20em;
  color: rgba(230, 184, 79, .72);
}

.ka-timerail .tr-time {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: rgba(240, 246, 255, .88);
}

.ka-timerail .tr-cell--local .tr-city { color: #f5d982; }
.ka-timerail .tr-cell--local .tr-time { color: #fff; }

.ka-timerail .tr-meta {
  display: inline-flex;
  align-items: baseline;
  gap: .9em;
  margin-left: clamp(.7rem, 1.3vw, 1.5rem);
  padding-left: clamp(.7rem, 1.3vw, 1.5rem);
  border-left: 1px solid rgba(230, 184, 79, .22);
}

.ka-timerail .tr-date {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .20em;
  color: rgba(214, 226, 240, .62);
}

/* controlled cyan = system/data readout */
.ka-timerail .tr-temp {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(105, 209, 255, .78);
}

/* the place the reading belongs to, in the same key as the zone codes */
.ka-timerail .tr-tcity {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .20em;
  color: rgba(230, 184, 79, .72);
}

.ka-timerail .tr-temp:empty { display: none; }

/* The rail only exists on wide desktop. Below that the header stays as-is. */
@media (max-width: 1799px) {
  .ka-timerail { display: none; }
}

/* The wordmark visually overflows the fixed 226px brand box. Give the brand its
   true width on wide screens so the rail can never collide with it. */
@media (min-width: 1800px) {
  .site-header[data-wave25ab-nav] .brand { flex: 0 0 auto; width: auto; max-width: none; }
  .site-header[data-wave25ab-nav] .official-logo { width: auto; max-width: none; }
  .site-header[data-wave25ab-nav] .site-nav { flex: 0 0 auto; }
  .ka-timerail { margin: 0 clamp(1.5rem, 3vw, 4rem); }
}

/* Progressive disclosure is measured at runtime (header-command-rail.js):
   the rail drops temperature -> Tokyo -> London -> date, and finally itself,
   so it can never collide with the wordmark or the navigation. */
.ka-timerail .tr-off { display: none !important; }
.ka-timerail.is-hidden { display: none !important; }

/* Never compete with the open mobile navigation. */
.site-header.is-open .ka-timerail { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ka-timerail { transition: none; }
}

/* --------------------------------------------------------------------------
   2) MONO EXECUTIVE NAV — right side matched to the wordmark on the left
   Desktop only (mobile drawer below 1100px keeps its existing treatment).
   -------------------------------------------------------------------------- */

@media (min-width: 1101px) {

  .site-header[data-wave25ab-nav] .site-nav__primary a,
  .site-header[data-wave25ab-nav] .language-switch {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 600;
    font-size: .665rem;
    letter-spacing: .155em;
    text-transform: uppercase;
    color: rgba(216, 226, 238, .82);
  }

  .site-header[data-wave25ab-nav] .site-nav__primary {
    gap: clamp(.9rem, 1.5vw, 1.5rem);
  }

  .site-header[data-wave25ab-nav] .site-nav__primary a::after {
    bottom: 6px;
    height: 1px;
    background: #e6b84f;
  }

  .site-header[data-wave25ab-nav] .site-nav__primary a:hover,
  .site-header[data-wave25ab-nav] .site-nav__primary a[aria-current="page"] {
    color: #f5d982;
  }

  .site-header[data-wave25ab-nav] .language-switch {
    min-height: 30px;
    padding: .35rem .55rem;
    border: 1px solid rgba(230, 184, 79, .34);
    border-radius: 1px;
    color: #f5d982;
    letter-spacing: .18em;
  }

  .site-header[data-wave25ab-nav] .header-cta {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .185em;
    text-transform: uppercase;
    border-radius: 1px;
  }
}

/* ==========================================================================
   Wave 137b - the navigation reads in white neon, like the DK core
   Removed: the faint rgba(255,255,255,.02) plate behind every item, and the
   gold 1px ::after rule under the active one. Both made the words look like
   buttons pasted onto the header. The words now carry the same white neon as
   the monogram in the orb; state is expressed by glow, not by a stroke.
   ========================================================================== */
.site-header[data-wave25ab-nav] .site-nav__primary a,
.site-header[data-wave25ab-nav] .site-nav__utilities .language-switch{
  background: transparent !important;
  border: 0 !important;
  color: #f2f7ff !important;
  text-shadow:
    0 0 5px rgba(255,255,255,.42),
    0 0 14px rgba(190,225,255,.26) !important;
  transition: color 160ms ease, text-shadow 160ms ease;
}

/* no stroke under the words at all */
.site-header[data-wave25ab-nav] .site-nav__primary a::after{
  display: none !important;
}

/* state is glow, not gold */
.site-header[data-wave25ab-nav] .site-nav__primary a:hover,
.site-header[data-wave25ab-nav] .site-nav__primary a:focus-visible,
.site-header[data-wave25ab-nav] .site-nav__primary a[aria-current],
.site-header[data-wave25ab-nav] .site-nav__utilities .language-switch:hover,
.site-header[data-wave25ab-nav] .site-nav__utilities .language-switch:focus-visible{
  color: #ffffff !important;
  text-shadow:
    0 0 6px rgba(255,255,255,.85),
    0 0 18px rgba(200,232,255,.55),
    0 0 34px rgba(150,205,255,.28) !important;
}

/* the DE/EN switch is a word, not a boxed control */
.site-header[data-wave25ab-nav] .site-nav__utilities .language-switch{
  padding: .35rem .3rem !important;
  border-radius: 0 !important;
}

/* the one gold object stays the paid action - just without the bevel line */
.site-header[data-wave25ab-nav] .header-cta{
  box-shadow: none !important;
}