/* ═══════════════════════════════════════════════════════════════════════
   AMEX POPOVER — shared component prototype
   NLC-DEV-20260918-amex-popover-shared-artifact-prototype

   Independent of .nlc-home and .nlc-service. Does not assume any specific
   page's own container padding, animated ancestors, or hero layout.

   Token usage:
   - --nlc-surface, --nlc-cream, --nlc-cream-dim, --nlc-cream-ghost,
     --nlc-accent, --nlc-accent-deep, --nlc-accent-bright, --nlc-on-accent-alt,
     --nlc-display, --nlc-heading, --nlc-body are used directly: these are
     confirmed :root-scoped in legacy-wordpress/shared/site-foundation.css,
     so they resolve identically on any page that loads that one file
     (every page in this codebase already does).
   - --nlc-rule and --nlc-radius are NOT used directly. They exist in this
     codebase, but are scoped differently in different places (#nlcServiceNav
     defines its own --nlc-rule in nav-harness.css; .nlc-service defines its
     own --nlc-rule and --nlc-radius in service-page.css; the two are not
     guaranteed to carry the same value, and neither is defined at true
     :root scope in site-foundation.css). Depending on either name directly
     would make this component's rendering depend on which page-scope
     wrapper happens to be present, which is exactly the ambiguity this
     prototype is required to avoid. Instead, two explicit adapter tokens
     are defined below with safe literal fallbacks, each still deferring to
     --nlc-rule / --nlc-radius wherever a consuming page already defines
     them (CSS custom-property fallback syntax), so a real integration can
     make this component pick up a page's existing hairline/radius values
     with zero prototype-side changes, but the component never breaks if
     they are absent or scoped somewhere this component's markup doesn't
     sit under.
   ═══════════════════════════════════════════════════════════════════════ */

.nlc-amex-popover-root {
  --amex-rule: var(--nlc-rule, rgba(255, 255, 255, 0.08));
  --amex-radius: var(--nlc-radius, 4px);
  --amex-z: 40;
  position: relative;
  display: inline-flex;
}

/* ── Trigger ─────────────────────────────────────────────────────────── */

.nlc-amex-popover-trigger {
  align-items: center;
  background: transparent;
  border: 1px solid var(--amex-rule);
  border-radius: var(--amex-radius);
  color: var(--nlc-cream);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--nlc-heading);
  font-size: 0.72rem;
  font-weight: 600;
  gap: 0.6rem;
  letter-spacing: 0.14em;
  padding: 0.6rem 1rem;
  text-transform: uppercase;
  transition: border-color 180ms ease, color 180ms ease;
}

.nlc-amex-popover-trigger:hover,
.nlc-amex-popover-trigger:focus-visible {
  border-color: var(--nlc-accent-bright);
  color: var(--nlc-accent-bright);
}

.nlc-amex-popover-trigger-icon {
  display: block;
  flex-shrink: 0;
  height: 1.1rem;
  width: auto;
}

/* ── Popover ─────────────────────────────────────────────────────────── */

/*
 * Neutral anchor contract: by default the popover is positioned
 * `position: absolute`, anchored below the trigger, relative to
 * .nlc-amex-popover-root (its own containing block, since that root has
 * `position: relative`). This makes no assumption about any consuming
 * page's own padding values. At <=640px it switches to `position: fixed`,
 * centered on the viewport itself (not on any ancestor's padding), which
 * is the correct, safe default for a component with no known ancestor
 * layout. A page whose own trigger sits under an animated ancestor that
 * breaks `position: fixed` (as Homepage's hero action row does — see
 * amex-popover.homepage-adapter.css) must override this block itself;
 * that is a page-specific concern the shared component does not carry.
 */
.nlc-amex-popover {
  background: var(--nlc-surface);
  border: 1px solid var(--amex-rule);
  border-radius: var(--amex-radius);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  /* box-sizing: border-box is required here -- without it, `width` below
     is content-only, so the rendered box is ~50px wider than intended
     (padding + border added on top), which silently breaks the mobile
     `transform: translateX(-50%)` centering math (the transform resolves
     against the true rendered/border-box width) and pushes the popover
     off-screen on both sides. Found and fixed during this task's own
     fixture verification, not assumed correct from source alone. */
  box-sizing: border-box;
  left: 0;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 1.5rem;
  position: absolute;
  top: calc(100% + 0.75rem);
  width: min(28rem, calc(100vw - 2rem));
  z-index: var(--amex-z);
}

