/*
 Theme Name:   Plyman.co.nz
 Description:  This is a child theme of Bootscore Theme and requires BootScore to run as Requires.
 Author:       Primal Media Limited
 Author URI:   https://priamlmedia.nz
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 8.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/

a {
    color: #f3ab3b;
    text-decoration: none;
}

.woocommerce-result-count {
    font-weight: bolder;
}

footer .bg-body-tertiary {
    background-color: #393432 !important;
    color: #a6a49a;
}

footer .bg-body-tertiary h2,
footer .bg-body-tertiary h3 {
    color: #fff;
    font-size: 1.2rem;

}

footer .bg-body-tertiary a {
    color: #A6A49A;
}

footer .bg-body-tertiary a:hover {
    color: #FCC132;
}

footer .bootscore-footer-info {
    background-color: #2d2928 !important;
    color: #A6A49A !important;
    font-size: 1.1rem important;
}



@media (min-width: 992px) {
  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: block;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}

/* Targets the product column wrapper on screens below the MD breakpoint (XS and SM) */
@media (max-width: 767.98px) { 
    /* Using multiple parent selectors to achieve maximum specificity */
    #content .products.row > .col-md-6,
    #content .products.row > .col-lg-4,
    #content .products.row > .col-xxl-3 {
        /* Force the width to 50% (col-6 equivalent) */
        width: 50% !important;
        
        /* Ensure flexbox sizing is correct for side-by-side display */
        flex: 0 0 auto !important;
    }
}


/* Reverses the order of the main content and sidebar for large screens (Lg breakpoint and up) */
@media (min-width: 992px) {
    /* Target the main product column */
    .content-area > .row > .col-lg-9 {
        order: 2;
    }
    
    /* Target the sidebar column */
    .content-area > .row > .col-lg-3 {
        order: 1; 
    }
}

/* 1. Remove rounded corners (Make them square) */
.btn {
    border-radius: 0 !important;
}

/* 2. Change the background color for all button variants */
.btn-primary, 
.btn-secondary, 
.btn-success, 
.btn-danger, 
.btn-warning, 
.btn-info, 
.btn-light, 
.btn-dark {
    /* Set the background color */
    background-color: #fdc132 !important;
    
    /* Set the border color to match the background */
    border-color: #fdc132 !important;
    
    /* Ensure the text color provides sufficient contrast */
    color: #000000 !important; /* Black text for high contrast */
}

/* 3. Handle the Hover, Focus, and Active states */
.btn-primary:hover, 
.btn-secondary:hover, 
.btn-warning:hover,
/* ... include all variants here ... */
.btn-dark:hover,
.btn-primary:focus, 
.btn-primary:active {
    /* Darken the color slightly for visual feedback on interaction */
    background-color: #e5ae2f !important; 
    border-color: #e5ae2f !important;
    color: #000000 !important;
    
    /* Remove the default Bootstrap shadow on focus/active */
    box-shadow: none !important;
}

/* 4. Optional: Fix for Outline Buttons */
.btn-outline-primary, 
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    /* Set the border color */
    border-color: #fdc132 !important;
    /* Set the text color */
    color: #fdc132 !important;
}

.btn-outline-primary:hover {
    /* Use the solid color for the hover state */
    background-color: #fdc132 !important;
    color: #000000 !important;
}

/* 1. Square Corners */
/* Target the specific WooCommerce button classes */
.single_add_to_cart_button,
button.button, 
.button.alt {
    border-radius: 0 !important;
}

/* 2. Color Overrides for the Disabled/Default State */
/* Target the button with all its classes for maximum specificity */
button.single_add_to_cart_button.button.alt,
button.single_add_to_cart_button.button.alt.disabled {
    /* Background and Border Color */
    background-color: #fdc132 !important;
    border-color: #fdc132 !important;
    
    /* Text Color for contrast on light background */
    color: #000000 !important; 
}


/* 3. Handle Active/Enabled State */
/* When the user selects a variation, the 'disabled' class is removed */
button.single_add_to_cart_button.button.alt:not(:disabled) {
    background-color: #fdc132 !important;
    border-color: #fdc132 !important;
    color: #000000 !important;
}

/* 4. Handle Hover, Focus, and Active States */
button.single_add_to_cart_button.button.alt:hover,
button.single_add_to_cart_button.button.alt:focus,
button.single_add_to_cart_button.button.alt:active {
    /* Use a slightly darker shade for visual feedback on interaction */
    background-color: #e5ae2f !important; 
    border-color: #e5ae2f !important;
    color: #000000 !important;
    box-shadow: none !important;
}

/* 1. Target the button when the parent card is hovered */
/* This targets the product loop buttons (Add to cart, Select options) */
.products .card:hover .add_to_cart_button,
.products .card:hover .product_type_variable,
.products .card:hover a.button,
/* Include your specific button if it's outside the loop */
.shop_by_button:hover {
    /* Explicitly apply the animation properties */
    -webkit-animation: rubberBand .8s ease;
    -moz-animation: rubberBand .8s ease;
    -ms-animation: rubberBand .8s ease;
    -o-animation: rubberBand .8s ease;
    animation: rubberBand .8s ease;
    
    /* Ensure the animation resets to run again on subsequent hovers */
    animation-iteration-count: 1; 
    animation-fill-mode: forwards;
}

