/* Approved navy, blue, and white palette. Preserve the exported layout/classes. */
:root {
  --indy-navy: #171e46;
  --indy-blue: #2f79b8;
  --indy-blue-hover: #24699f;
  --indy-accent: #25649a;
  --indy-accent-light: #a9d5f5;
  --indy-pale: #eaf3fa;
  --indy-border: #d6e4ef;
}

/* A separate, full-width gold accent instead of a line baked into the logo. */
main > div > section:first-child {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #9c7528 0%, #efcc7f 50%, #9c7528 100%) 1;
}

:is(
  [class~="text-[#9c7528]"], [class~="text-[#a77d24]"],
  [class~="text-[#b88d32]"], [class~="text-[#c69b3b]"],
  [class~="text-[#d2aa55]"], [class~="text-[#dfba69]"],
  [class~="text-[#e7bd65]"], [class~="text-[#efcc7f]"]
) {
  color: var(--indy-accent) !important;
}

:is(
  [class~="hover:text-[#9c7528]"], [class~="hover:text-[#a77d24]"],
  [class~="hover:text-[#b88d32]"], [class~="hover:text-[#c69b3b]"],
  [class~="hover:text-[#efcc7f]"]
):hover {
  color: var(--indy-accent) !important;
}

:is(
  section[class~="bg-[#07142f]"], [class~="bg-[#17355d]"],
  [class~="bg-[#10274a]"], footer
) :is(
  [class~="text-[#9c7528]"], [class~="text-[#a77d24]"],
  [class~="text-[#b88d32]"], [class~="text-[#c69b3b]"],
  [class~="text-[#d2aa55]"], [class~="text-[#dfba69]"],
  [class~="text-[#e7bd65]"], [class~="text-[#efcc7f]"]
) {
  color: var(--indy-accent-light) !important;
}

:is(
  [class~="bg-[#c69b3b]"], [class~="bg-[#b88d32]"],
  [class~="bg-[#d2aa55]"], [class~="bg-[#f8f4eb]"],
  [class~="bg-[#fffaf0]"], [class~="bg-[#f7f3eb]"]
) {
  background-color: var(--indy-pale) !important;
}

:is(
  [class~="hover:bg-[#f8f4eb]"], [class~="hover:bg-[#fffaf0]"]
):hover {
  background-color: var(--indy-pale) !important;
}

[class~="hover:bg-[#dfba69]"]:hover {
  background-color: var(--indy-blue-hover) !important;
}

.group:hover [class~="group-hover:text-[#9c7528]"] {
  color: var(--indy-accent) !important;
}

.group:hover :is(
  [class~="group-hover:text-[#e7bd65]"],
  [class~="group-hover:text-[#efcc7f]"]
) {
  color: var(--indy-accent-light) !important;
}

footer a:hover,
section[class~="bg-[#07142f]"] :is(
  [class~="hover:text-[#9c7528]"], [class~="hover:text-[#efcc7f]"]
):hover {
  color: var(--indy-accent-light) !important;
}

/* Retain the original gold only for small eyebrow labels and card numbers. */
:is(main, footer) :is(.uppercase, span[class*="tracking-"])[class~="text-[#9c7528]"] {
  color: #9c7528 !important;
}

:is(main, footer) :is(.uppercase, span[class*="tracking-"])[class~="text-[#a77d24]"] {
  color: #a77d24 !important;
}

:is(main, footer) :is(.uppercase, span[class*="tracking-"])[class~="text-[#b88d32]"] {
  color: #b88d32 !important;
}

:is(main, footer) :is(.uppercase, span[class*="tracking-"])[class~="text-[#c69b3b]"] {
  color: #c69b3b !important;
}

:is(main, footer) :is(.uppercase, span[class*="tracking-"])[class~="text-[#d2aa55]"] {
  color: #d2aa55 !important;
}

:is(main, footer) :is(.uppercase, span[class*="tracking-"])[class~="text-[#dfba69]"] {
  color: #dfba69 !important;
}

:is(main, footer) :is(.uppercase, span[class*="tracking-"])[class~="text-[#e7bd65]"] {
  color: #e7bd65 !important;
}

