/*
 * Typography corrections to match https://dallasbrett-recruitment.lovable.app/
 *
 * Every value below was measured from the reference with Chrome DevTools and compared against this
 * site's computed styles, so these are the reference's real numbers, not estimates.
 *
 * Line heights are unitless ratios and letter spacing is in em, so the desktop rules keep holding
 * after the mobile font sizes change at the 767px breakpoint (the reference's md breakpoint is 768px).
 *
 * Why !important: Elementor generates per-widget rules prefixed with the page id, e.g.
 * `.elementor-25 .elementor-element.elementor-element-d2319f9 .elementor-heading-title` — four
 * classes. No practical selector here outranks that on every page, so this correction layer relies on
 * !important instead. The long-term fix is to correct these values in the Elementor editor and delete
 * this file; until then each block below records the reference value it is enforcing.
 */

/* ---------------------------------------------------------------------------
 * 1. UI text — nav links and buttons.  Reference: 14px / 20px (1.4286).
 *    This site had line-height 1.0, which made the header sit tight.
 * ------------------------------------------------------------------------- */
.hfe-nav-menu .hfe-menu-item,
.hfe-nav-menu .hfe-sub-menu-item {
	line-height: 1.428571 !important;
}

.elementor-button .elementor-button-text {
	line-height: 1.428571 !important;
}

/* ---------------------------------------------------------------------------
 * 2. Header logo lockup.  Reference: "Dallas Brett" 15px/18.75px (1.25),
 *    "Recruitment" 10px/12.5px (1.25) at weight 400 — this site had 500.
 * ------------------------------------------------------------------------- */
.elementor-element-c07120a .elementor-heading-title {
	line-height: 1.25 !important;
}

.elementor-element-513ba29,
.elementor-element-513ba29 p {
	font-weight: 400 !important;
	line-height: 1.25 !important;
}

/* ---------------------------------------------------------------------------
 * 3. Eyebrow labels — 12px uppercase.  Reference: 16px line-height (1.333).
 *    Most already matched; these four were still at 1.0.
 * ------------------------------------------------------------------------- */
.elementor-element-bc71bfc .elementor-heading-title,
.elementor-element-a713292 .elementor-heading-title,
.elementor-element-3975f0a .elementor-heading-title,
.elementor-element-db5f504 .elementor-heading-title {
	line-height: 1.333333 !important;
}

/* ---------------------------------------------------------------------------
 * 4. Section headings (h3, 30px desktop).  Reference: weight 500, 36px
 *    line-height (1.2), tracking -0.02em.  This site had weight 400,
 *    line-height 1.0 and tracking -0.05em, which read noticeably cramped.
 * ------------------------------------------------------------------------- */
.elementor-element-e2107b2 .elementor-heading-title,
.elementor-element-a0e6877 .elementor-heading-title {
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
}

/* ---------------------------------------------------------------------------
 * 5. Role card headings (h3, 24px).  Reference: 32px line-height (1.333)
 *    and tracking -0.02em.  This site had line-height 1.0 and no tracking.
 * ------------------------------------------------------------------------- */
.elementor-element-6c123af .elementor-heading-title,
.elementor-element-a75ce18 .elementor-heading-title,
.elementor-element-3535bad .elementor-heading-title,
.elementor-element-2d201b4 .elementor-heading-title,
.elementor-element-4fb8fe3 .elementor-heading-title,
.elementor-element-1ea841b .elementor-heading-title {
	line-height: 1.333333 !important;
	letter-spacing: -0.02em !important;
}

/* Enquiry card heading — reference 24px/32px (1.333); was 1.3. */
.elementor-element-3ce8bc8 .elementor-heading-title {
	line-height: 1.333333 !important;
}

/* Closing heading — reference 48px/48px (1.0) on desktop, but 30px/36px (1.2) on mobile,
 * so this ratio must not leak past the breakpoint. */
