/*
 * Header and footer (template parts header.html and footer.html), built to match the live UAE header 100 and
 * footer 104 (Elementor kit 57), measured 2026-11-04. Colours, fonts and sizes come from theme.json; spacing values
 * are live's own (PLAYBOOK R36). Breakpoints as live: tablet <= 1024px, mobile <= 767px.
 */

/* Core's flow layout puts a 24px top margin between siblings; live has none inside the header and footer. */
.dfb-mast .dfb-mast-in > *,
.dfb-foot > *,
.dfb-foot .is-layout-flow > * {
	margin-block-start: 0;
}

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

.dfb-mast {
	background-color: var(--wp--preset--color--light);
	border-bottom: 1px solid var(--wp--preset--color--text-light);
	padding: 0 20px;
}

.dfb-mast-in {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1130px;
	min-height: 72px;
	margin: 0 auto;
}

.dfb-wordmark {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-6);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--dark);
}

.dfb-wordmark a {
	color: inherit;
	text-decoration: none;
}

.dfb-mast .dfb-wordmark mark,
.dfb-foot .dfb-wordmark mark {
	padding: 0;
}

/* Main menu, desktop: one row of links. Colours are set on the item: core gives the link color: inherit. */
.dfb-nav.wp-block-navigation {
	position: static;
}

.dfb-nav .wp-block-navigation-item {
	color: var(--wp--preset--color--dark);
}

.dfb-nav .wp-block-navigation-item:hover,
.dfb-nav .wp-block-navigation-item:has(> :focus-visible),
.dfb-nav .wp-block-navigation-item.current-menu-item {
	color: var(--wp--preset--color--primary);
}

.dfb-nav .wp-block-navigation-item__content {
	display: block;
	padding: 8px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.dfb-nav .wp-block-navigation__container {
	gap: 0;
}

/* Live's links and button sit on transparent white (Elementor), so a hover fade starts from white, not black. */
@media (min-width: 1025px) {
	.dfb-nav .wp-block-navigation-item__content,
	.dfb-cta .wp-block-navigation-item__content {
		background-color: rgb(from var(--wp--preset--color--light) r g b / 0);
	}
}

/* "How we research" as an outline button, desktop only. */
.dfb-cta .wp-block-navigation-item {
	color: var(--wp--preset--color--secondary);
}

.dfb-cta .wp-block-navigation-item:hover,
.dfb-cta .wp-block-navigation-item:has(> :focus-visible) {
	color: var(--wp--preset--color--light);
}

.dfb-cta .wp-block-navigation-item__content {
	display: block;
	padding: 14px 20px;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

.dfb-cta .wp-block-navigation-item__content:hover,
.dfb-cta .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--secondary);
}

@media (min-width: 1025px) {
	.dfb-nav .dfb-mobile-only {
		display: none;
	}
}

/*
 * Tablet and phone (<= 1024px, live's "Tablet" menu breakpoint; core's own is 600px): the menu button replaces the
 * links and opens a dropdown under the header, as live's UAE menu (not core's full-screen overlay).
 */
@media (max-width: 1024px) {
	.dfb-cta {
		display: none;
	}

	.dfb-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.dfb-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.dfb-nav .wp-block-navigation__responsive-container-open,
.dfb-nav .wp-block-navigation__responsive-container-close {
	position: static;
	align-items: center;
	justify-content: center;
	width: 40.4px;
	height: 42.4px;
	padding: 0;
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--secondary);
}

.dfb-nav .wp-block-navigation__responsive-container-open svg,
.dfb-nav .wp-block-navigation__responsive-container-close svg {
	display: none;
}

.dfb-nav .wp-block-navigation__responsive-container-open::before,
.dfb-nav .wp-block-navigation__responsive-container-close::before {
	content: "";
	width: 25px;
	height: 25px;
	background-color: currentcolor;
	-webkit-mask: url(../icons/menu-align-justify.svg) center / contain no-repeat;
	mask: url(../icons/menu-align-justify.svg) center / contain no-repeat;
}

