/*
Theme Name: 3ADi Cashew Processing
Theme URI: https://3adi.org
Author: 3ADi
Author URI: https://3adi.org
Description: Child theme of Urja Solar Energy Pro, customized for 3adi.org - Africa's Agricultural Processing Equipment Platform
Template: urja-solar-energy-pro
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 3adi-child
*/

/* ============================================================
   3ADi BRAND COLORS
   Primary:   #1B5E20  (Deep Green)
   Accent:    #F9A825  (Gold Yellow)
   Dark BG:   #1A1A1A
   Body text: #212121
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap');

/* --- Global Reset & Typography --- */
body {
    font-family: 'Open Sans', sans-serif;
    color: #212121;
    font-size: 16px;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #1B5E20;
}

a {
    color: #1B5E20;
    transition: color 0.2s ease;
}
a:hover {
    color: #F9A825;
    text-decoration: none;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
#ht-masthead,
.ht-site-header {
    background-color: #1B5E20 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.header-top {
    background-color: #163f18 !important;
    padding: 6px 0;
    font-size: 13px;
}

.header-top a,
.ht-site-description,
.ht-site-description a {
    color: rgba(255,255,255,0.8) !important;
}

/* Logo */
.custom-logo,
.site-logo img,
img.custom-logo {
    max-height: 60px;
    width: auto;
}

/* Nav links */
#ht-primary-navigation ul li a,
.ht-main-navigation ul li a,
nav.ht-main-navigation a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 16px;
}

#ht-primary-navigation ul li a:hover,
#ht-primary-navigation ul li.current-menu-item > a,
.ht-main-navigation ul li a:hover {
    color: #F9A825 !important;
}

/* Dropdown */
#ht-primary-navigation ul ul,
.ht-main-navigation ul ul {
    background-color: #1B5E20 !important;
    border-top: 3px solid #F9A825;
}

/* Mobile hamburger */
.menu-toggle,
button.menu-toggle {
    background-color: #F9A825 !important;
    color: #fff !important;
    border: none;
    border-radius: 4px;
}

/* ============================================================
   HERO / SLIDER
   ============================================================ */
.bx-wrapper,
#bxslider-section,
.slider-section,
.ht-slider-section {
    position: relative;
}

/* Overlay on slider for readability */
.bx-wrapper .bx-viewport::before,
.slider-overlay {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(27,94,32,0.7) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Hero text */
.slider-caption h2,
.slider-caption h1,
.bx-caption h2,
.ht-slide-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    line-height: 1.2;
}

.slider-caption p,
.ht-slide-desc {
    font-size: 18px;
    color: rgba(255,255,255,0.9) !important;
}

/* ============================================================
   BUTTONS — CTA
   ============================================================ */
.btn-primary,
.ht-btn,
.lz-btn,
input[type="submit"],
button[type="submit"],
.ht-appointment-btn,
a.ht-btn-primary {
    background-color: #F9A825 !important;
    border-color: #F9A825 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 28px;
    border-radius: 4px;
    transition: background 0.2s, transform 0.1s;
}

.btn-primary:hover,
.ht-btn:hover,
a.ht-btn-primary:hover,
input[type="submit"]:hover {
    background-color: #e69100 !important;
    border-color: #e69100 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-outline,
.btn-secondary,
a.ht-btn-secondary {
    background-color: transparent !important;
    border: 2px solid #fff !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    padding: 10px 26px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-outline:hover,
a.ht-btn-secondary:hover {
    background-color: #fff !important;
    color: #1B5E20 !important;
}

/* ============================================================
   FEATURE / SERVICE CARDS (Product highlights)
   ============================================================ */
.ht-featured-section,
#ht-featured-section,
.lz-featured-section {
    background-color: #f5f5f5;
    padding: 70px 0;
}

.ht-featured-item,
.lz-feature-box,
.feature-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(27,94,32,0.08);
    padding: 32px 24px;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
    border-top: 4px solid #1B5E20;
}

.ht-featured-item:hover,
.lz-feature-box:hover {
    box-shadow: 0 8px 32px rgba(27,94,32,0.18);
    transform: translateY(-4px);
}

.ht-featured-item .fa,
.lz-feature-box .fa,
.feature-icon {
    color: #F9A825;
    font-size: 40px;
    margin-bottom: 16px;
}

.ht-featured-item h4,
.lz-feature-box h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #1B5E20;
    font-size: 18px;
}

