/*
Theme Name:   Blocksy Child
Theme URI:    https://travel.jeremyhuang.com/
Description:  Blocksy Child Theme with Mega Menu
Author:       Jeremy Huang
Author URI:   https://travel.jeremyhuang.com/
Template:     blocksy
Version:      1.0.0
Text Domain:  blocksy-child
*/

/* =========================================================
   MEGA MENU — 滿版橫向展開選單
   ========================================================= */

/*
 * Header：置頂 + 捲動變色
 * - position: sticky  → 捲動時固定在最上方
 * - transition        → 背景色平滑過渡
 * - overflow: visible → 確保 Mega Panel 不被裁切
 */
header:not(.entry-header),
#masthead {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    overflow: visible !important;
    transition: background-color 0.35s ease;
}

/* 捲動後：背景從白色變成主題色 */
header:not(.entry-header).is-scrolled,
#masthead.is-scrolled {
    background-color: #F4C722 !important;
}

/* 捲動後：覆蓋 Blocksy row 自帶的背景色，讓主題色透出來 */
header:not(.entry-header).is-scrolled [data-row="middle"][data-column-set="2"],
#masthead.is-scrolled [data-row="middle"][data-column-set="2"] {
    background-color: transparent !important;
    transition: background-color 0.35s ease;
}

/* Logo 圖片：預設原色，捲動後變白 */
header:not(.entry-header) .ct-logo img,
header:not(.entry-header) .custom-logo,
header:not(.entry-header) img[class*="logo"],
header:not(.entry-header) .site-logo img,
header:not(.entry-header) a[class*="logo"] img {
    transition: filter 0.35s ease;
}

header:not(.entry-header).is-scrolled .ct-logo img,
header:not(.entry-header).is-scrolled .custom-logo,
header:not(.entry-header).is-scrolled img[class*="logo"],
header:not(.entry-header).is-scrolled .site-logo img,
header:not(.entry-header).is-scrolled a[class*="logo"] img {
    filter: brightness(0) invert(1);
}

/* 隱藏網站名稱／標語文字容器，只保留 logo 圖片 */
.site-title-container {
    display: none !important;
}

/* ── 移除捲動回彈效果 ────────────────────────────────── */
html,
body {
    overscroll-behavior: none;
}

@media screen and (min-width: 783px) {
    /* ── 第一層選單 hover + panel 開啟中 + active（白色 header）→ 主題色 ── */
    nav[class*="menu"] li:hover > .ct-menu-link,
    nav[class*="menu"] li:hover > .ct-sub-menu-parent,
    nav[class*="menu"] li:hover > .ct-menu-link svg,
    nav[class*="menu"] li:hover > .ct-sub-menu-parent svg,
    nav[class*="menu"] li.is-panel-open > .ct-menu-link,
    nav[class*="menu"] li.is-panel-open > .ct-sub-menu-parent,
    nav[class*="menu"] li.is-panel-open > .ct-menu-link svg,
    nav[class*="menu"] li.is-panel-open > .ct-sub-menu-parent svg,
    nav[class*="menu"] li[class*="current-menu-"] > .ct-menu-link,
    nav[class*="menu"] li[class*="current-menu-"] > .ct-sub-menu-parent,
    nav[class*="menu"] li[class*="current-menu-"] > .ct-menu-link svg,
    nav[class*="menu"] li[class*="current-menu-"] > .ct-sub-menu-parent svg {
        color: #F4C722 !important;
        fill: #F4C722 !important;
    }

    /* ── 跨分類文章：移除非正確頂層分類的 active 顏色 ──────────────── */
nav[class*="menu"] li[class*="current-menu-"].mega-not-current > .ct-menu-link,
nav[class*="menu"] li[class*="current-menu-"].mega-not-current > .ct-sub-menu-parent,
nav[class*="menu"] li[class*="current-menu-"].mega-not-current > .ct-menu-link svg,
nav[class*="menu"] li[class*="current-menu-"].mega-not-current > .ct-sub-menu-parent svg {
    color: inherit !important;
    fill: inherit !important;
}

/* ── 捲動後（主題色 header）hover + panel 開啟中 + active → 白色 ── */
    header:not(.entry-header).is-scrolled nav[class*="menu"] li:hover > .ct-menu-link,
    header:not(.entry-header).is-scrolled nav[class*="menu"] li:hover > .ct-sub-menu-parent,
    header:not(.entry-header).is-scrolled nav[class*="menu"] li:hover > .ct-menu-link svg,
    header:not(.entry-header).is-scrolled nav[class*="menu"] li:hover > .ct-sub-menu-parent svg,
    header:not(.entry-header).is-scrolled nav[class*="menu"] li.is-panel-open > .ct-menu-link,
    header:not(.entry-header).is-scrolled nav[class*="menu"] li.is-panel-open > .ct-sub-menu-parent,
    header:not(.entry-header).is-scrolled nav[class*="menu"] li.is-panel-open > .ct-menu-link svg,
    header:not(.entry-header).is-scrolled nav[class*="menu"] li.is-panel-open > .ct-sub-menu-parent svg,
    header:not(.entry-header).is-scrolled nav[class*="menu"] li[class*="current-menu-"] > .ct-menu-link,
    header:not(.entry-header).is-scrolled nav[class*="menu"] li[class*="current-menu-"] > .ct-sub-menu-parent,
    header:not(.entry-header).is-scrolled nav[class*="menu"] li[class*="current-menu-"] > .ct-menu-link svg,
    header:not(.entry-header).is-scrolled nav[class*="menu"] li[class*="current-menu-"] > .ct-sub-menu-parent svg {
        color: #ffffff !important;
        fill: #ffffff !important;
    }
}

