/*
Theme Name:   SNN-BRX - Bricks Builder Child Theme
Theme URI:    https://sinanisler.com/
Description:  SNN-BRX Child Theme is a purpose-built essential building suite for agencies and professionals, streamlining your Bricks Builder projects with one powerful child theme.
Author:       sinanisler
Author URI:   https://sinanisler.com/
Text Domain:  snn
Template:     bricks
Version: 0.259
*/




/* Frames 專業樣式 - AIFA 版本 */
.aifa-hero-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
    min-height: 80vh;
    display: flex;
    align-items: center;
    text-align: center;
    color: white;
}

.aifa-hero-section h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: white !important;
}

.aifa-stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.aifa-stat-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-top: 4px solid var(--primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.aifa-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.aifa-button {
    background: var(--accent) !important;
    color: white !important;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.aifa-button:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Header Basel 風格 - 已移除藍色背景 */

/* 響應式設計 */
@media (max-width: 768px) {
    .aifa-stats-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .aifa-hero-section {
        min-height: 60vh;
        padding: 2rem 1rem;
    }
}



/* AIFA Header Basel 樣式 - 基於真實 Frames 模板 */
.aifa-header-basel {
    background: var(--primary) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 9999;
}

.aifa-nav-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem var(--gutter);
    max-width: var(--content-width);
    margin: 0 auto;
}

.aifa-logo-container {
    flex-shrink: 0;
}

.aifa-logo {
    height: 50px;
    width: auto;
    transition: opacity 0.3s ease;
}

.aifa-nav-links {
    display: flex;
    gap: 2rem;
    margin: 0 auto;
}

.aifa-nav-links a {
    color: #FFFFFF !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.aifa-nav-links a:hover {
    color: var(--accent) !important;
}

.aifa-header-cta {
    background: var(--accent) !important;
    color: white !important;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.aifa-header-cta:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 響應式設計 */
@media (max-width: 768px) {
    .aifa-nav-main {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .aifa-nav-links {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .aifa-logo {
        height: 40px;
    }
}

/* 與現有垂直 header 整合 */
@media (min-width: 768px) {
    body:has(.aifa-header-basel) #brx-header {
        display: none; /* 隱藏原有的垂直 header */
    }
    
    body:has(.aifa-header-basel) #brx-content {
        margin-left: 0; /* 移除原有的 margin */
    }
}
/* AIFA 168間歇性斷食 四色系統 CSS 覆寫 */
/* 使用 ACSS 變數系統實現完美的四色整合 */

/* ===== 四色變數對應 ===== */
:root {
    /* AIFA 四色對應到 ACSS 變數 */
    --aifa-fasting: var(--primary);     /* 🔵 斷食期 = Primary (#3498DB) */
    --aifa-eating: var(--danger);       /* 🔴 進食期 = Danger (#E74C3C) */
    --aifa-success: var(--accent);      /* 🟢 成功狀態 = Accent (#27AE60) */
    --aifa-water: var(--secondary);     /* 🟡 水分提醒 = Secondary (#F1C40F) */
}

/* ===== Hero Barcelona 藍色系統 ===== */
.hero-barcelona {
    background: linear-gradient(135deg, var(--aifa-fasting) 0%, var(--primary-dark) 100%) !important;
}

.hero-barcelona__heading {
    color: #ffffff !important;
}

.hero-barcelona__accent-heading {
    color: rgba(255, 255, 255, 0.9) !important;
}

.hero-barcelona__lede {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* CTA 按鈕使用紅色進食期色彩 */
.hero-barcelona .bricks-button.bricks-background-btn--primary,
.fr-cta-links-bravo__link.bricks-background-btn--primary {
    background: var(--aifa-eating) !important;
    border-color: var(--aifa-eating) !important;
}

.hero-barcelona .bricks-button.bricks-background-btn--primary:hover,
.fr-cta-links-bravo__link.bricks-background-btn--primary:hover {
    background: var(--danger-hover) !important;
    border-color: var(--danger-hover) !important;
    transform: translateY(-2px);
}

/* ===== Feature Section Iceland 四色邊框 ===== */
.feature-card-iceland {
    position: relative;
    transition: all 0.3s ease;
}

/* 第1張卡片：藍色斷食期 */
.feature-slider-iceland .splide__slide:nth-child(1) .feature-card-iceland,
.feature-card-iceland:nth-child(1) {
    border-top: 4px solid var(--aifa-fasting) !important;
    border-left: 1px solid var(--primary-trans-20) !important;
    border-right: 1px solid var(--primary-trans-20) !important;
    border-bottom: 1px solid var(--primary-trans-20) !important;
}

/* 第2張卡片：紅色進食期 */
.feature-slider-iceland .splide__slide:nth-child(2) .feature-card-iceland,
.feature-card-iceland:nth-child(2) {
    border-top: 4px solid var(--aifa-eating) !important;
    border-left: 1px solid var(--danger-trans-20) !important;
    border-right: 1px solid var(--danger-trans-20) !important;
    border-bottom: 1px solid var(--danger-trans-20) !important;
}

/* 第3張卡片：綠色成功狀態 */
.feature-slider-iceland .splide__slide:nth-child(3) .feature-card-iceland,
.feature-card-iceland:nth-child(3) {
    border-top: 4px solid var(--aifa-success) !important;
    border-left: 1px solid var(--accent-trans-20) !important;
    border-right: 1px solid var(--accent-trans-20) !important;
    border-bottom: 1px solid var(--accent-trans-20) !important;
}

/* 第4張卡片：黃色水分提醒 (需要新增) */
.feature-slider-iceland .splide__slide:nth-child(4) .feature-card-iceland,
.feature-card-iceland:nth-child(4) {
    border-top: 4px solid var(--aifa-water) !important;
    border-left: 1px solid var(--secondary-trans-20) !important;
    border-right: 1px solid var(--secondary-trans-20) !important;
    border-bottom: 1px solid var(--secondary-trans-20) !important;
}

/* 卡片標題顏色對應 */
.feature-slider-iceland .splide__slide:nth-child(1) .feature-card-iceland__heading {
    color: var(--aifa-fasting) !important;
}

.feature-slider-iceland .splide__slide:nth-child(2) .feature-card-iceland__heading {
    color: var(--aifa-eating) !important;
}

.feature-slider-iceland .splide__slide:nth-child(3) .feature-card-iceland__heading {
    color: var(--aifa-success) !important;
}

.feature-slider-iceland .splide__slide:nth-child(4) .feature-card-iceland__heading {
    color: var(--aifa-water) !important;
}

/* 滑動標題導航四色 */
.title-slider-iceland .splide__slide:nth-child(1) .title-slider-iceland__slide-title {
    color: var(--aifa-fasting) !important;
}

.title-slider-iceland .splide__slide:nth-child(2) .title-slider-iceland__slide-title {
    color: var(--aifa-eating) !important;
}

.title-slider-iceland .splide__slide:nth-child(3) .title-slider-iceland__slide-title {
    color: var(--aifa-success) !important;
}

.title-slider-iceland .splide__slide:nth-child(4) .title-slider-iceland__slide-title {
    color: var(--aifa-water) !important;
}

/* 活動狀態強調 */
.title-slider-iceland .splide__slide.is-active .title-slider-iceland__slide-title {
    text-decoration: underline !important;
    text-underline-offset: 0.25em !important;
    opacity: 1 !important;
}

/* ===== Content Section Yankee 藍色專業權威 ===== */
.content-grid-yankee__heading {
    color: var(--aifa-fasting) !important;
}

.content-grid-yankee__content-wrapper {
    background-color: var(--primary-ultra-dark) !important;
    border-left: 4px solid var(--aifa-fasting) !important;
}

/* ===== Testimonial Section Oscar 綠色成功 ===== */
.testimonial-section-oscar {
    background: linear-gradient(135deg, var(--aifa-success) 0%, var(--accent-dark) 100%) !important;
}

.testimonial-section-oscar .fr-intro-alpha__heading {
    color: #ffffff !important;
}

.testimonial-section-oscar .fr-accent-heading {
    color: rgba(255, 255, 255, 0.9) !important;
}

.testimonial-section-oscar .fr-lede {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ===== CTA Section Uniform 紅色行動呼籲 ===== */
.cta-uniform {
    background: linear-gradient(135deg, var(--aifa-eating) 0%, var(--danger-dark) 100%) !important;
}

.cta-uniform__heading {
    color: #ffffff !important;
}

.cta-uniform__accent-heading {
    color: rgba(255, 255, 255, 0.9) !important;
}

.cta-uniform__text {
    color: rgba(255, 255, 255, 0.8) !important;
}

.cta-uniform__link {
    background: #ffffff !important;
    color: var(--aifa-eating) !important;
    padding: 15px 30px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.cta-uniform__link:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
}

/* ===== 社群媒體圖標四色 ===== */
.fr-social-alpha__icon-wrapper:nth-child(1) .fr-social-alpha__icon {
    color: var(--aifa-fasting) !important; /* Facebook 藍色 */
}

.fr-social-alpha__icon-wrapper:nth-child(2) .fr-social-alpha__icon {
    color: var(--aifa-eating) !important;  /* Instagram 紅色 */
}

.fr-social-alpha__icon-wrapper:nth-child(3) .fr-social-alpha__icon {
    color: var(--aifa-water) !important;   /* TikTok 黃色 */
}

.fr-social-alpha__icon-wrapper:nth-child(4) .fr-social-alpha__icon {
    color: var(--aifa-success) !important; /* YouTube 綠色 */
}

/* ===== 互動效果增強 ===== */
.feature-card-iceland:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
}

/* 滑動控制箭頭顏色 */
.slider-iceland-navigation .fr-slider__custom-arrow {
    color: var(--aifa-fasting) !important;
    background: rgba(52, 152, 219, 0.1) !important;
    border: 1px solid var(--primary-trans-20) !important;
}

.slider-iceland-navigation .fr-slider__custom-arrow:hover {
    background: var(--aifa-fasting) !important;
    color: #ffffff !important;
}

/* ===== 響應式調整 ===== */
@media (max-width: 767px) {
    /* 手機版保持四色系統 */
    .hero-barcelona {
        min-height: 70vh !important;
    }
    
    .feature-card-iceland {
        margin-bottom: 20px;
    }
    
    /* 手機版滑動標題居中 */
    .title-slider-iceland .splide__list {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

/* ===== AIFA Logo 強調 ===== */
.fr-vertical-header-alpha__logo img {
    filter: drop-shadow(0 2px 8px rgba(52, 152, 219, 0.3)) !important;
    transition: all 0.3s ease !important;
}

.fr-vertical-header-alpha__logo:hover img {
    filter: drop-shadow(0 4px 12px rgba(52, 152, 219, 0.5)) !important;
    transform: scale(1.05) !important;
}

/* ===== 載入動畫優化 ===== */
.feature-card-iceland,
.hero-barcelona,
.testimonial-section-oscar,
.cta-uniform {
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 延遲動畫 */
.feature-slider-iceland .splide__slide:nth-child(1) { animation-delay: 0.1s; }
.feature-slider-iceland .splide__slide:nth-child(2) { animation-delay: 0.2s; }
.feature-slider-iceland .splide__slide:nth-child(3) { animation-delay: 0.3s; }
.feature-slider-iceland .splide__slide:nth-child(4) { animation-delay: 0.4s; }

/* ===== 專業醫療權威強調 ===== */
.content-section-yankee {
    position: relative;
}

.content-section-yankee::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--aifa-fasting) 25%, 
        var(--aifa-eating) 50%, 
        var(--aifa-success) 75%, 
        var(--aifa-water) 100%
    );
}

/* 統計數據四色強調 */
.social-proof-yankee__card:nth-child(1) .social-proof-yankee__card-value {
    color: var(--aifa-fasting) !important;
}

.social-proof-yankee__card:nth-child(2) .social-proof-yankee__card-value {
    color: var(--aifa-eating) !important;
}

.social-proof-yankee__card:nth-child(3) .social-proof-yankee__card-value {
    color: var(--aifa-success) !important;
}

.social-proof-yankee__card:nth-child(4) .social-proof-yankee__card-value {
    color: var(--aifa-water) !important;
}