/*
Theme Name: Idostory
Theme URI: https://idostory.com/
Author: Idostory
Author URI: https://idostory.com/
Description: CoverNews 7.5.8 的子主題。內容容器收窄、卡片比例鎖定、H2 色線、文末相關文章 4 張卡、圖庫網格、燈箱及閱讀進度條。父主題檔案一律不改。
Template: covernews
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: covernews-child
*/

/* ============================================================
   A. 內容容器及欄寬（桌面版）
   父主題在 1600px 以上將 .container 放寬至 1600px，
   1215px 以上放寬至 1215px；此處一律封頂 1150px。
   ============================================================ */
@media (min-width: 1215px) {
    body .container {
        max-width: 1150px;
    }
}

/* 主欄 73%／側欄 27%：1150px 容器下側欄約 300px。 */
@media (min-width: 992px) {
    #primary,
    .primary-1 {
        width: 73%;
    }
    #secondary {
        width: 27%;
    }
}

/* ============================================================
   B. 卡片：圖片圓角＋圖下 3px 主色橫線
   卡片圖本身已有 aspect-ratio 3/2 及 object-fit cover
   （父主題 style.css），此處只補圓角及橫線。
   橫線只加於圖下有 figcaption 的卡片（列表／精選／
   最新文章），Banner 覆蓋式標題卡片不受影響。
   ============================================================ */
.latest-posts-grid .data-bg-categorised,
.af-main-banner-featured-posts .data-bg-categorised,
.af-main-banner-latest-posts .data-bg-categorised {
    border-radius: 4px;
    overflow: hidden;
}

.latest-posts-grid .spotlight-post > figcaption,
.af-main-banner-featured-posts .spotlight-post > figcaption,
.af-main-banner-latest-posts .spotlight-post > figcaption {
    border-top: 3px solid #28B8B9;
}

/* ============================================================
   C. 文章內 H2：28px＋上方短色線
   ============================================================ */
.entry-content h2 {
    font-size: 28px;
    line-height: 1.35;
    margin: 36px 0 16px;
}

.entry-content h2::before {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background: #28B8B9;
    margin-bottom: 12px;
}

/* ============================================================
   D. 文內圖片：唔超出內容闊度
   ============================================================ */
.entry-content img {
    max-width: 100%;
    height: auto;
}

/* 可放大圖片的游標（由 lightbox.js 加上 class） */
.entry-content img.ido-zoomable {
    cursor: zoom-in;
}

/* ============================================================
   E. 相關文章：2 欄圖左文右卡片（手機版單欄）
   模板：inc/hooks/blocks/block-post-related.php
   ============================================================ */
.ido-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
}

