/*
Theme Name:   Inflix Engineering
Theme URI:    https://www.inflixengineering.co.tz/
Author:       Inflix Engineering Company Limited
Description:  Child theme of Extice, customised for Inflix Engineering Company Limited — a Tanzanian civil and building contractor. All site-specific customisation lives here so the parent theme can be updated safely.
Template:     inflix
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  inflix
*/

/* ==========================================================================
   1. Design tokens
   Sampled directly from the company profile artwork so the site matches the
   printed identity: navy wordmark, red hard hat.
   ========================================================================== */

:root {
	/* Brand — exact values taken from the profile PDF vector artwork */
	--inflix-red: #E02025;
	--inflix-red-dark: #B81A1E;
	--inflix-navy: #272F69;
	--inflix-navy-dark: #1B2149;
	--inflix-navy-deep: #141936;

	/* Neutrals */
	--inflix-ink: #1A1A1A;
	--inflix-text: #4A4E5A;
	--inflix-text-light: #8A8F9C;
	--inflix-border: #E3E6ED;
	--inflix-bg: #FFFFFF;
	--inflix-bg-light: #F5F7FA;

	/* Layout */
	--inflix-container: 1410px;
	--inflix-radius: 3px;

	/* Type */
	--inflix-font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--inflix-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================================================
   2. Base typography
   ========================================================================== */

body {
	font-family: var(--inflix-font-body);
	color: var(--inflix-text);
	font-size: 16px;
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--inflix-font-heading);
	color: var(--inflix-navy);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

h1, .entry-title { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); }

a { color: var(--inflix-navy); }
a:hover, a:focus { color: var(--inflix-red); }

/* Small uppercase eyebrow label used above section headings. */
.inflix-eyebrow {
	font-family: var(--inflix-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--inflix-red);
	display: inline-block;
	margin-bottom: 0.75rem;
}

/* ==========================================================================
   3. Accessibility
   Measured contrast ratios for the brand palette:
     red on white / white on red .... 4.77:1  AA pass (normal text)
     navy on white / white on navy .. 12.38:1 AA pass
     body text on white ............. 8.31:1  AA pass
     red on navy .................... 2.59:1  FAILS — never pair these two.
   Red text must sit on white or a very light neutral; on navy use white.
   Focus states are made explicit because the parent theme suppresses several.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--inflix-red);
	outline-offset: 2px;
}

.skip-link:focus {
	background: var(--inflix-navy);
	color: #fff;
	padding: 0.75rem 1.25rem;
	z-index: 100000;
}