/* ==================================================
   THEME-COLORS.CSS – WHITE HEADER + RED ACCENTS
   Blocksy Child Theme – Color System
   PRODUCTION-READY – OPTIMIZED
================================================== */

/* ==================================================
   COLOR PALETTE – GLOBAL VARIABLES
   Coordinated with header.css, components.css, footer.css, custom.css
================================================== */

:root {
    /* Brand Colors */
    --brand-primary: #b80000;
    --brand-primary-hover: #000000;
    --brand-secondary: #b80000;
    --brand-primary-rgb: 184, 0, 0;

    /* Header – White Theme */
    --header-bg-light: #ffffff;
    --header-bg-hover: #f7f7f7;

    /* Text Colors */
    --text-dark: #000000;
    --text-dark-muted: #222222;
    --text-light: #ffffff;
    --text-light-muted: rgba(255, 255, 255, 0.72);

    /* Borders & Lines */
    --line-light: #e5e5e5;
    --line-dark: rgba(255, 255, 255, 0.16);
}

/* ==================================================
   HEADER – WHITE BACKGROUND
   All rows: top, main, middle
================================================== */

.ct-header {
    background-color: var(--header-bg-light) !important;
}

.ct-header [data-row="top"],
.ct-header [data-row="main"],
.ct-header [data-row="middle"] {
    background-color: var(--header-bg-light) !important;
}

.ct-header [data-row="top"] {
    border-bottom: 1px solid var(--line-light);
}

/* ==================================================
   HEADER – INNER CONTAINERS
   Keep white background, transparent content
================================================== */

.ct-header .ct-container,
.ct-header .ct-container-fluid,
.ct-header [data-items] {
    background-color: transparent !important;
}

/* ==================================================
   PRIMARY MENU – DARK TEXT ON WHITE
   Base styling + hover + active states
================================================== */

.ct-header .menu > li > a {
    color: var(--text-dark) !important;
    opacity: 1;
    font-weight: 600;
    transition: color 0.3s ease;
}

.ct-header .menu > li:hover > a,
.ct-header .menu > li.current-menu-item > a,
.ct-header .menu > li.current-menu-ancestor > a {
    color: var(--text-dark) !important;
    opacity: 1;
}

/* Hover underline effect using red accent */
.ct-header .menu > li > a::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--brand-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.ct-header .menu > li:hover > a::after,
.ct-header .menu > li > a:focus-visible::after {
    transform: scaleX(1);
}

/* ==================================================
   DROPDOWN MENU – WHITE WITH RED BORDER
   Layout: handled in header.css
   Colors: dark text on white background
================================================== */

.ct-header .menu > li > .sub-menu {
    background-color: var(--header-bg-light) !important;
    border: 1px solid var(--line-light);
    border-top: 2px solid var(--brand-primary);
}

.ct-header .sub-menu a {
    color: var(--text-dark) !important;
    opacity: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ct-header .sub-menu a:hover,
.ct-header .sub-menu a:focus {
    background-color: var(--header-bg-hover);
    color: var(--text-dark) !important;
}

.ct-header .sub-menu li {
    border-color: var(--line-light);
}

/* ==================================================
   HEADER ICONS & INTERACTIVE ELEMENTS
   Dark color on white background
================================================== */

.ct-header .ct-icon,
.ct-header svg,
.ct-header svg * {
    color: var(--text-dark) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

.ct-header button,
.ct-header a[role="button"],
.ct-header [role="button"] {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Search, cart, account icons */
.ct-header .ct-tooltip,
.ct-header .icon-label {
    color: var(--text-dark) !important;
}

/* ==================================================
   HEADER BUTTONS (CTA Only)
   Red accent for call-to-action buttons
================================================== */

.ct-header .wp-block-button__link,
.ct-header [class*="button"]:not(.menu-toggle):not(.ct-panel-trigger) {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-light) !important;
    transition: all 0.3s ease;
}

.ct-header .wp-block-button__link:hover,
.ct-header [class*="button"]:not(.menu-toggle):not(.ct-panel-trigger):hover {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    color: var(--text-light) !important;
    filter: brightness(1);
}

/* ==================================================
   MENU TOGGLE BUTTON
   Coordinate with header.css (hamburger menu popup)
================================================== */

.blocksy-menu-toggle {
    background-color: var(--text-dark) !important;
    color: var(--text-light) !important;
}

.blocksy-menu-toggle:hover {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* ==================================================
   SEARCH MODAL (from header.css)
   White background with dark text
================================================== */

#search-modal .ct-panel-inner {
    background-color: var(--header-bg-light) !important;
    color: var(--text-dark) !important;
}

#search-modal input[type="search"],
#search-modal input[type="text"],
#search-modal input[type="email"] {
    background-color: var(--header-bg-light) !important;
    color: var(--text-dark) !important;
    border-color: var(--line-light) !important;
}

#search-modal input:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15) !important;
}

#search-modal button,
#search-modal .button {
    background-color: var(--brand-primary) !important;
    color: var(--text-light) !important;
}

/* ==================================================
   ACCESSIBILITY – Focus States
   Required for keyboard navigation
================================================== */

.ct-header a:focus,
.ct-header button:focus,
.ct-header [role="button"]:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ==================================================
   RESPONSIVE ADJUSTMENTS
   Mobile header styling
================================================== */

@media (max-width: 768px) {
    .ct-header {
        background-color: var(--header-bg-light) !important;
    }

    .ct-header .menu > li > a {
        font-size: 15px;
    }

    .blocksy-menu-popup {
        background-color: var(--header-bg-light) !important;
    }

    .blocksy-menu-popup-nav a {
        color: var(--text-dark) !important;
    }

    .blocksy-menu-popup-nav a:hover {
        background-color: var(--header-bg-hover);
    }
}

/* ==================================================
   DARK MODE SUPPORT (Future-Ready)
   Uncomment if WP dark theme needed
================================================== */

/*
@media (prefers-color-scheme: dark) {
    :root {
        --header-bg-light: #1a1a1a;
        --header-bg-hover: #2a2a2a;
        --text-dark: #ffffff;
        --text-dark-muted: #e0e0e0;
        --line-light: #404040;
    }
}
*/

/* ==================================================
   UTILITIES – Color Classes
   For flexible theme adjustments
================================================== */

.header-light {
    color: var(--text-light) !important;
    background: var(--header-bg-light) !important;
}

.header-dark {
    color: var(--text-dark) !important;
    background: transparent !important;
}

.accent-primary {
    color: var(--brand-primary) !important;
}

.accent-primary-bg {
    background-color: var(--brand-primary) !important;
    color: var(--text-light) !important;
}

/* ==================================================
   Z-INDEX REMINDER
   Keep below header.css hierarchy (9990+)
   This file: color only, no z-index changes
================================================== */

/* Colors only – layout z-index managed in:
   - header.css
   - footer.css
   - layout.css
*/