/**
 * Seasonal Themes - Shared Base Styles
 *
 * All common WooCommerce component styles driven by CSS custom
 * properties. Each theme only defines its palette variables and
 * unique content (page title decorations, footer emojis, banner
 * overrides). Semantic override variables have sensible defaults
 * so themes only need to set what differs.
 *
 * Load order: owpc-child-style -> base.css -> {theme}/style.css
 *
 * @author  Sami SELLAMI - La Homline
 * @version 2.2.0
 */

/* ==========================================================================
   SEMANTIC DEFAULTS
   Themes only override what differs from these values.
   ========================================================================== */
.seasonal-theme {
    background-color: var(--seasonal-light);

    /* Shared layout tokens */
    --seasonal-transition-button: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    --seasonal-transition-nav: color 0.3s ease, background-color 0.3s ease;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 25px;

    /* Override defaults — themes redefine only what differs */
    --seasonal-btn-text:            var(--seasonal-white);
    --seasonal-btn-hover-bg:        var(--seasonal-dark);
    --seasonal-btn-hover-text:      var(--seasonal-white);
    --seasonal-atc-bg:              var(--seasonal-primary);
    --seasonal-atc-text:            var(--seasonal-white);
    --seasonal-cart-icon-bg:        var(--seasonal-primary);
    --seasonal-cart-icon-text:      var(--seasonal-white);
    --seasonal-category-color:      var(--seasonal-primary);
    --seasonal-price-color:         var(--seasonal-primary);
    --seasonal-title-color:         var(--seasonal-white);
    --seasonal-topbar-text:         var(--seasonal-white);
    --seasonal-breadcrumbs-color:   var(--seasonal-white);
    --seasonal-badge-text:          var(--seasonal-white);
    --seasonal-footer-text:         var(--seasonal-white);
    --seasonal-on-primary:          var(--seasonal-white);
    --seasonal-topbar-border:       2px solid var(--seasonal-accent);
    --seasonal-header-border:       3px solid var(--seasonal-primary);
    --seasonal-toolbar-border:      rgba(0, 0, 0, 0.15);
    --seasonal-img-shadow:          0 4px 20px rgba(0, 0, 0, 0.1);
    --seasonal-focus-ring:          0 0 0 3px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   FLOATING ANIMATION KEYFRAMES
   ========================================================================== */
@keyframes floatSymbol {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100vh) translateX(var(--symbol-drift, 0px)) rotate(720deg);
        opacity: 0;
    }
}

/* ==========================================================================
   FLOATING SYMBOLS CONTAINER
   ========================================================================== */
.seasonal-floating-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 500;
    overflow: hidden;
}

.seasonal-floating-symbol {
    position: fixed;
    bottom: -50px;
    opacity: 0.7;
    animation: floatSymbol linear forwards;
    pointer-events: none;
}

/* ==========================================================================
   PROMO BANNER
   ========================================================================== */
.seasonal-promo-banner {
    background: var(--seasonal-gradient);
    color: var(--seasonal-white, #fff);
    text-align: center;
    padding: 12px 20px;
    font-weight: 600;
    position: relative;
}

.seasonal-promo-banner a {
    color: var(--seasonal-accent);
    text-decoration: underline;
}

.seasonal-promo-close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--seasonal-white, #fff);
    font-size: 24px;
    cursor: pointer;
    padding: 5px 10px;
    opacity: 0.8;
}

.seasonal-promo-close:hover {
    opacity: 1;
}

/* ==========================================================================
   PAGE TITLES
   ========================================================================== */
.seasonal-theme.woocommerce-page .page-header,
.seasonal-theme.post-type-archive-product .page-header {
    background: var(--seasonal-gradient) !important;
    padding: 30px 0;
    margin-bottom: 30px;
}

.seasonal-theme.woocommerce-page .page-header .page-header-title,
.seasonal-theme.post-type-archive-product .page-header .page-header-title {
    color: var(--seasonal-title-color) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.seasonal-theme.woocommerce-page .page-header .site-breadcrumbs,
.seasonal-theme.woocommerce-page .page-header .site-breadcrumbs a {
    color: var(--seasonal-breadcrumbs-color) !important;
    opacity: 0.9;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.seasonal-theme #top-bar-wrap {
    background: var(--seasonal-gradient) !important;
    border-bottom: var(--seasonal-topbar-border);
}

.seasonal-theme #top-bar-wrap,
.seasonal-theme #top-bar-wrap a {
    color: var(--seasonal-topbar-text) !important;
}

.seasonal-theme #site-header {
    border-bottom: var(--seasonal-header-border);
    box-shadow: var(--seasonal-shadow);
}

.seasonal-theme .wcmenucart-cart-icon .wcmenucart-count {
    background-color: var(--seasonal-cart-icon-bg) !important;
    color: var(--seasonal-cart-icon-text) !important;
}

