/*
Theme Name: Eldoville Dairies
Theme URI: https://eldoville.co.ke
Author: Eldoville Developer
Author URI: https://eldoville.co.ke
Description: Eldoville Dairies WordPress theme converted from Milky Template
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eldoville-dairies
Tags: one-column, two-columns, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* --- Original template CSS below --- */

/********** Template CSS **********/
:root {
    /* Eldoville Farm brand palette — sampled directly from the logo
       (deep crimson gradient badge, black cow markings, white type/rings) */
    --primary: #A90137;        /* core brand crimson, from the logo's badge red */
    --primary-light: #CC0041;  /* the logo's brighter gradient corner */
    --primary-dark: #87012C;   /* shade of primary — link hover, dark accents */
    --primary-rgb: 169, 1, 55;
    --secondary: #F0CFDA;      /* soft blush tint of the crimson — light accent surfaces */
    --dark: #1C1414;           /* near-black, matches the cow's markings/outline */
    --light: #FBF3F1;          /* warm off-white, matches the logo's white */

    /* Mirrored onto Bootstrap's own custom properties in case any component reads these directly */
    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-dark: var(--dark);
    --bs-light: var(--light);
}

/* ===================================================================
   Brand Color Overrides — Eldoville Farm logo palette
   css/bootstrap.min.css ships pre-compiled from the original demo's
   green/yellow theme (colors baked directly into every utility class,
   not left as CSS variables), and there's no Sass source left to
   recompile. Rather than hand-edit that generated vendor file, we
   restate the classes this theme actually uses below — this stylesheet
   loads after bootstrap.min.css, so these values win the cascade.
   =================================================================== */
a {
    color: var(--primary);
}

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

.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.text-dark {
    color: var(--dark) !important;
}

.text-light {
    color: var(--light) !important;
}

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

.bg-secondary {
    background-color: var(--secondary) !important;
}

.bg-dark {
    background-color: var(--dark) !important;
}

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

/* Solid buttons — crimson reads dark enough to need white text (the old
   green/yellow demo colors were light enough for black text) */
.btn-primary {
    color: #FFFFFF;
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #FFFFFF;
    background-color: #90012F;
    border-color: #87012C;
}

.btn-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(182, 39, 85, .5);
}

.btn-primary:active,
.btn-primary.active {
    color: #FFFFFF;
    background-color: #87012C !important;
    border-color: #7F0129 !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #FFFFFF;
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-secondary {
    color: var(--dark);
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: var(--dark);
    background-color: #F2D6E0;
    border-color: #F2D4DE;
}

.btn-secondary:focus {
    box-shadow: 0 0 0 .25rem rgba(204, 176, 185, .5);
}

.btn-secondary:active,
.btn-secondary.active {
    color: var(--dark);
    background-color: #F2D6E0 !important;
    border-color: #F2D4DE !important;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    color: var(--dark);
    background-color: var(--secondary);
    border-color: var(--secondary);
}

/* Outline buttons */
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #FFFFFF;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-outline-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(169, 1, 55, .5);
}

.btn-outline-secondary {
    color: var(--dark);
    border-color: var(--secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: var(--dark);
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.btn-outline-secondary:focus {
    box-shadow: 0 0 0 .25rem rgba(240, 207, 218, .5);
}

/* Form focus rings (contact form, footer newsletter, search) */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #D4809B;
    box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-medium {
    font-weight: 600 !important;
}

.fw-semi-bold {
    font-weight: 500 !important;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .5s;
    font-weight: 500;
}

.btn-primary,
.btn-outline-primary:hover {
    color: var(--light);
}

.btn-secondary,
.btn-outline-secondary:hover {
    color: var(--dark);
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-nav .nav-link {
    margin-right: 35px;
    padding: 25px 0;
    color: var(--dark);
    font-size: 18px;
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    /* Neutral dark vignette, not a brand-color wash: the photos themselves (red
       berries, dark studio shots) already carry the brand mood, and a colored
       tint over green/outdoor scenes reads as an unnatural color-clash. Darker
       at both edges (text lands left on one slide, right on the other), clear
       through the middle so the photo still reads. */
    background: linear-gradient(90deg, rgba(20, 14, 14, .65) 0%, rgba(20, 14, 14, .15) 30%, rgba(20, 14, 14, .15) 70%, rgba(20, 14, 14, .65) 100%);
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 3rem;
    background-color: var(--primary);
    border: 10px solid var(--primary);
}

/* Hero fills exactly the space below the sticky navbar, so the very next
   section (About) starts right at the fold instead of the visitor having to
   scroll past leftover hero image first. The old rule sized the hero off the
   image's own aspect ratio (width / 1.78), which only matched a 100vh-tall
   viewport by coincidence — anything narrower/shorter and the image ran
   taller than the screen. 100dvh (where supported) also accounts for mobile
   browser toolbars showing/hiding as the visitor scrolls. */
#header-carousel,
#header-carousel .carousel-inner,
#header-carousel .carousel-item {
    height: calc(100vh - 93px);
    height: calc(100dvh - 93px);
    min-height: 480px;
}

#header-carousel .carousel-item {
    position: relative;
}

#header-carousel .carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    /* Navbar is shorter once it collapses to the hamburger toggler */
    #header-carousel,
    #header-carousel .carousel-inner,
    #header-carousel .carousel-item {
        height: calc(100vh - 66px);
        height: calc(100dvh - 66px);
    }
}

.page-header {
    /* Dark studio product shot (cheese/wine) instead of the green pasture photo —
       a brand-red tint over green grass read as an unnatural color-clash, so we
       swap the photo instead of forcing a red wash onto a mismatched one. Only a
       neutral dark scrim is needed for the centered white title/breadcrumb to read. */
    background: linear-gradient(rgba(20, 14, 14, .55), rgba(20, 14, 14, .65)), url(img/page-header-bg.jpg) center center no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-size: 18px;
    color: var(--light);
}


