/* ==============================================
   SERIOUSLY SCIENTIFIC - COMPLETE MOBILE STYLES
   Version 2.1 - All fixes included
   ============================================== */

/* CRITICAL: This media query ensures styles ONLY apply on mobile devices */
@media only screen and (max-width: 768px) {
    
    /* ==============================================
       HEADER - REDUCED VERTICAL SPACING
       ============================================== */
    
    .site-header {
        position: relative !important;
        top: auto !important;
        padding: 10px 0 !important; /* Reduced padding */
    }
    
    .header-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 5px 10px !important; /* Less vertical padding */
        max-width: 100% !important;
        gap: 10px !important; /* Smaller gap between logo and search */
        flex-wrap: nowrap !important;
    }
    
    .logo-section {
        flex: 0 0 auto !important;
        min-width: unset !important;
        width: 90% !important;
        max-width: 320px !important; /* Match search width */
        margin: 0 auto !important;
    }
    
    .site-logo {
        max-width: 100% !important; /* Fill logo section width */
        width: 100% !important;
        height: auto !important;
        max-height: 110px !important;
        object-fit: contain !important; /* Preserve aspect ratio */
        margin: 0 auto !important;
        display: block !important;
    }
    
    .search-section {
        flex: 0 0 auto !important;
        min-width: unset !important;
        width: 90% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    
    .search-container {
        width: 100% !important;
        padding: 0 10px !important;
    }
    
    .search-field {
        width: 100% !important;
        padding: 10px 45px 10px 12px !important;
        font-size: 14px !important;
    }
    
    .search-submit {
        width: 35px !important;
        height: 35px !important;
        right: 12px !important;
        font-size: 16px !important;
    }
    
    /* ==============================================
       HOMEPAGE - GENERAL LAYOUT
       ============================================== */
	
	/* Hide the large status banner on mobile with high specificity */
    body .homepage-container .status-banner {
        display: none !important;
    }
   
    .homepage-container {
        padding: 15px !important;
        max-width: 100% !important;
    }
    
    /* ==============================================
       EDUCATORS SECTION - FIXED TITLE SIZE
       ============================================== */
    
    .educators-section {
        margin-bottom: 30px !important;
        padding: 0 !important;
    }
    
    .section-title,
    .educators-section .section-title,
    .educators-section h2,
    .homepage-container h2 {
        font-size: 1.4em !important;
        margin-bottom: 20px !important;
        padding: 0 10px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    /* ==============================================
       EDUCATOR CARDS - MOBILE LAYOUT
       ============================================== */
    
    .educators-grid {
        display: block !important;
        padding: 0 !important;
    }
    
    .educator-card-link,
    .educator-card-placeholder {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .educator-card {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
        min-height: auto !important;
        text-align: center !important;
    }
    
    .educator-avatar {
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto 15px auto !important;
        position: relative !important;
    }
    
    .educator-avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
    
    .educator-content {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .educator-name {
        font-size: 1.4em !important;
        margin-bottom: 10px !important;
    }
    
    .educator-description {
        font-size: 0.95em !important;
        margin-bottom: 15px !important;
        line-height: 1.4 !important;
    }
    
    .educator-stats {
        display: flex !important;
        justify-content: space-around !important;
        flex-direction: row !important;
        margin: 15px 0 !important;
    }
    
    .stat-item {
        text-align: center !important;
        flex: 1 !important;
    }
    
    .stat-number {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 1.1em !important;
        padding: 6px 10px !important;
    }
    
    .stat-label {
        font-size: 0.75em !important;
    }
    
    .educator-specialty {
        width: 100% !important;
        display: block !important;
        margin-top: 10px !important;
        padding: 10px !important;
    }
    
    /* ==============================================
       EPISODE PLAYER - HIDE TITLES AND META
       ============================================== */
    
    .episode-player .episode-title,
    .episode-player .episode-info h1,
    .single-bill_nye_episodes .episode-title,
    .single-bill_nye_episodes .episode-info h1,
    .episode-info h1,
    .episode-title,
    h1.episode-title,
    .episode-info,
    .episode-meta,
    .episode-info .episode-meta,
    .episode-player .episode-meta {
        display: none !important;
    }
    
    .tv-wrapper {
        border-width: 10px !important;
        padding: 15px !important;
        border-radius: 20px !important;
        margin-top: 10px !important;
        position: relative !important;
    }
    
    .tv-aerial-base {
        position: absolute !important;
        top: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 40px !important;
        height: 20px !important;
        background: #333 !important;
        border-radius: 5px 5px 0 0 !important;
        z-index: 2 !important;
    }
    
    .tv-aerial {
        position: absolute !important;
        top: -35px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1 !important;
    }
    
    .tv-container {
        position: relative !important;
        margin-top: 0 !important;
    }
    
    .video-container {
        padding-bottom: 56.25% !important;
    }
    
    /* ==============================================
       VCR PANEL - MOBILE ACTION HUB REDESIGN (NEW)
       ============================================== */
    
    .vcr-panel {
        margin-top: 20px !important;
    }
    
    .vcr-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .transport-wrapper {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        order: 1 !important;
    }

    .transport-btn {
        flex: 1 !important;
        width: auto !important;
        height: 55px !important;
    }

    .center-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        order: 2 !important;
    }

    .function-grid-top,
    .function-grid-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .function-grid-top .function-btn,
    .function-grid-bottom .function-btn,
    .center-controls .vhs-slot-btn {

        width: 100% !important;
        margin: 0 !important;
    }
    
    /* ==============================================
       EPISODE GRID - SINGLE COLUMN
       ============================================== */
    
    .episodes-grid {
        display: block !important;
        padding: 0 15px !important;
    }
    
    .episode-card {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .episode-thumbnail {
        aspect-ratio: 16/9 !important;
    }
    
    /* ==============================================
       QUICK ACTIONS - STACK VERTICALLY
       ============================================== */
    
    .quick-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        padding: 0 15px !important;
    }
    
    .action-btn {
        width: 100% !important;
        padding: 15px !important;
        font-size: 1em !important;
    }
    
    /* ==============================================
       CATEGORY PAGES - MOBILE ADJUSTMENTS
       ============================================== */
    
    .category-hero h1 {
        font-size: 1.8em !important;
    }
    
    .category-description {
        font-size: 1em !important;
        padding: 0 15px !important;
    }
    
    .category-filters {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .filter-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 12px !important;
    }
    
    /* ==============================================
       BLOG POST CONTENT - MOBILE READABILITY
       ============================================== */
    
    .wp-block-post-content,
    .entry-content,
    .post-content {
        padding: 20px !important;
        margin: 10px !important;
        border-radius: 10px !important;
    }
    
    .wp-block-post-content h1,
    .entry-content h1,
    .post-content h1 {
        font-size: 1.8em !important;
    }
    
    .wp-block-post-content h2,
    .entry-content h2,
    .post-content h2 {
        font-size: 1.5em !important;
        margin-top: 25px !important;
    }
    
    .wp-block-post-content h3,
    .entry-content h3,
    .post-content h3 {
        font-size: 1.3em !important;
    }
    
    .wp-block-post-content p,
    .entry-content p,
    .post-content p {
        font-size: 1em !important;
        line-height: 1.6 !important;
    }
    
    .wp-block-post-content > p:first-of-type,
    .entry-content > p:first-of-type,
    .post-content > p:first-of-type {
        font-size: 1.1em !important;
        padding: 15px !important;
    }
    
    .wp-block-post-content table,
    .entry-content table,
    .post-content table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    /* ==============================================
       UPDATE DIARY - MOBILE LAYOUT
       ============================================== */
    
    .update-diary-section {
        padding: 20px !important;
    }
    
    .update-title {
        font-size: 1.3em !important;
    }
    
    .update-item {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
    }
    
    .update-date {
        min-width: unset !important;
        margin-bottom: 5px !important;
    }
    
    /* ==============================================
       FOOTER - FIX COPYRIGHT ICON SIZE
       ============================================== */
    
    footer {
        padding: 15px !important;
        font-size: 0.9em !important;
    }
    
    footer p {
        font-size: 0.9em !important;
        padding: 15px 10px !important;
        line-height: 1.4 !important;
    }
    
    footer p::before,
    footer .copyright-icon,
    footer img,
    footer i,
    footer span {
        font-size: 1em !important;
        width: auto !important;
        height: 1em !important;
        vertical-align: middle !important;
        display: inline !important;
        max-width: 1em !important;
    }
    
    /* ==============================================
       BENEFITS GRID - SINGLE COLUMN
       ============================================== */
    
    .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 0 15px !important;
    }
    
    .science-quote {
        font-size: 1.1em !important;
        padding: 20px !important;
    }
    
    /* ==============================================
       GENERAL MOBILE HELPERS
       ============================================== */
    
    body {
        overflow-x: hidden !important;
    }
    
    .site-main,
    .homepage-container,
    .category-page-container,
    .content-area {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .breadcrumb {
        font-size: 0.8em !important;
        padding: 10px !important;
    }
}
/* END OF MOBILE STYLES */

/* ==============================================
   TABLET SPECIFIC ADJUSTMENTS
   ============================================== */

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .header-container {
        padding: 15px 30px !important;
    }
    
    .educators-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .episodes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* END OF TABLET STYLES */