/* Global readability & FAQ fixes */
:root {
    --atrahi-text-strong: #0f172a;
    --atrahi-text: #1f2937;
    --atrahi-text-muted: #6b7280;
    --atrahi-text-on-dark: #e5e7eb;
    --atrahi-text-on-dark-strong: #f9fafb;
    --atrahi-text-on-dark-muted: #9ca3af;
}

body, input, textarea, select, button {
    font-family: var(--ath-font-primary);
    color: var(--atrahi-text);
}

/* FAQ blocks: better contrast */
.faq-item {
    border: 1px solid rgba(0,0,0,0.06);
    background: #ffffff;
}
.faq-item.active {
    border-color: #b99d63;
    background: #fffdf7;
}
.faq-question {
    color: var(--atrahi-text-strong);
}
.faq-question span:first-child {
    color: var(--atrahi-text-strong);
}
.faq-icon {
    background: #f3f4f6;
    color: #6b7280;
}
.faq-item.active .faq-icon {
    background: #b99d63;
    color: #ffffff;
}
.faq-answer, .faq-answer p {
    color: var(--atrahi-text);
}
.faq-question,
.faq-answer,
.faq-question span:first-child,
.faq,
.faq * {
    font-family: var(--ath-font-primary) !important;
}

/* Dark-surface contrast fixes (sitewide) */
.dark-section,
.section-dark,
.bg-dark,
.bg-dark-gradient,
.contact-page,
.contact-hero,
.contact-main,
.contact-faq,
.footer-main,
.footer-bottom,
.footer-cta-section,
.site-footer,
.projects-hero,
.portfolio-hero,
.service-hero,
.blog-hero,
.news-hero,
.page-hero,
.hero-dark,
.cta-section-dark,
.portfolio-modern-page,
.services-main-page {
    color: var(--atrahi-text-on-dark);
}

.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark-gradient h1, .bg-dark-gradient h2, .bg-dark-gradient h3,
.contact-page h1, .contact-page h2, .contact-page h3,
.footer-main h1, .footer-main h2, .footer-main h3,
.footer-cta-section h1, .footer-cta-section h2, .footer-cta-section h3,
.projects-hero h1, .projects-hero h2, .projects-hero h3,
.portfolio-hero h1, .portfolio-hero h2, .portfolio-hero h3,
.service-hero h1, .service-hero h2, .service-hero h3,
.blog-hero h1, .blog-hero h2, .blog-hero h3 {
    color: var(--atrahi-text-on-dark-strong);
}

.dark-section p, .section-dark p, .bg-dark p, .bg-dark-gradient p,
.contact-page p, .footer-main p, .footer-cta-section p,
.projects-hero p, .portfolio-hero p, .service-hero p, .blog-hero p {
    color: var(--atrahi-text-on-dark);
}

.dark-section .text-muted,
.section-dark .text-muted,
.bg-dark .text-muted,
.contact-page .text-muted,
.footer-main .text-muted,
.projects-hero .text-muted {
    color: var(--atrahi-text-on-dark-muted);
}

/* Breadcrumbs / small muted texts */
.breadcrumb, .breadcrumb a, .breadcrumb .current,
.woo-result-count, .woocommerce-result-count {
    color: var(--atrahi-text-muted);
}

/* Woo product cards text */
.woo-product-card, .product-card-content, .product-card-content * {
    color: var(--atrahi-text);
}
.product-title a { color: var(--atrahi-text-strong); }
.product-title a:hover { color: var(--atrahi-gold); }
.product-category { color: var(--atrahi-text-muted); }
.product-category:hover { color: var(--atrahi-gold); }

/* Pagination & filter select */
.woo-ordering select { color: var(--atrahi-text-strong); }