/* ============================================================
   ABOUT / STATS SECTION
   ============================================================ */
.ht-about-section,
#ht-about-section {
    padding: 70px 0;
    background: #fff;
}

.ht-about-section h2,
.about-title {
    color: #1B5E20;
    font-size: 32px;
}

.ht-about-section h2::after,
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #F9A825;
    margin: 12px 0 24px;
}

/* Odometer / counter numbers */
.odometer,
.counter-number,
.ht-counter-number {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    color: #F9A825;
}

.counter-label,
.ht-counter-label {
    font-size: 14px;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================
   FACILITY / DARK CTA SECTION
   ============================================================ */
.ht-facility-section,
#ht-facility-section,
.facility-section {
    background-color: #1A1A1A !important;
    padding: 80px 0;
}

.ht-facility-section h2,
.ht-facility-section h3,
.facility-section h2 {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

.ht-facility-section p,
.facility-section p {
    color: rgba(255,255,255,0.8);
}

/* ============================================================
   APPOINTMENT / ENQUIRY FORM SECTION
   ============================================================ */
.ht-appointment-section,
#ht-appointment-section {
    background: linear-gradient(135deg, #1B5E20 0%, #2e7d32 100%);
    padding: 70px 0;
}

.ht-appointment-section h2,
.ht-appointment-section h3,
.ht-appointment-section label {
    color: #fff !important;
}

.ht-appointment-section .form-control,
.ht-appointment-section input,
.ht-appointment-section select,
.ht-appointment-section textarea {
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 4px;
    padding: 10px 14px;
}

.ht-appointment-section .form-control::placeholder {
    color: rgba(255,255,255,0.6);
}

/* ============================================================
   PROJECTS / PRODUCTS GRID
   ============================================================ */
.ht-project-section,
#ht-project-section {
    padding: 70px 0;
    background: #fff;
}

.ht-project-item,
.project-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s, transform 0.2s;
    margin-bottom: 24px;
}

.ht-project-item:hover {
    box-shadow: 0 8px 28px rgba(27,94,32,0.18);
    transform: translateY(-3px);
}

.ht-project-item .project-info,
.project-card .project-info {
    padding: 20px;
    background: #fff;
}

.ht-project-item h5,
.project-card h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #1B5E20;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.ht-testimonials-section,
#ht-testimonials-section {
    background-color: #f5f5f5;
    padding: 70px 0;
}

.ht-testimonial-item blockquote,
.testimonial-text {
    border-left: 4px solid #F9A825;
    padding-left: 20px;
    color: #424242;
    font-style: italic;
}

/* ============================================================
   BLOG / NEWS
   ============================================================ */
.ht-blog-section,
#ht-blog-section {
    padding: 70px 0;
    background: #fff;
}

.ht-blog-item,
.blog-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    transition: box-shadow 0.2s;
}

.ht-blog-item:hover {
    box-shadow: 0 6px 24px rgba(27,94,32,0.15);
}

.ht-blog-item .blog-meta .cat-links a,
.post-categories a {
    color: #F9A825;
    font-weight: 600;
}

/* ============================================================
   SECTION TITLES (global)
   ============================================================ */
.section-heading,
.ht-section-title,
.section-title h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #1B5E20;
    margin-bottom: 8px;
}

.section-subtitle,
.ht-section-desc {
    font-size: 16px;
    color: #757575;
    max-width: 600px;
    margin: 0 auto 48px;
}

/* Gold underline accent for section titles */
.section-divider,
.ht-divider {
    width: 60px;
    height: 4px;
    background: #F9A825;
    margin: 0 auto 40px;
    border: none;
}

/* ============================================================
   PAGE BANNER (inner pages)
   ============================================================ */
.page-main-header,
.page-banner,
.ht-page-banner {
    background-color: #1B5E20;
    padding: 60px 0;
    text-align: center;
    position: relative;
}

.page-main-header h1,
.ht-main-title {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: 700;
}

/* Breadcrumb */
.breadcrumb,
.ht-breadcrumb {
    background: transparent;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}
.breadcrumb a {
    color: #F9A825;
}

