/* Action buttons inherit the deep-blue faceted language of the main navigation. */
:root {
  --menu-button-faceted: url("/assets/nav-footer-faceted.svg?v=2");
}

html body:not(#menu-button-a):not(#menu-button-b):not(#menu-button-c):not(#menu-button-d):not(#menu-button-e):not(#menu-button-f):not(#menu-button-g):not(#menu-button-h):not(#menu-button-i):not(#menu-button-j) :is(
  .button:not(.icon-button),
  .package-link,
  .pricing-request-link,
  .pricing-cta,
  .subscription-plan-cta,
  .mobile-sticky-contact,
  .header-cta,
  .mobile-nav-cta,
  .articles-home-link,
  .wide-link,
  .service-direction-all,
  .cta-contact-more,
  .footer-cookie-settings
) {
  border: 1px solid rgba(71, 183, 232, 0.42) !important;
  background-color: #07152b !important;
  background-image:
    linear-gradient(105deg, rgba(16, 42, 72, 0.32), rgba(1, 7, 18, 0.1)),
    var(--menu-button-faceted) !important;
  background-position: center, 68% 49% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: #f7fbff !important;
  text-shadow: 0 1px 8px rgba(0, 6, 17, 0.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(132, 214, 250, 0.16),
    inset 0 -1px 0 rgba(1, 6, 16, 0.42),
    0 8px 22px rgba(4, 14, 29, 0.22) !important;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-position 240ms ease !important;
}

html body:not(#menu-button-a):not(#menu-button-b):not(#menu-button-c):not(#menu-button-d):not(#menu-button-e):not(#menu-button-f):not(#menu-button-g):not(#menu-button-h):not(#menu-button-i):not(#menu-button-j) :is(
  .button:not(.icon-button),
  .package-link,
  .pricing-request-link,
  .pricing-cta,
  .subscription-plan-cta,
  .mobile-sticky-contact,
  .header-cta,
  .mobile-nav-cta,
  .articles-home-link,
  .wide-link,
  .service-direction-all,
  .cta-contact-more,
  .footer-cookie-settings
):is(:hover, :focus-visible) {
  border-color: rgba(93, 211, 255, 0.82) !important;
  background-color: #0a203b !important;
  background-position: center, 76% 52% !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(162, 226, 255, 0.24),
    0 12px 28px rgba(2, 14, 32, 0.3),
    0 0 0 3px rgba(48, 176, 232, 0.1) !important;
  transform: translateY(-1px);
}

html body:not(#menu-button-a):not(#menu-button-b):not(#menu-button-c):not(#menu-button-d):not(#menu-button-e):not(#menu-button-f):not(#menu-button-g):not(#menu-button-h):not(#menu-button-i):not(#menu-button-j) :is(
  .button:not(.icon-button),
  .package-link,
  .pricing-request-link,
  .pricing-cta,
  .subscription-plan-cta,
  .mobile-sticky-contact,
  .header-cta,
  .mobile-nav-cta,
  .articles-home-link,
  .wide-link,
  .service-direction-all,
  .cta-contact-more,
  .footer-cookie-settings
) :is(.material-symbols-outlined, svg) {
  color: #69d2ff !important;
}

html body :is(.button, .package-link, .pricing-request-link, .pricing-cta, .subscription-plan-cta)[aria-disabled="true"],
html body :is(.button, .package-link, .pricing-request-link, .pricing-cta, .subscription-plan-cta):disabled {
  filter: grayscale(0.5);
  opacity: 0.56;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body :is(
    .button,
    .package-link,
    .pricing-request-link,
    .pricing-cta,
    .subscription-plan-cta,
    .mobile-sticky-contact,
    .header-cta,
    .mobile-nav-cta,
    .articles-home-link,
    .wide-link,
    .service-direction-all,
    .cta-contact-more,
    .footer-cookie-settings
  ) {
    transition: none !important;
  }
}

/* The consultation action inside the main navigation uses a platinum contrast. */
html body:not(#menu-gray-a):not(#menu-gray-b):not(#menu-gray-c):not(#menu-gray-d):not(#menu-gray-e):not(#menu-gray-f):not(#menu-gray-g):not(#menu-gray-h):not(#menu-gray-i):not(#menu-gray-j) .site-header.site-header :is(
  .header-cta,
  .mobile-nav-cta
) {
  border-color: rgba(255, 255, 255, 0.76) !important;
  background-color: #c9cdd1 !important;
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.18) 36%, transparent 54%),
    linear-gradient(135deg, #e4e7e9 0%, #bec3c8 52%, #929aa1 100%) !important;
  background-position: center !important;
  background-size: cover !important;
  color: #172938 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(44, 53, 61, 0.22),
    0 8px 22px rgba(2, 12, 25, 0.28) !important;
}

