/*
Theme Name: Hello Elementor Child
Theme URI: https://danielmorales917.com
Description: Child theme for Hello Elementor. Holds custom typography (font + reusable text sizes).
Author: LanternSol
Template: hello-elementor
Version: 1.0.2
Text Domain: hello-elementor-child
*/

/* =========================================================================
   1. CUSTOM FONT — PP Monument Extended (headings only)
   Files live in /wp-content/uploads/fonts/ (absolute paths so they resolve
   from the site root, not the theme folder).
   ========================================================================= */
@font-face {
	font-family: "PP Monument Extended";
	src: url("/wp-content/uploads/fonts/PPMonumentExtended-Regular.woff2") format("woff2"),
		 url("/wp-content/uploads/fonts/PPMonumentExtended-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PP Monument Extended";
	src: url("/wp-content/uploads/fonts/PPMonumentExtended-Black.woff2") format("woff2"),
		 url("/wp-content/uploads/fonts/PPMonumentExtended-Black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
   2. REUSABLE VARIABLES
   Change a value here once and it updates everywhere it's used.
   ========================================================================= */
:root {
	/* Heading font stack */
	--font-heading: "PP Monument Extended", sans-serif;

	/* Font weights */
	--fw-regular: 400;
	--fw-black: 900;

	/* Reusable text sizes */
	--fs-80: 80px;
	--fs-56: 56px;
	--fs-48: 48px;
	--fs-40: 40px;
	--fs-32: 32px;
	--fs-24: 24px;
	--fs-20: 20px;
	--fs-18: 18px;
	--fs-16: 16px;
	--fs-14: 14px;
	--fs-12: 12px;
	--fs-10: 10px;
}

/* =========================================================================
   3. FONT APPLIED TO HEADINGS ONLY (Regular by default)
   Body text is left untouched. Covers native headings, Elementor's classic
   heading widget (.elementor-heading-title) and the new atomic heading
   widget (.e-heading-base).

   !important on font-family is required because Elementor's kit applies a
   global heading font (Roboto) through per-element selectors whose
   specificity beats a plain h1/h2 rule. This forces the brand font on every
   heading regardless of how Elementor outputs it — without touching body text.
   ========================================================================= */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.e-heading-base,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--font-heading) !important;
	font-weight: var(--fw-regular);
}

/* Opt-in heavy weight: add this class in Elementor (Advanced → CSS Classes) */
.heading-black {
	font-weight: var(--fw-black) !important;
}

/* =========================================================================
   4. REUSABLE SIZE UTILITY CLASSES (decoupled from the tag)
   Add one of these to any element via Elementor → Advanced → CSS Classes.
   This lets you keep an <h1> for SEO but display it at any size — the
   heading level and the visual size are independent.
   !important ensures the class wins over Elementor's per-widget styles.
   ========================================================================= */
.text-56 { font-size: var(--fs-56) !important; }
.text-24 { font-size: var(--fs-24) !important; }
.text-20 { font-size: var(--fs-20) !important; }
.text-18 { font-size: var(--fs-18) !important; }
.text-16 { font-size: var(--fs-16) !important; }

/* Optional: force the heading font on a non-heading element (e.g. a button
   or a div) without changing its tag. */
.font-heading { font-family: var(--font-heading) !important; }
.font-regular { font-weight: var(--fw-regular) !important; }