/* Navigation access and product highlighting.
 *
 * 1. THE MENU COULD NOT BE OPENED ON MOST DESKTOPS
 *
 *    GTranslate renders #gt_float_wrapper as position:fixed, top:65px,
 *    right:20px, z-index:999999. The header's hamburger sits at roughly
 *    (viewport - 105px, 72-106px) and has z-index 1, so the language switcher
 *    landed directly on top of it. Measured on the live site, a click on the
 *    toggle did not reach it at 1440, 1280, 1024 or 768px — the most common
 *    laptop and tablet widths. It worked only at >=1600px and on phones, where
 *    the two happen not to overlap.
 *
 *    The whole site navigation was unreachable for most desktop visitors, which
 *    is why the Fuel Card and Factoring pages could not be found.
 *
 *    Fixed by moving the switcher clear of the toggle rather than by raising
 *    the toggle above it — stacking the toggle on top would just make the
 *    language switcher unclickable instead.
 *
 * 2. The two product pages are items 9 and 10 of a 17-item menu hidden behind
 *    that toggle, so they also get direct buttons in the header and an accent
 *    inside the menu.
 */

/* ---------- 1. free the menu toggle ---------- */

/* The switcher stays in the top-right corner, where visitors expect a language
   control and where the plugin puts it. Instead the header's own controls move
   left to make room — they are the thing this theme owns.
   The switcher is ~122px wide at right:20px, so it occupies the rightmost
   ~142px of the viewport; 150px of clearance keeps every header control out
   from under it at 768, 1024, 1280, 1440, 1600 and 1920.
   (An earlier attempt moved the switcher left instead, which simply relocated
   the collision onto the Factoring button.) */
@media (min-width: 768px) {
  /* .menuButton is position:fixed; right:75px — pinned to the viewport and
     outside the header's flex flow, which is why neither a margin on it nor
     padding on its parent ever moved it. The switcher occupies the rightmost
     ~142px, so the toggle has to clear that: right:170px puts it at
     viewport-200..-170, a 28px gap from the switcher's left edge at every
     width. */
  /* Specificity note: the theme sets this in two places —
       .menuButton                  right:0      (custom.min.css)
       header.fixed .menuButton     right:5rem   (custom.min.css)
       .menuButton                  right:2rem   (responsive.css, <=1359px)
     `header.fixed .menuButton` is 0-0-2-1 and was beating a plain
     `.main-header .menuButton` at 0-0-2-0, so the toggle never moved. These
     selectors clear it in both the scrolled and unscrolled header states. */
  header .main-header .menuButton,
  header.fixed .main-header .menuButton {
    right: 170px;
  }

  /* The quick links are in normal flow, so they still need the corner reserved
     or they run under the toggle and switcher as the row narrows. */
  header .main-header .buttonHeader {
    padding-right: 220px;
  }
}

/* The toggle is the most important control in the header; keep it above the
   theme's own decorative layers. */
.main-header .menu-Bar {
  position: relative;
  z-index: 100;
}

/* ---------- 2. direct links to the two product pages ---------- */

.pttr-quick-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  margin-right: 22px;
}

.pttr-quick-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, .35);
  color: #ffffff;
  background: rgba(255, 255, 255, .08);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.pttr-quick-links a:hover,
.pttr-quick-links a:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: #0a2540;
  transform: translateY(-1px);
}

.pttr-quick-links a:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .45);
  outline-offset: 2px;
}

/* The emoji marks which product each button is for at a glance; it is
   decorative, so it is hidden from screen readers in the markup. */
.pttr-quick-links a .pttr-ql-icon {
  font-size: 15px;
  line-height: 1;
}

/* A page's own button reads as current rather than as another destination. */
.pttr-quick-links a[aria-current="page"] {
  background: #ffffff;
  border-color: #ffffff;
  color: #0a2540;
}

/* ---------- 3. make them findable inside the menu too ---------- */

.menuWrap a[href*="fuel-card-application"],
.menuWrap a[href*="factoring-application"] {
  font-weight: 700;
}

.menuWrap a[href*="fuel-card-application"]::after,
.menuWrap a[href*="factoring-application"]::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 9px;
  border-radius: 50%;
  background: #22c3a6;
  vertical-align: middle;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .pttr-quick-links a {
    padding: 8px 14px;
    font-size: 13px;
  }
  .pttr-quick-links {
    gap: 8px;
    margin-right: 18px;
  }
}

/* On phones the logo row has no space for them: at 390px the gap between the
   logo and the language switcher is about 110px, and the toggle sits in it. So
   the buttons take a row of their own underneath, splitting the width evenly.
   .buttonHeader is the theme's flex row, hence the wrap plus a full-width
   basis to force the break. */
@media (max-width: 767px) {
  .main-header .buttonHeader {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  /* The toggle is position:fixed and ends up vertically beside this new row
     rather than on the logo row, so the row stops short of it. 60px clears the
     30px-wide toggle plus its offset at every phone width from 320 to 767. */
  /* The gap comes out of the basis, not a margin: with flex-shrink:0 a
     margin-right simply overflowed the row and the buttons never narrowed. */
  .pttr-quick-links {
    display: flex;
    order: 3;
    flex: 0 0 calc(100% - 60px);
    margin: 0 0 6px;
    gap: 8px;
  }

  .pttr-quick-links a {
    flex: 1 1 0;
    justify-content: center;
    padding: 10px 10px;
    font-size: 13.5px;
  }
}

/* Narrow phones: keep both labels readable rather than letting them wrap. */
@media (max-width: 360px) {
  .pttr-quick-links a {
    padding: 9px 6px;
    font-size: 12.5px;
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pttr-quick-links a {
    transition: none;
  }
  .pttr-quick-links a:hover {
    transform: none;
  }
}