/* ==========================================================================
   Elementor chrome overrides — header #20506, footer #21206.

   WHY THIS FILE EXISTS AND WHEN TO DELETE IT
   The child theme owns a header and footer of its own (inc/header.php,
   inc/footer.php, on the `travel_monster_header`/`_footer` hooks). They are
   currently DORMANT, because Elementor Pro's Theme Builder templates 20506 and
   21206 are `publish` and its `elementor-location-header/footer` wins over the
   theme hook. Until those two templates are set back to `draft`, this file
   drags the Elementor chrome onto the design tokens. Restore the child header
   and this whole file can be deleted — nothing else references it.

   SPECIFICITY, NOT !important
   Elementor writes per-widget rules at (0,3,0):
     .elementor-20506 .elementor-element.elementor-element-XXXX { ... }
   Every selector here therefore leads with the template root's TWO classes,
   landing at (0,4,0). That beats Elementor on specificity alone, so this file
   never needs !important and never has to win a load-order race — which
   matters, because LiteSpeed combines all CSS into one bundle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Utility bar — hidden
   Registration number, phone, e-mail and six social icons took the first 55px
   of every page (165px on a phone). All of it is in the footer.
   -------------------------------------------------------------------------- */

.elementor-20506.elementor-location-header .elementor-element.elementor-element-28d4f47 {
  display: none;
}

/* --------------------------------------------------------------------------
   2. Header row — one slim navy bar
   Was a 150px white row. Navy matches the homepage bands and the footer, and
   the row is short enough that the hero fits the first screen.
   -------------------------------------------------------------------------- */

.elementor-20506.elementor-location-header .elementor-element.elementor-element-148b540 {
  --min-height: 72px;
  --align-items: center;
  background: var(--mast-navy);
  padding-block: var(--mast-space-2);
  box-shadow: 0 2px 0 var(--mast-barley);
}

/* --------------------------------------------------------------------------
   3. Logo — a badge hanging below the bar
   The ring text is unreadable at bar height, and a badge big enough to read
   makes the bar too tall, so it sits on a white disc and hangs below the bar
   over the hero. The widget is unpositioned on purpose: that makes the row
   itself the badge's containing block, so `top`/`left` are measured from the
   bar and not from wherever the widget happens to sit.

   The row is `position: fixed`, so the badge hangs over whatever is under it
   at ANY scroll position, not just over the hero. elementor-chrome.js adds
   `.mast-scrolled` once the page moves and the badge pulls back into the bar.
   Without that script the badge covers body text down the whole page.
   -------------------------------------------------------------------------- */

