/*
Theme Name:   Kadence Child
Description:  A child theme for Kadence
Author:       Your Name
Template:     kadence
Version:      1.0.0
Text Domain:  kadence-child
*/

/* ==========================================================================
   1. CSS Variables
   ========================================================================== */
:root {
    --color-primary:  #996241;
    --color-accent:   #6b0020;
    --color-green:    #006241;
    --color-gold:     #cfaf6b;
    --color-sage:     #cbddd4;
    --color-dark:     #1a1a1a;
    --color-white:    #ffffff;
}

/* ==========================================================================
   2. Category / Post Title Hero Height
   ========================================================================== */
.entry-hero-container-inner .entry-header {
    min-height: 100px !important;
}

/* ==========================================================================
   2b. Non-Post Pages — Hide Hero & Reduce Header White Space
   ========================================================================== */

/* Hide the entry hero container on all pages except single posts */
body:not(.single-post) .entry-hero-container-inner {
    display: none !important;
}

/* Reduce top/bottom padding on the header on non-post pages */
body:not(.single-post) #masthead.site-header,
body:not(.single-post) .site-main-header-inner-wrap,
body:not(.single-post) .site-header-row-container-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   3. Header — Background (Forest Green)
   ========================================================================== */
#masthead.site-header,
#main-header.site-header-wrap,
.site-header-upper-wrap,
.site-header-upper-inner-wrap,
.site-main-header-wrap,
.site-header-row-container,
.site-header-row-container-inner,
.site-main-header-inner-wrap {
    background-color: var(--color-green) !important;
}

/* ==========================================================================
   4. Header — Nav Links
   ========================================================================== */

/* White by default */
.site-main-header-wrap .nav-link-text,
.site-main-header-wrap a,
.site-main-header-wrap a:hover,
.site-main-header-wrap a:focus,
.site-header-row-container .nav-link-text,
.site-header-row-container a,
.site-header-row-container a:hover,
.site-header-section a,
.site-header-section a:hover {
    color: var(--color-white) !important;
    text-decoration: none !important;
}

/* Gold + underline on hover */
.site-header-row-container a:hover .nav-link-text,
.site-header-row-container a:hover,
.site-header-row-container li:hover > a .nav-link-text,
.site-header-row-container li:hover > a,
.site-main-header-wrap a:hover .nav-link-text,
.site-main-header-wrap li:hover > a .nav-link-text,
.site-main-header-wrap li:hover > a {
    color: var(--color-gold) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: var(--color-gold) !important;
    font-weight: bold;
}

/* Exclude CTA button from nav hover */
.site-header-row-container a.header-cta-button:hover,
.site-main-header-wrap a.header-cta-button:hover {
    color: var(--color-white) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   4b. Header — Hamburger / Mobile Toggle Button
   ========================================================================== */

/* Make the hamburger button itself white so it's visible on the green header */
.menu-toggle,
button.menu-toggle,
#mobile-toggle,
.kadence-mobile-toggle,
.header-mobile-toggle {
    color: var(--color-white) !important;
}

/* Target the hamburger bar lines (SVG or pseudo-element style) */
.menu-toggle .menu-toggle-icon,
.menu-toggle span,
.menu-toggle svg,
.kadence-mobile-toggle svg,
.header-mobile-toggle svg {
    color: var(--color-white) !important;
    fill: var(--color-white) !important;
    stroke: var(--color-white) !important;
    background-color: var(--color-white) !important;
}

/* ==========================================================================
   5. Header — Right Section & CTA Button
   ========================================================================== */
.site-header-main-section-right.site-header-section-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1rem !important;
    padding-right: 1.5rem !important;
}

.header-cta-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-cta-button {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
    border-radius: 50px !important;
    padding: 0.5rem 1.4rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    white-space: nowrap !important;
    transition: background-color 0.2s ease !important;
    cursor: pointer !important;
}

.header-cta-button:hover,
.site-header-section a.header-cta-button:hover,
.site-header-row-container a.header-cta-button:hover,
.site-main-header-wrap a.header-cta-button:hover {
    background-color: #8a0029 !important;
    color: var(--color-white) !important;
    text-decoration: none !important;
    opacity: 0.9 !important;
}

/* ==========================================================================
   6. Header — Dropdown Menus
   ========================================================================== */
