/* ============================================================
   Paygasus site navigation — native Next.js port of the "pgmega"
   nav design. Behavior lives in site-nav.tsx; this file is the
   design. All rules are scoped under .pgnav so nothing leaks into
   page content or the shared footer.

   Tuned to the editorial system in app/globals.css: warm cream
   paper, warm hairline rules, SHARP corners (--radius:0), warm ink
   text, Tiempos serif + IBM Plex. Blue is a restrained accent, and
   the action buttons mirror the hero's hierarchy — solid-ink
   primary, hairline secondary, quiet text link.
   ============================================================ */
/* Never allow horizontal page scroll. `clip` (not `hidden`) doesn't create a
   scroll container, so the sticky nav keeps working; it just trims any stray
   horizontal overflow (off-screen dropdown boxes, the partner marquee, etc.). */
html { overflow-x: clip; }

.pgnav {
  --paper: #fafaf7;          /* bar + base surface — matches page bg */
  --surface: #fffdf8;        /* lifted surface for elevated panels */
  --ink: #111110;
  --body: #2a2925;
  --muted: #5a5852;
  --hair: rgba(17, 17, 16, 0.12);
  --hair-2: rgba(17, 17, 16, 0.06);
  --tint: rgba(17, 17, 16, 0.05);   /* warm hover wash */
  --blue: #0d6efd;
  --blue-ink: #0a58ca;
  --blue-deep: #003366;
  --ink-block: #14130f;
  --serif: "Tiempos Headline", "Tiempos Text", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --line: rgba(17, 17, 16, 0.12);   /* warm hairline (was cool #e5e7eb) */
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  /* Immune to page-level sheets: the vendored networking styles.css sets
     letter-spacing on html/body (and bootstrap a different base font-size),
     which inherited into the nav and made it render subtly different
     (0.8px tracking, 1px height drift) vs the rest of the site. Pin the
     inheritable text metrics so the nav is identical on every page. */
  letter-spacing: normal;
  font-size: 17px;
  line-height: 1.55;
}
.pgnav *,
.pgnav *::before,
.pgnav *::after { box-sizing: border-box; }
/* text-decoration only — do NOT re-declare `color: inherit` here: at
   specificity (0,1,1) it would out-rank the single-class button rules
   below (e.g. .pgnav-contact) and clobber their light-on-dark text.
   Anchors already inherit color from the global `a` reset. */
.pgnav a { text-decoration: none; }
/* `:where()` keeps this reset at (0,1,0) so the single-class button rules
   below (.pgnav-trigger, .pgnav-signin, .pgmega-m-trigger, …) win the tie —
   at `.pgnav button` (0,1,1) the `font: inherit` clobbered their authored
   font-size/weight/family and buttons drifted with each page's body font. */
.pgnav :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.pgnav ul { list-style: none; margin: 0; padding: 0; }
.pgnav img, .pgnav svg { display: block; }

/* ---- bar ---- */
.pgnav-bar { border-bottom: 1px solid var(--hair); }
.pgnav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Offset parent for the mega panels so they match this container's width. */
  position: relative;
}
.pgnav-brand { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: 1.25rem; }
/* scoped under .pgnav so they out-specify the `.pgnav img` reset */
.pgnav .pgnav-logo-full { height: 40px; width: auto; display: block; }
.pgnav .pgnav-logo-mark { height: 40px; width: auto; display: none; }

/* ---- desktop nav ---- */
.pgnav-links { display: flex; align-items: center; gap: 0.15rem; }
.pgnav-item { position: relative; }
.pgnav-trigger,
.pgnav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0.85rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s ease;
  white-space: nowrap;
}
.pgnav-trigger:hover,
.pgnav-link:hover,
.pgnav-item[data-open="true"] .pgnav-trigger,
.pgnav-item.is-open .pgnav-link { color: var(--blue); }
.pgnav-caret { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.2s ease; }
.pgnav-item[data-open="true"] .pgnav-caret,
.pgnav-item.is-open .pgnav-caret { transform: rotate(180deg); }

/* ---- mega panel ---- */
.pgmega { position: relative; }
/* Panel anchors to the menu item itself (left edge of the trigger) and opens
   as a fixed-width sheet that extends from there — matching the WEX Update
   reference nav, rather than spanning the full bar width. The <li> is the
   positioned offset parent. */
