/* ==========================================================================
   MAST components — Phase 2: header, navigation, footer.

   Every value here is a var(--mast-*). No literals. No !important.
   Our markup uses .mast-* classes the parent theme has never heard of, so
   nothing collides and nothing needs to shout to win.
   ========================================================================== */

/* --- Typography: two faces, everywhere ----------------------------------
   The parent theme drives its type through its own custom properties. Rather
   than chase every selector that uses them, redefine the variables themselves —
   one place, and the whole theme follows. Eleven families become two.

   Note the parent hardcodes "Poppins" as its default, so unless these are
   overridden the site quietly re-downloads it from Google forever. */

:root {
  --tmp-primary-font-family: var(--mast-font-body);
  --tmp-btn-font-family: var(--mast-font-display);
}

/* WP Travel Engine drives its entire UI — tabs, links, icons, form focus — from one
   variable it sets on :root: `--primary-color: #147dfe`. That single stock blue was
   every blue left on the trek pages. Redefine the variable and the whole plugin
   follows; chasing its selectors one by one would be endless and would need
   !important to win.
   `:root:root` is not a typo — it doubles the specificity so this wins no matter
   which order the stylesheets happen to load in. */
:root:root {
  --primary-color: var(--mast-accent);
  --primary-color-rgb: 179, 45, 46;

  /* WP Travel Engine ships THREE different names for the same idea, across three
     stylesheets, and the trek page's tab bar reads the third one. Chasing selectors
     was a dead end — the winning rule lives in an Elementor widget stylesheet with
     four classes of specificity. Setting the variables is the only sane fix. */
  --wpte-primary-color: var(--mast-accent);
  --wpte-primary-clr: var(--mast-accent);

  --tab-active-color: var(--mast-accent);
  --tab-color: var(--mast-text-muted);

  /* The theme paints EVERY Elementor button with a border in these variables, defaulted to the
     accent red. On a red button it's invisible; on the ink secondary buttons it showed as a red
     outline — the "gold button with a red border" bug. Our buttons are solid-fill; the fill is the
     shape, so no button ever needs a visible border. Match the border to transparent globally. */
  --tmp-btn-border-initial-color: transparent;
  --tmp-btn-border-hover-color: transparent;
}

/* Belt-and-braces: some per-page Elementor CSS sets a button border straight from a global colour
   (not the variable above), at a specificity a normal selector can't beat. A solid button never
   wants a border, so this is the one place a targeted !important is the right tool, not a smell. */
.elementor-button,
.elementor-button-link,
.wpte-bf-btn,
.category-trip-viewmre-btn {
  border-color: transparent !important;
}

body,
.entry-content-wrap,
.entry-content {
  font-family: var(--mast-font-body);
  font-size: var(--mast-text-base);
  line-height: var(--mast-leading-body);
  color: var(--mast-text);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
  font-family: var(--mast-font-display);
  font-weight: var(--mast-weight-display);
  letter-spacing: var(--mast-tracking-display);
  line-height: var(--mast-leading-snug);
}

/* A heading widget with no typography of its own inherits Elementor's "Text" global — which is the
   body serif (Newsreader). The kit paints it via `.elementor-widget-heading .elementor-heading-title`
   (two classes), beating the single-class rule above. Match that specificity so EVERY heading widget
   is the display face, whichever global it happens to reference. This was the lone serif heading —
   the "Blog" archive banner. */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--mast-font-display);
}

/* Numbers are the product on this site — altitude, duration, price. Give them a
   mono face and tabular figures so columns of them actually line up. */
.category-trip-price,
.trip-price,
.wpte-bf-price,
.category-trip-duration,
[class*="-price"] .amount {
  font-family: var(--mast-font-mono);
  font-variant-numeric: tabular-nums;
}

/* --- TablePress tables ---------------------------------------------------
   The tables carried demo "Custom CSS": Georgia on the body cells, Helvetica +
   bright blue (#0325FA) on some columns, and navy (#083486) headers — three
   fonts and an off-palette blue, which is the font inconsistency on the company
   pages. Bring every table into the system: Newsreader body, ink header, one
   font. The source rules use !important and per-table IDs, so these match that
   weight to win cleanly. */

/* Body cells only — scoped to tbody/tfoot so it never touches the header. The demo CSS put the
   column classes on header cells too, so a `.tablepress [class*="column-"]` rule would paint the
   header text the body colour (ink on ink → invisible). */
.tablepress tbody td,
.tablepress tbody th,
.tablepress tfoot td,
.tablepress tbody [class*="column-"] {
  font-family: var(--mast-font-body) !important;
  color: var(--mast-text) !important;
  font-weight: var(--mast-weight-body) !important;
  font-size: 1rem !important;
}