/* ============================================================
   FOOTER
   ============================================================ */
#ht-colophon,
.ht-site-footer {
    background-color: #1A1A1A;
}

#ht-top-footer {
    padding: 60px 0 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ht-site-footer h4,
.ht-site-footer h3,
.ht-site-footer .widget-title {
    color: #F9A825;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.ht-site-footer p,
.ht-site-footer li,
.ht-site-footer a {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}

.ht-site-footer a:hover {
    color: #F9A825;
}

.ht-site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ht-site-footer ul li {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

#ht-bottom-footer {
    background-color: #111;
    padding: 16px 0;
    text-align: center;
}

#ht-bottom-footer .ht-site-info,
#ht-bottom-footer span {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
}

/* Social icons in footer */
.header-social-links a,
.footer-social a {
    color: rgba(255,255,255,0.7);
    margin: 0 6px;
    font-size: 16px;
    transition: color 0.2s;
}
.header-social-links a:hover,
.footer-social a:hover {
    color: #F9A825;
}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
#whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}

#whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37,211,102,0.4);
}

#whatsapp-float svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-info-box {
    background: #f5f5f5;
    border-left: 4px solid #F9A825;
    padding: 24px;
    border-radius: 4px;
    margin-bottom: 24px;
}

.contact-info-box .fa {
    color: #1B5E20;
    font-size: 22px;
    margin-right: 12px;
}

.whatsapp-big {
    font-size: 28px;
    font-weight: 700;
    color: #25D366;
    font-family: 'Montserrat', sans-serif;
}

/* ============================================================
   FORMS
   ============================================================ */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select,
input.form-control,
textarea.form-control,
select.form-control {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 14px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    width: 100%;
    transition: border-color 0.2s;
}

.wpcf7 input:focus,
textarea.form-control:focus,
input.form-control:focus {
    border-color: #1B5E20;
    outline: none;
    box-shadow: 0 0 0 3px rgba(27,94,32,0.1);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .slider-caption h2,
    .ht-slide-title { font-size: 28px; }
    .section-heading,
    .ht-section-title { font-size: 26px; }
}

@media (max-width: 767px) {
    .slider-caption h2,
    .ht-slide-title { font-size: 22px; }

    .ht-featured-item,
    .ht-project-item { margin-bottom: 20px; }

    #whatsapp-float { bottom: 16px; right: 16px; }

    .btn-primary,
    .ht-btn { width: 100%; text-align: center; display: block; }
}


/* ============================================================
   ① BLOG LIST — compact 2-column card grid
   ============================================================ */
.threadi-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px 0;
}

.threadi-blog-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
    border-top: 3px solid #1B5E20;
}

.threadi-blog-card:hover {
    box-shadow: 0 6px 24px rgba(27,94,32,0.15);
    transform: translateY(-3px);
}

/* Thumbnail — fixed aspect ratio, compact */
.threadi-blog-thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.threadi-blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.threadi-blog-card:hover .threadi-blog-thumb img {
    transform: scale(1.04);
}

/* Card body */
.threadi-blog-body {
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.threadi-blog-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #1B5E20;
}

.threadi-blog-title a {
    color: inherit;
    text-decoration: none;
}

.threadi-blog-title a:hover {
    color: #F9A825;
}

.threadi-blog-excerpt {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    flex: 1;
    /* clamp to ~3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ② Date moved to bottom of card */
.threadi-blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

.threadi-blog-date {
    font-size: 11px;
    color: #999;
}

.threadi-blog-date .fa {
    color: #F9A825;
    margin-right: 4px;
}

.threadi-blog-more {
    font-size: 12px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #1B5E20;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.threadi-blog-more:hover {
    color: #F9A825;
}

/* Hide old large blog layout */
.inner-blog-post {
    display: none !important;
}

/* ② Date bottom — single post / page / archive */
.threadi-post-meta-bottom {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
    margin-top: 24px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #999;
}

.threadi-post-meta-bottom .fa {
    color: #F9A825;
    margin-right: 5px;
}

/* Hide date from top of single posts / archive summary cards */
.entry-meta.ht-post-info,
.post-date-publishable,
.ht-blog-date,
.single_post header .post-date-publishable {
    display: none !important;
}

/* Show it only inside our explicit bottom meta block */
.threadi-post-meta-bottom .post-date-publishable {
    display: inline-flex !important;
    align-items: center;
}

/* ③ TABLE BORDERS — show borders on all tables in content */
.entry-content table,
.post-single-content table,
#content table,
.innerpage-whitebox table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
    font-size: 14px;
}

