/*
 * Site chrome: headers (#63 LMS, #327 Home) and footers (#97 LMS, #329 short).
 * Measurements are from the Figma exports at 1440px. Content sits in the
 * 1200px container (x=120..1320 at 1440); the footer swoosh and pattern stay
 * full-bleed. Built by scratchpad/build-chrome-v2.php.
 */

body {
	overflow-x: hidden; /* the footer swoosh is wider than small screens */
}

/* ------------------------------------------------------------------ Header */

/* Logos: block images, never squeezed by the flex row. */
.fdi-header__logo {
	flex: 0 0 auto !important;
}

.fdi-header__logo a,
.fdi-footer__logo a,
.fdi-header__logo img,
.fdi-footer__logo img {
	display: block;
}

/* The nav column takes the room left by the logo and may shrink. */
.fdi-header > .e-con-inner > .e-con,
.fdi-header > .e-con-inner > .elementor-widget-nav-menu {
	flex: 1 1 0% !important;
	min-width: 0;
}

/* The last menu item's text ends on the container's right edge. */
.fdi-header--lms .elementor-nav-menu--main > .elementor-nav-menu > li:last-child > .elementor-item {
	padding-right: 0 !important;
}

/* LMS header: 109px tall, logo ink at y=22..88. The Login page frame is 104px
   tall with the logo and menu at the same height (also the two password pages,
   which share the login layout). */
@media (min-width: 1025px) {
	body.page-id-182 .fdi-header--lms,
	body.page-id-358 .fdi-header--lms,
	body.page-id-359 .fdi-header--lms {
		--min-height: 104px !important;
		--padding-top: 7px !important;
	}
}

/* Home: transparent header over the hero. */
.fdi-header--home {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background: transparent !important;
}

.admin-bar .fdi-header--home {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .fdi-header--home {
		top: 46px;
	}
}

/* Home lockup (#461, made from #374): as in the Figma Home frame, the words sit
   about 7px lower against the mark and the tagline is 3.9% wider, so the ink
   box is 286x72 instead of the standard 286x67. */
.fdi-header--home .fdi-header__logo {
	width: 286px;
}

/* Home menu: cap height at y=48, as in Figma. */
.fdi-header--home .fdi-header__nav {
	margin-top: 1px;
}

/* Home nav: active item underline, 2px white, as wide as the text, 10px under the baseline. */
.fdi-header--home .elementor-nav-menu--main .elementor-item {
	position: relative;
}

.fdi-header--home .elementor-nav-menu--main .elementor-item.elementor-item-active::before {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 3px;
	height: 2px;
	background: var(--fdi-white);
}

/* "Register / login" pill: 212x44, 2px white outline, PT Serif 700 17px,
   37px to the text, 13px to the arrow, 30px after it. Text baseline and the
   arrow's bottom edge both on y=58, as in Figma. */
.fdi-header .fdi-header__cta .elementor-button {
	min-height: 44px;
	padding: 0 27px 0 34px;
}

.fdi-header .fdi-header__cta .elementor-button .elementor-button-content-wrapper {
	gap: 11px;
}

.fdi-header .fdi-header__cta .elementor-button .elementor-button-text {
	position: relative;
	top: -1px;
}

.fdi-header .fdi-header__cta .elementor-button .elementor-button-icon {
	position: relative;
	top: -1px;
}

/* Pill arrows (#333): 12px with the legs thickened to about 2px, as in Figma
   (the asset's legs are 1.7px at this size). */
.fdi-header .fdi-header__cta .elementor-button .elementor-button-icon svg,
.fdi-footer .fdi-footer__contact .elementor-button .elementor-button-icon svg {
	width: 12px;
	height: 12px;
	overflow: visible;
}

.fdi-header .fdi-header__cta .elementor-button .elementor-button-icon svg polygon,
.fdi-footer .fdi-footer__contact .elementor-button .elementor-button-icon svg polygon {
	stroke: currentColor;
	stroke-width: 0.35px;
}