/* Header — high enough specificity to beat the per-column rules on the same cells. */
.tablepress thead th,
.tablepress thead th[class*="column-"],
.tablepress tfoot th {
  background-color: var(--mast-ink) !important;
  color: var(--mast-white) !important;
  font-family: var(--mast-font-display) !important;
  font-weight: var(--mast-weight-strong) !important;
}

.tablepress thead th,
.tablepress tbody td,
.tablepress tbody th,
.tablepress tfoot th {
  border-color: var(--mast-border) !important;
}

/* Zebra striping in the paper tint, not stark white/grey. */
.tablepress tbody tr:nth-child(even) td {
  background-color: var(--mast-paper);
}

/* --- Skip link ---------------------------------------------------------- */

.mast-skip {
  position: absolute;
  left: -9999px;
  z-index: 10060;
  padding: var(--mast-space-3) var(--mast-space-4);
  background: var(--mast-accent);
  color: var(--mast-on-accent);
  font-family: var(--mast-font-display);
  font-size: var(--mast-text-sm);
}
.mast-skip:focus {
  left: var(--mast-space-4);
  top: var(--mast-space-4);
}

/* --- Shared ------------------------------------------------------------- */

.mast-container {
  width: 100%;
  max-width: var(--mast-container);
  margin-inline: auto;
  padding-inline: var(--mast-space-6);
}

.mast-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--mast-space-3) var(--mast-space-6);
  border-radius: var(--mast-radius);
  background: var(--mast-accent);
  color: var(--mast-on-accent);
  font-family: var(--mast-font-display);
  font-weight: var(--mast-weight-strong);
  font-size: var(--mast-text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s var(--mast-ease), transform 0.18s var(--mast-ease);
}
.mast-btn:hover,
.mast-btn:focus {
  background: var(--mast-accent-hover);
  color: var(--mast-on-accent);
  transform: translateY(-1px);
}
.mast-btn:focus-visible {
  outline: 2px solid var(--mast-accent-quiet);
  outline-offset: 3px;
}

.mast-link-quiet {
  color: inherit;
  text-decoration: none;
  font-family: var(--mast-font-mono);
  font-size: var(--mast-text-xs);
  letter-spacing: var(--mast-tracking-label);
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.18s var(--mast-ease);
}
.mast-link-quiet:hover,
.mast-link-quiet:focus {
  opacity: 1;
  color: inherit;
}

/* --- Utility strip ------------------------------------------------------
   Was: orange bar with six brand-coloured social tiles.
   Now: the one thing that actually builds trust — the government licence. */

.mast-utility {
  background: var(--mast-ink);
  color: var(--mast-snowfield);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.mast-utility__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mast-space-2) var(--mast-space-6);
  padding-block: var(--mast-space-2);
  font-family: var(--mast-font-mono);
  font-size: var(--mast-text-xs);
  letter-spacing: 0.05em;
}
.mast-utility p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mast-space-2) var(--mast-space-4);
  opacity: 0.72;
}
.mast-utility a {
  color: inherit;
  text-decoration: none;
}
.mast-utility a:hover {
  color: var(--mast-accent-quiet);
}
@media (max-width: 640px) {
  .mast-utility__creds { display: none; }
  .mast-utility__in { justify-content: center; }
}

/* --- Header -------------------------------------------------------------
   Was: ~250px of empty navy on every page. The single most valuable strip of
   the site, blank. Now it's exactly as tall as its contents. */

.mast-header {
  position: sticky;
  top: 0;
  /* Elementor sections on this site declare z-indexes up to 10000. At 100 the header still
     showed, but its dropdowns painted *behind* the hero — which is why the Trekking Packages
     submenu appeared to be missing entirely. */
  z-index: 10050;
  background: var(--mast-ink);
  color: var(--mast-snowfield);
}
.mast-header__in {
  display: flex;
  align-items: stretch;
  gap: var(--mast-space-6);
  min-height: 72px;
  /* No vertical padding here on purpose. The nav items stretch to the FULL header
     height so that a submenu positioned at `top: 100%` lands exactly on the header's
     bottom edge. With padding, the item stops short of the edge and the dropdown
     opens *inside* the dark header bar, overlapping it — which is what made the menu
     look broken. min-height does the spacing instead. */
}

