/**

 * Mega Menu with Images & Color/Responsive Fixes

 * ATRAHI Design Theme

 * Fix: màu chữ trùng màu nền, responsive, mega-menu images

 */



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

   MEGA MENU WITH THUMBNAIL IMAGES

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



/* Mega Menu Container - Improved */

.mega-menu {

    position: absolute;

    top: calc(100% + 8px);

    left: 50%;

    transform: translateX(-50%) translateY(15px);

    width: min(880px, 95vw);

    background: rgba(255, 255, 255, 0.99);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-radius: 20px;

    box-shadow: 

        0 25px 50px -12px rgba(0, 0, 0, 0.25),

        0 0 0 1px rgba(0, 0, 0, 0.05),

        0 0 40px rgba(185, 157, 99, 0.1);

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 1000;

    padding-top: 12px;

}



.nav-item.has-mega-menu:hover .mega-menu,

.nav-item.has-mega-menu:focus-within .mega-menu {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(8px);

}



/* Arrow pointer */

.mega-menu::before {

    content: '';

    position: absolute;

    top: -8px;

    left: 50%;

    width: 16px;

    height: 16px;

    background: rgba(255, 255, 255, 0.99);

    transform: translateX(-50%) rotate(45deg);

    border-radius: 3px;

    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.03);

}



.mega-menu-inner {

    padding: 1.5rem;

}



/* Grid Layout */

.mega-menu-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

}



/* Mega Item with Thumbnail */

.mega-item {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 14px;

    border-radius: 14px;

    text-decoration: none;

    transition: all 0.3s ease;

    border: 1px solid rgba(0, 0, 0, 0.04);

    background: transparent;

    position: relative;

    overflow: hidden;

}



.mega-item::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(185, 157, 99, 0.08), rgba(185, 157, 99, 0.02));

    opacity: 0;

    transition: opacity 0.3s ease;

}



.mega-item:hover {

    background: linear-gradient(135deg, rgba(185, 157, 99, 0.1), rgba(255, 255, 255, 0.95));

    border-color: rgba(185, 157, 99, 0.25);

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);

}



.mega-item:hover::before {

    opacity: 1;

}



/* Thumbnail Image */