/* ==========================================================================
   MAIN NAVIGATION (desktop + dropdowns)
   ========================================================================== */
.seasonal-theme #site-navigation-wrap {
    background-color: var(--seasonal-light) !important;
    border-bottom: 2px solid var(--seasonal-primary);
}

/* Shared normal state for top-level and dropdown links */
.seasonal-theme .main-menu > li > a,
.seasonal-theme .main-menu li ul.sub-menu li a {
    color: var(--seasonal-primary) !important;
    transition: var(--seasonal-transition-nav);
}

.seasonal-theme .main-menu > li > a:hover {
    color: var(--seasonal-dark) !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.seasonal-theme .main-menu > li.current-menu-item > a {
    color: var(--seasonal-dark) !important;
    font-weight: 700;
}

/* Dropdown panels */
.seasonal-theme .main-menu li ul.sub-menu {
    background-color: var(--seasonal-light) !important;
    border: 1px solid var(--seasonal-primary);
    border-top: 3px solid var(--seasonal-primary);
}

.seasonal-theme .main-menu li ul.sub-menu li a:hover {
    color: var(--seasonal-white) !important;
    background-color: var(--seasonal-primary) !important;
}

/* Arrow follows parent link color in all states */
.seasonal-theme .main-menu li ul.sub-menu li.menu-item-has-children > a::after {
    color: inherit !important;
}

/* ==========================================================================
   TOOLBAR
   ========================================================================== */
.seasonal-theme .oceanwp-toolbar {
    background: linear-gradient(135deg, var(--seasonal-light) 0%, var(--seasonal-white) 100%) !important;
    border-color: var(--seasonal-toolbar-border) !important;
}

.seasonal-theme .oceanwp-grid-list a:hover,
.seasonal-theme .oceanwp-grid-list a.active {
    background: var(--seasonal-primary) !important;
    border-color: var(--seasonal-primary) !important;
}

.seasonal-theme .oceanwp-grid-list a i {
    color: var(--seasonal-primary) !important;
}

.seasonal-theme .oceanwp-grid-list a:hover i,
.seasonal-theme .oceanwp-grid-list a.active i {
    color: var(--seasonal-on-primary) !important;
}

.seasonal-theme ul.result-count li a:hover,
.seasonal-theme ul.result-count li a.active {
    background: var(--seasonal-primary) !important;
    color: var(--seasonal-on-primary) !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.seasonal-theme .woocommerce a.button,
.seasonal-theme .woocommerce button.button,
.seasonal-theme .woocommerce input.button,
.seasonal-theme .woocommerce a.button.alt,
.seasonal-theme .woocommerce button.button.alt,
.seasonal-theme .woocommerce #respond input#submit,
.seasonal-theme button.single_add_to_cart_button,
.seasonal-theme button.single_add_to_cart_button.button.alt,
.seasonal-theme .woocommerce button.single_add_to_cart_button.button.alt {
    background-color: var(--seasonal-primary) !important;
    border: none !important;
    color: var(--seasonal-btn-text) !important;
    border-radius: var(--radius-lg) !important;
    padding: 12px 30px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--seasonal-shadow);
    transition: var(--seasonal-transition-button);
}

.seasonal-theme .woocommerce a.button:hover,
.seasonal-theme .woocommerce button.button:hover,
.seasonal-theme .woocommerce a.button.alt:hover,
.seasonal-theme .woocommerce button.button.alt:hover,
.seasonal-theme button.single_add_to_cart_button:hover,
.seasonal-theme button.single_add_to_cart_button.button.alt:hover {
    background-color: var(--seasonal-btn-hover-bg) !important;
    color: var(--seasonal-btn-hover-text) !important;
    transform: translateY(-2px);
}

.seasonal-theme .woocommerce a.button:focus-visible,
.seasonal-theme .woocommerce button.button:focus-visible {
    outline: none;
    box-shadow: var(--seasonal-focus-ring), var(--seasonal-shadow);
}

.seasonal-theme .woocommerce a.added_to_cart {
    display: inline-block;
    background-color: var(--seasonal-atc-bg) !important;
    color: var(--seasonal-atc-text) !important;
    border-radius: var(--radius-lg) !important;
    padding: 12px 30px !important;
    margin-top: 10px;
    font-weight: 600;
}

/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */
.seasonal-theme .woocommerce ul.products li.product,
.seasonal-theme .woocommerce ul.products li.product .product-inner,
.seasonal-theme .woocommerce ul.products li.product .woo-entry-inner {
    background: transparent;
    box-shadow: none;
    border: none;
    text-align: center;
}

.seasonal-theme .woocommerce ul.products li.product img {
    border-radius: var(--radius-md);
    box-shadow: var(--seasonal-img-shadow);
}

.seasonal-theme .woocommerce ul.products li.product .category a {
    color: var(--seasonal-category-color);
}

.seasonal-theme .woocommerce ul.products li.product .price,
.seasonal-theme .woocommerce ul.products li.product .price span {
    color: var(--seasonal-price-color) !important;
}

/* ==========================================================================
   BADGES
   ========================================================================== */
.seasonal-theme .woocommerce span.onsale {
    background: var(--seasonal-gradient) !important;
    color: var(--seasonal-badge-text) !important;
    border-radius: 50% !important;
}

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
.seasonal-theme.single-product div.product {
    background: var(--seasonal-white);
    padding: 30px;
    border-radius: var(--radius-md);
}

.seasonal-theme.single-product .summary .price {
    color: var(--seasonal-price-color) !important;
    font-size: 28px;
    font-weight: 700;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.seasonal-theme #footer {
    background: linear-gradient(180deg, var(--seasonal-light) 0%, var(--seasonal-white) 100%) !important;
    border-top: 3px solid var(--seasonal-primary);
    position: relative;
}

/* Common positioning — each theme sets content + styling */
.seasonal-theme #footer::before {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--seasonal-white);
    padding: 0 20px;
    font-size: 14px;
}