/* ── WordPress 管理員工具列補偏 ─────────────────────── */
/*
 * 登入狀態下，WP 會在頂部顯示 #wpadminbar（高 32px，小螢幕 46px）。
 * header 的 sticky top 要往下移，避免被蓋住。
 * WP 會自動在 <body> 加上 .admin-bar class，用它來判斷。
 */
.admin-bar header:not(.entry-header),
.admin-bar #masthead {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar header:not(.entry-header),
    .admin-bar #masthead {
        top: 0 !important;
        position: relative !important;
    }
}

/* admin bar 本身及其子選單永遠在最上層 */
#wpadminbar {
    z-index: 9999999 !important;
}

/* 頂層有 Mega Menu 的 <li> 保持 static，不干擾 panel 定位 */
.has-mega-menu {
    position: static !important;
}

/* 隱藏這個 li 原本的 .sub-menu 下拉 */
.has-mega-menu > .sub-menu {
    display: none !important;
    pointer-events: none !important;
}

/* ── Mega Panel 容器 ──────────────────────────────────── */
.mega-panel {
    /* absolute：跟著 header 一起捲動，不浮在畫面上 */
    position: absolute;
    top: 100%;      /* 緊貼 header 底部 */
    left: 0;
    width: 100%;

    background: #ffffff;
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.12);
    z-index: 999999;
    padding: 36px 0 40px;

    /* 預設隱藏 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s;
    pointer-events: none;
}

/* 展開狀態 */
.mega-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── 內部 Grid 容器 ───────────────────────────────────── */
.mega-panel-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 28px 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: start;
}

/* ── 每個子分類欄位 ──────────────────────────────────── */
.mega-column {
    padding: 0 20px;
    border-right: 1px solid #f0f0f0;
}

.mega-column:last-child {
    border-right: none;
}

/* 子分類標題連結（字級大於文章標題） */
.mega-column-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1a1a1a;
    text-decoration: none;
    margin-bottom: 12px;
    padding: 5px 10px 5px 10px;
    border-bottom: 2px solid #F4C722;
    transition: color 0.15s;
}

.mega-column-title:hover {
    color: #F4C722;
}

.mega-column.is-active .mega-column-title {
    color: #fff;
    background: #F4C722;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

/* ── 文章列表 ────────────────────────────────────────── */
.mega-posts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-post-item {
    margin-bottom: 0;
}

/* 文章連結：垂直排列（圖片在上，標題在下） */
.mega-post-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    text-decoration: none;
    color: #444;
    line-height: 1.5;
    transition: color 0.15s;
}

/* hover 效果（分類頁 + 文章頁都適用） */
.mega-column .mega-posts .mega-post-item:hover .mega-post-link .mega-post-title {
    color: var(--theme-link-hover-color);
    font-weight: 700;
}

/* 文章頁：目前這篇文章的標題標亮（只在單篇文章頁由 JS 加上 is-active-post） */
.mega-post-link.is-active-post .mega-post-title {
    color: var(--theme-link-hover-color);
    font-weight: 700;
}

/* 精選圖片：滿版欄寬，3:2 比例 */
.mega-post-thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    background: #f0f0f0;
}

/* 圖片佔位（無圖時顯示） */
.mega-post-thumb-placeholder {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 6px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 28px;
}

/* 文章標題：圖片下方，字級小於子分類標題 */
.mega-post-title {
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    transition: color 0.15s;
}

/* ── 行動版：Mega Menu 完全隱藏（保留主題原本行為）─── */
@media (max-width: 1024px) {
    .mega-panel {
        display: none !important;
    }
    .has-mega-menu > .sub-menu {
        display: block !important;
        pointer-events: auto !important;
    }
}

/* jetpack 延伸閱讀區塊透明度 */
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
    opacity: 1;
}

/* jetpack 延伸閱讀區塊縮圖 */
.jp-relatedposts-post-img {
    aspect-ratio: 3 / 2;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* jetpack 延伸閱讀區塊標題 */
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
    text-decoration: none;
    color: var(--theme-text-color);
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
    text-decoration: none;
    color: var(--theme-link-hover-color);
    font-weight: 700;
}

/* 文章下方一日遊連結 */
.wp-block-list li a {
    text-decoration: none;
    color: var(--theme-text-color);
}
.wp-block-list li:hover a {
    text-decoration: none;
    color: var(--theme-link-hover-color);
    font-weight: 700;
}

/* 文章下方tag hover背景色 */
.entry-tags a:hover {
    background-color: #F4C722 !important;
}

