/*
 * TEC Gas: Menu overlay (Figma group 02: D-EN 66:51749, M-EN 66:55335, D-AR 66:51640, M-AR 66:57642).
 * Mobile-first = the 390 frames; @media (min-width: 1024px) = the 1440 frames.
 * Line heights marked "normal" are lh=UNKNOWN in the export.
 *
 * Colours: white theme (TEC_Developer_Revision_Notes revision 10). Figma could not be read for this
 * change, so the values are those of the white menu variants in the interactions reference linked from
 * the notes (Menu-Desktop-White / Menu-Mobile-White): white panel with a #F1F4EC glow, navy text,
 * navy hairlines and #3F7300 accents. Layout, sizes and content are unchanged.
 * Hover and focus states: revision 07 (hover only for mouse pointers, so touch screens keep the
 * default colours); accordion arrow and open/close motion: revision 08.
 */

html.tec-menu-open { overflow: hidden; }

.tec-menu {
	position: fixed;
	inset: 0;
	z-index: 100; /* above .tec-header (20) */
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--tec-white); /* the gradient's end colour, beyond the frame */
	color: var(--tec-navy);
}
.tec-menu[hidden] { display: none; }

/* Frame: M root 66:55335 / 66:57642 (padding 0 22px 22px). Plain white on phones, as in the supplied
   M/Menu reference; the desktop frame keeps its glow (below). */
.tec-menu__frame {
	position: relative;
	overflow: hidden;
	padding: 0 22px 22px;
	background: var(--tec-white);
}
.tec-menu__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
}
/* M-AR root gap 8px (M-EN has none). */
[dir="rtl"] .tec-menu__inner { gap: 8px; }

/* ---------- Top bar (66:55336 / 66:57643; D 66:51752 / 66:51643) ---------- */
.tec-menu__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 110px;
}
/* logo-menu.png (560x233, the logo without its tagline) at the logo's former widths. */
.tec-menu__logo { width: 74.02px; height: 30.8px; flex: none; }

.tec-menu__controls { display: flex; align-items: center; gap: 8px; }
/* AR keeps [pill, close] left to right on every width, the same order as the header's [pill, hamburger]
   (revision 09), so the close button opens exactly where the hamburger was. */
[dir="rtl"] .tec-menu__controls { flex-direction: row-reverse; }

.tec-menu__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(11, 34, 56, 0.22);
	border-radius: 99px;
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
	color: var(--tec-navy);
	transition: background-color 0.25s ease, border-color 0.25s ease;
	white-space: nowrap;
}
[dir="rtl"] .tec-menu__pill { padding: 0 12px; }

.tec-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 22px;
	background: var(--tec-navy);
	transition: background-color 0.25s ease;
}
/* The close glyph PNG is navy: shown pure white on the navy circle. */
.tec-menu__close .tec-icon { filter: brightness(0) invert(1); }

/* ---------- Mobile navigation (66:55345 / 66:57652) ---------- */
.tec-menu__mnav { padding-top: 6px; }
.tec-menu__rows { display: flex; flex-direction: column; }

.tec-menu__row,
.tec-menu__group-head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.tec-menu__row {
	height: 53px;
	border-bottom: 1px solid rgba(11, 34, 56, 0.06); /* light-grey separators of the M/Menu reference (#F0F2F3 on white) */
}
.tec-menu__group { border-bottom: 1px solid rgba(11, 34, 56, 0.06); }
.tec-menu__group-head { height: 52px; }

/* Number container 22 x hug; the text sits at its left edge in both languages (not mirrored). */
.tec-menu__row-num {
	flex: none;
	width: 22px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: normal;
	color: rgba(11, 34, 56, 0.4);
	text-align: left;
}
.tec-menu__row-label {
	flex: 1 1 0;
	min-width: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 27px;
	color: var(--tec-navy);
	transition: color 0.25s ease;
}
.tec-menu__row.is-active .tec-menu__row-num,
.tec-menu__row.is-active .tec-menu__row-label,
.tec-menu__group.is-active .tec-menu__row-num,
.tec-menu__group.is-active .tec-menu__row-label { color: var(--tec-green); }

/* "Background+Shadow" 66:55352 / 66:57658. */
.tec-menu__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 3.5px;
	background: var(--tec-green-light);
	box-shadow: 0 0 0 4px rgba(143, 201, 58, 0.18);
}

.tec-menu__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 18px;
	background: #EFEFEF; /* grey circle of the M/Menu reference, open or closed */
	transition: background-color 0.3s ease;
}
/* Revision 08: the down chevron turns to point up while its panel is open. */
.tec-menu__toggle .tec-icon { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tec-menu__toggle[aria-expanded="true"] .tec-icon { transform: rotate(180deg); }

/* Open/close: the panel row animates between its content height (1fr) and 0; once closed it is
   visibility:hidden, so its links leave the tab order and the accessibility tree (main.js). */
.tec-menu__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
}
.tec-menu__panel.is-collapsed {
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.4s;
}
.tec-menu__panel-inner { min-height: 0; overflow: hidden; }

