/**
 * Creative Maker Lab - Custom Color System
 * 
 * This file controls ALL colors on the site.
 * Change the color scheme by updating the CSS variables in :root
 * 
 * Color Palette: Maker Modern - Earthy & Professional
 */

/* ===================================
   CSS VARIABLES - CHANGE COLORS HERE
   =================================== */

:root {
  /* PRIMARY BRAND COLORS */
  --color-primary: #386b8d;           /* Main brand color - warm brown */
  --color-primary-dark: #224358;      /* Hover states, darker elements */
  --color-primary-light: #A4C1E1;     /* Subtle backgrounds, light accents */
  --color-primary-bg-light: #c4daf1;     /* Subtle backgrounds, lighter accents */
  /* SECONDARY/ACCENT COLORS */
  --color-secondary: #58968d;         /* Accent color - teal/blue-grey */
  --color-secondary-light: #b8dddd;   /* Light accent - soft blue */
  --color-secondary-bg-light: #ccf0f0;   /* Light accent - soft teal */
  /* NEUTRAL COLORS */
  --color-dark: #272727;              /* Primary text, strong contrast */
  --color-gray: #838282;              /* Secondary text, icons */
  --color-gray-light: #bbbaba;        /* Borders, dividers */
  --color-gray-bg: #dddbdb;           /* Section backgrounds */
  --color-light: #ffffff;             /* White backgrounds, inverse text */
  --color-white: #ffffff;             /* White backgrounds, inverse text */
  --color-black: #000000;             /* Pure black for high contrast */
  
  /* SEMANTIC COLORS (Status & Feedback) */
  --color-success: #7bdaaa;           /* Success messages, checkmarks */
  --color-error: #B2462F;             /* Error messages, warnings */
  --color-info: #A4BFE0;              /* Info boxes, tips */
  --color-warning: #be591e;           /* Caution, important notices */
  --color-alert: #7bdaaa;           /* Caution, important notices */
  --color-attention: #fff;           /* Caution, important notices */
}


/* ===================================
   TYPOGRAPHY COLORS
   =================================== */

/* Text color utilities */
.text-primary { color: var(--color-dark) !important; }
.text-secondary { color: var(--color-primary-dark) !important; }
.text-dark { color: var(--color-dark) !important; }
.text-gray { color: var(--color-gray) !important; }
.text-light { color: var(--color-secondary-bg-light) !important; }
.text-white { color: var(--color-white) !important; }
.text-success { color: var(--color-success) !important; }
.text-error { color: var(--color-error) !important; }
.text-info { color: var(--color-info) !important; }
.text-warning { color: var(--color-warning) !important; }


/* ===================================
   BACKGROUND COLORS
   =================================== */

/* Support section backgrounds */
.support-bg-color-1 {
  background-color: var(--color-secondary-bg-light) !important;
}

.support-bg-color-2 {
  background-color: var(--color-primary-bg-light) !important;
}

.support-bg-color-3 {
  background-color: var(--color-gray-bg) !important;
}

/* Background color utilities */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-secondary-light { background-color: var(--color-secondary-light) !important; }
.bg-dark { background-color: var(--color-dark) !important; }
.bg-gray { background-color: var(--color-gray-bg) !important; }
.bg-gray-light { background-color: var(--color-gray-light) !important; }
.bg-white { background-color: var(--color-white) !important; }

/* promo section backgrounds */
.promo-bg-color-1 {
  background-color: var(--color-secondary-bg-light) !important;
}

.promo-bg-color-2 {
  background-color: var(--color-primary-bg-light) !important;
}

.promo-bg-color-3 {
  background-color: var(--color-gray-bg) !important;
}

/* Override template background classes */
.bg-gray-3,
.bg-gray-6 {
  background-color: var(--color-white) !important;
}
.bg-footer { background-color: var(--color-primary-bg-light) !important; }


/* ===================================
   BORDER COLORS
   =================================== */

.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-gray { border-color: var(--color-gray-light) !important; }


/* ===================================
   BUTTONS & CALLS TO ACTION
   =================================== */

/* Primary buttons */
.btn-primary,
.default-btn {
  background-color: var(--color-primary-light) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}

.btn-primary:hover,
.default-btn:hover,
.btn-hover a:not(.animated):hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}

/* Animated buttons (slider CTAs) */
.slider-content-7 .slider-btn-9 a.animated,
.slider-btn-9 a.animated,
.btn-hover a.animated,
a.animated {
  /* Let the btn-hover ::before/::after layers provide the animated background */
  background-color: transparent !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-secondary-light) !important;
  border-width: 2px !important;
}

