/**
 * HCP section reskin — Lyn_Interconnect01 Figma
 * Scoped to body.sect-hcp (all /hcp/ pages).
 */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;900&display=swap");

.sect-hcp {
  --figma-midnight: #332c47;
  --figma-amethyst: #3b2d7a;
  --figma-accent-phone: #fe00ed;
  --figma-accent-gold: #f9dec4;
  --figma-header-utility-bg: #ebf6f3;
  --figma-subnav-bar: #60c3ad;
  --figma-teal-subnav: #60c3ad;
  --figma-section-muted: rgba(122, 193, 174, 0.15);
  --figma-timeline: rgba(100, 73, 138, 0.3);
}

body.sect-hcp {
  color: var(--figma-midnight) !important;
}

/* ------------------------------------------------------------------ */
/* Header                                                           */
/* ------------------------------------------------------------------ */

.sect-hcp header {
  background-color: var(--figma-header-utility-bg) !important;
}

@media only screen and (max-width: 979px) {
  .sect-hcp header {
    background-color: var(--figma-amethyst) !important;
  }

  .sect-hcp header .header-wrapper .nav nav {
    background-color: var(--figma-amethyst) !important;
  }

  .sect-hcp header .header-wrapper .nav .nav-enrollment {
    background-color: var(--figma-amethyst) !important;
  }
}

.sect-hcp header .header-wrapper .logo:before {
  background-color: var(--figma-midnight) !important;
}

.sect-hcp header .header-wrapper .utility .utility-wrapper a.ics-phone,
.sect-hcp header .header-wrapper .utility .utility-wrapper a.ssvar {
  color: #707070 !important;
}

.sect-hcp header .header-wrapper .utility .utility-wrapper a.arrow {
  color: var(--figma-midnight) !important;
}

.sect-hcp header .header-wrapper .utility .utility-wrapper a.arrow:after {
  border-left-color: var(--figma-midnight) !important;
}

@media only screen and (min-width: 980px) {
  .sect-hcp header {
    background-color: var(--figma-header-utility-bg) !important;
    height: 86px !important;
    overflow: visible !important;
  }

  /* Full-width lavender (cloud) subnav band below the nav */
  .sect-hcp header::after {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    top: 86px !important;
    width: 100% !important;
    height: 24px !important;
    background-color: #d9cae9 !important;
    z-index: 0 !important;
  }

  .sect-hcp header .header-wrapper {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    isolation: isolate !important;
  }

  /* Decorative purple facets — centered on the header top edge so they sit
     in the top utility strip (above the nav) and taper downward, per Figma. */
  .sect-hcp header .header-wrapper:before,
  .sect-hcp header .header-wrapper:after {
    content: "" !important;
    position: absolute !important;
    background-color: #7d318e !important;
    opacity: 0.5 !important;
    transform: rotate(36.87deg) skewX(-16.26deg) scaleY(0.96) !important;
    transform-origin: center !important;
    pointer-events: none !important;
    z-index: 30 !important;
  }

  .sect-hcp header .header-wrapper:before {
    width: 238.65px !important;
    height: 238.65px !important;
    left: 49.76px !important;
    top: -119.33px !important;
  }

  .sect-hcp header .header-wrapper:after {
    width: 309.36px !important;
    height: 309.36px !important;
    left: -152.17px !important;
    top: -154.68px !important;
  }

  .sect-hcp header .header-wrapper .utility {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 32px !important;
    background-color: var(--figma-header-utility-bg) !important;
    z-index: 12 !important;
  }

  .sect-hcp header .header-wrapper .utility .utility-wrapper {
    width: 100% !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
  }

  .sect-hcp header .header-wrapper .utility .utility-wrapper a.ics-phone,
  .sect-hcp header .header-wrapper .utility .utility-wrapper a.ssvar {
    color: #707070 !important;
  }

  .sect-hcp header .header-wrapper .utility .utility-wrapper a.arrow {
    color: var(--figma-midnight) !important;
  }

  .sect-hcp header .header-wrapper .nav {
    position: absolute !important;
    top: 32px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 54px !important;
    background-color: var(--figma-amethyst) !important;
    z-index: 11 !important;
  }

  .sect-hcp header .header-wrapper .nav nav {
    background-color: var(--figma-amethyst) !important;
  }

  .sect-hcp header .header-wrapper .logo {
    z-index: 31 !important;
    isolation: isolate !important;
  }

  .sect-hcp header .header-wrapper .logo:before {
    background-color: var(--figma-midnight) !important;
    z-index: 0 !important;
  }

  .sect-hcp header .header-wrapper .logo a {
    position: relative !important;
    z-index: 1 !important;
  }

  .sect-hcp header .header-wrapper .nav nav ul li a {
    color: #fff !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
  }

  .sect-hcp header .header-wrapper .nav nav ul li.selected:not(.enrollment):before {
    border-top-color: var(--figma-accent-gold) !important;
  }

  .sect-hcp header .header-wrapper .nav nav ul li.enrollment {
    background-color: transparent !important;
    border: 2px solid var(--figma-accent-gold) !important;
    border-radius: 4px !important;
    height: 40px !important;
  }

  .sect-hcp header .header-wrapper .nav nav ul li.enrollment a {
    color: #fff !important;
    font-size: 14px !important;
    line-height: 14px !important;
    padding: 5px 15px !important;
  }

  .sect-hcp main {
    padding-top: 110px !important;
  }
}