/* Panel 346x164 > column padding 2px 0 14px, gap 8px (selector outranks the ul[role="list"] reset). */
.tec-menu__panel .tec-menu__subs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 2px 0 14px;
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tec-menu__panel.is-collapsed .tec-menu__subs { opacity: 0; transform: translateY(-8px); }
.tec-menu__sub {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	background: #F4F5F0;
	border: 1px solid rgba(11, 34, 56, 0.1);
	border-radius: 16px;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
/* M-AR keeps the EN order (thumb on the left, badge on the right): not mirrored. */
[dir="rtl"] .tec-menu__sub { flex-direction: row-reverse; }

.tec-menu__sub-thumb {
	display: block;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 12px;
}
.tec-menu__sub-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 0;
	min-width: 0;
}
[dir="rtl"] .tec-menu__sub-text { text-align: right; }
.tec-menu__sub-title {
	font-size: 14.5px;
	font-weight: 600;
	line-height: normal;
	color: var(--tec-navy);
}
/* Subtitle in a fixed 222x15 frame; M-EN texts are wider than it (239 / 250), clipped as in Figma. */
.tec-menu__sub-desc {
	display: block;
	max-width: 222px;
	overflow: hidden;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	color: #6B7480;
}

.tec-menu__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background: var(--tec-green);
	transition: transform 0.25s ease;
}
.tec-menu__badge--m { width: 30px; height: 30px; border-radius: 15px; }

/* ---------- CTA buttons (M 201:38019 / 201:38032, D 66:51832 / 66:51667) ---------- */
/* Phones: Call Us only, at its former half-row width and on the start side (M/Menu reference). */
.tec-menu__mcta {
	display: flex;
	gap: 10px;
	height: 74px; /* padding 24px + row 50px */
	padding-top: 24px;
}
.tec-menu__mcta .tec-menu__cta { flex: 0 0 calc(50% - 5px); }
.tec-menu__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 1 0;
	min-width: 0;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	color: var(--tec-white);
	white-space: nowrap;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
.tec-menu__cta--call { background: var(--tec-green); }
.tec-menu__cta--mail { border: 1px solid rgba(11, 34, 56, 0.22); color: var(--tec-navy); }
[dir="rtl"] .tec-menu__cta--call { padding: 0 16px; }
[dir="rtl"] .tec-menu__cta--mail { padding: 8px 16px; }

/* ---------- Desktop (1440 frames) ---------- */
@media (min-width: 1024px) {
	/* Background 66:51750 / 66:51641: 1440x1024, padding 0 120px, gradient 65%. */
	.tec-menu__frame {
		min-height: 1024px;
		padding: 0;
		background: radial-gradient(90% 70% at 50% 0%, #F1F4EC 0%, #FFFFFF 65%);
	}
	.tec-menu__inner {
		width: 100%;
		max-width: calc(var(--tec-content) + 2 * var(--tec-pad));
		margin-inline: auto;
		padding-inline: var(--tec-pad);
	}
	[dir="rtl"] .tec-menu__inner { gap: 0; }

	.tec-menu__logo { width: 109.43px; height: 45.53px; }
	.tec-menu__controls { gap: 10px; }

	.tec-menu__pill {
		width: auto;
		height: 46px;
		padding: 0 18px;
		justify-content: flex-start;
		font-size: 14px;
	}
	[dir="rtl"] .tec-menu__pill { padding: 0 18px; }

	.tec-menu__close { width: 52px; height: 52px; border-radius: 26px; }

	/* Margin 66:51761 (padding-top 22px) > row gap 64px. */
	.tec-menu__body {
		display: flex;
		align-items: flex-start;
		gap: min(64px, 4.4445vw);
		padding-top: 22px;
	}

	/* Navigation 412.92 (top stroke) with Menu Tab instances. */
	.tec-menu__nav {
		flex: 0 1 412.92px;
		min-width: 0;
		border-top: 1px solid rgba(11, 34, 56, 0.06);
	}
	.tec-menu__tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px; /* not designed: keeps number and label apart below 1440 (no effect at 1440, where the free space is 56px) */
		padding: 16px 0;
		border-bottom: 1px solid rgba(11, 34, 56, 0.06); /* light grey, not the darker 10% navy line */
		transition: border-color 0.25s ease;
	}
	/* Number container 34 wide: EN text at its right edge, AR at its left edge (mirrored). */
	.tec-menu__tab-num {
		flex: none;
		width: 34px;
		font-size: 12px;
		font-weight: 600;
		line-height: normal;
		color: rgba(11, 34, 56, 0.38);
		text-align: end;
		transition: color 0.25s ease;
	}
	.tec-menu__tab-label {
		flex: 0 1 322.92px;
		min-width: 0;
		font-size: 26px; /* 34px in Figma; reduced on request (same 1.3 line height) */
		font-weight: 700;
		line-height: 33.8px;
		color: var(--tec-navy);
		transition: color 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.tec-menu__col { display: flex; flex-direction: column; min-width: 0; }
	.tec-menu__col--cards { flex: 0 1 359.06px; gap: 24px; }
	.tec-menu__col--contact { flex: 0 1 300px; gap: 14px; }
	[dir="rtl"] .tec-menu__col--contact { gap: 24px; }

	.tec-menu__title {
		font-size: 12.5px;
		font-weight: 600;
		line-height: normal;
		letter-spacing: 0.02em;
		color: var(--tec-green);
	}

	.tec-menu__cards { display: flex; flex-direction: column; gap: 10px; }
	.tec-menu__card {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 10px;
		background: #F4F5F0;
		border: 1px solid rgba(11, 34, 56, 0.1);
		border-radius: 16px;
		transition: background-color 0.25s ease, border-color 0.25s ease;
	}
	.tec-menu__card-thumb {
		display: block;
		flex: none;
		width: 78px;
		height: 64px;
		border-radius: 12px;
	}
	.tec-menu__card-text {
		display: flex;
		flex-direction: column;
		gap: 2px;
		flex: 1 1 0;
		min-width: 0;
	}
	.tec-menu__card-cat {
		font-size: 11.5px;
		font-weight: 600;
		line-height: normal;
		color: var(--tec-green);
	}
	.tec-menu__card-title {
		font-size: 15px;
		font-weight: 600;
		line-height: 21px;
		color: var(--tec-navy);
	}

	/* Contact column: EN one 14px-gap column; AR title + nested 10px-gap column. */
	.tec-menu__contact { display: flex; flex-direction: column; gap: 14px; }
	[dir="rtl"] .tec-menu__contact { gap: 10px; }
	.tec-menu__address {
		font-size: 14px;
		font-weight: 400;
		line-height: 25.2px;
		color: #5F666D;
	}
	.tec-menu__phone {
		font-size: 20px;
		font-weight: 600;
		line-height: normal;
		color: var(--tec-navy);
	}
	.tec-menu__email {
		font-size: 15px;
		font-weight: 400;
		line-height: normal;
		color: #5F666D;
	}
	.tec-menu__hours {
		font-size: 13px;
		font-weight: 400;
		line-height: normal;
		color: #6B7480;
	}
	/* Margin 66:51831: padding-top 6px, fixed 56 tall > row gap 10px. */
	.tec-menu__ctas {
		display: flex;
		gap: 10px;
		height: 56px;
		padding-top: 6px;
	}

	.tec-menu__social { display: flex; align-items: center; gap: 8px; }
	.tec-menu__social-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		background: #E7E9EC; /* light-grey circle with a navy glyph (supplied reference); green on hover */
		transition: background-color 0.25s ease;
	}
}

