/**
 * Patient section reskin — Lyn_Interconnect01 Figma
 * Scoped to body.sect-pat (all /en/ and /es/ patient pages).
 */

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

.sect-pat {
  --figma-midnight: #332c47;
  --figma-amethyst: #3b2d7a;
  --figma-lavender: #69488e;
  --figma-orchid: #872a93;
  --figma-cloud: #d9cae9;
  --figma-clay: #ffddc1;
  --figma-accent-phone: #fe00ed;
  --figma-header-utility-bg: #f7f4fb;
  --figma-section-muted: rgba(217, 202, 233, 0.3);
  --figma-timeline: rgba(100, 73, 138, 0.3);
  --figma-teal-accent: #7ac1ae;
  --figma-footer-green: #60c3ad;
}

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

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

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

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

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

  /* Hide the Spanish language toggle from the mobile navigation menu. */
  .sect-pat header .header-wrapper .nav nav ul#main_nav li.lang {
    display: none !important;
  }

  .sect-pat header .header-wrapper .nav .nav-econsent {
    position: relative !important;
    background-color: transparent !important;
    isolation: isolate !important;
  }

  .sect-pat header .header-wrapper .nav .nav-econsent::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 121px !important;
    height: 68px !important;
    transform: translate(-50%, -50%) !important;
    background: url("/assets/img/figma/nav-econsent-brackets.svg") center / contain no-repeat !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .sect-pat header .header-wrapper .nav .nav-econsent a {
    position: relative !important;
    z-index: 1 !important;
    display: inline-block !important;
    color: #fff !important;
    background-color: var(--figma-orchid) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    line-height: 1.4 !important;
  }
}

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

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

.sect-pat header .header-wrapper .utility .utility-wrapper a.ics-phone::before,
.sect-pat header .header-wrapper .utility .utility-wrapper a.ics-phone::after {
  content: none !important;
}

.sect-pat header .header-wrapper .utility .utility-wrapper a.arrow {
  color: #707070 !important;
}

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

.sect-pat header .header-wrapper .utility .utility-wrapper a.arrow:after {
  border-left-color: #838383 !important;
}

.sect-pat.lang-en header .header-wrapper .utility .utility-wrapper a.lang {
  display: none !important;
}

@media only screen and (min-width: 980px) {
  .sect-pat header {
    background-color: transparent !important;
    height: 86px !important;
    overflow: visible !important;
  }

  .sect-pat header::after {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    top: 86px !important;
    width: 100% !important;
    height: 24px !important;
    background-color: var(--figma-cloud) !important;
    z-index: 0 !important;
  }

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

  /* Decorative teal facets — centered on the header top edge so they sit
     in the top utility strip (above the nav) and taper downward, per Figma. */
  .sect-pat header .header-wrapper:before,
  .sect-pat header .header-wrapper:after {
    content: "" !important;
    position: absolute !important;
    background-color: var(--figma-teal-accent) !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-pat header .header-wrapper:before {
    width: 238.65px !important;
    height: 238.65px !important;
    left: 49.76px !important;
    top: -119.33px !important;
  }

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

  .sect-pat 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-pat header .header-wrapper .utility .utility-wrapper {
    width: 100% !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
  }

  .sect-pat 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-lavender) !important;
    overflow: visible !important;
    z-index: 13 !important;
  }

  .sect-pat header .header-wrapper .nav nav {
    background-color: var(--figma-lavender) !important;
    overflow: visible !important;
  }

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

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

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

  .sect-pat header .header-wrapper .nav nav ul li a {
    color: #fff !important;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
  }

  .sect-pat header .header-wrapper .nav nav ul li a br {
    display: none !important;
  }

  .sect-pat header .header-wrapper .nav nav {
    overflow: visible !important;
  }

  .sect-pat header .header-wrapper .nav nav ul {
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .sect-pat header .header-wrapper .nav nav ul li.selected:not(.econsent):before {
    border-top-color: var(--figma-clay) !important;
  }

  .sect-pat header .header-wrapper .nav nav ul li.econsent {
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    height: 40px !important;
    vertical-align: top !important;
    z-index: 2 !important;
  }

  .sect-pat header .header-wrapper .nav nav ul li.econsent::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 121px !important;
    height: 68px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    background: url("/assets/img/figma/nav-econsent-brackets.svg") center / contain no-repeat !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .sect-pat header .header-wrapper .nav nav ul li.econsent a {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
  }

  .sect-pat header .header-wrapper .nav nav ul li.econsent a::before {
    content: none !important;
    display: none !important;
  }

  .sect-pat header .header-wrapper .nav nav ul li.econsent a span {
    display: inline-block !important;
    background-color: var(--figma-orchid) !important;
    border-radius: 4px !important;
    padding: 5px 16px !important;
    vertical-align: middle !important;
  }

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

.sect-pat header .header-wrapper .nav nav ul li ul.sub-menu {
  display: none !important;
}

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

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

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

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

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

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

.sect-pat a.button {
  background-color: var(--figma-orchid) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}

.sect-pat a.button.econsent {
  background-color: var(--figma-orchid) !important;
}

/* ------------------------------------------------------------------ */
/* Footer                                                           */
/* ------------------------------------------------------------------ */

.sect-pat footer::before {
  content: none !important;
  display: none !important;
}

.sect-pat footer {
  background-color: var(--figma-footer-green) !important;
  background-image: url("/assets/img/figma/pat-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-pat footer {
  background-color: var(--figma-footer-green) !important;
  background-image: url("/assets/img/figma/pat-footer-bg.png") !important;
}

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

.sect-pat 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-pat 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-pat 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-pat footer .footer-wrapper .footer-bottom p:last-child {
  margin-bottom: 0 !important;
}

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

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

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

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

/* ------------------------------------------------------------------ */
/* Hide eConsent nav button + pink bracket decoration (all patient pages) */
/* ------------------------------------------------------------------ */

.sect-pat header .header-wrapper .nav nav ul li.econsent,
.sect-pat header .header-wrapper .nav .nav-econsent {
  display: none !important;
}