@charset "UTF-8";

@import url(common.css);
@import url(editor.css);

/*
 * Goal: For custom styling on a special contribution page, it is recommended to use both of the following selectors:
 *
 * 1. `.civicrm-contribute-sp`
 *    Although this selector is more intuitive and concise, it has two drawbacks due to its reliance on JavaScript:
 *    a. There is a gap period before this class is added.
 *    b. The selector may fail if JavaScript does not function properly.
 *
 * 2. `body:has(script[data-contribution-page-type="special"])`
 *    This selector is purely CSS-based, thus it does not have the drawbacks of `.civicrm-contribute-sp`.
 *    The `:has()` pseudo-class is supported by modern browsers. For compatibility, check https://caniuse.com/css-has.
 *
 * The reason for recommending the use of both selectors is to enhance user experience on modern browsers.
 *
 * Usage Example:
 * Hiding the main menu in the header of a special contribution page.
 *
 * CSS Code:
 *
 * .civicrm-contribute-sp .header .main-menu,
 * body:has(script[data-contribution-page-type="special"]) .header .main-menu {
 *   display: none;
 * }
 *
 */

/* *SECTION - Fixed */

.navbar-toggler-right {
    order: unset;
}
  
.slick-track::before, .slick-track::after,
.row::before, .row::after {
    content: unset;
}

.slick-dotted.slick-slider {
  margin-bottom: unset;
}
  
.navbar-toggler-right {
  order: unset;
}

@media (min-width: 560px) {
  .path-frontpage .node .field--type-image,
  .node .field--type-image {
    float: unset;
    margin: unset;
  }
}

@media (min-width: 1200px) {
  .node__content {
    font-size: 1rem;
  }
}

.clearfix{
  &::after, &::before {
    content: unset;
  }
}

.field--type-image img, 
.field--name-field-user-picture img {
  margin: unset;
}

*:target{ 
  scroll-margin-top: var(--smt, 250px); 
}

.toolbar-fixed{
  &*:target{
    scroll-margin-top: calc(var(--smt) + 40px);
  }
  &.toolbar-tray-open{
    &*:target{
      scroll-margin-top: calc(var(--smt) + 80px);
    }
  }
}

.navbar-brand{
  padding-block: unset;
  margin: unset;
}

.alert-wrapper{
  z-index: 99;
}

.node a, .node p, .node div {
  word-break: break-word;
}

.row{
  margin-inline: unset;
  & > *{
    padding-inline: unset;
  }
}

/* *!SECTION */

/* *SECTION - Layout */

html{
  font-size: 16px;
}

body{
  color: var(--color-base-700);
  letter-spacing: .02em;
}

html, body{
  overflow-x: clip;
}

.page{
  background-color: var(--color-bg);
  @media (max-width:1200px) {
    display: flex;
    flex-direction: column;
    .header{
      order: -1;
    }
  }
}

.full-width{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: unset;
}

@media (min-width: 1520px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1440px;
  }
}

/* *ANCHOR - Sidebar */

body.layout-sidebar-second{
  .row-offcanvas{
    column-gap: 60px;
    & > *{
      padding: unset;
    }
    .sidebar_second{
      order: 1;
      width: 100%;
      @media (min-width: 1200px){
        order: 10;
        width: 380px;
        position: relative;
        .block{
          position: sticky;
          top: calc(var(--drupal-displace-offset-top) + 80px);
        }
      }
    }
  }
}

/* *ANCHOR - Desktop/Mobile */

.desktop,
button.search,
#CollapsingNavbar > .site-logo{
  display: none;
}
@media (min-width:1200px){
  .mobile, 
  #navbar-main > .site-logo,
  #block-search-box,
  #block-social-menu-header{
    display: none;
  }
  .desktop,
  button.search,
  #block-search-box.active,
  #CollapsingNavbar > .site-logo{
    display: block;
  }
  #block-search-box{
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 201;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 6px 16px 0px #0000001F;
    #search-block-form{
      padding: 4px;
      .form-type-search{
        margin: unset !important;
      }
    }
  }
}

/* *ANCHOR - Language */

html{
  &[lang="zh-hant"]{
    li:has(a.zh){
      display: none;
    }
    .path-user{
      &.user-logged-in{
        .block-page-title-block {
          & h1.title {
            &::before{
              content: '擊樂之友專區：';
            }
          }
        }
      }
    }
  }
  &[lang="en"]{
    li:has(a.en){
      display: none;
    }
    @media (min-width:1200px) {
      nav.menu--main{
        ul.nav{
          li.nav-item{
            max-width: calc(25% - 1rem);
          }
        }
      }
    }
    .path-user{
      &.user-logged-in{
        .block-page-title-block {
          & h1.title {
            &::before{
              content: 'Membership: ';
            }
          }
        }
      }
    }
  }
}

/* *ANCHOR - Header */

.header{
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-base-100);
  .header-inner{
    padding-block: 8px;
    #navbar-top{
      padding: unset;
    }
    #navbar-main{
      padding-block: unset;
      .navbar-toggler{
        width: 24px;
        height: 24px;
        &[aria-expanded="true"]{
          .navbar-toggler-icon{
            background: url(images/close.svg);
          }
        }
      }
      #CollapsingNavbar{
        nav{
          flex: 1;
          &#block-jpg-theme-main-menu{
            ul.nav{
              .nb-nav-item.dropdown{
                justify-content: flex-start;
              }
            }
          }
          &#block-secondary-menu ul.nav{
            flex-direction: column;
            li.nb-nav-item.dropdown{
              justify-content: flex-start;

            }
            @media (min-width:1200px){
              flex-direction: row;
              justify-content: end;
            }
          }
        }
        @media (max-width:1200px){
          #block-language{
            margin-top: 1.5rem;
          }
        }
      }
    }
    /* *ANCHOR - Search Box */
    #block-search-box{
      .container-inline > div{
        display: block;
      }
    }
    #search-block-form{
      padding: unset;
      .form-type-search{
        width: 100%;
        margin-block: 1rem 1.5rem !important;
        input.form-control{
          background: var(--color-Darkest-5) url(images/search.svg) no-repeat right 12px center !important;
          border-radius: 12px;
          border-color: white;
          padding: 12px 48px 12px 12px;
          &::placeholder{
            color: var(--color-Darkest-60);
          }
        }
      }
      .form-actions{
        display: none;
      }
    }
  }
  .region-top-header{
    @media (max-width:1200px) {
      order: 2;
    }
  }
}

