/* Site-wide responsive tweaks for index, about, contact pages */

/* Hide mobile menu toggle by default; shown on small screens */
.hamburger { display: none; }

/* Keep main containers padded on small screens */
.container { padding-left: 16px; padding-right: 16px; }

@media (max-width: 992px) {
    /* Slightly reduce hero and section padding on tablets */
    .hero, .page-hero { padding: 40px 0; }
}

@media (max-width: 768px) {
    /* Show hamburger and collapse nav into vertical menu */
    .hamburger { display: inline-flex; flex-direction: column; gap: 6px; padding: 8px; }
    .hamburger .bar { display: block; width: 22px; height: 2px; background: #fff; border-radius:2px; }

    /* Position hamburger at the top-right corner and vertically center it */
    .nav-container { position: relative; }
    .hamburger {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        z-index: 10002;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .hamburger[aria-expanded="true"] .bar { background: #fff; }

    /* Make room on the right so hamburger doesn't drop below icons */
    .nav-actions { margin-right: 56px; }

    .nav-menu {
        display: none !important;
        position: absolute;
        left: 0;
        right: 0;
        top: 64px;
        background: linear-gradient(180deg, #2e8b57, #238a4a);
        padding: 8px 12px;
        flex-direction: column;
        gap: 0;
        z-index: 9999;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .nav-menu.show { display: flex !important; }

    /* Hide search in header for compact layout */
    .nav-actions .search-box { display: none; }

    /* Stack hero content vertically */
    .hero { display: flex; flex-direction: column-reverse; align-items: center; gap: 20px; padding: 28px 0; }
    .hero .hero-content { text-align: center; }
    .hero .hero-image { width: 70%; max-width: 360px; }

    /* Header adjustments to prevent overlap of actions */
    .nav-container { align-items: center; gap: 8px; flex-wrap: wrap; }
    .nav-logo { flex: 1 1 auto; }
    .nav-actions { order: 3; display: flex; gap: 8px; align-items: center; }
    .nav-actions .cart-btn, .nav-actions .profile-btn, .nav-actions .btn-login, .nav-actions .btn-signup { min-width: 40px; padding: 6px 8px; }
    .nav-actions .profile-btn span { display: none; }
    .nav-logo h2 { margin: 0; }

    /* Reduce hero icon size and surrounding padding for mobile */
    .hero .placeholder-image {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(46,139,87,0.08);
        box-shadow: none;
    }
    .hero .eco-icon { font-size: 48px; color: #2e8b57; }

    /* Center featured heading and tighten spacing */
    .featured-products h2, .featured-products h2 + p { text-align: center; }
    .featured-products { padding-top: 8px; }

    /* Product card adjustments on mobile to avoid overflow */
    .product-card { margin: 0 auto; max-width: 96%; }

    /* Products grid: single column cards */
    .products-grid, .categories-grid, .values-grid, .team-grid, .impact-stats, .faq-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Product cards should be full width */
    .products-grid .product-card, .category-card, .value-card, .team-member { width: 100%; }

    /* Filters: stack and full width */
    .products-header .filters, .filters { display: flex; flex-direction: column; gap: 8px; }
    .products-header .filters select, .filters select { width: 100%; }

    /* Footer stacks sections vertically */
    .footer .footer-content { display: flex; flex-direction: column; gap: 18px; }

    /* Contact page: stack form and info */
    .contact-grid { display: flex; flex-direction: column; gap: 18px; }
    .contact-form .form-row { display: flex; flex-direction: column; gap: 8px; }
    .contact-form .form-group input, .contact-form textarea, .contact-form select { width: 100%; }

    /* Make CTA buttons full width for better touch targets */
    .cta-button, .btn-primary, .btn-submit, .btn-load-more { width: 100%; display: block; }

    /* Modal content should be nearly full width on phones */
    .modal .modal-content, .modal-content { width: 96%; max-width: 560px; margin: 12px auto; }

    /* Team member images smaller on mobile */
    .team-member .member-image img { width: 96px; height: 96px; }

    /* Reduce footer-bottom text size slightly */
    .footer-bottom p { font-size: 0.95rem; }
}

/* Small tweaks for very narrow screens */
@media (max-width: 420px) {
    .hero .hero-image { width: 90%; }
    .team-member .member-image img { width: 80px; height: 80px; }
    .nav-logo h2 { font-size: 1.1rem; }
}

/* Utility: visible focus outlines for accessibility on small screens */
@media (max-width: 768px) {
    a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid rgba(46,139,87,0.18); outline-offset: 2px; }
}

/* Profile dropdown default styling (used in header) */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    min-width: 180px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border-radius: 8px;
    display: none;
    z-index: 1000;
    padding: 6px 0;
}
.dropdown-menu.show { display: block; }
.dropdown-menu a { display: flex; gap: 8px; padding: 10px 12px; color: #333; text-decoration: none; }
.dropdown-menu a:hover { background: #f6f9f6; }