/* ==========================================================================
   USA PAYMENTS — SITE CHROME (header + footer)
   Loaded on every page. The landing page's own styles live in
   alpha.css and stay scoped to that page.

   0. Tokens  1. Width utilities  2. Chrome shell  3. Header  4. Nav
   5. Footer  6. A11y

   Width utilities (section 1) were moved here from alpha.css: el.js's
   childWidth() output (the u-w-* classes) is what the header/footer
   templates themselves are built with — #site-header's containers carry
   u-w-auto and u-w-100 — so the CSS backing those classes can't be scoped
   to landing pages only. Keeping it out of chrome.css was the reason the
   header rendered with broken (un-overridden) container widths on any
   page that wasn't registered in usapayments_page_ids.
   ========================================================================== */

/* ---------- 0. TOKENS ---------------------------------------
   Duplicated from alpha.css deliberately: the chrome loads on
   pages where alpha.css does not. Both are generated from
   lib/tokens.js, so they can't drift. */
:root{
  --navy:#101F3F;    --navy-deep:#0A1428;  --navy-card:#16264C;
  --crimson:#A81E32; --crimson-tint:#FBEEF0;
  --ink:#1B2436;     --muted:#5B6577;
  --surface:#F4F5F8; --border:#E3E6ED;     --white:#fff;
  --r-btn:8px; --r-pill:999px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- 1. WIDTH UTILITIES -------------------------------
   Moved from alpha.css, unchanged. These back the container widths
   emitted by lib/el.js childWidth(). Elementor has moved the flex-item
   width control between releases; these classes make the layout hold
   either way. build.js fails if a u-w-* class is emitted with no rule
   here — since el.js builds both the header/footer templates and the
   landing pages, this file and alpha.css both need to stay in sync with
   whatever u-w-* classes el.js can emit. Equal-column classes grow to
   fill; asymmetric pairs do not. */
.e-con > [class*="u-w-"] { box-sizing: border-box; }

.u-w-100    { flex: 1 1 100%; }
.u-w-50     { flex: 1 1 calc(50%     - 40px); }
.u-w-33_33  { flex: 1 1 calc(33.333% - 40px); }
.u-w-25     { flex: 1 1 calc(25%     - 40px); }
.u-w-68     { flex: 0 1 calc(68%     - 28px); }
.u-w-58     { flex: 0 1 calc(58%     - 32px); }
.u-w-42     { flex: 0 1 calc(42%     - 32px); }
.u-w-28     { flex: 0 1 calc(28%     - 28px); }
.u-w-auto   { flex: 0 0 auto; width: auto; }

@media (max-width:1199px){
  .u-w-100-t   { flex: 1 1 100%; }
  .u-w-50-t    { flex: 1 1 calc(50% - 40px); }
  .u-w-25-t    { flex: 1 1 calc(25% - 24px); }
  .u-w-auto-t  { flex: 0 0 auto; width: auto; }
}
@media (max-width:767px){
  .u-w-100-m   { flex: 1 1 100%; max-width: 100%; }
  .u-w-50-m    { flex: 1 1 calc(50% - 16px); }
  .u-w-auto-m  { flex: 0 0 auto; width: auto; }
}

/* ---------- 2. CHROME SHELL --------------------------------- */
.usap-chrome--header{
  position:sticky; top:0; z-index:100;
  /* click-through gutter: only the pill itself takes pointer events */
  pointer-events:none;
}
/* pointer-events inherits, so `none` on the wrapper already reaches every
   descendant. Re-applying it to .e-con/.elementor was a mistake: those rules
   also match the containers INSIDE the pill, so they cancelled the pill's
   `auto` and made the hamburger unclickable. One `auto` on the pill is
   enough — it inherits down to the toggle. */
.usap-chrome--header .hdr__pill{ pointer-events:auto; }
.admin-bar .usap-chrome--header{ top:23px; }
@media (max-width:782px){ .admin-bar .usap-chrome--header{ top:37px; } }

/* The theme wraps content in <main>; make sure nothing sits under the pill. */
.usap-chrome--footer{ margin-top:0; }

/* ---------- 3. HEADER ----------------------------------------
   NOTE: alpha.css's old "Header — floating pill" block was NOT merged in
   wholesale — most of it duplicates or predates what's already here:
     - `.hdr{ pointer-events:none }` + `.admin-bar .hdr{ top:32px }` are
       superseded by the `.usap-chrome--header` rules right above, which
       already fixed the pointer-events bug once (see that comment) and
       use current (not stale) admin-bar offsets.
     - `.hdr__menu .elementor-nav-menu--*` targeted Elementor Pro's Nav
       Menu widget, which is no longer in the DOM — the header nav is the
       `.usap-nav` shortcode markup styled in section 4 below.
     - the mobile `order:2` / `order:1` swap for `.hdr__nav` / `.hdr__phone`
       is superseded by section 4's own <1200px handling, which hides
       `.hdr__phone-num` / `.hdr__cta` outright in favor of the hamburger
       panel.
   Only the one rule below (`.hdr__pill` left padding at <1200px) looked
   like it was still doing real work, so it moved into section 4's
   existing 1199px media query instead of being duplicated here. */
.hdr__pill{ transition:box-shadow .25s var(--ease); }
body.is-scrolled .hdr__pill{ box-shadow:0 4px 28px rgba(16,31,63,.16); }

.hdr__phone-num a{ color:var(--ink); text-decoration:none; }
.hdr__phone-num a:hover{ color:var(--crimson); }
.hdr__phone-icon .elementor-icon{
  width:36px; height:36px; display:inline-flex;
  align-items:center; justify-content:center;
  background:linear-gradient(120deg, rgba(22, 52, 80, 1) 30%, rgba(155, 18, 44, 1) 94%);
; border-radius:50%;
}
.hdr__cta .elementor-button{ background:transparent; transition:background-color .2s var(--ease); }
.hdr__cta .elementor-button:hover{ background:var(--crimson-tint); }

.usap-logo{ display:inline-flex; align-items:center; text-decoration:none; }
.usap-logo__img{ height:auto; display:block; }
.usap-logo__text{ font-weight:700; color:var(--navy); font-size:18px; }
.usap-logo--light .usap-logo__text{ color:#fff; }
/* If no light-variant logo is uploaded, knock the dark one back on the
   footer rather than showing a dark logo on a dark ground. */
.usap-chrome--footer .usap-logo--light .usap-logo__img{ filter:brightness(0) invert(1); }

#site-header > div > div > div.elementor-element.e-con-full.u-w-auto.hdr__phone.e-flex.e-con.e-child span.elementor-button-text {
    text-transform: none!important;
    line-height: 17px;
    padding: 0;
    letter-spacing: normal;
    font-size: 16px;
}


#site-header > div > div > div.elementor-element.e-con-full.u-w-auto.hdr__phone.e-flex.e-con.e-child > div.elementor-element.cta-apply.hdr__cta.gradient-text.elementor-widget.elementor-widget-button a.elementor-button.elementor-button-link elementor-size-sm{
      padding: 0px 11px 2px 11px;
}

