/*
   Styles for Patient Care section

          Dark: #3d5c57
         Light: #667d78
   30% lighter: #b3cac5
*/


/* Section banner. */

@media (min-width: 768px) { #colour-banner { background-color: var(--color-patient-care-bg); } }


/* Main menu. */

#main-menu li#patientcare { background-color: var(--color-patient-care-bg); }
#main-menu li#patientcare a { color: black; }


/* Navigation breadcrumbs and related links. */

#crumbs { background-color: rgb(240, 242, 241); } /* Needs to be opaque for sticky positioning. */
@media (min-width: 768px) { #crumbs { background-color: rgb(102 125 120 / 0.1); } }
#content .relatedlinks a { background-color: rgb(102 125 120 / 0.1); }
#content .relatedlinks a:hover { background-color: rgb(102 125 120 / 0.2); }


/* Side menu. */

.side-menu a.current,
.side-menu .side-submenu.expanded a.current,
.side-menu .side-submenu.expanded .side-submenu.expanded a.current
   { background-color: #667d78; color: white; border-right: 5px solid var(--color-patient-care-bg); }

.side-menu a.current:hover,
.side-menu .side-submenu.expanded a.current:hover,
.side-menu .side-submenu.expanded .side-submenu.expanded a.current:hover
   { background-color: #667d78; }


/* Paragraphs, list items, hyperlinks. */

#content a { color: #3d5c57; }
#content a:hover { background-color: #b3cac5; }

/*
   Button-only styles for patient-care pages using index.html (e.g. lifestyle-redesign).
   Ported from general-css-2025 so the "Book an Appointment"
   button matches the "Make an Appointment" styling on section.html pages.
*/

/* Common wrapper-action styles (from general-css-2025) */

#content .wrapper-action {
    display: flex;
    justify-content: left;
    color: #000;
    font-family: "National 2";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
    letter-spacing: -0.64px;
  }

  #content .wrapper-action a {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 20px;
    height: fit-content;
    border-radius: 8px;
    box-shadow: 0px 2px 2px rgb(0 0 0 / 0.4);
    text-decoration: none;
    cursor: pointer;
    font-family: "National 2";
    font-size: 22px;
    font-weight: 700;
    font-style: normal;
    line-height: 22px;
    letter-spacing: -0.88px;
    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      transform 0.15s ease,
      box-shadow 0.15s ease;
  }

  #content .wrapper-action a:hover {
    transform: none;
    box-shadow: 0px 4px 10px rgb(0 0 0 / 0.35);
  }

  #content .wrapper-action a:active {
    box-shadow: 0px 2px 4px rgb(0 0 0 / 0.3);
  }

  #content .wrapper-action a::after {
    content: '';
    display: inline-block;
    margin-left: 0;
    opacity: 0;
    transform: translateX(0);
    transition:
      opacity 0.2s ease 0.01s,
      transform 0.2s ease 0.01s,
      margin-left 0.2s ease 0.01s;
    font-weight: 700;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: -0.88px;
    color: inherit;
  }

  #content .wrapper-action a:hover::after {
    content: ' ⟩';
    opacity: 1;
    margin-left: 8px;
    transform: translateX(2px);
  }


/* Button color overrides (from general-css-2025) */

#content .button-red.wrapper-action a {
  background: var(--color-usc-cardinal);
  color: var(--color-usc-gold);
}

#content .button-gold.wrapper-action a {
  background: var(--color-usc-gold);
  color: var(--color-black);
}