#masthead .sub-menu,
.site-main-header-wrap .sub-menu,
.site-header-row-container .sub-menu,
ul.sub-menu {
    background-color: var(--color-green) !important;
    border-top: 3px solid var(--color-gold) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

#masthead .sub-menu li,
.site-main-header-wrap .sub-menu li,
.site-header-row-container .sub-menu li,
ul.sub-menu li {
    background-color: var(--color-green) !important;
}

#masthead .sub-menu a,
.site-main-header-wrap .sub-menu a,
.site-header-row-container .sub-menu a,
ul.sub-menu a {
    color: var(--color-white) !important;
    background-color: var(--color-green) !important;
}

#masthead .sub-menu a:hover,
.site-main-header-wrap .sub-menu a:hover,
.site-header-row-container .sub-menu a:hover,
ul.sub-menu a:hover {
    color: var(--color-gold) !important;
    background-color: #004d32 !important;
}

/* ==========================================================================
   7. Logo Text
   ========================================================================== */
.site-branding .site-title,
.site-branding .site-title a {
    color: var(--color-white) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
}

/* ==========================================================================
   8. Global — Links & Buttons
   ========================================================================== */
a {
    color: var(--color-primary);
}
a:hover {
    color: var(--color-accent);
}

.wp-block-button__link,
.button,
button[type="submit"] {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-radius: 4px !important;
    border: none !important;
    transition: background-color 0.2s ease !important;
}

.wp-block-button__link:hover,
.button:hover,
button[type="submit"]:hover {
    background-color: var(--color-accent) !important;
}

/* ==========================================================================
   9. WooCommerce — Shop Page Category Filter
   ========================================================================== */
.meimei-filters select {
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    color: var(--color-dark);
    background-color: var(--color-white);
    cursor: pointer;
}

.meimei-filters select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   10. Product Table — Desktop
   ========================================================================== */
.product-page-title {
    color: var(--color-accent) !important;
}
.product-grid-wrapper {
    background-color: #f5faf0;
    border-radius: 12px;
    padding: 30px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.product-page-title {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--color-green);
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 8px;
}

.product-page-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-green);
    margin: 10px auto 30px;
    border-radius: 2px;
}

/* Filter bar */
.product-filter-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-white);
    border: 1px solid #d8ead0;
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 20px;
}

.product-filter-bar label {
    font-weight: 600;
    color: var(--color-green);
    white-space: nowrap;
}

#category-filter {
    border: 2px solid var(--color-green);
    border-radius: 25px;
    padding: 6px 16px;
    font-size: 0.95rem;
    color: var(--color-green);
    background-color: var(--color-white);
    cursor: pointer;
    min-width: 180px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23006241' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

#category-filter:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 98, 65, 0.15);
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_filter input {
    border: 2px solid var(--color-green);
    border-radius: 25px;
    padding: 5px 14px;
    font-size: 0.9rem;
    color: var(--color-dark);
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 98, 65, 0.15);
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #c8dfc0 !important;
    border-radius: 6px !important;
    padding: 4px 28px 4px 8px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--color-white) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23006241' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 12px !important;
    cursor: pointer !important;
}

/* Table itself */
table.product-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
    font-family: 'Lora', Georgia, serif;
}

table.product-table thead th {
    background-color: var(--color-green) !important;
    color: var(--color-white) !important;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.95rem;
    padding: 14px 12px !important;
    border: none !important;
    text-align: left;
}

table.product-table thead th:first-child {
    border-radius: 8px 0 0 8px;
}

table.product-table thead th:last-child {
    border-radius: 0 8px 8px 0;
}

table.product-table tbody tr {
    background-color: var(--color-white);
    transition: background-color 0.15s ease;
}

table.product-table tbody tr:nth-child(even) {
    background-color: #f0faf0;
}

table.product-table tbody tr:hover {
    background-color: #e0f2e0 !important;
}

table.product-table tbody td {
    padding: 12px !important;
    border-top: 1px solid #e8f0e0 !important;
    border-bottom: 1px solid #e8f0e0 !important;
    vertical-align: middle !important;
    font-size: 0.9rem;
    color: var(--color-dark);
}

table.product-table tbody td:first-child {
    border-left: 1px solid #e8f0e0 !important;
    border-radius: 8px 0 0 8px;
}

table.product-table tbody td:last-child {
    border-right: 1px solid #e8f0e0 !important;
    border-radius: 0 8px 8px 0;
}

/* Remove WooCommerce gray outline around Add to Cart in product table */
table.product-table .product-action .woocommerce,
table.product-table .product-action form.cart,
table.product-table .product-action .quantity,
table.product-table .product-action .add_to_cart_inline {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* Product image cell */
table.product-table .product-image img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #c8dfc0;
}

/* Product title */
table.product-table .product-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #1a4a2e;
}

