/* Prime Agro Farm - Plant-Inspired Green Theme */

:root {
    /* Primary Green Palette */
    --primary-green: #2d5016;
    --secondary-green: #4a7c59;
    --accent-green: #6b8e23;
    --light-green: #8fbc8f;
    --pale-green: #f0fff0;
    --sage-green: #9caf88;
    --forest-green: #228b22;
    --mint-green: #98fb98;
    
    /* Earth Tones */
    --earth-brown: #8b4513;
    --warm-beige: #f5deb3;
    --cream: #fffdd0;
    --soft-brown: #a0522d;
    
    /* Text Colors */
    --text-dark: #2c3e2d;
    --text-light: #ffffff;
    --text-muted: #5a6b5d;
    
    /* Accent Colors */
    --gold-accent: #daa520;
    --orange-accent: #ff8c00;
    
    /* Shadows and Effects */
    --shadow-light: 0 2px 10px rgba(45, 80, 22, 0.1);
    --shadow-medium: 0 4px 20px rgba(45, 80, 22, 0.15);
    --shadow-heavy: 0 8px 30px rgba(45, 80, 22, 0.2);
    
    /* Transitions */
    --transition-fast: all 0.15s ease;
    --transition-medium: all 0.25s ease;
    --transition-slow: all 0.4s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background: linear-gradient(135deg, var(--pale-green) 0%, var(--cream) 100%);
    min-height: 100vh;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--pale-green);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-green);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-green);
}

/* Navigation */
.navbar {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
    box-shadow: var(--shadow-medium);
    transition: var(--transition-fast);
}

.navbar .container {
    flex-wrap: nowrap;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-light) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.navbar-brand img {
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    object-fit: contain;
}

.navbar-nav .nav-link {
    color: var(--text-light) !important;
    font-weight: 500;
    transition: var(--transition-fast);
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: var(--mint-green) !important;
    transform: translateY(-2px);
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--mint-green);
    transition: var(--transition-fast);
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 50%, var(--accent-green) 100%);
    color: var(--text-light);
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23ffffff" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23ffffff" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    background: linear-gradient(45deg, var(--text-light), var(--mint-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-green) 0%, var(--forest-green) 100%);
    border: none;
    color: var(--text-light);
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 25px;
    transition: var(--transition-medium);
    box-shadow: var(--shadow-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--forest-green) 0%, var(--primary-green) 100%);
    transform: translateY(-3px);
    box-shadow: var(--shadow-heavy);
    color: var(--text-light);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--gold-accent) 0%, var(--orange-accent) 100%);
    border: none;
    color: var(--text-light);
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 25px;
    transition: var(--transition-medium);
    box-shadow: var(--shadow-light);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--orange-accent) 0%, var(--gold-accent) 100%);
    transform: translateY(-3px);
    box-shadow: var(--shadow-heavy);
    color: var(--text-light);
}

/* Cards */
.card {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    transition: var(--transition-medium);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-heavy);
}

.card-header {
    background: linear-gradient(135deg, var(--secondary-green) 0%, var(--accent-green) 100%);
    color: var(--text-light);
    border: none;
    font-weight: 600;
}

/* Image Slider */
.slider-container {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: var(--shadow-medium);
    height: 400px;
}

@media (max-width: 768px) {
    .slider-container {
        margin-top: 2rem;
    }
}

.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.slider-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(45, 80, 22, 0.95) 0%, rgba(45, 80, 22, 0.85) 60%, transparent 100%);
    color: var(--text-light);
    padding: 30px;
    transform: translateY(0);
    transition: var(--transition-medium);
}

.slider-overlay h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
}

.slider-overlay p {
    font-size: 1.1rem;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.95);
}

.slider-container:hover .slider-overlay {
    background: linear-gradient(to top, rgba(45, 80, 22, 0.98) 0%, rgba(45, 80, 22, 0.90) 60%, transparent 100%);
}

/* News Section */
.news-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: var(--shadow-light);
    transition: var(--transition-medium);
    border-left: 5px solid var(--accent-green);
}

.news-card:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-heavy);
}

.news-title {
    color: var(--primary-green);
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.news-summary {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 20px;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Modern News Cards (Homepage) */
.news-grid { row-gap: 1.5rem; }

.news-card-modern {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-light);
    overflow: hidden;
    transition: var(--transition-medium);
    border: 1px solid rgba(45,80,22,0.06);
}

.news-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-heavy);
}

