From 9afdd6ee1d76be4657f3d1aeb8e8439b75982266 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Sat, 29 Nov 2025 12:19:26 -0600
Subject: [PATCH] perf: defer style.css - eliminate last render-blocking CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add site structure, accessibility, typography to critical-bootstrap.css
- Defer roi-main-style (style.css) with media='print'
- Goal: 0 blocking CSS files (was 1 file, 19KB)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 Assets/css/critical-bootstrap.css | 65 +++++++++++++++++++++++++++++++
 Inc/enqueue-scripts.php           |  5 ++-
 2 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/Assets/css/critical-bootstrap.css b/Assets/css/critical-bootstrap.css
index d35a4b2b..d124137e 100644
--- a/Assets/css/critical-bootstrap.css
+++ b/Assets/css/critical-bootstrap.css
@@ -709,3 +709,68 @@ button:focus:not(:focus-visible) {
     .d-md-block { display: block !important; }
     .d-md-none { display: none !important; }
 }
+
+/* ==========================================================================
+   SITE STRUCTURE (Layout crítico)
+   ========================================================================== */
+.site {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+.site-main {
+    flex-grow: 1;
+}
+
+/* ==========================================================================
+   ACCESSIBILITY (Critical - above-the-fold)
+   ========================================================================== */
+.screen-reader-text {
+    position: absolute;
+    left: -10000px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+.skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: #000;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    z-index: 100000;
+    text-decoration: none;
+}
+.skip-link:focus {
+    top: 0;
+}
+
+/* ==========================================================================
+   TYPOGRAPHY BASE (Critical)
+   ========================================================================== */
+p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    line-height: 1.2;
+}
+h1 { font-size: calc(1.375rem + 1.5vw); }
+h2 { font-size: calc(1.325rem + 0.9vw); }
+h3 { font-size: calc(1.3rem + 0.6vw); }
+h4 { font-size: calc(1.275rem + 0.3vw); }
+h5 { font-size: 1.25rem; }
+h6 { font-size: 1rem; }
+@media (min-width: 1200px) {
+    h1 { font-size: 2.5rem; }
+    h2 { font-size: 2rem; }
+    h3 { font-size: 1.75rem; }
+    h4 { font-size: 1.5rem; }
+}
diff --git a/Inc/enqueue-scripts.php b/Inc/enqueue-scripts.php
index 3267319d..ab2ff188 100644
--- a/Inc/enqueue-scripts.php
+++ b/Inc/enqueue-scripts.php
@@ -29,6 +29,7 @@ define('ROI_DEFERRED_CSS', [
     'roi-fonts',      // @font-face inline en critical-bootstrap.css
     'roi-bootstrap',  // Critical inline via CriticalBootstrapService
     'roi-variables',  // Variables ahora inline en critical CSS
+    'roi-main-style', // Critical base inline via CriticalBootstrapService
     // Componentes específicos (below the fold)
     'roi-badges',
     'roi-pagination',
@@ -178,8 +179,8 @@ function roi_enqueue_main_stylesheet() {
         'roi-main-style',
         get_template_directory_uri() . '/Assets/css/style.css',
         array('roi-variables'),
-        '1.0.5', // Arquitectura: Separación de responsabilidades CSS
-        'all'
+        '1.0.6', // DIFERIDO - critical base inline via CriticalBootstrapService
+        'print' // DIFERIDO - media='print' → onload="this.media='all'"
     );
 }