/*
Theme Name: Wild Route Child
Theme URI: https://wildroutetours.com
Description: Child theme for Wild Route Trips. Holds the Geist font registration, the design tokens as CSS custom properties, and any site-specific PHP. Design direction: Wild Route Bone & Marigold.
Author: Wild Route Trips
Template: astra
Version: 1.0.0
Text Domain: wild-route-child
*/

/* ------------------------------------------------------------------
   Design tokens — Wild Route Bone & Marigold
   Mirrors docs/DESIGN.md. Elementor global colours reference the same
   values; these exist so hand-written CSS never hardcodes a hex.
   ------------------------------------------------------------------ */

:root {
  /* Grounds */
  --wr-bone: #FBF9F5;
  --wr-cream: #F3EFE7;
  --wr-sunken: #E8E1D5;
  --wr-white: #FFFFFF;

  /* Ink */
  --wr-ink: #161A18;
  --wr-deep: #0F1211;
  --wr-raised: #242927;

  /* Text */
  --wr-body: #3A3D39;
  --wr-muted: #6E7269;
  --wr-border: #CFC9BE;

  /* Gold, three stops, each with one job */
  --wr-marigold: #F0A02A;   /* primary button fill only */
  --wr-ochre: #96601C;      /* gold TEXT on light, and the button hairline */
  --wr-champagne: #EBD6AC;  /* links and rules on dark grounds */

  /* State */
  --wr-positive: #3E6B4A;
  --wr-critical: #8C3A2E;

  /* Rhythm */
  --wr-rail: 1200px;
  --wr-rail-inner: 1140px;
  --wr-gutter: 30px;
  --wr-band: 120px;
  --wr-band-mobile: 64px;

  /* Motion. Curve read from the reference template's own bundle. */
  --wr-ease: cubic-bezier(0.29, 0.24, 0.33, 0.99);
  --wr-dur: 0.9s;
}

/* Every radius is 0. This is a hard rule in DESIGN.md. */
:root {
  --wr-radius: 0px;
}

/* ------------------------------------------------------------------
   Reveal-on-scroll, with the failure mode the reference template has.
   Wandery sets opacity:0.001 and only clears it on intersection, so a
   deep link or anchor jump lands the visitor on blank space. Here the
   hidden state is applied by JS only, so if the script never runs
   everything is visible, and anything already in view on load is
   revealed immediately.
   ------------------------------------------------------------------ */

.wr-reveal-ready .wr-reveal {
  opacity: 0;
  transform: translateY(60px);
  will-change: opacity, transform;
}

.wr-reveal-ready .wr-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--wr-dur) var(--wr-ease),
              transform var(--wr-dur) var(--wr-ease);
}

@media (prefers-reduced-motion: reduce) {
  .wr-reveal-ready .wr-reveal,
  .wr-reveal-ready .wr-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Sticky intro column. Used on About and country hubs.
   Released below 1024px so it never traps a phone.
   ------------------------------------------------------------------ */

@media (min-width: 1025px) {
  .wr-sticky-intro {
    position: sticky;
    top: 100px;
  }
}

/* Body measure. Running text never exceeds 68 characters. */
.wr-measure {
  max-width: 68ch;
}

/* Headings never end on an orphan. */
h1, h2, h3, h4 {
  text-wrap: balance;
}

/* ==================================================================
   HEADER
   Fixed. Transparent over a hero at rest, bone with a hairline once
   scrolled. Logo, menu ink and CTA all swap on the one body class.
   ================================================================== */

.wr-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--wr-ease),
              border-color .35s var(--wr-ease),
              padding .35s var(--wr-ease);
}

body.wr-scrolled .wr-header,
body.wr-scrolled .wr-header.e-con {
  background-color: var(--wr-bone) !important;
  border-bottom-color: var(--wr-border) !important;
}