.slider-content-7 .slider-btn-9 a.animated:hover,
.slider-btn-9 a.animated:hover,
.btn-hover a.animated:hover,
a.animated:hover {
  background-color: transparent !important;
  color: var(--color-dark) !important;
  border: 2px solid var(--color-secondary) !important;
  border-width: 2px !important;
}

/* Button animation pseudo-elements */
.btn-hover a.animated::after {
  background: var(--color-secondary-light) !important;
}

/* Before pseudo-element for base background */
.btn-hover a.animated::before {
  background: var(--color-secondary) !important;
}

/* Secondary buttons */
.btn-secondary {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-secondary) !important;
}

.btn-secondary:hover {
  background-color: #3d6270 !important; /* Darker secondary */
}

/* Dark buttons */
.btn-dark {
  background-color: var(--color-dark) !important;
  color: var(--color-white) !important;
  border-color: var(--color-dark) !important;
}

/* Outline buttons */
.btn-outline-primary {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}


/* ===================================
   BADGES & LABELS
   =================================== */

/* Override template purple/pink badges with brand colors */
.badge-primary,
span.badge,
.badge,
span.purple,
.purple {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* Badge sizing (copy of template purple badge, +2px padding) */
span.badge,
.badge {
  display: inline-block;
  line-height: 1;
  padding: 5px 13px; /* was 3px 11px in template */
  border-radius: 3px;
  font-weight: 500;
}

.badge-secondary,
span.pink,
.pink {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
}

.badge-accent {
  background-color: var(--color-secondary-light) !important;
  color: var(--color-dark) !important;
}

/* Status badges */
.badge-success {
  background-color: var(--color-success) !important;
  color: var(--color-white) !important;
}

.badge-error {
  background-color: var(--color-error) !important;
  color: var(--color-white) !important;
}

.badge-new,
.badge-featured {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.badge-sale,
.badge-discount {
  background-color: var(--color-error) !important;
  color: var(--color-white) !important;
}


/* ===================================
   ICONS
   =================================== */

/* Icon colors */
.icon-primary,
.fa-solid,
.fa-brands {
  color: var(--color-primary);
}

.icon-secondary {
  color: var(--color-secondary);
}

.icon-accent {
  color: var(--color-primary-light);
}

/* Icon on dark backgrounds */
.icon-light {
  color: var(--color-gray-light);
}

/* Scroll to top button */
#scrollUp {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

#scrollUp:hover {
  background-color: var(--color-primary-dark) !important;
}


/* ===================================
   LINKS
   =================================== */

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-secondary);
}

/* Secondary links */
a.link-secondary {
  color: var(--color-secondary);
}

a.link-secondary:hover {
  color: #3d6270; /* Darker secondary */
}


/* ===================================
   HEADER & NAVIGATION
   =================================== */

/* Header background (if needed) */
.header-area {
  background-color: var(--color-white);
}

/* Header top border */
.header-hm9 .header-top-area.header-top-border17 {
  border-bottom-color: var(--color-gray-light) !important;
}

/* Logo text color */
.logo h2,
.logo-hm9 h2 {
  color: var(--color-dark) !important;
}

/* Navigation links */
.main-menu nav > ul > li > a,
.header-hm9 .main-menu nav > ul > li > a {
  color: var(--color-gray) !important;
}

.main-menu nav > ul > li > a:hover,
.header-hm9 .main-menu nav > ul > li > a:hover,
.main-menu nav > ul > li:hover > a {
  color: var(--color-dark) !important;
}

/* Active menu item */
.main-menu nav > ul > li.active > a,
.header-hm9 .main-menu nav > ul > li.active > a {
  color: var(--color-dark) !important;
}

/* Header icons (search, user, cart) */
.header-action a i,
.header-action-2 a i,
.search-active i,
.account-satting-active i,
.icon-cart i {
  color: var(--color-primary-dark);
}

/* Icon hover states */
.header-action a:hover i,
.header-action-2 a:hover i,
.search-active:hover i,
.account-satting-active:hover i,
.icon-cart:hover i {
  color: var(--color-secondary) !important;
}

/* Icon active states (when submenu is open) */
.search-active.active i,
.account-satting.active .account-satting-active i,
.cart-wrap.active .icon-cart i {
  color: var(--color-secondary) !important;
}


/* ===================================
   PRODUCT CARDS & SHOP
   =================================== */

/* Product action buttons */
.product-wrap-2 .product-img .product-action-2 a,
.product-action-2 a {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important; /* icon color */
  border: 2px solid var(--color-primary) !important;
}