/* ---------- Hover and keyboard focus (revision 07) ---------- */
/* Keyboard focus always shows the state (with the global focus ring); mouse hover only where the
   device has a fine pointer, so touch screens keep the default colours. */
.tec-menu__tab:focus-visible .tec-menu__tab-num,
.tec-menu__tab:focus-visible .tec-menu__tab-label,
.tec-menu__row:focus-visible .tec-menu__row-label,
a.tec-menu__row-label:focus-visible { color: var(--tec-green); }
.tec-menu__card:focus-visible,
.tec-menu__sub:focus-visible { background: rgba(143, 201, 58, 0.12); border-color: rgba(143, 201, 58, 0.4); }
.tec-menu__tab:focus-visible .tec-menu__tab-label { transform: translateX(8px); }
[dir="rtl"] .tec-menu__tab:focus-visible .tec-menu__tab-label { transform: translateX(-8px); }

@media (hover: hover) and (pointer: fine) {
	.tec-menu__tab:hover { border-bottom-color: rgba(63, 115, 0, 0.35); }
	.tec-menu__tab:hover .tec-menu__tab-num,
	.tec-menu__tab:hover .tec-menu__tab-label,
	.tec-menu__row:hover .tec-menu__row-label,
	a.tec-menu__row-label:hover { color: var(--tec-green); }
	.tec-menu__tab:hover .tec-menu__tab-label { transform: translateX(8px); }
	[dir="rtl"] .tec-menu__tab:hover .tec-menu__tab-label { transform: translateX(-8px); }

	.tec-menu__card:hover { background: rgba(143, 201, 58, 0.1); border-color: rgba(143, 201, 58, 0.4); }
	.tec-menu__sub:hover { background: rgba(143, 201, 58, 0.14); border-color: rgba(143, 201, 58, 0.4); }
	.tec-menu__card:hover .tec-menu__badge,
	.tec-menu__sub:hover .tec-menu__badge { transform: scale(1.1); }

	.tec-menu__cta--call:hover { background: var(--tec-green-dark); }
	.tec-menu__cta--mail:hover { background: rgba(11, 34, 56, 0.05); border-color: var(--tec-navy); }
	.tec-menu__pill:hover { background: rgba(11, 34, 56, 0.05); border-color: var(--tec-navy); }
	.tec-menu__close:hover { background: var(--tec-green); }
	.tec-menu__toggle:hover { background: #E2E4E6; }
	.tec-menu__social-item:hover { background: var(--tec-green); }
	.tec-menu__social-item:hover .tec-icon { filter: brightness(0) invert(1); }
}

@media (prefers-reduced-motion: reduce) {
	.tec-menu *,
	.tec-menu__panel.is-collapsed { transition: none; }
}