/* ==========================================================================
   KADRIORGANICS.COM — custom.css
   Last updated : May 2026
   Author       : Melvin (Dev)

   IMPORTANT RULES FOR ANYONE EDITING THIS FILE:
   -----------------------------------------------
   1. NO <style> tags in this file. It is loaded as a CSS file, not HTML.
   2. Brand colour (#FF6A00) comes from color.php at runtime — do NOT
      hard-code it here except for fallback values on isolated components
      (hero-btn, slide-badge) that never conflict with color.php selectors.
   3. Before adding !important, check color.php first. If color.php already
      uses !important on the same selector, increase specificity instead.
   4. All media-query overrides live at the bottom of this file in Section 7.
      Do not scatter @media blocks — it makes mobile debugging impossible.
   5. Add a comment above every new block: date, your name, what it does.

   SECTIONS
   --------
   1. CSS Custom Properties
   2. Header & Toolbar — Mobile Z-Index Fix
   3. Hero Slider — Layout & Overlay
   4. Hero Slider — Content & Typography
   5. Hero Slider — Owl Carousel Controls
   6. Footer
   7. Responsive Overrides (992px → 768px → 576px)
========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   Centralised values. Edit here; everything else references these.
========================================================================== */

:root {
    /* Brand colour is controlled by color.php — this is for components
       in this file ONLY that do not overlap with color.php selectors. */
    --ko-orange        : #FF6A00;
    --ko-orange-light  : #ff8c33;
    --ko-orange-glow   : rgba(255, 106, 0, 0.35);
    --ko-orange-glass  : rgba(255, 106, 0, 0.15);
    --ko-orange-border : rgba(255, 106, 0, 0.4);

    /* Z-index scale — edit these numbers to fix stacking issues site-wide */
    --z-base           : 1;
    --z-slider-content : 3;
    --z-slider-controls: 10;
    --z-header         : 9999;

    /* Footer palette */
    --footer-bg        : #0f172a;
    --footer-surface   : #1f2937;
    --footer-text      : #e5e7eb;
    --footer-muted     : #9ca3af;
    --footer-subtle    : #6b7280;
    --footer-accent    : #2563eb;
    --footer-accent-hv : #1d4ed8;

    /* Hero slider */
    --hero-height-desktop : 750px;
    --hero-height-tablet  : 560px;
    --hero-height-mobile  : 480px;
}


/* ==========================================================================
   2. HEADER & TOOLBAR — MOBILE Z-INDEX FIX
   Prevents the hero slider stacking context from sitting above the header
   and hiding the cart / compare icons on mobile.
   Without this, z-index: 10 on .owl-nav beats the un-stacked header.
========================================================================== */

.site-header {
    position: relative;
    z-index: var(--z-header);
}

/* Ensure the toolbar (cart, compare, wishlist icons) is always on top */
.site-header .toolbar {
    position: relative;
    z-index: var(--z-header);
}

/* Keep the hero slider below the header */
.hero-slider-main {
    position: relative;
    z-index: var(--z-base);
}


/* ==========================================================================
   3. HERO SLIDER — LAYOUT & OVERLAY
========================================================================== */

.hero-slider-main .item {
    position: relative;
    height: var(--hero-height-desktop);
    /* min-height removed — it was fighting the explicit height on short screens */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center;
    overflow: hidden;
}

/* Dark gradient overlay — text legibility on any background image */
.hero-slider-main .item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.85)   0%,
        rgba(0, 0, 0, 0.60)  25%,
        rgba(0, 0, 0, 0.30)  55%,
        transparent          100%
    );
    z-index: var(--z-base);
    pointer-events: none;
}


/* ==========================================================================
   4. HERO SLIDER — CONTENT & TYPOGRAPHY
========================================================================== */

.slide-content {
    position: relative;
    z-index: var(--z-slider-content);
    animation: ko-fadeUp 0.8s ease-out forwards;
}

/* Badge pill above the heading */
.slide-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 24px;
    margin-bottom: 1.5rem;
    border-radius: 60px;
    border: 1px solid var(--ko-orange-border);
    background: var(--ko-orange-glass);
    /* Fallback for browsers without backdrop-filter support */
    background-color: rgba(255, 80, 40, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ko-orange);
    /* Explicitly scoped — does NOT conflict with color.php .slide-badge */
}