.product-wrap-2 .product-img .product-action-2 a:hover,
.product-action-2 a:hover {
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important; /* icon color on hover */
  border-color: var(--color-primary) !important;
}

/* Ensure Font Awesome icons inherit the button text color */
.product-wrap-2 .product-img .product-action-2 a i,
.product-action-2 a i,
.product-wrap-2 .product-img .product-action-2 a .fa-solid,
.product-action-2 a .fa-solid,
.product-wrap-2 .product-img .product-action-2 a .fa-brands,
.product-action-2 a .fa-brands {
  color: inherit !important;
}

/* Product tabs */
.product-tab-list a {
  color: var(--color-gray);
}

.product-tab-list a.active,
.product-tab-list a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Product tabs (home): same behavior as product-tab-pink2,
   but colors match the main menu (normal + hover) */
.product-tab-list.product-tab-selection a h4 {
  color: var(--color-gray) !important;
  border-bottom: 2px solid transparent !important;
}

.product-tab-list.product-tab-selection a:hover h4 {
  color: var(--color-dark) !important;
  border-bottom-color: currentColor !important; /* underline on hover */
}

.product-tab-list.product-tab-selection a.active h4 {
  color: var(--color-dark) !important;
  border-bottom-color: currentColor !important; /* underline when selected */
}

/* Never use browser underline for tabs (we use the H4 border instead) */
.product-tab-list.product-tab-selection a,
.product-tab-list.product-tab-selection a:hover,
.product-tab-list.product-tab-selection a:focus,
.product-tab-list.product-tab-selection a.active {
  text-decoration: none !important;
}

/* Override template tab colors */
.product-tab-pink2 a.active {
  color: var(--color-primary) !important;
}

/* Price colors */
.price-2 span {
  color: var(--color-primary);
}

.price-2 span.old {
  color: var(--color-gray);
}


/* ===================================
   BANNERS & PROMOTIONAL SECTIONS
   =================================== */

/* Banner content styling */
.banner-content {
  color: var(--color-dark);
}

.banner-content h3 {
  color: var(--color-primary);
}

/* Override template banner-pink */
.banner-pink,
.banner-content.banner-pink {
  background-color: transparent !important;
}

.banner-pink h3 {
  color: var(--color-primary) !important;
}

.banner-pink h4 span {
  color: var(--color-secondary) !important;
}


/* ===================================
   FEATURE/SUPPORT BOXES
   =================================== */

/* Support/feature boxes - colors defined above at line 63-72 */

/* Feature icons */
.support-icon-2 i,
.support-content-3 h4 {
  color: var(--color-primary);
}


/* ===================================
   CALL-TO-ACTION SECTIONS
   =================================== */

/* Save money / CTA sections */
.save-money-content h2 {
  color: var(--color-white);
}

