/*
 * TEC Gas: base layer (fonts, tokens, reset, utilities).
 *
 * Breakpoint (open question D1, no tablet design exists): the 390 mobile design applies below
 * 1024px and the 1440 desktop design from 1024px. Desktop is exact at 1440 and narrows its side
 * padding between 1024 and 1440; mobile is exact at 390 and stretches up to 1023.
 */

/* Montserrat-Arabic v5.008 (typeagm, SIL OFL 1.1, see assets/fonts/montserrat-arabic/OFL.txt).
   Served as WOFF (the same font tables, zlib-compressed: ~55% smaller); the TTF stays as fallback. */
@font-face { font-family: "Montserrat-Arabic"; src: url("../fonts/montserrat-arabic/Montserrat-Arabic-Regular.woff") format("woff"), url("../fonts/montserrat-arabic/Montserrat-Arabic-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat-Arabic"; src: url("../fonts/montserrat-arabic/Montserrat-Arabic-Medium.woff") format("woff"), url("../fonts/montserrat-arabic/Montserrat-Arabic-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat-Arabic"; src: url("../fonts/montserrat-arabic/Montserrat-Arabic-SemiBold.woff") format("woff"), url("../fonts/montserrat-arabic/Montserrat-Arabic-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat-Arabic"; src: url("../fonts/montserrat-arabic/Montserrat-Arabic-Bold.woff") format("woff"), url("../fonts/montserrat-arabic/Montserrat-Arabic-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat-Arabic"; src: url("../fonts/montserrat-arabic/Montserrat-Arabic-ExtraBold.woff") format("woff"), url("../fonts/montserrat-arabic/Montserrat-Arabic-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat-Arabic"; src: url("../fonts/montserrat-arabic/Montserrat-Arabic-Black.woff") format("woff"), url("../fonts/montserrat-arabic/Montserrat-Arabic-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

/* Montserrat v9.000 (JulietaUla, SIL OFL 1.1). It has no Arabic glyphs; Arabic text set in it
   falls back to Montserrat-Arabic through --tec-font-latin (documented fallback, C28). */
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat/Montserrat-Bold.woff") format("woff"), url("../fonts/montserrat/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat/Montserrat-ExtraBold.woff") format("woff"), url("../fonts/montserrat/Montserrat-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
	--tec-font: "Montserrat-Arabic", sans-serif;
	--tec-font-latin: "Montserrat", "Montserrat-Arabic", sans-serif;

	--tec-navy: #0B2238;
	--tec-green: #3F7300;
	--tec-green-dark: #325C00;
	--tec-green-mid: #60A000;
	--tec-green-light: #8FC93A;
	--tec-grey: #5F666D;
	--tec-muted: #757575;
	--tec-muted-2: #8A8F93;
	--tec-muted-3: #6B7075;
	--tec-page: #FAFAF7;
	--tec-white: #FFFFFF;
	--tec-surface: #F1F2EC;
	--tec-surface-2: #ECEDE8;
	--tec-border: #E3E4E0;
	--tec-border-2: #E0E2DA;
	--tec-border-3: #C9CBC4;
	--tec-placeholder: #A7A9AB;
	--tec-hairline-dark: rgba(255, 255, 255, 0.12);

	--tec-desktop: 1024px;
	--tec-content: 1200px;
	--tec-pad: 20px;
}

@media (min-width: 1024px) {
	:root {
		/* 120px at 1440 (Figma), shrinking to 24px at 1024. */
		--tec-pad: clamp(24px, calc((100vw - 1200px) / 2), 120px);
	}
}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--tec-page);
	color: var(--tec-navy);
	font-family: var(--tec-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 26.25px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
/* Zero-specificity reset so component classes can set their own list padding/margin. */
:where(ul[role="list"], ol[role="list"], .tec-list-reset) { list-style: none; padding: 0; margin: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* Accessibility. Focus rings are not designed (D2); a visible outline is kept for keyboard users. */
:focus-visible { outline: 2px solid var(--tec-green-mid); outline-offset: 2px; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.tec-skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
	z-index: 1000; top: 8px; inset-inline-start: 8px; padding: 8px 16px;
	background: var(--tec-white); color: var(--tec-navy);
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Layout helpers */
.tec-container {
	width: 100%;
	max-width: calc(var(--tec-content) + 2 * var(--tec-pad));
	margin-inline: auto;
	padding-inline: var(--tec-pad);
}

/* Viewport-specific blocks, used only where desktop and mobile designs differ in structure. */
@media (max-width: 1023.98px) { .tec-d { display: none !important; } }
@media (min-width: 1024px) { .tec-m { display: none !important; } }

/* EN titles are uppercase in Figma (case=UPPER); AR titles have no case. */
.tec-upper { text-transform: uppercase; }
[lang="ar"] .tec-upper { text-transform: none; }

/* Image fills */
.tec-img { display: block; width: 100%; height: 100%; max-width: none; }
.tec-img--cover { object-fit: cover; }
.tec-img--fill { object-fit: fill; }
.tec-img--crop { position: absolute; max-width: none; object-fit: fill; }
/* The design's "B&W" layers (blend mode not exported, C5): reproduced as greyscale. */
.tec-bw { filter: grayscale(1); }

.tec-icon { display: block; flex: none; }

/* Line-height for text whose Figma line height is not exported (lh UNKNOWN). */
.tec-lh-normal { line-height: normal; }