/*
Theme Name: Core Theme
Theme URI: https://www.yzgj.shop
Author: 彥辰
Author URI: https://www.yzgj.shop
Description: Mobile-first 核心母主題，所有顏色/字體/間距由 Site Config 控制
Version: 1.0.1
License: GPLv2 or later
Text Domain: core-theme
*/

/* =====================================================
   ⚠️ 全站樣式皆依 Site Config 變數控制
   變數來源：core-style 外掛 / Site Config
===================================================== */

/* Hero */
#hero {
    text-align: center;
    position: relative;
    padding-top: var(--hero-padding-top, 60px);
    padding-bottom: var(--hero-padding-bottom, 60px);
    padding-left: var(--hero-padding-left, 20px);
    padding-right: var(--hero-padding-right, 20px);
    background: var(--hero-bg, var(--color-primary));
    color: var(--hero-color, #fff);
}

#hero h1 {
    font-size: var(--hero-title-desktop);
    margin-top: var(--hero-margin-top, 0px);
    margin-bottom: var(--hero-margin-bottom, 40px);
}

#hero p {
    font-size: var(--hero-text-desktop);
    margin-top: var(--hero-text-margin-top, 10px);
}

/* Services */
#services {
    display: grid;
    grid-template-columns: repeat(var(--services-cols-desktop,3), 1fr);
    gap: var(--services-gap-desktop, 20px);
}

#services .service-item h3 {
    font-size: var(--services-title-desktop);
    margin-bottom: var(--services-title-margin-bottom, 5px);
}

#services .service-item p {
    font-size: var(--services-text-desktop);
}

/* Categories */
#categories {
    display: grid;
    grid-template-columns: repeat(var(--categories-cols-desktop,2), 1fr);
    gap: var(--categories-gap-desktop, 15px);
}

#categories .category-item a {
    font-size: var(--categories-text-desktop);
    font-weight: var(--categories-font-weight, 600);
    color: var(--categories-color, #fff);
    text-decoration: none;
}

/* 按鈕通用 */
.cta-btn {
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    will-change: transform;
}

.cta-btn:hover {
    transform: scale(1.05);
    opacity: 0.95;
}

/* Mobile Menu Overlay */
#mobile-menu-overlay {
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

#mobile-menu-overlay.show {
    display: block;
    opacity: 1;
}

/* 圖片最大寬度 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Button cursor */
button {
    cursor: pointer;
}

/* =====================================================
   響應式（手機板）
===================================================== */
@media(max-width:480px){
    #hero h1 {
        font-size: var(--hero-title-mobile);
    }
    #hero p {
        font-size: var(--hero-text-mobile);
    }
    #services {
        grid-template-columns: repeat(var(--services-cols-mobile,1), 1fr);
        gap: var(--services-gap-mobile, 10px);
    }
    #services .service-item h3 {
        font-size: var(--services-title-mobile);
    }
    #services .service-item p {
        font-size: var(--services-text-mobile);
    }
    #categories {
        grid-template-columns: repeat(var(--categories-cols-mobile,1), 1fr);
        gap: var(--categories-gap-mobile, 10px);
    }
    #categories .category-item a {
        font-size: var(--categories-text-mobile);
    }
}