/*
Theme Name: Julia Payne
Theme URI: https://juliapayne.com
Author: Julia Payne
Description: Julia Payne — custom marketing theme (Figma design system). Section widgets use inline CSS in elementor-widgets/.
Version: 1.1.5.16
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: juliapayne
*/

/* ==========================================================================
   1. FONT IMPORTS — Plus Jakarta Sans (headings/buttons/nav) + Manrope (body/eyebrow)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Instrument+Sans:wght@400;500&family=Manrope:wght@500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&family=Poppins:wght@500&display=swap");

/* ==========================================================================
   2. DESIGN TOKENS — desktop (≥1440 baseline; tablet/phone override in overlay CSS)
   Breakpoints (Evoport): ≤700 phone · 701–1439 tablet · ≥1440 desktop
   ========================================================================== */

:root {
	--jp-bp-mobile: 480px;
	--jp-bp-tablet: 720px;
	--jp-bp-laptop: 1020px;
	--jp-bp-desktop: 1440px;

	--jp-section-inset: clamp(24px, calc(70 * 100vw / 1440), 70px);
	--jp-stack-gap: 44px;
	/* Between sections = pad-y + pad-y when widgets share this token */
	--jp-section-gap: 120px;
	--jp-section-pad-y: 60px;
	/* Match header bar: 1440 shell, 120 side pad → 1200 content */
	--jp-shell-max: 1440px;
	--jp-shell-pad-x: clamp(24px, calc(120 * 100vw / 1440), 120px);
	--jp-shell-content: 1200px;

	/* Standardized JP widget content container (desktop only, ≥1101px) — see jp-responsive-fix.css. */
	--jp-widget-max: 1232px;
	--jp-widget-pad-x: 20px;

	/* —— Font families —— */
	--jp-font-heading: "Plus Jakarta Sans", sans-serif;
	--jp-font-body: "Manrope", sans-serif;
	--jp-font-eyebrow: "Manrope", sans-serif;
	--jp-font-button: "Plus Jakarta Sans", sans-serif;
	--jp-font-nav: "Plus Jakarta Sans", sans-serif;

	/* —— Colors (Figma — purple accent from header CTA) —— */
	--jp-c-ink: #000000;
	--jp-c-white: #ffffff;
	--jp-c-purple: #5603ad;
	--jp-c-purple-hover: #3d0280;
	--jp-color-text: var(--jp-c-ink);
	--jp-color-text-on-dark: var(--jp-c-white);
	--jp-color-bg-site: var(--jp-c-white);
	--jp-color-accent: var(--jp-c-purple);

	/* —— H1 — Plus Jakarta Sans Medium 64 / 104% / -2% —— */
	--jp-h1-size: 64px;
	--jp-h1-weight: 500;
	--jp-h1-line: 1.04;
	--jp-h1-spacing: -0.02em;

	/* —— H2 — Semi Bold 56 / 120% / -2% —— */
	--jp-h2-size: 56px;
	--jp-h2-weight: 600;
	--jp-h2-line: 1.2;
	--jp-h2-spacing: -0.02em;

	/* —— H3 — Medium 46 / 120% / -2% —— */
	--jp-h3-size: 46px;
	--jp-h3-weight: 500;
	--jp-h3-line: 1.2;
	--jp-h3-spacing: -0.02em;

	/* —— H4 — Medium 32 / 125% / -2% (SemiBold/Bold via weight utilities) —— */
	--jp-h4-size: 32px;
	--jp-h4-weight: 500;
	--jp-h4-line: 1.25;
	--jp-h4-spacing: -0.02em;

	/* —— H5 — Bold 24 / 130% / -0.42% —— */
	--jp-h5-size: 24px;
	--jp-h5-weight: 700;
	--jp-h5-line: 1.3;
	--jp-h5-spacing: -0.0042em;

	/* —— H6 — Medium 18 / 120% / -2% (alt spacing 4% → --jp-h6-spacing-alt) —— */
	--jp-h6-size: 18px;
	--jp-h6-weight: 500;
	--jp-h6-line: 1.2;
	--jp-h6-spacing: -0.02em;
	--jp-h6-spacing-alt: 0.04em;

	/* —— Body1 — Manrope Medium 24 / 160% / 0 —— */
	--jp-b1-size: 24px;
	--jp-b1-weight: 500;
	--jp-b1-line: 1.6;
	--jp-b1-spacing: 0;

	/* —— Body2 — Bold 22 / 140% / 0.42px —— */
	--jp-b2-size: 22px;
	--jp-b2-weight: 700;
	--jp-b2-line: 1.4;
	--jp-b2-spacing: 0.42px;

	/* —— Body3 — SemiBold 18 / 160% / 0 —— */
	--jp-b3-size: 18px;
	--jp-b3-weight: 600;
	--jp-b3-line: 1.6;
	--jp-b3-spacing: 0;

	/* —— Body4 — Medium 16 / 160% / 0 —— */
	--jp-b4-size: 16px;
	--jp-b4-weight: 500;
	--jp-b4-line: 1.6;
	--jp-b4-spacing: 0;

	/* —— Body5 — Bold 14 / 120% / 3% —— */
	--jp-b5-size: 14px;
	--jp-b5-weight: 700;
	--jp-b5-line: 1.2;
	--jp-b5-spacing: 0.03em;

	/* —— Eyebrow EB1 — Manrope Medium 12 / 160% / 0.12px —— */
	--jp-eb1-size: 12px;
	--jp-eb1-weight: 500;
	--jp-eb1-line: 1.6;
	--jp-eb1-spacing: 0.12px;

	/* —— Button1 — Plus Jakarta Sans Medium 16 / auto / 0 —— */
	--jp-btn1-size: 16px;
	--jp-btn1-weight: 500;
	--jp-btn1-line: normal;
	--jp-btn1-spacing: 0;

	/* —— Button2 — Medium 14 / auto / 0 —— */
	--jp-btn2-size: 14px;
	--jp-btn2-weight: 500;
	--jp-btn2-line: normal;
	--jp-btn2-spacing: 0;

	/* —— Navbar — Medium 14 / 120% / 0 —— */
	--jp-nav-size: 14px;
	--jp-nav-weight: 500;
	--jp-nav-line: 1.2;
	--jp-nav-spacing: 0;

	/* —— Button component chrome (UI lives in widget + jp-diagonal-fill.css) —— */
	--jp-btn-fill: var(--jp-c-purple);
	--jp-btn-text: var(--jp-c-white);
	--jp-btn-reveal-fill: var(--jp-c-purple-hover);
	--jp-btn-reveal-text: var(--jp-c-white);
	--jp-btn-radius: 6px;
	--jp-btn-pad-y: 14px;
	--jp-btn-pad-x: 34px;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.jp-container {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 8px;
	box-sizing: border-box;
}

.jp-main {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Elementor pages — no top offset under sticky header */
body.jp-global-hf-sticky.elementor-page,
body.jp-global-hf-sticky.elementor-page #content,
body.jp-global-hf-sticky.elementor-page .site-content {
	padding-top: 0;
	margin-top: 0;
}

/* ==========================================================================
   4. ELEMENTOR GLOBALS → FIGMA TOKENS
   ========================================================================== */

:root:root {
	--e-global-typography-primary-font-family: var(--jp-font-heading);
	--e-global-typography-primary-font-weight: var(--jp-h1-weight);

	--e-global-typography-secondary-font-family: var(--jp-font-heading);
	--e-global-typography-secondary-font-weight: var(--jp-h4-weight);
	--e-global-typography-secondary-font-size: var(--jp-h4-size);
	--e-global-typography-secondary-line-height: var(--jp-h4-line);
	--e-global-typography-secondary-letter-spacing: var(--jp-h4-spacing);

	--e-global-typography-text-font-family: var(--jp-font-body);
	--e-global-typography-text-font-weight: var(--jp-b1-weight);
	--e-global-typography-text-font-size: var(--jp-b1-size);
	--e-global-typography-text-line-height: var(--jp-b1-line);
	--e-global-typography-text-letter-spacing: var(--jp-b1-spacing);

	--e-global-typography-accent-font-family: var(--jp-font-button);
	--e-global-typography-accent-font-weight: var(--jp-btn1-weight);
	--e-global-typography-accent-font-size: var(--jp-btn1-size);
	--e-global-typography-accent-line-height: var(--jp-btn1-line);
	--e-global-typography-accent-letter-spacing: var(--jp-btn1-spacing);

	--e-global-color-text: var(--jp-c-ink);
	--e-global-color-primary: var(--jp-c-purple);
}

/* ==========================================================================
   5. BASE RESET & DEFAULTS
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	color: var(--jp-color-text);
	background-color: var(--jp-color-bg-site);
	font-family: var(--jp-font-body);
	font-size: var(--jp-b1-size);
	font-weight: var(--jp-b1-weight);
	line-height: var(--jp-b1-line);
	letter-spacing: var(--jp-b1-spacing);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font-family: inherit;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * WYSIWYG nested tags inherit the parent BEM leaf size.
 * Theme `p` = Body1 24px — without this, only fields saved as HTML <p>
 * jump to 24px while plain-text siblings stay 16px (band-story “helped 8 founders”).
 *
 * MUST exclude JP BEM leaves (`:not([class*="jp-"])`) so `p.jp-*__role` keeps
 * its own 11px and is not forced to inherit Body1 from a parent.
 */
.elementor-widget [class*="jp-"][class*="__"] :where(p, ul, ol, li, span, strong, em, a):not([class*="jp-"]) {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-align: inherit;
}

.elementor-widget [class*="jp-"][class*="__"] p:not([class*="jp-"]) {
	margin: 0;
}

/* Default breathing room between WYSIWYG paragraphs — widgets that need
   tighter stacks (band-story aside / body) override with !important + flex gap. */
.elementor-widget [class*="jp-"][class*="__"] p:not([class*="jp-"]) + p:not([class*="jp-"]) {
	margin-top: 1em;
}

.elementor-widget-jp-band-story .jp-band-story__aside p + p,
.elementor-widget-jp-band-story .jp-band-story__body p + p {
	margin-top: 0 !important;
}

/* ==========================================================================
   6. TYPOGRAPHY — base HTML elements
   ========================================================================== */

h1 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h1-size);
	font-weight: var(--jp-h1-weight);
	line-height: var(--jp-h1-line);
	letter-spacing: var(--jp-h1-spacing);
	margin: 0;
}