/* --- dual logo ------------------------------------------------- */
.wr-logo-slot { position: relative; }
.wr-logo-dark { display: none; }
.wr-logo-light { display: block; }
body.wr-scrolled .wr-logo-light { display: none; }
body.wr-scrolled .wr-logo-dark { display: block; }

/* --- menu ink ---------------------------------------------------
   Xpro's real class names, read off the rendered DOM rather than guessed:
     wrapper  .xpro-elementor-horizontal-navbar-wrapper
     list     ul.xpro-elementor-horizontal-navbar-nav
     top link a.nav-link.menu-link
     sub link a.xpro-elementor-dropdown-item.menu-link
   ---------------------------------------------------------------- */
.wr-header a.nav-link.menu-link,
.wr-header .xpro-elementor-horizontal-navbar-nav > li > a {
  color: var(--wr-bone) !important;
  font-family: Geist, system-ui, sans-serif;
  font-weight: 500;
  transition: color .35s var(--wr-ease);
}
body.wr-scrolled .wr-header a.nav-link.menu-link,
body.wr-scrolled .wr-header .xpro-elementor-horizontal-navbar-nav > li > a {
  color: var(--wr-ink) !important;
}
.wr-header a.nav-link.menu-link:hover,
body.wr-scrolled .wr-header a.nav-link.menu-link:hover {
  color: var(--wr-marigold) !important;
}

/* the dropdown panel always sits on bone, so it always takes ink */
.wr-header .xpro-elementor-horizontal-navbar-nav .sub-menu,
.wr-header .xpro-elementor-dropdown-menu,
.wr-header ul ul {
  background: var(--wr-bone) !important;
  border: 1px solid var(--wr-border);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(22,26,24,.10);
  padding: 8px 0;
}
.wr-header a.xpro-elementor-dropdown-item,
.wr-header a.xpro-elementor-dropdown-item.menu-link {
  color: var(--wr-ink) !important;
  font-family: Geist, system-ui, sans-serif;
  font-size: 15px;
  padding: 10px 20px;
}
.wr-header a.xpro-elementor-dropdown-item:hover {
  color: var(--wr-ochre) !important;
  background: var(--wr-cream) !important;
}

/* the logo anchors are bare links and pick up a default blue; kill it */
.wr-header .wr-logo a { color: inherit; text-decoration: none; }

/* --- hamburger and mobile panel ---------------------------------- */
.wr-header [class*="xpro-elementor-horizontal-menu-toggle"],
.wr-header [class*="menu-toggle"],
.wr-header [class*="hamburger"] {
  color: var(--wr-bone) !important;
  border-color: var(--wr-bone) !important;
  background: transparent !important;
}
.wr-header [class*="xpro-elementor-horizontal-menu-toggle"] i,
.wr-header [class*="menu-toggle"] i,
.wr-header [class*="hamburger"] i,
.wr-header [class*="menu-toggle"] svg { color: var(--wr-bone) !important; fill: var(--wr-bone) !important; }

body.wr-scrolled .wr-header [class*="xpro-elementor-horizontal-menu-toggle"],
body.wr-scrolled .wr-header [class*="menu-toggle"],
body.wr-scrolled .wr-header [class*="hamburger"] {
  color: var(--wr-ink) !important;
  border-color: var(--wr-ink) !important;
}
body.wr-scrolled .wr-header [class*="xpro-elementor-horizontal-menu-toggle"] i,
body.wr-scrolled .wr-header [class*="menu-toggle"] i,
body.wr-scrolled .wr-header [class*="hamburger"] i,
body.wr-scrolled .wr-header [class*="menu-toggle"] svg { color: var(--wr-ink) !important; fill: var(--wr-ink) !important; }