.pgnav-item.pgmega { position: relative; }
.pgmega-panel {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 10px);
  width: min(940px, 94vw);
  z-index: 1050;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 0;
  box-shadow: 0 24px 60px -24px rgba(17, 17, 16, 0.28);
  padding: 22px 26px 26px;
  /* Short laptop screens (e.g. 1280×680): the tall Payments sheet would run
     past the viewport bottom with its tail unreachable — the panel is
     anchored to the sticky bar, so page scroll can't reveal it. Cap it to
     the space below the bar (~72px bar + 10px gap + 16px gutter) and let
     the panel scroll internally instead. */
  max-height: calc(100vh - 98px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.pgmega[data-open="true"] .pgmega-panel { opacity: 1; visibility: visible; transform: none; }
/* Compact mega (Resources) — same chrome, sized to its content rather than the
   full 940px product sheet. */
.pgmega-panel--compact { width: auto; min-width: 480px; max-width: min(620px, 94vw); }
.pgmega-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--hair); border-radius: 0; padding: 8px 12px; margin-bottom: 20px; }
.pgmega-mag { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }
.pgmega-input { flex: 1; border: none; outline: none; background: none; font-family: var(--sans); font-size: 0.9rem; color: var(--ink); }
.pgmega-input::placeholder { color: var(--muted); }
.pgmega-count { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pgmega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pgmega-ch { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hair-2); font-weight: 500; }
.pgmega-list { list-style: none; margin: 0; padding: 0; }
.pgmega-list a { display: block; text-decoration: none; padding: 7px 0; border-bottom: 1px solid var(--hair-2); }
.pgmega-list li:last-child a { border-bottom: none; }
.pgmega-list .n { display: block; font-family: var(--serif); font-size: 0.95rem; font-weight: 500; color: var(--ink); line-height: 1.15; }
.pgmega-list .d { display: block; font-family: var(--sans); font-size: 0.71rem; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.pgmega-list a:hover .n, .pgmega-list a:focus-visible .n { color: var(--blue-ink); }
.pgmega-list li[hidden] { display: none; }
.pgmega-viewall { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-ink); text-decoration: none; }
.pgmega-feature { display: block; margin-top: 12px; background: var(--ink-block); color: #fff; border-radius: 0; padding: 13px; text-decoration: none; }
.pgmega-feature .fn { display: block; font-family: var(--serif); font-size: 0.93rem; font-weight: 500; line-height: 1.2; }
.pgmega-feature .fn em { font-style: italic; }
.pgmega-feature .fd { display: block; font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-top: 7px; }
/* Static (non-linked) variant — informational box, not a clickable CTA. */
.pgmega-feature-static { cursor: default; }
.pgnav :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 0; }

/* ---- Resources dropdown ---- */
.pgnav-dd { position: relative; }
.pgnav-dd-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 12rem;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 0;
  box-shadow: 0 18px 50px -22px rgba(17, 17, 16, 0.28);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.pgnav-dd.is-open .pgnav-dd-menu { opacity: 1; visibility: visible; transform: none; }
.pgnav-dd-menu a { display: block; padding: 0.5rem 0.65rem; border-radius: 0; font-size: 0.9rem; color: var(--ink); transition: background 0.15s ease, color 0.15s ease; }
.pgnav-dd-menu a:hover { background: var(--tint); color: var(--blue-ink); }

/* ---- right-side actions ----
   Hierarchy mirrors the hero: quiet text link (Sign in) → hairline
   secondary (Sign up) → solid-ink primary (Contact sales). Sharp
   corners throughout; blue surfaces as the accent on the primary. */
.pgnav-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.pgnav-btn { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 500; border-radius: 0; transition: all 0.18s ease; white-space: nowrap; }
.pgnav-signin { background: transparent; border: 0; color: var(--ink); font-size: 0.9rem; padding: 0.5rem 0.6rem; }
.pgnav-signin:hover { color: var(--blue); }
.pgnav-signup { background: transparent; border: 1px solid rgba(17, 17, 16, 0.22); color: var(--ink); font-size: 0.875rem; padding: 0.45rem 1.1rem; }
.pgnav-signup:hover { border-color: var(--ink); background: var(--tint); color: var(--ink); }
.pgnav-contact { background: var(--ink); border: 1px solid var(--ink); color: var(--paper); font-size: 0.9rem; padding: 0.5rem 1.25rem; }
.pgnav-contact:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.pgnav-contact .arrow { font-size: 1.1rem; line-height: 1; }
.pgnav-lang { position: relative; }
.pgnav-lang-btn { border: 1px solid var(--hair); color: var(--ink); padding: 0.5rem; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; transition: all 0.18s ease; }
.pgnav-lang-btn:hover { border-color: var(--ink); color: var(--blue); }
/* Anchored to the trigger's LEFT edge (left:0) like the mega panels — opens
   from the edge toward the right; a JS clamp shifts it left only if it would
   run off-screen. Same 10px gap as the mega panels. */
