/*
 * ============================================================
 * ROOFER'S CORNER
 * WOOCOMMERCE CATEGORY / SUBCATEGORY PAGE
 * ============================================================
 *
 * File:
 * category.css
 *
 * Used by:
 * category-with-subcategories.php
 *
 * Brand:
 * Orange: #fda12b
 * Navy:  #182333
 *
 * Desktop:
 * 3 columns
 *
 * Tablet:
 * 2 columns
 *
 * Mobile:
 * 1 column
 * ============================================================
 */


/* ============================================================
   ROOT VARIABLES
   ============================================================ */

.rc-category-page {
    --rc-orange: #fda12b;
    --rc-navy: #182333;
    --rc-navy-dark: #111c2b;

    --rc-white: #ffffff;

    --rc-text: #182333;
    --rc-muted: #64748b;
    --rc-description: #d5dbe2;

    --rc-border: #dfe3e7;
    --rc-light-bg: #f5f6f7;

    --rc-radius: 8px;

    --rc-container-width: 1180px;
}


/* ============================================================
   MAIN CATEGORY PAGE
   ============================================================ */

.rc-category-page {
    width: 100%;

    margin: 0;
    padding: 0;

    background: #ffffff;

    box-sizing: border-box;
}

.rc-category-page *,
.rc-category-page *::before,
.rc-category-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   CATEGORY CONTAINER
   ============================================================ */

.rc-category-container {
    width: 100%;

    max-width: var(--rc-container-width);

    margin-left: auto;
    margin-right: auto;

    padding-top: 30px;
    padding-right: 20px;
    padding-bottom: 70px;
    padding-left: 20px;
}


/* ============================================================
   BREADCRUMB
   ============================================================ */

.rc-breadcrumb {
    width: 100%;

    margin: 0 0 55px 0;
    padding: 0;

    font-size: 16px;

    line-height: 1.6;

    color: var(--rc-muted);
}


/* Breadcrumb links */

.rc-breadcrumb a {
    color: var(--rc-muted) !important;

    text-decoration: none !important;

    transition:
        color 0.2s ease;
}


/* Breadcrumb hover */

.rc-breadcrumb a:hover {
    color: var(--rc-orange) !important;
}


/* Breadcrumb separator */

.rc-breadcrumb span {
    display: inline-block;
}


/* Slash */

.rc-breadcrumb > span:not(.rc-breadcrumb-current) {
    margin-left: 7px;
    margin-right: 7px;

    color: #a0a8b0;
}


/* Current category */

.rc-breadcrumb-current {
    color: var(--rc-text);
}


/* ============================================================
   CATEGORY HEADER
   ============================================================ */

.rc-category-header {
    width: 100%;

    margin: 0 0 50px 0;

    padding: 0;

    text-align: center;
}


/* ============================================================
   CATEGORY TITLE
   ============================================================ */

.rc-category-header h1,
.rc-category-heading {
    margin-top: 0 !important;

    margin-right: 0 !important;

    margin-bottom: 18px !important;

    margin-left: 0 !important;

    padding: 0 !important;

    color: var(--rc-navy) !important;

    font-size: 44px !important;

    line-height: 1.2 !important;

    font-weight: 700 !important;

    text-transform: none !important;

    letter-spacing: 0 !important;

    border: none !important;
}


/* ============================================================
   CATEGORY INTRO DESCRIPTION
   ============================================================ */

.rc-category-intro {
    width: 100%;

    max-width: 850px;

    margin-left: auto;
    margin-right: auto;

    color: var(--rc-muted);

    font-size: 18px;

    line-height: 1.7;

    text-align: center;
}


/* Remove default paragraph margins */

.rc-category-intro p {
    margin-top: 0;

    margin-bottom: 10px;
}


/* ============================================================
   SUBCATEGORY GRID
   ============================================================ */

.rc-category-grid {
    width: 100%;

    margin: 0;
    padding: 0;

    display: grid;

    /*
     * IMPORTANT:
     * Exactly 3 columns on desktop.
     */

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    column-gap: 30px;

    row-gap: 30px;

    align-items: stretch;
}