/* the off-canvas panel is its own surface: bone ground, ink links */
.xpro-elementor-horizontal-navbar.xpro-elementor-menu-open,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar {
  --wr-panel: var(--wr-bone);
}
@media (max-width: 1024px) {
  .wr-header .xpro-elementor-horizontal-navbar {
    background: var(--wr-bone) !important;
  }
  .wr-header .xpro-elementor-horizontal-navbar a.nav-link.menu-link,
  .wr-header .xpro-elementor-horizontal-navbar a.menu-link {
    color: var(--wr-ink) !important;
    font-size: 18px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--wr-border);
  }
  .wr-header .xpro-elementor-horizontal-menu-close { color: var(--wr-ink) !important; }
}

/* --- CTA ---------------------------------------------------------
   Elementor generates `.elementor-NNN .elementor-element-XXX .elementor-button`
   for every widget, which outranks a plain class selector. These need
   !important or the scrolled state silently does nothing.
   ---------------------------------------------------------------- */
.wr-header .wr-cta .elementor-button,
.wr-cta .elementor-button {
  background-color: transparent !important;
  color: var(--wr-bone) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  border-radius: 0 !important;
  transition: background-color .35s var(--wr-ease),
              color .35s var(--wr-ease),
              border-color .35s var(--wr-ease);
}
.wr-header .wr-cta .elementor-button:hover,
.wr-cta .elementor-button:hover {
  background-color: var(--wr-bone) !important;
  color: var(--wr-ink) !important;
  border-color: var(--wr-bone) !important;
}
body.wr-scrolled .wr-header .wr-cta .elementor-button,
body.wr-scrolled .wr-cta .elementor-button {
  background-color: var(--wr-marigold) !important;
  color: var(--wr-ink) !important;
  border-color: var(--wr-ochre) !important;
}
body.wr-scrolled .wr-header .wr-cta .elementor-button:hover,
body.wr-scrolled .wr-cta .elementor-button:hover {
  background-color: var(--wr-ink) !important;
  color: var(--wr-bone) !important;
  border-color: var(--wr-ink) !important;
}

/* Pages with no full-bleed hero need clearance under the fixed bar. */
body.wr-no-hero .wr-site-content,
body.wr-no-hero .elementor-section-wrap > .elementor-element:first-child,
body.wr-no-hero main { padding-top: var(--wr-header-h, 88px); }

@media (max-width: 1024px) {
  .wr-nav-slot { gap: 12px; }
  .wr-cta .elementor-button { padding: 12px 18px; font-size: 14px; }
}
@media (max-width: 767px) {
  /* the CTA competes with the hamburger on a phone; the footer and the
     sticky action bar carry it instead */
  .wr-header .wr-cta { display: none; }
}

/* ==================================================================
   FOOTER
   ================================================================== */

.wr-footer .elementor-icon-list-item a,
.wr-legal .elementor-icon-list-item a { transition: color .2s ease; }
.wr-footer .elementor-icon-list-icon { display: none; }
.wr-legal .elementor-icon-list-icon { display: none; }
.wr-legal .elementor-icon-list-items { display: flex; gap: 24px; }

.wr-footer .elementor-social-icon {
  background: transparent;
  border: 1px solid #3A403C;
  border-radius: 0;
  transition: background-color .2s ease, border-color .2s ease;
}
.wr-footer .elementor-social-icon:hover {
  background: var(--wr-marigold);
  border-color: var(--wr-marigold);
}
.wr-footer .elementor-social-icon:hover i { color: var(--wr-ink); }

@media (max-width: 767px) {
  .wr-legal .elementor-icon-list-items { gap: 20px; }
}


/* ==================================================================
   FLUENT FORMS
   The plugin ships its own blue button and rounded inputs. Both are
   overridden here rather than in the form JSON, because the plugin
   re-renders its inline styles and wins.
   ================================================================== */

.fluentform .ff-el-group { margin-bottom: 22px; }

.fluentform .ff-el-input--label label {
  font-family: Geist, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--wr-ink);
  margin-bottom: 8px;
}
.fluentform .ff-el-input--label.ff-el-is-required label:after { color: var(--wr-ochre); }

