/**
 * BBQ Report - Cook Mode Styles
 * Version: 1.0.0
 *
 * Styles for Cook Mode functionality
 * - Cook Mode button styling
 * - Cook Mode active state (hides ads, optimizes layout)
 * - Mobile-responsive
 */

/* ============================================
   COOK MODE TOGGLE BUTTON
   ============================================ */

.bbq-cook-mode-wrapper {
    margin: var(--space-lg) 0;
    text-align: right;
}

.bbq-cook-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--ember);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bbq-cook-mode-toggle:hover {
    background-color: var(--flame);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.bbq-cook-mode-toggle:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.bbq-cook-mode-toggle:focus-visible {
    outline: 3px solid var(--ember);
    outline-offset: 3px;
}

.bbq-cook-mode-toggle.active {
    background-color: var(--success);
}

.bbq-cook-mode-toggle.active:hover {
    background-color: #45a049;
}

.cook-mode-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cook-mode-label {
    font-weight: 600;
}

/* Fixed position variant (for mobile) */
.bbq-cook-mode-toggle.fixed {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: 999;
    box-shadow: var(--shadow-xl);
}

/* ============================================
   COOK MODE ACTIVE STATE
   ============================================ */

body.cook-mode {
    /* Hide all ads */
    .ad-unit,
    .ad-container,
    .advertisement,
    [class*="adsbygoogle"],
    [class*="ad-slot"],
    [id*="ad-"],
    [class*="banner"],
    .google-auto-placed,
    ins.adsbygoogle {
        display: none !important;
    }

    /* Hide sidebars */
    .sidebar,
    .widget-area,
    aside {
        display: none !important;
    }

    /* Hide non-essential elements */
    .related-posts,
    .comments-section,
    #comments,
    .comment-respond,
    .social-share,
    .author-bio,
    .newsletter-signup,
    footer.site-footer,
    .breadcrumbs,
    .post-navigation {
        display: none !important;
    }

    /* Optimize main content area */
    .entry-content,
    article.post,
    main {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: var(--space-xl) var(--space-lg) !important;
    }

    /* Header simplification */
    .site-header,
    header.header {
        position: relative !important;
        background-color: var(--bg-light) !important;
        box-shadow: none !important;
    }

    .site-header .site-branding,
    .site-header .site-title {
        text-align: center !important;
    }

    .main-navigation,
    .site-header nav {
        display: none !important;
    }

    /* Recipe-specific optimizations */
    .recipe-card,
    .wprm-recipe,
    [itemtype*="Recipe"] {
        max-width: 800px !important;
        margin: 0 auto !important;
        padding: var(--space-xl) !important;
        background-color: var(--bg-card) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--shadow-lg) !important;
    }

    .recipe-title,
    .wprm-recipe-name,
    h1.entry-title {
        font-size: var(--fs-4xl) !important;
        color: var(--charcoal) !important;
        text-align: center !important;
        margin-bottom: var(--space-xl) !important;
    }

    /* Recipe instructions - larger, more readable */
    .recipe-instructions,
    .wprm-recipe-instructions,
    .recipe-steps {
        font-size: 1.125rem !important;
        line-height: 1.8 !important;
    }

    .recipe-instructions li,
    .wprm-recipe-instruction {
        padding: var(--space-lg) !important;
        margin-bottom: var(--space-md) !important;
        background: var(--ash) !important;
        border-radius: var(--radius-md) !important;
        border-left: 4px solid var(--ember) !important;
    }

    .recipe-instructions li:hover,
    .wprm-recipe-instruction:hover {
        background: #d6d6d6 !important;
    }

    /* Recipe ingredients - cleaner layout */
    .recipe-ingredients,
    .wprm-recipe-ingredients {
        background-color: var(--bg-card) !important;
        padding: var(--space-xl) !important;
        border: 2px solid var(--ember) !important;
        border-radius: var(--radius-lg) !important;
        margin: var(--space-xl) 0 !important;
    }

    .recipe-ingredients li,
    .wprm-recipe-ingredient {
        padding: var(--space-sm) 0 !important;
        font-size: 1rem !important;
        border-bottom: 1px solid var(--ash) !important;
    }

    .recipe-ingredients li:last-child {
        border-bottom: none !important;
    }

    /* Recipe meta information */
    .recipe-meta,
    .wprm-recipe-times-container {
        display: flex !important;
        justify-content: space-around !important;
        flex-wrap: wrap !important;
        gap: var(--space-lg) !important;
        padding: var(--space-xl) !important;
        background-color: var(--ash) !important;
        border-radius: var(--radius-lg) !important;
        margin: var(--space-xl) 0 !important;
    }

    /* Notes and tips - highlighted */
    .recipe-notes,
    .wprm-recipe-notes,
    .recipe-tips {
        padding: var(--space-lg) !important;
        background-color: #fff9e6 !important;
        border-left: 4px solid var(--warning) !important;
        border-radius: var(--radius-md) !important;
        margin: var(--space-xl) 0 !important;
    }

    /* Print button enhancement */
    .recipe-print,
    .wprm-recipe-print {
        display: inline-block !important;
        margin: var(--space-lg) 0 !important;
    }
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    .bbq-cook-mode-wrapper {
        text-align: center;
    }

    .bbq-cook-mode-toggle {
        width: 100%;
        justify-content: center;
    }

    /* Cook Mode active state on mobile */
    body.cook-mode {
        .entry-content,
        article.post,
        main {
            padding: var(--space-md) !important;
        }

        .recipe-card,
        .wprm-recipe {
            padding: var(--space-lg) !important;
        }

        .recipe-title,
        h1.entry-title {
            font-size: var(--fs-3xl) !important;
        }

        .recipe-instructions,
        .wprm-recipe-instructions {
            font-size: 1rem !important;
        }

        .recipe-instructions li,
        .wprm-recipe-instruction {
            padding: var(--space-md) !important;
        }

        .recipe-meta {
            flex-direction: column !important;
            gap: var(--space-md) !important;
        }
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    /* Automatically enable cook mode for printing */
    body {
        .ad-unit,
        .ad-container,
        .advertisement,
        .sidebar,
        .widget-area,
        aside,
        .related-posts,
        .comments-section,
        .social-share,
        .author-bio,
        .newsletter-signup,
        footer.site-footer,
        .main-navigation,
        .bbq-cook-mode-toggle {
            display: none !important;
        }
    }

    .recipe-card,
    .wprm-recipe,
    .entry-content {
        max-width: 100% !important;
        box-shadow: none !important;
    }

    .recipe-instructions li,
    .wprm-recipe-instruction {
        page-break-inside: avoid !important;
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Screen reader announcer (visually hidden) */
#bbq-cook-mode-announcer.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .bbq-cook-mode-toggle {
        border: 2px solid currentColor;
    }

    body.cook-mode .recipe-instructions li {
        border: 2px solid var(--charcoal) !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .bbq-cook-mode-toggle {
        transition: none !important;
    }

    .bbq-cook-mode-toggle:hover {
        transform: none !important;
    }
}