/* EydOil Global Responsive Styles - Applied to all pages */
/* Add this CSS to all pages for consistent responsive behavior */

/* ===== NAVIGATION RESPONSIVE ===== */
@media (max-width: 768px) {
    nav ul:not(#mobile-menu ul) { display: none !important; }
    #mobile-menu-btn { display: block !important; }
    
    /* Responsive nav padding */
    nav .container { padding: 0 1rem !important; }
    nav { padding: 0.5rem 0 !important; }
    
    /* Make logo smaller on mobile */
    nav a[href="/"] {
        font-size: 1.4rem !important;
    }
    nav a[href="/"] span:first-child {
        font-size: 1.5rem !important;
    }
}

@media (min-width: 769px) {
    #mobile-menu-btn { display: none !important; }
    #mobile-menu { display: none !important; }
}

/* ===== MOBILE MENU TOUCH TARGETS ===== */
#mobile-menu ul li a {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* ===== PAGE HEADER RESPONSIVE ===== */
main > section:first-child {
    padding-top: clamp(4rem, 8vw, 6rem) !important;
    padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}

main > section:first-child h1 {
    font-size: clamp(1.8rem, 5vw, 3rem) !important;
}

main > section:first-child > div {
    padding-left: clamp(1rem, 3vw, 2rem) !important;
    padding-right: clamp(1rem, 3vw, 2rem) !important;
}

/* ===== GRID RESPONSIVE ===== */
.responsive-grid,
[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
    gap: clamp(1rem, 3vw, 2rem) !important;
}

@media (max-width: 640px) {
    .responsive-grid,
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ===== CART/CHECKOUT LAYOUT ===== */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2rem);
}

@media (min-width: 992px) {
    .cart-layout {
        grid-template-columns: 1fr 400px;
    }
}

/* ===== FORM RESPONSIVE ===== */
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: clamp(0.75rem, 2vw, 1rem);
    font-size: clamp(0.9rem, 2vw, 1rem);
    border-radius: 0.5rem;
    border: 1px solid #ddd;
}

.form-submit,
button[type="submit"],
.btn-primary {
    min-height: 48px;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    touch-action: manipulation;
}

/* ===== BUTTONS RESPONSIVE ===== */
button, .btn, [class*="btn-"] {
    min-height: 44px;
    min-width: 44px;
}

/* ===== FOOTER RESPONSIVE ===== */
footer {
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) !important;
}

footer > div > div:first-child {
    gap: clamp(1.5rem, 4vw, 3rem) !important;
}

footer h3, footer h4 {
    font-size: clamp(0.9rem, 2vw, 1.1rem) !important;
}

footer p, footer a, footer li {
    font-size: clamp(0.85rem, 1.5vw, 1rem) !important;
}

footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ===== TYPOGRAPHY FLUID ===== */
h1 { font-size: clamp(1.8rem, 5vw, 3rem) !important; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem) !important; line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem) !important; line-height: 1.3; }
h4 { font-size: clamp(1rem, 2vw, 1.25rem) !important; line-height: 1.4; }

p, li, span, a {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
}

/* ===== IMAGES RESPONSIVE ===== */
img {
    max-width: 100%;
    height: auto;
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    a, button, [role="button"], input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Enable smooth scrolling */
    html {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Disable hover effects */
    *:hover {
        transform: none !important;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 896px) and (orientation: landscape) {
    main > section:first-child {
        padding-top: clamp(3rem, 6vw, 4rem) !important;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    nav, footer, #mobile-menu, #mobile-menu-btn {
        display: none !important;
    }
    main {
        padding-top: 0 !important;
    }
}