.entry-content table th,
.entry-content table td,
.post-single-content table th,
.post-single-content table td,
#content table th,
#content table td,
.innerpage-whitebox table th,
.innerpage-whitebox table td {
    border: 1px solid #d0d0d0 !important;
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}

.entry-content table th,
.post-single-content table th,
#content table th,
.innerpage-whitebox table th {
    background-color: #1B5E20;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
}

.entry-content table tr:nth-child(even) td,
.post-single-content table tr:nth-child(even) td,
#content table tr:nth-child(even) td {
    background-color: #f9f9f9;
}

.entry-content table tr:hover td,
.post-single-content table tr:hover td,
#content table tr:hover td {
    background-color: #f0f7f0;
}

/* ④ FEATURED IMAGE — 1/3 width, floated left on single/page */
.threadi-single-featured {
    float: left;
    width: 33.333%;
    margin: 0 24px 16px 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.threadi-featured-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hide old full-width featured image in parent single.php — we control it now */
.ht-page-header-img {
    display: none !important;
}

/* ⑤ HEADER — logo and Get Quote button pulled toward center */
.medal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;   /* pull inward from edges */
}

.logobox {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Shrink the outer logo column so logo sits less far left */
.medal-header > .col-md-3 {
    width: 20%;
    padding-left: 20px;
}

.medal-header > .header-right {
    width: 80%;
    padding-right: 20px;
}

/* Get Quote button — tighten right gap */
.nav-upper .col-md-1:last-child {
    padding-right: 10px !important;
}

/* ============================================================
   ⑥ MOBILE / RESPONSIVE OPTIMISATIONS
   ============================================================ */

/* — 768px: stack blog cards to 1 column on small tablets — */
@media (max-width: 768px) {
    .threadi-blog-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 12px 0;
    }

    /* Featured image: full width on mobile */
    .threadi-single-featured {
        float: none;
        width: 100%;
        margin: 0 0 16px 0;
    }

    /* Header: stack logo above nav */
    .medal-header {
        flex-direction: column;
        padding: 0;
    }

    .medal-header > .col-md-3,
    .medal-header > .header-right {
        width: 100%;
        padding: 8px 15px;
    }

    /* Hero text smaller */
    .slider-caption h2,
    .ht-slide-title { font-size: 18px !important; }

    /* Full-width CTA buttons */
    .btn-primary,
    .ht-btn {
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: 8px;
    }

    /* Section padding reduce */
    .ht-featured-section,
    .ht-about-section,
    .ht-project-section,
    .ht-appointment-section,
    .ht-facility-section {
        padding: 40px 0 !important;
    }

    /* Footer: single column */
    .ht-footer.ht-footer1,
    .ht-footer.ht-footer2,
    .ht-footer.ht-footer3,
    .ht-footer.ht-footer4 {
        width: 100% !important;
        float: none !important;
        padding: 0 15px 20px !important;
    }

    /* Hide header top bar on mobile to save space */
    .header-top { display: none; }

    /* Blog card font sizes */
    .threadi-blog-title { font-size: 15px; }
    .threadi-blog-excerpt { -webkit-line-clamp: 2; }
}

/* — 480px: very small phones — */
@media (max-width: 480px) {
    .threadi-blog-title { font-size: 14px; }
    .section-heading,
    .ht-section-title { font-size: 22px !important; }
    .odometer,
    .counter-number { font-size: 36px !important; }

    /* Compact nav */
    #ht-masthead { padding: 0; }

    /* Page banner */
    .page-main-header h1.ht-main-title {
        font-size: 22px !important;
    }
}

/* Touch-friendly tap targets */
@media (max-width: 768px) {
    nav.ht-main-navigation a,
    .threadi-blog-more,
    .blog-read-more a,
    .btn-primary,
    .ht-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Improve legibility of body text on mobile */
@media (max-width: 768px) {
    body { font-size: 15px; }
    p { line-height: 1.75; }
}