/* ==========================================================================
   CTE Hot Topics — CLEAN REWRITE (v1)
   File: mu-plugins/site-core/themes/header/cte-hot-topics.css

   Goals:
   - No redundancy, no competing blocks
   - White panel with single top rule controlled by var:
       --cte-hot-topics-top-rule
   - Toggle stays in the same HORIZONTAL position in collapsed + expanded
   - Expanded grows downward; toggle stays top-right (no pin-to-bottom)
   - Uses canonical --cte-* vars from themes/cte-vars.css
   ========================================================================== */

/* ---------- WRAP ---------- */
#masthead .cte-hot-topics__wrap{
  --cte-hot-topics-inset: var(--cte-frame-pad, 14px);
  --cte-hot-topics-gap-x: var(--cte-hot-topics-gap-x, 12px);
  --cte-hot-topics-gap-y: var(--cte-hot-topics-gap-y, 10px);

  position: relative !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important; /* label | items */
  align-items: start !important;
  column-gap: var(--cte-hot-topics-label-gap, var(--cte-hot-topics-inset)) !important;
  row-gap: var(--cte-hot-topics-gap-y) !important;

  padding: 10px var(--cte-hot-topics-inset) 10px var(--cte-hot-topics-inset) !important;

  background: var(--cte-surface, #fff) !important;

  /* Top rule: set this var in cte-vars.css */
  border-top: var(--cte-hot-topics-top-rule-width, 4px) solid var(--cte-hot-topics-top-rule) !important;

  /* Keep rounded-card AA clean */
  overflow: hidden !important;
}

/* Desktop rounded “card” header: match bottom radius */
@media (min-width:1300px){
  #masthead .cte-hot-topics__wrap{
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
  }
}

/* ---------- LABEL ---------- */
#masthead .cte-hot-topics__label{
  margin: 0 !important;
  padding: 0 !important;

  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 800 !important;
  font-size: var(--cte-pill-font-size, 12px) !important;
  line-height: var(--cte-pill-line-height, 1) !important;
  white-space: nowrap !important;

  /* Slot: match toggle height */
  height: var(--cte-hot-topics-label-slot-h, 26px) !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: var(--cte-muted, #475569) !important;
}

/* ---------- ITEMS ROW (pills | toggle) ---------- */
#masthead .cte-hot-topics__items{
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important; /* pills | toggle */
  align-items: start !important;              /* keep toggle pinned to top */
  column-gap: 10px !important;
}

/* ---------- PILLS LANE ---------- */
#masthead .cte-hot-topics__pills{
  min-width: 0 !important;
  display: flex !important;
  gap: var(--cte-pill-gap, 8px) !important;
  box-sizing: border-box !important;
}

/* Collapsed: NO SCROLL. JS fit-hide controls overflow. */
#masthead .cte-hot-topics__wrap.is-collapsed .cte-hot-topics__pills{
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

/* Expanded: wrap pills (panel grows downward). Toggle stays top-right. */
#masthead .cte-hot-topics__wrap.is-expanded .cte-hot-topics__pills{
  flex-wrap: wrap !important;
  overflow: visible !important;
}