/* Hide anchor subnav links; green bar stays via header::after above */
.sect-hcp header .header-wrapper .nav nav ul li ul.sub-menu {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Shared typography                                                */
/* ------------------------------------------------------------------ */

.sect-hcp main section .section-wrapper h1 {
  color: var(--figma-amethyst) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
}

.sect-hcp main section .section-wrapper h2 {
  color: var(--figma-amethyst) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
}

.sect-hcp main section .section-wrapper h3 {
  color: var(--figma-midnight) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

.sect-hcp main section .section-wrapper p,
.sect-hcp main section .section-wrapper li {
  color: var(--figma-midnight) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

.sect-hcp main section .section-wrapper a:not(.button) {
  color: var(--figma-amethyst) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-weight: 600 !important;
}

.sect-hcp a.button {
  background-color: var(--figma-amethyst) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

/* ------------------------------------------------------------------ */
/* Footer (matches landing page)                                    */
/* ------------------------------------------------------------------ */

.sect-hcp footer {
  background-color: var(--figma-amethyst) !important;
  background-image: url("/assets/img/figma/footer-bg.png") !important;
  background-position: top center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: #fff !important;
}

html[data-webp="true"] .sect-hcp footer {
  background-color: var(--figma-amethyst) !important;
  background-image: url("/assets/img/figma/footer-bg.png") !important;
}

.sect-hcp footer .footer-wrapper .footer-top .logo {
  width: 156px !important;
  height: 40px !important;
}

.sect-hcp footer .footer-wrapper .footer-top .logo a {
  width: 156px !important;
  height: 40px !important;
  background-image: url("/assets/img/figma/logo-alfasigma-white.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.sect-hcp footer .footer-wrapper .footer-top nav ul li a {
  color: #fff !important;
  font-family: "Museo Sans W01_300", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 16px !important;
}

.sect-hcp footer .footer-wrapper .footer-bottom p {
  font-family: "Museo Sans W01_300", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  color: #fff !important;
  margin: 0 0 15px !important;
}

.sect-hcp footer .footer-wrapper .footer-bottom p:last-child {
  margin-bottom: 0 !important;
}

.sect-hcp footer .footer-wrapper .footer-bottom p a {
  color: #fff !important;
}

@media only screen and (min-width: 980px) {
  .sect-hcp footer .footer-wrapper .footer-top .logo {
    left: calc(50% - 465px) !important;
    top: 28px !important;
  }

  .sect-hcp footer .footer-wrapper .footer-top nav {
    max-width: 930px !important;
  }

  .sect-hcp footer .footer-wrapper .footer-top nav ul li {
    margin: 0 1rem !important;
  }
}