html body:not(#menu-gray-a):not(#menu-gray-b):not(#menu-gray-c):not(#menu-gray-d):not(#menu-gray-e):not(#menu-gray-f):not(#menu-gray-g):not(#menu-gray-h):not(#menu-gray-i):not(#menu-gray-j) .site-header.site-header :is(
  .header-cta,
  .mobile-nav-cta
):is(:hover, :focus-visible) {
  border-color: #ffffff !important;
  background-color: #d8dcdf !important;
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.24) 38%, transparent 56%),
    linear-gradient(135deg, #f0f2f3 0%, #cdd1d5 50%, #a5adb4 100%) !important;
  color: #0d2232 !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 12px 28px rgba(2, 12, 25, 0.34),
    0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

/* Dark theme only: keep the faceted decoration and move the controls to bronze. */
html:not([data-theme="light"]) body:not(#menu-button-a):not(#menu-button-b):not(#menu-button-c):not(#menu-button-d):not(#menu-button-e):not(#menu-button-f):not(#menu-button-g):not(#menu-button-h):not(#menu-button-i):not(#menu-button-j) :is(
  .button:not(.icon-button),
  .package-link,
  .pricing-request-link,
  .pricing-cta,
  .subscription-plan-cta,
  .mobile-sticky-contact,
  .header-cta,
  .mobile-nav-cta,
  .articles-home-link,
  .wide-link,
  .service-direction-all,
  .cta-contact-more,
  .footer-cookie-settings
) {
  border-color: rgba(208, 154, 98, 0.5) !important;
  background-color: #1a100a !important;
  background-image:
    linear-gradient(105deg, rgba(70, 43, 24, 0.48), rgba(6, 4, 2, 0.34)),
    url("/assets/nav-footer-faceted-bronze.svg?v=1") !important;
  color: #fffaf3 !important;
  text-shadow: 0 1px 8px rgba(7, 4, 2, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(229, 181, 128, 0.2),
    inset 0 -1px 0 rgba(8, 5, 3, 0.46),
    0 8px 22px rgba(10, 6, 3, 0.24) !important;
}

html:not([data-theme="light"]) body:not(#menu-button-a):not(#menu-button-b):not(#menu-button-c):not(#menu-button-d):not(#menu-button-e):not(#menu-button-f):not(#menu-button-g):not(#menu-button-h):not(#menu-button-i):not(#menu-button-j) :is(
  .button:not(.icon-button),
  .package-link,
  .pricing-request-link,
  .pricing-cta,
  .subscription-plan-cta,
  .mobile-sticky-contact,
  .header-cta,
  .mobile-nav-cta,
  .articles-home-link,
  .wide-link,
  .service-direction-all,
  .cta-contact-more,
  .footer-cookie-settings
):is(:hover, :focus-visible) {
  border-color: rgba(229, 181, 128, 0.88) !important;
  background-color: #2b1a10 !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(242, 201, 154, 0.28),
    0 12px 28px rgba(10, 6, 3, 0.34),
    0 0 0 3px rgba(193, 139, 82, 0.12) !important;
}

html:not([data-theme="light"]) body:not(#menu-button-a):not(#menu-button-b):not(#menu-button-c):not(#menu-button-d):not(#menu-button-e):not(#menu-button-f):not(#menu-button-g):not(#menu-button-h):not(#menu-button-i):not(#menu-button-j) :is(
  .button:not(.icon-button),
  .package-link,
  .pricing-request-link,
  .pricing-cta,
  .subscription-plan-cta,
  .mobile-sticky-contact,
  .header-cta,
  .mobile-nav-cta,
  .articles-home-link,
  .wide-link,
  .service-direction-all,
  .cta-contact-more,
  .footer-cookie-settings
) :is(.material-symbols-outlined, svg) {
  color: #d9a66f !important;
}

/* The navigation consultation action uses a brighter bronze, not platinum, in dark mode. */
html:not([data-theme="light"]) body:not(#menu-gray-a):not(#menu-gray-b):not(#menu-gray-c):not(#menu-gray-d):not(#menu-gray-e):not(#menu-gray-f):not(#menu-gray-g):not(#menu-gray-h):not(#menu-gray-i):not(#menu-gray-j) .site-header.site-header :is(
  .header-cta,
  .mobile-nav-cta
) {
  border-color: rgba(235, 194, 145, 0.76) !important;
  background-color: #684224 !important;
  background-image:
    linear-gradient(115deg, rgba(255, 230, 198, 0.24) 0%, rgba(255, 222, 181, 0.06) 38%, transparent 56%),
    linear-gradient(135deg, #86582f 0%, #623c22 52%, #3b2415 100%) !important;
  color: #fffaf3 !important;
  text-shadow: 0 1px 8px rgba(35, 19, 9, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 190, 0.48),
    inset 0 -1px 0 rgba(45, 25, 12, 0.34),
    0 8px 22px rgba(10, 6, 3, 0.3) !important;
}

html:not([data-theme="light"]) body:not(#menu-gray-a):not(#menu-gray-b):not(#menu-gray-c):not(#menu-gray-d):not(#menu-gray-e):not(#menu-gray-f):not(#menu-gray-g):not(#menu-gray-h):not(#menu-gray-i):not(#menu-gray-j) .site-header.site-header :is(
  .header-cta,
  .mobile-nav-cta
):is(:hover, :focus-visible) {
  border-color: #f1c998 !important;
  background-color: #7d502c !important;
  background-image:
    linear-gradient(115deg, rgba(255, 235, 208, 0.32) 0%, rgba(255, 225, 188, 0.1) 38%, transparent 56%),
    linear-gradient(135deg, #9b6839 0%, #744728 50%, #4c2e1b 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 209, 0.58),
    0 12px 28px rgba(10, 6, 3, 0.38),
    0 0 0 3px rgba(193, 139, 82, 0.14) !important;
}