/*
 * TEC Gas: shared layout (Header 7:21237, Footer 7:24920).
 * Mobile-first values are the 390 design; @media (min-width: 1024px) holds the 1440 design.
 */

/* ---------- Header ---------- */
.tec-header { position: relative; z-index: 20; }

.tec-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
	padding-inline: 16px;
	max-width: 1440px;
	margin-inline: auto;
}

.tec-header__logo { display: block; flex: none; }
.tec-header__logo .tec-logo { width: 74.02px; height: 46px; }

.tec-nav__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.tec-nav__link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 40.25px;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 26.25px;
	color: var(--tec-navy);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}
/* Link / Property 1=Clicked (7:21345): 2px bottom border #60A000. */
.tec-nav__link.is-active { border-bottom-color: var(--tec-green-mid); }
/* Revision 07: hover (mouse pointers only) and keyboard focus on the main navigation and its controls. */
.tec-nav__link { transition: color 0.25s ease, border-color 0.25s ease; }
.tec-nav__link:focus-visible { color: var(--tec-green); }
@media (hover: hover) and (pointer: fine) {
	.tec-nav__link:hover { color: var(--tec-green); border-bottom-color: rgba(96, 160, 0, 0.45); }
	.tec-nav__link.is-active:hover { border-bottom-color: var(--tec-green-mid); }
	.tec-pill:hover { background: var(--tec-navy); color: var(--tec-white); }
	.tec-burger:hover .tec-burger__bar { background: var(--tec-green); }
}

.tec-header__controls { display: flex; align-items: center; gap: 16px; }
/* AR order is [pill, hamburger] left to right on every width: the language pill sits directly before
   the menu button (C4 on desktop; revision 09 brings the mobile navbar in line). */
[dir="rtl"] .tec-header__controls { flex-direction: row-reverse; }

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

.tec-burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 34px;
	height: 42px;
	padding: 12px 4px;
}
.tec-burger__bar { display: block; width: 26px; height: 2px; background: var(--tec-navy); flex: none; transition: background-color 0.25s ease; }

@media (min-width: 1024px) {
	.tec-header__inner { height: 110px; padding-inline: var(--tec-pad); }
	.tec-header__logo .tec-logo { width: 140px; height: 87px; }
	.tec-pill { width: 65px; padding: 4px 16px; font-size: 14px; line-height: 24.5px; }
	/* D/ar pill: "EN" 13px / 22.75px, content centred, same 65px frame. */
	[dir="rtl"] .tec-pill { width: 65px; font-size: 13px; line-height: 22.75px; }
	.tec-burger { width: 42px; height: auto; padding: 6px; gap: 7px; }
	.tec-burger__bar { width: 30px; }
	/* D/ar navigation frame is fixed 687px wide; links start at its left edge. */
	[dir="rtl"] .tec-nav { width: 687px; }
	[dir="rtl"] .tec-nav__list { justify-content: flex-end; }
}
@media (min-width: 1024px) and (max-width: 1239.98px) {
	/* Narrower than the 1440 design: tighten the nav gap so the header fits (not designed, D1). */
	.tec-nav__list { gap: 16px; }
	[dir="rtl"] .tec-nav { width: auto; }
}

/* ---------- Footer ---------- */
.tec-footer {
	background: var(--tec-navy);
	color: var(--tec-white);
	border-radius: 20px 20px 0 0;
	padding-top: 44px;
	overflow: hidden;
}

.tec-footer__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 0 24px;
}

.tec-footer__brand { display: flex; flex-direction: column; }
.tec-footer__logo { display: flex; flex-direction: column; padding-bottom: 30px; height: 84px; }
.tec-footer__logo .tec-logo { width: 86.9px; height: 54px; }
[dir="rtl"] .tec-footer__brand,
[dir="rtl"] .tec-footer__logo { align-items: flex-start; }