@media (min-width: 768px) {
	.elementor-element-829d917 .elementor-heading-title {
		line-height: 1 !important;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Body copy.  Reference: 16px text on a 24px baseline (1.5); this site
 *    used 1.429.  The 14px copy already matched at 1.429 (= 20px).
 * ------------------------------------------------------------------------- */
.elementor-element-8a6ae3b,
.elementor-element-8d23e39,
.elementor-element-81a372d,
.elementor-element-66f4cfa,
.elementor-element-8bead2d,
.elementor-element-b29d942,
.elementor-element-71bfdf7,
.elementor-element-71bfdf7 p {
	line-height: 1.5 !important;
}

/* ---------------------------------------------------------------------------
 * 7. Small print.  These text widgets were all inheriting a 1.7 ratio.
 *    Reference: 10.5px -> 1.375, 14px -> 1.4286, 12px -> 1.333.
 * ------------------------------------------------------------------------- */
.elementor-element-8ff6523,
.elementor-element-8ff6523 p {
	line-height: 1.375 !important;
}

.elementor-element-9b43f31,
.elementor-element-9b43f31 p {
	line-height: 1.428571 !important;
}

.elementor-element-c2fe483,
.elementor-element-c2fe483 p {
	line-height: 1.333333 !important;
}

.elementor-element-2a1e213 {
	line-height: 1.333333 !important;
}

/* Role card body text under each heading — reference 14px/20px (1.4286). */
.elementor-widget-icon-box .elementor-icon-box-description {
	line-height: 1.428571 !important;
}

/* ---------------------------------------------------------------------------
 * Role card "Explore …" rows.  The reference is a justify-between row, so the
 * label gets the card's full 300px and the arrow sits flush right:
 *   <span class="flex items-center justify-between">Explore …<span>→</span></span>
 * These widgets are elementor-position-inline-end, so the arrow is already on
 * the right; the problem was the 15px icon gap, which cut the label's column to
 * 271px — just narrow enough to wrap the longest label onto a second line and
 * leave that one card 20px taller than its neighbours.  The label block grows to
 * fill the row, so dropping the gap restores the reference's spacing.
 * ------------------------------------------------------------------------- */
.elementor-element-6e95864 .elementor-widget-icon-box .elementor-icon-box-wrapper {
	gap: 0 !important;
}

/* Hero badge — reference 11px/16.5px (1.5); was 1.4286. */
.elementor-element-99f3d38 .elementor-icon-list-text {
	line-height: 1.5 !important;
}

/* Enquiry form labels — reference 12px/16px (1.333); were 1.4286. */
.form-control label {
	line-height: 1.333333 !important;
}

/* Enquiry form rhythm.  The reference spaces field rows 16px apart (row pitch 80px on desktop);
 * these rows carried a 14px margin, so the whole card came out 11px short and dragged the hero
 * — and every section below it — up with it. */
.form-control {
	margin-bottom: 16px !important;
}

/* Selects rendered 39px tall against the reference's 42px, so they sat shorter than the text
 * inputs beside them. */
.form-control select {
	height: 42px !important;
}

/* Email address is weight 500 in the reference. Matched on the mailto link rather than the whole
 * icon list, so the adjacent "Call" label keeps its regular weight. */
a[href^="mailto:"] .elementor-icon-list-text {
	font-weight: 500 !important;
}

/* ---------------------------------------------------------------------------
 * 8. Section padding.  Reference sections run 80px top and bottom on desktop
 *    with a 64px footer; the hero was 3px over.
 * ------------------------------------------------------------------------- */
.elementor-element-7dc281f > .e-con-inner {
	padding-top: 80px !important;
}

/* ---------------------------------------------------------------------------
 * 9. Roles section rhythm.  Reference: intro paragraph sits 16px under the
 *    heading and the card grid 40px under the paragraph.  This site used
 *    20px and 24px, which pulled the whole card grid 12px too high.
 *    Same values at both breakpoints in the reference.
 * ------------------------------------------------------------------------- */
.elementor-element-81a372d {
	margin-top: 16px !important;
}

.elementor-element-4658383 {
	margin-top: 40px !important;
}

/* ---------------------------------------------------------------------------
 * 10. "How this works" call button.  Reference puts 32px between the last
 *     paragraph and the button.  Its column is a flex row with a 16px gap, so
 *     the 24px margin here was stacking up to 40px and making the whole
 *     section 8px tall.
 * ------------------------------------------------------------------------- */
.elementor-element-109a93b {
	margin-top: 16px !important;
}

/* ---------------------------------------------------------------------------
 * 11. Locum / Permanent bullet lists.  The reference spaces these items 10px
 *    apart; these two lists were set to 6px, which made each column 16px
 *    short across its four gaps.  Elementor splits the gap into a trailing
 *    padding plus a leading margin, so each half is 5px.
 * ------------------------------------------------------------------------- */
.elementor-element-1e8b173 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child),
.elementor-element-8ec1181 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
	padding-block-end: 5px !important;
}

.elementor-element-1e8b173 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child),
.elementor-element-8ec1181 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
	margin-block-start: 5px !important;
}

