/* ==========================================================================
   USLS — Mega Menus (Services + About Us)              v1.2.4
   --------------------------------------------------------------------------
   Works together with usls-mega-menu.js, which injects the usls-* classes.
   NO menu IDs or item IDs are used anywhere (items are matched by URL),
   so menu renames (temp -> production) make no difference.

   Fonts: everything inherits the theme font stack (Roboto, already loaded,
   weights 400/500/700). No new font or icon font is loaded — icons are
   inline SVG injected by the JS.

   Panel positioning (top pinned to the header bottom, right edge clamped
   to the page content area) is done by the JS on open — the left values
   below are only the pre-clamp design offsets.
   ========================================================================== */

/* ==========================================================================
   1. DESKTOP — shared panel shell (>= 769px; Avada's mobile breakpoint)
   ========================================================================== */
@media only screen and (min-width: 769px) {

  .fusion-main-menu .usls-mm,
  .fusion-main-menu .usls-am { position: relative; }

  .fusion-main-menu .usls-mm > .usls-mm__panel,
  .fusion-main-menu .usls-am > .usls-am__panel {
    display: grid !important;
    width: 860px !important;
    max-width: calc(100vw - 32px);
    min-width: 0 !important;
    right: auto;
    background: #0a0a0a !important;
    border: 0 !important;           /* removes Avada's 3px dropdown top border */
    border-radius: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    padding: 0 !important;
  }

  /* Invisible hover bridge over the gap between the menu item and the
     panel (the header's bottom padding, ~7px on the live site): without
     it the pointer leaves the li before reaching the panel and the
     dropdown closes. Height is set by the JS (--usls-bridge) from the
     measured gap; it only exists while the panel is visible. */
  .fusion-main-menu .usls-mm > .usls-mm__panel::before,
  .fusion-main-menu .usls-am > .usls-am__panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--usls-bridge, 20px);
  }
  .fusion-main-menu .usls-mm > .usls-mm__panel { grid-template-columns: 300px 1fr;     left: -185px; }
  .fusion-main-menu .usls-am > .usls-am__panel { grid-template-columns: 300px 1fr 1fr; left: -355px; }

  /* keyboard accessibility: open while focus is inside the item */
  .fusion-main-menu .usls-mm:focus-within > .usls-mm__panel,
  .fusion-main-menu .usls-am:focus-within > .usls-am__panel {
    visibility: visible;
    opacity: 1;
  }

  /* ========================================================================
     2. SERVICES panel
     ======================================================================== */

  /* ----- right-column rows (Standard / Legal Transcription / Sworn) ----- */
  .usls-mm__panel li.usls-mm__item {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    grid-column: 2;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .usls-mm__panel li.usls-mm__item.usls-mm__first { border-top: 0; }

  .usls-mm__panel li.usls-mm__item > a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    /* fill the whole grid cell: when the featured card is taller than the
       rows, the rows stretch — the hover surface must reach the next row's
       divider instead of stopping at the content height */
    height: 100% !important;
    min-height: 0 !important;
    line-height: normal !important;
    white-space: normal !important;
    padding: 18px 24px !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
    color: #fff !important;
    text-align: left;
  }
  .usls-mm__panel li.usls-mm__item > a:hover,
  .usls-mm__panel li.usls-mm__item > a:focus {
    background: #181818 !important;
  }

  .usls-mm__icon { display: flex; flex: 0 0 auto; color: #fff; margin-top: 16px; }
  .usls-mm__icon svg { width: 22px; height: 22px; display: block; }

  .usls-mm__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

  .usls-mm__kicker {
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
    color: #8d949c; text-transform: uppercase; line-height: 1.2;
  }
  .usls-mm__title {
    font-size: 16px; font-weight: 700; letter-spacing: .5px;
    color: #fff; text-transform: uppercase; line-height: 1.25;
  }
  .usls-mm__desc {
    font-size: 12.5px; font-weight: 400; line-height: 1.45;
    color: #a6adb5; text-transform: none; letter-spacing: normal;
  }

  /* square corners (v1.2) */
  .usls-mm__badge {
    margin-left: auto; margin-top: 16px; flex: 0 0 auto;
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 0;
    border: 1px solid rgba(255, 255, 255, .32);
    color: #d4d8dd; font-size: 10px; font-weight: 700; letter-spacing: 1px;
    white-space: nowrap; text-transform: uppercase; line-height: 1.4;
  }

  /* ----- featured card (Certified Translation), left column -----
     THREE sibling links (links can't be nested):
       a.usls-mm__card-link -> the Certified Translation landing page
       a.usls-mm__cta       -> the store/order page (ctaUrl in the config)
       a.usls-mm__quote     -> the quote anchor (quoteUrl in the config)
     so background and padding live on the <li>. v1.2: black, not blue. */
  .usls-mm__panel li.usls-mm__item--certified {
    grid-column: 1;
    grid-row: 1 / span 3;          /* JS recalculates the span */
    border-top: 0;
    border-right: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px !important;
    background: #000;
  }
  .usls-mm__panel li.usls-mm__item--certified:hover { background: #0d0d0d; }

  .usls-mm__panel li.usls-mm__item--certified > a {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .usls-mm__panel li.usls-mm__item--certified > a:hover,
  .usls-mm__panel li.usls-mm__item--certified > a:focus {
    background: transparent !important;
  }
  .usls-mm__panel li.usls-mm__item--certified > a.usls-mm__card-link { flex: 0 0 auto; }

  .usls-mm__item--certified .usls-mm__icon { margin-top: 0; color: #fff; }
  .usls-mm__item--certified .usls-mm__icon svg { width: 28px; height: 28px; }

  /* v1.2: solid white, square */
  .usls-mm__flag-pill {
    align-self: flex-start; display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 0; border: 0;
    background: #fff; color: #000;
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; line-height: 1.4; white-space: nowrap;
  }
  .usls-mm__card-title {
    font-size: 19px; font-weight: 700; letter-spacing: .5px;
    color: #fff; text-transform: uppercase; line-height: 1.25;
  }
  .usls-mm__card-desc {
    font-size: 13px; line-height: 1.5; color: #fff;
    font-weight: 400; text-transform: none; letter-spacing: normal;
  }

  /* ORDER NOW — own link to the store page */
  .usls-mm__panel li.usls-mm__item--certified > a.usls-mm__cta {
    display: block !important;
    flex: 0 0 auto;
    margin-top: 4px;
    padding: 11px 0 !important;
    text-align: center;
    background: #0a7cf2 !important;
    color: #fff !important;
    font-size: 13px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; line-height: 1.4;
  }
  .usls-mm__panel li.usls-mm__item--certified > a.usls-mm__cta:hover,
  .usls-mm__panel li.usls-mm__item--certified > a.usls-mm__cta:focus {
    background: #1e86f4 !important;
  }
  /* span fallback (no ctaUrl configured) */
  span.usls-mm__cta {
    display: block; margin-top: 4px; padding: 11px 0; text-align: center;
    background: #0a7cf2; color: #fff; font-size: 13px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase; line-height: 1.4;
  }

  /* Get a quote — own link to the quote anchor */
  .usls-mm__panel li.usls-mm__item--certified > a.usls-mm__quote {
    display: block !important;
    flex: 0 0 auto;
    padding: 2px 0 0 !important;
    background: transparent !important;
    text-align: center;
    color: #fff !important;
    font-size: 14px; font-weight: 400;
    letter-spacing: normal; text-transform: none; line-height: 1.4;
  }
  .usls-mm__panel li.usls-mm__item--certified > a.usls-mm__quote:hover,
  .usls-mm__panel li.usls-mm__item--certified > a.usls-mm__quote:focus {
    background: transparent !important;
    text-decoration: underline;
  }

  /* ----- Sworn Translation — "Spain & EU only" darker group ----- */
  .usls-mm__panel li.usls-mm__item--sworn > a { background: #050505 !important; }
  .usls-mm__panel li.usls-mm__item--sworn > a:hover,
  .usls-mm__panel li.usls-mm__item--sworn > a:focus { background: #141414 !important; }
  .usls-mm__item--sworn .usls-mm__icon  { color: #c9ced4; }
  .usls-mm__item--sworn .usls-mm__title { color: #d9dde2; }

  /* ========================================================================
     3. ABOUT US panel (grid: 300px card + 2 item columns, 3 labeled groups)
     ======================================================================== */

  /* ----- featured card (built from the "About us" parent item) ----- */
  .usls-am__panel li.usls-am__card {
    grid-column: 1;
    grid-row: 1 / span 6;          /* JS recalculates */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, .14) !important;
    list-style: none;
  }
  .usls-am__panel li.usls-am__card > a {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
    height: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    line-height: normal !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    padding: 26px 24px !important;
    background: #000 !important;
    border: 0 !important;
    color: #fff !important;
    text-align: left;
  }
  .usls-am__panel li.usls-am__card > a:hover,
  .usls-am__panel li.usls-am__card > a:focus { background: #111 !important; }

  .usls-am__pill {
    align-self: flex-start; display: inline-flex; align-items: center;
    padding: 4px 10px; background: #fff; color: #000;
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; line-height: 1.4; white-space: nowrap;
  }
  .usls-am__card-title {
    font-size: 19px; font-weight: 700; letter-spacing: .5px;
    color: #fff; text-transform: uppercase; line-height: 1.25;
  }
  .usls-am__card-desc {
    font-size: 13px; line-height: 1.5; color: #fff;
    font-weight: 400; text-transform: none; letter-spacing: normal;
  }
  .usls-am__cta {
    display: block; margin-top: 4px; padding: 10px 0; text-align: center;
    border: 2px solid #fff; color: #fff;
    font-size: 13px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; line-height: 1.4;
  }
  .usls-am__panel li.usls-am__card > a:hover .usls-am__cta {
    background: #fff; color: #000;
  }

  /* ----- group headers (injected, non-interactive) -----
     No top margin: a margin would leave a dead strip between the previous
     row's hover surface and the divider line — the 10px of breathing room
     lives inside the padding instead, so hovered rows touch the divider. */
  .usls-am__panel li.usls-am__grp {
    grid-column: 2 / span 2;
    margin: 0 !important;
    padding: 24px 24px 8px !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .14) !important;
    list-style: none;
    pointer-events: none;
  }
  .usls-am__panel li.usls-am__grp.usls-am__grp--first {
    margin-top: 0 !important;
    padding-top: 22px !important;
    border-top: 0 !important;
  }
  .usls-am__grp-t {
    display: block;
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
    color: #8d949c; text-transform: uppercase; line-height: 1.2;
  }

  /* ----- item rows (two per group) ----- */
  .usls-am__panel li.usls-am__item {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    border: 0 !important;
  }
  .usls-am__panel li.usls-am__item > a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    line-height: normal !important;
    white-space: normal !important;
    padding: 10px 24px !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
    color: #fff !important;
    text-align: left;
  }
  .usls-am__panel li.usls-am__item > a:hover,
  .usls-am__panel li.usls-am__item > a:focus {
    background: #181818 !important;
  }
  /* extra breathing room under the last group (design: 14px panel bottom) */
  .usls-am__panel li.usls-am__item--bottom > a { padding-bottom: 24px !important; }

  .usls-am__icon { display: flex; flex: 0 0 auto; color: #fff; margin-top: 2px; }
  .usls-am__icon svg { width: 20px; height: 20px; display: block; }

  .usls-am__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .usls-am__t {
    font-size: 15px; font-weight: 700; letter-spacing: .5px;
    color: #fff; text-transform: uppercase; line-height: 1.3;
    white-space: nowrap;
  }
  .usls-am__desc {
    font-size: 12px; font-weight: 400; line-height: 1.4;
    color: #a6adb5; text-transform: none; letter-spacing: normal;
  }
}

/* ==========================================================================
   4. MOBILE — Services rows inside Avada's mobile menu
      (About Us is left as a plain accordion — no mobile styles needed)
   ========================================================================== */

.fusion-mobile-nav-holder li.usls-m > a,
.fusion-mobile-sticky-nav-holder li.usls-m > a {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  height: auto !important;
  min-height: var(--mobile_menu_nav_height, 45px);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}

.usls-m__row { display: flex; align-items: center; gap: 10px; max-width: 100%; }

.usls-m__desc {
  display: block;
  font-size: 12.5px; font-weight: 400; line-height: 1.45;
  color: #9aa1a9; letter-spacing: normal; text-transform: none;
}

/* outline pill (NEW); square corners since v1.2 */
.usls-m__pill {
  display: inline-flex; flex: 0 0 auto; align-items: center;
  padding: 3px 8px; border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .32);
  color: #d4d8dd; font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px; line-height: 1.4; text-transform: uppercase;
}

/* Featured (Certified): renders on the plain mobile background, identical to
   the other rows (v1.2.4: blue tint removed per request). */

/* Sworn: slightly muted title */
.usls-m--sworn .usls-m__title { color: #e3e6ea; }

/* Non-clickable group label: "SPAIN & EU ONLY 🇪🇸" */
.fusion-mobile-nav-holder li.usls-m__label,
.fusion-mobile-sticky-nav-holder li.usls-m__label {
  display: flex; align-items: flex-end;
  padding: 14px 12px 5px 12px;
  background-color: var(--mobile_menu_background_color, #000);
  color: #8d949c; font-size: 11px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; line-height: 1.2;
}

/* ==========================================================================
   5. SAFETY NET
      If Avada clones the (already transformed) desktop menu into the mobile
      holder before our JS rebuilds/sanitizes that section, hide the
      desktop-only fragments so the clone degrades to plain text rows.
   ========================================================================== */
.fusion-mobile-nav-holder .usls-mm__icon,
.fusion-mobile-nav-holder .usls-mm__kicker,
.fusion-mobile-nav-holder .usls-mm__desc,
.fusion-mobile-nav-holder .usls-mm__card-desc,
.fusion-mobile-nav-holder .usls-mm__flag-pill,
.fusion-mobile-nav-holder .usls-mm__badge,
.fusion-mobile-nav-holder .usls-mm__cta,
.fusion-mobile-nav-holder .usls-mm__quote,
.fusion-mobile-nav-holder .usls-am__icon,
.fusion-mobile-nav-holder .usls-am__desc,
.fusion-mobile-nav-holder .usls-am__pill,
.fusion-mobile-nav-holder .usls-am__card-desc,
.fusion-mobile-nav-holder .usls-am__cta,
.fusion-mobile-nav-holder .usls-am__grp-t,
.fusion-mobile-sticky-nav-holder .usls-mm__icon,
.fusion-mobile-sticky-nav-holder .usls-mm__kicker,
.fusion-mobile-sticky-nav-holder .usls-mm__desc,
.fusion-mobile-sticky-nav-holder .usls-mm__card-desc,
.fusion-mobile-sticky-nav-holder .usls-mm__flag-pill,
.fusion-mobile-sticky-nav-holder .usls-mm__badge,
.fusion-mobile-sticky-nav-holder .usls-mm__cta,
.fusion-mobile-sticky-nav-holder .usls-mm__quote,
.fusion-mobile-sticky-nav-holder .usls-am__icon,
.fusion-mobile-sticky-nav-holder .usls-am__desc,
.fusion-mobile-sticky-nav-holder .usls-am__pill,
.fusion-mobile-sticky-nav-holder .usls-am__card-desc,
.fusion-mobile-sticky-nav-holder .usls-am__cta,
.fusion-mobile-sticky-nav-holder .usls-am__grp-t {
  display: none !important;
}

/* injected card/group list items in the clone (removed by JS; this hides
   them in the brief window before it runs, on browsers that support :has) */
.fusion-mobile-nav-holder li:has(> a.usls-am__card-link),
.fusion-mobile-nav-holder li:has(> .usls-am__grp-t),
.fusion-mobile-sticky-nav-holder li:has(> a.usls-am__card-link),
.fusion-mobile-sticky-nav-holder li:has(> .usls-am__grp-t) {
  display: none !important;
}