/* ==================================================
   Google Sheet 動態活動 Tab
   請完整放在 event.css 最下面
================================================== */

/* 尚未完成載入時先隱藏 */
#agendaTabNav.agenda-tabs-loading {
  visibility: hidden;
  pointer-events: none;
}

/* 完成載入後顯示 */
#agendaTabNav.agenda-tabs-ready {
  visibility: visible;
  pointer-events: auto;
}

/* ==================================================
   電腦版／平板版
================================================== */

@media screen and (min-width: 768px) {

  /* Tab 外層 */
  #agendaTabNav {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: flex-start !important;
    align-items: stretch;

    gap: 8px;

    width: 100%;
    margin: 0 0 28px;
    padding: 0;

    list-style: none;
    box-sizing: border-box;
  }

  /*
   * 每個 Tab：
   * 1. 可以自動放大填滿剩餘寬度
   * 2. 空間不夠時可以縮小
   * 3. 最小基準寬度為 105px
   */
  #agendaTabNav > li {
    display: flex !important;
    float: none !important;

    flex: 1 1 105px !important;

    width: auto !important;
    min-width: 105px !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;
    box-sizing: border-box;
  }

  /*
   * date 版型通常是長文字：
   * 外部單位同期活動
   * EXTERNAL CONCURRENT EVENT
   */
  #agendaTabNav > li.agenda-tab-date {
    flex-basis: 230px !important;
  }

  /* Tab 按鈕 */
  #agendaTabNav .sub-link-1 {
    appearance: none;
    -webkit-appearance: none;

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

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 72px;

    margin: 0;
    padding: 12px 16px;

    border: 0;
    border-radius: 0;

    color: #888;
    background: #fff;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);

    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    white-space: normal;

    cursor: pointer;
    box-sizing: border-box;

    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      box-shadow 0.25s ease;
  }

  /* 滑鼠移入 */
  #agendaTabNav .sub-link-1:hover {
    color: #2877e5;
    background: #f5f8fd;
  }

  /* 目前選取 */
  #agendaTabNav .sub-link-1.is-current,
  #agendaTabNav .sub-link-1.is-current:hover {
    color: #fff;
    background: #2877e5;
    box-shadow: 0 3px 10px rgba(40, 119, 229, 0.3);
  }

  /* 鍵盤操作焦點 */
  #agendaTabNav .sub-link-1:focus-visible {
    outline: 2px solid #0e3d85;
    outline-offset: 3px;
  }

  /* Tab 內容區 */
  #agendaTabContents {
    width: 100%;
  }
}

/* ==================================================
   平板版
================================================== */

@media screen and (min-width: 768px) and (max-width: 1100px) {

  #agendaTabNav {
    gap: 7px;
  }

  #agendaTabNav > li {
    flex-basis: 92px !important;
    min-width: 92px !important;
  }

  #agendaTabNav > li.agenda-tab-date {
    flex-basis: 200px !important;
  }

  #agendaTabNav .sub-link-1 {
    min-height: 66px;
    padding: 10px 12px;

    font-size: 16px;
  }
}

/* ==================================================
   手機版手風琴
================================================== */

@media screen and (max-width: 767px) {

  /* 手風琴外層 */
  #agendaTabNav {
    display: block !important;

    width: 100%;
    margin: 0 0 20px;
    padding: 0;

    list-style: none;
  }

  /* 每個手風琴項目 */
  #agendaTabNav > li,
  #agendaTabNav > li.agenda-tab-date {
    display: block !important;
    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    background: #2877e5;

    list-style: none;
    box-sizing: border-box;
  }

  /*
   * 手風琴標題：
   * 一般、hover、focus、active、展開中
   * 全部維持藍底白字
   */
  #agendaTabNav .sub-link-1,
  #agendaTabNav .sub-link-1:hover,
  #agendaTabNav .sub-link-1:focus,
  #agendaTabNav .sub-link-1:focus-visible,
  #agendaTabNav .sub-link-1:active,
  #agendaTabNav .sub-link-1.is-current,
  #agendaTabNav .sub-link-1.is-current:hover,
  #agendaTabNav .sub-link-1.is-current:focus,
  #agendaTabNav .sub-link-1.is-current:active {
    position: relative;

    display: flex !important;
    justify-content: flex-start;
    align-items: center;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 58px;

    margin: 0;
    padding: 14px 48px 14px 18px;

    border: 0;
    border-color: transparent !important;
    border-radius: 0;

    color: #fff !important;
    background: #2877e5 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;

    cursor: pointer;
    box-sizing: border-box;
  }

  /* 一般 focus 不顯示瀏覽器白底效果 */
  #agendaTabNav .sub-link-1:focus {
    outline: none;
  }

  /* 鍵盤操作時仍保留焦點提示 */
  #agendaTabNav .sub-link-1:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -5px;
  }

  /* 收合狀態：加號 */
  #agendaTabNav .sub-link-1::after {
    content: "+";

    position: absolute;
    top: 50%;
    right: 18px;

    color: #fff !important;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;

    transform: translateY(-50%);
  }

  /* 展開狀態：減號 */
  #agendaTabNav .sub-link-1.is-current::after {
    content: "−";
    color: #fff !important;
  }

  /*
   * serialtabs 會在手機版
   * 把內容移到對應按鈕後面
   */
  #agendaTabNav .serialtabs-nav-content {
    width: 100%;
    padding: 12px;

    background: #fff;
    box-sizing: border-box;
  }

  #agendaTabContents {
    width: 100%;
  }
}