h2 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h2-size);
	font-weight: var(--jp-h2-weight);
	line-height: var(--jp-h2-line);
	letter-spacing: var(--jp-h2-spacing);
	margin: 0;
}

h3 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h3-size);
	font-weight: var(--jp-h3-weight);
	line-height: var(--jp-h3-line);
	letter-spacing: var(--jp-h3-spacing);
	margin: 0;
}

h4 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h4-size);
	font-weight: var(--jp-h4-weight);
	line-height: var(--jp-h4-line);
	letter-spacing: var(--jp-h4-spacing);
	margin: 0;
}

h5 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h5-size);
	font-weight: var(--jp-h5-weight);
	line-height: var(--jp-h5-line);
	letter-spacing: var(--jp-h5-spacing);
	margin: 0;
}

h6 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h6-size);
	font-weight: var(--jp-h6-weight);
	line-height: var(--jp-h6-line);
	letter-spacing: var(--jp-h6-spacing);
	margin: 0;
}

p {
	font-family: var(--jp-font-body);
	font-size: var(--jp-b1-size);
	font-weight: var(--jp-b1-weight);
	line-height: var(--jp-b1-line);
	letter-spacing: var(--jp-b1-spacing);
	margin: 0 0 1em;
}

/* ==========================================================================
   7. TYPOGRAPHY — utility classes
   ========================================================================== */

