/* Site header and footer (header.php, footer.php). Same layout as mtokens.in / proxkeytoken.in, in ePass colours:
   the token's navy body and its blue cap. Linked from app_render_head(), i.e. before the theme stylesheets, so
   every rule is scoped (.site-header / .site-bar / .site-footer) to outrank the theme's element rules
   (Bootstrap's a:hover colour, the theme's a:focus outline:0, input borders...). */

:root {
  --sc-ink: #343434;          /* charcoal: menu bar, footer */
  --sc-ink-deep: #202020;     /* legal bar, a shade deeper than --sc-ink */
  --sc-cap: #010b13;          /* near-black: Buy token, help card (same as css/pages.css --ep-cap) */
  --sc-cap-dark: #343434;
  --sc-cap-line: #c0c0c0;     /* current-page marker, light enough to read on navy */
  --sc-slate: #636363;
  --sc-rule: #e7e7e7;
  --sc-mist: #f4f4f4;
  --sc-on-ink: #c0c0c0;
  --sc-on-ink-muted: #9f9f9f;
  --sc-ink-rule: rgba(255, 255, 255, .14);
  --sc-head: 'Nunito Sans', 'Nunito Sans Fallback', sans-serif;
  --sc-body: 'Source Sans Pro', 'Source Sans Pro Fallback', sans-serif;
}

/* In-page anchors land below the stuck menu bar, not under it. */
html {scroll-padding-top: 90px;}
@media (max-width: 991px) {html {scroll-padding-top: 76px;}}
/* The theme's overflow-x:hidden makes this wrapper a scroll container, which stops the menu bar sticking. */
body .main-page-wrapper {overflow-x: clip;}

