/*
 * RRPS skin for the DF Mobile Menu plugin (Figma Tablet nav 2973-35219,
 * Mobile nav 3016-16166).
 *
 * Loaded straight after the plugin's stylesheet (inc/components/mobile-menu.php),
 * so a rule only has to match the plugin's selector; !important is used only
 * where the plugin's own rule has it. Colours come from the plugin settings
 * (--dfmm-* variables); layout and type follow the design. Figma sets the
 * phone menu in 12px type, raised to 16px here to stay readable.
 */

/* ---- Toggle in the header: three 27px lines ---- */

.dfmm-hamburger {
	gap: 6px;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	padding: 0;
}

.dfmm-hamburger__line {
	width: 27px;
	height: 2px;
}

.dfmm-hamburger[aria-expanded="true"] .dfmm-hamburger__line:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.dfmm-hamburger[aria-expanded="true"] .dfmm-hamburger__line:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.dfmm-hamburger:focus-visible,
#dfmm-panel .dfmm-close:focus-visible,
#dfmm-panel .dfmm-back-btn:focus-visible,
#dfmm-panel .dfmm-submenu-toggle:focus-visible,
#dfmm-panel a:focus-visible {
	outline: 2px solid var(--dfmm-item-active, #2f6f7f);
	outline-offset: -2px;
}

/* ---- Panel ---- */

#dfmm-panel {
	--rrps-mm-pad: 32px;
	--rrps-mm-rule: #e5e7e8;
	--dfmm-active-weight: 600; /* the current page keeps the 600 weight; only its colour changes */
	width: min(672px, 87.5vw);
	max-width: none;
}

#dfmm-panel .dfmm-panel__header {
	min-height: 84px;
	padding: 16px var(--rrps-mm-pad) !important;
	border-bottom: 1px solid var(--rrps-mm-rule);
}

#dfmm-panel .dfmm-logo {
	width: var(--dfmm-logo-max-w, 128px);
}

#dfmm-panel .dfmm-close {
	width: 44px;
	height: 44px;
	margin-right: -6px;
}

#dfmm-panel .dfmm-close svg {
	width: 36px;
	height: 36px;
}

#dfmm-panel .dfmm-close path {
	stroke-width: 1.1;
}

/* ---- Items: 24px / 600, 32px apart ---- */

#dfmm-panel .dfmm-menu,
#dfmm-panel ul.dfmm-sub-menu {
	padding: 16px 0 !important;
}

#dfmm-panel a.dfmm-menu-link,
#dfmm-panel .dfmm-sub-menu a.dfmm-menu-link,
#dfmm-panel .dfmm-back-btn {
	padding: 16px var(--rrps-mm-pad) !important;
	font-size: var(--dfmm-item-size, 24px) !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
}

/* Services and Industries link to sections of the home page, so WordPress marks
   them "current" on the home page; only highlight them inside their own pages. */
#dfmm-panel .dfmm-menu-item.dfmm-has-children.current-menu-item:not(.current-menu-ancestor) > .dfmm-menu-item-row > a.dfmm-menu-link {
	color: var(--dfmm-item-color, #0e2b47) !important;
}

/* A parent row opens its submenu wherever it is tapped, as in the design: the
   chevron button's hit area is stretched over the whole row. */
#dfmm-panel .dfmm-menu-item-row {
	position: relative;
}

#dfmm-panel .dfmm-submenu-toggle {
	width: auto;
	padding: 0 var(--rrps-mm-pad) 0 16px !important;
	border-left: 0 !important;
	color: var(--dfmm-arrow-color, #0e2b47);
}

#dfmm-panel .dfmm-submenu-toggle::before {
	content: "";
	position: absolute;
	inset: 0;
}

#dfmm-panel .dfmm-submenu-toggle:hover,
#dfmm-panel .dfmm-submenu-toggle:focus-visible,
#dfmm-panel .dfmm-back-btn:hover,
#dfmm-panel .dfmm-back-btn:focus-visible {
	background: none !important;
}

