/* Responsive CSS for Protein Goblin.com */

/* Mobile First Approach */

/* Extra Small Devices (phones, 480px and down) */
@media (max-width: 480px) {
    :root {
        --spacing-xs: 0.125rem;
        --spacing-sm: 0.25rem;
        --spacing-md: 0.5rem;
        --spacing-lg: 1rem;
        --spacing-xl: 1.5rem;
        --spacing-2xl: 2rem;
        --spacing-3xl: 2.5rem;
    }
    
    .container {
        padding: 0 var(--spacing-md);
    }
    
    /* Typography */
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }
    h4 { font-size: var(--font-size-lg); }
    
    /* Navigation */
    .nav-container {
        padding: 0 var(--spacing-md);
    }
    
    .nav-brand .logo {
        font-size: var(--font-size-lg);
    }
    
    .search-input {
        width: 150px;
        font-size: var(--font-size-sm);
    }
    
    /* Hero Section */
    .hero {
        padding: 100px 0 60px;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }
    
    .hero-title-main {
        font-size: var(--font-size-3xl);
        line-height: 1.2;
    }
    
    .hero-title-sub {
        font-size: var(--font-size-lg);
    }
    
    .hero-description {
        font-size: var(--font-size-base);
    }
    
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .hero-stat {
        padding: var(--spacing-md);
    }
    
    .stat-number {
        font-size: var(--font-size-2xl);
    }
    
    .hero-actions {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero-image {
        order: -1;
    }
    
    .hero-img {
        height: 250px;
    }
    
    /* Recipe Generator */
    .generator-card {
        padding: var(--spacing-lg);
    }
    
    .form-section-title {
        font-size: var(--font-size-lg);
    }
    
    .protein-source-selector {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .flavor-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .flavor-label {
        padding: var(--spacing-sm);
    }
    
    .flavor-emoji {
        font-size: var(--font-size-lg);
    }
    
    .flavor-name {
        font-size: var(--font-size-xs);
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .dietary-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .dietary-label {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
    
    .form-actions {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    /* Recipe Cards */
    .recipe-card {
        padding: var(--spacing-lg);
    }
    
    .recipe-image {
        height: 150px;
        font-size: var(--font-size-base);
    }
    
    .recipe-title {
        font-size: var(--font-size-lg);
    }
    
    .recipe-meta {
        flex-direction: column;
        gap: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }
    
    .recipe-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .btn-small {
        width: 100%;
    }
    
    /* Featured Recipes */
    .recipes-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .category-tabs {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .category-tab {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
    
    /* Cookbook */
    .cookbook-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .cookbook-stat {
        padding: var(--spacing-lg);
    }
    
    .cookbook-categories {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .cookbook-category {
        padding: var(--spacing-lg);
    }
    
    .category-stats {
        flex-direction: column;
        gap: var(--spacing-xs);
        text-align: center;
    }
    
    /* Products */
    .product-categories {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .product-category {
        padding: var(--spacing-lg);
    }
    
    .product-item {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .product-actions {
        margin-left: 0;
    }
    
    /* Blog */
    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .blog-card.featured {
        grid-column: span 1;
    }
    
    .blog-content {
        padding: var(--spacing-lg);
    }
    
    .blog-title {
        font-size: var(--font-size-lg);
    }
    
    .blog-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    /* Facts */
    .facts-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .fact-card {
        padding: var(--spacing-lg);
    }
    
    .fact-icon {
        font-size: var(--font-size-3xl);
    }
    
    .fact-title {
        font-size: var(--font-size-lg);
    }
    
    /* Newsletter */
    .newsletter-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }
    
    .newsletter-title {
        font-size: var(--font-size-2xl);
    }
    
    .newsletter-form-container {
        padding: var(--spacing-lg);
    }
    
    .newsletter-form .form-group {
        flex-direction: column;
    }
    
    .newsletter-input {
        margin-bottom: var(--spacing-sm);
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .social-links {
        justify-content: center;
    }
}

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 481px) and (max-width: 576px) {
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .flavor-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .dietary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cookbook-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 577px) and (max-width: 768px) {
    .nav-menu {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .search-input {
        width: 200px;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-stats {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .protein-source-selector {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .flavor-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .dietary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .recipes-grid {
        grid-template-columns: 1fr;
    }
    
    .cookbook-categories {
        grid-template-columns: 1fr;
    }
    
    .product-categories {
        grid-template-columns: 1fr;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-card.featured {
        grid-column: span 1;
    }
    
    .facts-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
    
    .newsletter-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }
    
    .hero-stats {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .protein-source-selector {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .flavor-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .dietary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cookbook-categories {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .product-categories {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .facts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
    
    .newsletter-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1025px) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
    }
    
    .protein-source-selector {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .flavor-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .dietary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .recipes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cookbook-categories {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .product-categories {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .facts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    }
}

/* Ultra Wide Screens (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
    
    .recipes-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .cookbook-categories {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .product-categories {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .blog-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .facts-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        padding: 80px 0 40px;
    }
    
    .hero-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }
    
    .hero-stats {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .hero-actions {
        flex-direction: row;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-img,
    .blog-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .btn,
    .search-container,
    .mobile-menu-btn {
        display: none !important;
    }
    
    .hero {
        padding: 20px 0;
    }
    
    .recipe-card {
        break-inside: avoid;
        margin-bottom: 20px;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .hero-particles {
        animation: none;
    }
    
    .float {
        animation: none;
    }
    
    .pulse {
        animation: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-bg: #0a0a0a;
        --secondary-bg: #1a1a1a;
        --accent-bg: #2a2a2a;
        --primary-text: #ffffff;
        --secondary-text: #cccccc;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --accent-color: #00ff00;
        --border-color: #ffffff;
        --primary-text: #ffffff;
        --secondary-text: #ffffff;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
    
    .recipe-card,
    .blog-card,
    .fact-card {
        border: 2px solid var(--border-color);
    }
}

/* Focus Styles for Keyboard Navigation */
@media (prefers-reduced-motion: no-preference) {
    .btn:focus,
    .nav-link:focus,
    .form-input:focus,
    .form-select:focus {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-link {
        padding: var(--spacing-md);
    }
    
    .flavor-label,
    .dietary-label {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .category-tab {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Ensure all interactive elements are 44x44px minimum on mobile */
@media (max-width: 768px) {
    .btn,
    .nav-link,
    .flavor-label,
    .dietary-label,
    .recipe-card {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }
    
    /* Add spacing between tappable elements */
    .recipes-grid {
        gap: 16px;
    }
}

/* Specific Mobile Breakpoints */
@media (max-width: 320px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .hero-title-main {
        font-size: var(--font-size-2xl);
    }
    
    .hero-stats {
        grid-template-columns: 1fr;
    }
    
    .flavor-grid {
        grid-template-columns: 1fr;
    }
    
    .dietary-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 321px) and (max-width: 375px) {
    .flavor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dietary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 376px) and (max-width: 414px) {
    .flavor-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .dietary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet Specific */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
    }
    
    .recipes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* --- Start of Critical/Mobile Fixes (from index.html) --- */
/* I have removed all the "!important" tags to fix your CSS */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; border: none; outline: none; box-shadow: none; }
body { background: #0a0f0a; color: #ffffff; min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; border: none; border-top: none; border-bottom: none; border-left: none; border-right: none; outline: none; }
html { border: none; border-top: none; border-bottom: none; border-left: none; border-right: none; outline: none; }
.header { display: block; visibility: visible; opacity: 1; background: #0a0f0a; position: relative; top: 0; left: 0; right: 0; z-index: 1000; border: none; border-bottom: 1px solid #374151; box-shadow: none; outline: none; -webkit-backdrop-filter: none; backdrop-filter: none; filter: none; -webkit-filter: none; }
.header::before, .header::after, .navbar::before, .navbar::after, .nav-container::before, .nav-container::after, .nav-brand::before, .nav-brand::after, .nav-menu::before, .nav-menu::after { display: none; content: none; height: 0; width: 0; }
.navbar, .nav-container, .nav-brand, .nav-menu { border: none; outline: none; box-shadow: none; }
.nav-link, .nav-link.active { outline: none; border: none; box-shadow: none; }
.nav-link::before, .nav-link::after, .nav-link.active::before, .nav-link.active::after { display: none; content: none; height: 0; width: 0; }
.mobile-menu-btn { outline: none; border: 1px solid #374151; background: #1e2e1e; box-shadow: none; }
.mobile-menu-btn:hover, .mobile-menu-btn:active, .mobile-menu-btn:focus { outline: none; border: 1px solid #374151; background: #2a3a2a; box-shadow: none; }
.search-input, .search-btn { border: 1px solid #374151; outline: none; box-shadow: none; }
.search-input:focus { border: 1px solid #374151; box-shadow: none; outline: none; }
.search-btn { background: #1e2e1e; }
* { outline: none; }
*::before, *::after { border: none; }
.navbar { display: flex; visibility: visible; opacity: 1; }
.nav-container { display: flex; visibility: visible; opacity: 1; }
.nav-brand .logo { display: flex; flex-direction: column; }
.hero { display: block; visibility: visible; opacity: 1; background: #0a0f0a; min-height: 300px; padding: 60px 20px 40px; }
.hero-container { display: grid; visibility: visible; opacity: 1; grid-template-columns: 1fr; }
.hero-content { display: block; visibility: visible; opacity: 1; }
.container { display: block; visibility: visible; opacity: 1; max-width: 100%; padding: 0 20px; }
.section { display: block; visibility: visible; opacity: 1; }
@media (max-width: 768px) {
    .mobile-menu-btn { display: block; visibility: visible; opacity: 1; }
    .hero-background { display: none; }
    .hero-container { grid-template-columns: 1fr; }
    .nav-menu { display: none; }
    .hero { padding: 60px 15px 30px; }
    .nav-brand .logo { flex-direction: row; flex-wrap: wrap; }
    .logo-subtitle { display: block; width: 100%; }
    .header { position: relative; top: 0; left: 0; right: 0; -webkit-backdrop-filter: none; backdrop-filter: none; filter: none; -webkit-filter: none; }
    * { -webkit-backdrop-filter: none; backdrop-filter: none; filter: none; -webkit-filter: none; }
    .overlay, .modal-backdrop, .recipe-modal-backdrop, .recipe-modal-overlay, .blur-overlay, [class*="overlay"], [class*="backdrop"], [class*="blur"], [id*="overlay"], [id*="backdrop"] { display: none; visibility: hidden; opacity: 0; background: none; background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
    *[style*="position: fixed"][style*="top: 0"], *[style*="position:fixed"][style*="top:0"], .recipe-modal[style*="display: none"] { background: transparent; background-color: transparent; border: none; display: none; }
    .recipe-modal[style*="display: none"], .recipe-modal[style*="display:none"] { display: none; visibility: hidden; opacity: 0; }
    .recipe-modal[style*="display: none"] *, .recipe-modal[style*="display:none"] * { display: none; visibility: hidden; opacity: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .recipe-modal-overlay { display: none; visibility: hidden; opacity: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; filter: none; -webkit-filter: none; }
    .hero-stat::before { display: none; content: none; height: 0; background: none; }
    *[style*="position: fixed"],
    *[style*="position:fixed"],
    .overlay,
    .modal,
    .popup { display: none; visibility: hidden; }
    html, body { border: none; border-top: none; border-bottom: none; border-left: none; border-right: none; outline: none; box-shadow: none; margin-top: 0; padding-top: 0; }
    .header { border: none; border-bottom: 1px solid #374151; border-top: none; border-left: none; border-right: none; box-shadow: none; outline: none; margin-top: 0; padding-top: 0; top: 0; }
    .navbar, .nav-container, .nav-brand, .nav-menu { border: none; outline: none; box-shadow: none; }
    .nav-link, .nav-link.active, .nav-link:hover, a.nav-link.active, li.nav-item .nav-link.active { outline: none; border: none; box-shadow: none; background: transparent; background-image: none; background-color: transparent; transform: none; }
    .nav-item, .nav-links, ul.nav-links, li.nav-item, .nav-actions, .search-container { border: none; outline: none; box-shadow: none; background: transparent; }
    .nav-link::before, .nav-link::after, .nav-link.active::before, .nav-link.active::after { display: none; content: none; height: 0; width: 0; }
    .mobile-menu-btn, .mobile-menu-btn.active, .mobile-menu-btn:hover, .mobile-menu-btn:active, .mobile-menu-btn:focus { outline: none; border: 1px solid #374151; background: #1e2e1e; box-shadow: none; background-image: none; }
    .mobile-menu-btn.active:hover { background: #2a3a2a; }
    .nav-menu.active { border: none; outline: none; box-shadow: none; }
    .search-input, .search-btn { border: 1px solid #374151; outline: none; box-shadow: none; }
    .search-input:focus { border: 1px solid #374151; box-shadow: none; outline: none; }
    .search-btn { background: #1e2e1e; }
    *:focus, *:focus-visible { outline: none; -webkit-tap-highlight-color: transparent; }
    *::before, *::after { border: none; background: none; background-image: none; }
    body { padding-bottom: 0; margin-top: 0; padding-top: 0; }
    html { padding-bottom: 0; margin-top: 0; padding-top: 0; }
    * { border-color: #374151; }
    .header, .navbar, .nav-container, .nav-brand, .nav-menu, .nav-links, .nav-item, .nav-link, .nav-actions, .search-container, .mobile-menu-btn { border-color: #374151; background-image: none; }
    *[style*="accent"], *[style*="22c55e"], *[style*="green"], *[style*="gradient"] { background-image: none; background: transparent; }
}
/* --- End of Critical/Mobile Fixes --- */