.mast-header__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.mast-header__brand .custom-logo-link {
  display: block;
  line-height: 0;
}
.mast-header__brand img,
.mast-header__brand .custom-logo {
  height: 52px;
  width: auto;
  max-width: none;
  display: block;
}
.mast-header__title {
  font-family: var(--mast-font-display);
  font-weight: var(--mast-weight-display);
  font-size: var(--mast-text-md);
  letter-spacing: var(--mast-tracking-display);
  color: inherit;
  text-decoration: none;
}

.mast-header__actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--mast-space-6);
}

/* --- Navigation --------------------------------------------------------- */

.mast-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}
.mast-menu {
  display: flex;
  align-items: stretch;
  gap: var(--mast-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mast-menu li {
  position: relative;
  margin: 0;
}

/* Top-level items fill the header's height, so `top: 100%` on their submenu is the
   header's bottom edge — and the dropdown opens BELOW the bar instead of inside it.
   It also means the whole header height is a hover target, so the pointer can't slip
   into a dead gap on its way down to the submenu. */
.mast-menu > li {
  display: flex;
  align-items: stretch;
}
.mast-menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
}

.mast-menu a {
  display: block;
  color: inherit;
  text-decoration: none;
  font-family: var(--mast-font-display);
  font-weight: var(--mast-weight-strong);
  font-size: var(--mast-text-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.18s var(--mast-ease);
}

/* A caret on anything with a submenu. Without it there is no way to know a dropdown
   exists until you happen to hover it — which is a large part of why the menu felt
   missing. Rotates when it opens. */
.mast-menu > li.menu-item-has-children > a::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.55em;
  order: 2;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  opacity: 0.65;
  transition: transform 0.2s var(--mast-ease), opacity 0.2s var(--mast-ease);
}
.mast-menu > li.menu-item-has-children:hover > a::before,
.mast-menu > li.menu-item-has-children:focus-within > a::before {
  transform: translateY(0.06em) rotate(-135deg);
  opacity: 1;
}
/* Underline grows from the left — one accent, used once. */
.mast-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--mast-accent);
  transition: width 0.2s var(--mast-ease);
}
.mast-menu > li > a:hover::after,
.mast-menu > li > a:focus::after,
.mast-menu > li.current-menu-item > a::after,
.mast-menu > li.current-menu-ancestor > a::after {
  width: 100%;
}
.mast-menu a:focus-visible {
  outline: 2px solid var(--mast-accent-quiet);
  outline-offset: 2px;
}

/* Dropdowns */
.mast-menu .sub-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 230px;
  margin: 0;
  padding: var(--mast-space-2) 0;
  list-style: none;
  background: var(--mast-surface);
  border: 1px solid var(--mast-border);
  border-radius: var(--mast-radius);
  box-shadow: var(--mast-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  /* Deliberately NOT using --mast-ease here. Under macOS "Reduce Motion" that token becomes
     `step-end`, which holds opacity at 0 for the whole duration and only snaps it to 1 at the end —
     so the dropdown appears to lag or not open at all for anyone with that accessibility setting on.
     Plain `ease` can't be turned into a step function. Visibility flips INSTANTLY on show (0s) and
     is delayed only on hide, so the fade-out stays visible without ever trapping it hidden. */
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* `.is-open` is set by nav.js when the item is opened by CLICK or TAP — hover doesn't
   exist on a touchscreen, and a click used to just navigate away instead of opening
   the menu. Hover and focus-within still work exactly as before for a mouse and for
   the keyboard. */
.mast-menu li:hover > .sub-menu,
.mast-menu li:focus-within > .sub-menu,
.mast-menu li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.mast-menu > li.is-open > a::before {
  transform: translateY(0.06em) rotate(-135deg);
  opacity: 1;
}
.mast-menu .sub-menu a {
  padding: var(--mast-space-2) var(--mast-space-4);
  color: var(--mast-text);
  font-weight: var(--mast-weight-body);
  white-space: normal;
}
.mast-menu .sub-menu a:hover,
.mast-menu .sub-menu a:focus {
  color: var(--mast-accent);
}

/* --- Nested submenus (third level) --------------------------------------
   The Trekking Packages menu goes three deep: Packages → a Region → the treks.
   A first-level dropdown drops DOWN from the header. A submenu of a submenu must
   fly out to the SIDE — sitting below its parent item would overlap the level
   above it. So a .sub-menu that is itself inside a .sub-menu is repositioned. */

.mast-menu .sub-menu .menu-item-has-children {
  position: relative;
}

.mast-menu .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  /* Nudge up so the first row lines up with its parent, not the box border. */
  margin-top: calc(var(--mast-space-2) * -1);
  /* Nested panels rise from a slightly different offset — sideways, not downward. */
  transform: translateX(-6px);
}