/* ============================================================
   SUBCATEGORY CARD
   ============================================================ */

.rc-category-card {
    position: relative;

    width: 100%;

    min-width: 0;

    margin: 0 !important;

    padding: 0 !important;

    background: var(--rc-light-bg);

    border: 1px solid var(--rc-border);

    border-radius: var(--rc-radius);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    height: 100%;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* Card hover */

.rc-category-card:hover {
    transform: translateY(-4px);

    border-color: #d2d7dc;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.10);
}


/* ============================================================
   CATEGORY IMAGE AREA
   ============================================================ */

.rc-category-image {
    position: relative;

    width: 100%;

    height: 245px;

    margin: 0;

    padding: 18px;

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


/* ============================================================
   CATEGORY IMAGE
   ============================================================ */

.rc-category-image img,
.rc-category-image-img {
    display: block;

    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

    max-height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    object-fit: contain !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* ============================================================
   CATEGORY CONTENT
   ============================================================ */

.rc-category-content {
    position: relative;

    width: 100%;

    min-width: 0;

    min-height: 175px;

    margin: 0;

    padding: 22px;

    background: var(--rc-navy);

    display: flex;

    flex-direction: column;

    flex: 1;
}


/* ============================================================
   CATEGORY TITLE
   ============================================================ */

.rc-category-title {
    width: 100%;

    margin-top: 0 !important;

    margin-right: 0 !important;

    margin-bottom: 10px !important;

    margin-left: 0 !important;

    padding: 0 !important;

    font-size: 21px !important;

    line-height: 1.35 !important;

    font-weight: 600 !important;

    letter-spacing: 0 !important;

    text-transform: none !important;

    border: none !important;
}


/* ============================================================
   CATEGORY TITLE LINK
   ============================================================ */

.rc-category-title a {
    display: inline;

    color: #ffffff !important;

    text-decoration: none !important;

    border: none !important;

    box-shadow: none !important;

    transition:
        color 0.2s ease;
}


/* Title hover */

.rc-category-title a:hover {
    color: var(--rc-orange) !important;

    text-decoration: none !important;
}


/* ============================================================
   CATEGORY DESCRIPTION
   ============================================================ */

.rc-category-description {
    width: 100%;

    margin: 0 0 18px 0;

    padding: 0;

    color: var(--rc-description);

    font-size: 14px;

    line-height: 1.6;

    font-weight: 400;
}


/* Remove paragraphs if any */

.rc-category-description p {
    margin: 0;
    padding: 0;
}


/* ============================================================
   VIEW SYSTEM & SIZES LINK
   ============================================================ */

.rc-category-link {
    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    width: fit-content;

    max-width: 100%;

    margin-top: auto;

    margin-right: 0;

    padding: 0;

    color: var(--rc-orange) !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 0.2px;

    text-transform: uppercase;

    text-decoration: none !important;

    white-space: nowrap;

    transition:
        color 0.2s ease;
}


/* Link hover */

.rc-category-link:hover {
    color: #ffffff !important;

    background: transparent !important;

    text-decoration: none !important;
}


/* ============================================================
   LINK ARROW
   ============================================================ */

.rc-category-link span,
.rc-category-arrow {
    display: inline-block;

    margin-left: 6px;

    font-size: 18px;

    line-height: 1;

    transition:
        transform 0.2s ease;
}


/* Arrow hover */

.rc-category-link:hover span,
.rc-category-link:hover .rc-category-arrow {
    transform: translateX(5px);
}


/* ============================================================
   PRODUCT GRID
   ============================================================
   
   This section is used ONLY when the current category
   has NO subcategories.
   ============================================================ */

.rc-products-grid {
    width: 100%;

    margin: 0;
    padding: 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    column-gap: 30px;

    row-gap: 30px;

    align-items: stretch;
}


/* ============================================================
   PRODUCT CARD
   ============================================================ */

.rc-product-card {
    position: relative;

    width: 100%;

    min-width: 0;

    margin: 0 !important;

    padding: 0 !important;

    background: #ffffff;

    border: 1px solid var(--rc-border);

    border-radius: var(--rc-radius);

    overflow: hidden;

    display: flex !important;

    flex-direction: column;

    height: 100%;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Product card hover */

.rc-product-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.10);
}


/* ============================================================
   PRODUCT IMAGE
   ============================================================ */

.rc-product-image {
    width: 100%;

    height: 260px;

    margin: 0;

    padding: 20px;

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


/* Product image */

.rc-product-image img {
    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

    max-height: 100% !important;

    margin: 0 !important;

    object-fit: contain !important;
}


/* ============================================================
   PRODUCT CONTENT
   ============================================================ */

.rc-product-content {
    width: 100%;

    min-height: 160px;

    padding: 22px;

    background: var(--rc-navy);

    display: flex;

    flex-direction: column;

    flex: 1;
}


/* ============================================================
   PRODUCT TITLE
   ============================================================ */

.rc-product-content h2,
.rc-product-title {
    margin: 0 0 12px 0 !important;

    padding: 0 !important;

    font-size: 18px !important;

    line-height: 1.4 !important;

    font-weight: 600 !important;

    text-transform: none !important;
}


/* Product title link */

.rc-product-content h2 a,
.rc-product-title a {
    color: #ffffff !important;

    text-decoration: none !important;
}


/* Product title hover */

.rc-product-content h2 a:hover,
.rc-product-title a:hover {
    color: var(--rc-orange) !important;
}


/* ============================================================
   PRODUCT PRICE
   ============================================================ */

.rc-product-price {
    margin: 0 0 15px 0;

    padding: 0;

    color: var(--rc-orange);

    font-size: 18px;

    line-height: 1.4;

    font-weight: 600;
}


/* Sale price */

.rc-product-price ins {
    text-decoration: none;
}


/* Old price */

.rc-product-price del {
    opacity: 0.6;
}


/* ============================================================
   PRODUCT BUTTON
   ============================================================ */

.rc-product-button {
    width: fit-content;

    margin-top: auto;

    padding: 0;

    color: var(--rc-orange) !important;

    background: transparent !important;

    border: none !important;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 700;

    text-transform: uppercase;

    text-decoration: none !important;
}


/* Product button hover */

.rc-product-button:hover {
    color: #ffffff !important;

    background: transparent !important;
}


/* ============================================================
   PAGINATION
   ============================================================ */

.rc-pagination {
    width: 100%;

    margin-top: 45px;

    text-align: center;
}


/* Pagination list */

.rc-pagination ul {
    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;
}


/* Pagination item */

.rc-pagination li {
    margin: 0;

    padding: 0;
}


/* Pagination links */

.rc-pagination a,
.rc-pagination span {
    display: inline-block;

    padding: 9px 14px;

    color: var(--rc-navy);

    background: #ffffff;

    border: 1px solid var(--rc-border);

    text-decoration: none !important;
}


/* Pagination hover */

.rc-pagination a:hover,
.rc-pagination .current {
    color: #ffffff;

    background: var(--rc-orange);

    border-color: var(--rc-orange);
}


/* ============================================================
   NO PRODUCTS
   ============================================================ */

.rc-no-products {
    width: 100%;

    padding: 60px 20px;

    text-align: center;

    background: #f8f9fa;

    border: 1px solid var(--rc-border);
}


/* No products heading */

.rc-no-products h2 {
    margin: 0 0 10px 0 !important;

    color: var(--rc-navy) !important;
}


/* No products text */

.rc-no-products p {
    margin: 0;

    color: var(--rc-muted);
}


/* ============================================================
   TABLET
   768px - 991px
   ============================================================ */

@media screen and (min-width: 768px) and (max-width: 991px) {

    .rc-category-container {
        padding-left: 25px;
        padding-right: 25px;
    }


    /*
     * 2 columns on tablet
     */

    .rc-category-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 25px;

        row-gap: 25px;
    }


    .rc-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 25px;

        row-gap: 25px;
    }


    .rc-category-header h1,
    .rc-category-heading {
        font-size: 38px !important;
    }


    .rc-category-image {
        height: 230px;
    }

}


/* ============================================================
   MOBILE
   320px - 767px
   ============================================================ */

@media screen and (min-width: 320px) and (max-width: 767px) {

    .rc-category-container {
        width: 100%;

        padding-top: 20px;

        padding-right: 15px;

        padding-bottom: 50px;

        padding-left: 15px;
    }


    /* -----------------------------------------
       Breadcrumb
       ----------------------------------------- */

    .rc-breadcrumb {
        margin-bottom: 30px;

        font-size: 14px;

        line-height: 1.8;
    }


    .rc-breadcrumb > span {
        display: inline;
    }


    /* -----------------------------------------
       Header
       ----------------------------------------- */

    .rc-category-header {
        margin-bottom: 30px;
    }


    .rc-category-header h1,
    .rc-category-heading {
        margin-bottom: 15px !important;

        font-size: 30px !important;

        line-height: 1.25 !important;
    }


    .rc-category-intro {
        font-size: 15px;

        line-height: 1.6;
    }


    /* -----------------------------------------
       IMPORTANT:
       One column on mobile
       ----------------------------------------- */

    .rc-category-grid {
        grid-template-columns: 1fr;

        column-gap: 0;

        row-gap: 20px;
    }


    .rc-products-grid {
        grid-template-columns: 1fr;

        column-gap: 0;

        row-gap: 20px;
    }


    /* -----------------------------------------
       Category image
       ----------------------------------------- */

    .rc-category-image {
        height: 220px;

        padding: 15px;
    }


    /* -----------------------------------------
       Category content
       ----------------------------------------- */

    .rc-category-content {
        min-height: 170px;

        padding: 20px;
    }


    /* -----------------------------------------
       Category title
       ----------------------------------------- */

    .rc-category-title {
        font-size: 19px !important;

        line-height: 1.35 !important;
    }


    /* -----------------------------------------
       Description
       ----------------------------------------- */

    .rc-category-description {
        font-size: 14px;

        line-height: 1.55;

        margin-bottom: 16px;
    }


    /* -----------------------------------------
       View link
       ----------------------------------------- */

    .rc-category-link {
        font-size: 13px;
    }


    /* -----------------------------------------
       Product image
       ----------------------------------------- */

    .rc-product-image {
        height: 230px;

        padding: 15px;
    }


    /* -----------------------------------------
       Product content
       ----------------------------------------- */

    .rc-product-content {
        min-height: 150px;

        padding: 20px;
    }


    /* -----------------------------------------
       Product title
       ----------------------------------------- */

    .rc-product-content h2,
    .rc-product-title {
        font-size: 18px !important;
    }


    /* -----------------------------------------
       Pagination
       ----------------------------------------- */

    .rc-pagination {
        margin-top: 30px;
    }

}


/* ============================================================
   VERY SMALL MOBILE
   Under 400px
   ============================================================ */

@media screen and (max-width: 399px) {

    .rc-category-container {
        padding-left: 12px;
        padding-right: 12px;
    }


    .rc-category-header h1,
    .rc-category-heading {
        font-size: 27px !important;
    }


    .rc-category-image {
        height: 200px;
    }


    .rc-category-content {
        padding: 18px;
    }


    .rc-category-title {
        font-size: 18px !important;
    }

}


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

.rc-category-card a:focus-visible,
.rc-product-card a:focus-visible {
    outline: 3px solid var(--rc-orange);

    outline-offset: 3px;
}


/* ============================================================
   PREVENT THE PARENT THEME FROM ADDING UNDERLINES
   ============================================================ */

.rc-category-page a,
.rc-category-page a:hover,
.rc-category-page a:focus {
    text-decoration: none !important;
}


/* ============================================================
   PREVENT WOOCOMMERCE DEFAULT PRODUCT CARD STYLING
   ============================================================ */

.rc-category-page ul.products,
.rc-category-page ul.products li.product {
    margin: 0;
    padding: 0;
}


/* ============================================================
   END
   ============================================================ */