.skip-link {position: absolute; top: -100px; left: 16px; z-index: 1100; padding: 10px 16px; border-radius: 0 0 6px 6px; background: var(--sc-ink); color: #fff; font: 700 15px/1.4 var(--sc-head);}
.skip-link:focus, .skip-link:hover {top: 0; color: #fff;}

.site-header a:focus-visible, .site-footer a:focus-visible, .site-footer button:focus-visible, .site-footer input:focus-visible {outline: 2px solid currentColor; outline-offset: 3px;}
.site-bar a:focus-visible, .site-bar button:focus-visible {outline: 2px solid #fff; outline-offset: -5px;}
.site-bar .site-nav__sub a:focus-visible {outline-color: var(--sc-ink);}

/* ------------------------------------------------------------------ Header: white contact row over a navy menu bar */
.site-header {padding: 24px 0 22px; background: #fff;}
.site-header > .container {display: flex; align-items: center;}
.site-header__logo {flex: none; margin-right: auto;}
.site-header__logo img {display: block; width: 150px; height: auto;}
.site-header__contact {display: flex; align-items: center; margin: 0; padding: 0; list-style: none;}
.site-header__contact > li {display: flex; align-items: flex-start;}
.site-header__contact > li + li {margin-left: 28px;}
.site-header__address {padding-right: 28px; border-right: 1px solid var(--sc-rule);}
.site-header__contact i {flex: none; margin: 3px 14px 0 0; font-size: 30px; line-height: 1; color: var(--sc-ink);}
.site-header .site-header__contact p {margin: 0; font: 400 15px/1.45 var(--sc-body); color: var(--sc-slate);}
.site-header__contact strong, .site-header .site-header__contact p a {display: block; font: 700 16px/1.45 var(--sc-head); color: var(--sc-ink);}
.site-header .site-header__contact p a:hover {color: var(--sc-ink); text-decoration: underline;}
.site-header .site-header__partner a {display: block; padding: 0 20px; border: 2px solid var(--sc-ink); border-radius: 6px; white-space: nowrap;
  font: 700 15px/42px var(--sc-head); color: var(--sc-ink); transition: background-color .2s, color .2s;}
.site-header .site-header__partner a:hover {background: var(--sc-ink); color: #fff; text-decoration: none;}

/* Sticky, and pulled 36px over the banner. Its see-through edges pass clicks to the banner until it is stuck. */
.site-bar {position: sticky; top: 0; z-index: 1000; margin-bottom: -36px; pointer-events: none;}
.site-bar__inner {position: relative; display: flex; align-items: stretch; min-height: 72px; padding-left: 10px; background: var(--sc-ink);
  border-radius: 8px; box-shadow: 0 18px 36px -22px rgba(32, 32, 32, .7); pointer-events: auto;}
.site-bar.is-stuck {background: var(--sc-ink); box-shadow: 0 12px 30px -18px rgba(32, 32, 32, .6); pointer-events: auto;}
.site-bar.is-stuck .site-bar__inner {border-radius: 0; box-shadow: none;}
.site-bar__toggle {display: none;}
.site-bar__toggle-text {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
/* A page banner that opens <main> starts under the bar, so it gets the overlap back as top padding. */
#main-content > .theme-inner-banner:first-child {padding-top: 36px;}

.site-nav {align-self: stretch;}
.site-nav ul {margin: 0; padding: 0; list-style: none;}
.site-nav > ul {display: flex; height: 100%;}
.site-nav li {position: relative;}
.site-bar .site-nav > ul > li > a {position: relative; display: flex; align-items: center; height: 100%; padding: 0 18px; font: 700 15px/1 var(--sc-head); color: #c6c6c6;}
.site-bar .site-nav > ul > li > a::before {content: ''; position: absolute; right: 18px; bottom: 0; left: 18px; height: 3px; border-radius: 3px 3px 0 0; background: var(--sc-cap-line); visibility: hidden;}
.site-bar .site-nav > ul > li > a[aria-current]::before,
.site-bar .site-nav > ul > .site-nav__group.is-active > a::before {visibility: visible;}
.site-bar .site-nav > ul > li > a:hover, .site-bar .site-nav > ul > li:hover > a,
.site-bar .site-nav > ul > li > a[aria-current], .site-bar .site-nav > ul > .site-nav__group.is-active > a {color: #fff; text-decoration: none;}
.site-nav__group > a::after {content: ''; width: 6px; height: 6px; margin: -4px 0 0 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);}
.site-bar .site-nav__sub {display: none; position: absolute; top: 100%; left: 0; z-index: 2; min-width: 290px; padding: 8px 0; background: #fff; border-radius: 0 0 8px 8px; box-shadow: 0 22px 40px -20px rgba(32, 32, 32, .5);}
.site-nav__group:hover > .site-nav__sub, .site-nav__group:focus-within > .site-nav__sub {display: block;}
.site-bar .site-nav__sub a {display: block; padding: 0 20px; white-space: nowrap; font: 600 15px/42px var(--sc-head); color: var(--sc-ink);}
.site-bar .site-nav__sub a:hover, .site-bar .site-nav__sub a[aria-current] {background: var(--sc-mist); color: var(--sc-ink); text-decoration: none;}
.site-bar .site-nav__sub a[aria-current] {box-shadow: inset 3px 0 var(--sc-cap);}

.site-bar__actions {display: flex; margin-left: auto;}
.site-bar .site-bar__call {display: flex; align-items: center; padding: 0 24px; font: 800 19px/1.2 var(--sc-head); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #fff;}
.site-bar__call i {margin-right: 12px; font-size: 24px; line-height: 1; color: #c6c6c6;}
.site-bar__call small {display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; color: #c6c6c6;}
.site-bar .site-bar__call:hover, .site-bar__call:hover i, .site-bar__call:hover small {color: #fff; text-decoration: none;}
.site-bar .site-bar__buy {display: flex; align-items: center; padding: 0 28px 0 40px; border-radius: 0 8px 8px 0; background: var(--sc-cap); clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
  font: 800 16px/1 var(--sc-head); color: #fff; transition: background-color .2s;}
.site-bar__buy i {margin-right: 10px; font-size: 17px; line-height: 1;}
.site-bar .site-bar__buy:hover, .site-bar .site-bar__buy:focus {background: var(--sc-cap-dark); color: #fff; text-decoration: none;}
.site-bar.is-stuck .site-bar__buy {border-radius: 0;}

@media (min-width: 992px) and (max-width: 1199px) {
  .site-header__logo img {width: 130px;}
  .site-header__contact > li + li {margin-left: 22px;}
  .site-header__address {padding-right: 22px;}
  .site-bar .site-nav > ul > li > a {padding: 0 13px;}
  .site-bar .site-nav > ul > li > a::before {right: 13px; left: 13px;}
  .site-bar .site-bar__call {padding: 0 18px;}
}

@media (max-width: 991px) {
  .site-header {padding: 18px 0 16px;}
  .site-header__logo img {width: 120px;}
  .site-header__contact > .site-header__address {display: none;}
  .site-bar {margin-bottom: -30px;}
  #main-content > .theme-inner-banner:first-child {padding-top: 30px;}
  .site-bar__inner {min-height: 60px; padding-left: 0;}
  .site-bar .site-bar__toggle {display: flex; align-items: center; justify-content: center; width: 60px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;}
  .site-bar__burger, .site-bar__burger::before, .site-bar__burger::after {display: block; width: 22px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .2s ease, background-color .2s;}
  .site-bar__burger {position: relative;}
  .site-bar__burger::before, .site-bar__burger::after {content: ''; position: absolute; left: 0;}
  .site-bar__burger::before {top: -7px;}
  .site-bar__burger::after {top: 7px;}
  .site-bar__toggle[aria-expanded="true"] .site-bar__burger {background: transparent;}
  .site-bar__toggle[aria-expanded="true"] .site-bar__burger::before {transform: translateY(7px) rotate(45deg);}
  .site-bar__toggle[aria-expanded="true"] .site-bar__burger::after {transform: translateY(-7px) rotate(-45deg);}

  .site-nav {display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 9; max-height: 70vh; margin-top: 6px; overflow-y: auto; background: #fff; border-radius: 8px; box-shadow: 0 22px 40px -20px rgba(32, 32, 32, .5);}
  .site-bar__toggle[aria-expanded="true"] ~ .site-nav {display: block;}
  .site-bar.is-stuck .site-nav {margin-top: 0; border-radius: 0 0 8px 8px;}
  .site-nav > ul {display: block; height: auto;}
  .site-bar .site-nav > ul > li > a {height: auto; padding: 0 20px; border-bottom: 1px solid var(--sc-rule); line-height: 48px; color: var(--sc-ink);}
  .site-bar .site-nav > ul > li:last-child > a {border-bottom: 0;}
  .site-bar .site-nav > ul > li > a::before {display: none;}
  .site-bar .site-nav > ul > li > a:hover, .site-bar .site-nav > ul > li:hover > a {color: var(--sc-ink);}
  .site-bar .site-nav > ul > li > a[aria-current],
  .site-bar .site-nav > ul > .site-nav__group.is-active > a {color: var(--sc-ink); box-shadow: inset 3px 0 var(--sc-cap);}
  .site-nav__group > a::after {display: none;}
  .site-bar .site-nav__sub {display: block; position: static; min-width: 0; padding: 0; border-radius: 0; box-shadow: none; background: #f7f7f7;}
  .site-bar .site-nav__sub a {padding: 12px 20px 12px 32px; border-bottom: 1px solid var(--sc-rule); line-height: 1.35; white-space: normal;}
  .site-bar .site-bar__call {padding: 0 18px; font-size: 17px;}
  .site-bar__call i {font-size: 20px;}
  .site-bar .site-bar__buy {padding: 0 20px 0 32px; font-size: 15px;}
}
@media (max-width: 767px) {
  .site-header {padding: 14px 0;}
  .site-header__logo img {width: 104px;}
  .site-header__contact > .site-header__mail {display: none;}
  .site-header__contact > li + li {margin-left: 0;}
  .site-header .site-header__partner a {padding: 0 14px; font-size: 14px; line-height: 38px;}
}
@media (max-width: 575px) {
  .site-bar .site-bar__call {padding: 0 16px;}
  .site-bar__call i {margin: 0;}
  .site-bar__call span {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
}

/* ------------------------------------------------------------------ Footer
   The blue help card straddles the footer's top edge the way the menu bar overlaps the banner (shifted with top,
   since a negative top margin would collapse into the footer's own); the footer's top margin reserves its upper
   half (52px) plus a 48px gap. */
.site-footer {margin-top: 100px; background: var(--sc-ink); color: var(--sc-on-ink); font: 400 16px/1.6 var(--sc-body);}
.site-footer p {margin: 0; line-height: inherit;}
.site-footer ul {margin: 0; padding: 0; list-style: none;}
.site-footer a {font-family: inherit; color: var(--sc-on-ink);}
.site-footer a:hover {color: #fff; text-decoration: underline;}
.site-footer .site-footer__title {margin: 0 0 16px; font: 800 18px/1.3 var(--sc-head); color: #fff; text-transform: none;}

.site-footer__help {position: relative; top: -52px; display: flex; align-items: center; margin-bottom: -52px; padding: 22px 28px; border-radius: 8px;
  background: var(--sc-cap); box-shadow: 0 18px 36px -22px rgba(32, 32, 32, .7); color: #fff;}
.site-footer__help-text {margin-right: auto; padding-right: 24px;}
.site-footer .site-footer__help h2 {margin: 0; font: 800 22px/1.3 var(--sc-head); color: #fff; text-transform: none;}
.site-footer .site-footer__help p {margin-top: 2px; font-size: 16px; line-height: 1.4; color: #fff;}
.site-footer .site-footer__help-call {display: flex; align-items: center; margin-right: 28px; white-space: nowrap; font: 800 24px/1.2 var(--sc-head); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #fff;}
.site-footer__help-call i {margin-right: 12px; font-size: 26px; line-height: 1;}
.site-footer .site-footer__help-call:hover {color: #fff;}
.site-footer .site-footer__help-drivers {display: flex; align-items: center; gap: 10px; padding: 0 20px; border-radius: 6px; background: #fff; white-space: nowrap;
  font: 700 15px/44px var(--sc-head); color: var(--sc-ink); transition: background-color .2s;}
.site-footer .site-footer__help-drivers:hover {background: var(--sc-mist); color: var(--sc-ink); text-decoration: none;}
.site-footer .site-footer__help a:focus-visible {outline-color: #fff;}

.site-footer__main {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3.4fr); gap: 48px; padding: 56px 0 44px;}
.site-footer__about p {max-width: 60ch; line-height: 1.65;}
.site-footer strong {color: #fff;}
.site-footer__about address {margin: 22px 0 0; font-size: 15px; line-height: 1.6; font-style: normal;}
.site-footer__about address strong {display: block; font-weight: 700;}
.site-footer__links li + li {margin-top: 12px;}
.site-footer__links a {line-height: 1.4;}

.site-footer__news > p {line-height: 1.5;}
.site-footer #msgsub {margin-top: 8px; color: #fff;}
.site-footer #msgsub:empty {display: none;}
.site-footer__form {margin-top: 14px;}
.site-footer .site-footer__form input {display: block; width: 100%; height: 44px; margin: 10px 0 0; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px;
  background: rgba(255, 255, 255, .06); box-shadow: none; color: #fff; font: 400 16px var(--sc-body);}
.site-footer .site-footer__form input:focus {border-color: #fff; background: rgba(255, 255, 255, .1);}
.site-footer .site-footer__form input::placeholder {color: var(--sc-on-ink-muted); opacity: 1;}
.site-footer__form .text-danger {display: block; margin-top: 4px; font-size: 14px; color: #ffb4a6 !important;} /* beats Bootstrap's !important red, too dark on navy */
.site-footer__form .text-danger:empty, .site-footer__form .hidden {display: none;}
.site-footer .site-footer__form button {display: inline-block; margin-top: 14px; padding: 0 24px; border: 0; border-radius: 6px; background: #fff; color: var(--sc-ink);
  font: 800 15px/44px var(--sc-head); cursor: pointer; transition: background-color .2s;}
.site-footer .site-footer__form button:hover {background: var(--sc-mist);}
.site-footer .site-footer__form button:disabled {opacity: .6; cursor: progress;}

.site-footer__trust {display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 20px 48px; padding: 32px 0 40px; border-top: 1px solid var(--sc-ink-rule);}
.site-footer__trust-copy .site-footer__title {margin-bottom: 8px;}
.site-footer__trust-copy p {max-width: 62ch;}
.site-footer__badges {display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;}
.site-footer__badges li {padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 20px; font-size: 16px; line-height: 1.4; color: #fff;}
.site-footer__quote {grid-column: 1 / -1; margin: 0; padding: 4px 0 4px 20px; box-shadow: inset 3px 0 #ffd166;}
.site-footer__quote blockquote {margin: 0; font-size: 18px; line-height: 1.55; color: #fff;}
.site-footer__quote blockquote::before {content: '\201C';}
.site-footer__quote blockquote::after {content: '\201D';}
.site-footer__quote figcaption {margin-top: 8px; font-size: 15px;}

.site-footer__legal {background: var(--sc-ink-deep);}
.site-footer__legal .container {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px;}
.site-footer__legal p {font-size: 15px; line-height: 1.5;}
.site-footer__legal ul {display: flex; flex-wrap: wrap;}
.site-footer__legal li + li {margin-left: 28px;}
.site-footer__legal a {font-size: 15px; line-height: 1.5;}

@media (max-width: 991px) {
  .site-footer__help {flex-wrap: wrap;}
  .site-footer__help-text {flex: 1 0 100%; margin: 0 0 16px; padding: 0;}
  .site-footer__main {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 32px;}
  .site-footer__about {grid-column: 1 / -1;}
  .site-footer__trust {grid-template-columns: minmax(0, 1fr);}
  .site-footer__badges {justify-content: flex-start;}
  .site-footer__legal .container {justify-content: center; text-align: center;}
  .site-footer__legal nav {width: 100%;}
  .site-footer__legal ul {justify-content: center; margin-top: 6px;}
  .site-footer__legal li, .site-footer__legal li + li {margin: 2px 12px;}
}
@media (max-width: 575px) {
  .site-footer__help {padding: 20px;}
  .site-footer .site-footer__help h2 {font-size: 20px;}
  .site-footer .site-footer__help-call {flex: 1 0 100%; margin: 0 0 14px; font-size: 22px;}
  .site-footer__main {grid-template-columns: minmax(0, 1fr);}
}

@media (prefers-reduced-motion: reduce) {
  .site-bar__burger, .site-bar__burger::before, .site-bar__burger::after {transition: none;}
}