.pgnav-lang-menu {
  position: absolute; left: 0; right: auto; top: calc(100% + 10px); min-width: 8rem;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 0;
  box-shadow: 0 18px 50px -22px rgba(17, 17, 16, 0.28); padding: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.pgnav-lang.is-open .pgnav-lang-menu { opacity: 1; visibility: visible; transform: none; }
.pgnav-lang-menu button { display: block; width: 100%; text-align: left; padding: 0.5rem 0.65rem; border-radius: 0; font-size: 0.9rem; transition: background 0.15s ease, color 0.15s ease; }
.pgnav-lang-menu button:hover { background: var(--tint); color: var(--blue-ink); }

/* ---- mobile-only header controls ---- */
.pgnav-mobile-actions { display: none; align-items: center; gap: 0.5rem; margin-left: auto; }
.pgnav-mobile-contact { color: var(--blue); font-weight: 500; font-size: 0.9rem; }
.pgnav-mobile-contact:hover { color: var(--blue-deep); }
.pgnav-icon-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--ink); border: 1px solid var(--hair); border-radius: 0; padding: 0.4rem; width: 38px; height: 36px; transition: all 0.18s ease; }
.pgnav-icon-btn:hover { color: var(--blue); border-color: var(--ink); }
.pgnav-burger { border: 1px solid var(--hair); border-radius: 0; width: 40px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }

/* ---- mobile menu / disclosures (pgmega mobile) ---- */
.pgmega-mobile { display: none; }
.pgmega-m-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--ink); padding: 14px 4px; }
.pgmega-m-body { padding: 4px 4px 10px; }
/* Section headings are tap targets on mobile — plain sentence-case sans in
   ink, not the desktop mono micro-label, which is illegible at phone sizes. */
.pgmega-m-sec { display: flex; justify-content: space-between; align-items: center; width: 100%; border-top: 1px solid var(--hair-2); font-family: var(--sans); font-size: 0.945rem; font-weight: 600; color: var(--ink); padding: 13px 4px; }
.pgmega-m-list { list-style: none; margin: 0; padding: 0 0 8px; }
.pgmega-m-list a { display: block; text-decoration: none; font-family: var(--serif); font-size: 1rem; color: var(--ink); padding: 9px 4px 9px 14px; }
.pgmega-m-list .md { display: block; font-family: var(--sans); font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.pgmega-mcaret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.2s ease; flex: none; }
.pgmega-m-sec[aria-expanded="true"] .pgmega-mcaret,
.pgmega-m-trigger[aria-expanded="true"] .pgmega-mcaret { transform: rotate(180deg); }

