/**
 * TAQWA MEAT — Brand CSS Overrides
 * Applies TAQWA MEAT color palette and branding to the MeatMart WordPress theme.
 *
 * Load order: enqueued AFTER main.css so these tokens take precedence.
 *
 * @package TaqwaMeat
 * @version 1.0.0
 */

/* =========================================
   TAQWA MEAT DESIGN TOKENS
   Overrides the generic --mm-* and --color-* tokens
   ========================================= */
:root {
    /* ── Brand Greens ── */
    --mm-green:          #1B4332;
    --mm-green-dark:     #0f2b20;
    --mm-green-mid:      #2D6A4F;
    --mm-green-light:    #40916C;
    --mm-green-pale:     #D8F3DC;

    /* ── Brand Gold ── */
    --mm-gold:           #D4AF37;
    --mm-gold-light:     #F8E27A;
    --mm-gold-dark:      #A87B2F;

    /* Gradient string for use in backgrounds */
    --mm-gold-gradient:  linear-gradient(135deg, #F8E27A 0%, #D4AF37 45%, #A87B2F 100%);

    /* ── Brand Neutrals ── */
    --mm-cream:          #FAFAF5;
    --mm-cream-mid:      #F2EDE4;
    --mm-cream-dark:     #E8DDD0;

    /* ── Override legacy color tokens ── */
    --color-primary:        #1B4332;   /* Was red — now TAQWA deep green */
    --color-primary-dark:   #0f2b20;
    --color-primary-light:  #2D6A4F;
    --color-gray-light:     #FAFAF5;   /* Warm cream instead of cold gray */

    /* ── Card system ── */
    --mm-card-radius:       16px;
    --mm-card-shadow:       0 4px 20px rgba(27, 67, 50, 0.10);
    --mm-card-shadow-hover: 0 16px 48px rgba(27, 67, 50, 0.20);
    --mm-gap:               24px;

    /* ── Typography stays the same ── */
    --font-heading:   'Poppins', sans-serif;
    --font-body:      'Open Sans', sans-serif;

    /* ── Motion ── */
    --mm-ease: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 0.3s ease;
}


/* =========================================
   GLOBAL BACKGROUND & TEXT
   ========================================= */
body {
    background-color: var(--mm-cream);
    color: #1a1a1a;
}


/* =========================================
   HEADER — TAQWA MEAT BRANDING
   ========================================= */
#site-header,
.site-header {
    background: var(--mm-green) !important;
    border-bottom: 2px solid var(--mm-gold) !important;
}

/* Announcement bar */
.announcement-bar {
    background: var(--mm-gold) !important;
    color: var(--mm-green) !important;
    font-weight: 700;
}
.announcement-bar a,
.announcement-bar strong {
    color: var(--mm-green) !important;
}

/* Logo text fallback (if no custom logo set) */
.site-logo__text,
.site-logo .site-name {
    color: var(--mm-gold) !important;
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: 2px;
}

/* Navigation links */
.nav-menu > li > a,
.primary-nav > li > a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: var(--font-heading);
    font-weight: 600;
}
.nav-menu > li > a:hover,
.primary-nav > li > a:hover,
.nav-menu > li.current-menu-item > a,
.primary-nav > li.current-menu-item > a {
    color: var(--mm-gold) !important;
}

/* Header icons (search, cart) */
.header-icon,
.cart-toggle,
.search-toggle {
    color: rgba(255, 255, 255, 0.8) !important;
}
.header-icon:hover,
.cart-toggle:hover,
.search-toggle:hover {
    color: var(--mm-gold) !important;
}

/* Cart count bubble */
.cart-count,
.header-cart__count {
    background: var(--mm-gold) !important;
    color: var(--mm-green) !important;
    font-weight: 800;
}

/* Sticky header */
#site-header.scrolled {
    background: rgba(27, 67, 50, 0.97) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25) !important;
}


/* =========================================
   MOBILE MENU
   ========================================= */
