/**
 * Blog Page Framer SSR Fixes
 * ==========================
 * 
 * IMPORTANT: This stylesheet contains legacy Framer SSR visibility fixes that are
 * ONLY needed for blog pages that still use Framer-exported HTML.
 * 
 * Include this stylesheet ONLY on blog pages, NOT globally.
 * 
 * Usage:
 *   <link rel="stylesheet" href="/assets/css/blog-framer-ssr.css">
 * 
 * Context:
 * - Blog pages use Framer-exported HTML with SSR-variant containers that have
 *   opacity:0.001 and transform styles for animation purposes.
 * - When JavaScript doesn't properly trigger these animations, content remains invisible.
 * - Main pages (discover, pricing, generate, deliver, use-cases, contact, homepage)
 *   have been migrated to CRO header/footer components and do NOT need these fixes.
 * 
 * Migration Note:
 * - When blog pages are migrated away from Framer, this stylesheet can be deleted.
 * - All rules are scoped to `.flo-sguMB` (blog layout container) for safety.
 */

/* Reset opacity on SSR variant containers - ensure blog content is visible */
.flo-sguMB .ssr-variant,
.flo-sguMB .ssr-variant > *,
.flo-sguMB [class*="container-"] {
  opacity: 1 !important;
}

/* Fix transform issues that push blog content off-screen */
.flo-sguMB .ssr-variant header,
.flo-sguMB .ssr-variant nav,
.flo-sguMB .ssr-variant [class*="hero"],
.flo-sguMB .ssr-variant section,
.flo-sguMB .ssr-variant main,
.flo-sguMB .ssr-variant footer {
  opacity: 1 !important;
  transform: none !important;
}

