/* ─────────────────────────────────────────
   Sidebar Pages
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   About Page Components
───────────────────────────────────────── */
/*side nav*/
.sidebar {
    padding: 48px 91px 48px 0;
    /*background: url("../images/sidebar-river.svg") no-repeat;*/
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 105px;
}
.sidebar.has-bg {
    overflow: visible;
}
.sidebar-first .menu a {
    padding: 8px;
}
.sidebar-first .menu {
    display: flex;
    flex-direction: column;
    gap: 64px;
}
.sidebar .bg {
    top: -28px;
    left: -250px;
}
.sidebar .menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.sidebar .menu a.is-active {
    color: var(--color-cedar);
    font-weight: 500;
}
.sidebar .menu a.is-active:before {
    content: url("../images/nav-active-link.svg");
    width: 77px;
    height: 48px;
}
/*about side nav*/
.sidenav.about-nav {
    justify-content: space-between;
}
.sidebar ul.sf-menu::after {
    display: none;
}
.sidenav {
    gap: 90px;
}

/*article body*/
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
    color: var(--color-driftwood);
    padding: 24px 0 20px 0;
    margin: 0;
}
.article-body p,
.article-body .text-medium strong {
    color: rgb(184, 200, 196);
}
.article-link {
    margin: 20px 0;
}
.article-body p strong {
    color: var(--color-driftwood);
}

.article-body blockquote p {
    font-size: 24px;
    font-weight: 700;
    padding: 24px 0 20px 0;
    text-align: center;
    margin-bottom: 0;
    font-family: 'Laila', serif;
}
.article-body p a {
    color: #B8C8C4;
    text-decoration: underline;
}
.article-body ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
  margin: 0 0 16px 0;
  list-style: none; /* remove default marker */
}

.article-body li {
  position: relative;
  padding-left: 32px; /* icon width + desired gap */
}