#dfmm-panel .dfmm-chevron {
	width: 20px;
	height: 20px;
}

#dfmm-panel .dfmm-chevron path,
#dfmm-panel .dfmm-back-icon path {
	stroke-width: 1.2;
}

/* Submenu: "‹ Services" heads the list (title set in mobile-menu.php). */
#dfmm-panel .dfmm-back-item {
	margin-bottom: 8px !important;
	border-bottom: 0;
}

#dfmm-panel .dfmm-back-btn {
	gap: 24px;
	color: var(--dfmm-item-color, #0e2b47);
}

#dfmm-panel .dfmm-back-icon {
	width: 24px;
	height: 24px;
	margin-left: -8px;
}

/* ---- Contact button and social links, pinned to the bottom ---- */

#dfmm-panel .dfmm-panel__cta {
	margin: 0 24px !important;
	padding: 24px 0 0 !important;
	border-top: 1px solid var(--rrps-mm-rule);
}

#dfmm-panel a.dfmm-cta-btn {
	padding: 12px 16px !important;
	font-size: 24px !important;
	line-height: 36px !important;
	font-weight: 600 !important;
	transition: background-color 0.2s ease;
}

#dfmm-panel a.dfmm-cta-btn:hover,
#dfmm-panel a.dfmm-cta-btn:focus-visible {
	background-color: #1e4b67 !important;
	opacity: 1;
}

#dfmm-panel .dfmm-panel__social {
	gap: 24px;
	padding: 24px !important;
	border-top: 0;
}

#dfmm-panel a.dfmm-social-link {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--dfmm-cta-bg, #0e2b47) !important;
	transition: background-color 0.2s ease;
}

#dfmm-panel a.dfmm-social-link:hover,
#dfmm-panel a.dfmm-social-link:focus-visible {
	background: #1e4b67 !important;
	opacity: 1;
}

/* The design uses the bare "in" and "f" marks, not the plugin's badge icons. */
#dfmm-panel a.dfmm-social-link[aria-label="linkedin"] svg,
#dfmm-panel a.dfmm-social-link[aria-label="facebook"] svg {
	display: none;
}

#dfmm-panel a.dfmm-social-link[aria-label="linkedin"]::before,
#dfmm-panel a.dfmm-social-link[aria-label="facebook"]::before {
	content: "";
	width: var(--dfmm-social-size, 20px);
	height: var(--dfmm-social-size, 20px);
	background: var(--dfmm-social-color, #fff);
	-webkit-mask: var(--rrps-mm-glyph) center / contain no-repeat;
	mask: var(--rrps-mm-glyph) center / contain no-repeat;
}

#dfmm-panel a.dfmm-social-link[aria-label="linkedin"] {
	--rrps-mm-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.94 5a2 2 0 1 1-4-.002 2 2 0 0 1 4 .002M7 8.48H3V21h4zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91z'/%3E%3C/svg%3E");
}

#dfmm-panel a.dfmm-social-link[aria-label="facebook"] {
	--rrps-mm-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z'/%3E%3C/svg%3E");
}

/* ---- Phones ---- */

@media (max-width: 767px) {
	#dfmm-panel {
		--rrps-mm-pad: 24px;
		--dfmm-item-size: 16px;
		width: min(366px, 85vw);
	}

	#dfmm-panel .dfmm-panel__header {
		padding: 16px !important;
	}

	#dfmm-panel a.dfmm-menu-link,
	#dfmm-panel .dfmm-sub-menu a.dfmm-menu-link,
	#dfmm-panel .dfmm-back-btn {
		padding-block: 13px !important;
	}

	#dfmm-panel .dfmm-chevron {
		width: 24px;
		height: 24px;
	}

	#dfmm-panel a.dfmm-cta-btn {
		font-size: 14px !important;
		line-height: 18px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#dfmm-panel,
	#dfmm-panel .dfmm-sub-menu,
	.dfmm-overlay {
		transition: none;
	}
}