/*
 * Homepage styles — extracted from page-floreva-home.php inline <style> block.
 * Loaded only on the homepage via inc/assets.php.
 */

body { font-family: 'Poppins', sans-serif !important; font-weight: 300 !important; background: #FDF8F4 !important; color: #3D2E35 !important; }
h1,h2,h3,h4,.serif-font { font-family: 'Jost', sans-serif !important; font-weight: 400 !important; }
.label-font { font-family: 'Jost', sans-serif !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }

/* Hide Kadence header & footer — we use our own */
#masthead, .site-header, header.site-header, .header-wrap { display: none !important; }
#colophon, .site-footer, footer.site-footer { display: none !important; }

/* Remove Kadence content padding */
#inner-wrap, .content-container, #primary, .site-content { padding-top: 0 !important; margin-top: 0 !important; }
.entry-content { padding: 0 !important; margin: 0 !important; }

/* Our fixed header */
.fl-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
}
.fl-header.fl-scrolled {
  background: rgba(253,248,244,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* Logo and icons turn white over hero (before scroll) */
.fl-header:not(.fl-scrolled) .fl-header-logo { filter: brightness(0) invert(1); transition: filter 0.35s; }
.fl-header:not(.fl-scrolled) nav svg { stroke: white !important; }
.fl-header:not(.fl-scrolled) #fl-menu-toggle svg { stroke: white !important; }
body.admin-bar .fl-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .fl-header { top: 46px; } }

/* Hero gradient overlay */
.fl-hero-gradient { background: linear-gradient(0deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 55%); }

/* FAQ accordion */
.fl-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1); }
.fl-accordion-item.open .fl-accordion-content { max-height: 300px; }
.fl-accordion-item.open .fl-accordion-icon { transform: rotate(180deg); }
.fl-accordion-icon { transition: transform 0.3s; display: inline-block; }

/* Reviews scrollbar hide */
.fl-hide-scrollbar::-webkit-scrollbar { display: none; }
.fl-hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Glass card */
.fl-glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.5); }

/* Collection hover zoom */
.fl-collection-img { transition: transform 0.7s ease; }
.fl-collection-wrap:hover .fl-collection-img { transform: scale(1.05); }

/* CTA button hover */
.fl-btn-shop:hover { background: #2D2D2D !important; }

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE  (max-width: 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Kill ALL Kadence wrapper padding */
  #inner-wrap, .content-container, #primary, .site-content,
  .content-wrap, .site-main, .entry-content-wrap,
  .entry-content, .content-inside {
    padding: 0 !important; margin: 0 !important;
    max-width: 100% !important; width: 100% !important;
    overflow-x: hidden !important;
  }
  html, body { overflow-x: hidden !important; }

  /* Header nav tighten */
  .fl-header nav { padding: 0.6rem 0.75rem !important; }
  .fl-header a[style*="font-size:1.5rem"] { font-size: 1.2rem !important; letter-spacing: 0.1em !important; }

  /* Hero section */
  #fl-home section:first-of-type { height: 65vh !important; }
  #fl-home section:first-of-type h2 { font-size: 1.6rem !important; letter-spacing: 0.06em !important; }
  #fl-home section:first-of-type p { font-size: 0.8rem !important; }

  /* Main content padding */
  main { padding-top: 48px !important; }
  main > section { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Vitamin C promo */
  main > section:nth-of-type(2) h3 { font-size: 1.4rem !important; }

  /* Collection grid — keep 2-col but tighter */
  main > section:nth-of-type(3) > div {
    gap: 0.75rem !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  main > section:nth-of-type(3) h4 { font-size: 0.95rem !important; }
  main > section:nth-of-type(3) { padding: 2.5rem 1rem !important; }
  main > section:nth-of-type(3) h3 { font-size: 1.2rem !important; margin-bottom: 2rem !important; }

  /* Brand pillars */
  main > section:nth-of-type(4) { padding: 2.5rem 1rem !important; }
  main > section:nth-of-type(4) h4 { font-size: 1rem !important; }

  /* Reviews — smaller cards */
  .fl-glass { width: 16rem !important; padding: 1.25rem !important; }

  /* FAQ */
  main > section:nth-of-type(6) button span:first-child { font-size: 1rem !important; }

  /* Newsletter */
  main > section:nth-of-type(7) h3 { font-size: 1.4rem !important; }

  /* Brand statement */
  main > section:nth-of-type(8) h3 { font-size: 1.4rem !important; }

  /* Footer grid — single column */
  footer > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 0 !important;
  }
  footer > div:first-child > div:first-child { grid-column: span 1 !important; }
  footer { padding: 3rem 1rem 2rem !important; }

  /* Bottom bar — stack on mobile */
  footer > div:last-child {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }

  /* Floating review widget — smaller on mobile */
  #fl-home > div:last-child {
    right: 0.5rem !important;
    padding: 0.4rem 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   EXTRA SMALL SCREENS  (max-width: 380px — iPhone SE etc.)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .fl-header a[style*="font-size:1.5rem"] { font-size: 1rem !important; }
  #fl-home section:first-of-type h2 { font-size: 1.3rem !important; }
  .fl-glass { width: 14rem !important; }
  main > section:nth-of-type(3) h3 { font-size: 1rem !important; }
}

/* Mobile menu overrides */

#fl-mobile-menu.open { left: 0 !important; }
#fl-mobile-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 9999; }
#fl-mobile-menu.open ~ #fl-mobile-menu-overlay { display: block; }