.news-media {
    position: relative;
    height: 210px;
    overflow: hidden;
}

.news-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
}

.news-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.8s ease;
}

.news-card-modern:hover .news-media-img { transform: scale(1.05); }

.news-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    background: rgba(45, 80, 22, 0.9);
    color: #fff;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    backdrop-filter: blur(6px);
}

.news-content { padding: 18px 18px 16px; }

.news-title-modern {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-green);
    margin: 4px 0 8px;
}

.news-title-modern a { color: inherit; }
.news-title-modern a:hover { color: var(--forest-green); }

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

.news-excerpt {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 14px;
    font-size: 0.95rem;
}

.news-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed rgba(45,80,22,0.15);
    padding-top: 12px;
}

.news-meta-modern { color: var(--text-muted); font-size: 0.85rem; }

.read-more-link {
    color: var(--accent-green);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.read-more-link:hover {
    color: var(--forest-green);
    transform: translateX(4px);
}

/* Tour Video Section */
.tour-video-section .video-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-light);
    padding: 10px;
    transition: var(--transition-medium);
    border: 1px solid rgba(45,80,22,0.06);
}

.tour-video-section .video-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-heavy);
}

.tour-video-section .video-wrapper {
    border-radius: 12px;
    overflow: hidden;
}

.tour-video-section iframe,
.tour-video-section video {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Gallery */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    transition: var(--transition-medium);
    cursor: pointer;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-heavy);
}

.gallery-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: var(--transition-slow);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(45, 80, 22, 0.8), rgba(74, 124, 89, 0.8));
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: var(--transition-medium);
    text-align: center;
    padding: 20px;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* Forms */
.form-control {
    border: 2px solid var(--light-green);
    border-radius: 10px;
    padding: 12px 15px;
    transition: var(--transition-fast);
    background: rgba(255, 255, 255, 0.9);
}

.form-control:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.2rem rgba(107, 142, 35, 0.25);
    background: rgba(255, 255, 255, 1);
}

.form-label {
    color: var(--primary-green);
    font-weight: 600;
    margin-bottom: 8px;
}

/* Footer */
.footer {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
    color: var(--text-light);
    padding: 60px 0 30px;
    margin-top: 80px;
}

.footer-section {
    margin-bottom: 30px;
}

.footer-title {
    color: var(--mint-green);
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-link {
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition-fast);
    display: block;
    padding: 5px 0;
}

.footer-link:hover {
    color: var(--mint-green);
    transform: translateX(5px);
    text-decoration: none;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: var(--accent-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition-medium);
}