/* Ensure critical blog page elements are visible regardless of Framer classes */
.flo-sguMB header,
.flo-sguMB nav,
.flo-sguMB main,
.flo-sguMB section,
.flo-sguMB footer,
.flo-sguMB [role="navigation"],
.flo-sguMB [role="main"],
.flo-sguMB [role="contentinfo"],
.flo-sguMB h1, .flo-sguMB h2, .flo-sguMB h3, .flo-sguMB h4, .flo-sguMB h5, .flo-sguMB h6,
.flo-sguMB .hero,
.flo-sguMB [class*="hero"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fix inline opacity styles used by Framer for animation prep */
.flo-sguMB [style*="opacity:0.001"],
.flo-sguMB [style*="opacity: 0.001"] {
  opacity: 1 !important;
}

/*
 * Fix elements with opacity:0 that are meant to animate in, but EXCLUDE:
 * - Video overlays (flo-1l6w61j and similar)
 * - Template overlays (#template-overlay)
 * - Mobile menus and nav drawers (elements that should remain hidden until toggled)
 * - Elements with data-overlay or data-hidden attributes
 */
.flo-sguMB .ssr-variant [style*="opacity:0;"]:not([class*="overlay"]):not([id*="overlay"]):not([data-overlay]):not([data-hidden]):is(h1, h2, h3, h4, h5, h6, p, section, article, div:has(> h1), div:has(> h2), div:has(> h3), div:has(> p)),
.flo-sguMB .ssr-variant [style*="opacity:0 "]:not([class*="overlay"]):not([id*="overlay"]):not([data-overlay]):not([data-hidden]):is(h1, h2, h3, h4, h5, h6, p, section, article, div:has(> h1), div:has(> h2), div:has(> h3), div:has(> p)),
.flo-sguMB .ssr-variant [style*="opacity: 0;"]:not([class*="overlay"]):not([id*="overlay"]):not([data-overlay]):not([data-hidden]):is(h1, h2, h3, h4, h5, h6, p, section, article, div:has(> h1), div:has(> h2), div:has(> h3), div:has(> p)),
.flo-sguMB .ssr-variant [style*="opacity: 0 "]:not([class*="overlay"]):not([id*="overlay"]):not([data-overlay]):not([data-hidden]):is(h1, h2, h3, h4, h5, h6, p, section, article, div:has(> h1), div:has(> h2), div:has(> h3), div:has(> p)) {
  opacity: 1 !important;
}

/* 
 * Fix container elements with opacity:0 that wrap critical content,
 * but only if they're not overlay/menu containers
 */
.flo-sguMB [class*="container-"][style*="opacity:0"]:not([class*="overlay"]):not([id*="overlay"]):not([data-overlay]):not([data-hidden]):has(h1, h2, h3, h4, h5, h6, p, a, button) {
  opacity: 1 !important;
}

/* 
 * Fix will-change:transform animation wrappers, but only for content elements
 * Exclude video overlays, mobile menus, and other intentionally hidden elements
 */
.flo-sguMB [style*="will-change:transform"][style*="opacity:0"]:not([class*="overlay"]):not([id*="overlay"]):not([data-overlay]):not([data-hidden]):is(header, nav, section, main, footer, div:has(> h1), div:has(> h2), div:has(> h3), div:has(> p), div:has(> a.btn)) {
  opacity: 1 !important;
}

/*
 * Ensure video overlays and similar elements remain hidden
 * These elements have opacity:0 intentionally and toggle via JS
 */
.flo-sguMB .flo-1l6w61j,
.flo-sguMB #template-overlay,
.flo-sguMB [data-overlay],
.flo-sguMB [data-hidden] {
  /* Do not override - let these remain as-is for JS toggling */
}

/* Fix transform translateY that pushes content off-screen before animation */
.flo-sguMB [style*="translateY(-"] {
  transform: none !important;
}

/* ==========================================================================
   Responsive Hiding
   ========================================================================== */

/* Preserve intentional responsive hiding for different breakpoints */
@media (min-width: 810px) {
  /* Hide mobile-only elements on tablet/desktop */
  .hidden-2hlk8r:not(header):not(nav):not(main):not(footer) {
    /* Keep responsive hiding intact for layout elements, not critical content */
  }
}

@media (max-width: 809px) {
  /* Hide desktop-only elements on mobile */
  .hidden-1fcvg2h:not(header):not(nav):not(main):not(footer) {
    /* Keep responsive hiding intact for layout elements, not critical content */
  }
}

/* ==========================================================================
   Dark Mode Support for Blog Pages
   ========================================================================== */

/* Override Framer token colors for dark mode */
html.dark-theme {
  /* Background tokens */
  --token-75605996-be10-4e50-a69d-b57d62ac8ca7: var(--bg-primary) !important;
  --token-8fba7762-5fb9-4666-b34b-80c0c3907228: var(--bg-secondary) !important;
  --token-0ad6f03c-51db-401d-a705-20be71b25789: var(--bg-secondary) !important;
  --token-4783d8c7-c53e-4da1-b7b5-d29fd976d441: var(--bg-tertiary) !important;
  --token-af4ca976-267a-4916-940b-edd30ffe0f8f: var(--bg-primary) !important;
  
  /* Border tokens */
  --token-5da607b5-7ecc-4e5e-b14f-c4de74dea385: var(--border-color) !important;
  --token-fd74f513-41bf-403f-9b72-88acdddd1cac: var(--border-color) !important;
  --token-44d05c59-5d68-43c9-b4fb-68e58a432a9d: var(--border-color) !important;
  
  /* Text color tokens */
  --token-6ea1cf78-9a19-4c57-8c02-a691aeaa8ede: var(--text-secondary) !important;
  --token-68232793-c6a9-455f-9a15-c382b39c08fe: var(--text-secondary) !important;
  --token-7941521b-5ba0-49a3-8b3a-62f47b00c51f: var(--text-secondary) !important;
  --token-1744620b-d9a9-48f3-a0eb-8b3eb4e1de4c: var(--text-primary) !important;
  --token-fb2b391b-3324-4792-a06a-d464c6d3a502: var(--text-secondary) !important;
  
  /* Shadow tokens */
  --token-41a67311-f555-4f44-b54d-2700bd079e03: rgba(255, 255, 255, 0.04) !important;
}

/* Blog page container background */
html.dark-theme .flo-sguMB,
html.dark-theme #main {
  background: var(--bg-primary) !important;
}

/* Blog text elements */
html.dark-theme .flo-sguMB .flo-text {
  color: var(--text-secondary);
}

html.dark-theme .flo-sguMB h1.flo-text,
html.dark-theme .flo-sguMB h2.flo-text,
html.dark-theme .flo-sguMB h3.flo-text {
  color: var(--text-primary) !important;
}

/* Blog card backgrounds */
html.dark-theme .flo-sguMB [class*="card"],
html.dark-theme .flo-sguMB [class*="Card"] {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Links in blog content */
html.dark-theme .flo-sguMB a:not(.btn):not([class*="cta"]):not([class*="nav"]) {
  color: var(--color-primary-blue);
}