:is(main, footer) :is(.uppercase, span[class*="tracking-"])[class~="text-[#efcc7f]"] {
  color: #efcc7f !important;
}

/* Keep small labels readable when their service card switches to navy on hover. */
.group:hover .uppercase[class~="group-hover:text-[#e7bd65]"] {
  color: #e7bd65 !important;
}

.group:hover .uppercase[class~="group-hover:text-[#efcc7f]"] {
  color: #efcc7f !important;
}

:is(
  [class~="border-[#9c7528]"], [class~="border-[#c69b3b]"],
  [class~="border-[#d2aa55]"], [class~="border-[#eee7da]"],
  [class~="border-[#e4ddcf]"], [class~="border-[#e9e3d5]"],
  [class~="border-[#e5ddcf]"], [class~="border-[#e8e1d3]"],
  [class~="border-[#e6ded0]"], [class~="border-[#e7dfd2]"]
) {
  border-color: var(--indy-border) !important;
}

[class~="border-[#d2aa55]/40"] {
  border-color: rgba(169, 213, 245, .4) !important;
}

[class*="hover:border-[#c69b3b]"]:hover,
[class*="hover:border-[#d2aa55]"]:hover {
  border-color: var(--indy-blue) !important;
}

[class*="focus-visible:outline-[#efcc7f]"]:focus-visible {
  outline-color: var(--indy-accent-light) !important;
}

header,
header.sh .sh-bar {
  background: var(--indy-navy) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
}

header > .container {
  min-height: 76px;
  gap: 12px;
}

header img[alt*="logo"] {
  display: block;
  width: min(330px, 72vw);
  height: auto !important;
  max-width: min(330px, 72vw) !important;
  max-height: 72px;
}

/* Both the static site and referral header retain their real menu handlers. */
header :is(a[href], button, summary),
header :is(a[href], button, summary):hover {
  color: #fff !important;
}

header button:not([aria-label="Toggle menu"]) {
  background-color: transparent !important;
  border-color: transparent !important;
}

header button:not([aria-label="Toggle menu"]):hover,
header a:not([class*="inline-flex"]):hover,
header summary:hover {
  background-color: rgba(255, 255, 255, .12) !important;
}

header [class~="bg-white"],
header .sh-dd ul,
header.sh .sh-mobile {
  background-color: var(--indy-navy) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

header :is(a, button, summary):focus-visible {
  outline: 2px solid var(--indy-accent-light) !important;
  outline-offset: 3px;
}

header.sh img[alt*="logo"] {
  width: min(264px, 72vw);
  max-width: 100% !important;
}

.ref-page .logo {
  width: min(100%, 340px);
  height: auto;
  max-height: 74px;
  object-fit: contain;
}

/* Keep destructive controls distinguishable from ordinary actions. */
button.icon,
button.btn.danger {
  background-color: #a3261f !important;
  border-color: #a3261f !important;
  color: #fff !important;
}

button.icon:hover,
button.btn.danger:hover {
  background-color: #841d18 !important;
  border-color: #841d18 !important;
}

/* Keep both footer rows centered within the site's main content width. */
footer .container {
  max-width: 80rem;
}

footer > .container.grid {
  align-items: start;
  column-gap: clamp(2rem, 4vw, 3rem);
  row-gap: 3rem;
}

footer > .container.grid > div {
  min-width: 0;
}

@media (min-width: 1024px) {
  footer > .container.grid {
    grid-template-columns:
      minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr);
  }
}

/* Reuse the About page's real office photo without cropping its signage. */
footer .footer-office-photo {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 767px) {
  footer .footer-office-photo {
    width: 100%;
  }
}

footer a[title="Facebook"][href],
footer a[title="Facebook"][href]:hover {
  background: transparent !important;
  border: none !important;
  color: #0866ff !important;
}

@media (max-width: 1023px) {
  header > .container {
    min-height: 72px;
    padding-inline: 14px;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  header img[alt*="logo"] {
    width: 220px;
    max-width: 220px !important;
  }
}

@media (max-width: 380px) {
  header img[alt*="logo"] {
    width: min(275px, 72vw);
    max-width: min(275px, 72vw) !important;
  }
}