/* M/en: free layout, 151px links at x 0 / 199, y step 31, 116px tall. */
.tec-footer__links {
	display: grid;
	grid-template-columns: 151px 151px;
	column-gap: 48px;
	row-gap: 6.5px;
	height: 116px;
	align-content: start;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* M/ar: grid repeat(2, minmax(0, 1fr)), gap 6px 16px. */
[dir="rtl"] .tec-footer__links {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 16px;
	height: auto;
}
.tec-footer__links a { display: block; font-size: 14px; font-weight: 400; line-height: 24.5px; color: var(--tec-white); }

.tec-footer__heading {
	padding-bottom: 12px;
	font-size: 17px;
	font-weight: 500;
	line-height: 22.95px;
	color: var(--tec-white);
}

.tec-footer__rows { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.tec-footer__row { display: flex; gap: 10px; }
.tec-footer__row-icon { display: flex; padding-top: 4px; flex: none; width: 17px; }
.tec-footer__row-icon .tec-icon { width: 17px; height: 17px; }
.tec-footer__row-text { font-size: 13.5px; font-weight: 400; line-height: 23.63px; color: var(--tec-white); }
.tec-footer__row--address .tec-footer__row-text { width: 291px; max-width: 100%; }
[dir="rtl"] .tec-footer__row:not(.tec-footer__row--address) { align-items: center; }
[dir="rtl"] .tec-footer__row:not(.tec-footer__row--address) .tec-footer__row-icon { padding-top: 0; }

.tec-footer__form { display: flex; flex-direction: column; gap: 8px; }
.tec-footer__input {
	height: 46px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: var(--tec-white);
	color: var(--tec-navy);
	font-size: 14px;
	font-weight: 600;
}
.tec-footer__input::placeholder { color: var(--tec-muted); opacity: 1; }
.tec-footer__input:focus-visible { outline-offset: 0; }

/* Button 201:37729 Default. */
.tec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 22px;
	border-radius: 8px;
	background: var(--tec-green);
	color: var(--tec-white);
	font-size: 14px;
	font-weight: 500;
	line-height: 24.5px;
	white-space: nowrap;
}
/* M/en subscribe is a plain 46px frame (C14); M/ar uses the 44px Button instance. */
.tec-footer__submit { height: 46px; }
[dir="rtl"] .tec-footer__submit { height: 44px; }

.tec-footer__social { display: flex; gap: 8px; padding-top: 14px; }
.tec-footer__social-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 22px;
	flex: none;
}
/* Revision 03: both circles white with navy glyphs by default (also on touch screens); each turns
   green with a white glyph (the navy PNG filtered to pure white) only on hover with a mouse. */
.tec-footer__social-item { background: var(--tec-white); transition: background-color 0.25s ease; }
.tec-footer__social-item .tec-icon { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
	.tec-footer__social-item:hover { background: var(--tec-green-mid); }
	.tec-footer__social-item:hover .tec-icon { filter: brightness(0) invert(1); }
}

.tec-footer__bottom {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 52.8px 24px 0;
}
[dir="rtl"] .tec-footer__bottom { padding-top: 76.4px; }
.tec-footer__copyright { flex: 1 1 auto; min-height: 65.63px; display: flex; flex-direction: column; justify-content: center; }
.tec-footer__copyright p { width: 250px; font-size: 12.5px; font-weight: 400; line-height: 21.88px; color: var(--tec-white); }
.tec-footer__divider { display: none; }

.tec-footer__top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 27px;
	flex: none;
}
.tec-footer__top-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.tec-footer__top .tec-icon { width: 20px; height: 20px; }

/* "TECHNICAL EXCELLENCE" strip (137:29689); motion from .tec-marquee (components.css), ~50px/s. */
.tec-strip { width: 100%; overflow: hidden; padding-top: 24px; --tec-marquee-dur: 62s; }
[dir="rtl"] .tec-strip { --tec-marquee-dur: 56s; }
/* Revision 11: the AR glyphs reach 13px below the baseline (the dots of ي, the tail of ق), past the old
   fixed 45px box, which clipped them. Same baseline (padding-top), height grown to hold the full ink. */
