/* ============================================================ Community Christian Spiritual Gifts Assessment — front-end styles All scoped under #ccsg-app so the theme can't bleed in. BRAND TOKENS: edit the :root block below per deployment. Palette (WCAG-checked): --primary #0055B8 blue — white text OK (7.02:1) --accent #00B863 green — DARK text only; white-on-green fails AA (2.61:1) Fonts: Montserrat (display) / Fira Sans (body). ============================================================ */ #ccsg-app{ --ink:#060606; --ink-soft:#414141; --muted:#6c6c74; --paper:#E5E5E5; --surface:#FFFFFF; --primary:#0055B8; --primary-deep:#004496; --primary-tint:#E4EDF9; --accent:#00B863; --accent-deep:#00a659; --accent-tint:#E1F6EC; --line:#DADEE4; --display:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --body:"Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-family:var(--body); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; box-sizing:border-box; /* Flow naturally in the page's content column and align to its left edge — exactly like the surrounding H1/H2. No viewport breakout (which mis-aligns inside constrained/overflow-hidden Beaver Builder columns). */ width:100%; margin:0; background:var(--surface); } #ccsg-app *{ box-sizing:border-box; } /* Screens are simple full-width blocks. NO horizontal padding and NO width cap here — the Beaver Builder row already constrains content to 1240px and centers it, so the assessment must fill 100% of that row, flush to both edges. */ #ccsg-app .ccsg-screen{ display:none; animation:ccsg-rise .35s ease both; background:var(--surface); padding:clamp(1.5rem,3vw,2.5rem) 0; } #ccsg-app .ccsg-screen.ccsg-on{ display:block; } /* Inner wrapper fills the row completely — no max-width, no side margins. */ #ccsg-app .ccsg-inner{ width:100%; max-width:none; margin:0; padding:0; } /* HARD GUARANTEE: the app and its structural wrappers always fill 100% of the row they're placed in, flush to both edges. !important defeats any cached or theme rule that would otherwise indent or center them. Individual content blocks (hero, options, card) keep their own readability caps below — those are left-aligned, so they don't create side padding. */ #ccsg-app, #ccsg-app .ccsg-screen, #ccsg-app .ccsg-inner{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } /* Within the wide column, keep reading and input widths comfortable so text and form controls don't stretch the full 1240px. */ #ccsg-app .ccsg-hero{ max-width:none; } #ccsg-app .ccsg-qtext{ max-width:820px; } #ccsg-app .ccsg-opts{ max-width:680px; } #ccsg-app #ccsg-s-intro .ccsg-field, #ccsg-app .ccsg-results-head{ max-width:680px; } /* ---- Theme-conflict reset: WordPress themes frequently override heading colors and button/link typography with high-specificity selectors. Pin our typography on BOTH