/* ---------------------------------------------------------------------------
 * 9. Mobile (<=767px), matching the reference's md breakpoint at 768px.
 *    Reference drops the 36px section headings to 30px; this site kept 36px,
 *    which is what made the mobile page ~294px taller than the reference.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {

	.elementor-element-853b462 .elementor-heading-title,
	.elementor-element-d2319f9 .elementor-heading-title,
	.elementor-element-81d5dcb .elementor-heading-title,
	.elementor-element-3db6fc6 .elementor-heading-title {
		font-size: 30px !important;
	}

	/* Reference keeps this one on a 1.25 baseline; the rest move to 1.2. */
	.elementor-element-853b462 .elementor-heading-title {
		line-height: 1.25 !important;
	}

	.elementor-element-d2319f9 .elementor-heading-title,
	.elementor-element-81d5dcb .elementor-heading-title,
	.elementor-element-3db6fc6 .elementor-heading-title {
		line-height: 1.2 !important;
	}

	/* Section h3 drops 30px -> 24px and picks up the 1.333 baseline. */
	.elementor-element-e2107b2 .elementor-heading-title,
	.elementor-element-a0e6877 .elementor-heading-title {
		font-size: 24px !important;
		line-height: 1.333333 !important;
	}

	/* Reference tightens the hero to 56/64 and the footer to 48/48 on mobile,
	 * where this site kept its desktop 83/80 and 64/64. */
	.elementor-element-7dc281f > .e-con-inner {
		padding-top: 56px !important;
		padding-bottom: 64px !important;
	}

	.elementor-element-94e530a > .e-con-inner {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	/* Horizontal padding.  The reference lays every mobile section out at left=24 / width=342;
	 * these containers used 16px (the hero 15px), giving a 358px content column. Because that is
	 * 16px wider, headings and paragraphs wrapped onto fewer lines than the reference — this was
	 * the largest remaining source of mobile difference, not a spacing value. */
	/* Set the physical padding rather than Elementor's --padding-left/right: custom properties
	 * inherit, so overriding those leaks the value into every nested container. */
	.elementor-element-7dc281f,
	.elementor-element-664e5b0,
	.elementor-element-a08ede2,
	.elementor-element-6e95864,
	.elementor-element-23ff56e,
	.elementor-element-49e11e7 {
		padding-inline-start: 24px !important;
		padding-inline-end: 24px !important;
	}

	/* Footer. Its padding sits on the inner container rather than the parent, and the stacked
	 * columns were 48px apart where the reference uses 32px, with 18px rather than 16px between
	 * each column heading and its link list. */
	/* The reference puts the footer's 24px gutter on the inner container with nothing on the
	 * outer; here the outer carried 16px of its own, which stacked on top. */
	.elementor-element-94e530a {
		padding-inline-start: 0 !important;
		padding-inline-end: 0 !important;
	}

	.elementor-element-94e530a > .e-con-inner {
		padding-inline-start: 24px !important;
		padding-inline-end: 24px !important;
		row-gap: 32px !important;
	}

	/* The stacked columns live in a wrapper of their own, which is what actually spaces them. */
	.elementor-element-ace396a {
		row-gap: 32px !important;
	}

	/* Bottom bar: reference is a 24px gutter with an 8px gap between its two rows. */
	.elementor-element-c62f2d7 {
		padding-inline-start: 24px !important;
		padding-inline-end: 24px !important;
	}

	.elementor-element-c62f2d7 > .e-con-inner {
		row-gap: 8px !important;
	}

	.elementor-element-06250aa,
	.elementor-element-51e5031,
	.elementor-element-bddfe27 {
		row-gap: 16px !important;
	}

	/* Stacked hero: the reference leaves 40px between the copy and the enquiry card, not 48px. */
	.elementor-element-7dc281f > .e-con-inner {
		row-gap: 40px !important;
	}

	/* Enquiry card: like the role cards, the reference uses p-5 (20px) on mobile, not 24px. */
	.elementor-element-ff84184 {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
		padding-inline-start: 20px !important;
		padding-inline-end: 20px !important;
	}

	/* Locum / Permanent blocks: the reference drops these from 40px padding to 24px on mobile. */
	.elementor-element-5f470d2,
	.elementor-element-7931db2 {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
		padding-inline-start: 24px !important;
		padding-inline-end: 24px !important;
	}

	/* Role cards: the reference uses 24px padding on desktop but 20px on mobile, which is why
	 * each card measured 8px taller here (174px vs the reference's 166px). */
	.elementor-element-fcebde8,
	.elementor-element-2cdd1c9,
	.elementor-element-78fa065,
	.elementor-element-2bf9041,
	.elementor-element-65c50ec,
	.elementor-element-b1992ce {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
		padding-inline-start: 20px !important;
		padding-inline-end: 20px !important;
	}
}