[dir="rtl"] .tec-strip { padding-top: 16px; padding-bottom: 12px; }
.tec-strip__track { display: flex; align-items: center; width: max-content; }
.tec-strip__text {
	flex: none;
	font-size: 28px;
	font-weight: 800;
	line-height: 28px;
	color: rgba(255, 255, 255, 0.12);
	white-space: nowrap;
}
.tec-strip__sep { display: flex; align-items: center; padding: 0 12.6px; width: 29.4px; height: 4.19px; flex: none; }
.tec-strip__sep span { display: block; flex: 1 1 auto; height: 4.19px; border-radius: 2.09px; background: var(--tec-green-light); }

@media (min-width: 1024px) {
	.tec-footer { border-radius: 24px 24px 0 0; padding-top: 0; }
	.tec-footer__main,
	.tec-footer__bottom { max-width: 1440px; margin-inline: auto; }

	.tec-footer__main {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 24px;
		padding: 72px clamp(24px, calc((100vw - 1280px) / 2), 80px) 0;
	}
	.tec-footer__brand { flex: 0 1 294.73px; min-width: 0; gap: 64px; }
	.tec-footer__logo { padding-bottom: 0; height: auto; }
	.tec-footer__logo .tec-logo { width: 140px; height: 87px; }
	/* D/ar: logo margin 32px + gap 40px. */
	[dir="rtl"] .tec-footer__brand { gap: 40px; }
	[dir="rtl"] .tec-footer__logo { padding-bottom: 32px; height: 94px; }

	.tec-footer__links,
	[dir="rtl"] .tec-footer__links {
		grid-template-columns: 137.36px 137.38px;
		grid-template-rows: repeat(4, 24.5px);
		gap: 8px 20px;
		height: auto;
	}

	.tec-footer__contact { flex: 0 1 383.16px; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
	.tec-footer__heading { padding-bottom: 16px; font-size: 18px; line-height: 24.3px; }
	/* D/ar contact heading is 17px / 22.95px (C11). */
	[dir="rtl"] .tec-footer__heading--contact { font-size: 17px; line-height: 22.95px; }
	.tec-footer__row--address .tec-footer__row-text { width: 356px; }

	.tec-footer__newsletter { flex: 0 1 442.11px; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 24px; }
	[dir="rtl"] .tec-footer__newsletter { padding-top: 0; }
	.tec-footer__form {
		flex-direction: row;
		align-items: center;
		gap: 6px;
		padding: 6px;
		border-radius: 10px;
		background: var(--tec-white);
	}
	[dir="rtl"] .tec-footer__form { align-items: stretch; }
	.tec-footer__input { flex: 0 1 272.11px; min-width: 0; height: auto; align-self: stretch; padding: 0 12px; font-weight: 400; border-radius: 0; }
	[dir="rtl"] .tec-footer__input { flex-basis: 312.11px; }
	.tec-footer__submit,
	[dir="rtl"] .tec-footer__submit { height: 44px; }
	[dir="rtl"] .tec-footer__submit { flex: 1 1 auto; }

	.tec-footer__social { padding-top: 16px; }
	.tec-footer__social-item { width: 34px; height: 34px; border-radius: 17px; }
	.tec-footer__social-item .tec-icon { width: 16px; height: 16px; }
	/* D/ar social row has no justify in Figma, so it sits at the left edge. */
	[dir="rtl"] .tec-footer__social { justify-content: flex-end; }

	.tec-footer__bottom {
		gap: 28px;
		padding: 142px clamp(24px, calc((100vw - 1280px) / 2), 80px) 0;
	}
	[dir="rtl"] .tec-footer__bottom { padding-top: 122px; }
	.tec-footer__copyright { flex: 0 1 636px; min-height: 0; }
	[dir="rtl"] .tec-footer__copyright { flex-basis: 535px; }
	.tec-footer__copyright p { width: auto; font-size: 13.5px; line-height: 23.63px; }
	.tec-footer__divider { display: block; flex: 1 1 auto; height: 1px; background: var(--tec-green-mid); }
	.tec-footer__top { width: 64px; height: 64px; border-radius: 32px; }
	.tec-footer__top .tec-icon { width: 22px; height: 22px; }
}

/* Revision 12: the AR copyright reads right to left from its start edge ("© 2025" first) on every width. */
[dir="rtl"] .tec-footer__copyright { align-items: flex-start; }
[dir="rtl"] .tec-footer__copyright p { text-align: right; }