.elementor-20506.elementor-location-header .elementor-element.elementor-element-43ac5e1 {
  position: static;
  flex: none;
  width: 144px;
  margin-block: 0;
  padding: 0;
  line-height: 0;
  transition: width 0.25s ease;
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-43ac5e1 a {
  position: absolute;
  top: 10px;
  left: 40px;
  box-sizing: border-box;
  width: 128px;
  height: 128px;
  background: #fff;
  border: 3px solid var(--mast-barley);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 10, 30, 0.45);
  transition: width 0.25s ease, height 0.25s ease, top 0.25s ease, box-shadow 0.25s ease;
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-43ac5e1 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-148b540.mast-scrolled .elementor-element-43ac5e1 {
  width: 76px;
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-148b540.mast-scrolled .elementor-element-43ac5e1 a {
  top: 8px;
  width: 60px;
  height: 60px;
  border-width: 2px;
  box-shadow: 0 2px 8px rgba(0, 10, 30, 0.3);
}

/* The bar keeps its 72px at every width, so the badge has to stay well over it
   or the hang turns into a bulge. Roughly half the badge below the bar. */

@media (max-width: 1024px) {
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-43ac5e1 {
    width: 120px;
  }

  .elementor-20506.elementor-location-header .elementor-element.elementor-element-43ac5e1 a {
    top: 8px;
    left: 24px;
    width: 104px;
    height: 104px;
  }
}

@media (max-width: 767px) {
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-43ac5e1 {
    width: 104px;
  }

  .elementor-20506.elementor-location-header .elementor-element.elementor-element-43ac5e1 a {
    top: 8px;
    left: 16px;
    width: 92px;
    height: 92px;
  }
}

/* --------------------------------------------------------------------------
   4. Primary navigation
   Was: Archivo 600 18px pure black, 10px padding all round, heavy filled
   caret. Seven items at that weight read as seven headlines.

   Now: 18px at Tejanath's request, tracked slightly open, white on the navy
   bar, and the state is carried by a barley rule that grows from the centre
   (rhododendron measures 1.8:1 on navy) — so hover spends the accent on a
   hairline instead of repainting the label. Nothing here touches display/position/overflow: SmartMenus drives this
   menu with inline styles and reordering its box model breaks the dropdowns.

   Note on the size: 18px/600 across seven items is heavy for a nav — it gives
   each label the weight of a small headline and leaves the row ~1000px wide,
   which is what crowds it at laptop widths. It is deliberate, not drift. If it
   ever needs to come down, 16px is the next step that still reads comfortably.
   -------------------------------------------------------------------------- */

.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-item {
  position: relative;
  padding: var(--mast-space-3) var(--mast-space-4);
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-body);
  font-weight: var(--mast-weight-strong);
  line-height: 1.2;
  letter-spacing: 0.015em;
  color: var(--mast-ink);
  transition: color 0.18s var(--mast-ease);
}

/* The parent theme's blanket <li> margin-bottom: 25px stretches the bar's list
   and leaves the labels above the logo's centre line. */
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu--main .elementor-nav-menu > li {
  margin: 0;
}

/* White on the navy bar only. The burger panel on small screens uses the same
   items on a white ground and keeps them ink. */
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu--main .elementor-item {
  color: var(--mast-white);
}

/* The underline. A pseudo-element rather than border-bottom, so it can be
   centred and scaled without shifting the item's height. */
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu > li > .elementor-item::after {
  content: "";
  position: absolute;
  left: var(--mast-space-4);
  right: var(--mast-space-4);
  bottom: calc(var(--mast-space-2) - 2px);
  height: 2px;
  background-color: var(--mast-accent-quiet);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s var(--mast-ease);
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu > li > .elementor-item:hover::after,
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu > li > .elementor-item:focus-visible::after,
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu > li > .elementor-item.highlighted::after,
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu > li.current-menu-item > .elementor-item::after,
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu > li.current-menu-ancestor > .elementor-item::after {
  transform: scaleX(1);
}

/* Elementor paints the label #9C2426 on hover, from
     `… .elementor-nav-menu--main .elementor-item:hover` at (0,6,0).
   Recolouring the word AND drawing the rule says the same thing twice, and at
   15px a red label on white is the weakest way to say it. The rule is the
   state; the label holds still. Matching their selector and adding the two
   root classes puts this at (0,8,0). */
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu--main .elementor-item:hover,
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu--main .elementor-item:focus,
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--mast-white);
  fill: var(--mast-white);
  background-color: transparent;
}