/* blockquote顏色 */
blockquote:where(:not(.is-style-plain)):where(:not(.has-text-align-center):not(.has-text-align-right)) {
    border-inline-start: 4px solid #F4C722 !important;
}

/* ── 搜尋 Modal 背景改為主題色 ──────────────────────── */
[data-header*="type-1"] #search-modal {
    background-color: rgba(0, 0, 0, .9) !important;
}

/* 手機版選單 */
@media screen and (max-width: 782px) {
    /* 手機版選單改為滿版 */
    [data-header*="type-1"] #offcanvas {
        --side-panel-width: 100vw;
    }

    /* 管理員登入時，offcanvas 從 admin bar 下方開始 */
    .admin-bar [data-header*="type-1"] #offcanvas {
        top: 46px !important;
    }

    /* 手機版選單背景改為白色 */
    [data-header*="type-1"] #offcanvas .ct-panel-inner {
        background-color: #fff;
    }

    /* 手機版選單關閉按鈕padding */
    .ct-panel-actions {
        padding: 25px 20px 25px 20px;
    }

    /* 手機版選單關閉按鈕顏色改為主題色 */
    .ct-toggle-close .ct-icon {
        fill: #F4C722;
    }

    /* 手機版選單外層padding */
    .ct-panel-content-inner {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 手機版第一層選單 */
    .mobile-menu > ul > li {
        padding: 10px 20px;
        background-color: #F4C722;
    }
    .mobile-menu > ul > li[class*="current-menu-"] > a,
    .mobile-menu > ul > li[class*="current-menu-"] > .ct-sub-menu-parent,
    .mobile-menu > ul > li .ct-toggle-dropdown-mobile svg,
    .mobile-menu > ul > li.dropdown-active span,
    .mobile-menu > ul > li.dropdown-active svg{
        color: #fff !important;
        fill: #fff !important;
    }

    /* 手機版第二層選單外層位置 */
    .mobile-menu ul.sub-menu {
        padding: 0;
        margin: 0;
        width: calc(100% + 40px) !important;
        margin-left: -20px;
        background: #fff;
        padding-inline-start: 0px !important;
    }

    /* 手機版第二層選單文字 */
    .mobile-menu ul.sub-menu .ct-menu-link {
        padding: 10px 20px;
        color: #F4C722;
    }

    /* 手機版第一層 active 項目：強制白色（只限第一層） */
    .mobile-menu > ul > li[class*="current-menu-"] > .ct-menu-link,
    .mobile-menu > ul > li[class*="current-menu-"] > .ct-sub-menu-parent,
    .mobile-menu > ul > li[class*="current-menu-"] > .ct-menu-link svg,
    .mobile-menu > ul > li[class*="current-menu-"] > .ct-sub-menu-parent svg {
        color: #ffffff !important;
        fill: #ffffff !important;
    }

    /* 手機版：消除點擊 / tap / hover 時的藍色（所有層級） */
    .mobile-menu a,
    .mobile-menu .ct-menu-link,
    .mobile-menu .ct-sub-menu-parent,
    .mobile-menu .ct-toggle-dropdown-mobile {
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }

    /* 手機版第一層 hover */
    .mobile-menu > ul > li > .ct-menu-link:hover,
    .mobile-menu > ul > li > a:hover {
        color: #ffffff !important;
    }

    /* 手機版第二層 hover */
    .mobile-menu ul.sub-menu li > .ct-menu-link:hover,
    .mobile-menu ul.sub-menu li > a:hover {
        color: #F4C722 !important;
    }

    /* 手機版第一層點擊時（:focus / :active）只限第一層強制白色 */
    .mobile-menu > ul > li > .ct-menu-link:focus,
    .mobile-menu > ul > li > .ct-menu-link:active,
    .mobile-menu > ul > li > .ct-sub-menu-parent:focus,
    .mobile-menu > ul > li > .ct-sub-menu-parent:active {
        color: #ffffff !important;
        outline: none !important;
    }

    /* 手機版第二層選單文字前方點點 */
    .mobile-menu ul.sub-menu .ct-menu-link:before {
        width: 0 !important;
        height: 0 !important;
    }

    /* 手機版：第二層選單文章卡片（左圖右標題） */
    .mobile-mega-post-link {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-decoration: none;
        gap: 12px;
        margin: 6px 20px 14px;
    }

    .mobile-mega-post-thumb {
        width: 90px;
        flex-shrink: 0;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: 6px;
        display: block;
        background: #f0f0f0;
    }

    .mobile-mega-post-thumb-placeholder {
        width: 90px;
        flex-shrink: 0;
        aspect-ratio: 3 / 2;
        border-radius: 6px;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ccc;
        font-size: 24px;
    }

    .mobile-mega-post-title {
        font-size: 13px;
        color: var(--theme-text-color);
        line-height: 1.4;
    }

    /* 覆蓋 dropdown-active 把所有 span 變白的規則 */
    .mobile-menu > ul > li.dropdown-active .mobile-mega-post-title {
        color: var(--theme-text-color) !important;
    }
}