/* Mobile dropdowns open on a white panel. */
.fdi-header .elementor-nav-menu--dropdown {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* Home Menu "Register / login" item: only in the phone dropdown, where the
   header pill is hidden. */
.fdi-header .elementor-nav-menu--main .fdi-menu-cta {
	display: none !important;
}

@media (min-width: 768px) {
	.fdi-header .elementor-nav-menu--dropdown .fdi-menu-cta {
		display: none !important;
	}
}

/* ----------------------------------------------------- Header fixes (laptops) */

/* Small laptops: tighter header so logo, menu and button fit on one row. */
@media (min-width: 1025px) and (max-width: 1240px) {
	.fdi-header--home .fdi-header__logo,
	.fdi-header--lms .fdi-header__logo,
	.fdi-header .fdi-header__logo img {
		width: 220px !important;
	}

	.fdi-header .elementor-nav-menu--main .elementor-item {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.fdi-header--home .elementor-nav-menu--main .elementor-item.elementor-item-active::before {
		left: 10px;
		right: 10px;
	}

	.fdi-header--home .fdi-header__right {
		--gap: 20px;
		--column-gap: 20px;
	}

	.fdi-header .fdi-header__cta .elementor-button {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (min-width: 1025px) and (max-width: 1120px) {
	.fdi-header--home .fdi-header__logo,
	.fdi-header--lms .fdi-header__logo,
	.fdi-header .fdi-header__logo img {
		width: 200px !important;
	}

	.fdi-header .elementor-nav-menu--main .elementor-item {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.fdi-header--home .elementor-nav-menu--main .elementor-item.elementor-item-active::before {
		left: 8px;
		right: 8px;
	}
}

/* Laptop widths: keep content off the window edges. */
@media (min-width: 1025px) and (max-width: 1360px) {
	.elementor .e-con-boxed.e-parent,
	.fdi-footer .fdi-footer__inner {
		--padding-left: 32px !important;
		--padding-right: 32px !important;
	}
}

@media (max-width: 1024px) {
	.fdi-header--home .fdi-header__logo {
		width: 220px;
	}
}

@media (max-width: 767px) {
	.fdi-header--home .fdi-header__logo {
		width: 170px;
	}
}

/* ----------------------------------------------------------------- Footers */

/* Full-width band; the 1200px content box (.fdi-footer__inner) sits inside it. */
.fdi-footer {
	position: relative;
	overflow: visible;
}

.fdi-footer .fdi-footer__inner > .e-con-inner {
	position: relative;
}

.fdi-footer .elementor-widget:not(.fdi-footer__swoosh):not(.fdi-footer__person) {
	position: relative;
	z-index: 2;
}

/* Logo-mark swoosh (#462, the #174 shape without its white edge matte): hugs
   the window's right and bottom edges and rises over the section above.
   762px wide is the best fit to the Figma frames when it touches both edges.
   Narrower windows shrink it so it stays clear of the social icons
   (percentages are of the footer width, so a scrollbar is accounted for). */
.fdi-footer .fdi-footer__swoosh {
	right: 0 !important;
	bottom: 0 !important;
	left: auto !important;
	top: auto !important;
	width: min(762px, calc(50% + 42px), calc(100% - 599px)) !important;
	max-width: none !important;
	pointer-events: none;
	z-index: 1 !important;
	line-height: 0;
}

.fdi-footer__swoosh img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* Below 1120px the swoosh's white gap is narrower than the Contact pill, so
   it is hidden here, as it already is at 1024px and below. */
@media (min-width: 1025px) and (max-width: 1119px) {
	.fdi-footer .fdi-footer__swoosh {
		display: none !important;
	}
}

/* Social icons: 34px navy circles with white glyphs, teal on hover.
   Glyph ink as in Figma: f 9x19, in 19x18, X 18x20. (!important: the widget's
   own colour rule is more specific.) */
.fdi-footer .elementor-social-icon {
	background-color: var(--fdi-navy) !important;
	transition: background-color 0.2s ease;
}

.fdi-footer .elementor-social-icon:hover,
.fdi-footer .elementor-social-icon:focus-visible {
	background-color: var(--fdi-teal) !important;
}

.fdi-footer .elementor-social-icon svg {
	fill: var(--fdi-white);
}

/* Glyph positions inside the circles as in Figma (f and in sit 1px lower). */
.fdi-footer .elementor-social-icon-facebook-f svg {
	position: relative;
	top: 1px;
	left: -1px;
	width: 19px;
	height: 19px;
}

.fdi-footer .elementor-social-icon-linkedin-in svg {
	position: relative;
	top: 1px;
	width: 21px;
	height: 21px;
}

/* X: Figma uses the official X mark (19x19.4, light hollow stroke). Font
   Awesome's x-twitter is 45% heavier, so it is swapped for that shape. */
.fdi-footer .elementor-social-icon-x-twitter svg {
	display: none;
}

.fdi-footer .elementor-social-icon-x-twitter::before {
	content: "";
	display: block;
	width: 19px;
	height: 19.4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1227'%3E%3Cpath fill='%23fff' d='M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Different glyph sizes must not shift the circles off one line. */
.fdi-footer .elementor-social-icons-wrapper {
	line-height: 0;
}

.fdi-footer .elementor-social-icon {
	vertical-align: top;
}

/* Home: all three circles teal (navy on hover). LMS pages: Facebook teal. */
.home .fdi-footer .elementor-social-icon,
.fdi-footer--lms .elementor-social-icon-facebook-f {
	background-color: var(--fdi-teal) !important;
}

.home .fdi-footer .elementor-social-icon:hover,
.home .fdi-footer .elementor-social-icon:focus-visible,
.fdi-footer--lms .elementor-social-icon-facebook-f:hover,
.fdi-footer--lms .elementor-social-icon-facebook-f:focus-visible {
	background-color: var(--fdi-navy) !important;
}

/* Contact pill: 156x42, 2px teal outline, white fill, PT Serif 700 20px,
   26px to the text, 32px to the arrow, 16px after it. The white fill (as in
   Figma) keeps it readable wherever it meets the swoosh. */
.fdi-footer .fdi-footer__contact .elementor-button {
	min-height: 42px;
	padding: 0 13px 0 23px;
	background-color: var(--fdi-white);
}

.fdi-footer .fdi-footer__contact .elementor-button:hover,
.fdi-footer .fdi-footer__contact .elementor-button:focus-visible {
	background-color: var(--fdi-teal);
}

.fdi-footer .fdi-footer__contact .elementor-button .elementor-button-content-wrapper {
	gap: 30px;
}

.fdi-footer .fdi-footer__contact .elementor-button .elementor-button-text {
	position: relative;
	top: -1px;
}

/* Home places the pill 45px further left (1049..1205 in Figma). Only on wide
   screens: on laptops the smaller swoosh would put its navy tip under the pill. */
@media (min-width: 1361px) {
	.home .fdi-footer .fdi-footer__contact {
		margin-right: 151px !important;
	}
}

/* Wider than 1440 the swoosh stays on the window edge while the container
   centres, so the pill keeps its 1440 distance from the window edge (and so
   its place in the swoosh's white gap) as far as the 1200px container allows. */
@media (min-width: 1441px) {
	.fdi-footer .fdi-footer__contact {
		margin-right: max(0px, calc(106px - (100vw - 1440px) / 2)) !important;
	}

	.home .fdi-footer .fdi-footer__contact {
		margin-right: max(0px, calc(151px - (100vw - 1440px) / 2)) !important;
	}
}

/* The LMS frames place the pill 2px lower against the logo than the Login frame. */
@media (min-width: 1025px) {
	.fdi-footer--lms .fdi-footer__contact {
		transform: translateY(2px);
	}
}

/* LMS footer: full-bleed pattern band. #463 is a seamless 1002px tile of the
   Figma pattern (#171, 1444x353). It repeats across the window, 353px tall,
   bottom 137px above the page bottom, phased so that at 1440 it sits at x=-2
   exactly like #171 in Figma ((W-1002)/2 - 221 = W/2 - 722). Person 1 (#296)
   sits at the laptop. */
.fdi-footer--lms {
	background-image: url("../../../../uploads/2026/10/fdi-footer-pattern-tile.png");
	background-repeat: repeat-x;
	background-position: left calc(50% - 221px) bottom 137px;
	background-size: 1002px 353px;
}

.fdi-footer__person {
	pointer-events: none;
	z-index: 1 !important;
	line-height: 0;
}

.fdi-footer__person img {
	display: block;
	width: 440px;
	max-width: none;
	height: auto;
}

@media (max-width: 1024px) {
	.fdi-footer--lms {
		background-position: center bottom 120px;
		background-size: auto 269px;
	}
}

@media (max-width: 767px) {
	.fdi-footer--lms {
		background-position: center bottom 180px;
		background-size: auto 220px;
	}
}

/* Burger button: no grey box (same on Home and the LMS header). */
.fdi-header .elementor-menu-toggle {
	background-color: transparent;
}

/* Footer social icons stay unlinked until the new accounts exist (client, 16 Oct). */
.elementor-social-icon:not([href]) {
	cursor: default;
}