#mobile-nav,
.mobile-nav {
    background: var(--mm-green) !important;
    border-left: 3px solid var(--mm-gold) !important;
}
.mobile-nav a {
    color: rgba(255, 255, 255, 0.85) !important;
    border-bottom-color: rgba(212, 175, 55, 0.15) !important;
}
.mobile-nav a:hover {
    color: var(--mm-gold) !important;
    background: rgba(212, 175, 55, 0.08) !important;
}
#mobile-close,
.mobile-close-btn {
    color: var(--mm-gold) !important;
}


/* =========================================
   HERO SECTION
   ========================================= */
.hero-section,
.hero {
    background: linear-gradient(135deg, var(--mm-green) 0%, var(--mm-green-mid) 100%) !important;
}
.hero__subtitle,
.hero-badge {
    color: var(--mm-gold) !important;
    border-color: var(--mm-gold) !important;
}
.hero__cta-primary,
.btn-hero-primary {
    background: var(--mm-gold) !important;
    color: var(--mm-green) !important;
    font-weight: 800;
}
.hero__cta-primary:hover,
.btn-hero-primary:hover {
    background: var(--mm-gold-light) !important;
    transform: translateY(-2px);
}
.hero__cta-secondary,
.btn-hero-secondary {
    border-color: rgba(212, 175, 55, 0.5) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}
.hero__cta-secondary:hover,
.btn-hero-secondary:hover {
    border-color: var(--mm-gold) !important;
    color: var(--mm-gold) !important;
}


/* =========================================
   SECTION LABELS & HEADINGS
   ========================================= */
.section-label,
.mm-section-label,
.eyebrow-text {
    color: var(--mm-gold) !important;
}

.section-title,
.mm-section-title,
h1, h2, h3 {
    color: var(--mm-green);
}

/* Decorative divider dots / diamonds */
.section-divider__dot,
.divider-diamond {
    color: var(--mm-gold) !important;
    fill: var(--mm-gold) !important;
}


/* =========================================
   PRODUCT GRID & CARDS
   ========================================= */

/* Filter tabs */
.mm-filter-tab {
    border-color: var(--mm-green) !important;
    color: var(--mm-green) !important;
}
.mm-filter-tab:hover,
.mm-filter-tab--active {
    background: var(--mm-green) !important;
    color: #fff !important;
    border-color: var(--mm-green) !important;
}

/* Product card */
.mm-pcard {
    border-radius: var(--mm-card-radius);
    box-shadow: var(--mm-card-shadow);
}
.mm-pcard:hover {
    box-shadow: var(--mm-card-shadow-hover) !important;
}

/* Category label on card */
.mm-pcard__cat {
    color: var(--mm-gold) !important;
}

/* Star rating */
.mm-stars svg[fill="#f0b429"] {
    fill: var(--mm-gold) !important;
    stroke: var(--mm-gold) !important;
}

/* Sale/Hot badges */
.mm-badge--sale {
    background: var(--mm-gold) !important;
    color: var(--mm-green) !important;
}
.mm-badge--hot {
    background: #C8102E !important;
    color: #fff !important;
}
.mm-badge--out {
    background: #888 !important;
    color: #fff !important;
}

/* Wishlist button */
.mm-pcard__wish {
    background: rgba(27, 67, 50, 0.08) !important;
    color: var(--mm-green) !important;
}
.mm-pcard__wish:hover {
    background: var(--mm-green) !important;
    color: #fff !important;
}

/* Quick-view overlay */
.mm-pcard__overlay {
    background: rgba(27, 67, 50, 0.60) !important;
}
.mm-pcard__quickview {
    background: var(--mm-gold) !important;
    color: var(--mm-green) !important;
    font-weight: 700;
}
.mm-pcard__quickview:hover {
    background: var(--mm-gold-light) !important;
}

/* Price */
.mm-price-now {
    color: var(--mm-green) !important;
    font-weight: 800;
}