/* 2. Define the @keyframes (Keep this block as it is correct) */
@keyframes rubberBand {
    from, to {
        transform: scale3d(1,1,1)
    }

    30% {
        transform: scale3d(1.1,.75,1)
    }

    40% {
        transform: scale3d(.75,1.25,1)
    }

    50% {
        transform: scale3d(1.1,.85,1)
    }

    65% {
        transform: scale3d(.95,1.05,1)
    }

    75% {
        transform: scale3d(1.05,.95,1)
    }
}

/* You can still keep the utility class for general use if you like */
.rubberBand {
    animation-name: rubberBand
}

/* 1. Style the ACTIVE/CURRENT Page Number */
/* This targets the '1' in your example, which uses the <span> tag */
.pagination .page-item .page-link.active,
.pagination .page-item span.page-link.active {
    /* Set the button color */
    background-color: #fdc132 !important;
    border-color: #fdc132 !important;
    
    /* Set the text color for contrast */
    color: #000000 !important; 
}

/* 2. Style HOVER and FOCUS States for clickable links (e.g., page 2 and the '»' button) */
.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus {
    /* Use a slightly darker shade for visual feedback on interaction */
    background-color: #e5ae2f !important; 
    border-color: #e5ae2f !important;
    
    /* Ensure text remains visible */
    color: #000000 !important;
    
    /* Remove default Bootstrap box-shadow on focus */
    box-shadow: none !important; 
}

/* 3. Style the Default (Inactive) Page Link Text */
/* This ensures the link color (e.g., page '2' text) is dark and readable */
.pagination .page-item .page-link {
    color: #000000; 
}

/* 1. Remove rounded edges from all pagination links */
.pagination .page-link {
    border-radius: 0 !important;
}

/* 2. Specific override for the first and last items (standard Bootstrap behavior) */
/* The span for the first page (active) */
.pagination .page-item:first-child .page-link {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* The link for the last item (e.g., the '»' button) */
.pagination .page-item:last-child .page-link {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 1. Style the active link in the main navbar (text remains orange) */
.navbar-nav .nav-item .nav-link.active {
    color: #fdc132 !important; 
}

/* ------------------------------------------------------------- */
/* --- DROPDOWN MENU STYLES --- */

/* 2. PERSISTENT ACTIVE ITEM (The current page) - BRIGHT ORANGE BG */
.dropdown-menu .dropdown-item.active {
    background-color: #fdc132 !important; /* Bright Orange BG */
    color: #000000 !important;           /* Black Text */
}

/* 3. INTERACTION STATES (HOVER, FOCUS, CLICK/ACTIVE) - DARKER ORANGE BG */
/* This covers all menu items when the mouse is over them, they are tabbed to, or they are being clicked/pressed. */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
    background-color: #e5ae2f !important; /* Slightly Darker Orange BG */
    color: #000000 !important;           /* Black Text */
}

/* 4. Hover/Focus/Active states for the persistent active item */
/* If the user interacts with the CURRENT page link, keep the darker orange color. */
.dropdown-menu .dropdown-item.active:hover,
.dropdown-menu .dropdown-item.active:focus,
.dropdown-menu .dropdown-item.active:active {
    background-color: #e5ae2f !important; /* Slightly Darker Orange BG */
    color: #000000 !important;
}

.dropdown-menu {
    border-radius: 0;
}

/* --- ULTIMATE FIX FOR HIDDEN 3RD LEVEL DROPDOWNS --- */
@media (min-width: 992px) {
    
    /* 1. Reset all hiding properties for the Level 3 menu */
    /* Targets the inner UL (the Level 3 menu) which has the class 'dropdown-menu sub-menu' */
    .dropdown-menu .dropdown-menu.sub-menu {
        /* Force it to stay hidden until the parent is hovered */
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        
        /* Positioning: Pops out to the side (dropend) */
        top: 0;
        left: 100%;
        margin-top: -6px; 
        margin-left: 0.1rem; 
    }
    
    /* 2. FORCE DISPLAY ON HOVER */
    /* Selects the Level 3 UL when the Level 2 LI is hovered */
    .dropdown-menu > .menu-item-has-children:hover > .dropdown-menu.sub-menu {
        /* This is the key override */
        display: block !important; 
        visibility: visible !important;
        opacity: 1 !important;
        
        /* Ensure the position is always absolute to float freely */
        position: absolute; 
    }

    /* 3. Keep the parent link styled correctly on hover */
    .dropdown-menu > .menu-item-has-children:hover > .dropdown-item {
        background-color: #e5ae2f !important; 
        color: #000000 !important;
    }

    /* FIX: Force Level 2 items (Plywood, MDF) to be visible */
    /* This targets the <li> elements that incorrectly have the 'dropdown-menu' class applied. */
    .dropdown-menu li.dropdown-menu {
        /* 1. Force the element to appear */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        
        /* 2. Reset any conflicting position styles that hide it off-screen */
        position: static !important; 
        left: auto !important;
        top: auto !important;
        
        /* 3. Ensure background and layout is clean */
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        
        /* 4. Reset the standard Bootstrap dropdown width which might be overriding */
        min-width: 100% !important; 
    }
}

.woocommerce .card .woocommerce-loop-product__title {
    font-size: 1.0rem;
}

/* 1. Make the Carousel fill the viewport height minus the header (optional) */
.vh-100 {
    height: 100vh !important; /* Full browser height */
}

/* 2. If your header is "sticky" or "fixed", you might want height: calc(100vh - 70px); */

/* 3. Ensure the main content container doesn't limit the width */
/* bootScore usually puts everything in a .container, we need to break out */
#heroCarousel {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
}