/* mobile collapse panel */
.pgnav-collapse { display: none; }
.pgnav-m-section { border-bottom: 1px solid var(--hair-2); }
.pgnav-m-link { display: block; width: 100%; text-align: left; font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--ink); padding: 14px 4px; }
.pgnav-m-acc-list { padding: 0 0 10px; }
.pgnav-m-acc-list a,
.pgnav-m-acc-list button { display: block; width: 100%; text-align: left; padding: 9px 4px 9px 14px; font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.pgnav-m-acc-list a:hover,
.pgnav-m-acc-list button:hover { color: var(--blue-ink); }
.pgnav-m-signin, .pgnav-m-signup { display: block; width: 100%; text-align: left; font-weight: 500; padding: 14px 4px; font-size: 1.05rem; }
.pgnav-m-signin { color: var(--ink); }
.pgnav-m-signup { color: var(--blue); }
.pgnav-mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 0.75rem; padding: 1rem 1.5rem; background: var(--paper); border-top: 1px solid var(--hair); z-index: 10004; }
.pgnav-cta-start { flex: 1; background: var(--ink); color: var(--paper); padding: 0.875rem 1.5rem; border-radius: 0; font-weight: 500; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; transition: background 0.18s ease; }
.pgnav-cta-start:hover { background: var(--blue); color: #fff; }
.pgnav-cta-contact { flex: 1; background: transparent; color: var(--ink); border: 1px solid var(--hair); padding: 0.875rem 1.5rem; border-radius: 0; font-weight: 500; text-align: center; }
.pgnav-cta-contact:hover { border-color: var(--ink); }

/* ---- login modal ---- */
.pgnav-modal { display: none; position: fixed; inset: 0; z-index: 1100; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(20, 19, 15, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pgnav-modal.is-open { display: flex; }
.pgnav-modal-card { width: 100%; max-width: 26rem; background: var(--surface); border-radius: 0; border: 1px solid var(--hair); box-shadow: 0 30px 80px -30px rgba(17, 17, 16, 0.5); }
.pgnav-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--hair); }
.pgnav-modal-head h2 { margin: 0; font-family: var(--serif); font-size: 1.4rem; font-weight: 500; }
.pgnav-modal-close { font-size: 1.5rem; line-height: 1; color: var(--muted); }
.pgnav-modal-body { padding: 1.5rem; }
.pgnav-field { margin-bottom: 1rem; }
.pgnav-field label { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; font-weight: 500; }
.pgnav-field input { width: 100%; padding: 0.75rem; border: 1px solid var(--hair); border-radius: 0; background: var(--paper); font-size: 1rem; }
.pgnav-field input:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
/* `.pgnav` prefix raises specificity above the `.pgnav button { background:none }`
   reset (0,1,1), which would otherwise leave this solid button transparent. */
.pgnav .pgnav-modal-submit { width: 100%; justify-content: center; background: var(--ink); border: 1px solid var(--ink); color: var(--paper); padding: 0.75rem; border-radius: 0; font-weight: 700; display: inline-flex; align-items: center; transition: background 0.18s ease; }
.pgnav .pgnav-modal-submit:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ============================================================
   Responsive: <=1199px = mobile/burger.
   The breakpoint sits at 1200 (not 992) because Google Translate can grow
   the labels ~35% (e.g. French "Contactez le service commercial") — at
   992–1199 the translated desktop row overflows and pushes the right-side
   controls off screen. Burger nav is language-proof.
   ============================================================ */
@media (max-width: 1199px) {
  /* Hide the whole <nav> wrapper, not just the list inside it: as an empty flex
     child it still costs one .pgnav-inner gap, which pushed the burger 12px
     past a 320px viewport. */
  .pgnav-links, .pgnav-actions, .pgnav-inner > nav { display: none; }
  .pgnav-mobile-actions { display: flex; }
  body.pgnav-menu-open { overflow: hidden; }
  body.pgnav-menu-open .pgnav-mobile-contact,
  body.pgnav-menu-open .pgnav-mobile-lang,
  body.pgnav-menu-open .pgnav-call { display: none !important; }

  .pgnav-collapse.is-open {
    display: block;
    position: fixed;
    left: 0; right: 0;
    top: 61px;
    bottom: 0;
    background: var(--paper);
    padding: 1rem 1.25rem 7rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 10000;
  }
  .pgmega-mobile { display: block; }
}
@media (min-width: 1200px) {
  .pgnav-burger, .pgnav-collapse, .pgnav-mobile-cta { display: none !important; }
}
/* Just past the switch the desktop row is still snug — and translated labels
   run long — so tighten spacing through the 1200–1339 band. */
@media (min-width: 1200px) and (max-width: 1339px) {
  .pgnav-inner { padding-left: 1rem; padding-right: 1rem; }
  .pgnav-trigger, .pgnav-link { padding: 0.5rem 0.7rem; }
  .pgnav-actions { gap: 0.45rem; }
}
@media (max-width: 1199px) {
  .pgnav .pgnav-logo-full { display: none; }
  .pgnav .pgnav-logo-mark { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .pgmega-panel, .pgnav-dd-menu, .pgnav-lang-menu { transition: opacity 0.01s; transform: none; }
  .pgnav-caret, .pgmega-mcaret { transition: none; }
}

/* ============================================================
   Google Translate cleanup (mirrors the paygasus site). The
   widget injects a top banner iframe and shifts <body> down; these
   rules hide that chrome so switching language doesn't break the
   layout. NOT scoped under .pgnav — the widget renders at body level.
   ============================================================ */
/* Classic + current (obfuscated VIpgJd-*) markup. The top "Translated to…"
   bar is an iframe.skiptranslate wrapped in a body-level .skiptranslate div. */
.goog-te-banner-frame,
body > .skiptranslate,
iframe.skiptranslate { display: none !important; }
body { top: 0 !important; position: static !important; }
.goog-te-gadget { color: transparent !important; font-size: 0 !important; }
.goog-logo-link, .goog-te-gadget span { display: none !important; }
#goog-gt-vt, #goog-gt-tt, .goog-te-balloon-frame,
.VIpgJd-yAWNEb-L7lbkb { display: none !important; visibility: hidden !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }