/* ==========================================================
   CSDI DESIGN SYSTEM
   Phase 2 of the public website overhaul.
   This file is NOT yet linked into any page — purely additive,
   safe to review without affecting anything currently live.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {

    /* --- Brand color palette --- */
    --csdi-green-primary:    #0B6B2D;
    --csdi-green-secondary:  #16A34A;
    --csdi-green-forest:     #0F2A22;
    --csdi-green-leaf:       #6DD5A3;
    --csdi-green-soft:       #EAF3EE;

    --csdi-charcoal:         #1D2939;
    --csdi-navy-text:        #0F172A;
    --csdi-text-muted:       #667085;
    --csdi-text-subtle:      #98A2B3;

    --csdi-earth-amber:      #B7791F;
    --csdi-earth-clay:       #9A5B3C;

    --csdi-surface-white:    #FFFFFF;
    --csdi-surface-soft:     #F8FAFC;
    --csdi-surface-tint:     #F7FAF8;
    --csdi-border:           #EEF1F4;

    /* --- Typography --- */
    --csdi-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --csdi-h1: 700 clamp(2rem, 4vw, 3.25rem)/1.15 var(--csdi-font);
    --csdi-h2: 700 clamp(1.5rem, 3vw, 2.25rem)/1.25 var(--csdi-font);
    --csdi-h3: 600 1.25rem/1.35 var(--csdi-font);
    --csdi-body: 400 1rem/1.65 var(--csdi-font);
    --csdi-eyebrow: 600 0.8125rem/1.4 var(--csdi-font);

    /* --- Spacing rhythm --- */
    --csdi-section-y: clamp(3rem, 6vw, 5.5rem);
    --csdi-card-radius: 14px;
    --csdi-btn-radius: 15px 0 15px 0;

}

/* --------------------------------------------------------
   Section header (eyebrow + title + optional subtitle)
   -------------------------------------------------------- */

.csdi-section {
    padding-top: var(--csdi-section-y);
    padding-bottom: var(--csdi-section-y);
}

.csdi-section--tint {
    background: var(--csdi-surface-tint);
}

.csdi-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3rem auto;
}

.csdi-eyebrow {
    font: var(--csdi-eyebrow);
    color: var(--csdi-green-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    display: inline-block;
}

.csdi-section-header h2 {
    font: var(--csdi-h2);
    color: var(--csdi-navy-text);
    margin-bottom: 0.75rem;
}

.csdi-section-header p {
    font: var(--csdi-body);
    color: var(--csdi-text-muted);
    margin: 0;
}

/* --------------------------------------------------------
   Buttons
   -------------------------------------------------------- */

.csdi-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font: 600 0.875rem var(--csdi-font);
    padding: 0.875rem 1.75rem;
    border-radius: var(--csdi-btn-radius);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.csdi-btn-primary {
    background: var(--csdi-green-primary);
    color: #fff;
}

.csdi-btn-primary:hover {
    background: #094f22;
    color: #fff;
    transform: translateY(-1px);
}

.csdi-btn-outline {
    background: #fff;
    color: var(--csdi-navy-text);
    border-color: var(--csdi-border);
}

.csdi-btn-outline:hover {
    border-color: var(--csdi-green-primary);
    color: var(--csdi-green-primary);
}

.csdi-btn-outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.csdi-btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* --------------------------------------------------------
   Cards
   -------------------------------------------------------- */

.csdi-card {
    background: var(--csdi-surface-white);
    border: 1px solid var(--csdi-border);
    border-radius: var(--csdi-card-radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: all 0.25s ease;
    height: 100%;
}

.csdi-card:hover {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    transform: translateY(-4px);
}

.csdi-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.1rem;
    background: var(--csdi-green-soft);
    color: var(--csdi-green-primary);
}

.csdi-card h3 {
    font: var(--csdi-h3);
    color: var(--csdi-navy-text);
    margin-bottom: 0.5rem;
}

.csdi-card p {
    font-size: 0.875rem;
    color: var(--csdi-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.csdi-card-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--csdi-green-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Coming-soon variant (e.g. Training, until it has a real backend) */
.csdi-card--soon {
    opacity: 0.85;
}

.csdi-badge-soon {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--csdi-earth-amber);
    background: #fdf3e2;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 0.5rem;
}

/* --------------------------------------------------------
   Stats band
   -------------------------------------------------------- */

.csdi-stats-band {
    background: var(--csdi-green-forest);
    padding: 2.5rem 0;
}

.csdi-stat {
    text-align: center;
}

.csdi-stat .value {
    font: 700 1.75rem var(--csdi-font);
    color: #fff;
}

.csdi-stat .label {
    font-size: 0.75rem;
    color: var(--csdi-green-leaf);
    margin-top: 0.25rem;
}

/* --------------------------------------------------------
   Image containers (per the master prompt's spec)
   -------------------------------------------------------- */

.csdi-image-wrap {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--csdi-card-radius);
}

.csdi-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csdi-logo-wrap {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.csdi-logo-wrap img {
    max-width: 140px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* .content-wrapper: same leftover compensation-for-absolute-header
   pattern as .hero-wrap/.breadcrumb-wrap, just on the outer wrapper
   div every inner page uses (About/Team/Contact/Farms/Schools/
   Communities/Blog/Events) rather than the breadcrumb itself — missed
   this one since it wraps the breadcrumb instead of being it. */
.content-wrapper {
    margin-top: 0 !important;
}

/* Blog sidebar — elevate to match the design system instead of the
   old flat gray boxes with a teal accent that clashed with the new
   green palette */

.sidebar .sidebar-widget {
    background: #fff;
    border: 1px solid var(--csdi-border);
    border-radius: var(--csdi-card-radius);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    padding: 1.75rem;
}

.sidebar .sidebar-widget.style2 {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.sidebar .sidebar-widget h4 {
    font: 600 1.0625rem var(--csdi-font);
    color: var(--csdi-navy-text);
    border-bottom: 2px solid var(--csdi-green-soft);
    padding-bottom: 0.9rem;
}

.sidebar .category-box a,
.sidebar .tag-list a {
    color: var(--csdi-text-muted);
    transition: color 0.2s ease;
}

.sidebar .category-box a:hover,
.sidebar .tag-list a:hover {
    color: var(--csdi-green-primary);
}

.sidebar .category-box i {
    color: var(--csdi-green-primary);
}

.sidebar .search-box .form-group {
    position: relative;
}

.sidebar .search-box input {
    width: 100%;
    border: 1px solid var(--csdi-border);
    border-radius: 30px;
    padding: 0.7rem 3rem 0.7rem 1.2rem;
    font-size: 0.875rem;
}

.sidebar .search-box button {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    width: 38px;
    border-radius: 50%;
    border: none;
    background: var(--csdi-green-primary);
    color: #fff;
}

.sidebar .contact-widget {
    background: linear-gradient(135deg, var(--csdi-green-primary), var(--csdi-green-forest));
    border-radius: var(--csdi-card-radius);
    padding: 2rem;
    text-align: center;
}

.sidebar .contact-widget h3 {
    color: #fff;
    font-size: 1.125rem;
}

.sidebar .contact-widget p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.sidebar .contact-widget .btn.style1 {
    background: #fff;
    color: var(--csdi-green-primary);
    border-radius: 15px 0 15px 0;
    display: inline-block;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    margin-top: 0.5rem;
}

.pp-post-date {
    font-size: 0.6875rem;
    color: var(--csdi-text-subtle);
}

/* Footer */

.footer-wrap {
    background: var(--csdi-green-forest);
    color: rgba(255, 255, 255, 0.75);
}

.footer-wrap .footer-widget-title {
    color: #fff;
    font: 600 1rem var(--csdi-font);
    margin-bottom: 1.25rem;
}

.footer-wrap .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-wrap .footer-links li {
    margin-bottom: 0.6rem;
}

.footer-wrap .footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-wrap .footer-links a:hover {
    color: var(--csdi-green-leaf);
}

.footer-wrap .comp-desc {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
    line-height: 1.7;
}

.footer-wrap .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 0;
}

.footer-wrap .copyright-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    margin: 0;
}

.footer-wrap .social-profile a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-wrap .social-profile a:hover {
    color: #fff;
}

/* Hero slider — brand-aligned overlay and accent (was black/orange) */

.hero-wrap.style2 .hero-slide-item:after {
    background: linear-gradient(90deg, rgba(11, 44, 26, 0.88) 41.6%, rgba(11, 44, 26, 0.25) 85%) !important;
}

.hero-wrap.style2 .hero-slide-item .hero-content span {
    color: var(--csdi-green-leaf) !important;
    font: var(--csdi-eyebrow);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-wrap.style2 .hero-slide-item .hero-content h1 {
    font-family: var(--csdi-font);
}

.hero-wrap.style2 .hero-slide-item .hero-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.0625rem;
    max-width: 480px;
}

.hero-wrap.style2 .hero-slide-item .hero-content .csdi-hero-ctas {
    display: flex;
    gap: 12px;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* ==========================================================
   Blog sidebar — no base styling existed for .sidebar-widget
   at all, so it rendered as bare unstyled content. Card-style
   treatment matching the rest of the design system.
   ========================================================== */

.sidebar-widget {
    background: var(--csdi-green-soft);
    border: 1px solid var(--csdi-border);
    border-radius: var(--csdi-card-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.sidebar-widget h4 {
    font: 600 1rem var(--csdi-font);
    color: var(--csdi-navy-text);
    margin-bottom: 1.1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--csdi-border);
}

.sidebar-widget .category-box,
.sidebar-widget .tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-widget .category-box li {
    margin-bottom: 0.6rem;
}

.sidebar-widget .category-box a {
    color: var(--csdi-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

.sidebar-widget .category-box a:hover {
    color: var(--csdi-green-primary);
}

.sidebar-widget .popular-post-widget .pp-post-item {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1rem;
    align-items: flex-start;
}

.sidebar-widget .popular-post-widget .pp-post-item:last-child {
    margin-bottom: 0;
}

.sidebar-widget .pp-post-img img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.sidebar-widget .pp-post-info h6 {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.3rem;
}

.sidebar-widget .pp-post-info h6 a {
    color: var(--csdi-navy-text);
    text-decoration: none;
}

.sidebar-widget .pp-post-info h6 a:hover {
    color: var(--csdi-green-primary);
}

.sidebar-widget .pp-post-date {
    font-size: 0.6875rem;
    color: var(--csdi-text-subtle);
}

.sidebar-widget.style2 {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.sidebar-widget.style2 .contact-widget {
    background: var(--csdi-green-forest);
    border-radius: var(--csdi-card-radius);
    padding: 1.75rem;
    text-align: center;
}

.sidebar-widget.style2 .contact-widget h3 {
    color: #fff;
    font-size: 1.125rem;
    margin-bottom: 0.6rem;
}

.sidebar-widget.style2 .contact-widget p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
}

/* Featured (first) post highlight on the blog listing */
.csdi-blog-featured {
    grid-column: 1 / -1;
}

.csdi-blog-featured .csdi-image-wrap {
    aspect-ratio: 21/9 !important;
}

.csdi-blog-featured h3 {
    font-size: 1.5rem !important;
}

/* ==========================================================
   Sidebar: contact form inputs + Team Leads / project-info-item
   Bug found: the theme's .register-widget inputs are white with
   NO border at all (border: none) — designed to sit against a
   colored section background. Once placed inside our white
   .sidebar-widget card, they became invisible: white input on
   white card, no visible boundary. Same issue meant Team Leads
   had almost no visual treatment at all — just margin + bold text.
   ========================================================== */

.sidebar-widget .register-widget .form-group input,
.sidebar-widget .register-widget .form-group select,
.sidebar-widget .register-widget .form-group textarea {
    background-color: #fff;
    border: 1px solid var(--csdi-border);
    color: var(--csdi-navy-text);
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

.sidebar-widget .register-widget .form-group input:focus,
.sidebar-widget .register-widget .form-group select:focus,
.sidebar-widget .register-widget .form-group textarea:focus {
    outline: none;
    border-color: var(--csdi-green-primary);
    background-color: #fff;
}

.sidebar-widget .register-widget .form-group input::placeholder,
.sidebar-widget .register-widget .form-group textarea::placeholder {
    color: var(--csdi-text-subtle);
}

.sidebar-widget .register-widget .btn.style1 {
    border-radius: 15px 0 15px 0;
}

/* Team Leads (.project-info-item) */
.sidebar-widget .project-info-item-wrap .project-info-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid var(--csdi-border);
}

.sidebar-widget .project-info-item-wrap .project-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0 !important;
}

.sidebar-widget .project-info-item-wrap .project-info-item::before {
    content: "";
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--csdi-green-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230B6B2D'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2 1H6a4 4 0 0 0-4 4v1h12v-1a4 4 0 0 0-4-4Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}

.sidebar-widget .project-info-item-wrap .project-info-item h6 {
    margin: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 600;
    color: var(--csdi-navy-text);
}

.sidebar-widget .project-info-item-wrap .project-info-item span {
    font-size: 0.75rem;
    color: var(--csdi-green-primary);
    font-weight: 600;
}

/* Footer column alignment — ensure every column starts flush at the
   same top position regardless of content length (logo+paragraph vs
   heading+list), and normalize spacing so nothing looks staggered. */
.footer-wrap .footer-top .row {
    align-items: flex-start;
}

.footer-wrap .footer-widget {
    margin-top: 0;
    padding-top: 0;
}

.footer-wrap .footer-logo {
    display: inline-block;
    margin-bottom: 1rem;
}

.footer-wrap .footer-widget-title {
    margin-top: 0;
}

.footer-wrap .footer-bottom .row {
    align-items: center;
}