@media (min-width: 768px) {
    .ido-related-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ido-related-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ido-related-thumb {
    flex: 0 0 38%;
    max-width: 160px;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 5 / 3;
}

.ido-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ido-related-body {
    flex: 1;
    min-width: 0;
}

.ido-related-cat {
    display: inline-block;
    background: #bb1919;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 2px;
    margin-bottom: 8px;
}

.ido-related-title {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ido-related-title a {
    color: #222;
}

/* ============================================================
   F. 圖庫：.ido-gallery 三欄方形縮圖
   新文章將多圖一組用 .ido-gallery 包裝即生效。
   ============================================================ */
.ido-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 16px 0;
}

.ido-gallery figure {
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.ido-gallery a {
    display: block;
    height: 100%;
}

.ido-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   G. 燈箱（標記由 lightbox.js 建立）
   ============================================================ */
.ido-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ido-lightbox[hidden] {
    display: none;
}

.ido-lightbox img {
    max-width: 94vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ido-lightbox-counter {
    position: absolute;
    top: 16px;
    left: 20px;
    color: #fff;
    font-size: 15px;
    line-height: 44px;
}

.ido-lightbox-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 30px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
}

.ido-lightbox-close {
    top: 12px;
    right: 16px;
}

.ido-lightbox-prev {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.ido-lightbox-next {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* ============================================================
   H. 閱讀進度條（標記由 functions.php 在文章頁輸出）
   ============================================================ */
#ido-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 6px;
    width: 0;
    background: #28B8B9;
    z-index: 99998;
}

body.admin-bar #ido-reading-progress {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #ido-reading-progress {
        top: 46px;
    }
}

/* ============================================================
   J. 藍綠色 Bar 及線（2026-11-13 用戶指示）
   主導覽列及標題底線由紅 #bb1919 轉藍綠 #28B8B9
   （O4 款 STORY 實測色）。分類標籤、按鈕、連結
   hover 維持紅色，唔喺今次範圍。Editors Picks 綠線
   及 Trending 橙線係父主題分區原色，唔覆蓋。
   子主題樣式後載入，同 specificity 即可覆蓋父主題。
   ============================================================ */
nav.main-navigation {
    background: #28B8B9;
}

.wp-block-group .wp-block-heading::before,
.widget_block .wp-block-search__label::before,
.widget_block .wp-block-heading::before,
span.header-after:after {
    background: #28B8B9;
}

span.border-after {
    background-color: #28B8B9;
}

.main-story-wrapper span.border-after {
    background-color: #28B8B9;
}

#secondary .widget-title span:after {
    background: #28B8B9;
}

.af-tabs.nav-tabs > li > a:hover:after {
    background-color: #28B8B9;
}

.af-tabs.nav-tabs > li > a.active:after {
    background: #28B8B9;
}

/* ============================================================
   K. Logo 路線 B（2026-11-13 用戶批准安裝 P4）
   隱藏重複文字標題及標語（2026-11-13 用戶指示唔要
   logo 下面句標語；description 設定保留，繼續用於
   網頁標題及社交描述）；鎖定 wordmark 尺寸；
   sticky 藍綠列將 logo 轉白（用戶規則：非白底一律
   用白字版；此處以 filter 將同一檔案轉白，效果等
   同白版檔案，白版檔案另存媒體庫供其他用途）。
   注意：父主題只喺 992px 以下先顯示 sticky 標題列
   （`.af-mobile-site-title-wrap` 預設 display:none），
   桌面 sticky 列本身只有選單、無 logo；以下 selector
   刻意用返父主題嘅完整寫法，specificity 先壓得過
   父主題 50px 嘅 img 規則。
   ============================================================ */
.site-header .site-branding .site-title,
.af-mobile-site-title-wrap .site-title {
    display: none;
}

.site-header .site-branding .site-description {
    display: none;
}

.site-branding .custom-logo {
    height: 56px;
    width: auto;
    max-width: 340px;
}

.main-navigation.aft-sticky-navigation span.af-mobile-site-title-wrap img.custom-logo {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* ============================================================
   L. 桌面版置中（2026-11-13 用戶指示：桌面版 logo 同
   選單置中顯示；只影響 992px 或以上，手機版不變）
   Masthead：logo 原本喺 col-md-4（闊三分一），旁邊
   col-md-8 廣告位現時空置；將品牌欄改為全闊、文
   字置中，logo 即置於版面正中。空置廣告欄保留不
   隱藏（0 高，唔佔位），日後加 widget 會喺 logo 下
   方出現，到時再定排版。
   導覽列：navigation-container 改為置中，搜尋圖示
   絕對定位靠右，唔佔選單置中計算；最尾選單項去
   除右側 padding，消除視覺偏移。搜尋下拉表單錨
   定於 .af-search-wrap，唔受絕對定位影響。
   ============================================================ */
@media only screen and (min-width: 992px) {
    .masthead-banner .row > .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .site-header .masthead-banner .site-branding {
        text-align: center;
        padding-right: 0;
    }

    .main-navigation .navigation-container {
        position: relative;
        justify-content: center;
    }

    .main-navigation .navigation-container .cart-search {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .main-navigation .menu > ul > li:last-child > a {
        padding-right: 0;
    }
}