/* 4. Fix for mobile so images don't look squashed */
@media (max-width: 768px) {
    .vh-100 {
        height: 70vh !important; /* Slightly shorter on mobile for better UX */
    }
}

.carousel-indicators [button] {
    width: 12px;
    height: 12px;
    border-radius: 50%; /* Makes them circles */
    margin: 0 5px;
    background-color: #fff;
    border: 2px solid rgba(0,0,0,0.2);
    opacity: 0.7;
}

.carousel-indicators .active {
    opacity: 1;
    background-color: var(--bs-primary); /* Uses your bootScore primary color */
}

        /* Container for the contact block to provide padding */
        .plyman-footer-contact {
            width: fit-content; /* Container fits the content width */
        }

        /* Styling for the overall lists and list items */
        .contact-list, .social-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* Styling for a single contact item (icon and text block) */
        .contact-item {
            display: flex; /* Aligns icon and text horizontally */
            align-items: flex-start; /* Aligns text top with icon top */
            margin-bottom: 25px; /* Spacing between contact items */
        }

        /* Styling for the circular contact icon containers */
        .icon-container {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid #e19d3f; /* Orange/Gold color from image */
            color: #e19d3f;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px; /* Spacing between icon and text */
            font-size: 18px; /* Icon size */
            flex-shrink: 0; /* Prevents the circle from squishing */
        }

        /* Styling for the text content next to an icon */
        .text-content {
            display: flex;
            flex-direction: column; /* Stacks text lines vertically */
        }

        /* Base styling for contact labels (e.g., "Call us") */
        .label {
            color: #ffffff; /* White color from image */
            font-size: 14px;
            margin-bottom: 3px;
        }

        /* Styling for values (e.g., number, address) */
        .value {
            color: #afadac; /* Grey color from image */
            font-size: 14px;
            margin-bottom: 3px;
        }

        /* Specific style for the phone number */
        .phone-value {
            color: #e19d3f; /* Orange/Gold color for the phone number */
            font-weight: bold;
            font-size: 16px;
        }

        /* Link specific styling for email */
        .value a {
            color: inherit; /* Inherits grey color */
            text-decoration: underline; /* Email is underlined in the image */
        }

        /* Specific margin adjustment for the second line of the address */
        .address-line2 {
            margin-left: 0; /* Adjust if needed to align perfectly */
        }

        /* --- Follow Us Section --- */

        /* Title for the follow section */
        /* Container for the whole "Follow Us" row */
        .follow-us {
            display: flex;
            align-items: center; /* Aligns "Follow Us" text vertically with icons */
            margin-top: 30px;
        }

        /* The Title */
        .follow-title {
            color: #ffffff;
            font-size: 18px;
            font-weight: bold;
            margin: 0 20px 0 0; /* Right margin creates space before icons */
        }

       /* The UL - This is the fix you need */
        .social-list {
            display: flex;       /* Lays the LI items horizontally */
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* Spacing between the icons */
        .social-item {
            margin-right: 12px;
        }

        /* Icon circle styling */
        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #3b3635; /* Dark circular background from image */
            color: #ffffff;
            text-decoration: none;
            font-size: 16px;
            transition: background 0.3s;
        }

        .social-link:hover {
            background-color: #4a4442;
        }




/* FRONT PAGE CLASS */


        .section-title {
            color: #a5a5a5;
            font-weight: 700;
            margin-bottom: 40px;
            text-align: center;
        }

        .product-card {
            margin-bottom: 30px;
        }

        .product-image {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            margin-bottom: 15px;
        }

        .product-title {
            font-size: 1rem;
            font-weight: 700;
            color: #a5a5a5;
            margin-bottom: 15px;
        }

        .product-description {
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 15px;
            min-height: 80px; /* Helps keep buttons aligned */
        }

        .btn-more {
            color: #f1b434;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            transition: opacity 0.2s;
        }

        .btn-more:hover {
            color: #d19a2a;
            opacity: 0.8;
        }

        .arrow-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border: 1.5px solid #f1b434;
            border-radius: 50%;
            margin-left: 8px;
            font-size: 1.2rem;
        }