.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform input[type=number],
.fluentform select,
.fluentform textarea {
  font-family: Geist, system-ui, sans-serif !important;
  font-size: 16px !important;
  color: var(--wr-ink) !important;
  background: var(--wr-white) !important;
  border: 1px solid var(--wr-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
  border-color: var(--wr-ink) !important;
  box-shadow: 0 0 0 2px rgba(22,26,24,.12) !important;
  outline: none !important;
}
.fluentform ::placeholder { color: var(--wr-muted) !important; opacity: 1; }

.fluentform .ff-el-form-check-label,
.fluentform .ff_item_selected,
.fluentform .ff-el-form-check { font-family: Geist, system-ui, sans-serif; color: var(--wr-body); }
.fluentform .ff-el-form-check { margin-bottom: 8px; }

.fluentform .ff-el-help-message {
  font-family: Geist, system-ui, sans-serif;
  font-size: 14px;
  color: var(--wr-muted);
}

/* the submit button, square and marigold like every other primary action */
.fluentform .ff-btn-submit,
.fluentform button.ff-btn-submit,
.fluentform .ff_btn_style {
  font-family: Geist, system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  background: var(--wr-marigold) !important;
  color: var(--wr-ink) !important;
  border: 1px solid var(--wr-ochre) !important;
  border-radius: 0 !important;
  padding: 16px 30px !important;
  box-shadow: none !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.fluentform .ff-btn-submit:hover,
.fluentform button.ff-btn-submit:hover {
  background: var(--wr-ink) !important;
  color: var(--wr-bone) !important;
  border-color: var(--wr-ink) !important;
}

.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error select,
.fluentform .ff-el-is-error textarea { border-color: var(--wr-critical) !important; }
.fluentform .error.text-danger {
  font-family: Geist, system-ui, sans-serif;
  font-size: 14px;
  color: var(--wr-critical);
}

.ff-message-success {
  font-family: Geist, system-ui, sans-serif;
  background: var(--wr-cream) !important;
  border: 1px solid var(--wr-border) !important;
  border-radius: 0 !important;
  color: var(--wr-ink) !important;
  padding: 28px !important;
}

/* ==================================================================
   HERO SCRIM  (revision 2)
   The first version ran light at the top and dark at the bottom, which
   read well for the headline but left the fixed header sitting on a
   bright part of the photograph. Mainstop's hero is dark from the very
   top of the viewport, and the header is legible because of it.
   This runs dark, open, dark: the header has ground, the photograph
   breathes through the middle, the type sits on real darkness.
   Elementor's overlay only offers two stops, so it lives here.
   ================================================================== */

.wr-hero-scrim { position: relative; isolation: isolate; }

.wr-hero-scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(10,12,11,.92) 0%,
      rgba(10,12,11,.74) 10%,
      rgba(10,12,11,.34) 26%,
      rgba(10,12,11,.24) 44%,
      rgba(10,12,11,.62) 70%,
      rgba(10,12,11,.88) 86%,
      rgba(10,12,11,.95) 100%
    );
}

/* a second, softer pass from the left so the copy column never fights
   whatever is happening in the middle of the photograph */
.wr-hero-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,12,11,.55) 0%, rgba(10,12,11,.12) 46%, rgba(10,12,11,0) 70%);
}

.wr-hero-scrim > * { position: relative; z-index: 1; }

@media (max-width: 767px) {
  /* on a phone the copy fills the width, so the side pass is not needed */
  .wr-hero-scrim::after { background: linear-gradient(90deg, rgba(10,12,11,.35) 0%, rgba(10,12,11,0) 100%); }
}

/* ==================================================================
   RADIUS  (revision 2)
   Interactive things are soft, content things are square.
   Buttons and inputs 14px. Social icons and pills fully round.
   Cards, images and bands stay at 0.
   ================================================================== */

.wr-header .wr-cta .elementor-button,
.wr-cta .elementor-button,
.elementor-button,
.fluentform .ff-btn-submit,
.fluentform button.ff-btn-submit { border-radius: 14px !important; }