.mast-menu .sub-menu li:hover > .sub-menu,
.mast-menu .sub-menu li:focus-within > .sub-menu,
.mast-menu .sub-menu li.is-open > .sub-menu {
  transform: translateX(0);
}

/* If a third-level flyout would run off the right edge, open it to the LEFT
   instead. nav.js adds .flip-left when it detects the overflow. */
.mast-menu .sub-menu .sub-menu.flip-left {
  left: auto;
  right: 100%;
  transform: translateX(6px);
}
.mast-menu .sub-menu li:hover > .sub-menu.flip-left,
.mast-menu .sub-menu li.is-open > .sub-menu.flip-left {
  transform: translateX(0);
}

/* A parent that HAS a nested submenu gets a right-pointing chevron, so you can
   tell it opens further. Distinct from the top-level down-caret. */
.mast-menu .sub-menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mast-space-3);
}
.mast-menu .sub-menu .menu-item-has-children > a::after {
  content: "";
  flex: 0 0 auto;
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.6;
}

/* --- Mobile ------------------------------------------------------------- */

.mast-burger {
  display: none;
  margin-left: auto;
  padding: var(--mast-space-2);
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.mast-burger__box {
  display: grid;
  gap: 5px;
  width: 24px;
}
.mast-burger__box i {
  height: 2px;
  background: currentColor;
  transition: transform 0.2s var(--mast-ease), opacity 0.2s var(--mast-ease);
}
.mast-burger[aria-expanded="true"] .mast-burger__box i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mast-burger[aria-expanded="true"] .mast-burger__box i:nth-child(2) { opacity: 0; }
.mast-burger[aria-expanded="true"] .mast-burger__box i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .mast-burger { display: block; }

  /* The nav below is `order: 3; flex-basis: 100%` — a full-width row of its own.
     That only happens if the header row is allowed to wrap; without this, the
     drawer is crammed onto the logo/burger row and pushed off the right edge. */
  .mast-header__in { flex-wrap: wrap; }

  .mast-nav {
    display: none;
    order: 3;
    flex: 1 0 100%;
    padding-bottom: var(--mast-space-4);
  }

  /* The drawer scrolls itself, not the page.
     The header is `position: sticky; top: 0`, and this drawer lives inside it. A sticky
     element taller than the viewport just stays pinned — its bottom hangs off-screen and
     no amount of page scrolling brings it back. With three menu levels open, the drawer is
     easily twice the screen height, so the lower items were unreachable.

     The height cap is set by nav.js (it's the distance from the drawer's top edge to the
     bottom of the screen, which only JS can measure); the fallback here keeps the drawer
     usable if the script never runs. `overscroll-behavior: contain` stops a flick at the
     end of the list from carrying on into the page behind it. */
  .mast-nav.is-open {
    display: block;
    max-height: calc(100svh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mast-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Undo the desktop full-height flex item. On mobile the submenu stacks UNDER its
     parent link, so the li must be a block — as a flex row it would put the submenu
     beside the link instead. */
  .mast-menu > li {
    display: block;
  }
  .mast-menu > li > a {
    display: flex;
    justify-content: space-between;
  }

  .mast-menu > li > a::after { display: none; }
  .mast-menu a {
    padding: var(--mast-space-3) 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    font-size: var(--mast-text-base);
  }
  .mast-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 var(--mast-space-4);
  }
  .mast-menu .sub-menu a {
    color: inherit;
    opacity: 0.75;
  }

  .mast-header__actions { margin-left: 0; }
}
@media (max-width: 560px) {
  .mast-header__actions .mast-link-quiet { display: none; }
}

/* --- Footer -------------------------------------------------------------
   Was: 37 numbered links in four columns. Numbering implied a sequence that
   didn't exist. These are lists, so they read as lists. */

.mast-footer {
  background: var(--mast-ink);
  color: var(--mast-snowfield);
  padding-block: var(--mast-space-16) var(--mast-space-8);
  font-family: var(--mast-font-body);
}
.mast-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--mast-space-8);
}
@media (max-width: 1024px) {
  .mast-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mast-footer__grid { grid-template-columns: 1fr; }
}

.mast-footer__wordmark {
  margin: 0 0 var(--mast-space-3);
  font-family: var(--mast-font-display);
  font-weight: var(--mast-weight-display);
  font-size: var(--mast-text-md);
  letter-spacing: var(--mast-tracking-display);
  line-height: var(--mast-leading-snug);
}
.mast-footer__blurb {
  margin: 0 0 var(--mast-space-4);
  max-width: 34ch;
  line-height: var(--mast-leading-body);
  opacity: 0.72;
}
.mast-footer__regd,
.mast-footer__address {
  margin: 0;
  font-family: var(--mast-font-mono);
  font-size: var(--mast-text-xs);
  letter-spacing: 0.05em;
  line-height: 2;
  font-style: normal;
  opacity: 0.72;
}

