/*
 * Compact Keyword SEO Builder Pro — Frontend Base
 *
 * Base scoping rules and reusable utility classes. Every selector is
 * prefixed with .ck-page so nothing leaks out of the plugin's scope
 * and theme styles cannot reach in to override these.
 *
 * Utility classes here are emitted by CKSB_Style_Engine. Sections
 * append the matching modifier classes to their root element.
 */

.ck-page {
  font-family: var(--ck-font-family, inherit);
  color: var(--ck-text);
  font-size: var(--ck-font-size);
  line-height: var(--ck-line-height);
  box-sizing: border-box;
}

/*
 * Force every descendant to inherit font-family from .ck-page.
 *
 * Why: WordPress themes routinely set `h1 { font-family: ... }`,
 * `h2 { ... }`, `p { ... }`, `button { ... }`. Those bare-element
 * selectors have higher specificity than property inheritance from
 * an ancestor, so the user picks "Nobile" in plugin settings and
 * still sees the theme's heading font everywhere inside .ck-page.
 *
 * The universal selector `.ck-page *` has specificity (0,1,0).
 * That beats bare element rules like `h2` (0,0,1), so every
 * descendant inherits the resolved value of `--ck-font-family`
 * from .ck-page (or from a nearer ancestor when a per-section
 * `.ck-font-*` class is applied — those have specificity (0,2,0)
 * and still win).
 *
 * Using `inherit` (not the variable) is intentional. It makes
 * per-section font overrides propagate down through the tree
 * automatically, instead of every element re-resolving the global
 * variable and losing the section's override.
 */
.ck-page *,
.ck-page *::before,
.ck-page *::after {
  box-sizing: inherit;
  font-family: inherit;
}

.ck-page img,
.ck-page svg {
  max-width: 100%;
  height: auto;
}

.ck-page a {
  color: var(--ck-primary-color);
}

/* ── Alignment ───────────────────────────────────────── */
.ck-page .ck-align-left   { text-align: left; }
.ck-page .ck-align-center { text-align: center; }
.ck-page .ck-align-right  { text-align: right; }

/* ── Font size ───────────────────────────────────────── */
.ck-page .ck-fs-sm { font-size: var(--ck-font-size-sm); }
.ck-page .ck-fs-md { font-size: var(--ck-font-size-md); }
.ck-page .ck-fs-lg { font-size: var(--ck-font-size-lg); }

/* ── Font weight ─────────────────────────────────────── */
.ck-page .ck-fw-normal { font-weight: var(--ck-fw-normal); }
.ck-page .ck-fw-medium { font-weight: var(--ck-fw-medium); }
.ck-page .ck-fw-bold   { font-weight: var(--ck-fw-bold); }

/* ── Font family ────────────────────────────────────── */
.ck-page .ck-font-system { font-family: var(--ck-font-system); }
.ck-page .ck-font-nobile { font-family: var(--ck-font-nobile); }
.ck-page .ck-font-inter { font-family: var(--ck-font-inter); }
.ck-page .ck-font-roboto { font-family: var(--ck-font-roboto); }
.ck-page .ck-font-open-sans { font-family: var(--ck-font-open-sans); }
.ck-page .ck-font-lato { font-family: var(--ck-font-lato); }
.ck-page .ck-font-montserrat { font-family: var(--ck-font-montserrat); }
.ck-page .ck-font-poppins { font-family: var(--ck-font-poppins); }
.ck-page .ck-font-source-sans-3 { font-family: var(--ck-font-source-sans-3); }
.ck-page .ck-font-nunito { font-family: var(--ck-font-nunito); }
.ck-page .ck-font-raleway { font-family: var(--ck-font-raleway); }
.ck-page .ck-font-oswald { font-family: var(--ck-font-oswald); }
.ck-page .ck-font-merriweather { font-family: var(--ck-font-merriweather); }
.ck-page .ck-font-playfair-display { font-family: var(--ck-font-playfair-display); }
.ck-page .ck-font-lora { font-family: var(--ck-font-lora); }
.ck-page .ck-font-pt-sans { font-family: var(--ck-font-pt-sans); }
.ck-page .ck-font-ubuntu { font-family: var(--ck-font-ubuntu); }
.ck-page .ck-font-rubik { font-family: var(--ck-font-rubik); }
.ck-page .ck-font-work-sans { font-family: var(--ck-font-work-sans); }
.ck-page .ck-font-dm-sans { font-family: var(--ck-font-dm-sans); }
.ck-page .ck-font-mulish { font-family: var(--ck-font-mulish); }
.ck-page .ck-font-quicksand { font-family: var(--ck-font-quicksand); }
.ck-page .ck-font-manrope { font-family: var(--ck-font-manrope); }
.ck-page .ck-font-libre-franklin { font-family: var(--ck-font-libre-franklin); }
.ck-page .ck-font-fira-sans { font-family: var(--ck-font-fira-sans); }
.ck-page .ck-font-barlow { font-family: var(--ck-font-barlow); }
.ck-page .ck-font-cabin { font-family: var(--ck-font-cabin); }
.ck-page .ck-font-josefin-sans { font-family: var(--ck-font-josefin-sans); }
.ck-page .ck-font-karla { font-family: var(--ck-font-karla); }
.ck-page .ck-font-archivo { font-family: var(--ck-font-archivo); }
.ck-page .ck-font-arimo { font-family: var(--ck-font-arimo); }

/* ── Padding ─────────────────────────────────────────── */
.ck-page .ck-pad-compact { padding: var(--ck-pad-compact); }
.ck-page .ck-pad-normal  { padding: var(--ck-pad-normal); }
.ck-page .ck-pad-wide    { padding: var(--ck-pad-wide); }

/* ── Background ──────────────────────────────────────── */
.ck-page .ck-bg-white { background-color: var(--ck-bg-white); }
.ck-page .ck-bg-light { background-color: var(--ck-bg-light); }
.ck-page .ck-bg-tint  { background-color: var(--ck-bg-tint); }