/* *ANCHOR - Main */

.main{
  padding-block: 40px 80px;
}

/* *ANCHOR - Footer */

.site-footer{
  background: black;
  padding-block: clamp(1.5rem, calc(-1.5rem + 6.25vw), 2.5rem) /* min: 24px, max: 40px */ 0;
  .site-footer-inner{
    padding-inline: clamp(1rem, calc(0.133rem + 3.698vw), 2.5rem); /* min: 16px, max: 40px */;
  }
  a{
    color: white;
    &.nav-link{
      padding-inline: unset;
    }
  }
  .block{
    margin: unset;
    padding: unset;
    border: unset;
  }
  .row{
    margin: unset;
  }
  .content{
    font-size: var(--font-size-small);
    color: white;
    ul{
      &:not(.menu) {
        padding-left: unset;
      }
      li{
        a{
          display: inline-block;
          padding: unset;
          border: unset;
          text-indent: unset;
        }
      }
    }
  }
  .site-footer__top{
    display: grid;
    @media (min-width:992px) {
      grid-template-columns: 1fr auto 1fr;
    }
    font-weight: 600;
    .region{
      width: unset;
      padding: unset;
      &.region-footer-first{
        #block-info-contact{
          .field--name-body a{
            color: white;
            text-decoration: underline;
          }
          .block-content{
            display: grid;
            gap: 24px;
            grid-template-rows: 1fr auto;
          }
        }
      }
      &.region-footer-second{
        ul.nav.flex-row{
          flex-direction: column !important;
        }
      }
      &.region-footer-third{
        ul.nav{
          gap: 24px;
          @media (min-width:768px) {
            justify-content: flex-end;
          }
          a.nav-link{
            filter: invert(100%);
            width: 36px;
          }
        }
      }
    }
  }
  .site-footer__bottom{
    border: unset;
    margin-top: clamp(0.5rem, calc(-2.822rem + 14.176vw), 6.25rem); /* min: 8px, max: 100px */;
    &::after{
      content: '';
      display: block;
      width: 100%;
      aspect-ratio: 1379/84;
      background: url(images/Tx.svg) no-repeat center bottom / contain;
    }
    .region{
      padding-inline: unset;
      #block-copyright{
        margin-bottom: 18px;
        padding-bottom: 18px;
        border-bottom: 1px solid #454545;
        .content{
          color: var(--color-base-500);
          font-size: var(--font-size-tiny);
        }
      }
    }
  }
}


/* *!SECTION */

/* *SECTION - Menu */

/* *ANCHOR - Sticky Menu */

body.scrolled{
  .header{
    position: fixed;
    @media (min-width:1200px) {
      position: sticky;
    }
    top: 0;
    z-index: 200;
    width: 100%;
    background-color: white;
  }
  &.toolbar-fixed{
    .header{
      top: var(--drupal-displace-offset-top);
    }
  }
}

/* *ANCHOR - Navbar */
#CollapsingNavbar{
  nav:not(.menu--social){
    @media (max-width:1200px) {
      .nav-link{
        padding: unset;
      }
    }
    a{
      color: var(--color-base-700);
      padding: unset;
      font-size: var(--font-size-small);
      font-weight: 600;
      &.language-link{
        text-transform:uppercase;
        &[hreflang="zh-hant"]{
          font-size: 0;
          color: transparent;
          &::before{
            content: '中';
            color: var(--color-base-700);
            font-size: var(--font-size-small);
          }
        }
      }
    }
    ul.nav{
      gap: 1.5rem;
      li{
        ul.dropdown-menu{
          border: unset;
          padding: unset;
          margin-top: 1rem;
          li.dropdown-item{
            padding: unset;
            margin-bottom: 1rem;
            &:hover, &.active{
              background-color: var(--color-Slate-200);
            }
          }
          a{
            color: var(--color-base-600);
          }
        }
      }
    }
  }
}

/* *ANCHOR - Main */

@media (min-width: 1200px) {
  nav.menu--main{
    ul.nav{
      flex-wrap: nowrap;
      li.nav-item{
         flex: 0 0 auto;
      }
    }
  }
  body[data-is-navbar-dropdown-hover="1"] .nav-item{
    &.dropdown{
      display: flex;
      flex-wrap: nowrap;
      &:hover::after{
        content: '';
        position: absolute;
        z-index: 1000;
        top: 100%;
        left: 0;
        right: 0;
        height: 28px;
        background: transparent;
      }
      .nb-dropdown-toggle{
        display: inline-block;
      }
      ul.dropdown-menu{
        top: calc(100% + 24px);
        margin-top: unset !important;
        padding: 4px !important;
        border-radius: 8px;
        box-shadow: 0px 6px 16px 0px #0000001F;
        li {
          border-radius: 8px;
          margin-bottom: unset !important;
          a{
            display: flex;
            gap: 9px;
            align-items: center;
            padding: 12px !important;
            color: var(--color-base-700) !important;
            &::after{
              content: '';
              display: inline-block;
              width: 8px;height: 8px;
              background-color: transparent;
              border-radius: 50%;
            }
            &:hover::after{
              background-color: var(--color-Slate-500);
            }
          }
        }
      }
    }
  }
}