/* The caret: was a solid black triangle at text size, reading as punctuation.
   Shrink it, mute it, and turn it when its panel is open. */
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .sub-arrow svg {
  width: 0.6em;
  height: 0.6em;
  fill: var(--mast-slate);
  transition: transform 0.22s var(--mast-ease), fill 0.18s var(--mast-ease);
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-item[aria-expanded="true"] .sub-arrow svg,
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-item:hover .sub-arrow svg {
  fill: var(--mast-ink);
  transform: rotate(180deg);
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu--main .sub-arrow svg,
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu--main .elementor-item:hover .sub-arrow svg {
  fill: rgba(255, 255, 255, 0.7);
}

/* Burger on the navy bar: white glyph, no white pill around it, 44px target. */
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-menu-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: transparent;
  border: 0;
  color: var(--mast-white);
}

/* Elementor custom CSS writes a black "Menu" word before the icon. The
   toggle already has aria-label="Menu Toggle". */
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-menu-toggle::before {
  content: none;
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f div.elementor-menu-toggle svg {
  width: 26px;
  height: 26px;
  fill: var(--mast-white);
}

/* --- Dropdown panels ---
   Scoped to ul.sub-menu on purpose. `.elementor-nav-menu--dropdown` is worn by
   TWO different things in this widget: the desktop sub-menu <ul>, and the
   <div> that wraps the whole burger menu on mobile. Styling the class alone
   repaints the mobile panel as a side effect. */
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f ul.sub-menu {
  background-color: var(--mast-white);
  border: 1px solid var(--mast-rule);
  border-radius: var(--mast-radius);
  box-shadow: var(--mast-shadow);
  padding-block: var(--mast-space-2);
  margin: 0;
}

/* Every row carried `margin-bottom: 25px` from the parent theme's blanket <li>
   rule, which is why a 15px label sat in a 73px row and the panel ran down over
   the hero. The <ul>'s own `margin: 10px 0 0 15px` also opened a 10px gap
   between the trigger and the panel — a dead zone the pointer has to cross,
   and crossing it closes the menu. */
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f ul.sub-menu > li {
  margin: 0;
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-sub-item {
  padding: 0.625rem var(--mast-space-6);
  font-family: var(--mast-font-display);
  /* One step under the top level, so the panel still reads as subordinate to
     the bar that opened it rather than as a second menu of equal rank. */
  font-size: var(--mast-fs-body);
  font-weight: var(--mast-weight-body);
  line-height: 1.35;
  color: var(--mast-ink-muted);
  /* Elementor rounds each row 20px at the top. On a full-bleed row that corner
     is invisible until something is drawn along the edge — then the hover rule
     below bends into an arc. Square the rows and the rule reads as a rule. */
  border-radius: 0;
  border-left: 2px solid transparent;
  transition: background-color 0.16s var(--mast-ease),
              border-color 0.16s var(--mast-ease),
              color 0.16s var(--mast-ease);
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-sub-item:hover,
.elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-sub-item.highlighted {
  background-color: var(--mast-paper);
  border-left-color: var(--mast-accent);
  color: var(--mast-ink);
}

/* --------------------------------------------------------------------------
   5. Donate button
   Already rhododendron, which is right — the accent belongs on the one thing
   in the header you are meant to click. Only the form was off: a 25px pill in
   Open Sans, the third typeface on a two-typeface site.
   -------------------------------------------------------------------------- */

/* Elementor pushes the button 23px down from the top of the row. */
.elementor-20506.elementor-location-header .elementor-element.elementor-element-f510fd3 > .elementor-widget-container {
  margin: 0;
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-f510fd3 .meafe-button {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-button);
  font-weight: var(--mast-weight-strong);
  letter-spacing: 0.01em;
  padding: var(--mast-space-3) var(--mast-space-6);
  border: 0;
  border-radius: var(--mast-radius-lg);
  background-color: var(--mast-accent);
  color: var(--mast-on-accent);
  transition: background-color 0.18s var(--mast-ease);
}

.elementor-20506.elementor-location-header .elementor-element.elementor-element-f510fd3 .meafe-button:hover,
.elementor-20506.elementor-location-header .elementor-element.elementor-element-f510fd3 .meafe-button:focus-visible {
  background-color: var(--mast-accent-hover);
  color: var(--mast-on-accent);
}

/* ==========================================================================
   FOOTER #21206
   ========================================================================== */

/* --------------------------------------------------------------------------
   5b. Footer columns — was four centred headings over left-aligned numbered
   lists, and one 1,666px column on a phone
   One grid on the page gutter, every column left-aligned, headings as small
   labels, links as a plain list (they are not a sequence).
   -------------------------------------------------------------------------- */

.elementor-21206.elementor-location-footer .elementor-element.elementor-element-bf1be11 {
  padding: clamp(3rem, 6vw, 4.5rem) var(--mast-gutter) clamp(2rem, 4vw, 3rem);
}

/* The four columns sit inside Elementor's .e-con-inner wrapper. */
.elementor-21206.elementor-location-footer .elementor-element.elementor-element-bf1be11 > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: var(--mast-space-8) clamp(1.5rem, 4vw, 4rem);
  width: 100%;
  max-width: none;
  padding: 0;
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-element-bf1be11 > .e-con-inner > .e-con {
  --width: auto;
  --padding-top: 0;
  --padding-right: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  width: auto;
  max-width: none;
  gap: var(--mast-space-4);
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-widget-heading,
.elementor-21206.elementor-location-footer .elementor-element.elementor-widget-text-editor {
  margin: 0;
  text-align: left;
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-widget-heading .elementor-heading-title {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--mast-barley);
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-widget-text-editor ol,
.elementor-21206.elementor-location-footer .elementor-element.elementor-widget-text-editor ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-widget-text-editor li {
  margin: 0 0 var(--mast-space-2);
  padding: 0;
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-widget-text-editor,
.elementor-21206.elementor-location-footer .elementor-element.elementor-widget-text-editor p {
  font-family: var(--mast-font-display);
  font-size: var(--mast-fs-small);
  line-height: 1.6;
  text-align: left;
  color: rgba(255, 255, 255, 0.72);
}

/* The contact paragraphs carry inline text-align: center from the editor;
   only !important beats an inline style. */
.elementor-21206.elementor-location-footer .elementor-element.elementor-widget-text-editor p {
  text-align: left !important;
}

/* Copyright strip on the same gutter as the columns. */
.elementor-21206.elementor-location-footer .elementor-element.elementor-element-67f7479 {
  padding-inline: var(--mast-gutter);
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-element-67f7479 > .e-con-inner {
  max-width: none;
  padding-inline: 0;
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-element-0521f5f {
  --padding-left: 0;
  --padding-right: 0;
  --margin-left: 0;
  --margin-right: 0;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-element-0521f5f p {
  text-align: left !important;
}

@media (max-width: 1024px) {
  .elementor-21206.elementor-location-footer .elementor-element.elementor-element-bf1be11 > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone: the three link lists in two columns, contact details full width. */
@media (max-width: 600px) {
  .elementor-21206.elementor-location-footer .elementor-element.elementor-element-bf1be11 > .e-con-inner > .e-con:last-child {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   6. Link hover — was rhododendron on navy
   #B32D2E on the #002147 ground measures 1.8:1. That is not a hover state, it
   is a link going dark: on a navy footer the accent has nowhere to go. Barley
   is the palette's other warm value and measures 5.1:1 on the same ground, so
   the hover now reads as brighter rather than redder.
   -------------------------------------------------------------------------- */

.elementor-21206.elementor-location-footer .elementor-element.elementor-element-bf1be11 a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  text-underline-offset: 0.22em;
  transition: color 0.16s var(--mast-ease);
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-element-bf1be11 a:hover,
.elementor-21206.elementor-location-footer .elementor-element.elementor-element-bf1be11 a:focus-visible {
  color: var(--mast-accent-quiet);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Copyright strip — the second orange, #FF8300
   A different orange from the top bar's #F78801, which is its own tell. The
   footer should end, not restart. Continue the navy and separate with a rule.
   -------------------------------------------------------------------------- */

.elementor-21206.elementor-location-footer .elementor-element.elementor-element-67f7479 {
  background-color: #002147;
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-element-0521f5f {
  background-color: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.elementor-21206.elementor-location-footer .elementor-element.elementor-element-0521f5f,
.elementor-21206.elementor-location-footer .elementor-element.elementor-element-0521f5f p {
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--mast-font-display);
  font-size: var(--mast-text-sm);
}

/* ==========================================================================
   TREK PAGES — WP Travel Engine's sticky tab bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   8. Stop the trek tabs painting over the header
   Both the header row and `nav.wpte-sticky-tabs` are `fixed; top: 0`. The tabs
   carry z-index 1111 against the header's 99, so on every trek page the menu
   and the Donate button disappear underneath Overview/Itinerary/Map. Drop the
   tabs by the header's measured height (assets/js/elementor-chrome.js keeps
   --mast-chrome-offset current) so the two stack instead of overlapping.
   The fallback of 0px means that if the script fails the tabs sit where they
   do today rather than floating in the middle of the page.
   -------------------------------------------------------------------------- */

/* WP Travel Engine pins these from
   `.wpte-tabs-container.fixed-header .nav-tab-wrapper` at (0,3,0), inside a
   `min-width: 768px` query. Naming all four classes puts this at (0,4,1). */
.wpte-tabs-container.fixed-header nav.wpte-sticky-tabs.nav-tab-wrapper {
  top: var(--mast-chrome-offset, 0px);
}

/* The tabs are ordinary `href="#wte-itinerary"` anchors, and the document
   scrolls smoothly, so without scroll-padding the browser puts the target at
   the very top of the viewport — behind both fixed bars. Clicking Itinerary
   landed you somewhere in the middle of the Overview. This was already true of
   the header alone; moving the tabs below it added their height to the problem,
   so the padding covers the pair. */
html {
  scroll-padding-top: var(--mast-chrome-total, 0px);
}

/* --------------------------------------------------------------------------
   9. Small screens
   The utility bar's three lists stack; the logo gutter would push the burger
   off the row. The logo's own small-screen sizes are in section 3.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-f510fd3 .meafe-button {
    margin: 0;
    padding: var(--mast-space-2) var(--mast-space-4);
    font-size: var(--mast-fs-button);
  }

  /* One centre line: logo on the left, Donate then the burger on the right.
     Elementor pins the logo to the top, gives the menu widget a -29px margin
     and the button a 22px top margin, so all three sat at different heights. */
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-148b540 {
    --justify-content: flex-start;
    --gap: var(--mast-space-3);
    gap: var(--mast-space-3);
    padding-inline: var(--mast-gutter);
  }

  .elementor-20506.elementor-location-header .elementor-element.elementor-element-43ac5e1,
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f,
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-f510fd3 {
    --align-self: center;
    align-self: center;
    margin: 0;
  }

  .elementor-20506.elementor-location-header .elementor-element.elementor-element-f510fd3 {
    order: 2;
    margin-left: auto;
  }

  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f {
    order: 3;
    --width: auto;
    width: auto;
  }

  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-menu-toggle {
    margin: 0;
  }

  /* The burger panel: flat, full width, items left-aligned. Was a 20px-rounded
     card with centred items and a dark grey bar on the open item. */
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f nav.elementor-nav-menu--dropdown {
    border-radius: 0;
    background-color: var(--mast-white);
    border-top: 1px solid var(--mast-rule);
    box-shadow: var(--mast-shadow);
  }

  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f nav.elementor-nav-menu--dropdown .elementor-item,
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f nav.elementor-nav-menu--dropdown .elementor-sub-item {
    justify-content: space-between;
    padding: var(--mast-space-4) var(--mast-gutter);
    border-bottom: 1px solid var(--mast-rule);
    border-radius: 0;
    text-align: left;
    color: var(--mast-ink);
    background-color: transparent;
  }

  /* Elementor's `ul li { margin-bottom: 25px }` left a white gap under every row. */
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f nav.elementor-nav-menu--dropdown li {
    margin: 0;
  }

  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f nav.elementor-nav-menu--dropdown .elementor-item.highlighted,
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f nav.elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f nav.elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    color: var(--mast-ink);
    background-color: var(--mast-paper);
    box-shadow: inset 3px 0 0 var(--mast-rhodo);
  }

  /* Sub-menus open inline under their parent, indented, not as floating cards. */
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f nav.elementor-nav-menu--dropdown ul.sub-menu {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background-color: var(--mast-paper);
  }

  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f nav.elementor-nav-menu--dropdown .elementor-sub-item {
    padding-left: calc(var(--mast-gutter) + var(--mast-space-4));
    font-size: var(--mast-fs-body);
    color: var(--mast-ink-muted);
    border-left: 0;
  }

  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f nav.elementor-nav-menu--dropdown .sub-arrow svg {
    fill: var(--mast-slate);
  }

  /* The centre-out underline is a pointer affordance; in the burger panel the
     items are full-width rows and it would read as a stray rule. */
  .elementor-20506.elementor-location-header .elementor-element.elementor-element-2ab684f .elementor-nav-menu > li > .elementor-item::after {
    display: none;
  }
}