.save-money-btn a {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.save-money-btn a:hover {
  background-color: var(--color-primary-dark);
}

/* Newsletter signup buttons */
.subscribe-form .button,
.footer-widget .subscribe-style .subscribe-form form .clear input {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.subscribe-form .button:hover,
.footer-widget .subscribe-style .subscribe-form form .clear input:hover {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}


/* ===================================
   FORMS
   =================================== */

/* Form inputs */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  outline-color: var(--color-primary);
}

/* Form submit buttons */
.contact-form button[type="submit"],
button.submit {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.contact-form button[type="submit"]:hover,
button.submit:hover {
  background-color: var(--color-primary-dark);
}


/* ===================================
   FOOTER
   =================================== */

.footer-area {
  background-color: var(--color-gray-bg);
}

.footer-title h3 {
  color: var(--color-dark);
}

.footer-widget .footer-list ul li a {
  color: var(--color-gray) !important;
}

.footer-widget .footer-list ul li a:hover {
  color: var(--color-dark) !important;
}

/* Social icons */
.contact-social ul li a,
.footer-social ul li a {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.contact-social ul li a:hover,
.footer-social ul li a:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}


/* ===================================
   BREADCRUMBS
   =================================== */

.breadcrumb-content ul li a {
  color: var(--color-gray);
}

.breadcrumb-content ul li.active {
  color: var(--color-primary);
}


/* ===================================
   BLOG/CONTENT SECTIONS
   =================================== */

/* Blog category badges */
.blog-wrap span.purple,
.blog-wrap span.pink {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* Alternate badge style */
.blog-wrap:nth-child(even) span {
  background-color: var(--color-secondary) !important;
}


/* ===================================
   SEMANTIC/STATUS COLORS IN USE
   =================================== */

/* Success indicators */
.alert-success,
.message-success,
.status-success {
  background-color: rgba(63, 141, 130, 0.1);
  border-color: var(--color-success);
  color: var(--color-success);
}

/* Error indicators */
.alert-error,
.message-error,
.status-error {
  background-color: rgba(209, 116, 81, 0.1);
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Info indicators */
.alert-info,
.message-info,
.status-info {
  background-color: rgba(80, 174, 186, 0.1);
  border-color: var(--color-info);
  color: var(--color-info);
}

/* Warning indicators */
.alert-warning,
.message-warning,
.status-warning {
  background-color: rgba(135, 183, 175, 0.1);
  border-color: var(--color-warning);
  color: var(--color-warning);
}


/* ===================================
   STATISTICS/COUNT SECTIONS
   =================================== */

.count-icon i {
  color: var(--color-primary) !important;
}

.single-count h2 {
  color: var(--color-primary);
}


/* ===================================
   HOVER EFFECTS
   =================================== */

/* General hover effect for interactive elements */
.btn-hover a:not(.animated) {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-hover a:not(.animated):hover {
  background-color: var(--color-primary-dark);
}


/* ===================================
   CART & SHOPPING
   =================================== */

/* Cart icon badge */
.count-style,
.header-right-wrap .same-style.cart-wrap button span.count-style {
  background-color: var(--color-alert) !important;
  color: var(--color-black) !important;
}

/* Shopping cart buttons */
.shopping-cart-btn a {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.shopping-cart-btn a:hover {
  background-color: var(--color-primary-dark);
}


/* ===================================
   UTILITY CLASSES
   =================================== */

/* Border utilities */
.border-top-primary { border-top: 1px solid var(--color-primary) !important; }
.border-bottom-primary { border-bottom: 1px solid var(--color-primary) !important; }

/* Dividers */
hr.divider-primary {
  border-color: var(--color-primary);
}

hr.divider-light {
  border-color: var(--color-gray-light);
}


/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 768px) {
  /* Ensure colors remain consistent on mobile */
  .mobile-menu nav > ul > li > a {
    color: var(--color-dark);
  }
  
  .mobile-menu nav > ul > li > a:hover {
    color: var(--color-primary);
  }
}


/* ===================================
   PRINT STYLES (Optional)
   =================================== */

@media print {
  /* Ensure good contrast when printing */
  .bg-primary,
  .bg-secondary {
    background-color: transparent !important;
  }
  
  .text-primary,
  .text-secondary {
    color: var(--color-dark) !important;
  }
}


/* ===================================
   ACCESSIBILITY HELPERS
   =================================== */

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main:focus {
  background-color: var(--color-primary);
  color: var(--color-white);
}


/* ===================================
   TEMPLATE PURPLE/PINK OVERRIDES
   =================================== */

/* Override ALL instances of template purple (#a749ff) with primary color */

/* Text colors */
a:hover,
.main-menu nav > ul > li > a:hover,
.main-menu nav > ul > li.active > a,
.product-tab-list a.active,
.product-tab-list a:hover,
.footer-list ul li a:hover,
.breadcrumb-content ul li.active,
.blog-meta ul li a:hover,
.product-content h3 a:hover,
.product-content-2 h3 a:hover {
  color: var(--color-primary) !important;
}

/* Background colors */
.default-btn,
.save-money-btn a,
.subscribe-form .button,
.shopping-cart-btn a,
span.purple,
span.pink,
.badge-primary,
.badge-secondary {
  background-color: var(--color-primary) !important;
}

/* Border colors */
.btn-outline-primary,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
}

/* Hover backgrounds */
.default-btn:hover,
.save-money-btn a:hover,
.subscribe-form .button:hover,
.shopping-cart-btn a:hover {
  background-color: var(--color-primary-dark) !important;
}

/* Button hover animation pseudo-elements (general) */
.btn-hover a::before {
  background: var(--color-secondary) !important;
}

.btn-hover a::after {
  background: var(--color-secondary-light) !important;
}

.btn-hover a {
  border: 2px solid var(--color-secondary-light) !important;
  /* Ensure ::before/::after backgrounds render behind the link */
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.btn-hover a:hover {
  color: var(--color-dark) !important;
  border: 2px solid var(--color-secondary) !important;
}


/* ===================================
   END OF CUSTOM COLORS
   =================================== */

/**
 * NOTES FOR FUTURE CUSTOMIZATION:
 * 
 * 1. To change the entire color scheme, only modify the :root variables at the top
 * 2. All !important flags override template defaults - remove if causing conflicts
 * 3. Test all pages after changing colors to ensure contrast/accessibility
 * 4. Use browser dev tools to find any missed color applications
 * 5. Consider adding CSS custom properties for spacing/typography too
 */