.dfb-nav .wp-block-navigation__responsive-container-close::before {
	-webkit-mask-image: url(../icons/menu-window-close.svg);
	mask-image: url(../icons/menu-window-close.svg);
}

/*
 * Open menu: a white dropdown right under the menu button, full header width, one link per row. The selectors carry
 * .dfb-mast and .wp-block-navigation to outrank core's overlay rules (padding, colours), loaded after this file.
 */
.dfb-mast .dfb-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute;
	top: 57.2px;
	right: 0;
	bottom: auto;
	left: 0;
	z-index: 9999;
	padding: 0;
	overflow: visible;
	background-color: var(--wp--preset--color--light);
	color: var(--wp--preset--color--dark);
	animation: none;
}

.dfb-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
	visibility: hidden;
}

.dfb-mast .dfb-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-close,
.dfb-mast .dfb-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog {
	max-width: none;
	margin: 0;
}

.dfb-mast .dfb-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: -42.4px;
	right: 0;
	display: flex;
}

.dfb-mast .dfb-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 0;
}

.dfb-mast .dfb-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

/* Rows are divided by UAE's default divider colour (settings.custom.color.menu-divider, not a kit colour). */
.dfb-mast .dfb-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: block;
	width: 100%;
	border-bottom: 1px solid var(--wp--custom--color--menu-divider);
	color: var(--wp--preset--color--dark);
}

.dfb-mast .dfb-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.dfb-mast .dfb-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 14px 20px;
	background-color: var(--wp--preset--color--light);
}

/* ---------- Footer ---------- */

.dfb-foot-main,
.dfb-foot-bar {
	background-color: var(--wp--preset--color--dark);
	padding: 64px 20px;
}

.dfb-foot-in {
	max-width: 1130px;
	margin: 0 auto;
}

.dfb-foot-cols {
	display: flex;
	flex-direction: row;
	gap: 40px;
}

.dfb-foot-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 30%;
}

.dfb-foot .dfb-wordmark {
	color: var(--wp--preset--color--light);
}

.dfb-foot-note,
.dfb-foot-tel {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.dfb-foot-note {
	color: var(--wp--custom--color--muted-light);
}

.dfb-foot-h {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--subtitle);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--body);
	letter-spacing: var(--wp--custom--letter-spacing--subtitle);
	text-transform: uppercase;
	color: var(--wp--preset--color--tertiary);
}

/* The block's class is copied to its inner list too, so the spacing is set on the outer element only. */
.dfb-foot-col > .dfb-foot-list {
	padding: 4px 0 8px;
}

.dfb-foot-list + .dfb-foot-h {
	margin-top: 20px;
}

.dfb-foot-list .wp-block-navigation__container {
	gap: 8px;
}

.dfb-foot-list .wp-block-navigation-item {
	color: var(--wp--preset--color--light);
}

.dfb-foot-list .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
}

.dfb-foot-tel {
	color: var(--wp--preset--color--light);
}

.dfb-foot-tel a {
	font-weight: 700;
	color: var(--wp--preset--color--light);
	text-decoration: underline;
}

.dfb-foot-bar {
	padding: 20px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--light) 10%, transparent);
}

.dfb-foot-copy {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 500;
	line-height: 1.15;
	color: var(--wp--custom--color--muted-light);
}

@media (max-width: 1024px) {
	.dfb-foot-main {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

@media (max-width: 767px) {
	.dfb-foot-main {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.dfb-foot-cols {
		flex-direction: column;
	}

	.dfb-foot-col {
		width: 100%;
	}
}

/* Page frame as live: no gap between header, content and footer parts (core adds 24px), and 96px of white above
   the dark footer on every page (live: the top of UAE's #colophon). */
body .wp-site-blocks > * {
	margin-block-start: 0;
}

.dfb-foot {
	margin-top: 96px;
}