.mast-footer__head {
  margin: 0 0 var(--mast-space-4);
  font-family: var(--mast-font-mono);
  font-size: var(--mast-text-xs);
  font-weight: var(--mast-weight-body);
  letter-spacing: var(--mast-tracking-label);
  text-transform: uppercase;
  color: var(--mast-accent-quiet);
}

.mast-footer__list,
.mast-footer__social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--mast-space-2);
}
.mast-footer__social {
  margin-top: var(--mast-space-4);
}
.mast-footer a {
  color: inherit;
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.18s var(--mast-ease), color 0.18s var(--mast-ease);
}
.mast-footer a:hover,
.mast-footer a:focus {
  opacity: 1;
  color: var(--mast-accent-quiet);
}
.mast-footer a:focus-visible {
  outline: 2px solid var(--mast-accent-quiet);
  outline-offset: 2px;
}

.mast-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mast-space-4);
  margin-top: var(--mast-space-16);
  padding-top: var(--mast-space-6);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  font-family: var(--mast-font-mono);
  font-size: var(--mast-text-xs);
  letter-spacing: 0.05em;
  opacity: 0.62;
}
.mast-footer__base p { margin: 0; }
.mast-footer__legal {
  display: flex;
  gap: var(--mast-space-4);
}

/* --- Parent-theme reconciliation ----------------------------------------
   A handful of colours are hardcoded in travel-monster's stylesheet rather than
   driven by its CSS variables, so the customizer can't reach them. We match the
   parent's selector exactly and load after it — same specificity, later in the
   cascade, so it wins on merit. No !important. That is the whole point of the
   child theme: win by position, not by shouting. */

.category-trips-single .category-trips-single-inner-wrap .category-feat-ribbon .category-feat-ribbon-txt {
  background: var(--mast-accent-quiet); /* was #FEC350 */
  color: var(--mast-ink);
  border-radius: var(--mast-radius);
}

.category-trips-single .category-trips-single-inner-wrap .category-trip-viewmre-btn {
  border-radius: var(--mast-radius);
  font-family: var(--mast-font-display);
  letter-spacing: 0.03em;
}

/* Hover on a trek card is a LIFT, not a repaint. The card stays white; the shadow does the work. */
.category-trips-single .category-trips-single-inner-wrap:hover {
  box-shadow: var(--mast-shadow);
  transform: translateY(-3px);
  transition: transform 0.2s var(--mast-ease), box-shadow 0.2s var(--mast-ease);
}

/* The trip-fact icons. These were pinned teal by a hardcoded `!important` in the customizer's
   Additional CSS — the most literal example of the override problem on the whole site.
   They are decoration, not an action, so they take the muted neutral. The accent is reserved for
   things you can click. */
.trip-facts-value .icon-holder,
.trip-facts .icon-holder {
  color: var(--mast-text-muted);
}

/* --- WP Travel Engine tabs -----------------------------------------------
   The plugin hardcodes #1a84ee as its own accent, so the trek page's tabs stayed
   a stock blue no matter what the design system said. The tabs are navigation:
   the selected one earns the accent, the rest stay quiet. */

.wpte-sticky-tabs .nav-tab,
.wpte-tabs-container .nav-tab {
  color: var(--mast-text-muted);
  font-family: var(--mast-font-display);
  font-weight: var(--mast-weight-strong);
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--mast-ease), border-color 0.18s var(--mast-ease);
}

.wpte-sticky-tabs .nav-tab:hover,
.wpte-tabs-container .nav-tab:hover {
  color: var(--mast-text);
}

/* WTE's own rule is `.nav-tab-wrapper .tab-anchor-wrapper .nav-tab.nav-tab-active`
   — four classes. Match its shape and add one more so we win on specificity alone.
   The markup carries `.active` in some states and `.nav-tab-active` in others, so
   cover both. */
.wpte-tabs-container .nav-tab-wrapper .tab-anchor-wrapper .nav-tab.active,
.wpte-tabs-container .nav-tab-wrapper .tab-anchor-wrapper .nav-tab.nav-tab-active,
.wpte-sticky-tabs .tab-anchor-wrapper .nav-tab.active,
.wpte-sticky-tabs .tab-anchor-wrapper .nav-tab.nav-tab-active {
  color: var(--mast-accent);
  border-bottom-color: var(--mast-accent);
}