/* =====================================================================
   wp-harmonize.css — makes WordPress (Pagelayer/popularfx) service pages
   match the static design system: same fonts, colors, buttons, spacing.
   Loaded ONLY on WP front-end pages, alongside components.css + site.js
   (which inject the canonical header/footer). Edit brand tokens in
   components.css; this file maps the theme's elements onto them.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&family=Dancing+Script:wght@600;700&display=swap');

:root{--primary:#4a3d8f;--primary-light:#6b5db5;--accent:#c9a84c;--ink:#1e1b4b;--text:#3a3154;}

/* ---- Base typography to match static pages ---- */
html body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;color:var(--text);background:#ffffff;}
/* offset for the fixed canonical header injected by site.js */
html body{padding-top:80px!important;}
body h1,body h2,body .pagelayer-heading h1,body .pagelayer-heading h2,body h1.pagelayer-ele-heading,body h2.pagelayer-ele-heading{font-family:'Playfair Display',Georgia,serif!important;color:var(--ink)!important;}
body h3,body h4,body h5,body h6{font-family:'Inter',sans-serif!important;color:var(--ink)!important;}

/* ---- Hide theme chrome immediately (site.js removes it on load;
        this prevents a flash and any leftover spacing) ---- */
header.pagelayer-header,.site-header,#masthead,footer.entry-footer,.site-footer,#colophon{display:none!important;}

/* ---- Brand the Pagelayer buttons to match .btn-primary ---- */
.pagelayer-btn,.pagelayer-btn-holder,.pagelayer-ele-button a,a.pagelayer-btn,
.wp-block-button__link,.pagelayer-cta-button,button.pagelayer-btn{
  background:var(--primary)!important;color:#fff!important;border:none!important;
  border-radius:50px!important;font-family:'Inter',sans-serif!important;font-weight:600!important;
}
.pagelayer-btn:hover,.pagelayer-ele-button a:hover,a.pagelayer-btn:hover{background:var(--primary-light)!important;}

/* ---- In-content links in brand color (not the chrome links) ---- */
.pagelayer-content a:not(.pagelayer-btn):not(.btn),article a:not(.pagelayer-btn):not(.btn){color:var(--primary);}

/* ---- Soften default Pagelayer cards/sections toward the neo look ---- */
.pagelayer-row .pagelayer-col-holder{font-family:'Inter',sans-serif;}

/* ---- The injected free-tools block (from the_content filter) inherits fine ---- */

/* ---- Mobile: keep the fixed-header offset ---- */
@media(max-width:768px){ html body{padding-top:72px!important;} }

/* blog has its own bottom-left WhatsApp; hide the injected float to avoid a duplicate */
#sm-wa-float{display:none!important}