/* ========================================
   廣告開關控制樣式 (Ad Switch Control)
   簡單、靈活的廣告顯示/隱藏機制
   ======================================== */

/* --- CSS 變數定義 (廣告開關) --- */
:root {
    /* 廣告開關: 'show' 或 'hide' */
    --ads-display: hide;
}

/* 廣告開關使用示例 */
/* 
   開啟廣告: 在 HTML 或 <head> 的 <style> 中設定
   :root {
       --ads-display: show;
   }
   
   或在頁面根元素上設定
   <html style="--ads-display: show;">
*/

/* --- 廣告開關控制規則 --- */

/* 當 --ads-display 設為 'hide' 時，隱藏所有廣告區塊 */
@supports (--ads: test) {
    :root {
        --ads-hidden: var(--ads-display) no;
    }
}

/* 簡單的廣告開關類別 */
.ads-off .ad-slot,
[data-ads="off"] .ad-slot,
html[data-ads-enabled="false"] .ad-slot {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ads-off .ad-slot ins,
[data-ads="off"] .ad-slot ins,
html[data-ads-enabled="false"] .ad-slot ins {
    display: none !important;
    visibility: hidden !important;
}

/* --- 廣告位置基礎樣式 --- */
.ad-slot {
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.875rem;
    min-height: 100px;
    margin: 1rem 0;
    transition: all 0.3s ease;
}

.ad-slot::before {
    content: "廣告位置";
}

/* 廣告被隱藏時顯示替代內容（開發調試用） */
.ad-slot.ad-debug::before {
    content: "📺 廣告區塊 (隱藏中)";
    font-size: 0.75rem;
}

/* --- 廣告位置具體樣式 --- */

.ad-header {
    max-width: 970px;
    margin: 1rem auto;
}

.ad-sidebar {
    position: fixed;
    right: 10px;
    top: 150px;
    width: 160px;
    height: 600px;
    z-index: 100;
}

.ad-middle {
    max-width: 728px;
    margin: 2rem auto;
}

.ad-footer {
    max-width: 728px;
    margin: 1rem auto;
}

/* --- 禁用狀態下的佔位符樣式 --- */
.ad-slot.ad-disabled-placeholder {
    background-color: #efefef;
    border: 1px solid #d0d0d0;
    color: #aaa;
    font-size: 0.75rem;
    min-height: 50px;
    justify-content: flex-start;
    padding: 0.5rem;
}

.ad-slot.ad-disabled-placeholder::before {
    content: "🔒 廣告已禁用";
}

/* --- 響應式廣告樣式 --- */

/* 手機版 */
@media (max-width: 576px) {
    .ad-header {
        max-width: 100%;
        margin: 0.5rem auto;
    }
    
    .ad-sidebar {
        display: none;
    }
    
    .ad-middle {
        max-width: 100%;
        margin: 1rem auto;
    }
    
    .ad-footer {
        max-width: 100%;
        margin: 0.5rem auto;
    }
}

/* 平板 */
@media (min-width: 577px) and (max-width: 991px) {
    .ad-header {
        max-width: 728px;
    }
    
    .ad-middle {
        max-width: 728px;
    }
}

/* 桌面 */
@media (min-width: 992px) {
    .ad-sidebar {
        position: fixed;
        right: 10px;
        top: 150px;
        width: 300px;
        height: 600px;
        z-index: 100;
    }
}

/* --- 廣告加載中狀態 --- */
.ad-slot.ad-loading {
    opacity: 0.6;
    pointer-events: none;
}

.ad-slot.ad-loading::before {
    content: "正在加載廣告...";
}

/* --- 廣告加載完成狀態 --- */
.ad-slot.ad-loaded {
    border: none;
    background-color: transparent;
    min-height: auto;
}

.ad-slot.ad-loaded::before {
    content: "";
    display: none;
}

/* ========================================
   快速開關方案
   ======================================== */

/* 方案 1: 使用 HTML 根元素屬性 */
/* 在 <html data-ads-enabled="false"> 上設定 */
html[data-ads-enabled="false"] .ad-slot {
    display: none !important;
    visibility: hidden !important;
}

/* 方案 2: 使用父容器類別 */
/* 在頁面容器上添加 class="ads-disabled" */
.ads-disabled .ad-slot {
    display: none !important;
    visibility: hidden !important;
}

/* 方案 3: 使用 data 屬性 */
/* 在頁面容器上添加 data-ads="disabled" */
[data-ads="disabled"] .ad-slot {
    display: none !important;
    visibility: hidden !important;
}

/* ========================================
   打印樣式 (列印時隱藏廣告)
   ======================================== */
@media print {
    .ad-slot {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ========================================
   深色模式支持
   ======================================== */
@media (prefers-color-scheme: dark) {
    .ad-slot {
        background-color: #2a2a2a;
        border-color: #444;
        color: #666;
    }
    
    .ad-slot.ad-disabled-placeholder {
        background-color: #1a1a1a;
        border-color: #333;
    }
}