/* ---------- PILL LINKS ---------- */
#masthead a.cte-hot-topics__item{
  text-decoration: none !important;
  border-bottom: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  padding: var(--cte-pill-pad-y, 6px) var(--cte-pill-pad-x, 10px) !important;
  border-radius: var(--cte-pill-radius, 10px) !important;
  font-weight: var(--cte-pill-font-weight, 700) !important;
  font-size: var(--cte-pill-font-size, 12px) !important;
  line-height: var(--cte-pill-line-height, 1) !important;
  white-space: nowrap !important;

  background: var(--cte-pill-bg, var(--cte-pill-default-bg, #F2F4F7)) !important;
  border: var(--cte-pill-border-width, 1px) solid var(--cte-pill-border, var(--cte-pill-default-border, #CBD5E1)) !important;
  color: var(--cte-pill-text, var(--cte-pill-default-text, #0F172A)) !important;
  transition: var(--cte-pill-transition, background-color .14s ease, border-color .14s ease, color .14s ease) !important;
}

/* Hover */
#masthead a.cte-hot-topics__item:hover{
  background: var(--cte-pill-bg-hover, #fff) !important;
  border-color: var(--cte-pill-border-hover, rgba(15,23,42,.18)) !important;
  color: var(--cte-pill-text-hover, var(--cte-ink, #0F172A)) !important;
  transition: var(--cte-pill-transition, background-color .14s ease, border-color .14s ease, color .14s ease) !important;
}

/* Active/current */
#masthead a.cte-hot-topics__item:focus,
#masthead a.cte-hot-topics__item:focus-visible,
#masthead a.cte-hot-topics__item:active,
#masthead a.cte-hot-topics__item[aria-current="page"],
#masthead a.cte-hot-topics__item[aria-current="true"],
#masthead a.cte-hot-topics__item.is-active,
#masthead a.cte-hot-topics__item.active,
#masthead a.cte-hot-topics__item.current{
  outline: none !important;
  background: var(--cte-pill-bg-active, #fff) !important;
  border-color: var(--cte-pill-border-active, rgba(15,23,42,.16)) !important;
  color: var(--cte-pill-text-active, var(--cte-ink, #0F172A)) !important;
  transition: var(--cte-pill-transition, background-color .14s ease, border-color .14s ease, color .14s ease) !important;
}

/* Hide fit-hide pills (JS sets this class) */
#masthead .cte-hot-topics__item--fit-hide{
  display: none !important;
}

/* ---------- TOGGLE ---------- */
#masthead .cte-hot-topics__toggle{
  width: var(--cte-hot-topics-toggle-size, 26px) !important;
  height: var(--cte-hot-topics-toggle-size, 26px) !important;
  min-width: var(--cte-hot-topics-toggle-size, 26px) !important;
  min-height: var(--cte-hot-topics-toggle-size, 26px) !important;
  border-radius: var(--cte-hot-topics-toggle-radius, 8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  justify-self: end !important;
  align-self: start !important;     /* keep top-right in expanded too */
  z-index: 2 !important;

  color: var(--cte-hot-topics-toggle-text, var(--cte-muted, #475569)) !important;
  border: 1px solid var(--cte-hot-topics-toggle-border, rgba(15,23,42,.14)) !important;
  background: var(--cte-hot-topics-toggle-bg, rgba(0,0,0,.02)) !important;
}

/* Hide toggle text; icon-only */
#masthead .cte-hot-topics__toggleText{
  display: none !important;
}

/* Chevron: true caret using borders (▼ / ▲) */
#masthead .cte-hot-topics__chev{
  width: 0 !important;
  height: 0 !important;
  display: inline-block !important;
}

#masthead .cte-hot-topics__wrap.is-collapsed .cte-hot-topics__chev{
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid currentColor !important;
}

#masthead .cte-hot-topics__wrap.is-expanded .cte-hot-topics__chev{
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-bottom: 6px solid currentColor !important;
}

/* ============================================================
   HOT TOPICS — HOVER LIFT (var-driven)
   Controls “animation/lift” only inside Hot Topics
   ============================================================ */

#masthead a.cte-hot-topics__item{
  transform: translateY(0) !important;
  transition:
    transform var(--cte-hot-topics-pill-lift-ms, 120ms) ease,
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease !important;
  will-change: transform;
}

#masthead a.cte-hot-topics__item:hover{
  transform: translateY(calc(-1 * var(--cte-hot-topics-pill-lift, 0px))) !important;
}

/* ============================================================
   HOT TOPICS — LIFT HEADROOM (prevents clip)
   - Allows translateY(-lift) without clipping, while keeping overflow hidden.
   - Creates internal top padding, then cancels it with negative margin so
     layout height stays the same.
   ============================================================ */

#masthead .cte-hot-topics__pills{
  /* internal headroom so pill can lift inside an overflow-hidden ancestor */
  padding-top: var(--cte-hot-topics-lift-headroom, 0px) !important;
  margin-top: calc(-1 * var(--cte-hot-topics-lift-headroom, 0px)) !important;
}


/* ============================================================
   CTE_HOT_TOPICS_UNDER_1300_SEPARATOR_V1
   - Add subtle grounding under Hot Topics when header is slab-style
   - Applies ONLY under 1300px
   ============================================================ */
@media (max-width:1299px){
  #masthead .cte-hot-topics__wrap{
    border-bottom: 1px solid var(--cte-hot-topics-divider-color, rgba(0,0,0,.06)) !important;
    box-shadow: var(--cte-hot-topics-shadow, 0 2px 4px rgba(0,0,0,.04)) !important;
  }
}

/* ============================================================
   HOT TOPICS — TOGGLE COLOR (neutral, var-driven)
   ============================================================ */
#masthead .cte-hot-topics__toggle{
  background: var(--cte-hot-topics-toggle-bg) !important;
  border-color: var(--cte-hot-topics-toggle-border) !important;
  color: var(--cte-hot-topics-toggle-text) !important;
}
#masthead .cte-hot-topics__toggle:hover{
  background: rgba(0,0,0,.05) !important;
}