.jp-h1,
h1.jp-h1 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h1-size);
	font-weight: var(--jp-h1-weight);
	line-height: var(--jp-h1-line);
	letter-spacing: var(--jp-h1-spacing);
	margin: 0;
}

.jp-h2,
h2.jp-h2 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h2-size);
	font-weight: var(--jp-h2-weight);
	line-height: var(--jp-h2-line);
	letter-spacing: var(--jp-h2-spacing);
	margin: 0;
}

.jp-h3,
h3.jp-h3 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h3-size);
	font-weight: var(--jp-h3-weight);
	line-height: var(--jp-h3-line);
	letter-spacing: var(--jp-h3-spacing);
	margin: 0;
}

.jp-h4,
h4.jp-h4 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h4-size);
	font-weight: var(--jp-h4-weight);
	line-height: var(--jp-h4-line);
	letter-spacing: var(--jp-h4-spacing);
	margin: 0;
}

.jp-h5,
h5.jp-h5 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h5-size);
	font-weight: var(--jp-h5-weight);
	line-height: var(--jp-h5-line);
	letter-spacing: var(--jp-h5-spacing);
	margin: 0;
}

.jp-h6,
h6.jp-h6 {
	font-family: var(--jp-font-heading);
	font-size: var(--jp-h6-size);
	font-weight: var(--jp-h6-weight);
	line-height: var(--jp-h6-line);
	letter-spacing: var(--jp-h6-spacing);
	margin: 0;
}

.jp-body-b1 {
	font-family: var(--jp-font-body);
	font-size: var(--jp-b1-size);
	font-weight: var(--jp-b1-weight);
	line-height: var(--jp-b1-line);
	letter-spacing: var(--jp-b1-spacing);
}

.jp-body-b2 {
	font-family: var(--jp-font-body);
	font-size: var(--jp-b2-size);
	font-weight: var(--jp-b2-weight);
	line-height: var(--jp-b2-line);
	letter-spacing: var(--jp-b2-spacing);
}

