/*
Theme Name: Shire Construction
Theme URI: https://shireconstruction.so
Author: Shire Construction Ltd
Author URI: https://shireconstruction.so
Description: Custom WordPress theme for Shire Construction Ltd, a civil & infrastructure engineering company in Somalia. Converted from the original static HTML site, with full editable content via custom post types for Projects, Equipment, Careers, News, Clients and Testimonials.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shire
*/

:root{
  --ink:#16241C;
  --forest:#123524;
  --forest2:#0D2A1B;
  --leaf:#2FA84F;
  --leaf2:#1F7A3A;
  --gold:#E8B93A;
  --gold2:#CE9F26;
  --bg:#FFFFFF;
  --stone:#7A8580;
  --soft:#F4F7F4;
}
html{scroll-behavior:smooth}
body{background:var(--bg);font-family:'IBM Plex Sans',sans-serif;color:var(--ink)}
.font-display{font-family:'Poppins',sans-serif}
.font-mono{font-family:'IBM Plex Mono',monospace}
.eyebrow{font-family:'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem}
.text-gold{color:var(--gold)}
.bg-gold{background:var(--gold)}
.border-gold{border-color:var(--gold)}
.bg-forest{background:var(--forest)}
.bg-forest2{background:var(--forest2)}
.bg-leaf{background:var(--leaf)}
.text-leaf{color:var(--leaf)}
.text-leaf2{color:var(--leaf2)}
.bg-soft{background:var(--soft)}

/* ---------- Header / Nav ---------- */
#site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;box-shadow:0 2px 18px rgba(18,53,36,.07);transition:box-shadow .3s ease}
#site-header.scrolled{box-shadow:0 8px 28px rgba(18,53,36,.14)}
.nav-link{position:relative;color:var(--ink);opacity:.82;transition:opacity .2s ease;font-weight:500}
.nav-link:hover,.nav-link.active{opacity:1;color:var(--leaf2)}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--leaf);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;background:#fff;border:1px solid #EAEFEA;box-shadow:0 24px 60px rgba(18,53,36,.16)}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega a{transition:background .15s ease;color:var(--ink)}
.mega a:hover{background:var(--soft);color:var(--leaf2)}

#mobile-menu{transition:max-height .35s ease, opacity .3s ease;background:#fff;max-height:0;overflow:hidden;opacity:0}

/* ---------- Hero Slider ---------- */
.hero-slider{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--forest)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;}
.hero-slide.active{opacity:1;z-index:1}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(18,53,36,.55) 0%, rgba(13,42,27,.45) 40%, rgba(11,23,15,.92) 100%)}
.hero-copy{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end}
.hero-dots{position:absolute;bottom:28px;right:28px;z-index:6;display:flex;gap:10px}
.hero-dot{width:10px;height:10px;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer;transition:background .2s ease, width .2s ease}
.hero-dot.active{background:var(--gold);width:26px}

/* ---------- Page hero banners ---------- */
.page-hero{position:relative;min-height:44vh;display:flex;align-items:flex-end;overflow:hidden}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(18,53,36,.5) 0%, rgba(18,53,36,.55) 30%, rgba(11,23,15,.94) 100%)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---------- Cards ---------- */
.card-hover{transition:transform .35s ease, box-shadow .35s ease}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 20px 45px -16px rgba(18,53,36,.25)}

/* ---------- Small square thumb cards ---------- */
.thumb-card{transition:transform .3s ease, box-shadow .3s ease}
.thumb-card:hover{transform:translateY(-4px)}
.thumb-card .thumb-img{position:relative;overflow:hidden}
.thumb-card .thumb-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(18,53,36,0) 40%, rgba(18,53,36,.55) 100%);opacity:0;transition:opacity .3s ease}
.thumb-card:hover .thumb-img::after{opacity:1}
.thumb-card img{transition:transform .5s ease}
.thumb-card:hover img{transform:scale(1.08)}

/* ---------- Glass ---------- */
.glass{background:rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14)}

/* ---------- Marquee ---------- */
.marquee-track{animation:marquee 30s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Blueprint texture ---------- */
.blueprint{background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);background-size:44px 44px}

/* ---------- Filter pills ---------- */
.filter-pill{transition:background .2s ease, color .2s ease, border-color .2s ease;font-weight:500;cursor:pointer}
.filter-pill.active{background:var(--leaf);color:#fff;border-color:var(--leaf)}

/* ---------- Utility ---------- */
.stat-num{font-variant-numeric:tabular-nums}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Footer bottom gold strip ---------- */
.footer-strip{height:4px;background:linear-gradient(90deg, var(--gold), var(--gold2))}

/* ---------- Page transition fade-in ---------- */
body{animation:pageFadeIn .5s ease}
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}

/* ---------- WordPress-specific ---------- */
.wp-block-image img,.entry-content img{max-width:100%;height:auto}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.admin-bar #site-header{top:32px}
@media (max-width:782px){.admin-bar #site-header{top:46px}}

@media (prefers-reduced-motion: reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .marquee-track{animation:none}
  .hero-slide{transition:none}
  body{animation:none}
}