.mega-item-thumb {

    position: relative;

    z-index: 1;

    width: 72px;

    height: 72px;

    border-radius: 12px;

    overflow: hidden;

    flex-shrink: 0;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.mega-item-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.mega-item:hover .mega-item-thumb {

    transform: scale(1.05);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}



.mega-item:hover .mega-item-thumb img {

    transform: scale(1.1);

}



/* Fallback Icon (keeping compatibility) */

.mega-item-icon {

    position: relative;

    z-index: 1;

    width: 56px;

    height: 56px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    flex-shrink: 0;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.mega-item:hover .mega-item-icon {

    transform: scale(1.08);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}



/* Content */

.mega-item-content {

    position: relative;

    z-index: 1;

    flex: 1;

    min-width: 0;

}



.mega-item-content h4 {

    font-size: 0.95rem;

    font-weight: 700;

    color: #1a1a1a;

    margin: 0 0 6px;

    display: flex;

    align-items: center;

    gap: 6px;

    transition: color 0.2s ease;

    line-height: 1.3;

}



.mega-item:hover .mega-item-content h4 {

    color: #8a7445;

}



.mega-item-content h4 .arrow {

    opacity: 0;

    transform: translateX(-8px);

    transition: all 0.25s ease;

    color: #b99d63;

    font-weight: 400;

}



.mega-item:hover .mega-item-content h4 .arrow {

    opacity: 1;

    transform: translateX(0);

}



.mega-item-content p {

    font-size: 0.825rem;

    color: #6b7280;

    margin: 0;

    line-height: 1.45;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



/* CTA Section */

.mega-menu-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: 1rem 1.25rem;

    margin-top: 1rem;

    background: linear-gradient(135deg, rgba(185, 157, 99, 0.12), rgba(185, 157, 99, 0.05));

    border-radius: 14px;

    border: 1px dashed rgba(185, 157, 99, 0.3);

}



.mega-cta-content {

    flex: 1;

}



.mega-cta-content p {

    margin: 0;

    font-size: 0.875rem;

    color: #374151;

}



.mega-cta-content strong {

    color: #8a7445;

}



.mega-cta-btn {

    padding: 0.7rem 1.25rem;

    background: linear-gradient(135deg, #b99d63, #9a8352);

    color: #ffffff !important;

    border-radius: 12px;

    font-weight: 700;

    font-size: 0.875rem;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(185, 157, 99, 0.35);

    white-space: nowrap;

}



.mega-cta-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(185, 157, 99, 0.45);

    color: #ffffff !important;

}



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

   COLOR CONTRAST FIXES - Text vs Background

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



/* Fix: Text color matching background */

.section,

section,

[class*="section"] {

    --section-text: #1a1a1a;

    --section-text-secondary: #4b5563;

    --section-text-muted: #6b7280;

}



/* Dark backgrounds need light text */

.bg-dark,

.footer-main,

[style*="background: #1a1a1a"],

[style*="background: var(--dark)"],

[style*="background-color: #1a1a1a"],

[style*="background: linear-gradient"][style*="#1a1a1a"],

.section-dark {

    --section-text: #ffffff;

    --section-text-secondary: rgba(255, 255, 255, 0.85);

    --section-text-muted: rgba(255, 255, 255, 0.65);

}



.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,

.footer-main h1, .footer-main h2, .footer-main h3, .footer-main h4, .footer-main h5, .footer-main h6,

.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6 {

    color: #ffffff !important;

}



.bg-dark p, .footer-main p, .section-dark p {

    color: rgba(255, 255, 255, 0.8) !important;

}



/* Gold backgrounds */

.bg-gold,

[style*="background: var(--gold)"],

[style*="background: #b99d63"],

[style*="background: linear-gradient"][style*="#b99d63"],

.footer-cta-section {

    --section-text: #ffffff;

    --section-text-secondary: rgba(255, 255, 255, 0.9);

}



.bg-gold h1, .bg-gold h2, .bg-gold h3, .bg-gold h4,

.footer-cta-section h1, .footer-cta-section h2, .footer-cta-section h3, .footer-cta-section h4 {

    color: #ffffff !important;

}



.bg-gold p, .footer-cta-section p {

    color: rgba(255, 255, 255, 0.9) !important;

}



/* Light/Gray backgrounds */

.bg-light,

.bg-gray,

[style*="background: #f8f9fa"],

[style*="background: var(--bg-light)"] {

    --section-text: #1a1a1a;

    --section-text-secondary: #374151;

}



/* Ensure section headings are visible */

.section-heading,

.section-title,

.section h2,

.section h3,

[class*="section"] h2,

[class*="section"] h3 {

    color: var(--section-text, #1a1a1a);

}



.section-subtitle,

.section-description,

.section p,

[class*="section"] p {

    color: var(--section-text-secondary, #4b5563);

}



/* Badge/Tag Text Fixes */

.badge,

.tag,

.label,

[class*="badge"],

[class*="tag"] {

    font-weight: 600;

}



/* Light badge on dark bg */

.bg-dark .badge,

.bg-dark .tag,

.section-dark .badge {

    background: rgba(255, 255, 255, 0.15);

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



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

   HOMEPAGE SECTIONS - COLOR FIXES

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



/* Hero Section */

.hero-section,

#hero {

    color: #1a1a1a;

}



.hero-section h1,

#hero h1 {

    color: #1a1a1a;

}



.hero-section p,

#hero p {

    color: #4b5563;

}



/* Service Cards on any background */

.service-card,

.service-item,

[class*="service-card"] {

    background: #ffffff;

    color: #1a1a1a;

}



.service-card h3,

.service-card h4,

.service-item h3,

.service-item h4 {

    color: #1a1a1a !important;

}



.service-card p,

.service-item p {

    color: #6b7280 !important;

}



/* Cards on dark backgrounds */

.bg-dark .card,

.section-dark .card,

.footer-main .card {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.bg-dark .card h3,

.bg-dark .card h4,

.section-dark .card h3,

.section-dark .card h4 {

    color: #ffffff !important;

}



.bg-dark .card p,

.section-dark .card p {

    color: rgba(255, 255, 255, 0.75) !important;

}



/* Process Steps */

.process-step,

.step-item,

[class*="step"] {

    color: #1a1a1a;

}



.process-step h3,

.process-step h4,

.step-item h3,

.step-item h4 {

    color: #1a1a1a !important;

}



.process-step p,

.step-item p {

    color: #6b7280 !important;

}



/* FAQ Section */

.faq-item,

.accordion-item {

    background: #ffffff;

}



.faq-question,

.accordion-header,

.accordion-button {

    color: #1a1a1a !important;

    font-weight: 600;

}



.faq-answer,

.accordion-body {

    color: #4b5563 !important;

}



/* Portfolio/Project Cards */

.portfolio-card,

.project-card,

[class*="portfolio-item"] {

    background: #ffffff;

}



.portfolio-card h3,

.portfolio-card h4,

.project-card h3,

.project-card h4 {

    color: #1a1a1a !important;

}



.portfolio-card p,

.project-card p {

    color: #6b7280 !important;

}



/* Form elements - scoped to light background only */

.page-template-default input,

.page-template-default textarea,

.page-template-default select {

    color: #1a1a1a;

    background: #ffffff;

}



input::placeholder,

textarea::placeholder {

    color: #9ca3af !important;

}



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

   RESPONSIVE FIXES

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



/* Large Tablets & Small Desktops */

@media (max-width: 1200px) {

    .mega-menu {

        width: min(780px, 92vw);

    }

    

    .mega-item-thumb {

        width: 64px;

        height: 64px;

    }

    

    .mega-item-content h4 {

        font-size: 0.9rem;

    }

    

    .mega-item-content p {

        font-size: 0.8rem;

    }

}



/* Tablets */

@media (max-width: 1024px) {

    .mega-menu {

        width: min(700px, 90vw);

        left: 50%;

    }

    

    .mega-menu-inner {

        padding: 1.25rem;

    }

    

    .mega-menu-grid {

        gap: 10px;

    }

    

    .mega-item {

        padding: 12px;

        gap: 12px;

    }

    

    .mega-item-thumb {

        width: 56px;

        height: 56px;

        border-radius: 10px;

    }

    

    .mega-item-content h4 {

        font-size: 0.875rem;

    }

    

    .mega-item-content p {

        font-size: 0.75rem;

        -webkit-line-clamp: 1;

    }

    

    .mega-menu-cta {

        flex-direction: column;

        text-align: center;

        gap: 0.75rem;

        padding: 1rem;

    }

    

    .mega-cta-btn {

        width: 100%;

        justify-content: center;

        text-align: center;

    }

}



/* Mobile - Hide mega menu, show mobile nav */

@media (max-width: 768px) {

    .mega-menu {

        display: none !important;

    }

    

    .nav-center {

        display: none;

    }

    

    .mobile-toggle {

        display: flex !important;

    }

    

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

       MOBILE NAV DARK THEME COLOR FIXES

       Mobile nav has dark bg (#0f0f0f) at 768px

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

    

    /* Container dark bg */

    .mobile-nav-container {

        background: #0f0f0f !important;

    }

    

    /* Header */

    .mobile-nav-header {

        background: #141414 !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

    }

    

    .mobile-logo img {

        filter: brightness(0) invert(1);

    }

    

    .mobile-close {

        background: rgba(255, 255, 255, 0.1) !important;

        color: #ffffff !important;

        border: 1px solid rgba(255, 255, 255, 0.1);

    }

    

    .mobile-close:hover {

        background: #b99d63 !important;

        color: #ffffff !important;

    }

    

    /* Search */

    .mobile-search {

        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

    }

    

    .mobile-search form {

        background: rgba(255, 255, 255, 0.08) !important;

        border: 1px solid rgba(255, 255, 255, 0.1) !important;

    }

    

    .mobile-search form:focus-within {

        border-color: #b99d63 !important;

        background: rgba(255, 255, 255, 0.12) !important;

    }

    

    .mobile-search-input {

        color: #ffffff !important;

    }

    

    .mobile-search-input::placeholder {

        color: rgba(255, 255, 255, 0.5) !important;

    }

    

    .mobile-search-btn {

        color: rgba(255, 255, 255, 0.6) !important;

    }

    

    .mobile-search-btn:hover {

        color: #b99d63 !important;

    }

    

    /* Menu items - WHITE text on dark bg */

    .mobile-menu-list > li > a,

    .mobile-menu-list > li > .menu-item-wrapper a,

    .mobile-menu-list > li > .submenu-toggle {

        color: #ffffff !important;

    }

    

    .mobile-menu-list > li > a:hover,

    .mobile-menu-list > li > .menu-item-wrapper a:hover,

    .mobile-menu-list > li > .submenu-toggle:hover {

        color: #b99d63 !important;

        background: rgba(185, 157, 99, 0.1) !important;

    }

    

    .mobile-menu-list > li.active > a,

    .mobile-menu-list > li.active > .menu-item-wrapper a {

        color: #b99d63 !important;

        border-left-color: #b99d63 !important;

    }

    

    .menu-icon {

        color: rgba(255, 255, 255, 0.6) !important;

    }

    

    /* Submenu toggle button icon */

    .submenu-toggle svg {

        color: rgba(255, 255, 255, 0.5) !important;

    }

    

    .has-submenu.open .submenu-toggle svg,
    .has-submenu.active .submenu-toggle svg {

        color: #b99d63 !important;

    }

    

    /* Submenu - slightly lighter dark bg */

    .mobile-submenu {

        background: rgba(255, 255, 255, 0.04) !important;

    }

    

    .mobile-submenu li a {

        color: rgba(255, 255, 255, 0.8) !important;

    }

    

    .mobile-submenu li a:hover {

        color: #b99d63 !important;

        background: rgba(185, 157, 99, 0.1) !important;

    }

    

    /* CTA section */

    .mobile-nav-cta {

        background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent) !important;

        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;

    }

    

    .mobile-cta-phone {

        background: linear-gradient(135deg, #b99d63, #9a8352) !important;

        color: #ffffff !important;

    }

    

    .mobile-cta-phone span {

        color: #ffffff !important;

    }

    

    .mobile-cta-btn.messenger {

        background: linear-gradient(135deg, #0084ff, #0066cc) !important;

        color: #ffffff !important;

    }

    

    .mobile-cta-btn.zalo {

        background: linear-gradient(135deg, #0068ff, #0052cc) !important;

        color: #ffffff !important;

    }

    

    /* Footer */

    .mobile-nav-footer {

        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;

    }

    

    .mobile-nav-footer p {

        color: rgba(255, 255, 255, 0.5) !important;

    }

    

    .mobile-socials a {

        background: rgba(255, 255, 255, 0.08) !important;

        color: rgba(255, 255, 255, 0.7) !important;

        border: 1px solid rgba(255, 255, 255, 0.08);

    }

    

    .mobile-socials a:hover {

        background: #b99d63 !important;

        color: #ffffff !important;

    }

    

    /* Section spacing for mobile */

    .section,

    section {

        padding: 3rem 0;

    }

    

    /* Footer mobile fixes */

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .footer-brand {

        text-align: center;

    }

    

    .footer-links {

        text-align: center;

    }

    

    .footer-contact {

        text-align: center;

    }

    

    .footer-socials {

        justify-content: center;

    }

}



/* Small Mobile */

@media (max-width: 480px) {

    .section,

    section {

        padding: 2.5rem 0;

    }

    

    .container {

        padding-left: 1rem;

        padding-right: 1rem;

    }

    

    /* Smaller headings on mobile */

    h1 {

        font-size: clamp(1.75rem, 5vw, 2.5rem);

    }

    

    h2 {

        font-size: clamp(1.5rem, 4vw, 2rem);

    }

    

    h3 {

        font-size: clamp(1.25rem, 3.5vw, 1.5rem);

    }

    

    /* Mobile nav spacing */

    .mobile-menu-list > li > a,

    .mobile-menu-list > li > .submenu-toggle {

        padding: 14px 12px;

        font-size: 15px;

    }

    

    .mobile-submenu li a {

        padding: 12px 12px 12px 2.5rem;

        font-size: 14px;

    }

    

    .mobile-nav-cta {

        padding: 1rem;

    }

    

    .mobile-cta-phone {

        padding: 1rem;

        font-size: 1rem;

    }

    

    .mobile-cta-buttons {

        grid-template-columns: 1fr;

        gap: 0.5rem;

    }

}



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

   BUTTON & LINK CONTRAST FIXES

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



/* Primary buttons - always visible */

.btn-primary,

.btn,

[class*="btn-primary"] {

    background: linear-gradient(135deg, #b99d63, #9a8352);

    color: #ffffff !important;

    border: none;

    font-weight: 600;

    transition: all 0.3s ease;

}



.btn-primary:hover,

.btn:hover,

[class*="btn-primary"]:hover {

    background: linear-gradient(135deg, #a08850, #8a7445);

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(185, 157, 99, 0.35);

}



/* Outline buttons */

.btn-outline,

[class*="btn-outline"] {

    background: transparent;

    color: #b99d63 !important;

    border: 2px solid #b99d63;

    font-weight: 600;

}



.btn-outline:hover,

[class*="btn-outline"]:hover {

    background: #b99d63;

    color: #ffffff !important;

}



/* White buttons on dark/gold bg */

.bg-dark .btn-outline,

.bg-gold .btn-outline,

.section-dark .btn-outline {

    color: #ffffff !important;

    border-color: #ffffff;

}



.bg-dark .btn-outline:hover,

.bg-gold .btn-outline:hover,

.section-dark .btn-outline:hover {

    background: #ffffff;

    color: #1a1a1a !important;

}



/* Link colors */

a {

    color: #b99d63;

    transition: color 0.2s ease;

}



a:hover {

    color: #9a8352;

}



/* Links on dark bg */

.bg-dark a,

.section-dark a,

.footer-main a {

    color: #d4c49a;

}



.bg-dark a:hover,

.section-dark a:hover,

.footer-main a:hover {

    color: #ffffff;

}



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

   ACCESSIBILITY IMPROVEMENTS

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



/* Focus states */

a:focus,

button:focus,

input:focus,

select:focus,

textarea:focus {

    outline: 2px solid #b99d63;

    outline-offset: 2px;

}



/* Skip links */

.skip-link {

    position: absolute;

    left: -9999px;

    top: auto;

    width: 1px;

    height: 1px;

    overflow: hidden;

}



.skip-link:focus {

    position: fixed;

    top: 10px;

    left: 10px;

    width: auto;

    height: auto;

    padding: 1rem 2rem;

    background: #b99d63;

    color: #ffffff;

    font-weight: 600;

    z-index: 10000;

    border-radius: 8px;

}



/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}



/* High contrast mode */

@media (prefers-contrast: high) {

    .mega-item {

        border: 2px solid #000000;

    }

    

    .mega-item:hover {

        border-color: #b99d63;

    }

    

    .btn-primary,

    .btn {

        border: 2px solid #000000;

    }

}