/*
Theme Name: Afri Cranes
Theme URI: https://afri-cranes.co.za/
Author: Custom theme
Description: Lightweight custom WordPress theme for Afri Cranes, based on the approved static website mockup.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: afri-cranes
*/

:root {
  --green:#80d900;
  --green-dark:#61ad00;
  --ink:#0d151c;
  --slate:#18232c;
  --muted:#64717b;
  --paper:#f5f7f4;
  --white:#fff;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; color:var(--ink); font-family:Inter,Arial,sans-serif; background:var(--white); line-height:1.6; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1180px,calc(100% - 40px)); margin:auto; }
.eyebrow { margin:0 0 10px; color:var(--green-dark); font-size:.8rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3 { margin:0; font-family:"Barlow Condensed",Impact,sans-serif; line-height:.95; text-transform:uppercase; }
h1 { font-size:clamp(4rem,9vw,8.2rem); letter-spacing:-.035em; }
h2 { font-size:clamp(2.8rem,5vw,4.7rem); letter-spacing:-.025em; }
h3 { font-size:1.8rem; }
p { margin:0 0 20px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  padding:0 26px; border:2px solid var(--green); background:var(--green);
  color:var(--ink); font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  transition:.2s ease; cursor:pointer;
}
.btn:hover,.btn:focus-visible { transform:translateY(-2px); background:#95ef13; border-color:#95ef13; }
.btn-outline { margin-left:10px; border-color:rgba(255,255,255,.55); background:transparent; color:#fff; }
.btn-outline:hover,.btn-outline:focus-visible { border-color:#fff; background:#fff; color:var(--ink); }

.site-header {
  position:fixed; z-index:999; inset:0 0 auto; background:rgba(13,21,28,.92);
  border-bottom:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px);
}
.admin-bar .site-header { top:32px; }
.site-nav { display:flex; height:88px; align-items:center; justify-content:space-between; }
.logo { width:126px; height:72px; object-fit:contain; }
.custom-logo-link { display:block; }
.custom-logo { width:126px; max-height:72px; object-fit:contain; }
.navlinks { display:flex; align-items:center; gap:30px; color:#fff; font-size:.84rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.navlinks a:hover,.navlinks a:focus-visible { color:var(--green); }
.nav-cta { padding:11px 16px; background:var(--green); color:var(--ink)!important; }
.menu-toggle { display:none; border:0; background:transparent; color:#fff; font-size:1.7rem; cursor:pointer; }

.hero { position:relative; display:grid; min-height:820px; align-items:end; overflow:hidden; background:var(--ink); color:#fff; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.9) contrast(1.05); }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,12,16,.96) 0%,rgba(6,12,16,.68) 47%,rgba(6,12,16,.16) 80%),linear-gradient(0deg,rgba(6,12,16,.85),transparent 50%); }
.hero-content { position:relative; z-index:2; max-width:850px; padding:190px 0 100px; }
.hero .eyebrow { color:var(--green); }
.hero h1 span { display:block; color:var(--green); }
.lead { max-width:650px; margin:24px 0 35px; color:#d7dde1; font-size:1.15rem; }

.stats { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #dfe5dd; background:#fff; }
.stat { padding:35px 8%; border-right:1px solid #dfe5dd; }
.stat:last-child { border:0; }
.stat strong { display:block; font-family:"Barlow Condensed"; font-size:2rem; line-height:1; text-transform:uppercase; }
.stat span { color:var(--muted); font-size:.84rem; }

section { padding:110px 0; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; }
.about-copy p:not(.eyebrow) { color:var(--muted); font-size:1.04rem; }
.about-media { position:relative; min-height:510px; }
.about-media img { width:88%; height:480px; object-fit:cover; }
.about-tag { position:absolute; right:0; bottom:0; width:230px; padding:28px; background:var(--green); }
.about-tag strong { display:block; font-family:"Barlow Condensed"; font-size:2.5rem; line-height:.9; text-transform:uppercase; }

.services { background:var(--paper); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:55px; }
.section-head p:last-child { max-width:440px; color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { min-height:310px; padding:34px; background:#fff; border-top:5px solid var(--green); }
.card-num { color:var(--green-dark); font-family:"Barlow Condensed"; font-size:1.35rem; font-weight:800; }
.card h3 { margin:46px 0 17px; }
.card p { color:var(--muted); }

.gallery { background:var(--ink); color:#fff; }
.gallery .section-head p:last-child { color:#aeb8be; }
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:220px; gap:12px; }
.shot { overflow:hidden; margin:0; }
.shot img { width:100%; height:100%; object-fit:cover; transition:.45s ease; }
.shot:hover img { transform:scale(1.04); }
.shot:nth-child(1) { grid-column:span 7; grid-row:span 2; }
.shot:nth-child(2) { grid-column:span 5; }
.shot:nth-child(3) { grid-column:span 5; }
.shot:nth-child(n+4) { grid-column:span 4; }

.contact { padding:0; background:var(--green); }
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; }
.contact-copy { padding:90px max(40px,calc((100vw - 1180px)/2)); padding-right:70px; }
.contact-copy .eyebrow { color:var(--ink); }
.contact-copy h2 { margin-bottom:30px; }
.details { display:grid; gap:18px; margin-top:35px; }
.details small { display:block; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.details a,.details address { font-size:1.08rem; font-style:normal; }

.quote-form { padding:80px max(40px,calc((100vw - 1180px)/2)); padding-left:70px; background:var(--slate); color:#fff; }
.quote-form h3 { margin-bottom:28px; font-size:2.4rem; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.quote-form label { display:block; margin-bottom:7px; color:#bbc4c9; font-size:.78rem; font-weight:700; text-transform:uppercase; }
.quote-form input,.quote-form textarea { width:100%; border:1px solid #3a4853; background:#111b23; color:#fff; padding:15px; font:inherit; outline:none; }
.quote-form input:focus,.quote-form textarea:focus { border-color:var(--green); }
.quote-form textarea { min-height:130px; resize:vertical; }
.full { grid-column:1/-1; }
.quote-form .btn { margin-top:20px; border:0; }
.hp-field { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.form-notice { padding:14px 16px; margin:0 0 22px; font-weight:700; }
.form-notice.success { background:#dff5c0; color:#173000; }
.form-notice.error { background:#ffd9d9; color:#5d1010; }

.site-footer { padding:28px 0; background:#081016; color:#8e9aa2; font-size:.8rem; }
.site-footer .wrap { display:flex; justify-content:space-between; gap:20px; }

.generic-page { min-height:70vh; padding:150px 0 90px; }
.generic-page .entry-content { max-width:850px; }
.generic-page h1 { font-size:clamp(3rem,7vw,5rem); margin-bottom:30px; }

.posts-list { display:grid; gap:30px; }
.post-card { padding:28px; background:var(--paper); border-top:4px solid var(--green); }
.post-card h2 { font-size:2rem; margin-bottom:12px; }
.post-meta { color:var(--muted); font-size:.85rem; margin-bottom:12px; }

@media (max-width:800px) {
  html { scroll-padding-top:74px; }
  .admin-bar .site-header { top:46px; }
  .site-nav { height:74px; }
  .logo,.custom-logo { width:102px; height:60px; }
  .menu-toggle { display:block; }
  .navlinks { position:absolute; inset:74px 0 auto; display:none; flex-direction:column; align-items:flex-start; padding:26px 20px; background:#0d151c; }
  .admin-bar .navlinks { top:74px; }
  .navlinks.open { display:flex; }
  .hero { min-height:720px; }
  .hero-content { padding:150px 0 75px; }
  .btn { width:100%; }
  .btn-outline { margin:10px 0 0; }
  .stats { grid-template-columns:1fr; }
  .stat { padding:22px 20px; border-right:0; border-bottom:1px solid #dfe5dd; }
  section { padding:75px 0; }
  .about-grid,.contact-grid { grid-template-columns:1fr; }
  .about-grid { gap:55px; }
  .about-media { min-height:400px; }
  .about-media img { height:390px; }
  .section-head { display:block; }
  .section-head p:last-child { margin-top:20px; }
  .cards { grid-template-columns:1fr; }
  .gallery-grid { grid-auto-rows:180px; }
  .shot:nth-child(n) { grid-column:span 6; grid-row:span 1; }
  .shot:nth-child(1) { grid-column:span 12; grid-row:span 2; }
  .contact-copy,.quote-form { padding:70px 20px; }
  .fields { grid-template-columns:1fr; }
  .full { grid-column:auto; }
  .site-footer .wrap { display:block; }
}