/* ==========================================================
   Bootstrap Adjustments
========================================================== */

.bootstrap-support .toggle-button.active::after {
  content: "\2212";
}

.subheader-page {
    position: relative;

    display: block;
    width: 100%;

    margin: 0 0 1.5rem;
    padding-bottom: .85rem;

    text-align: center;
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--dph-primary, #061c60);

    border-bottom: 2px solid rgb(6 28 96 / 12%);
}

.subheader-page::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);

    width: 140px;
    height: 4px;

    background: linear-gradient(
        90deg,
        var(--dph-tertiary, #d6a439),
        #f0c35d
    );

    border-radius: 999px;
}

/* ==========================================================
   Helpful Links
========================================================== */

.helpful-links-section {
  margin: 2rem 0;
  background: #f8fbfd;
  border: 1px solid #e2f0fa;
  border-radius: 22px;
}

.helpful-links-header {
  margin-bottom: 1.75rem;
  text-align: center;
}

.helpful-links-header h2 {
  margin-bottom: .5rem;
  color: #007c8a;
}

.helpful-links-header p {
  margin: 0 auto;
  color: #5b6670;
}

.helpful-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 1rem;
  padding: 25px;
}

.helpful-link-card {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;
  gap: .9rem;

  min-height: 78px;
  padding: .95rem 1.15rem;

  background: #fff;
  border: 1px solid #d5dee6;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgb(0 43 77 / 5%);

  color: #003f6f;
  text-decoration: none;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.helpful-link-card:hover,
.helpful-link-card:focus-visible {
  transform: translateY(-3px);
  border-color: #007c8a;
  box-shadow: 0 14px 28px rgb(0 43 77 / 14%);
}

.helpful-link-card__icon {
  flex: 0 0 54px;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(180deg,
      rgb(0 124 138 / 8%) 0%,
      rgb(0 124 138 / 16%) 100%);

  border: 1px solid rgb(0 124 138 / 15%);
  border-radius: 14px;

  transition:
    background-color .22s ease,
    border-color .22s ease,
    transform .22s ease;
}

.helpful-link-card__icon i {
  color: #007c8a;
  font-size: 1.35rem;
  transition: transform .22s ease;
}

.helpful-link-card:hover .helpful-link-card__icon,
.helpful-link-card:focus-visible .helpful-link-card__icon {
  background: rgb(0 124 138 / 12%);
  border-color: rgb(0 124 138 / 28%);
}

.helpful-link-card:hover .helpful-link-card__icon i,
.helpful-link-card:focus-visible .helpful-link-card__icon i {
  transform: scale(1.1);
}

.helpful-link-card span:last-child {
  flex: 1;
  color: #007c8a;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
}

.helpful-link-card::after {
  content: "";

  position: absolute;
  top: 50%;
  right: 1rem;

  width: 8px;
  height: 8px;

  border-top: 2px solid #007c8a;
  border-right: 2px solid #007c8a;

  transform: translateY(-50%) rotate(45deg);
  opacity: 0;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.helpful-link-card:hover::after,
.helpful-link-card:focus-visible::after {
  opacity: 1;
  transform: translate(4px, -50%) rotate(45deg);
}

/* ==========================================================
   Vaccine Alert Accordion
========================================================== */

.vaccine-alert-panel {
  margin: 2rem 0;
  overflow: hidden;

  background: #fff;
  border: 1px solid rgb(0 124 138 / 18%);
  border-radius: 18px;

  box-shadow: 0 10px 28px rgb(0 43 77 / 8%);
}

.vaccine-alert-trigger {
  width: 100% !important;
  min-height: 76px;

  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: 1.15rem 1.35rem !important;

  background: linear-gradient(135deg,
      rgb(0 124 138 / 96%) 0%,
      rgb(0 90 156 / 96%) 100%) !important;

  border: 0 !important;
  color: #fff !important;
  cursor: pointer !important;

  text-align: left !important;
  line-height: 0.35 !important;
  font-size: 2.2rem !important;
  ;
}

.vaccine-alert-trigger:hover,
.vaccine-alert-trigger:focus-visible {
  background: linear-gradient(135deg, #006f7c 0%, #004f72 100%) !important;
  outline: 3px solid rgb(0 124 138 / 25%);
  outline-offset: 3px;
}

.vaccine-alert-trigger__title {
  flex: 1;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.4;
}

.vaccine-alert-trigger__badge {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .45rem .8rem;

  background: rgb(255 255 255 / 18%);
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 999px;

  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.vaccine-alert-content {
  background: linear-gradient(180deg, #f8fbfd 0%, #eef8f9 100%);
  border-left: unset !important;
  padding: 0 10px !important;
}

.vaccine-alert-body {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 0.75rem;
}

.vaccine-alert-card {
  position: relative;

  padding: 1.25rem 1.35rem;

  background: #fff;
  border: 1px solid rgb(0 124 138 / 14%);
  border-radius: 16px;

  box-shadow: 0 5px 16px rgb(0 43 77 / 6%);
}

.vaccine-alert-card::before {
  content: "";

  position: absolute;
  top: 1.25rem;
  left: 0;

  width: 5px;
  height: 42px;

  background: #007c8a;
  border-radius: 0 999px 999px 0;
}

.vaccine-alert-label {
  display: inline-flex;
  width: fit-content;

  margin: 0 0 .7rem;
  padding: .34rem .7rem;

  background: rgb(0 124 138 / 10%);
  color: #005f6b;

  border-radius: 999px;

  font-size: .62rem !important;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vaccine-alert-card h4 {
  margin: 0 0 .85rem;
  color: #003f6f;
  font-size: 1.06rem;
  font-weight: 900;
  line-height: 1.35;
}

.vaccine-alert-card p {
  margin: 0 0 .9rem;
  color: #334653;
  font-size: .95rem;
  line-height: 1.65;
}

.vaccine-alert-card p:last-child {
  margin-bottom: 0;
}

.vaccine-alert-card a {
  color: #005a9c;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vaccine-alert-card a:hover,
.vaccine-alert-card a:focus-visible {
  color: #003f6f;
}

.vaccine-alert-callout {
  padding: 1rem;
  background: rgb(0 124 138 / 8%);
  border-left: 5px solid #007c8a;
  border-right: 5px solid #007c8a;
  border-radius: 12px;
  color: #263b45;
  font-size: 0.8rem;
}

/* ==========================================================
   Public Health Notice
========================================================== */

.vaccine-alert-notice {
  margin: 1.25rem 0 1.5rem;
  padding: 1.35rem;

  background: linear-gradient(180deg, #fbfdff 0%, #f4fafb 100%);
  border: 1px solid rgb(0 124 138 / 15%);
  border-radius: 16px;

  box-shadow: 0 8px 20px rgb(0 43 77 / 5%);
}

.vaccine-alert-notice__header {
  display: inline-flex;
  align-items: center;
  gap: .55rem;

  margin-bottom: 1rem;
  padding: .45rem .8rem;

  background: rgb(0 124 138 / 10%);
  color: #005f6b;

  border-radius: 999px;

  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vaccine-alert-notice__header i {
  font-size: .95rem;
}

.vaccine-alert-notice>p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.vaccine-alert-notice__footer {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1.25rem;
  justify-items: center;
}

.vaccine-alert-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;

  min-height: 64px;
  padding: .85rem 1rem;

  background: #fff;
  border: 1px solid rgb(0 124 138 / 12%);
  border-radius: 12px;

  text-align: center;

  color: #344653;
  font-size: 1.05rem;
  font-weight: 700;

  box-shadow: 0 2px 8px rgb(0 43 77 / 4%);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.vaccine-alert-pill:hover {
  transform: translateY(-2px);
  border-color: rgb(0 124 138 / 30%);
  box-shadow: 0 8px 18px rgb(0 43 77 / 8%);
}

.vaccine-alert-pill i {
  flex-shrink: 0;
  color: #007c8a;
  font-size: 1rem;
}

.vaccine-alert-pill a {
  color: #005a9c;
  text-decoration: none;
}

/* ==========================================================
   Vaccine Alert Links
========================================================== */

/* Standard inline links */

.vaccine-alert-card a:not(.vaccine-alert-pill),
.vaccine-alert-notice a:not(.vaccine-alert-pill) {
  position: relative;
  display: inline-block;

  color: #005a9c;
  font-weight: 700;
  text-decoration: none;

  transition:
    color .22s ease,
    background-color .22s ease;
}

/* Animated underline */

.vaccine-alert-card a:not(.vaccine-alert-pill)::after,
.vaccine-alert-notice a:not(.vaccine-alert-pill)::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -.12rem;

  width: 100%;
  height: 2px;

  background: #007c8a;

  transform: scaleX(0);
  transform-origin: left;

  transition: transform .22s ease;
}

/* Hover */

.vaccine-alert-card a:not(.vaccine-alert-pill):hover,
.vaccine-alert-card a:not(.vaccine-alert-pill):focus-visible,
.vaccine-alert-notice a:not(.vaccine-alert-pill):hover,
.vaccine-alert-notice a:not(.vaccine-alert-pill):focus-visible {
  color: #007c8a;

  background: rgb(0 124 138 / 6%);
  border-radius: 4px;
}

.vaccine-alert-card a:not(.vaccine-alert-pill):hover::after,
.vaccine-alert-card a:not(.vaccine-alert-pill):focus-visible::after,
.vaccine-alert-notice a:not(.vaccine-alert-pill):hover::after,
.vaccine-alert-notice a:not(.vaccine-alert-pill):focus-visible::after {
  transform: scaleX(1);
}

/* ==========================================================
   Clickable Pills
========================================================== */

.vaccine-alert-pill.vaccine-alert-pill--link {
  color: inherit;
  text-decoration: none;

  cursor: pointer;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}

.vaccine-alert-pill.vaccine-alert-pill--link:hover,
.vaccine-alert-pill.vaccine-alert-pill--link:focus-visible {
  text-decoration: none;

  transform: translateY(-2px);

  background: #fff;

  border-color: rgb(0 124 138 / 28%);

  box-shadow: 0 10px 20px rgb(0 43 77 / 10%);
}

.vaccine-alert-pill.vaccine-alert-pill--link span {
  color: #007c8a;
  font-weight: 700;

  transition: color .22s ease;
}

.vaccine-alert-pill.vaccine-alert-pill--link:hover span,
.vaccine-alert-pill.vaccine-alert-pill--link:focus-visible span {
  color: #007c8a;
}

.vaccine-alert-pill.vaccine-alert-pill--link i {
  transition:
    color .22s ease,
    transform .22s ease;
}

.vaccine-alert-pill.vaccine-alert-pill--link:hover i,
.vaccine-alert-pill.vaccine-alert-pill--link:focus-visible i {
  color: #007c8a;
  transform: scale(1.08);
}

/* ==========================================================
   Statement Extras
========================================================== */

.vaccine-alert-date {
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  margin: 0 0 1rem;
  padding: .4rem .75rem;

  background: rgb(0 90 156 / 8%);
  color: #005a9c;

  border-radius: 999px;

  font-size: .82rem;
  font-weight: 800;
}

.vaccine-alert-date i {
  color: #007c8a;
}

/* ==========================================================
   Vaccine Alert Divider
========================================================== */

.vaccine-alert-section-divider {
  position: relative;

  width: 100%;
  max-width: 720px;
  height: 1px;

  margin: 2rem auto 1.75rem;

  background: linear-gradient(90deg,
      transparent 0%,
      rgb(0 90 156 / 12%) 20%,
      rgb(0 124 138 / 24%) 50%,
      rgb(0 90 156 / 12%) 80%,
      transparent 100%);
}

.vaccine-alert-section-divider::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 10px;
  height: 10px;

  background: #fff;

  border: 2px solid #007c8a;
  border-radius: 50%;

  transform: translate(-50%, -50%);

  box-shadow: 0 0 0 4px #fff;
}

.vaccine-alert-card h5 {
  margin: 0 0 .85rem;
  color: #005a9c;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width: 768px) {

  .carousel-container {
    margin: 0 !important;
  }

  /* ==========================================================
     Helpful Links
  ========================================================== */

  .helpful-links-grid {
    grid-template-columns: 1fr;
  }

  .helpful-link-card {
    min-height: 72px;
  }

  /* ==========================================================
     Vaccine Alert Accordion
  ========================================================== */

  .vaccine-alert-panel {
    margin: 1.5rem 0;
    border-radius: 14px;
  }

  .vaccine-alert-trigger {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    min-height: auto;

    gap: .75rem;

    padding: 1rem 3rem 1rem 1rem;

    text-align: left;
  }

  .vaccine-alert-trigger__title {
    flex: 1;
    min-width: 0;

    font-size: .95rem;
    line-height: 1.45;
    font-weight: 800;
  }

  /* Hide desktop badge on phones */

  .vaccine-alert-trigger__badge {
    display: none;
  }

  /* Keep +/- icon on right */

  .bootstrap-support .toggle-button::after,
  .bootstrap-support .toggle-button.active::after {
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    margin: 0;
  }

  .vaccine-alert-body {
    padding: .85rem;
  }

  .vaccine-alert-card {
    padding: 1rem;
    border-radius: 14px;
  }

  .vaccine-alert-card::before {
    top: 1rem;
    height: 34px;
  }

  .vaccine-alert-card h4 {
    font-size: 1rem;
    line-height: 1.4;
  }

  .vaccine-alert-card p {
    font-size: .92rem;
    line-height: 1.65;
  }

  .vaccine-alert-notice {
    padding: 1rem;
  }

  .vaccine-alert-notice__footer {
    grid-template-columns: 1fr;
  }

  .vaccine-alert-pill {
    width: 100%;
    min-height: 58px;
    border-radius: 12px;
  }

}