/**
 * Theme Colors — Dynamic CSS using CSS variables.
 * Variables are set via PHP in theme-colors.php.
 * Uses proper CSS specificity instead of !important.
 *
 * @package Codlion
 */

/* ====== HEADER STYLING ====== */
body.home .site-header {
    background-color: var(--header-bg-color);
    transition: background-color 0.3s ease, top 0.3s ease;
}

.site-header {
    transition: background-color 0.3s ease, top 0.3s ease;
}

.site-header.scrolled {
    background-color: var(--header-bg-color-scroll);
}

/* Header text color */
.site-header .main-navigation a,
.site-header .search-toggle,
.site-header .cart-link {
    color: var(--header-text-color);
    transition: color 0.3s ease;
}

/* Header text color when scrolled */
body.scrolled .site-header .main-navigation a,
body.scrolled .site-header .search-toggle,
body.scrolled .site-header .cart-link {
    color: var(--header-text-color-scroll);
}

/* Other pages always use scrolled colors for both default and scrolled states */
body:not(.home) .site-header,
body:not(.home).scrolled .site-header {
    background-color: var(--header-bg-color-scroll);
}

/* Text colors for other pages - both states use scrolled color */
body:not(.home) .site-header .main-navigation a,
body:not(.home) .site-header .search-toggle,
body:not(.home) .site-header .cart-link,
body:not(.home).scrolled .site-header .main-navigation a,
body:not(.home).scrolled .site-header .search-toggle,
body:not(.home).scrolled .site-header .cart-link {
    color: var(--header-text-color-scroll);
}

/* Icon colors for other pages - both states use scrolled color */
body:not(.home) .site-header .menu-icon,
body:not(.home) .site-header .menu-toggle svg,
body:not(.home) .site-header .cart-icon,
body:not(.home).scrolled .site-header .menu-icon,
body:not(.home).scrolled .site-header .menu-toggle svg,
body:not(.home).scrolled .site-header .cart-icon {
    stroke: var(--header-text-color-scroll);
}

/* Menu toggle icon in normal state */
.site-header:not(.scrolled) .menu-icon,
.site-header:not(.scrolled) .menu-toggle svg,
body:not(.scrolled) .site-header .menu-icon,
body:not(.scrolled) .site-header .menu-toggle svg {
    stroke: var(--header-text-color);
}

/* Menu toggle icon when scrolled */
body.scrolled .site-header .menu-icon,
body.home.scrolled .site-header .menu-icon,
.site-header.scrolled .menu-icon,
.site-header.scrolled .menu-toggle svg,
html body .dropdown-menu .dialog-lightbox-close-button svg,
html body .dropdown-menu .dialog-close-button svg {
    stroke: var(--header-text-color-scroll);
}

/* Cart icon stroke color in normal state */
.site-header:not(.scrolled) .cart-icon,
.site-header:not(.scrolled) .cart-contents svg {
    stroke: var(--header-text-color);
}

/* Cart icon stroke color when scrolled */
body.scrolled .site-header .cart-icon {
    stroke: var(--header-text-color-scroll);
}

/* Mobile menu toggle */
@media (max-width: 991px) {
    body.scrolled .site-header .menu-icon,
    body.home.scrolled .site-header .menu-icon {
        stroke: var(--header-text-color-scroll);
    }
}

/* Ensure menu toggle button always has transparent background */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active,
.menu-toggle.active {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    outline: none;
}

/* Header vertical alignment */
.header-content {
    display: flex;
    align-items: center;
    height: 72px;
}

@media (max-width: 991px) {
    .header-content {
        height: 55px;
    }
}

.site-branding {
    display: flex;
    align-items: center;
}

.site-title {
    margin: 0;
    line-height: 1;
}

.menu-toggle, .search-toggle, .cart-link, .cart-icon-wrapper {
    display: flex;
    align-items: center;
}

.cart-icon-wrapper {
    height: 100%;
    position: relative;
}

.cart-icon {
    position: relative;
    top: 0;
}