/* Add to Cart button */
.mm-atc-btn {
    background: var(--mm-green) !important;
    color: #fff !important;
    font-family: var(--font-heading);
    font-weight: 700;
    border-radius: 8px !important;
    border: none !important;
    transition: background var(--mm-ease), transform 0.18s !important;
}
.mm-atc-btn:hover:not(:disabled) {
    background: var(--mm-green-mid) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(27, 67, 50, 0.25) !important;
}
.mm-atc-btn.mm-added {
    background: var(--mm-gold) !important;
    color: var(--mm-green) !important;
}
.mm-atc-btn--disabled,
.mm-atc-btn:disabled {
    background: #ccc !important;
    color: #888 !important;
    cursor: not-allowed !important;
}


/* =========================================
   CATEGORIES SECTION
   ========================================= */
.category-card,
.cat-card {
    border-radius: var(--mm-card-radius);
}
.category-card__overlay,
.cat-card__overlay {
    background: linear-gradient(to top, rgba(27, 67, 50, 0.80) 0%, transparent 60%) !important;
}
.category-card__name,
.cat-card__name {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
}
.category-card:hover .category-card__btn,
.cat-card:hover .cat-card__btn {
    background: var(--mm-gold) !important;
    color: var(--mm-green) !important;
}


/* =========================================
   WHY CHOOSE US / FEATURES
   ========================================= */
.feature-card__icon,
.why-icon {
    background: var(--mm-green-pale) !important;
    color: var(--mm-green) !important;
}
.feature-card__icon svg,
.why-icon svg {
    stroke: var(--mm-green) !important;
    color: var(--mm-green) !important;
}
.feature-card h3,
.why-title {
    color: var(--mm-green) !important;
}


/* =========================================
   TESTIMONIALS
   ========================================= */
.testimonial-card {
    border-top: 3px solid var(--mm-gold) !important;
}
.testimonial-card__stars svg {
    fill: var(--mm-gold) !important;
    stroke: var(--mm-gold) !important;
}
.testimonial-card__quote {
    color: var(--mm-gold) !important;
    opacity: 0.3;
}


/* =========================================
   NEWSLETTER SECTION
   ========================================= */
.newsletter-section,
.footer-newsletter {
    background: var(--mm-green) !important;
}
.newsletter-section h2,
.footer-newsletter h2,
.footer-newsletter__title {
    color: var(--mm-gold) !important;
}
.newsletter-section p,
.footer-newsletter p,
.footer-newsletter__sub {
    color: rgba(255, 255, 255, 0.75) !important;
}
.newsletter-section input[type="email"],
.footer-newsletter__form input[type="email"] {
    border-color: rgba(212, 175, 55, 0.3) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}
.newsletter-section input[type="email"]::placeholder,
.footer-newsletter__form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.newsletter-section input[type="email"]:focus,
.footer-newsletter__form input[type="email"]:focus {
    border-color: var(--mm-gold) !important;
    outline: none;
}
.newsletter-section button[type="submit"],
.footer-newsletter__form button[type="submit"] {
    background: var(--mm-gold) !important;
    color: var(--mm-green) !important;
    font-weight: 800 !important;
}
.newsletter-section button[type="submit"]:hover,
.footer-newsletter__form button[type="submit"]:hover {
    background: var(--mm-gold-light) !important;
}


/* =========================================
   FOOTER
   ========================================= */
.site-footer,
#colophon {
    background: var(--mm-green) !important;
    color: rgba(255, 255, 255, 0.7);
}

/* Footer top gold accent */
.site-footer::before,
#colophon::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--mm-gold-gradient);
}

.footer-widget__title,
.footer-heading {
    color: var(--mm-gold) !important;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
}

.site-footer a,
#colophon a {
    color: rgba(255, 255, 255, 0.65) !important;
    transition: color var(--transition);
}
.site-footer a:hover,
#colophon a:hover {
    color: var(--mm-gold) !important;
}

.footer-bottom {
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
    background: rgba(0, 0, 0, 0.15) !important;
    color: rgba(255, 255, 255, 0.45);
}