.menu--main{
  @media (max-width:1200px) {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-base-400);
  }
}

/* *ANCHOR - Secondary */

.menu--secondary{
  button.search.nav-link{
    color: transparent;
    font-size: 0;
    width: 24px;height: 24px;
    background: url(images/search.svg) no-repeat center center;
    border: unset;
    &.deactive{
      background-image: url(images/close.svg);
    }
  }
}

/* *ANCHOR - Social */
.menu--social{
  ul.nav{
    gap: 24px;
    a.nav-link{
      padding: unset;
      width: 24px;
      aspect-ratio: 1/1;
      color: transparent;
      font-size: 0;
      background: url(images/socialbutton_Facebook.svg) no-repeat center center / cover;
      &.yt{background-image: url(images/socialbutton_Youtube.svg);}
      &.ig{background-image: url(images/socialbutton_Instagram.svg);}
      &.x{background-image: url(images/socialbutton_X.svg);}
    }
  }
}

/* *!SECTION */

/* *SECTION - Entity & Element */

/* *ANCHOR - Element */

.highlighted,
.layout-main-wrapper{
  a:not(.btn, .button){
    color: var(--color-Slate-700) !important;
    &:hover{
      color: var(--color-Slate-900) !important;
    }
  }
}

.btn, .button.crm-register-button,
.entity-link li.list-group-item:first-child a{
  display: inline-block;
  white-space: nowrap;
  padding: 19px 96px 19px 20px !important;
  border-radius: 100px !important;
  font-size: var(--font-size-small) !important;
  font-weight: 600;
}

.btn-primary, .button.crm-register-button,
.entity-link li.list-group-item:first-child a{
  background: var(--color-Slate-500) url(images/icon-next-black.svg) no-repeat right 2px center !important;
  border-color: var(--color-Slate-500);
  color: var(--color-base-700) !important;
  &:hover{
    color: inherit;
    background-color: var(--color-Slate-300) !important;
    border-color: var(--color-Slate-300);
  }
}

/* *ANCHOR - Entity */

.entity-img{
  img{
    border-radius: 8px;
    width: 100%;
  }
  &.round{
    img{
      border-radius: 50%;
    }
  }
}

.entity-title{
  /* margin-top: 1rem; */
  & , & a{
    font-size: var(--font-size-large);
    font-weight: 700;
    line-height: 1.5;
  }
  &.job{
    margin-top: 4px;
    font-size: var(--font-size-small);
    font-weight: 600;
  }
  &.block{
    margin-block: 0 clamp(2.5rem, calc(1.932rem + 2.424vw), 3.75rem); /* min: 40px, max: 60px */;
    font-size: var(--font-size-regular);
    font-weight: 600;
    letter-spacing: 1%;
    display: flex;
    gap: 1rem;
    align-items: center;
    &::after{
      content: '';
      display: inline-block;
      width: 72px;
      height: 8px;
      background: url(images/icon-title-purple.svg) no-repeat 0 0;
    }
  }
}

.highlighted,
.layout-main-wrapper{
  .entity-title a{
    color:var(--color-base-700) !important;
  }
}

.views-field{
  &:has(.entity-img) + &:has(.entity-title){
    margin-top: 20px;
  }
}

.entity-body{
  color: var(--color-base-700);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  &.full{
    display: unset;
  }
  details{
    position: relative;
    summary{
      display: block;
      height: 32px;
      padding-right: 44px;
      background: url(images/icon-down.svg) no-repeat right center;
      position: absolute;
      right: 0;
      top: -44px;
      &::marker{
        display: none;
      }
    }
    &[open=""]{
      padding-bottom: 48px;
      summary{
        top:unset;
        bottom: 0;
        transform: scale(-1);
        font-size: 0;
        color: transparent;
        padding-right: 32px;
      }
    }
  }
}

.entity-more{
  a{
    color: transparent;
    font-size: 0;
    display: inline-block;
    width: 40px;height: 40px;
    background: url(images/icon-more.svg) no-repeat center center;
  }
  &.circle{
    a{
      background-image: url(images/icon-next.svg);
      background-size: contain;
    }
  }
}

.entity-footer{
  margin-top: 1rem;
  font-size: var(--font-size-small);
  font-weight: 600;
}

.entity-date{
  font-size: var(--font-size-small);
  font-weight: 600;
  time + time{
    &::before{
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 32px;
      height: 1px;
      background-color: var(--color-base-700);
      margin-right: 4px;
    }
  }
}

.entity-tag{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  padding: 0 12px 2px;
  border: 1px solid var(--color-text);
  border-radius: 10px;
}

.entity-link{
  li.list-group-item{
    border: unset;
  }
}

.entity-share{
  & .addtoany_list{
    display: flex;
    align-items: center;
    gap: 24px;
    a{
      background: transparent url(images/socialbutton_Facebook.svg) no-repeat center center / contain;
      padding: unset;
      span.a2a_svg{
        background-color: unset !important;
        svg{
          display: none;
        }
      }
      &.a2a_button_line{background-image: url(images/socialbutton_line.svg);}
      &.a2a_button_x{background-image: url(images/socialbutton_X.svg);}
    }
  }
}

.entity-edit a {
  padding-inline: 8px;
  border-radius: 16px;
  border: 1px solid var(--color-base-900);
  font-size: .8em;
}