.seasonal-theme #footer-bottom,
.seasonal-theme #footer-bottom-wrap {
    background: var(--seasonal-gradient) !important;
}

.seasonal-theme #footer-bottom,
.seasonal-theme #footer-bottom a {
    color: var(--seasonal-footer-text) !important;
}

/* ==========================================================================
   PRODUCT IMAGE TINTING
   White backgrounds adopt the theme's light color via multiply blend.
   Background on both wrapper AND inner <a> to ensure blend works
   regardless of OceanWP DOM nesting.
   Scoped to .seasonal-tinting — controlled per theme via image_tinting
   config key. Default: true. Set to false in seasonal-config.php
   overrides to disable for specific themes (e.g. Halloween).
   ========================================================================== */

/* Shop / category grid */
.seasonal-tinting .woocommerce ul.products li.product .woo-entry-image,
.seasonal-tinting .woocommerce ul.products li.product .woo-entry-image > a {
    background-color: var(--seasonal-light);
}

.seasonal-tinting .woocommerce ul.products li.product .woo-entry-image img {
    mix-blend-mode: multiply;
}

/* Single product gallery */
.seasonal-tinting.single-product .woocommerce-product-gallery__image {
    background-color: var(--seasonal-light);
}

.seasonal-tinting.single-product .woocommerce-product-gallery__image img {
    mix-blend-mode: multiply;
}

/* ==========================================================================
   MOBILE HEADER ICONS (hamburger, search, cart)
   ========================================================================== */
body.seasonal-theme .oceanwp-mobile-menu-icon .mobile-menu,
body.seasonal-theme .oceanwp-mobile-menu-icon .mobile-menu .oceanwp-text,
body.seasonal-theme .oceanwp-mobile-menu-icon .mobile-menu .oceanwp-close-text,
body.seasonal-theme .oceanwp-mobile-menu-icon .search-icon-overlay {
    color: var(--seasonal-primary) !important;
}

/* ==========================================================================
   MOBILE MENU (OceanWP sidr panel)
   Scoped to body.seasonal-theme since #sidr is outside #wrap.
   ========================================================================== */
body.seasonal-theme #sidr {
    background-color: var(--seasonal-light) !important;
}

/* Close menu bar */
body.seasonal-theme .sidr-class-close-menu {
    background-color: var(--seasonal-primary) !important;
}

body.seasonal-theme .sidr-class-close-menu a {
    color: var(--seasonal-white) !important;
}

/* Menu links */
body.seasonal-theme #sidr ul li a {
    color: var(--seasonal-primary) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.seasonal-theme #sidr ul li a:hover {
    color: var(--seasonal-dark) !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Expand/collapse toggle (+/-) */
body.seasonal-theme #sidr ul li.menu-item-has-children > a > span.dropdown-toggle {
    color: var(--seasonal-primary) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Open submenu items — slightly indented background */
body.seasonal-theme #sidr ul ul.sub-menu {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

body.seasonal-theme #sidr ul ul.sub-menu li a {
    color: var(--seasonal-dark) !important;
}

body.seasonal-theme #sidr ul ul.sub-menu li a:hover {
    color: var(--seasonal-white) !important;
    background-color: var(--seasonal-primary) !important;
}

/* Search input inside sidr */
body.seasonal-theme #sidr .sidr-class-mobile-searchform input {
    border-color: var(--seasonal-primary) !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .seasonal-theme .woocommerce a.button,
    .seasonal-theme .woocommerce button.button {
        padding: 10px 20px !important;
        font-size: 13px;
    }

    .seasonal-theme.woocommerce-page .page-header-title::before,
    .seasonal-theme.woocommerce-page .page-header-title::after {
        display: none;
    }
}