/**

 * Color System Fix - ATRAHI DESIGN

 * Sửa các lỗi màu cơ bản cho toàn bộ website

 * 

 * @package ATH_ATRAHI_DESIGN

 * @version 3.1.0

 */



/* ============================================

   GLOBAL COLOR FIXES

   ============================================ */



/* Đảm bảo text luôn đọc được */

:root {

    /* Text Colors - High Contrast */

    --text-on-dark: #ffffff;

    --text-on-dark-secondary: #e0e0e0;

    --text-on-dark-muted: #b0b0b0;

    

    --text-on-light: #1a1a1a;

    --text-on-light-secondary: #444444;

    --text-on-light-muted: #666666;

    

    /* Background Colors */

    --bg-dark-primary: #0f0f0f;

    --bg-dark-secondary: #1a1a1a;

    --bg-dark-card: #1e1e1e;

    --bg-dark-elevated: #252525;

    

    --bg-light-primary: #ffffff;

    --bg-light-secondary: #f8f9fa;

    --bg-light-card: #ffffff;

    

    /* Accent Colors */

    --accent-gold: #b99d63;

    --accent-gold-hover: #d4b877;

    --accent-gold-dark: #9a7f4c;

    

    /* Border Colors */

    --border-dark: #333333;

    --border-light: #e5e5e5;

}



/* ============================================

   DARK THEME PAGES (Projects, Products)

   ============================================ */

.product-landing-page,

.single-product,

.woocommerce-page,

.portfolio-page-v4,

.page-template-page-cong-trinh,

.page-template-page-cong-trinh-da-thuc-hien {

    background-color: var(--bg-dark-primary);

    color: var(--text-on-dark);

}



/* All text on dark backgrounds */

.product-landing-page h1,

.product-landing-page h2,

.product-landing-page h3,

.product-landing-page h4,

.product-landing-page h5,

.product-landing-page h6,

.portfolio-page-v4 h1,

.portfolio-page-v4 h2,

.portfolio-page-v4 h3 {

    color: var(--text-on-dark) !important;

}



.product-landing-page p,

.product-landing-page li,

.portfolio-page-v4 p {

    color: var(--text-on-dark-secondary) !important;

}



/* Links on dark backgrounds */

.product-landing-page a:not(.btn):not(.cta-btn),

.portfolio-page-v4 a:not(.btn):not(.cta-btn) {

    color: var(--accent-gold);

}



.product-landing-page a:not(.btn):not(.cta-btn):hover,

.portfolio-page-v4 a:not(.btn):not(.cta-btn):hover {

    color: var(--accent-gold-hover);

}



/* Breadcrumb on dark */

.product-landing-page .product-breadcrumb a,

.portfolio-page-v4 .breadcrumb-v4 a {

    color: var(--text-on-dark-muted) !important;

}



.product-landing-page .product-breadcrumb a:hover,

.portfolio-page-v4 .breadcrumb-v4 a:hover {

    color: var(--accent-gold) !important;

}



.product-landing-page .product-breadcrumb .current,

.portfolio-page-v4 .breadcrumb-v4 .current {

    color: var(--accent-gold) !important;

}



/* ============================================

   LIGHT THEME PAGES (Blog, News)

   ============================================ */

.single-post .entry-content,

.blog-page .post-card-content,

.archive.category .post-card-content {

    background-color: var(--bg-light-primary);

    color: var(--text-on-light);

}



.single-post .entry-content h1,

.single-post .entry-content h2,

.single-post .entry-content h3,

.single-post .entry-content h4 {

    color: var(--text-on-light) !important;

}



.single-post .entry-content p,

.single-post .entry-content li {

    color: var(--text-on-light-secondary) !important;

}



/* ============================================

   CARD COMPONENTS

   ============================================ */



/* Project Cards - Dark Theme */

.project-card-v4,

.woocommerce ul.products li.product {

    background: var(--bg-dark-card);

    border: 1px solid var(--border-dark);

}



.project-card-v4 .project-card-title,

.woocommerce ul.products li.product .woocommerce-loop-product__title {

    color: var(--text-on-dark) !important;

}



.project-card-v4 .project-card-meta,

.project-card-v4 .project-meta-item {

    color: var(--text-on-dark-muted) !important;

}



/* Blog Post Cards - Light Theme */

.blog .post-card,

.archive.category .post-card,

.search-results .post-card {

    background: var(--bg-light-card);

    border: 1px solid var(--border-light);

}



.blog .post-card-title,

.archive.category .post-card-title {

    color: var(--text-on-light) !important;

}



.blog .post-card-excerpt,

.archive.category .post-card-excerpt {

    color: var(--text-on-light-secondary) !important;

}



/* ============================================

   INFO CARDS ON PRODUCT PAGE

   ============================================ */

.product-landing-page .info-card {

    background: var(--bg-dark-elevated);

    border: 1px solid var(--border-dark);

}



.product-landing-page .info-card-label {

    color: var(--text-on-dark-muted) !important;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.product-landing-page .info-card-value {

    color: var(--text-on-dark) !important;

    font-size: 1.15rem;

    font-weight: 600;

}



.product-landing-page .info-card-icon svg {

    color: var(--accent-gold) !important;

}



/* ============================================

   SECTION TITLES

   ============================================ */

.product-landing-page .section-title,

.portfolio-page-v4 .section-title-v4 {

    color: var(--text-on-dark) !important;

    border-bottom: 2px solid var(--accent-gold);

}



.single-post .section-title,

.blog-page .section-title {

    color: var(--text-on-light) !important;

    border-bottom: 2px solid var(--accent-gold);

}



/* ============================================

   BUTTONS

   ============================================ */



/* Primary Button (Gold) */

.btn-primary,

.cta-btn,

.woocommerce .button,

.project-cta-section .cta-btn {

    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-hover) 100%);

    color: var(--bg-dark-primary) !important;

    border: none;

    font-weight: 600;

}



