/**
 * Theme Name: Somkhele Africa
 * Description: Approved-artifact WordPress presentation for Somkhele Africa | EquipmentCo.
 * Version: 1.3.0
 * Author: Kongoni Group
 * Text Domain: somkhele-africa
 * Requires at least: 6.5
 * Requires PHP: 8.0
 * License: GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

:root { --black:#0f1415; --white:#f2f0ed; --paper:#e9e7e2; --grey:#5d686c; --yellow:#f3af0a; --metal:#6d838e; --line:rgba(15,20,21,.2); --shell:1280px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--black); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
[hidden] { display:none !important; }
.shell { width:min(var(--shell),calc(100% - 48px)); margin-inline:auto; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { z-index:100000; top:8px; left:8px; width:auto; height:auto; padding:12px 16px; clip:auto; background:var(--white); }

.contact-rail { background:var(--yellow); color:var(--black); border-bottom:1px solid var(--black); font-size:.72rem; font-weight:900; letter-spacing:.06em; }
.contact-rail-inner { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.contact-rail span:first-child { font-family:"Arial Narrow",Arial,sans-serif; font-style:italic; letter-spacing:.14em; }
.site-nav { position:sticky; top:0; z-index:30; background:rgba(0,0,0,.96); color:var(--white); border-bottom:1px solid rgba(255,255,255,.16); backdrop-filter:blur(16px); }
.admin-bar .site-nav { top:32px; }
.nav-inner { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.wordmark { display:inline-flex; align-items:baseline; gap:12px; font-weight:900; letter-spacing:.08em; line-height:1; }
.wordmark small { color:var(--yellow); font-size:.58rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.nav-links { display:flex; gap:28px; color:#d4d1ca; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.nav-links a:hover,.nav-links a:focus { color:var(--yellow); text-decoration:underline; text-underline-offset:5px; }

.hero { min-height:760px; display:grid; grid-template-columns:minmax(0,1.42fr) minmax(360px,.58fr); background:var(--black); color:var(--white); border-bottom:4px solid var(--yellow); overflow:hidden; }
.hero-copy { display:flex; align-items:center; padding:88px max(48px,calc((100vw - var(--shell))/2 + 24px)); padding-right:54px; }
.hero-copy-inner { max-width:760px; }
.anchor,.section-kicker { margin:0; color:inherit; font-size:.78rem; font-weight:900; letter-spacing:.22em; text-transform:uppercase; }
.hero .anchor { color:var(--yellow); }
.hero .anchor span { color:var(--white); }
.hero h1 { margin:22px 0 26px; font-family:"Arial Narrow",Arial,sans-serif; font-stretch:condensed; font-size:clamp(4.2rem,7.2vw,8.3rem); line-height:.84; letter-spacing:-.055em; text-transform:uppercase; }
.hero h1 span { color:var(--yellow); }
.hero-lead { max-width:610px; margin:0 0 34px; color:#ddd; font-size:clamp(1rem,1.5vw,1.28rem); line-height:1.55; }
.primary-action,.card-action { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; border:1px solid var(--yellow); background:var(--yellow); color:var(--black); padding:0 22px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.primary-action:hover,.primary-action:focus { background:var(--white); color:var(--black); border-color:var(--white); }
.primary-action.is-disabled { cursor:not-allowed; border-color:#737b7e; background:#737b7e; color:var(--white); }
.hero-proof { display:flex; flex-direction:column; justify-content:flex-end; gap:18px; min-height:760px; padding:70px 48px; background:#151c1e; color:var(--white); border-left:1px solid var(--yellow); }
.hero-proof p { margin:0 auto auto 0; color:var(--yellow); font-family:"Arial Narrow",Arial,sans-serif; font-size:1.35rem; font-style:italic; font-weight:900; letter-spacing:.16em; }
.hero-proof strong,.hero-proof span { display:block; padding-top:18px; border-top:1px solid rgba(242,240,237,.24); text-transform:uppercase; }
.hero-proof strong { font-size:clamp(2rem,2.35vw,2.9rem); line-height:.94; }
.hero-proof span { color:#cbc7bf; font-size:1.15rem; font-weight:700; }

.proof-bar { background:var(--black); color:var(--white); border-bottom:1px solid var(--yellow); }
.proof-grid { display:grid; grid-template-columns:repeat(5,1fr); }
.proof-grid>div { min-height:132px; display:flex; flex-direction:column; justify-content:center; padding:22px 24px; border-left:1px solid rgba(242,240,237,.2); }
.proof-grid>div:last-child { border-right:1px solid rgba(242,240,237,.2); }
.proof-grid strong { color:var(--yellow); font-family:"Arial Narrow",Arial,sans-serif; font-size:2.3rem; line-height:1; }
.proof-grid span { margin-top:7px; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }

.solution-section,.fleet-section,.programme-section,.contact-section { padding:110px 0; }
.solution-grid { display:grid; grid-template-columns:.45fr 1.3fr .9fr; gap:56px; align-items:start; }
.solution-grid h2,.section-heading h2,.programme-grid h2,.contact-section h2 { margin:0; font-family:"Arial Narrow",Arial,sans-serif; font-size:clamp(2.7rem,5vw,5.7rem); line-height:.95; letter-spacing:-.045em; text-transform:uppercase; }
.solution-grid>div:nth-child(2)>p,.section-heading>p,.contact-section>.shell>div>p { color:var(--grey); font-size:1.08rem; line-height:1.7; }
.solution-section .section-kicker,.fleet-section .section-kicker { display:flex; align-items:center; gap:10px; }
.solution-section .section-kicker::before,.fleet-section .section-kicker::before { width:42px; height:6px; content:""; background:var(--yellow); }
.solution-points { border-top:4px solid var(--yellow); }
.solution-points p { display:flex; gap:12px; margin:0; padding:18px 0; border-bottom:1px solid var(--line); font-size:.92rem; font-weight:700; line-height:1.45; }
.solution-points p span { color:#a87300; }

.fleet-section { background:var(--white); border-top:1px solid var(--yellow); }
.section-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:end; margin-bottom:42px; }
.section-heading h2 { margin-top:18px; }
.section-heading>p { margin:0; }
.catalogue-search { max-width:720px; display:flex; align-items:center; gap:10px; margin-bottom:34px; padding-left:16px; border:2px solid var(--black); background:var(--white); box-shadow:5px 5px 0 var(--yellow); }
.catalogue-search input { width:100%; height:52px; border:0; outline-offset:4px; }
.catalogue-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.product-card { display:flex; flex-direction:column; border:1px solid var(--black); background:var(--white); transition:transform .18s ease,box-shadow .18s ease; }
.product-card:hover { transform:translateY(-3px); box-shadow:6px 6px 0 var(--yellow); }
.product-header { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--line); }
.product-id { margin:0; color:var(--grey); font-size:.58rem; letter-spacing:.08em; }
.status { padding:7px 9px; border:1px solid var(--black); font-size:.58rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.status-available { background:var(--yellow); color:var(--black); border-color:var(--yellow); }
.status-validation,.status-hold { background:var(--white); color:var(--black); }
.product-copy { flex:1; display:flex; flex-direction:column; padding:22px; }
.product-technology { margin:0; color:var(--grey); font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.product-copy h3 { margin:24px 0 4px; font-family:"Arial Narrow",Arial,sans-serif; font-size:2.35rem; line-height:.95; }
.product-category { margin:0; color:var(--grey); font-size:.83rem; }
.product-rate { display:flex; flex-direction:column; margin:24px 0 16px; padding:16px 0; border-block:1px solid var(--line); }
.product-rate strong { font-size:1.45rem; }
.product-rate span,.product-source,.hold-note { color:var(--grey); font-size:.7rem; line-height:1.45; }
.product-source { min-height:31px; margin:0 0 16px; }
.card-action { width:100%; min-height:44px; margin-top:auto; border-color:var(--black); background:var(--black); color:var(--white); font-size:.7rem; }
.card-action:hover,.card-action:focus { background:var(--yellow); color:var(--black); border-color:var(--yellow); }
.hold-note { min-height:44px; display:flex; align-items:center; margin:auto 0 0; border-left:3px solid var(--black); padding-left:12px; }
.empty-state { margin:30px 0 0; padding:30px; border:1px solid var(--line); text-align:center; }
.source-status { margin:22px 0 0; color:var(--grey); font-size:.7rem; font-weight:700; letter-spacing:.04em; }

.programme-section { background:var(--black); color:var(--white); border-top:4px solid var(--yellow); }
.programme-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; }
.programme-grid h2 { margin-top:18px; }
.programme-items { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(255,255,255,.22); border-left:1px solid rgba(255,255,255,.22); }
.programme-section .section-kicker,.programme-items article>span { color:var(--yellow); }
.programme-items article { min-height:220px; padding:28px; border-right:1px solid rgba(255,255,255,.22); border-bottom:1px solid rgba(255,255,255,.22); }
.programme-items h3 { margin:42px 0 10px; font-size:1.25rem; text-transform:uppercase; }
.programme-items p { margin:0; color:#ccc; line-height:1.6; }

.contact-section { background:var(--yellow); color:var(--black); border-top:1px solid var(--black); }
.contact-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(520px,1.2fr); gap:70px; align-items:start; }
.contact-section h2 { max-width:700px; margin:18px 0 22px; }
.contact-section>.shell>div>p { max-width:650px; color:var(--black); }
.contact-section .primary-action { margin-top:18px; background:var(--black); color:var(--white); border-color:var(--black); }
.contact-section .primary-action:hover,.contact-section .primary-action:focus { background:var(--white); color:var(--black); border-color:var(--white); }
.secondary-action { display:block; width:max-content; margin-top:18px; border-bottom:2px solid var(--black); padding-bottom:3px; font-size:.78rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.contact-intro address { margin-top:42px; border-top:4px solid var(--black); font-style:normal; }
address p { display:grid; grid-template-columns:.35fr .65fr; gap:24px; margin:0; padding:20px 0; border-bottom:1px solid var(--line); }
address span { font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
address strong { font-size:.95rem; line-height:1.45; }
.crm-form-shell { scroll-margin-top:110px; border:1px solid var(--black); background:var(--white); color:var(--black); box-shadow:10px 10px 0 var(--black); }
.crm-form-shell:focus { outline:3px solid var(--black); outline-offset:5px; }
.crm-form-heading { padding:26px 28px; border-bottom:1px solid var(--black); background:var(--black); color:var(--white); }
.crm-form-heading .section-kicker { color:var(--yellow); }
.crm-form-heading h3 { margin:14px 0 8px; font-family:"Arial Narrow",Arial,sans-serif; font-size:2.25rem; line-height:1; text-transform:uppercase; }
.crm-form-heading p:last-child { margin:0; color:#cbc7bf; font-size:.8rem; line-height:1.5; }
.crm-webform { display:block; width:100%; min-height:870px; border:0; background:var(--white); }
.form-fallback,.form-source,.form-unavailable { margin:0; padding:16px 24px; border-top:1px solid var(--line); font-size:.7rem; line-height:1.5; }
.form-fallback a { font-weight:900; text-decoration:underline; text-underline-offset:3px; }
.form-source { color:var(--grey); }
.form-unavailable { min-height:220px; display:flex; align-items:center; font-weight:700; }
.site-footer { background:var(--black); color:#ccc; padding:30px 0; border-top:1px solid var(--yellow); }
.footer-grid { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.footer-grid p { margin:0; font-size:.68rem; line-height:1.5; }
.footer-grid strong,.footer-grid span { color:var(--white); letter-spacing:.06em; }
.legal-note { margin-top:22px; border-top:1px solid rgba(242,240,237,.2); padding-top:18px; color:#a9a59d; font-size:.62rem; line-height:1.55; }

@media (max-width:1040px) {
	.hero { grid-template-columns:1fr; }
	.hero-copy { padding:78px 40px; }
	.hero-proof { min-height:420px; }
	.proof-grid { grid-template-columns:repeat(3,1fr); }
	.solution-grid { grid-template-columns:1fr; gap:30px; }
	.section-heading,.programme-grid,.contact-grid { grid-template-columns:1fr; }
	.crm-form-shell { max-width:700px; }
	.catalogue-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.nav-links { display:none; }
}
@media (max-width:782px) { .admin-bar .site-nav { top:46px; } }
@media (max-width:720px) {
	.shell { width:min(100% - 28px,var(--shell)); }
	.contact-rail-inner { justify-content:center; text-align:center; padding:8px 0; }
	.contact-rail-inner span:first-child { display:none; }
	.wordmark { flex-direction:column; align-items:flex-start; gap:4px; }
	.hero { min-height:auto; }
	.hero-copy { padding:66px 22px; }
	.hero h1 { font-size:clamp(3.5rem,18vw,5.5rem); }
	.hero-proof { min-height:340px; padding:40px 22px; }
	.proof-grid { grid-template-columns:repeat(2,1fr); }
	.proof-grid>div { min-height:96px; padding:17px; }
	.proof-grid>div:last-child { grid-column:1 / -1; }
	.solution-section,.fleet-section,.programme-section,.contact-section { padding:76px 0; }
	.catalogue-grid,.programme-items { grid-template-columns:1fr; }
	.section-heading { gap:28px; }
	.contact-grid { gap:50px; }
	address p { grid-template-columns:1fr; gap:7px; }
	.footer-grid { align-items:flex-start; flex-direction:column; }
}