/* Main headline — fluid type scale, no breakpoint needed */
.slide-title {
    font-size: clamp(2rem, 5.5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.2rem;
    color: #ffffff;
    max-width: 600px;
}

/* Subheading / description text */
.slide-description {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
    max-width: 500px;
    margin-bottom: 2rem;
}

/* CTA button — uses local vars; does NOT use .btn or .btn-primary
   so it will never conflict with color.php's .btn rule */
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 36px;
    border-radius: 50px;
    background: linear-gradient(80deg, var(--ko-orange), var(--ko-orange-light));
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 20px var(--ko-orange-glow);
    /* Inline-level so it never stretches full width on mobile */
}

.hero-btn:hover,
.hero-btn:focus {
    transform: translateY(-30px);
    box-shadow: 0 12px 30px rgba(255, 106, 0, 0.50);
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.hero-btn i {
    transition: transform 0.3s ease;
}

.hero-btn:hover i {
    transform: translateX(5px);
}

/* Slide-in animation — prefixed to avoid collision with any theme keyframe */
@keyframes ko-fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   5. HERO SLIDER — OWL CAROUSEL CONTROLS
   NOTE: color.php targets .flash-deal-slider.owl-carousel .owl-nav div:hover
   with background !important. These selectors are scoped to .hero-slider-main
   so there is NO conflict.
========================================================================== */

/* Nav arrows wrapper */
.hero-slider-main .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    z-index: var(--z-slider-controls);
    pointer-events: none; /* let clicks pass through the wrapper */
}

/* Individual arrow buttons */
.hero-slider-main .owl-nav button,
.hero-slider-main .owl-nav div {
    pointer-events: all;
    width: 48px;
    height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    transition: background 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.hero-slider-main .owl-nav button:hover,
.hero-slider-main .owl-nav div:hover {
    background: rgba(255, 106, 0, 0.85) !important;
    transform: scale(1.08);
}

/* Dot indicators */
.hero-slider-main .owl-dots {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    display: flex !important;  /* override any theme display:none */
    justify-content: center;
    gap: 10px;
    z-index: var(--z-slider-controls);
}

.hero-slider-main .owl-dots .owl-dot {
    display: block !important;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.40) !important;
    transition: width 0.3s ease, background 0.3s ease;
    cursor: pointer;
    padding: 0;
    border: none;
}

.hero-slider-main .owl-dots .owl-dot.active {
    background: var(--ko-orange) !important;
    width: 28px;
    border-radius: 10px;
}


/* ==========================================================================
   6. FOOTER
   Conflict notes:
   — color.php sets .btn-primary { background-color: #FF6A00 !important }
     To make the footer subscribe button blue we use .footer-subscribe-btn
     instead of .btn-primary — no conflict possible.
   — color.php sets .footer-social-links a { background: #FF6A00 !important }
     We scope our background to .footer-social-links i (the icon element)
     not the anchor — no conflict possible.
========================================================================== */

.site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 56px 0 24px;
    font-size: 14px;
    line-height: 1.7;
}

/* Widget titles */
.site-footer .widget-title {
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

/* The ::after underline decoration from color.php can show in footer.
   Override it here to keep the footer clean. */
.site-footer .widget-title::after {
    display: none !important;
}

/* Body text */
.site-footer p,
.site-footer li {
    color: var(--footer-muted);
}

/* Links — override color.php's generic 'a' rules inside footer */
.site-footer a {
    color: var(--footer-muted) !important;
    transition: color 0.25s ease;
    text-decoration: none;
}

.site-footer a:hover {
    color: #ffffff !important;
    text-decoration: none;
}

/* ----- Social icons -----
   We style the <i> tag, not the <a> tag, so color.php's
   .footer-social-links a { background: orange !important } rule
   applies to the anchor but our dark-circle background is on the icon.
   The icon sits on top of the anchor background, hiding it visually. */
.site-footer .footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.site-footer .footer-social-links a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* Shrink the anchor to icon size so the orange bg from color.php
       is hidden behind the icon circle below */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
}

