/* Brand design tokens — the ONLY colours allowed on the site; never hard-code a hex.
   "Plus Jakarta Sans" is loaded site-wide by Elementor, so it isn't imported here. */

:root {
	/* brand palette — Calm-inspired cool blues (no warm tones) */
	--mf-black:        #02070d; /* Black — darkest ink */
	--mf-dark-blue:    #0a2b54; /* Dark Blue — kept as the brand anchor */
	--mf-blue:         #3a67cc; /* Accent — Havelock/denim blue (Calm-like) */
	--mf-blue-deep:    #2b4fa0; /* Accent hover (deeper Havelock) */
	--mf-mid-blue:     #aec6e6; /* Middle Blue — hairlines / borders */
	--mf-light-blue:   #eef4fc; /* Light blue — subtle hover fill */
	--mf-bg:           #f2f7fc; /* Background — cool near-white */
	--mf-white:        #ffffff; /* white */
	--mf-gray:         #414a5c; /* Body text — cool blue-grey */

	/* sky accents (replace the retired yellow tokens) */
	--mf-sky-1:        #eaf1fb; /* soft sky — tint fills */
	--mf-sky-2:        #d3e2f6; /* sky — eyebrow / soft chips */
	--mf-sky-3:        #a9c6ee; /* deeper sky — marker highlight / accents */

	/* Deprecated warm aliases, kept on-palette. Use --mf-sky-* in new code. */
	--mf-yellow-light: var(--mf-sky-1);
	--mf-yellow-med:   var(--mf-sky-2);
	--mf-yellow-dark:  var(--mf-sky-3);

	/* signature immersive gradient (Calm "dusk sky") */
	--mf-hero-sky: linear-gradient(165deg, #0a2b54 0%, #163f78 45%, #2f5da8 100%);

	/* semantic aliases (use these in components) */
	--mf-navy:      var(--mf-dark-blue);  /* headings, dark surfaces */
	--mf-ink:       var(--mf-gray);       /* body text */
	--mf-muted:     var(--mf-gray);       /* secondary text */
	--mf-line:      var(--mf-mid-blue);   /* hairlines / borders */
	--mf-tint:      var(--mf-light-blue); /* subtle hover fill */
	--mf-card-bg:   var(--mf-white);
	--mf-page-bg:   var(--mf-bg);

	/* Selection: never looks like hover (only hover uses --mf-tint/--mf-light-blue).
	   Solid for leaf controls, soft + 2px border for containers. Never point these at a hover shade. */
	--mf-selected:        var(--mf-blue);
	--mf-selected-deep:   var(--mf-blue-deep); /* selected + hover/active */
	--mf-selected-soft:   #dbe8fb;
	--mf-selected-on:     var(--mf-white);     /* text/glyph on --mf-selected */
	--mf-selected-border: 2px;                 /* soft-selected border width */

	/* Green has ONE job: the tick on a chosen form option. Never navigation or filter state. */
	--mf-confirm:      #1f9d6b;
	--mf-confirm-deep: #168056;
	--mf-confirm-soft: #e6f6ef;

	/* shape + elevation (tightened + cool-tinted for a sharper feel) */
	--mf-radius:        16px;
	--mf-radius-lg:     22px;
	--mf-radius-pill:   999px;
	--mf-shadow:        0 1px 2px rgba(10, 43, 84, 0.06), 0 10px 28px rgba(10, 43, 84, 0.08);
	--mf-shadow-hover:  0 2px 4px rgba(10, 43, 84, 0.08), 0 16px 36px rgba(10, 43, 84, 0.12);
	--mf-shadow-float:  0 2px 6px rgba(10, 43, 84, 0.08), 0 18px 40px rgba(10, 43, 84, 0.12);

	/* type */
	--mf-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* layout */
	--mf-maxw: 1160px; /* content max width for full-bleed shortcode areas */

	/* Admin-bar height. Everything pinned to the viewport top MUST add this — WP pushes
	   the flow down but not our fixed elements. 0 for visitors. */
	--mf-admin-bar-h: 0px;
}

/* Mirrors WP core's breakpoint; header.js writes the exact value inline on <body>. */
body.admin-bar {
	--mf-admin-bar-h: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--mf-admin-bar-h: 46px;
	}
}

/* Flush to header & footer: zero Elementor wrapper spacing around any .mf-flush
   shortcode root. :where() keeps specificity 0, so only the !important overrides. */
:where(
	.e-con,
	.elementor-section,
	.elementor-column,
	.elementor-widget,
	.elementor-widget-shortcode,
	.elementor-widget-container,
	.elementor-shortcode
):has(.mf-flush) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Collapse empty leftover Elementor containers, which otherwise paint a blank strip. */
:where(
	.e-con,
	.elementor-section,
	.elementor-column,
	.elementor-widget,
	.elementor-widget-shortcode,
	.elementor-widget-container,
	.elementor-shortcode
):empty {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	min-height: 0 !important;
}