/* Category badge */
table.product-table .product-category {
    color: var(--color-green);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Price */
table.product-table .product-price {
    font-weight: 700;
    color: var(--color-green);
    white-space: nowrap;
}

/* Add to cart button inside table */
table.product-table .product-action .button,
table.product-table .product-action a.button {
    background-color: var(--color-green) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 8px 18px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    box-shadow: 0 3px 0 #003d28 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

table.product-table .product-action .button:hover,
table.product-table .product-action a.button:hover {
    background-color: #004d32 !important;
    box-shadow: 0 1px 0 #003d28 !important;
    transform: translateY(1px) !important;
}

/* ==========================================================================
   11. Contact Page
   ========================================================================== */
.contact-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Lora', Georgia, serif;
}

.contact-top {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
}

.contact-info {
    flex: 1;
    background-color: #f0faf0;
    border-left: 4px solid var(--color-green);
    border-radius: 8px;
    padding: 30px;
}

.contact-info h2 {
    color: var(--color-green);
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-family: 'Playfair Display', Georgia, serif;
}

.contact-info .hours-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.contact-info .hours-table td {
    padding: 8px 0;
    border-bottom: 1px solid #d0e8d0;
    font-size: 0.95rem;
}

.contact-info .hours-table td:first-child {
    font-weight: 600;
    color: #1a5c1a;
    width: 50%;
}

.contact-info .hours-table tr.closed td {
    color: #999;
}

.contact-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: 12px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 10px;
    width: fit-content;
    transition: background-color 0.2s ease;
}

.contact-phone:hover {
    background-color: #3d0012;
    color: var(--color-white);
}

.contact-map {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
    min-height: 350px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 350px;
    border: none;
}

.contact-form-section {
    background-color: #fff8f8;
    border-left: 4px solid var(--color-accent);
    border-radius: 8px;
    padding: 30px;
}

.contact-form-section h2 {
    color: var(--color-accent);
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-family: 'Playfair Display', Georgia, serif;
}

.contact-form-section input,
.contact-form-section textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.95rem;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.contact-form-section textarea {
    height: 120px;
    resize: vertical;
}

.contact-form-section input:focus,
.contact-form-section textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.contact-submit {
    background-color: var(--color-accent);
    color: var(--color-white);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #3d0012;
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.contact-submit:hover {
    background-color: #3d0012;
    box-shadow: 0 2px 0 #3d0012;
}
/* Contact form alerts */
.contact-alert {
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 600;
}
.contact-alert--success {
    background-color: #eafaf0;
    border-left: 4px solid var(--color-green);
    color: #1a5c1a;
}
.contact-alert--error {
    background-color: #fff0f0;
    border-left: 4px solid var(--color-accent);
    color: var(--color-accent);
}
/* ==========================================================================
   12. Responsive — Mobile (max 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* Mobile menu nav links — white text */
  .mobile-navigation a,
.mobile-navigation .nav-link-text,
#mobile-drawer a,
#mobile-drawer .nav-link-text,
.kadence-mobile-navigation a,
.kadence-mobile-navigation .nav-link-text,
#mobile-menu a,
#mobile-menu .nav-link-text {
    color: var(--color-white) !important;
    background-color: #006241;
    display: block; /* important so background fills the row */
    transition: background-color 0.3s ease;
}

/* HOVER STATE */
.mobile-navigation a:hover,
#mobile-drawer a:hover,
.kadence-mobile-navigation a:hover,
#mobile-menu a:hover {
    background-color: var(--color-gold);
}

    /* Contact: stack vertically */
    .contact-top {
        flex-direction: column;
    }
    .contact-map {
        min-height: 250px;
    }

    /* Hero: shorter */
    .wp-block-cover {
        min-height: 350px !important;
    }

    /* Filter bar: stack */
    .product-filter-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
    }
    #category-filter {
        width: 100%;
        min-width: unset;
    }

    /* DataTables search + length: full width */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        display: block;
        width: 100%;
        text-align: left !important;
        margin-bottom: 10px !important;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Hide full table on mobile — cards replace it */
    .product-grid-wrapper #product-table.dataTable,
    .product-grid-wrapper table.product-table {
        display: none !important;
    }
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_info {
        display: none !important;
    }

    /* 2-column card grid */
    .product-card-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 16px;
    }

    .product-card {
        background-color: var(--color-white);
        border: 1px solid #c8e6b0;
        border-radius: 12px;
        padding: 14px 12px;
        box-shadow: 0 2px 10px rgba(0, 98, 65, 0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 98, 65, 0.15);
    }

    .product-card .card-image img {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #90c754;
        box-shadow: 0 2px 8px rgba(0, 98, 65, 0.15);
    }

    .product-card .card-title {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 0.88rem;
        font-weight: 700;
        color: #1a4a2e;
        line-height: 1.3;
    }

    .product-card .card-price {
        font-family: 'Playfair Display', Georgia, serif;
        font-weight: 700;
        color: var(--color-green);
        font-size: 0.95rem;
    }

    .product-card .card-action .button,
    .product-card .card-action a.button {
        background-color: var(--color-green) !important;
        color: var(--color-white) !important;
        border: none !important;
        border-radius: 25px !important;
        padding: 7px 16px !important;
        font-family: 'Playfair Display', Georgia, serif !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        text-decoration: none !important;
        display: inline-block !important;
        box-shadow: 0 3px 0 #003d28 !important;
        white-space: nowrap !important;
        margin-top: auto;
    }
}