/* ---------- 4. NAV -------------------------------------------- */
.usap-nav{ display:flex; align-items:center; }
.usap-nav__list{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0;
}
.usap-nav__list li{ position:relative; }
.usap-nav__list a {
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.4;
    border-radius: 6px;
    transition: color .2s var(--ease), background-color .2s var(--ease);
}
.usap-nav__list a:hover,
.usap-nav__list .current-menu-item > a{ color:var(--crimson); }

/* submenus */
.usap-nav__list .sub-menu{
  position:absolute; top:100%; left:0; min-width:220px;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 32px rgba(16,31,63,.12);
  padding:8px; margin:8px 0 0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index:20;
}
.usap-nav__list li:hover > .sub-menu,
.usap-nav__list li:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.usap-nav__list .menu-item-has-children > a::after{
  content:""; display:inline-block; width:6px; height:6px; margin-left:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}

/* toggle */
.usap-nav__toggle{
  display:none; width:40px; height:40px; padding:0;
  background:transparent; border:0; cursor:pointer;
  align-items:center; justify-content:center;
}
.usap-nav__bars,
.usap-nav__bars::before,
.usap-nav__bars::after{
  display:block; width:20px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.usap-nav__bars{ position:relative; }
.usap-nav__bars::before,
.usap-nav__bars::after{ content:""; position:absolute; left:0; }
.usap-nav__bars::before{ top:-6px; }
.usap-nav__bars::after{ top:6px; }
.usap-nav__toggle[aria-expanded="true"] .usap-nav__bars{ background:transparent; }
.usap-nav__toggle[aria-expanded="true"] .usap-nav__bars::before{ transform:translateY(6px) rotate(45deg); }
.usap-nav__toggle[aria-expanded="true"] .usap-nav__bars::after{ transform:translateY(-6px) rotate(-45deg); }

/* mobile panel
   Positioned by chrome.js, not CSS. Elementor wraps every widget in nested
   `position:relative` containers, so `position:absolute` resolved against the
   40px-wide container holding the toggle instead of the header pill. The panel
   is moved to <body> on first open and given fixed coordinates measured from
   the pill — no ancestor can affect it. */
.usap-nav__panel{
  position:fixed; z-index:1000;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 18px 48px rgba(16,31,63,.18);
  padding:14px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.usap-nav__panel[hidden]{ display:none; }
.usap-nav__panel .usap-nav__list{ flex-direction:column; align-items:stretch; gap:2px; }
.usap-nav__panel .usap-nav__list a{ padding:12px 14px; font-size:16px; }
.usap-nav__panel .sub-menu{
  position:static; opacity:1; visibility:visible; transform:none;
  box-shadow:none; border:0; padding:0 0 0 12px; margin:0;
}
.usap-nav__cta,
.usap-nav__tel{
  display:block; text-align:center; margin-top:8px; padding:13px 20px;
  border-radius:var(--r-btn); text-decoration:none; font-size:15px; font-weight:600;
}
.usap-nav__cta{ background:var(--navy); color:#fff; }
.usap-nav__tel{ border:1px solid var(--border); color:var(--navy); }
.usap-nav__empty{ font-size:13px; color:var(--crimson); }

@media (max-width:1199px){
  .usap-nav__desktop{ display:none; }
  .usap-nav__toggle{ display:inline-flex; }
  .hdr__phone-num{ display:none; }
  .hdr__cta{ display:none; }              /* the panel carries the CTA */
  .hdr__pill{ position:relative; padding-left:20px; }  /* padding-left moved from alpha.css */
}
@media (min-width:1200px){
  .usap-nav__panel{ display:none !important; }
}

/* ---------- 5. FOOTER ------------------------------------------ */
.footer__coltitle .elementor-heading-title{
  color:rgba(255,255,255,.45); text-transform:uppercase;
  letter-spacing:.1em; font-weight:600;
}
.footer__links .elementor-icon-list-text{ color:rgba(255,255,255,.75) !important; }
.footer__links .elementor-icon-list-item:hover .elementor-icon-list-text{ color:#fff !important; }
.footer__links .elementor-icon-list-icon{ display:none; }
.footer__rule .elementor-divider-separator{ border-top-color:rgba(255,255,255,.10) !important; }
.footer__bar a{ color:rgba(255,255,255,.6); text-decoration:none; }
.footer__bar a:hover{ color:#fff; }
.txt-on-dark-dim,
.txt-on-dark-dim p,
.txt-on-dark-dim .elementor-heading-title{ color:rgba(255,255,255,.55); }

@media (max-width:767px){
  .footer__bar{ text-align:center; }
}

/* ---------- 6. A11Y / MOTION ------------------------------------ */
.usap-chrome :where(a,button):focus-visible{
  outline:2px solid var(--crimson); outline-offset:2px; border-radius:4px;
}
.usap-chrome--footer :where(a,button):focus-visible{ outline-color:#fff; }
.usap-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:#fff; color:var(--navy); padding:12px 18px; border-radius:0 0 8px 0;
}
.usap-skip:focus{ left:0; }
@media (prefers-reduced-motion:reduce){
  .usap-chrome *,
  .usap-chrome *::before,
  .usap-chrome *::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}