.btn-primary:hover,

.cta-btn:hover,

.woocommerce .button:hover {

    background: linear-gradient(135deg, var(--accent-gold-hover) 0%, var(--accent-gold) 100%);

    color: var(--bg-dark-primary) !important;

}



/* Secondary Button (Dark) */

.btn-secondary,

.blog-cta-section .cta-btn {

    background: var(--bg-dark-primary);

    color: var(--text-on-dark) !important;

}



.btn-secondary:hover,

.blog-cta-section .cta-btn:hover {

    background: var(--bg-dark-secondary);

}



/* ============================================

   NAVIGATION

   ============================================ */



/* Sticky Nav on Product Page */

.product-sticky-nav {

    background: var(--bg-dark-secondary);

    border-bottom: 1px solid var(--border-dark);

}



.sticky-nav-link {

    color: var(--text-on-dark) !important;

}



.sticky-nav-link:hover,

.sticky-nav-link.active {

    color: var(--accent-gold) !important;

    border-bottom-color: var(--accent-gold);

}



/* ============================================

   FILTER COMPONENTS

   ============================================ */



/* Category Filter Tabs */

.filter-tabs-v4 a,

.category-filter a {

    color: var(--text-on-dark-secondary);

    background: var(--bg-dark-card);

    border: 1px solid var(--border-dark);

}



.filter-tabs-v4 a:hover,

.filter-tabs-v4 a.active,

.category-filter a:hover,

.category-filter a.active {

    color: var(--bg-dark-primary);

    background: var(--accent-gold);

    border-color: var(--accent-gold);

}



/* ============================================

   FORM INPUTS

   ============================================ */



/* On Dark Background */

.product-landing-page input,

.product-landing-page textarea,

.product-landing-page select,

.portfolio-page-v4 input,

.portfolio-page-v4 select {

    background: var(--bg-dark-card) !important;

    border: 1px solid var(--border-dark) !important;

    color: var(--text-on-dark) !important;

}



.product-landing-page select option,

.portfolio-page-v4 select option {

    background: #1a1a1a !important;

    color: #ffffff !important;

}



.product-landing-page input::placeholder,

.portfolio-page-v4 input::placeholder {

    color: var(--text-on-dark-muted);

}



/* On Light Background */

.single-post input,

.single-post textarea,

.blog-page input {

    background: var(--bg-light-primary);

    border: 1px solid var(--border-light);

    color: var(--text-on-light);

}



/* ============================================

   SIDEBAR WIDGETS (Blog)

   ============================================ */

.post-sidebar .sidebar-widget {

    background: var(--bg-dark-card);

    border: 1px solid var(--border-dark);

    border-radius: 12px;

    padding: 24px;

    margin-bottom: 24px;

}



.post-sidebar .widget-title {

    color: var(--accent-gold) !important;

    font-size: 1.1rem;

    font-weight: 600;

    margin-bottom: 16px;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--border-dark);

}



.post-sidebar .sidebar-widget a {

    color: var(--text-on-dark-secondary);

}



.post-sidebar .sidebar-widget a:hover {

    color: var(--accent-gold);

}



/* CTA Widget */

.post-sidebar .cta-widget {

    background: linear-gradient(135deg, var(--bg-dark-elevated) 0%, var(--bg-dark-card) 100%);

    border: 1px solid var(--accent-gold);

}



.post-sidebar .cta-widget h3 {

    color: var(--text-on-dark) !important;

}



.post-sidebar .cta-widget p {

    color: var(--text-on-dark-secondary) !important;

}



/* ============================================

   GALLERY IMAGES

   ============================================ */

.product-landing-page .gallery-item,

.portfolio-page-v4 .project-card-image {

    border-radius: 12px;

    overflow: hidden;

}



.product-landing-page .gallery-item::before,

.portfolio-page-v4 .project-card-image::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);

    opacity: 0;

    transition: opacity 0.3s ease;

    pointer-events: none;

    z-index: 1;

}



.product-landing-page .gallery-item:hover::before,

.portfolio-page-v4 .project-card-image:hover::before {

    opacity: 1;

}



/* ============================================

   FOOTER SPECIFIC FIXES

   ============================================ */

.site-footer {

    background: var(--bg-dark-primary);

    color: var(--text-on-dark);

    border-top: 1px solid var(--border-dark);

}



.site-footer h3,

.site-footer h4,

.site-footer .widget-title {

    color: var(--text-on-dark) !important;

}



.site-footer p,

.site-footer li {

    color: var(--text-on-dark-secondary) !important;

}



.site-footer a {

    color: var(--text-on-dark-secondary);

}



.site-footer a:hover {

    color: var(--accent-gold);

}



/* ============================================

   RESPONSIVE FIXES

   ============================================ */

@media (max-width: 768px) {

    .product-landing-page .info-card {

        padding: 16px;

    }

    

    .product-landing-page .info-card-value {

        font-size: 1rem;

    }

    

    .post-sidebar .sidebar-widget {

        padding: 16px;

    }

}



/* ============================================

   PRINT STYLES

   ============================================ */

@media print {

    .product-landing-page,

    .portfolio-page-v4 {

        background: white !important;

        color: black !important;

    }

    

    .product-landing-page h1,

    .product-landing-page h2,

    .product-landing-page p {

        color: black !important;

    }

}