.site-footer .footer-social-links i {
    width: 36px;
    height: 36px;
    line-height: 36px;
    background: var(--footer-surface);
    text-align: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 15px;
    transition: background 0.25s ease, color 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.site-footer .footer-social-links a:hover i {
    background: var(--footer-accent);
    color: #ffffff;
}

/* ----- Newsletter form ----- */
.site-footer .form-control {
    background: var(--footer-surface);
    border: 1px solid #374151;
    color: #ffffff;
    border-radius: 6px;
}

.site-footer .form-control::placeholder {
    color: var(--footer-muted);
}

.site-footer .form-control:focus {
    background: var(--footer-surface);
    border-color: var(--ko-orange);
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15);
    outline: none;
}

/* Subscribe button — named .footer-subscribe-btn to avoid color.php's
   .btn-primary { background: orange !important } conflict entirely */
.footer-subscribe-btn {
    background: var(--footer-accent);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease;
    white-space: nowrap;
}

.footer-subscribe-btn:hover {
    background: var(--footer-accent-hv);
    color: #ffffff;
}

/* If the Blade template hardcodes .btn-primary on the subscribe button
   and you cannot rename it, use this higher-specificity scoped rule instead:
   .site-footer .input-group .btn-primary { background: var(--footer-accent) !important; }
   — uncomment the line below only if needed */
/* .site-footer .input-group .btn-primary { background: var(--footer-accent) !important; } */

/* Payment gateway image */
.site-footer .gateway_image {
    max-width: 180px;
    height: auto;
    opacity: 0.85;
    filter: brightness(1.1);
}

/* Copyright bar */
.site-footer .footer-copyright {
    text-align: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #1f2937;
    font-size: 13px;
    color: var(--footer-subtle);
}

/* Widget spacing */
.site-footer .widget {
    margin-bottom: 28px;
}


/* ==========================================================================
   7. RESPONSIVE OVERRIDES
   All media queries in one place. Ordered largest → smallest.
   Desktop styles are the default above; overrides only go here.
========================================================================== */

/* ---------- Large tablet (992px and below) ---------- */
@media (max-width: 992px) {

    /* Header must stay above hero slider stacking context */
    .site-header {
        z-index: var(--z-header) !important;
    }

    .site-header .toolbar {
        z-index: var(--z-header) !important;
    }

    /* Hero slider */
    .hero-slider-main {
        z-index: var(--z-base) !important;
    }

    .hero-slider-main .item {
        height: var(--hero-height-tablet);
    }

    /* Full-width dark overlay on tablet — image detail less critical */
    .hero-slider-main .item::before {
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.88)   0%,
            rgba(0, 0, 0, 0.72)  60%,
            rgba(0, 0, 0, 0.45) 100%
        );
    }

    /* Centre-align slide content on tablet */
    .slide-content {
        text-align: center;
    }

    .slide-badge {
        margin: 0 auto 1.5rem auto;
    }

    .slide-title,
    .slide-description {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-btn {
        margin: 0 auto;
    }
}

/* ---------- Mobile (768px and below) ---------- */
@media (max-width: 768px) {

    /* Hero height — both properties set to the same value so neither
       overrides the other (the original bug was min-height: 85vh beating
       height: 500px on tall mobile screens) */
    .hero-slider-main .item {
        height: var(--hero-height-mobile);
        min-height: var(--hero-height-mobile);
    }

    /* Hide arrow navigation on mobile — dots are enough */
    .hero-slider-main .owl-nav {
        display: none !important;
    }

    /* Slide title uses clamp() globally; this is a safety cap for very
       small screens where clamp() might still be too large */
    .slide-title {
        font-size: 1.75rem;
    }

    .slide-description {
        font-size: 0.95rem;
    }

    .hero-btn {
        padding: 12px 28px;
        font-size: 0.95rem;
    }

    /* Footer stacks to single column naturally via Bootstrap grid.
       These rules handle edge cases. */
    .site-footer {
        padding: 40px 0 20px;
    }

    .site-footer .footer-social-links {
        justify-content: center;
    }

    .site-footer .footer-copyright {
        font-size: 12px;
    }
}

/* ---------- Small phones (576px and below) ---------- */
@media (max-width: 576px) {

    .hero-slider-main .item {
        height: var(--hero-height-mobile);
        min-height: var(--hero-height-mobile);
    }

    .slide-badge {
        font-size: 0.78rem;
        padding: 6px 16px;
    }

    .slide-title {
        font-size: 1.5rem;
    }

    .slide-description {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    .hero-btn {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
    }
}