/**
 * GBI Farms - Main Stylesheet
 * Imports all CSS partials
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

@import 'variables.css';
@import 'buttons.css';
@import 'navigation.css';
@import 'components.css';
@import 'cards.css';
@import 'pages.css';
@import 'farm.css';
@import 'real-estate.css';
@import 'about.css';
@import 'gateway-fund.css';
@import 'food-hub.css';
@import 'homepage.css';
@import 'faq.css';
@import 'contact.css';

/* Prevent fixed-top navbar from overlapping content */
body {
    padding-top: 85px;
}

@media (max-width: 991px) {
    body {
        padding-top: 70px;
    }
}

.cs-backdrop-image {
    background: rgba(0, 72, 31, 0.8) url('../images/cassava-harvest-gbi-farm.webp') center/cover no-repeat;
    background-blend-mode: overlay;
}

/* Page headers Customization */
.cs-page-header-about {
    background: url('../images/cassava-harvest-gbi-farm.webp') center/cover no-repeat;
    z-index: 10;
    position: relative;
}

/* ==========================================
   GLOBAL HERO RESPONSIVE FIXES
   Ensures all hero sections display text
   without overflow on every screen size.
   ========================================== */

/* --- DESKTOP: Consistent safe padding on all heroes --- */
.hero-section,
.hp-hero,
.re-hero,
.gf-hero,
.fh-hero,
.farm-hero,
.faq-hero,
.ct-hero {
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure hero inner content doesn't escape */
.hero-section>.container,
.hp-hero>.container,
.re-hero>.container,
.gf-hero>.container,
.fh-hero>.container,
.farm-hero>.container,
.faq-hero>.container,
.ct-hero>.container {
    position: relative;
    z-index: 2;
}

/* --- TABLET (≤991px) --- */
@media (max-width: 991px) {
    .hero-section {
        min-height: auto;
        padding: 7rem 0 4rem;
    }

    .hp-hero {
        min-height: auto;
        padding: 7rem 0 3.5rem;
    }

    .re-hero {
        min-height: auto;
        padding: 7rem 0 3.5rem;
    }

    .gf-hero {
        min-height: auto;
        padding: 7rem 0 3.5rem;
    }

    .fh-hero {
        min-height: auto;
        padding: 7rem 0 3.5rem;
    }

    .farm-hero {
        min-height: auto;
        padding: 7rem 0 3.5rem;
    }

    .page-header {
        padding: 6rem 0 3rem;
    }
}

/* --- MOBILE (≤767px) --- */
@media (max-width: 767px) {
    .hero-section {
        padding: 6rem 0 3rem;
    }

    .hp-hero {
        padding: 5.5rem 0 2.5rem;
    }

    .re-hero {
        padding: 5.5rem 0 2.5rem;
    }

    .gf-hero {
        padding: 5.5rem 0 2.5rem;
    }

    .fh-hero {
        padding: 5.5rem 0 2.5rem;
    }

    .farm-hero {
        padding: 5.5rem 0 2.5rem;
    }

    .faq-hero {
        padding: 5rem 0 2rem;
    }

    .ct-hero {
        padding: 5rem 0 2rem;
    }

    .page-header {
        padding: 5rem 0 2.5rem;
    }

    /* Reduce heading sizes for mobile */
    .hero-title {
        font-size: 2rem;
        margin-top: 0;
    }

    .hp-hero h1 {
        font-size: 1.75rem;
    }

    .re-hero h1 {
        font-size: 1.75rem;
    }

    .gf-hero h1 {
        font-size: 1.75rem;
    }

    .fh-hero h1 {
        font-size: 1.75rem;
    }

    .farm-hero h1 {
        font-size: 1.75rem;
    }

    .faq-hero h1 {
        font-size: 1.5rem;
    }

    .ct-hero h1 {
        font-size: 1.5rem;
    }

    .page-header .page-title {
        font-size: 1.6rem;
    }

    /* Hero subtitles — smaller on mobile */
    .hero-subtitle,
    .hp-hero .hero-sub,
    .re-hero .hero-sub,
    .gf-hero .hero-lead,
    .fh-hero .hero-sub,
    .farm-hero .hero-sub,
    .faq-hero p,
    .ct-hero p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* Price block inside RE hero */
    .re-price-block {
        padding: 1.2rem 1rem;
    }

    .re-price-block .price-amount {
        font-size: 1.75rem;
    }

    /* Hero CTA buttons */
    .hero-cta .btn,
    .hp-hero .btn,
    .re-hero .hero-cta .btn,
    .farm-hero .hero-cta .btn {
        font-size: 0.82rem;
        padding: 0.55rem 1rem;
    }

    /* Gateway hero stat cards */
    .gf-hero-stats {
        gap: 0.4rem;
    }

    .gf-hero-stat {
        padding: 0.6rem 0.5rem;
    }

    .gf-hero-stat .v {
        font-size: 0.95rem;
    }

    .gf-hero-stat .l {
        font-size: 0.62rem;
    }

    /* ROI badge */
    .gf-roi-badge {
        font-size: 0.82rem;
        padding: 0.5rem 1rem;
    }
}

/* --- SMALL MOBILE (≤480px) --- */
@media (max-width: 480px) {
    .hp-hero {
        padding: 5rem 0 2rem;
    }

    .re-hero {
        padding: 5rem 0 2rem;
    }

    .gf-hero {
        padding: 5rem 0 2rem;
    }

    .fh-hero {
        padding: 5rem 0 2rem;
    }

    .farm-hero {
        padding: 5rem 0 2rem;
    }

    .faq-hero {
        padding: 4.5rem 0 1.8rem;
    }

    .ct-hero {
        padding: 4.5rem 0 1.8rem;
    }

    .page-header {
        padding: 4.5rem 0 2rem;
    }

    .hp-hero h1,
    .re-hero h1,
    .gf-hero h1,
    .fh-hero h1,
    .farm-hero h1 {
        font-size: 1.5rem;
    }

    .faq-hero h1,
    .ct-hero h1,
    .page-header .page-title {
        font-size: 1.35rem;
    }

    .hero-title {
        font-size: 1.65rem;
    }

    /* Hero tags/badges */
    .hp-hero .hero-tag,
    .re-hero .hero-tag,
    .fh-hero .hero-tag,
    .farm-hero .hero-tag {
        font-size: 0.68rem;
        padding: 0.35rem 0.8rem;
        letter-spacing: 1px;
    }
}