/* Ensure dark sections keep readable text */
.projects-hero .hero-desc { color: #d1d5db; }
.projects-hero .hero-title { color: #ffffff; }

/* Single post readability */
body.single-post .single-post-page,
body.single-post .single-post-page .site-main {
    background: #ffffff;
}
body.single-post .single-post {
    max-width: 920px;
    margin: 0 auto;
    padding: 12px 20px 60px;
}
body.single-post .single-post .entry-content {
    font-size: 1.02rem;
    line-height: 1.75;
    color: #1f2937;
}
body.single-post .single-post .entry-content p { margin: 0 0 1.1em; }
body.single-post .single-post .entry-content h2,
body.single-post .single-post .entry-content h3,
body.single-post .single-post .entry-content h4 {
    margin: 1.6em 0 0.6em;
    line-height: 1.35;
    color: #0f172a;
}
body.single-post .single-post .entry-content ul,
body.single-post .single-post .entry-content ol {
    margin: 0.2em 0 1.2em 1.4em;
    padding-left: 0;
}
body.single-post .single-post .entry-content li { margin: 0.3em 0; }
body.single-post .single-post .entry-content a { color: #b99d63; }
body.single-post .single-post .entry-content a:hover { color: #8c7847; }
body.single-post .single-post .entry-content blockquote {
    margin: 1.5em 0;
    padding: 1.2em 1.4em;
    background: #f8f8f8;
    border-left: 4px solid #b99d63;
    color: #374151;
}

/* Table of contents compact */
.table-of-contents { border: 1px solid #e5e7eb; background: #fff; border-radius: 12px; padding: 16px; }
.table-of-contents .toc-title { color: #0f172a; }
.table-of-contents .toc-list { margin: 10px 0 0 0; padding: 0; list-style: none; }
.table-of-contents .toc-list li { margin: 6px 0; }
.table-of-contents .toc-list a { color: #4b5563; }
.table-of-contents .toc-list a:hover { color: #b99d63; }

/* Sidebar spacing */
.single-post .sidebar { gap: 16px; }
.single-post .sidebar .widget { border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.06); border: 1px solid #f1f5f9; }
.single-post .widget-title { color: #0f172a; }

/* Share row spacing */
.single-post .post-share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.single-post .post-share a { color: #6b7280; }
.single-post .post-share a:hover { color: #b99d63; }

/* -------------------------------------------------
   Vietnamese-safe typography overrides (anti-missing-accent)
   ------------------------------------------------- */
:root {
    --ath-font-primary: 'Be Vietnam Pro', 'Inter', 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
    --ath-font-heading: var(--ath-font-primary);
}

body, p, span, li, a, button, input, select, textarea, label, small, strong, b {
    font-family: var(--ath-font-primary) !important;
    font-feature-settings: "liga", "clig", "kern";
}

h1, h2, h3, h4, h5, h6,
.section-title, .section-title-v2,
.hero-title, .hero-title-v2, .hero-subtitle-v2,
.page-title, .entry-title, .product_title,
.woocommerce-loop-product__title, .widget-title,
.site-title, .banner-title, .heading, .heading-title {
    font-family: var(--ath-font-primary) !important;
    letter-spacing: -0.01em;
}

/* Override leftover serif headings on legacy sections */
.service-hero h1, .service-hero h2,
.pricing-card-v2 h3, .filter-btn, .cta-button,
.faq-question, .faq-answer, .breadcrumb, .nav-link,
.portfolio-card-overlay h3 {
    font-family: var(--ath-font-primary) !important;
}

/* Make homepage wrapper inherit new stack */
.homepage, .homepage * {
    font-family: var(--ath-font-primary) !important;
}

/* Woo price text and badges */
.price, .amount, .woocommerce-Price-amount, .woocommerce-Price-currencySymbol,
.onsale, .woocommerce-loop-category__title, .woocommerce-loop-product__title {
    font-family: var(--ath-font-primary) !important;
}

/* Woo archive fallback to avoid ultra-narrow cards */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    margin: 0 !important;
    width: 100% !important;
}
@supports not (display: grid) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        flex: 1 1 300px !important;
        max-width: 33.33%;
    }
}

/* Single post layout width & balance */
.post-layout {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 48px;
    max-width: 1280px;
    padding: 0 16px;
}
.post-main-content {
    max-width: none;
}
.post-content-wrapper {
    padding: 60px 0 90px;
}
.single-post .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
@media (max-width: 1024px) {
    .post-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .post-content-wrapper {
        padding: 40px 0 70px;
    }
}