.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform input[type=number],
.fluentform select,
.fluentform textarea { border-radius: 14px !important; }

.wr-footer .elementor-social-icon,
.elementor-social-icon { border-radius: 999px !important; }

/* the header action is filled in both states now, so it never disappears
   against the photograph, and it is wide enough that the label holds one line */
.wr-header .wr-cta .elementor-button,
body.wr-scrolled .wr-header .wr-cta .elementor-button {
  background-color: var(--wr-marigold) !important;
  color: var(--wr-ink) !important;
  border: 1px solid var(--wr-ochre) !important;
  white-space: nowrap;
  letter-spacing: 0;
}
.wr-header .wr-cta .elementor-button:hover,
body.wr-scrolled .wr-header .wr-cta .elementor-button:hover {
  background-color: var(--wr-ink) !important;
  color: var(--wr-bone) !important;
  border-color: var(--wr-ink) !important;
}

/* ==================================================================
   MOBILE HEADER AND OFF-CANVAS PANEL
   ================================================================== */

@media (max-width: 1024px) {
  .wr-header .e-con-inner,
  .wr-header > .e-con-inner { padding-left: 18px !important; padding-right: 18px !important; }

  /* logo left, burger hard right, nothing in the middle */
  .wr-logo-slot { margin-right: auto; }
  .wr-nav-slot  { margin-left: auto; justify-content: flex-end !important; flex-grow: 0 !important; width: auto !important; }

  .wr-header .xpro-elementor-horizontal-menu-toggler {
    width: 46px; height: 46px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    border: 1px solid rgba(251,249,245,.42) !important;
    border-radius: 14px !important;
    background: rgba(10,12,11,.28) !important;
    backdrop-filter: blur(6px);
  }
  body.wr-scrolled .wr-header .xpro-elementor-horizontal-menu-toggler {
    border-color: var(--wr-border) !important;
    background: transparent !important;
    backdrop-filter: none;
  }
}

/* the panel itself */
@media (max-width: 1024px) {
  .wr-header .xpro-elementor-horizontal-navbar {
    background: var(--wr-bone) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
  }

  /* links read left to right, like everything else on the site */
  .wr-header .xpro-elementor-horizontal-navbar-nav {
    text-align: left !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
  }
  .wr-header .xpro-elementor-horizontal-navbar-nav > li { width: 100%; text-align: left !important; }
  .wr-header .xpro-elementor-horizontal-navbar a.nav-link.menu-link,
  .wr-header .xpro-elementor-horizontal-navbar a.menu-link {
    text-align: left !important;
    justify-content: flex-start !important;
    color: var(--wr-ink) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 17px 26px !important;
    border-bottom: 1px solid var(--wr-border) !important;
  }
  .wr-header .xpro-elementor-horizontal-navbar a.xpro-elementor-dropdown-item {
    font-size: 16px !important;
    padding-left: 44px !important;
    color: var(--wr-body) !important;
    background: var(--wr-cream) !important;
  }

  /* the close control, squared off with the burger it replaces */
  .wr-header .xpro-elementor-horizontal-menu-close {
    width: 46px; height: 46px;
    margin: 18px 26px 6px auto !important;
    border: 1px solid var(--wr-border) !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: var(--wr-ink) !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    order: 2;
  }

  /* injected by the child theme: the mark, then the action */
  .wr-offcanvas-logo {
    order: 1;
    display: flex; align-items: center;
    padding: 22px 26px 4px 26px;
  }
  .wr-offcanvas-logo img { width: 74px; height: auto; display: block; }

  .wr-header .xpro-elementor-horizontal-navbar-nav { order: 3; }

  .wr-offcanvas-cta { order: 4; padding: 26px; }
  .wr-offcanvas-cta a {
    display: block;
    text-align: center;
    background: var(--wr-marigold);
    color: var(--wr-ink) !important;
    border: 1px solid var(--wr-ochre);
    border-radius: 14px;
    font-family: Geist, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 500;
    padding: 16px 24px;
    text-decoration: none;
  }
  .wr-offcanvas-cta a:hover { background: var(--wr-ink); color: var(--wr-bone) !important; border-color: var(--wr-ink); }

  .wr-offcanvas-contact {
    order: 5;
    padding: 0 26px 28px 26px;
    font-family: Geist, system-ui, sans-serif;
    font-size: 15px;
    color: var(--wr-muted);
    line-height: 1.7;
  }
  .wr-offcanvas-contact a { color: var(--wr-ochre); text-decoration: none; display: block; }
}

