/*
Theme Name: AlphaCon Eng
Theme URI: https://www.alphaconeng.co.za
Author: AlphaCon Holdings (Pty) Ltd t/a AlphaCon Eng
Author URI: https://www.alphaconeng.co.za
Description: Custom multi page theme for AlphaCon Holdings (Pty) Ltd t/a AlphaCon Eng, a civil, structural and project management engineering consultancy. Black, white and grey theme built on Bootstrap 5.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
License: Unlicense
Text Domain: alphacon-eng
*/

:root{
  --ink:#141414;
  --charcoal:#2b2b2c;
  --grey-700:#4d4d4d;
  --grey-500:#8a8a8a;
  --grey-300:#d6d6d6;
  --grey-150:#e9e9e9;
  --grey-100:#f3f3f3;
  --white:#ffffff;
}
*{font-family:'Inter',system-ui,-apple-system,sans-serif;}
body{color:var(--ink);}
h1,h2,h3,h4,h5,.navbar-brand{font-weight:700; letter-spacing:-0.01em;}
p.justify, .about-text p, .svc-text p, .proj-body p.desc, .lede-justify{text-align:justify;}
.fw-800{font-weight:800;}

/* ===== Greyscale component overrides ===== */
.btn-primary{--bs-btn-bg:var(--ink); --bs-btn-border-color:var(--ink); --bs-btn-hover-bg:var(--charcoal); --bs-btn-hover-border-color:var(--charcoal); --bs-btn-active-bg:#000; --bs-btn-active-border-color:#000;}
.btn-outline-primary{--bs-btn-color:var(--ink); --bs-btn-border-color:var(--ink); --bs-btn-hover-bg:var(--ink); --bs-btn-hover-border-color:var(--ink);}
.btn-outline-light{--bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,0.55); --bs-btn-hover-bg:#fff; --bs-btn-hover-color:var(--ink);}
.btn, .btn-lg, .btn-sm{--bs-btn-font-size:0.95rem;}
.btn{--bs-btn-padding-y:0.55rem; --bs-btn-padding-x:1.25rem;}
.btn-lg{--bs-btn-padding-y:0.65rem; --bs-btn-padding-x:1.5rem;}
.btn-sm{--bs-btn-padding-y:0.35rem; --bs-btn-padding-x:0.9rem;}
.bg-primary{background-color:var(--ink) !important;}
.text-primary{color:var(--ink) !important;}
.border-primary{border-color:var(--ink) !important;}
.bg-primary-subtle{background-color:var(--grey-100) !important;}
.text-primary-emphasis{color:var(--charcoal) !important;}
.bg-light{background-color:var(--grey-100) !important;}

.navbar{background:#fff; border-bottom:1px solid var(--grey-150);}
.navbar .nav-link{font-weight:500; font-size:0.95rem; color:var(--grey-700);}
.navbar .nav-link.active, .navbar .nav-link:hover{color:var(--ink) !important;}
.navbar-brand img{height:40px; width:auto;}
.navbar-brand .wordmark{font-weight:800; font-size:1.05rem; letter-spacing:0.01em; color:var(--ink); line-height:1.1;}
.navbar-brand .tagline{font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey-500); display:block;}

.hero-section{background:linear-gradient(135deg, #000 0%, var(--ink) 55%, var(--charcoal) 100%); position:relative;}
.hero-section .hero-h1{font-size:clamp(26px,3.6vw,36px); line-height:1.2;}
.hero-section .hero-lead{font-size:1rem; line-height:1.6;}
.img-contain-box{background:var(--grey-100); display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--grey-150);}
.img-contain-box img{width:100%; height:100%; object-fit:contain;}
.img-cover-box{overflow:hidden;}
.img-cover-box img{width:100%; height:100%; object-fit:cover; display:block;}

.stat-strip{background:#fff; border-bottom:1px solid var(--grey-150);}
.stat-strip .stat-item{border-right:1px solid var(--grey-150);}
.stat-strip .stat-item:last-child{border-right:none;}
.stat-strip .stat-num{font-size:1rem; font-weight:700; color:var(--ink);}
.stat-strip .stat-label{font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--grey-500);}

section{padding-top:5rem; padding-bottom:5rem;}
.section-eyebrow{text-transform:uppercase; letter-spacing:0.1em; font-size:0.78rem; font-weight:700; color:var(--grey-500);}

.icon-circle{width:56px;height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--grey-100); color:var(--ink); font-size:1.5rem; flex-shrink:0; border:1px solid var(--grey-150);}
.feature-card{border:1px solid var(--grey-150); transition:transform .15s ease, box-shadow .15s ease;}
.feature-card:hover{transform:translateY(-4px); box-shadow:0 1rem 2rem rgba(0,0,0,0.08) !important;}

.step-circle{width:38px;height:38px;border-radius:50%; background:var(--ink); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem;}

.nav-pills .nav-link{font-weight:600; color:var(--ink); border:1px solid var(--grey-300); background:#fff;}
.nav-pills .nav-link.active{background-color:var(--ink); border-color:var(--ink); color:#fff;}
.accordion-button:not(.collapsed){background-color:var(--grey-100); color:var(--ink); box-shadow:none;}
.accordion-button:focus{box-shadow:0 0 0 0.2rem rgba(20,20,20,0.12);}
.accordion-button::after{filter:none;}
.accordion-body{padding:0 !important;}
.acc-flex{display:flex; align-items:stretch;}
.acc-flex .acc-thumb{width:160px; flex-shrink:0; overflow:hidden;}
.acc-flex .acc-thumb img{width:100%; height:100%; object-fit:cover; display:block; min-height:120px;}
.acc-flex .acc-text{padding:1.1rem 1.35rem; color:var(--grey-700); font-size:0.95rem; text-align:justify; display:flex; align-items:center;}
@media(max-width:576px){ .acc-flex{flex-direction:column;} .acc-flex .acc-thumb{width:100%; height:150px;} }
.qc-step{background:#fff; border:1px solid var(--grey-150); border-radius:0.5rem; padding:1rem 0.5rem;}

.reg-box{background:var(--grey-100); border-left:3px solid var(--ink); padding:1.1rem 1.4rem;}
.bbbee-badge{display:inline-flex; align-items:center; gap:0.5rem; background:var(--ink); color:#fff; padding:0.5rem 1rem; border-radius:2rem; font-weight:700; font-size:0.85rem;}

.affil-card{border:1px solid var(--grey-150); border-radius:0.5rem; padding:1.25rem 1rem; text-align:center; height:100%;}
.affil-mark{width:64px;height:64px; border:2px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 0.75rem; font-weight:800; font-size:0.85rem; letter-spacing:0.02em;}
.affil-name{font-size:0.82rem; font-weight:600; color:var(--grey-700);}

.project-card img{object-fit:contain; background:var(--grey-100);}
.snapshot-table td{padding:0.4rem 0.25rem; font-size:0.85rem;}
.snapshot-table td.label{color:var(--grey-500); width:42%;}

.cta-section{background:linear-gradient(135deg, #000, var(--ink));}

footer.site-footer{background:var(--ink); color:rgba(255,255,255,0.72);}
footer.site-footer a{color:rgba(255,255,255,0.72);}
footer.site-footer a:hover{color:#fff;}
footer.site-footer h6{color:#fff; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; font-size:0.8rem;}
.footer-logo-badge{background:#fff; border-radius:0.5rem; padding:0.6rem 0.9rem; display:inline-block;}
.footer-logo-badge img{height:44px; width:auto;}

#backToTop{position:fixed; bottom:24px; right:24px; z-index:1050; display:none; width:46px; height:46px; border-radius:50%;}

@media(max-width:991.98px){ section{padding-top:3.25rem; padding-bottom:3.25rem;} }
@media(max-width:575.98px){
  .hero-section .badge{white-space:normal; text-align:left; display:inline-block; line-height:1.4;}
}

.proj-content p{text-align:justify; margin-bottom:1.1rem; font-size:1rem;}
.proj-content h2, .proj-content h3{margin-top:1.5rem; margin-bottom:0.75rem;}
.proj-content img{max-width:100%; border-radius:0.5rem;}

/* ===== Social icons ===== */
.social-icons{display:flex; gap:0.6rem;}
.social-icons a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.social-icons a:hover{background:#fff; color:var(--ink); border-color:#fff;}

/* ===== Homepage teaser sections ===== */
.home-teaser-card{border:1px solid var(--grey-150); border-radius:0.5rem; transition:transform .15s ease, box-shadow .15s ease;}
.home-teaser-card:hover{transform:translateY(-4px); box-shadow:0 1rem 2rem rgba(0,0,0,0.08);}

/* ===== Gallery grid ===== */
.gallery-item{border:1px solid var(--grey-150); border-radius:0.5rem; overflow:hidden; background:#000;}
.gallery-item video{width:100%; height:100%; display:block; background:#000;}
.gallery-empty{border:1px dashed var(--grey-300); border-radius:0.5rem; padding:3rem; text-align:center; color:var(--grey-500);}