.jp-body-b3 {
	font-family: var(--jp-font-body);
	font-size: var(--jp-b3-size);
	font-weight: var(--jp-b3-weight);
	line-height: var(--jp-b3-line);
	letter-spacing: var(--jp-b3-spacing);
}

.jp-body-b4 {
	font-family: var(--jp-font-body);
	font-size: var(--jp-b4-size);
	font-weight: var(--jp-b4-weight);
	line-height: var(--jp-b4-line);
	letter-spacing: var(--jp-b4-spacing);
}

.jp-body-b5 {
	font-family: var(--jp-font-body);
	font-size: var(--jp-b5-size);
	font-weight: var(--jp-b5-weight);
	line-height: var(--jp-b5-line);
	letter-spacing: var(--jp-b5-spacing);
}

.jp-eb1 {
	font-family: var(--jp-font-eyebrow);
	font-size: var(--jp-eb1-size);
	font-weight: var(--jp-eb1-weight);
	line-height: var(--jp-eb1-line);
	letter-spacing: var(--jp-eb1-spacing);
}

.jp-btn-1 {
	font-family: var(--jp-font-button);
	font-size: var(--jp-btn1-size);
	font-weight: var(--jp-btn1-weight);
	line-height: var(--jp-btn1-line);
	letter-spacing: var(--jp-btn1-spacing);
}

.jp-btn-2 {
	font-family: var(--jp-font-button);
	font-size: var(--jp-btn2-size);
	font-weight: var(--jp-btn2-weight);
	line-height: var(--jp-btn2-line);
	letter-spacing: var(--jp-btn2-spacing);
}

.jp-nav {
	font-family: var(--jp-font-nav);
	font-size: var(--jp-nav-size);
	font-weight: var(--jp-nav-weight);
	line-height: var(--jp-nav-line);
	letter-spacing: var(--jp-nav-spacing);
}

/* Weight variants when Figma allows Medium / SemiBold / Bold on same size */
.jp-weight-medium {
	font-weight: 500 !important;
}

.jp-weight-semibold {
	font-weight: 600 !important;
}

.jp-weight-bold {
	font-weight: 700 !important;
}

.jp-h6-spacing-alt {
	letter-spacing: var(--jp-h6-spacing-alt) !important;
}

/* ==========================================================================
   8. ELEMENTOR BASE MAPPING
   ========================================================================== */

.elementor-widget-heading .elementor-heading-title {
	font-family: var(--jp-font-heading);
	color: var(--jp-color-text);
}

.elementor-widget-heading h1.elementor-heading-title {
	font-size: var(--jp-h1-size);
	font-weight: var(--jp-h1-weight);
	line-height: var(--jp-h1-line);
	letter-spacing: var(--jp-h1-spacing);
}

.elementor-widget-heading h2.elementor-heading-title {
	font-size: var(--jp-h2-size);
	font-weight: var(--jp-h2-weight);
	line-height: var(--jp-h2-line);
	letter-spacing: var(--jp-h2-spacing);
}

.elementor-widget-heading h3.elementor-heading-title {
	font-size: var(--jp-h3-size);
	font-weight: var(--jp-h3-weight);
	line-height: var(--jp-h3-line);
	letter-spacing: var(--jp-h3-spacing);
}

.elementor-widget-heading h4.elementor-heading-title {
	font-size: var(--jp-h4-size);
	font-weight: var(--jp-h4-weight);
	line-height: var(--jp-h4-line);
	letter-spacing: var(--jp-h4-spacing);
}

.elementor-widget-heading h5.elementor-heading-title {
	font-size: var(--jp-h5-size);
	font-weight: var(--jp-h5-weight);
	line-height: var(--jp-h5-line);
	letter-spacing: var(--jp-h5-spacing);
}

.elementor-widget-heading h6.elementor-heading-title {
	font-size: var(--jp-h6-size);
	font-weight: var(--jp-h6-weight);
	line-height: var(--jp-h6-line);
	letter-spacing: var(--jp-h6-spacing);
}

.elementor-widget-text-editor {
	font-family: var(--jp-font-body);
	font-size: var(--jp-b1-size);
	font-weight: var(--jp-b1-weight);
	line-height: var(--jp-b1-line);
	letter-spacing: var(--jp-b1-spacing);
	color: var(--jp-color-text);
}

.elementor-button {
	font-family: var(--jp-font-button);
	font-size: var(--jp-btn1-size);
	font-weight: var(--jp-btn1-weight);
	line-height: var(--jp-btn1-line);
	letter-spacing: var(--jp-btn1-spacing);
	border-radius: var(--jp-btn-radius);
}

.jp-on-dark,
.jp-on-dark .elementor-heading-title,
.jp-on-dark .elementor-widget-text-editor {
	color: var(--jp-color-text-on-dark);
}