/* ------------------------------------------------------------------
   Mobile header, correction.
   Hiding .wr-cta hid the button but left its 170px container in the
   flex row, which pushed the burger 227px off the right edge and
   parked it beside the logo. Hide the slot, not the button, and let
   the nav slot take the remaining space.
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .wr-header .wr-cta-slot { display: none !important; }

  .wr-header .wr-logo-slot {
    width: auto !important;
    flex: 0 0 auto !important;
    margin-right: auto !important;
  }
  .wr-header .wr-logo-slot .elementor-widget-image,
  .wr-header .wr-logo-slot .elementor-widget-image img {
    width: 66px !important;
    max-width: none !important;
  }

  .wr-header .wr-nav-slot {
    width: auto !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
  }
}

@media (max-width: 480px) {
  .wr-header .wr-logo-slot .elementor-widget-image,
  .wr-header .wr-logo-slot .elementor-widget-image img { width: 58px !important; }
}

/* ------------------------------------------------------------------
   Off-canvas panel, final alignment.
   The close control was flowing above the panel on its own line and the
   contact lines were centred while the menu was left. Both now sit on
   the same left edge as everything else, with the close pinned beside
   the mark the way a header behaves.
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .wr-header .xpro-elementor-horizontal-navbar {
    position: relative;
    padding-top: 0 !important;
  }

  .wr-offcanvas-logo {
    padding: 22px 24px 16px 24px !important;
    border-bottom: 1px solid var(--wr-border);
  }
  .wr-offcanvas-logo img { width: 64px !important; }

  .wr-header .xpro-elementor-horizontal-menu-close {
    position: absolute !important;
    top: 20px !important;
    right: 24px !important;
    margin: 0 !important;
    z-index: 5;
  }

  .wr-header .xpro-elementor-horizontal-navbar a.nav-link.menu-link,
  .wr-header .xpro-elementor-horizontal-navbar a.menu-link { padding-left: 24px !important; }

  .wr-offcanvas-cta { padding: 24px !important; }

  .wr-offcanvas-contact {
    padding: 0 24px 30px 24px !important;
    text-align: left !important;
  }
  .wr-offcanvas-contact a { text-align: left !important; padding: 3px 0; }

  /* the dropdown chevrons were nearly invisible against bone */
  .wr-header .xpro-elementor-horizontal-navbar .xpro-dropdown-menu-toggle,
  .wr-header .xpro-elementor-horizontal-navbar .xpro-dropdown-menu-toggle i {
    color: var(--wr-muted) !important;
    right: 24px !important;
  }
}

/* ------------------------------------------------------------------
   Off-canvas extras are MOBILE ONLY.
   The child theme injects a logo, an action and the contact lines into
   the Xpro nav container so the mobile panel is usable. That container
   is the same element on desktop, where the extras were rendering raw
   in the middle of the navigation: a second logo above the links and
   two unstyled blue links below them. They are hidden above the
   breakpoint where the panel stops existing.
   ------------------------------------------------------------------ */
@media (min-width: 1025px) {
  .wr-offcanvas-logo,
  .wr-offcanvas-cta,
  .wr-offcanvas-contact { display: none !important; }
}

/* contact lines are separate rows, never run together */
.wr-offcanvas-contact a { display: block !important; }