/* Cart count on scroll */
body.scrolled .site-header .cart-icon-wrapper .cart-count {
    background-color: var(--header-text-color-scroll, #000000);
}

/* Header background color when scrolled */
body.scrolled .site-header {
    background-color: var(--header-bg-color-scroll);
}

/* Top bar styling */
.top-bar {
    background-color: var(--top-bar-bg-color);
    color: var(--top-bar-text-color);
}

.top-bar a,
.top-bar span {
    color: var(--top-bar-text-color);
}

/* Header positioning with top bar */
body.enable-top-bar:not(.scrolled) .site-header.site-header {
    top: 30px;
    margin-top: 0;
}

@media (max-width: 991px) {
    body.enable-top-bar:not(.scrolled) .site-header.site-header {
        top: 30px;
    }
    body.enable-top-bar.scrolled .site-header.site-header,
    body.scrolled .site-header.site-header {
        top: 0;
    }
}

/* ====== FOOTER STYLING ====== */
.header-content {
    height: 72px;
    display: flex;
    align-items: center;
}

@media (max-width: 991px) {
    .header-content {
        height: 55px;
    }
}

#colophon.site-footer {
    background-color: var(--footer-background-color);
    color: var(--footer-text-color);
}

#colophon.site-footer h6,
#colophon.site-footer .brand-description,
#colophon.site-footer .footer-menu li,
#colophon.site-footer .footer-menu a,
#colophon.site-footer .footer-widget ul li,
#colophon.site-footer .footer-widget ul li a,
#colophon.site-footer .footer-widget .widget-title,
#colophon.site-footer .footer-contact-link,
#colophon.site-footer .footer-contact-link i,
#colophon.site-footer .footer-about-title,
#colophon.site-footer .footer-policies-title,
#colophon.site-footer .footer-social-contact-title {
    color: var(--footer-text-color);
}

#colophon.site-footer h3::after,
#colophon.site-footer .widget-title::after,
#colophon.site-footer .footer-newsletter-title::after {
    background-color: var(--unified-accent-color);
}

body #colophon.site-footer a:not(.codlion-social-icon):hover,
body #colophon.site-footer a:not(.codlion-social-icon):hover i {
    color: var(--unified-accent-color);
    text-decoration: underline;
}

/* Social icons */
.codlion-social-icon {
    background: transparent;
    transition: opacity 0.25s ease;
    border: none;
}

.codlion-social-icon svg {
    fill: var(--social-icon-color);
    transition: fill 0.25s ease, opacity 0.25s ease;
}

.codlion-social-icon:hover {
    background: transparent;
    border-color: transparent;
}

body #colophon.site-footer .codlion-social-icon:hover {
    background: transparent;
    border-color: transparent;
}

.codlion-social-icon:hover svg {
    fill: var(--primary-color, #a67c52);
}

/* Newsletter button */
#colophon.site-footer .footer-newsletter-form button,
#colophon.site-footer .newsletter-submit-btn {
    background-color: var(--unified-accent-color);
}

/* Footer bottom */
.site-info {
    background-color: var(--footer-bottom-bg-color);
}

.site-info,
.site-info p,
.site-info a,
.site-info span {
    color: var(--copyright-text-color);
}

/* ====== CART AND SEARCH STYLING ====== */
html body .site-header .header-actions .cart-link .cart-icon-wrapper .cart-count,
html body .cart-count {
    background-color: var(--cart-count-bg-color, #919191);
    color: #ffffff;
}

/* Search submit button */
html body .dropdown-menu form .pos-search__container .pos-search__submit,
html body .search-form .search-submit,
html body.home .search-form .search-submit,
html body:not(.home) .search-form .search-submit,
html body.scrolled .search-form .search-submit,
html body.home.scrolled .search-form .search-submit,
html body:not(.home).scrolled .search-form .search-submit,
html body .search-form input[type="submit"],
html body .search-form button.search-submit,
.search-form input.search-submit[type="submit"],
.search-form button.search-submit,
form.search-form .search-submit,
form.search-form input[type="submit"],
form.search-form button.search-submit,
.widget_search .search-form .search-submit,
.widget_search form.search-form input[type="submit"],
#searchform .search-submit,
#searchform input[type="submit"] {
    background-color: var(--primary-color, #a67c52);
    color: var(--cl-btn-text, #ffffff);
    border-color: var(--primary-color, #a67c52);
    border: 1px solid var(--primary-color, #a67c52);
    outline-color: var(--primary-color, #a67c52);
}