/* =====================================================================
   頁首共用模組（自設計師 style.css 抽出）
   目的：讓功能頁（_MainLayout）與設計頁（_DesignLayout）共用「同一份」頁首樣式，
   避免兩邊各自實作導致站內搜尋寬度、品牌縮排、字級不一致。
   本檔由 _MainLayout 於 design-chrome.css 之後載入以覆蓋舊有的頁首規則。
   ===================================================================== */
/* 頁首以瀏覽器預設字級為基準（功能頁 base.css 的基準較小，會讓 rem/em 全部縮水）。
   無障礙 CS2140401C 要求相對或具名字級：此處用具名的 medium（＝瀏覽器預設，一般 16px），
   數值與原本的 16px 相同，且同樣不受父層較小字級影響 —— 不可改成 100%／rem，
   否則會繼承功能頁的小基準，頁首整體縮水。 */
.site-header { font-size: medium; }
.site-header a { text-decoration: none; }

/* Bootstrap 為 .container 加的 clearfix（content:" "; display:table）在 flex 版面下
   會變成一個空的 flex 項目，被 gap 推開 → 品牌與選單整體往右位移 24px。此處移除。 */
.site-header .topbar::before,
.site-header .topbar::after,
.site-header .brand-row::before,
.site-header .brand-row::after,
.site-header #site-nav::before,
.site-header #site-nav::after,
.yip-demo-bar > .container::before,
.yip-demo-bar > .container::after {
    content: none;
}

/* Bootstrap 讓表單元件繼承字級（font: inherit），會把站內搜尋撐得比設計頁寬，
   還原成與設計頁相同的呈現。 */
.site-header .site-search input,
.site-header .site-search button {
    /* 0.8333em ＝ 13.333px（相對於頁首的 medium 16px），與瀏覽器表單元件預設字級一致。
       改用相對單位以符合無障礙 CS2140401C。 */
    font-size: 0.8333em;
}
/* 輸入框寬度取決於字型量測；設計頁用瀏覽器預設的 Arial，此處對齊以免搜尋框變長 */
.site-header .site-search input {
    font-family: Arial, sans-serif;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -5rem;
    z-index: 99;
    background: #000;
    color: #fff;
    padding: .75rem 1rem
}

.skip-link:focus {
    top: 1rem
}

.site-header {
    padding-top: .5rem
}

.topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    font-size: .9rem
}

.member-utility-name {
    color: #4d5134;
    font-weight: 700
}

.member-utility-group {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    white-space: nowrap
}

.session-info__timer {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #8a6a4a
}

.session-info__timer strong {
    color: #aa4b8f;
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

.session-info__timer strong.is-warning {
    color: #c0392b
}

.font-size {
    display: flex;
    align-items: center;
    gap: .25rem
}

.font-size button {
    border: 0;
    border-radius: .35rem;
    background: #fff;
    color: #7a4d3b;
    font-weight: 700;
    min-width: 1.7rem;
    height: 1.7rem
}

.font-size button[aria-pressed=true] {
    background: #7a4d3b;
    color: #fff
}

.site-search {
    position: relative;
    display: flex;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: #fff;
    overflow: hidden
}

.site-search input {
    border: 0;
    padding: .45rem .7rem .45rem 2.25rem;
    min-width: 11rem
}

.site-search button {
    min-height: 30px;
    margin: .2rem .2rem .2rem 0;
    border: 0;
    border-radius: .55rem;
    background: #b9472c;
    color: #fff;
    padding: .25rem 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease
}

.site-search button:hover {
    background: #a93f27;
    box-shadow: 0 3px 8px rgba(169, 90, 143, .24)
}

.site-search button:active {
    background: #94351f
}

.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 0 .6rem
}

.brand-row .site-search {
    margin-left: auto
}

.brand {
    display: flex;
    align-items: center;
    gap: .75rem
}

.brand-row a.brand {
    text-decoration: none;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: .45rem;
    background: #d71920;
    color: #fff;
    font-weight: 900
}

.brand-ministry {
    font-weight: 700;
    color: #d33b2f;
    line-height: 1.1
}

.brand-ministry small {
    color: #4b4b4b
}

.brand strong {
    font-size: 1.95rem;
    letter-spacing: .05em
}

.header-demo-tools,
.mobile-header-demo-tools {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 0 1 auto;
    min-width: 0
}

.header-demo-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: #e8821e;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    white-space: nowrap
}

.header-demo-session {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    min-height: 2rem;
    padding: .2rem .3rem .2rem .75rem;
    border: 1px solid #dec6d2;
    border-radius: 999px;
    background: #fff8fb;
    color: #674254;
    font-size: .82rem
}