.social-icon:hover {
    background: var(--forest-green);
    transform: translateY(-3px) scale(1.1);
    color: var(--text-light);
    text-decoration: none;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.fade-in-left {
    animation: fadeInLeft 0.8s ease-out;
}

.fade-in-right {
    animation: fadeInRight 0.8s ease-out;
}

.pulse-animation {
    animation: pulse 2s infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .navbar .container {
        gap: 0.35rem;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }

    .navbar-brand {
        font-size: 1.65rem;
        white-space: nowrap;
    }

    .navbar-brand img {
        height: 30px;
    }

    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .slider-container {
        height: 300px;
    }
    
    .slider-overlay {
        padding: 20px;
    }
    
    .slider-overlay h3 {
        font-size: 1.4rem;
    }
    
    .slider-overlay p {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }
    
    .gallery-image {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .navbar {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }

    .navbar .container {
        gap: 0.15rem;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }

    .navbar-brand {
        font-size: 1.125rem;
        white-space: nowrap;
    }

    .navbar-brand img {
        height: 20px;
    }

    .navbar-toggler {
        padding: 0.15rem 0.25rem;
        font-size: 0.75rem;
    }

    .navbar-toggler-icon {
        width: 1.2em;
        height: 1.2em;
    }

    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .slider-container {
        height: 250px;
    }
    
    .slider-overlay {
        padding: 15px;
    }
    
    .slider-overlay h3 {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    .slider-overlay p {
        font-size: 0.85rem;
        margin-bottom: 8px;
    }
    
    .slider-overlay .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    
    .btn-primary, .btn-secondary {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    /* Mobile: make collapsed menu a full-width left-aligned dropdown
       and keep the brand in its original position at the top strip. */
    /* Use fixed positioning so the dropdown covers the full viewport width
       and is always aligned to the left edge of the phone screen. This avoids
       the collapse being constrained by the centered .container. */
    .navbar {
        /* navbar is already fixed-top in the markup; define a CSS var for its height */
        --navbar-height: 56px;
    }

    .navbar-collapse {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        width: 100%;
        background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
        padding: 0.75rem 1rem;
        z-index: 1040; /* above most content */
        border-top: 1px solid rgba(255,255,255,0.04);
        display: none; /* shown when .show is applied */
    }

    /* iOS and notch-safe adjustments: ensure the menu respects safe-area insets
       and does not get clipped on iPhone devices like iPhone 12 mini. */
    .navbar-collapse {
        width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
        left: env(safe-area-inset-left, 0px);
        right: env(safe-area-inset-right, 0px);
        padding-left: calc(1rem + env(safe-area-inset-left, 0px));
        padding-right: calc(1rem + env(safe-area-inset-right, 0px));
        box-sizing: border-box;
        max-height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Slide down animation for the mobile menu */
    .navbar-collapse {
        transform-origin: top center;
        transition: transform 220ms ease, opacity 180ms ease;
        transform: translateY(-8px);
        opacity: 0;
    }

    .navbar-collapse.show {
        transform: translateY(0);
        opacity: 1;
    }

    /* Backdrop that appears behind the mobile menu */
    .nav-backdrop {
        position: fixed;
        top: calc(var(--navbar-height));
        left: env(safe-area-inset-left, 0px);
        right: env(safe-area-inset-right, 0px);
        width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
        height: calc(100vh - var(--navbar-height));
        background: rgba(0,0,0,0.35);
        z-index: 1035; /* behind the menu (1040) but above page content */
        opacity: 0;
        transition: opacity 180ms ease;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-backdrop.show {
        opacity: 1;
    }

    .navbar-collapse.show {
        display: block;
    }

    /* Make nav links stack and align left inside the dropdown */
    .navbar-collapse .navbar-nav {
        width: 100%;
        margin-left: 0 !important; /* remove ms-auto behavior on mobile */
        text-align: left;
        padding-left: 0;
    }

    /* Force column layout, left alignment and full-width items to avoid
       the right-side clipping seen on some phones/emulators. Use stronger
       specificity and !important to override Bootstrap defaults. */
    .navbar-collapse .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        padding-left: 0.25rem !important;
        gap: 0.25rem;
    }

    .navbar-collapse .nav-item {
        width: 100% !important;
        margin: 0.2rem 0 !important;
    }

    .navbar-collapse .nav-link {
        padding: 0.6rem 0.5rem !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Make sure icons stay left of text and don't cause right alignment */
    .navbar-collapse .nav-link i {
        margin-right: 0.6rem !important;
        margin-left: 0 !important;
        float: left;
    }

    /* Keep the toggler above the dropdown so it's still clickable and
       visually separate from the menu */
    .navbar-toggler {
        z-index: 1060 !important;
    }

    /* When the mobile menu is open, ensure any brand elements inside the
       collapsed area are hidden so only the navigation links are visible. */
    .navbar-collapse .navbar-brand,
    .navbar-collapse .navbar-brand *,
    .navbar-collapse .brand-title {
        display: none !important;
    }

    .navbar-collapse .nav-item {
        width: 100%;
    }

    .navbar-collapse .nav-link {
        padding: 0.6rem 0.5rem;
        display: block;
        color: var(--text-light) !important;
        font-size: 1rem;
    }

    /* Slightly indent icons for clearer left alignment */
    .navbar-collapse .nav-link i {
        margin-right: 0.5rem;
        min-width: 18px;
        text-align: left;
    }

    /* Prevent the collapse from pushing the brand vertically */
    .navbar .container {
        align-items: center;
    }
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(107, 142, 35, 0.3);
    border-radius: 50%;
    border-top-color: var(--accent-green);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Success/Error Messages */
.alert-success {
    background: linear-gradient(135deg, var(--mint-green) 0%, var(--light-green) 100%);
    border: none;
    color: var(--primary-green);
    border-radius: 10px;
    box-shadow: var(--shadow-light);
}

.alert-danger {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border: none;
    color: #c62828;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
}

/* Utility Classes */
.bg-primary-green {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
}

.text-primary-green {
    color: var(--primary-green) !important;
}

.border-green {
    border-color: var(--accent-green) !important;
}

.shadow-green {
    box-shadow: var(--shadow-medium);
}

.hover-lift {
    transition: var(--transition-medium);
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-heavy);
}