/* ============================================================ P26: 1920px SITE-WIDE LAYOUT OVERHAUL - Article body: 1280-1400px responsive - Category archive: 3 columns + right sidebar (580px main + 320px sidebar) - Container max-width: 1800px (allow full 1920 use) - Header: distribute nav across full width - Mobile: revert to current behavior ============================================================ */ /* === 1. WIDE-SCREEN CONTAINER MAX-WIDTHS (>=1500px) === */ @media (min-width: 1500px) { /* Elementor default content width */ .elementor-section.elementor-section-boxed > .elementor-container, .elementor-section .elementor-container { max-width: 1800px !important; } /* Astra default container */ .ast-container, .site-content > .ast-container, .site-header > .ast-container, .site-footer > .ast-container { max-width: 1800px !important; } /* Body/site wrapper - allow full viewport */ body.single-post .site-content, body.archive .site-content, body.category .site-content, .elementor-location-archive .elementor-section.elementor-section-boxed > .elementor-container { max-width: 100% !important; } } /* === 2. SINGLE POST ARTICLE BODY - 1280-1400px responsive === */ @media (min-width: 1200px) and (max-width: 1499px) { html body.single-post.single .entry-content, html body.single-post.single .ast-article-single .entry-content, body.wp-singular.single.single-post .entry-content, html body.single-post.single .post-thumb-img-content, body.wp-singular.single.single-post .post-thumb-img-content { max-width: 1100px !important; } } @media (min-width: 1500px) and (max-width: 1799px) { html body.single-post.single .entry-content, html body.single-post.single .ast-article-single .entry-content, body.wp-singular.single.single-post .entry-content, html body.single-post.single .post-thumb-img-content, body.wp-singular.single.single-post .post-thumb-img-content { max-width: 1340px !important; } } @media (min-width: 1800px) { html body.single-post.single .entry-content, html body.single-post.single .ast-article-single .entry-content, body.wp-singular.single.single-post .entry-content, html body.single-post.single .post-thumb-img-content, body.wp-singular.single.single-post .post-thumb-img-content { max-width: 1400px !important; } } /* === 3. CATEGORY ARCHIVE - 3 COL + RIGHT SIDEBAR (>=1500px) === */ @media (min-width: 1500px) { /* Make the posts widget column narrower to leave room for sidebar */ .elementor-element-w_posts { flex: 0 0 calc(100% - 360px) !important; max-width: calc(100% - 360px) !important; width: calc(100% - 360px) !important; } /* Injected sidebar styling */ .cn-studio-archive-sidebar { position: relative; width: 340px !important; flex: 0 0 340px !important; margin-left: 20px; padding: 0; } .cn-studio-archive-sidebar > div { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 24px 22px !important; margin-bottom: 20px !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .cn-studio-archive-sidebar h4 { color: #fff !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 16px !important; padding: 0 0 12px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .cn-studio-archive-sidebar ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .cn-studio-archive-sidebar li { padding: 10px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; } .cn-studio-archive-sidebar li:last-child { border-bottom: 0 !important; } .cn-studio-archive-sidebar a { color: rgba(255, 255, 255, 0.78) !important; text-decoration: none !important; font-size: 14px !important; line-height: 1.5 !important; display: block; transition: color 0.2s; } .cn-studio-archive-sidebar a:hover { color: #a29bfe !important; } .cn-studio-archive-sidebar .cat-mini { display: inline-block; padding: 4px 10px; margin: 4px 4px 4px 0; background: rgba(108, 92, 231, 0.15); border: 1px solid rgba(108, 92, 231, 0.3); border-radius: 999px; color: #c4baff !important; font-size: 12px !important; } .cn-studio-archive-sidebar .newsletter-box { background: linear-gradient(135deg, rgba(108,92,231,0.18) 0%, rgba(0,212,255,0.12) 100%) !important; border: 1px solid rgba(108, 92, 231, 0.3) !important; } .cn-studio-archive-sidebar .newsletter-box p { color: rgba(255, 255, 255, 0.78) !important; font-size: 13px !important; line-height: 1.55 !important; margin: 0 0 14px !important; } .cn-studio-archive-sidebar .newsletter-box input { width: 100% !important; background: rgba(10, 13, 58, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #fff !important; padding: 10px 12px !important; border-radius: 8px !important; font-size: 13px !important; margin-bottom: 8px !important; box-sizing: border-box !important; } .cn-studio-archive-sidebar .newsletter-box button { width: 100% !important; background: linear-gradient(135deg, #6c5ce7 0%, #00d4ff 100%) !important; color: #fff !important; border: 0 !important; padding: 10px 14px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; } } /* === 4. HEADER LAYOUT for 1920px (full width padding, distribute nav) === */ @media (min-width: 1500px) { header.site-header#masthead .ast-container, header.ast-main-header-wrap .ast-container, .site-header > .ast-container { max-width: 1800px !important; padding-left: 60px !important; padding-right: 60px !important; } /* Center the nav evenly */ .site-branding { flex: 0 0 auto !important; } .main-header-bar-navigation, .ast-header-woo-cart, .ast-masthead-custom-menu-items { flex: 1 1 auto !important; } /* Better visual balance for nav items */ .main-header-menu > .menu-item > a { padding: 0 18px !important; } } /* === 5. WIDE-SCREEN TYPOGRAPHY TWEAKS (1920px) === */ @media (min-width: 1500px) { /* Article body paragraphs: keep readable line-length */ html body.single-post.single .entry-content p, body.wp-singular.single.single-post .entry-content p { font-size: 18px !important; line-height: 1.85 !important; } /* Article body H2 spacing */ html body.single-post.single .entry-content h2, body.wp-singular.single.single-post .entry-content h2 { font-size: 32px !important; margin-top: 56px !important; margin-bottom: 24px !important; } /* Article body H3 spacing */ html body.single-post.single .entry-content h3, body.wp-singular.single.single-post .entry-content h3 { font-size: 24px !important; margin-top: 40px !important; margin-bottom: 18px !important; } } /* === 6. CATEGORY ARCHIVE LAYOUT (sidebar injection point) === */ @media (min-width: 1500px) { /* Make the inner section column 2-col flex */ body.category .elementor-section .elementor-column[data-col="100"], body.archive .elementor-section .elementor-column[data-col="100"] { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; } body.category .elementor-section .elementor-column[data-col="100"] > .elementor-widget-wrap, body.archive .elementor-section .elementor-column[data-col="100"] > .elementor-widget-wrap { width: calc(100% - 360px) !important; flex: 0 0 calc(100% - 360px) !important; padding: 0 20px 0 0 !important; } } /* === 7. MOBILE REVERT (don't break what we have) === */ @media (max-width: 1499px) { .cn-studio-archive-sidebar { display: none !important; } } /* === 8. SIDEBAR INJECTION (>=1500px on category/tag archives) === */ (function() { function injectSidebar() { if (window.innerWidth < 1500) return; if (!document.body.classList.contains('category') && !document.body.classList.contains('tag') && !document.body.classList.contains('tax-ld_course_category')) return; if (document.querySelector('.cn-studio-archive-sidebar')) return; // Find the section column containing the posts widget var postsWidget = document.querySelector('.elementor-element-w_posts'); if (!postsWidget) return; var column = postsWidget.closest('.elementor-column'); if (!column) return; var columnWrap = column.querySelector('.elementor-widget-wrap') || column.querySelector('.elementor-column-wrap'); if (!columnWrap) return; // Build sidebar var sidebar = document.createElement('aside'); sidebar.className = 'cn-studio-archive-sidebar'; sidebar.innerHTML = [ '
', '', '