/* Social icons */
.social-link {
    border-color: rgba(212, 175, 55, 0.3) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}
.social-link:hover {
    background: var(--mm-gold) !important;
    border-color: var(--mm-gold) !important;
    color: var(--mm-green) !important;
}

/* Footer badges */
.footer-badge {
    border-color: rgba(212, 175, 55, 0.25) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}
.footer-badge svg {
    color: var(--mm-gold) !important;
    stroke: var(--mm-gold) !important;
}


/* =========================================
   WOOCOMMERCE OVERRIDES
   ========================================= */

/* WooCommerce buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--mm-green) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    transition: background var(--transition), transform 0.18s !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: var(--mm-green-mid) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--mm-gold) !important;
    color: var(--mm-green) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--mm-gold-light) !important;
    color: var(--mm-green) !important;
}

/* WooCommerce sale badge */
.woocommerce span.onsale {
    background: var(--mm-gold) !important;
    color: var(--mm-green) !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
}

/* WooCommerce price */
.woocommerce-Price-amount,
.price ins .woocommerce-Price-amount {
    color: var(--mm-green) !important;
    font-weight: 800;
}

/* WooCommerce star ratings */
.woocommerce .star-rating::before,
.woocommerce .star-rating span::before {
    color: var(--mm-gold) !important;
}

/* WooCommerce breadcrumb */
.woocommerce-breadcrumb {
    color: var(--mm-green) !important;
}
.woocommerce-breadcrumb a {
    color: var(--mm-green-mid) !important;
}

/* Cart / Checkout */
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 {
    color: var(--mm-green) !important;
    font-family: var(--font-heading);
}
.woocommerce table.shop_table thead th {
    background: var(--mm-green) !important;
    color: #fff !important;
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Order review totals */
.woocommerce .order-total .amount {
    color: var(--mm-green) !important;
    font-weight: 800 !important;
}

/* Mini cart */
.widget_shopping_cart_content .total {
    border-top-color: var(--mm-gold) !important;
}
.widget_shopping_cart_content .total strong {
    color: var(--mm-green) !important;
}


/* =========================================
   BACK TO TOP BUTTON
   ========================================= */
#back-to-top {
    background: var(--mm-gold) !important;
    color: var(--mm-green) !important;
}
#back-to-top:hover {
    background: var(--mm-gold-light) !important;
}


/* =========================================
   SEARCH DROPDOWN
   ========================================= */
#search-dropdown {
    border-top: 2px solid var(--mm-gold) !important;
}
.search-field:focus {
    border-color: var(--mm-green) !important;
    outline: none;
}
.search-submit {
    background: var(--mm-green) !important;
    color: #fff !important;
}


/* =========================================
   HALAL BADGE / TRUST INDICATORS
   (shared across sections)
   ========================================= */
.halal-badge,
.trust-badge {
    color: var(--mm-gold) !important;
}
.halal-badge .badge-circle,
.trust-badge .badge-circle {
    background: var(--mm-green) !important;
}


/* =========================================
   PAGE HERO BANNERS
   (shop archive, single product top)
   ========================================= */
.shop-hero,
.archive-hero,
.page-banner {
    background: linear-gradient(135deg, var(--mm-green) 0%, var(--mm-green-mid) 100%) !important;
    color: #fff;
}
.shop-hero h1,
.archive-hero h1,
.page-banner h1 {
    color: var(--mm-gold) !important;
}


/* =========================================
   ELEMENTOR OVERRIDES
   Keep Elementor-built sections consistent
   ========================================= */
.elementor-widget-heading .elementor-heading-title {
    /* Don't override — Elementor controls this per-widget */
}
/* But fix any Elementor buttons that use theme accent color */
.elementor-button.elementor-button-link {
    background-color: var(--mm-green) !important;
}


/* =========================================
   PRINT STYLES
   ========================================= */
@media print {
    #site-header, .site-footer, .mm-pcard__overlay,
    .mm-pcard__wish, #back-to-top, .toc { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
}