.article-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px; /* adjust for vertical alignment with text */
  width: 18px;
  height: 18px;
  background-image: url('../images/leafy-li.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
.node--type-page .article-body li::before,
.node--type-program-page .article-body li::before {
    background-image: url('../images/leafy-li-cedar.svg');
}
.article-body li ul {
    list-style: disc;
    margin-left: 28px;
    gap: 4px;
    padding-top: 4px;
}
.article-body li ul li {
    padding-left: 4px;
    color: var(--color-mist);
}
.article-body li ul li:before,
.node--type-page .article-body li ul li:before,
.node--type-program-page .article-body li ul li:before {
    background: none;
}

.article-body li strong {
  color: var(--color-driftwood);
}


/*twin media*/
.twin-media-box {
    position: relative;
}
.twin-media-box,
.twin-media-box.swiper-slide {
    display: flex;
    justify-content: center;
}
.twin-media-box .media-img,
.twin-media-box .media-img img {
    width: 100%;
    position: absolute;
    overflow: clip;
    object-fit: cover;    
}
.twin-media-box .media-bg {
    background: rgba(148, 176, 180, 0.3);
}
/*twin media small*/
.twin-media-small {
    gap: 48px;
    padding: 48px 0;
}
.twin-media-small__item .media-img,
.twin-media-small__item .media-img img {
    aspect-ratio: 1/1;
    max-width: 300px;
}
.twin-media-small__item .media-bg {
    aspect-ratio: 300/328;
    width: 300px;
}
/*twin media slider*/
.media-slider__slide .media-img,
.media-slider__slide .media-img img {
    max-width: 424px;
    aspect-ratio: 424/375;
}
.media-slider__slide .media-bg {
    aspect-ratio: 1/1;
    width: 424px;    
}
.media-slider__alt-wrap {
    position: absolute;
    bottom: -4px;
}
.top-left + .media-slider__alt-wrap {
    margin-left: 40px;
}
.top-right + .media-slider__alt-wrap {
    margin-right: 40px;
}
.media-slider {
    padding: 24px 0;
    max-width: 868px;
}
.media-slider--static {
    display: flex;
    gap: 24px;
}
.media-slider-nav {
    gap: 20px;
    justify-content: flex-end;
    padding: 24px 0;
}
.media-slider-nav .media-slider__button-prev,
.media-slider-nav .media-slider__button-next {
    cursor: pointer;
    padding: 8px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.media-slider-nav .media-slider__button-prev:hover,
.media-slider-nav .media-slider__button-next:hover {
    opacity: 0.7;
}
.media-slider-nav .media-slider__button-prev {
    
}

.media-slider__wrapper {
    overflow: visible;
}

.media-slider__slide {

}

.media-slider__image-wrap {

}

.media-slider__alt-text {

}

.media-slider__button-prev {

}

.media-slider__button-next {

}

.media-slider__pagination {

}



/*list with voice*/
.list-with-voice__vocab {
    cursor: pointer;
}
.many-item p {
    margin-bottom: 0;
}
.many-item .field__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.many-item .list-with-voice {
    gap: 8px;
    margin: 12px;
}
.many-item .list-with-voice__vocab {
    white-space: nowrap;
}
.many-item .list-with-voice:before {
    width:20px;
    height: 18px;
    margin-top: 4px;
    content: url('../images/no-sound.svg');
    display: flex;
}
.many-item .list-with-voice.list-with-voice__vocab--has-audio:before {
    content: url('../images/has-sound-white.svg');
}
.single-item .list-with-voice {
    
}


/*article message*/
/*general accordion setting*/
.article-detail {
  padding: 20px 16px 16px 16px;
  background: rgba(148,176,180,0.3);
  border-radius: 20px;
}

.article-detail details {
  padding-left: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-left: 1px solid;
  gap: 0px;
}
.article-detail details[open] {
  gap: 20px;
}
.article-detail details summary,
.kack-details summary {
    list-style: none;
    cursor: pointer;
    align-items: center;
}
.article-detail details summary:after,
.kack-details summary:after {
    transform: rotate(180deg);
}
.article-detail details[open] summary:after,
.kack-details[open] summary:after {
    transform: rotate(0deg);
}
.article-detail details summary:after,
.kack-details summary:after {
    content: url("../images/article-message-arrow.svg");
    width: 40px;
    height: 40px;
    display: flex;
    padding: 8px;
    transition: all .32s;
}
.article-detail details summary::-webkit-details-marker,
.article-detail details summary::marker,
.kack-details summary::-webkit-details-marker,
.kack-details summary::marker {
    display: none;
}
details h6 {
    margin-bottom: 0;
}


/*article inner banner */
.leafy-box.top-right.article-inner-banner {
    width: 100%;
    height: 100%;
    aspect-ratio: 868/424;
    max-width: 868px;
    border-radius: 104px 0 104px 0;
    margin: 24px 0;
}


/*staff card*/
.team-list-normal {
    padding: 24px 0 16px 0;
}
.team-details {
    padding: 16px 0;
    border-bottom: 1px solid;
}
.team-details summary,
.team-list-normal h6 {
    margin-bottom: 20px;
}
.team-member-category .team-list__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px 0 48px 0;
}
/* odd items land in the left column → top-left corner */
.team-member-category .team-list__grid > div:nth-of-type(even) .leafy-box {
    border-radius: 27% 0 27% 0;
}
/* even items land in the right column → top-right corner */
.team-member-category .team-list__grid > div:nth-of-type(odd) .leafy-box {
    border-radius: 0 27% 0 27%;
}

.staff-box {
    aspect-ratio: 424/516;
    max-width: 424px;
    width: 100%;
    position: relative;
}
.staff-photo,
.staff-photo img {
  aspect-ratio: 1/1;
  max-width: 424px;
  width: 100%;
  overflow: hidden;
}

.staff-bio {
  gap: 4px;
  white-space: nowrap;
  margin: auto 0;
}
.staff-bio .text-small {
    gap: 4px;
    align-items: center;
}
.team-member-category .team-list__grid > div:nth-of-type(even) .staff-bio {
    padding: 8px 88px 8px 24px;
}
.team-member-category .team-list__grid > div:nth-of-type(odd) .staff-bio {
    padding: 8px 24px 8px 88px;
}
.staff-is-lead span:after {
    position: absolute;
    content: url('../images/green-leaf.svg');
    width: 42px;
    height: 36px;
    right: -6px;
    bottom: -6px;     
}
.staff-is-lead {
  padding: 4px 8px;
  top: 30px;  
  border-radius: 8px 0 8px 0;
}
.team-member-category .team-list__grid > div:nth-of-type(even) .staff-is-lead {
  right: 30px;
}
.team-member-category .team-list__grid > div:nth-of-type(odd) .staff-is-lead {
  left: 30px;
}
.team-list__program-nav {
    padding: 16px 0;
    width: 100%;
    gap: 24px;
    justify-content: center;
}
.team-list__program-nav button {
    padding: 6px 12px;
    background: none;
    color: var(--color-mist);
    border-radius: 16px 0 16px 0;
}
.team-list__program-nav button.active {
    background: var(--color-forest);
    color: var(--color-driftwood);
}

/* ─────────────────────────────────────────
   Program Page Components
───────────────────────────────────────── */

.program-title {
    gap: 12px;
    padding: 24px 0;
}
.program-title h3 {
    margin: 0;
}
.program-tagline {
    margin-bottom: 16px;
}

/*programs-nav*/
.programs-nav {
    padding: 24px 64px;
    width: 100%;
    max-width: 1440px;
    margin: auto;
}
.programs-nav > ul {
    display: flex;
    background: rgba(148, 176, 180, 0.3);
    font-size: 20px;
    font-weight: 700;
    font-family: 'Laila', sans-serif;
    line-height: 140%;
    border-radius: 20px 0 20px 0;
    width: 100%;
    max-width: 1312px;
    justify-content: space-between;
    overflow: clip;
}
.programs-nav > ul li,
.programs-nav > ul li a {
    width: 100%;
    max-width: 328px;    
}
.programs-nav > ul li a {
    padding: 16px 0;
    text-align: center;
}
.programs-nav > ul li.active-trail {
    background: var(--color-mist);
    color: var(--color-black);
}


/*program sidebar article*/
.sidebar-article {
    gap: 32px;
}
body .sidebar-article__text a {
    text-decoration: underline;
    color: var(--color-cedar);
}

/*program events*/
body .program-event-time .text-alternate {
    color: var(--color-mist) !important;
}
.program-event-box {
    align-items: center;
    gap: 32px;
    padding: 32px 0;
}
.program-event-header {
    gap: 16px;
}
.event-time-location,
.event-time-location .event-time {
    gap: 4px;
}
.program-event-box .program-event-body a {
    color: var(--color-cedar);
    text-decoration: underline;
}
.program-event-box,
.view-events-list .views-row:last-child .program-event-box {
    border-bottom: none;
    border-top: 1px solid;
}
.program-event-box .leafy-button {
    height: fit-content;
    white-space: nowrap;
}
.program-event-details {
    border-radius: 8px;
    padding: 0 16px;
    background: rgba(148, 176, 180, 0.3);
    margin: 24px 0;
}
.program-event-details summary {
    padding: 20px 0;
}
.program-event-details__divider {
    background: var(--color-mist);
    height: 1px;
    margin: 48px 64px 24px 64px;
    width: 100%;
    max-width: 740px;
    display: block;
}




/*twin media with text*/
/*twin media small*/
.twin-media-and-text {
    padding-bottom: 16px;
    gap: 20px;
}
.twin-media-and-text .twin-media-small {
    gap: 21px;
    padding: 0;
}
.twin-media-and-text .twin-media-small__item .media-img,
.twin-media-and-text .twin-media-small__item .media-img img {
    aspect-ratio: 213/238;
    max-width: 213px;
}
.twin-media-and-text .twin-media-small__item .media-bg {
    aspect-ratio: 213/258;
    width: 213px;
    max-height: 258px;
}
.twin-media-and-text .twin-media-small__item .media-img img {
    scale: 130%
}
.twin-media-and-text .twin-media-small__item.left-media .media-img img {
    /*object-position: left;*/
    object-position: -8%
}
.twin-media-and-text .twin-media-small__item.right-media .media-img img {
    /*object-position: right;*/
    object-position: 76%;
}
.


/*circular banner on program about */
.circle-banner {
    padding: 24px 0;
}
.circle-banner h3 {
    text-align: center;
    position: relative;
}
.circle-banner__inner {
  border-radius: 50%;
  overflow: hidden;
  border: 20px solid #415554;
  width: /* e.g. 600px or clamp value */;
  aspect-ratio: 1 / 1;
  background: #415554;
  gap: 20px;
}

.circle-banner__bottom-row {
  flex: 1;
  gap: 20px;
}

.circle-banner__segment {
  overflow: hidden;
  flex: 1;
}

.circle-banner__segment--top {
  flex: 0 0 50%;
  border-bottom: solid #415554;
}
.circle-banner__segment--top h3 {
    top: 75px;
}
.circle-banner__segment--top .circle-banner__bg {
    background-position: center top;
}
.circle-banner__segment--bottom-left h3,
.circle-banner__segment--bottom-right h3 {
    max-width: 300px;
}
.circle-banner__segment--bottom-left h3 {
    left: 25px;
    bottom: 35px;
}
.circle-banner__segment--bottom-right h3 {
    right: 25px;
    bottom: 58px;
}
.circle-banner__segment--bottom-left {
  border-right: /* divider matching design */;
}

.circle-banner__segment--bottom-right {

}

.circle-banner__bg {
  inset: 0;
  background-size: cover;
  background-position: center;
}

.circle-banner__bg--placeholder {
  background-color: /* placeholder colour */;
}

.circle-banner__overlay {
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
}

.circle-banner__link {
  inset: 0;
  text-decoration: none;
  background: rgba(19, 31, 29, 0.3);
}

.circle-banner__link--placeholder {

}