.header-demo-session__info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.header-demo-session a {
    flex: 0 0 auto;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: #8f3c78;
    color: #fff !important;
    font-weight: 700;
    white-space: nowrap
}

.header-demo-session a:hover,
.header-demo-session a:focus-visible {
    background: #732640;
    color: #fff !important
}

.menu-toggle {
    display: none;
    border: 0;
    border-radius: 999px;
    background: #b9472c;
    color: #fff;
    padding: .55rem 1rem;
    font-weight: 700
}

.menu-toggle[aria-expanded=true] .menu-toggle__icon span:first-child {
    transform: translateY(6px) rotate(45deg)
}

.menu-toggle[aria-expanded=true] .menu-toggle__icon span:nth-child(2) {
    opacity: 0
}

.menu-toggle[aria-expanded=true] .menu-toggle__icon span:last-child {
    transform: translateY(-6px) rotate(-45deg)
}

.mobile-only,
.primary-nav .mobile-only {
    display: none
}

.primary-nav {
    background: rgba(255, 255, 255, .82);
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(160, 120, 80, .08)
}

.primary-nav ul {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    padding: .35rem 1rem;
    list-style: none
}

.primary-nav a {
    display: block;
    padding: .3rem 1.1rem;
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.primary-nav a:hover {
    background: #fff;
    text-decoration: none;
    box-shadow: 0 0px 8px rgba(169, 90, 143, .24)
}

.primary-nav a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .85)
}

.primary-nav a[aria-current="page"] {
    background: #89304f;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 3px 9px rgba(96, 34, 62, .28)
}

.primary-nav a[aria-current="page"]:hover,
.primary-nav a[aria-current="page"]:focus-visible {
    background: #732640;
    color: #fff
}

@media (max-width:900px){
.topbar {
        display: none
    }
.brand-row {
        position: relative;
        flex-wrap: nowrap;
        gap: .75rem;
        padding: .7rem 3.5rem .7rem 0
    }
.brand-row>.site-search {
        display: none
    }
.brand-row > .header-demo-tools {
        display: none
    }
.brand {
        min-width: 0;
        gap: .5rem
    }
.brand-row > .brand {
        flex: 1 1 auto;
        overflow: hidden
    }
.brand-ministry {
        display: inline-block;
        flex: 0 0 auto
    }
.brand-ministry img {
        display: block;
        width: 6.5rem;
        max-width: 25vw;
        height: auto
    }
.brand strong {
        font-size: clamp(1rem, 4.5vw, 1.4rem);
        line-height: 1.25;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
.menu-toggle {
        position: absolute;
        z-index: 3;
        top: 50%;
        right: 0;
        display: grid !important;
        flex: 0 0 auto;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0;
        padding: 0;
        visibility: visible;
        opacity: 1;
        transform: translateY(-50%)
    }
.primary-nav {
        display: none;
        border-radius: 1rem;
        padding-top: .5rem;
    }
.primary-nav.is-open {
        display: block
    }
.primary-nav .mobile-only {
        display: flex
    }
.primary-nav .mobile-menu-search {
        width: calc(100% - 2rem);
        margin: 1rem;
        overflow: hidden
    }
.primary-nav .primary-nav__links {
        display: grid;
        grid-template-columns: 1fr;
        gap: .2rem;
        padding: 0 1rem 1rem
    }
.primary-nav .mobile-utility-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .35rem;
        margin: 0 1rem;
        padding: .85rem 0 1rem;
        border-top: 1px solid var(--line);
        list-style: none
    }
.primary-nav .mobile-header-demo-tools {
        align-items: center;
        gap: .45rem;
        margin: 0 1rem 1rem
    }
.primary-nav .mobile-header-demo-tools .header-demo-session {
        flex: 1 1 auto;
        justify-content: space-between
    }
.mobile-utility-nav .member-utility-name {
        display: block;
        padding: .4rem .25rem;
        font-size: .9rem;
        text-align: center
    }
.mobile-utility-nav .mobile-member-session {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-bottom: .15rem;
        padding: .55rem .75rem;
        border: 1px solid #efd9c3;
        border-radius: .65rem;
        background: #fff7ed
    }
.mobile-utility-nav .mobile-member-session .member-utility-name {
        padding: 0
    }
}

@media (max-width:560px){
.brand {
        align-items: flex-start
    }
.brand strong {
        font-size: 1.35rem
    }
.site-search {
        width: 100%
    }
.site-search input {
        min-width: 0;
        flex: 1
    }
.topbar {
        gap: .65rem
    }
}