/**
 * Gatilab header menu refinements.
 * Tightens the type ladder and reworks the Services mega panel.
 * Loads after md-local/css/opt-menus.css; every rule is scoped to
 * .header-menu so nothing leaks into footer, body, or block menus.
 */

@media (min-width: 993px) {

	/* TOP LEVEL ------------------------------------------------------ */

	.header-menu .menu-header > .menu-item > a {
		font-size: 16px;
		letter-spacing: normal;
		padding: 16px 10px;
	}

	/* CTA ------------------------------------------------------------ */

	/* Brand red on white text measures 4.03:1, just under WCAG AA for
	   normal text. Darkening in-family lands at ~5:1 without leaving the
	   palette. Scoped to the header so body buttons keep the token. */
	.header-menu .menu-header .menu-item.button > a {
		background: color-mix(in srgb, var(--color-button) 88%, #000);
		font-size: 15px;
		padding: 9px 16px;
	}

	.header-menu .menu-header .menu-item.button > a:hover,
	.header-menu .menu-header .menu-item.button > a:focus-visible {
		background: color-mix(in srgb, var(--color-button) 78%, #000);
	}

	/* MEGA PANEL ----------------------------------------------------- */

	/* Wider panel so no service name wraps to a second line. At 46rem
	   ten of eighteen titles broke across two lines and the panel ran
	   past the fold on a 720px viewport. */
	.header-menu .menu-header .mega-menu > .sub-menu:has(.sub-menu) {
		max-width: min(58rem, calc(100vw - 2rem));
		padding: 14px;
	}

	/* Never let the panel run past the viewport, whatever the item count. */
	.header-menu .menu-header .mega-menu > .sub-menu {
		max-height: calc(100vh - 5.5rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Wider gutters between columns. */
	.header-menu .menu-header .mega-menu > .sub-menu:has(.sub-menu) > .menu-item {
		padding-inline-end: 1.25rem;
	}

	.header-menu .menu-header .mega-menu > .sub-menu:has(.sub-menu) > .menu-item + .menu-item {
		padding-inline-start: 1.25rem;
	}

	/* Column heading */
	.header-menu .menu-header .mega-menu > .sub-menu > .menu-item-has-children > a,
	.header-menu .menu-header .mega-menu > .sub-menu > .menu-item-has-children > .menu-item-label {
		font-size: 11px;
		letter-spacing: 0.09em;
		margin-block-end: 6px;
		opacity: 0.6;
		padding: 4px 12px;
	}

	/* Service link row */
	.header-menu .menu-header .mega-menu .sub-menu .sub-menu > .menu-item > a {
		border-radius: 8px;
		padding: 7px 12px;
	}

	.header-menu .menu-header .mega-menu .sub-menu .menu-item-title {
		font-size: 15px;
		font-weight: 500;
		letter-spacing: normal;
		line-height: 1.35;
	}

	.header-menu .menu-header .mega-menu > .sub-menu .menu-item-desc {
		font-size: 12.5px;
		line-height: 1.45;
		margin-block-start: 1px;
		opacity: 0.62;
	}

	/* STANDARD DROPDOWN (Blog) --------------------------------------- */

	.header-menu .menu-header .sub-menu:not(:has(.sub-menu)) > .menu-item > a {
		font-size: 15px;
		padding-block: 8px;
	}
}

/* MOBILE ------------------------------------------------------------- */

@media (max-width: 992px) {

	.header-menu .menu-header > .menu-item > a {
		font-size: 17px;
		letter-spacing: normal;
	}

	.header-menu .menu-header .sub-menu .menu-item-title {
		font-size: 16px;
	}

	.header-menu .menu-header .menu-item-desc {
		font-size: 12.5px;
		line-height: 1.4;
		opacity: 0.62;
	}

	/* CTA reads as a button inside the sheet, not another list row. */
	.header-menu .menu-header > .menu-item.button {
		border-bottom: 0;
		margin-block: 12px 4px;
	}

	.header-menu .menu-header > .menu-item.button > a {
		background: color-mix(in srgb, var(--color-button) 88%, #000);
		border-radius: 8px;
		font-size: 16px;
		justify-content: center;
		padding: 12px 16px;
	}
}

/* Mobile: group headings inside the Services panel are non-link
   .menu-item-label spans (their URL is "#"), so they never picked up the
   44px row sizing the theme gives real submenu anchors. Left them 28px
   tall next to a 44px chevron, which staggered the rows. Inline padding
   is left to the theme so the label still clears the chevron. */
@media (max-width: 992px) {
	.header-menu .menu-header .sub-menu > .menu-item > .menu-item-label {
		align-items: center;
		display: flex;
		min-height: 44px;
		padding-block: 12px;
		width: 100%;
	}
}

/* Mobile: the theme lays submenu anchors out as a centred flex ROW, so a
   title and its description landed side by side with no gap. Stack them. */
@media (max-width: 992px) {
	.header-menu .menu-header .sub-menu > .menu-item-has-desc > a {
		align-items: flex-start;
		flex-direction: column;
		gap: 2px;
		justify-content: center;
		padding-block: 12px;
	}

	.header-menu .menu-header .sub-menu > .menu-item-has-desc > a > .menu-item-desc {
		display: block;
	}
}