.entity-date-venue{
  .item-list{
    .list-group{
      gap: 1rem;
      .list-group-item{
        border: unset;
      }
    }
  }
}

/* *ANCHOR - Block */

body{
  h2.block-title{
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1%;
    margin-block: 40px 64px;
    position: relative;
    &::after{
      content: '';
      display: block;
      width: 72px; height: 8px;
      background: url(images/icon-title.svg) no-repeat 0 0;
      position: absolute;
      bottom: -1em;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  &.path-frontpage,
  & .name-performance-type.composition,
  & #block-subscribe{
    h2.block-title{
      display: flex;
      justify-content: flex-start;
      gap: 1rem;
      align-items: center;
      margin-block: 0 1.5rem;
      text-align: left;
      &::after{
        position: unset;
        transform: unset;
      }
    }
  }
  #block-annual-project{
    h2.block-title{
      text-align: center;
      &::after{
        background-image: url(images/icon-title-inline-yellow.svg);
      }
    }
  }
}

/* *ANCHOR - Pager */
ul.pagination{
  margin-block: 88px 0;
  align-items: center;
  gap: 40px;
  li.page-item{
    & .page-link{
      background-color: unset;
      border: unset;
      color: var(--color-base-700);
      font-weight: 500;
    }
    a{
      &:not([title=""]){
        font-size: 0;
        color: transparent;
        width: 24px;
        height: 24px;
        background: url(images/icon-next.svg) no-repeat 0 0 / contain;
      }
      &[title="移至第一頁"],
      &[title="移至最後一頁"]{
        display: none;
      }
      &[title^="到"]{
        background-image: url(images/icon-more.svg);
      }
      &[title="到上一頁"]{
        transform: scaleX(-1);
      }
    }
    &.active{
      & .page-link{
        width: 40px;
        aspect-ratio: 1/1;
        background-color: var(--color-Slate-500);
        border-radius: 50%;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

/* *ANCHOR - Slide */

.name-slide-front{
  & .slide{
    aspect-ratio: 375/624;
    @media (min-width:768px) {
      aspect-ratio: 1440/624;
    }
    & > .views-field{
      position: absolute;
      width: 100%;
      height: 100%;
      &.views-field-nothing{
        z-index: 101;
        & .bg-img{
          height: 100%;
        }
      }
      &.views-field-field-video{
        z-index: 102;
        video{
          position: absolute;
          width: 100%;
          height: 624px;
          object-fit: cover;
          object-position: center;
        }
      }
      &.views-field-fieldset{
        z-index: 103;
        & .container{
          height: 100%;
          display: flex;
          align-items: end;
          & .slide-text{
            /* color: white;
            font-weight: 600;
            letter-spacing: 0.01em; */
            margin-bottom: clamp(3.25rem, calc(3.136rem + 0.485vw), 3.5rem); /* min: 52px, max: 56px */;
            /* .slide-title{
              font-size: var(--font-size-slide-title);
            }
            .slide-body{
              font-size: var(--font-size-slide-body);
            } */
          }
        }
      }
    }
    .entity-url a{
      position: absolute;
      inset: 0;
      color: transparent;
      font-size: 0;
    }
  }
  ul.slick-dots{
    bottom: clamp(1.25rem, calc(1.136rem + 0.485vw), 1.5rem); /* min: 20px, max: 24px */;
    right: var(--bs-gutter-x);
    @media (min-width: 576px){
      right: calc((100% - 492px)/2);
    }
    @media (min-width: 768px){
      right: calc((100% - 672px)/2);
    }
    @media (min-width: 992px){
      right: calc((100% - 912px)/2);
    }
    @media (min-width:1200px) {
      right: calc((100% - 1092px)/2);
    }
    @media (min-width:1400px) {
      right: calc((100% - 1272px)/2);
    }
    width: unset;
    margin: unset;
    li{
      width: unset;
      height: unset;
      button{
        display: block;
        width: 8px;
        height: 8px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        &::before{
          content: unset;
        }
      }
      &.slick-active{
        button{
          width: 36px;
          background-color: white;
        }
      }
    }
  }
}

.slideshow{
  .slick-list{
    padding-right: 20px;
    .slick-track{
      min-width: 100%;
    }
  }
  &:has(.slick__arrow){
    .slick__arrow{
      position: unset;
      display: block;
      height: auto;
      transform: unset;
      margin-top: clamp(1.75rem, calc(1.608rem + 0.606vw), 2.063rem); /* min: 28px, max: 33px */;
      button{
        position: unset;
        transform: unset;
        display: inline-block;
        width: clamp(2.75rem, calc(2.523rem + 0.97vw), 3.25rem); /* min: 44px, max: 52px */;
        aspect-ratio: 1/1;
        height: auto;
        background: url(images/icon-next.svg) no-repeat center center / contain;
        &::before{
          content: unset;
        }
        &.slick-prev{
          transform: scale(-100%);
          margin-right: 1rem;
        }
        &.slick-disabled{
          opacity: 0.5;
        }
      }
    }
    .view-inner{
      position: relative;
      .more-link{
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}

/* *ANCHOR - View */

.view{
  .more-link{
    text-align: right;
    a{
      font-size: var(--font-size-small);
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      &::after{
        content: '';
        display: inline-block;
        width: clamp(2.75rem, calc(2.523rem + 0.97vw), 3.25rem); /* min: 44px, max: 52px */;
        aspect-ratio: 1/1;
        background: url(images/icon-next.svg) no-repeat center center / contain;
      }
    }
  }
}

/* *ANCHOR - Form */

.main{
  form, 
  .crm-container,
  .crm-container-md{
    max-width: 800px;
    margin-inline: auto;
    fieldset{
      legend{
        font-size: var(--font-size-h6);
        font-weight: 600;
        letter-spacing: 1%;
        padding: unset;
      }
    }
    .form-required::after{
      content: '*';
      background: unset;
      color: var(--color-Lavender-600);
    }
    input:not([type="submit"]), textarea, select{
      border-color: transparent !important;
      border-radius: 12px !important;
      background-color: var(--color-Darkest-5) !important;
    }
    input{
      padding: 12px !important;
      &[type="submit"]{
        background-color: var(--color-Slate-700) !important;
        border-radius: 12px !important;
      }
      &[type="email"],
      &[type="number"],
      &[type="text"]{
        border: unset !important;
        border-radius: 12px !important;
        background-color: var(--color-Darkest-5) !important;
        color: var(--color-Slate-900);
        &:focus, &:focus-visible, &:focus-within{
          outline: unset !important;
          border-color: var(--color-Slate-600) !important;
          box-shadow: 0 0 0 .25rem var(--color-Slate-600) !important;
        }
      }
      &[type="checkbox"]{
        accent-color: var(--color-Slate-600);
      }
      &::placeholder{
        color: var(--color-Slate-600);
      }
    }
    .crm-form-elem{
      select{
        padding: 8px 52px 8px 12px !important;
        accent-color: var(--color-Slate-600);
        border-bottom: unset !important;
        border: unset !important;
        border-radius: 12px !important;
        background-color: var(--color-Darkest-5) !important;
        color: var(--color-Slate-900);
        option:checked,
        option[selected]{
          background-color: var(--color-Darkest-5) !important;
        }
      }
    }
    .crm-form-radio{
      .elem-label{
        &::before{
          background-color: var(--color-Slate-600);
        }
        &::after{
          border-color: var(--color-Slate-600);
        }
      }
      .form-radio:checked + .elem-label::after{
        border-color: var(--color-Slate-600);
      }
    } 
  }
}

.crm-container-md{
  fieldset{
    position: relative;
    border-color: var(--color-base-400);
    margin-top: 20px;
    padding-top: 20px;
    @media (min-width:1200px) {
      legend{
        max-width: 180px;
        position: absolute;
        top: 20px;
        left: 0;
      }
      .crm-section{
        max-width: 604px;
        margin-left: auto;
      }
    }
    .crm-form-elem{
      select.form-select{
        background-color: var(--color-Darkest-5) !important;
        border: unset !important;
        border-radius: 12px !important;
      }
    }
    div[class*="crm-section state_province-"] .crm-form-elem{
      margin-bottom: 15px;
    }
    .crm-form-radio{
      .elem-label{
        &::before{
          background-color: var(--color-Slate-600);
        }
        &::after{
          border-color: var(--color-Slate-600) !important;
        }
      }
    }
    .crm-form-readonly::after{
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .crm-marker{
    color: var(--color-Lavender-600);
  }
}

.civicrm-contribute-sp{
  .crm-container-md{
    fieldset{
      @media (min-width:1200px) {
        legend{
          position: unset;
        }
      }
    }
  }
}

/* *!SECTION */

/* *SECTION - Frontpage */

.path-frontpage{
  .main{
    padding-top: clamp(2.5rem, calc(0.795rem + 7.273vw), 6.25rem) /* min: 40px, max: 100px */;
  }
  /* *ANCHOR - Event */
  #event{
    .name-event{
      .slide{
        margin-right: 24px;
        @media (min-width:1500px) {
          &:first-child{
            width: 640px !important;
          }
          &:not(:first-child){
            max-width: 320px;
          }
        }
      }
    }
  }
  /* *ANCHOR - News */
  #news{
    margin-top: clamp(5rem, calc(4.432rem + 2.424vw), 6.25rem); /* min: 80px, max: 100px */;
    .name-news{
      padding-block: clamp(1.5rem, calc(1.045rem + 1.939vw), 2.5rem); /* min: 24px, max: 40px */;
      padding-inline: clamp(1.25rem, calc(0.682rem + 2.424vw), 2.5rem); /* min: 20px, max: 40px */;
      background-color: var(--color-Hawkes-Blue);
      border-radius: 16px;
      display: grid;
      @media (min-width:1200px) {
        grid-template-columns: 30% 70%;
        .more-link{
          grid-column: 1/3;
          margin-top: 20px;
        }
      }
      .more-link{
        margin-top: 28px;
      }
      ul.d-grid{
        gap: 12px;
        li{
          border-bottom: 1px solid var(--color-base-400);
          padding-bottom: 20px;
          &:last-child{
            border-bottom-color: transparent;
          }
        }
        @media (min-width:1200px) {
          gap: 40px 16px;
          li{
            border-bottom-color: transparent;
            padding-bottom: unset;
            border-left: 1px solid var(--color-base-400);
            padding-left: 1rem;
            position: relative;
            &:nth-child(3), &:nth-child(4){
              &::before{
                content: '';
                display: block;
                width: 90%;
                height: 1px;
                background-color: var(--color-base-400);
                position: absolute;
                top: -20px;
                left: 50%;
                transform: translateX(-50%);
              }
            }
          }
        }
      }
    }
  }
  /* *ANCHOR - Support */
  #support{
    margin-top: clamp(5rem, calc(3.295rem + 7.273vw), 8.75rem); /* min: 80px, max: 140px */;
    .layout__region{
      display: grid;
      grid-template-columns: 100%;
      gap: 40px;
      @media (min-width:992px) {
        grid-template-columns: 33% calc(67% - 40px);
      }
      .name-cp{
        .field-content{
          & > div{
            margin-top: 1rem;
          }
        }
      }
      .name-sharing{
        .sharing-bg, .sharing-text{
          aspect-ratio: 834/460;
          border-radius: 20px;
          padding: 40px;
          @media (max-width:992px){
            aspect-ratio: 1/1;
          }
        }
        .sharing-text{
          background-color: var(--color-Foam-Green);
          display: grid;
          grid-template-rows: auto 1fr auto;
          gap: 1rem;
          font-size: var(--font-size-small);
          font-weight: 600;
          line-height: 1.5;
          .entity-share{
            padding-top: 60px;
            background: url(images/icon-share-01.svg) no-repeat 0 0;
          }
          .entity-name{
            &::before{
              content: '';
              display: inline-block;
              width: 72px;
              height: 1em;
              background: url(images/icon-title-black.svg) no-repeat 0 center;
              margin-right: 12px;
            }
          }
        }
        .slick-list{
          @media (min-width:768px) {
            padding-right: calc(100% - 480px);
          }
          .slide{
            margin-right: 24px;
            max-width: 460px !important;
            .sharing-bg, .sharing-text{
              aspect-ratio: 1/1;
            }
            &:nth-child(2n+1) .sharing-text{
            background-color: var(--color-Manz-Yellow);
              .entity-share{
                background-image: url(images/icon-share-02.svg);
              }
            }
          }
        }
        ul.slick-dots{
          position: unset;
          counter-reset: slides-num;
          position: relative;
          text-align: left;
          display: flex;
          align-items: center;
          padding-left: 2rem;
          li{
            counter-increment: slides-num;
            width: unset;
            height: unset;
            margin: unset;
            position: unset;
            button{
              width: 46px;
              height: 2px;
              padding: unset;
              background-color: var(--color-base-400);
              &::before{
                content: unset;
              }
            }
            &.slick-active button{
              height: 5px;
              background-color: var(--color-base-700);
              &::before {
                content: counter(slides-num,decimal-leading-zero);
                position: absolute;
                left: 0;
                top: 0;
                font-size: var(--font-size-tiny);
              }
            }
          }
          &::after{
            content: counter(slides-num,decimal-leading-zero);
            font-size: var(--font-size-tiny);
            margin-left: 1rem;
          }
        }
      }
    }
  }
}

/* *!SECTION - Frontpage */

/* *SECTION - Section */

/* *ANCHOR - Title */

.block-page-title-block{
  margin-block: 40px 64px;
  h1.title{
    font-size: var(--font-size-h4);
    text-align: center;
    position: relative;
    &::after{
      content: '';
      display: block;
      width: 72px;height: 8px;
      background: url(images/icon-title.svg) no-repeat 0 0;
      position: absolute;
      left: 50%;
      bottom: -1rem;
      transform: translateX(-50%);
    }
  }
}

/* *ANCHOR - Submenu */
.views-exposed-form{
  margin-bottom: unset !important;
  .form-item{
    width: 100%;
    margin-bottom: unset !important;
  }
  .form-required{
    display: none;
  }
  &.bef-exposed-form{
    .form-actions{
      display: none;
    }
  }
}

.bef-links{
  ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: unset;
    margin: unset;
    li a{
      display: block;
      color: var(--color-base-700);
      font-weight: 600;
      min-width: fit-content;
      padding: 2px 20px 2px 2px;
      border-radius: 100px;
      border: 2px solid var(--color-Slate-500);
      &.bef-link--selected, &:hover{
        background-color: var(--color-Slate-500);
      }
    }
  }
}

main .block-menu{
  margin-bottom: 67px;
  ul.navbar-nav{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 48px;
    li{
      a.nav-link{
        font-size: 20px;
        font-weight: 500;
        color: var(--color-text);
        &.active{
          font-size: 28px !important;
          font-weight: 700 !important;
          letter-spacing: 1px;
          border-bottom: 6px solid var(--color-raptor);
          padding-block: 0;
        }
      }
    }
  }
}
/* *ANCHOR - List Grid */

.entity-list{
  & ul.d-grid{
    grid-template-columns: repeat(auto-fill, minmax(min(426px,100%) ,1fr));
    gap: 60px;
  }
  &.name-band,
  &.name-news,
  &.name-event{
    @media (min-width:912px) {
      & ul.d-grid{
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}

/* *ANCHOR - Register Form */

form.user-register-form{
  .form-actions{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }
}

/* *ANCHOR - Search */

.form-wrapper{
  &.container-inline{
    display: flex;
    align-items: center;
    gap: 1rem 2rem;
    margin: unset !important;
    @media (max-width:768px) {
      flex-wrap: wrap;
    }
    .form-item:has(label){
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: unset !important;
      label{
        min-width: fit-content;
      }
    }
    button{
      min-width: fit-content;
      max-height: 73px;
    }
  }
}

.path-search{
  section.content-inner{
    max-width: 800px;
    margin-inline: auto;
  }
}

/* *ANCHOR - User */

.path-user{
  &.user-logged-in{
    @media (min-width:1200px) {
      nav.tabs:has(.primary){
        position: absolute;
        top: 105px;
        left: 0;
        ul.nav-tabs{
          flex-direction: column;
          border-bottom: unset;
          li.nav-item{
            a.nav-link{
              border: unset !important;
              display: flex;
              gap: 9px;
              align-items: center;
              padding: 16px !important;
              color: var(--color-base-500) !important;
              font-weight: 600;
              &::after{
                content: '';
                display: inline-block;
                width: 8px;height: 8px;
                background-color: transparent;
                border-radius: 50%;
              }
              &:hover, &.active{
                color: var(--color-base-700) !important;
                &::after{
                  background-color: var(--color-Lavender-600);
                }
              }
            }
            &.user-view{
              order: 100;
            }
            &:has(a[href*="/edit"]){
              order: 101;
            }
            &:has(a[href*="/change-password"]){
              order: 102;
            }
            &:has(a[href*="/security/tfa"]){
              order: 103;
            }
          }
        }
      }
      .highlighted-inner > *,
      .layout-main-wrapper{
        max-width: 720px;
        margin-inline: auto;
      }
      .layout-main-wrapper{
        min-height: 90vh;
        .main{
          padding-top: unset;
        }
      }
    }
  }
}

/* *ANCHOR - Coupon */

.name-coupon{
  th{
    &.views-field-field-code{
      &::after{
        content: '點擊可直接複製';
        display: block;
        font-size: var(--font-size-tiny);
        font-weight: 400;
      }
    }
  }
  .entity-title{
    width: 40%;
  }
  .entity-code{
    a{
      font-weight: bold;
      .copy-hint{
        display: inline-block;
        vertical-align: middle;
        &::before{
          content: '';
          display: inline-block;
          width: 20px;height: 20px;
          background: url(images/icon-copy.svg) no-repeat 0 0;
        }
      }
    }
  }
}

/* *ANCHOR - Event, News */

.name-event,
.name-news{
  .entity-img{
    img{
      border-radius: 20px;
    }
  }
  &.entity-list{
    .entity-date{
      margin-top: 16px;
      font-size: var(--font-size-large);
    }
    .entity-title{
      margin-top: 12px;
    }
    .entity-body{
      margin-top: 4px;
      -webkit-line-clamp: 1;
      line-clamp: 1;
    }
    .entity-footer{
      margin-top: 4px;
    }
  }
}

.path-event,
.path-news{
  .block-page-title-block {
    margin-block: 40px 0;
    & h1.title {
      display: flex;
      gap: 1rem;
      align-items: center;
      &::after{
        position: unset;
        transform: unset;
      }
    }
  }
}

/* *ANCHOR - About */

.name-band{
  &.entity-list{
    ul.d-grid{
      li.d-grid{
        grid-template-columns: 1fr auto;
        grid-template-rows: repeat(3, auto);
        column-gap: 24px;
        align-items: center;
        & .views-field{
          &:has(.entity-img){
            grid-column: 1/3;
          }
          &:has(.entity-more){
            grid-column: 2/3;
            grid-row: 2/4;
          }
        }
      }
    }
  }
  & .view-footer{
    margin-top: 60px;
    padding-top: 60px;
    border-top: 1px solid var(--color-base-400);
  }
}

/* *ANCHOR - Newsletter */

.name-newsletter{
  ul.d-grid{
    grid-template-columns: repeat(auto-fill, minmax(min(426px,100%),1fr));
    gap: 48px 41px;
    li{
      position: relative;
      border-radius: 12px;
      padding: 20px;
      &::after{
        content: '';
        display: block;
        width: 1px;height: 100%;
        position: absolute;
        top:0;
        right: -20px;
        background-color: transparent;
      }
      @media (min-width:992px) {
        &:nth-child(2n+1){
          &::after{
            background-color: var(--color-base-400);
          }
        }
      }
      @media (min-width:1520px) {
        &:nth-child(2n+1){
          &::after{
            background-color: unset;
          }
        }
        &:nth-child(3n+1),
        &:nth-child(3n+2){
          &::after{
            background-color: var(--color-base-400);
          }
        }
      }
      &:hover{
        background-color: var(--color-Hawkes-Blue);
        .entity-more{
          color: unset;
        }
      }
      .mail-date{
        font-size: var(--font-size-small);
        margin-bottom: unset;
      }
      .entity-title{
        margin-top: unset;
      }
      .entity-more{
        color: transparent;
        margin-top: 24px;
        display: flex;
        gap: 12px;
        justify-content: end;
        align-items: center;
        &::after{
          content: '';
          display: block;
          width: 32px;height: 32px;
          background: url(images/icon-top-right.svg) no-repeat center center;
        }
      }
      .entity-link{
        a{
          position: absolute;
          inset: 0;
        }
      }
    }
  }
}

#block-subscribe{
  margin-top: 40px;
  padding-top: 56px;
  border-top: 1px solid var(--color-base-400);
  @media (min-width:1200px) {
    h2.block-title{
      position: absolute;
      top: 56px;
      left: 0;
    }
    .block-content{
      display: flex;
      gap: 40px;
      align-items: center;
      .field--name-field-image{
        order: 2;
        flex: 1;
        img{
          width: 100%;
        }
      }
      .field--name-body{
        flex-basis: 33%;
      }
    }
  }
}

/* *ANCHOR - Report */

.name-report{
  .bef-links{
    ul li a{
      display: flex;
      align-items: center;
      gap: 1em;
      &::before{
        content: '';
        display: block;
        width: 52px;height: 52px;
        border-radius: 50%;
        background: var(--color-Slate-300) url(images/button-report-Triangle_add.svg) no-repeat center center;
      }
      &#edit-field-tax-report-target-id-4::before{
        background-image: url(images/button-report-Finance.svg);
      }
      &#edit-field-tax-report-target-id-5::before{
        background-image: url(images/button-report-Money_bag.svg);
      }
    }
  }
  .view-content{
    &::before{
      content: '';
      display: block;
      width: 72px;height: 9px;
      background: url(images/icon-title-black.svg) no-repeat 0 0;
      margin: 40px auto 80px;
    }
  }
  ul.d-grid{
    max-width: 640px;
    margin-inline: auto;
    gap: 20px;
    li{
      a{
        padding: 8px 8px 8px 20px;
        border: 2px solid var(--color-Slate-500);
        border-radius: 16px;
        display: grid;
        grid-template-columns: 1fr 40px;
        align-items: center;
        gap: 20px;
        &::after{
          content: '';
          display: block;
          width: 40px;height: 40px;
          border-radius: 50%;
          background: var(--color-Slate-300) url(images/icon-Download.png) no-repeat center center;
        }
        &:hover, &:focus-within{
          border-color: var(--color-Slate-300);
          background-color: var(--color-Slate-300);
          &::after{
            background-color: white;
          }
        }
      }
    }
  }
}

/* *!SECTION - Section */

/* *SECTION - Node */

.node{
  .node-header{

  }

  .node-body{
    margin-top: 40px;
    max-width: 680px;
  }
  
  .node-text{
    max-width: 800px;
    margin: 40px auto 60px;
  }
  
  .field--name-title{
    color: var(--color-base-700);
    font-weight: 600;
    font-size: var(--font-size-h4);
    text-align: center;
    line-height: 1.3;
    display: block;
    margin-block: 60px;
  }

  .field--name-field-image{
    text-align: center;
    img{
      width: 100%;
      &.image-style-node{
        max-width: 1360px;
      }
    }
  }

  .field--name-body{
    max-width: 800px;
    margin-inline: auto;
  }
  
  .field--name-field-attachent{
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-base-400);
  }
}

.entity-node{
  .views-field{
    margin-bottom: 20px;
    .views-label, .field__label{
      font-size: var(--font-size-small);
      color: var(--color-base-500);
      font-weight: 600;
    }
    .eck-entity{
      .field__label{
        margin-right: 1rem;
      }
      .field__item{
        font-size: 20px;
      }
    }
    .entity-link{
      ul.list-group{
        gap: 12px;
        li.list-group-item{
          border: unset;
          &:not(:first-child){
            a{
              font-size: var(--font-size-medium);
              font-weight: 600;
              color: var(--color-Slate-700);
            }
          }
        }
      }
    }
    &:has(.entity-share){
      padding-top: 16px;
      border-top: 1px solid var(--color-base-400);
    }
    h1.node-title{
      font-size: var(--font-size-h4);
    }
  }
}

/* *ANCHOR - Page */

.node--type-page{
  
}

/* *ANCHOR - Band */

.name-member{
  &.entity-list{
    ul.d-grid{
      gap: 40px;
      grid-template-columns: repeat(auto-fill, minmax(min(390px,100%) ,1fr));
    }
  }
  .entity-title,
  .entity-title.job{
    max-width: calc(100% - 126px);
  }
}

/* *ANCHOR - performance type */

.node--type-performance-type{
  .name-cp{
    max-width: 1200px;
    margin-inline: auto;
    .entity-title.block{
      justify-content: center;
      font-size: var(--font-size-h4);
      margin-bottom: 40px;
      &::after{
        content: unset;
      }
    }
  }
}

.name-performance-type{
  &.submenu{
    margin-block: 24px 80px;
    ul{
      gap: 16px;
      flex-wrap: wrap;
      li{
        a{
          display: flex;
          gap: 16px;
          align-items: center;
          padding: 2px 20px 2px 2px;
          border-radius: 30px;
          border: 2px solid var(--color-Slate-500);
          .menu-icon{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 52px;height: 52px;
            border-radius: 26px;
            background-color: var(--color-Slate-300);
          }
          &:hover, &.active{
            background-color: var(--color-Slate-500);
          }
        }
      }
    }
  }
  &.video{
    margin-bottom: 100px;
    .node-title{
      font-size: var(--font-size-h4);
      font-weight: 600;
      letter-spacing: 1%;
      margin-bottom: 24px;
    }
    .node-video-text{
      max-width: 1200px;
      margin-inline: auto;
      margin-top: 1em;
    }
  }
  &.composition{
    ul{
      row-gap: 120px;
      li.d-lg-flex{
        gap: 40px;
        .composition-img{
          order: 2;
          flex: 1;
          img{
            width: 100%;
          }
        }
        .composition-text{
          flex-basis: 426px;
          .block-title{
              margin-bottom: 160px;
              font-size: 16px;
              @media (max-width:992px) {
                margin-block: 1.5em;
              }
          }
        }
      }
    }
    .more-link{
      text-align: center;
      margin-top: 3rem;
    }
  }
}  

/* *!SECTION - Node */


/* *SECTION - User */

form:has(#google-signin-container){
  display: grid;
  & > #google-signin-container{
    order: -1;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-base-400);
    position: relative;
    &::after{
      content: '或';
      display: inline-block;
      padding-inline: 1em;
      background-color: white;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%);
    }
    div[role="button"]{
      color: var(--color-base-700);
      width: 100% !important;
      max-width: unset !important;
      background-color: transparent !important;
      border: 2px solid var(--color-Slate-500);
      border-radius: 16px;
      padding: 12px 20px;
      &.L5Fo6c-bF1uUb{
        display: none;
      }
    }
  }
}

/* *!SECTION */


/* *SECTION - CRM */

.path-civicrm{
  padding-top: var(--drupal-displace-offset-top) !important;
}

.crm-container{
  max-width: 800px;
  margin-inline: auto;
  #printer-friendly, 
  .form-item[id^="mu_kuan_ye_lan_wei_netijian_zhi_yong"]{
    display: none;
  }
  .event_summary-section{
    background-color: var(--color-Slate-400);
  }
  div.messages,
  div.status{
    background-color: var(--color-Slate-700);
    a{
      color: #EAF4F5 !important;
    }
  }
  .button{
    background: var(--color-Slate-700) !important;
  }
}

/* *!SECTION - CRM */

/* *NOTE - The End */