/*** Section Title ***/
.section-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
}

.section-title::before {
    position: absolute;
    content: "";
    width: calc(100% + 80px);
    height: 2px;
    top: 5px;
    left: -40px;
    background: var(--primary);
    z-index: -1;
}

.section-title::after {
    position: absolute;
    content: "";
    width: calc(100% + 120px);
    height: 2px;
    bottom: 6px;
    left: -60px;
    background: var(--primary);
    z-index: -1;
}

.section-title.text-start::before {
    width: calc(100% + 40px);
    left: 0;
}

.section-title.text-start::after {
    width: calc(100% + 60px);
    left: 0;
}


/*** About ***/
.about-experience {
    position: absolute;
    width: 100%;
    height: 100%;
    right: -45px;
    bottom: -45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/*** Service ***/
.service-item {
    position: relative;
    border-radius: 8px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
}

.service-item .service-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 8px;
    overflow: hidden;
    z-index: -1;
}

.service-item .service-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    object-fit: cover;
    border-radius: 10px;
}

.service-item .service-img::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    z-index: 1;
}

.service-item .service-img::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #FFFFFF;
    transition: .5s ease-out;
    z-index: 2;
}

.service-item:hover .service-img::after {
    width: 0;
    left: auto;
    right: 0;
}

.service-item .service-text .service-icon {
    width: 140px;
    height: 140px;
    padding: 15px;
    margin-top: -70px;
    margin-bottom: 40px;
    background: #FFFFFF;
    border-radius: 140px;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(0, 0, 0, .1);
}

.service-item .service-text h5,
.service-item .service-text p {
    transition: .5s;
}

.service-item:hover .service-text h5,
.service-item:hover .service-text p {
    color: #FFFFFF;
}

.service-item .service-text .btn {
    color: var(--secondary);
    background: #FFFFFF;
    box-shadow: 0 0 45px rgba(0, 0, 0, .25);
}

.service-item .service-text .btn:hover {
    color: var(--dark);
    background: var(--secondary);
}


/*** Product ***/
.product-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
}

.product-item .product-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    padding-top: 60px;
    transition: .5s;
}

.product-item:hover .product-overlay {
    opacity: 1;
    padding-top: 0;
}


/*** Team ***/
.team-item {
    position: relative;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
}

.team-item .btn {
    border-color: transparent;
    box-shadow: 0 0 45px rgba(0, 0, 0, .2);
}


/*** Testimonial ***/
.testimonial-img {
    position: relative;
    min-height: 400px;
}

.testimonial-img::after {
    position: absolute;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 200px;
    color: #EEEEEE;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.testimonial-img img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 100px;
}

.testimonial-img img:nth-child(1) {
    top: 0;
    left: 0;
}

.testimonial-img img:nth-child(2) {
    top: 60%;
    left: 20%;
}

.testimonial-img img:nth-child(3) {
    top: 20%;
    left: 60%;
}

.testimonial-img img:nth-child(4) {
    bottom: 0;
    right: 0;
}

.testimonial-img img .animated.pulse {
    animation-duration: 2s;
}

.testimonial-carousel .owl-item img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
}

.testimonial-carousel .owl-nav {
    margin-top: 30px;
    display: flex;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    margin-right: 15px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    border-radius: 45px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .2);
    font-size: 22px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--secondary);
    color: var(--dark);
}


/*** Footer ***/
.footer {
    color: #C9B7BB; /* muted rose-gray — was a leftover sage-green (#B0B9AE) from the old theme */
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #C9B7BB;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--light);
    letter-spacing: 1px;
    box-shadow: none;
}

.copyright a {
    color: var(--light);
}

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

/* --- WooCommerce Custom Overrides --- */

/* Hide duplicate title on single product page (since our page-hero already shows it) */
.woocommerce div.product .product_title {
    display: none !important;
}

/* Match WooCommerce buttons to theme's rounded secondary buttons */
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
.woocommerce #respond input#submit {
    background-color: var(--secondary) !important;
    color: var(--dark) !important;
    border-radius: 50rem !important; /* Pill shape */
    padding: 0.5rem 1.5rem !important;
    font-weight: 500 !important;
    transition: 0.5s !important;
    border: none !important;
}

.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover, 
.woocommerce #respond input#submit:hover {
    background-color: var(--primary) !important;
    color: var(--light) !important;
}

/* Form fields styling to match Bootstrap 5 */
.woocommerce-page form .form-row input.input-text, 
.woocommerce-page form .form-row textarea {
    border-radius: 0.5rem !important;
    padding: 0.75rem !important;
    border: 1px solid #ced4da !important;
}

/* --- Layout Constraints (Maximum Width & Padding) --- */
/* Target WooCommerce pages specifically to create a more focused, narrower layout */
body.woocommerce .container-xxl > .container {
    max-width: 960px !important; 
    padding-left: 40px !important;
    padding-right: 40px !important;
}

@media (min-width: 992px) {
    /* Adjust single product proportions so the image isn't massive */
    .woocommerce #content div.product div.images, 
    .woocommerce div.product div.images, 
    .woocommerce-page #content div.product div.images, 
    .woocommerce-page div.product div.images {
        width: 40% !important; /* Default was 48% */
    }
    
    .woocommerce #content div.product div.summary, 
    .woocommerce div.product div.summary, 
    .woocommerce-page #content div.product div.summary, 
    .woocommerce-page div.product div.summary {
        width: 55% !important; /* Default was 48% */
    }
}