/*
Theme Name: Willem Olaf
Theme URI: https://willemolaf.com
Author: Willem Olaf
Author URI: https://willemolaf.com
Description: Custom WordPress theme for Willem Olaf — geosynthetics products and solutions for Nigeria and West Africa. Mobile-first, performance-optimised, built for B2B lead generation.
Version: 1.1.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: willem-olaf
*/

/* ==========================================================================
   Brand variables — see CLAUDE.md Section 2 (Brand Identity)
   ========================================================================== */
:root {
	/* Colour palette */
	--color-primary: #1B3A6B;      /* Deep Blue — nav, headers, primary buttons */
	--color-accent: #C0502A;       /* Terracotta — CTAs, highlights, hover states */
	--color-white: #FFFFFF;        /* Backgrounds, cards */
	--color-text: #4A4A4A;         /* Charcoal Grey — body text, captions */
	--color-bg-light: #F5F5F5;     /* Light Grey — section backgrounds */
	--color-whatsapp: #25D366;     /* WhatsApp brand green — used only for chat CTA */

	/* Derived tones */
	--color-primary-dark: #142B4F;
	--color-accent-dark: #9E4222;
	--color-border: #E2E2E2;

	/* Typography */
	--font-heading: 'Montserrat', Helvetica, Arial, sans-serif;
	--font-body: 'Open Sans', Helvetica, Arial, sans-serif;
	--font-accent: 'Montserrat', Helvetica, Arial, sans-serif;

	--font-size-base: 16px;
	--font-size-caption: 14px;
	--line-height-body: 1.6;

	/* Layout */
	--container-width: 1200px;
	--radius: 4px;
	--transition: 0.2s ease-in-out;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	color-scheme: light;
}

/* Keep anchored sections clear of the sticky header when jumped to. */
[id] {
	scroll-margin-top: 90px;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-body);
	color: var(--color-text);
	background-color: var(--color-white);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover,
a:focus {
	color: var(--color-accent-dark);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.25;
	margin: 0 0 1rem;
	text-wrap: balance; /* progressive enhancement — ignored by older browsers */
}

p {
	margin: 0 0 1rem;
}

ul, ol {
	padding-left: 1.25rem;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--color-primary);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}