@media (max-width: 640px) {
  .nlc-amex-popover {
    bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
    left: 50%;
    position: fixed;
    top: auto;
    transform: translateX(-50%);
    width: min(24rem, calc(100vw - 2rem));
  }
}

/* Configurable anchor contract: the default anchors the popover's LEFT
   edge under the trigger's own left edge, which assumes room to the
   trigger's right. A trigger placed near a container's right edge (e.g. a
   right-aligned toolbar, see fixture-blank-template.html) needs the
   mirror image instead -- opt in with data-amex-anchor="end" on
   .nlc-amex-popover-root. Scoped to (min-width: 641px) deliberately: this
   selector is MORE specific than the <=640px centering rule above (two
   classes + an attribute vs. one class), so without this explicit
   min-width guard it would win the cascade at mobile widths too and
   silently combine `right: 0` with the mobile rule's own leftover
   `transform: translateX(-50%)`, pushing the popover off-screen (found
   and fixed during this task's own fixture verification). The <=640px
   centered fallback must remain the only anchor-related rule active at
   that width, regardless of this attribute's value. */
@media (min-width: 641px) {
  .nlc-amex-popover-root[data-amex-anchor="end"] .nlc-amex-popover {
    left: auto;
    right: 0;
  }
}

.nlc-amex-popover-close {
  background: transparent;
  border: none;
  color: var(--nlc-cream-ghost);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
}

.nlc-amex-popover-close:hover,
.nlc-amex-popover-close:focus-visible {
  color: var(--nlc-cream);
}

.nlc-amex-popover-head {
  align-items: center;
  display: flex;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
  padding-right: 1.5rem;
}

.nlc-amex-popover-logo {
  display: block;
  flex-shrink: 0;
  height: 1.6rem;
  width: auto;
}

.nlc-amex-popover-title {
  color: var(--nlc-cream);
  font-family: var(--nlc-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.nlc-amex-popover-body {
  color: var(--nlc-cream-dim);
  font-family: var(--nlc-body);
  font-size: clamp(0.92rem, 1.5vw, 1rem);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.nlc-amex-popover-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nlc-amex-popover-action {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--amex-radius);
  display: inline-flex;
  font-family: var(--nlc-heading);
  font-size: 0.72rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.16em;
  min-height: 3rem;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.nlc-amex-popover-action--primary {
  background: var(--nlc-accent);
  color: var(--nlc-on-accent-alt);
}

.nlc-amex-popover-action--primary:hover,
.nlc-amex-popover-action--primary:focus-visible {
  background: var(--nlc-accent-deep);
}

.nlc-amex-popover-action--secondary {
  background: transparent;
  border-color: var(--amex-rule);
  color: var(--nlc-cream);
}

.nlc-amex-popover-action--secondary:hover,
.nlc-amex-popover-action--secondary:focus-visible {
  border-color: var(--nlc-accent-bright);
  color: var(--nlc-accent-bright);
}

/* NLC-DEV-20260919-live-dev-pages-additive-mu-package: badge trigger
   variant for Contact-dev, so the trigger keeps the wide accepted-card
   badge the replaced link used (same asset, same height as Homepage's
   trigger). Opt-in via the modifier class; the default compact trigger
   above is unchanged. */
.nlc-amex-popover-trigger--badge {
  background: transparent;
  border: 0;
  padding: 0;
}

.nlc-amex-popover-trigger--badge img {
  display: block;
  height: 2.8rem;
  width: auto;
}

/* Vertical flip (positioning only): set by amex-popover.js on open when the
   default side would clip in the viewport. Only applies to the absolutely
   positioned popover; the <=640px fixed layout never receives the attribute. */
.nlc-amex-popover[data-amex-placement="above"] {
  bottom: calc(100% + 0.75rem);
  top: auto;
}

.nlc-amex-popover[data-amex-placement="below"] {
  bottom: auto;
  top: calc(100% + 0.75rem);
}

/* Set by amex-popover.js place() only when neither side fits the viewport. */
.nlc-amex-popover {
  translate: 0 var(--amex-shift-y, 0);
}