/*
Theme Name: Wasif Controls
Theme URI: https://sohaibwasif.com
Author: Built for Sohaib Wasif
Description: A personal site theme for a project management and controls professional. Drawing-office visual language: hairline frames, surveyor registration marks, a title-block footer, and an S-curve motif. Includes a Sector Notes post type for commentary on infrastructure, energy, mining and coal.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wasif-controls
Tags: one-column, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   1. Fonts
   ============================================================ */
@font-face{font-family:'Archivo';src:url('assets/fonts/Archivo.ttf') format('truetype');font-weight:100 900;font-display:swap;}
@font-face{font-family:'PlexMono';src:url('assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'PlexMono';src:url('assets/fonts/IBMPlexMono-Medium.ttf') format('truetype');font-weight:500;font-display:swap;}
@font-face{font-family:'PlexMono';src:url('assets/fonts/IBMPlexMono-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap;}
@font-face{font-family:'PlexMono';src:url('assets/fonts/IBMPlexMono-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}

/* ============================================================
   2. Tokens
   ============================================================ */
:root{
  --graphite:#14181C;
  --slate:#232B33;
  --concrete:#C9CFD4;
  --paper:#F2F4F5;
  --hivis:#F2A413;
  --survey:#4FB3C4;
  --rule:rgba(201,207,212,.20);
  --rule-dark:rgba(20,24,28,.16);
  --measure:34rem;
  --gutter:clamp(20px,5vw,64px);
  --section:clamp(64px,9vw,124px);
}

/* ============================================================
   3. Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
body{margin:0;background:var(--graphite);color:var(--paper);
  font-family:'PlexMono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--hivis);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:.28em;}
:focus-visible{outline:2px solid var(--hivis);outline-offset:3px;}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:16px;top:16px;z-index:99;background:var(--hivis);color:var(--graphite);padding:10px 16px;}

h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;margin:0;
  font-variation-settings:'wdth' 82,'wght' 800;letter-spacing:-.02em;line-height:1.02;text-wrap:balance;}
h1{font-size:clamp(2.6rem,7vw,5.4rem);}
h2{font-size:clamp(2rem,4.6vw,3.4rem);}
h3{font-size:clamp(1.35rem,2.4vw,1.9rem);font-variation-settings:'wdth' 86,'wght' 700;}
h4{font-size:1.15rem;font-variation-settings:'wdth' 88,'wght' 700;}
p{margin:0 0 1.15em;}
strong{font-weight:600;}
em.hi,.hi{font-style:normal;color:var(--hivis);}

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter);}
.narrow{max-width:var(--measure);}

/* Eyebrow / mono utility label */
.eyebrow{font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;
  color:var(--hivis);display:flex;gap:.85em;align-items:center;flex-wrap:wrap;margin-bottom:1.6em;}
.eyebrow .sep{color:var(--rule);}
.flag{background:var(--hivis);color:var(--graphite);padding:.3em .7em;font-weight:700;letter-spacing:.1em;}

/* ============================================================
   4. Header
   ============================================================ */
.site-header{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50;
  background:rgba(20,24,28,.94);backdrop-filter:blur(8px);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:18px;}
.brand{display:flex;flex-direction:column;gap:2px;color:var(--paper);}
.brand:hover{text-decoration:none;}
.brand .name{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 84,'wght' 700;
  font-size:1.24rem;letter-spacing:-.015em;line-height:1;}
.brand .role{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(201,207,212,.5);}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--paper);
  font-family:inherit;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;cursor:pointer;}
.main-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;}
.main-nav a{color:var(--paper);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;}
.main-nav a:hover,.main-nav .current-menu-item > a{color:var(--hivis);text-decoration:none;}
@media (max-width:860px){
  .nav-toggle{display:block;}
  .main-nav{display:none;width:100%;}
  .main-nav.open{display:block;}
  .header-inner{flex-wrap:wrap;}
  .main-nav ul{flex-direction:column;gap:0;padding-bottom:14px;}
  .main-nav li{border-top:1px solid var(--rule);}
  .main-nav a{display:block;padding:15px 0;}
}

/* ============================================================
   5. Hero
   ============================================================ */
.hero{position:relative;padding-block:clamp(56px,10vw,120px) clamp(80px,12vw,150px);overflow:hidden;}
.hero .wrap{position:relative;z-index:2;}
.hero h1{max-width:16ch;}
.hero .lede{margin-top:1.9em;max-width:var(--measure);color:rgba(201,207,212,.74);}
.hero-curve{position:absolute;left:0;right:0;bottom:0;height:min(46vh,420px);z-index:1;
  pointer-events:none;opacity:.9;}
.hero-curve svg{width:100%;height:100%;}
.hero-curve::after{content:'';position:absolute;inset:auto 0 0 0;height:90px;
  background:linear-gradient(to bottom,transparent,var(--graphite));}
.curve-line{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.2s cubic-bezier(.2,.7,.3,1) .25s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce){.curve-line{animation:none;stroke-dashoffset:0;}}

.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:2.4em;}
.btn{display:inline-flex;align-items:center;gap:.7em;padding:15px 26px;font-weight:600;
  letter-spacing:.04em;border:1px solid var(--hivis);color:var(--hivis);}
.btn:hover{background:var(--hivis);color:var(--graphite);text-decoration:none;}
.btn--solid{background:var(--hivis);color:var(--graphite);}
.btn--solid:hover{background:transparent;color:var(--hivis);}
.btn .dot{width:9px;height:9px;background:currentColor;flex:none;}

/* ============================================================
   6. Sections
   ============================================================ */
.section{padding-block:var(--section);border-top:1px solid var(--rule);}
.section--light{background:var(--paper);color:var(--graphite);border-top-color:var(--rule-dark);}
.section--light a{color:#9a6600;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(20px,4vw,56px);flex-wrap:wrap;margin-bottom:clamp(32px,5vw,56px);}
.section-head h2{flex:1 1 420px;max-width:20ch;margin:0;}
.section-head > :not(h2){flex:0 1 330px;}

/* Sector list (typographic, no fake data bars) */
.sector-list{border-top:1px solid var(--rule);}
.section--light .sector-list{border-top-color:var(--rule-dark);}
.sector-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:clamp(20px,3vw,30px) 0;border-bottom:1px solid var(--rule);}
.section--light .sector-row{border-bottom-color:var(--rule-dark);}
.sector-row .label{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 80,'wght' 800;
  font-size:clamp(2rem,5.4vw,4.2rem);letter-spacing:-.02em;line-height:1;}
.sector-row .meta{font-size:.86rem;color:rgba(201,207,212,.5);text-align:right;}
.section--light .sector-row .meta{color:rgba(20,24,28,.55);}

/* Scope rows (WBS-coded) */
.scope{border-top:1px solid var(--rule-dark);}
.scope-row{display:flex;gap:clamp(14px,3vw,28px);align-items:baseline;
  padding:clamp(18px,2.6vw,26px) 0;border-bottom:1px solid var(--rule-dark);}
.scope-row .code{color:var(--hivis);font-weight:600;font-size:.95rem;width:3.4em;flex:none;}
.scope-row .body{flex:1;}
.scope-row h3{margin-bottom:.35em;}
.scope-row p{margin:0;color:rgba(20,24,28,.66);font-size:.94rem;}

/* Notes grid */
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);}
.note-card{background:var(--graphite);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:14px;}
.note-card:hover{background:var(--slate);}
.note-card .kicker{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--hivis);}
.note-card h3{color:var(--paper);}
.note-card a{color:inherit;}
.note-card .dek{color:rgba(201,207,212,.62);font-size:.92rem;margin:0;}
.note-card .stamp{margin-top:auto;font-size:.78rem;color:rgba(201,207,212,.42);letter-spacing:.08em;}

/* Stat pair */
.stats{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border-block:1px solid var(--rule);}
.stat{background:var(--graphite);flex:1 1 220px;padding:clamp(24px,3vw,34px);}
.stat .fig{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 72,'wght' 900;
  color:var(--hivis);font-size:clamp(2.6rem,6vw,4.4rem);line-height:.9;letter-spacing:-.03em;}
.stat .cap{margin-top:.7em;font-size:.85rem;color:rgba(201,207,212,.5);}

/* ============================================================
   7. Article / editor content
   ============================================================ */
.entry{padding-block:var(--section);}
.entry-header{border-bottom:1px solid var(--rule);padding-bottom:clamp(28px,4vw,44px);
  margin-bottom:clamp(32px,4vw,52px);}
.entry-meta{display:flex;gap:.85em;flex-wrap:wrap;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(201,207,212,.5);margin-top:1.4em;}
.entry-content{max-width:var(--measure);font-size:1.02rem;}
.entry-content h2{margin:1.9em 0 .6em;}
.entry-content h3{margin:1.7em 0 .5em;}
.entry-content ul,.entry-content ol{padding-left:1.3em;margin:0 0 1.3em;}
.entry-content li{margin-bottom:.5em;}
.entry-content blockquote{margin:2em 0;padding-left:1.4em;border-left:3px solid var(--hivis);
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 88,'wght' 500;
  font-size:1.3rem;line-height:1.3;color:var(--paper);}
.entry-content code{background:var(--slate);padding:.15em .45em;font-size:.9em;}
.entry-content figure{margin:2em 0;}
.entry-content figcaption{font-size:.82rem;color:rgba(201,207,212,.5);margin-top:.7em;}
.entry-content table{width:100%;border-collapse:collapse;margin:2em 0;font-size:.92rem;}
.entry-content th,.entry-content td{text-align:left;padding:.7em .8em;border-bottom:1px solid var(--rule);}
.entry-content th{color:var(--hivis);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.78rem;}
.source-note{font-size:.85rem;color:rgba(201,207,212,.45);border-top:1px solid var(--rule);
  padding-top:1.2em;margin-top:2.4em;max-width:var(--measure);}

.pager{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:26px;margin-top:var(--section);}
.pager span{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(201,207,212,.45);margin-bottom:.5em;}

/* ============================================================
   8. Title-block footer
   ============================================================ */
.site-footer{border-top:1px solid var(--rule);}
.titleblock{display:flex;flex-wrap:wrap;}
.tb{flex:1 1 200px;padding:clamp(22px,3vw,30px) 0;padding-right:26px;
  border-right:1px solid var(--rule);}
.tb:last-child{border-right:0;}
.tb .k{display:block;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(201,207,212,.42);margin-bottom:.6em;}
.tb .v{font-weight:600;font-size:.98rem;}
.colophon{border-top:1px solid var(--rule);padding-block:20px;font-size:.78rem;
  color:rgba(201,207,212,.38);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
@media (max-width:640px){.tb{flex-basis:100%;border-right:0;border-bottom:1px solid var(--rule);}}

/* ============================================================
   9. Registration marks (drawing frame)
   ============================================================ */
.tick-frame{position:relative;}
.tick-frame::before,.tick-frame::after{content:'';position:absolute;top:0;width:16px;height:16px;
  border-top:2px solid var(--hivis);pointer-events:none;}
.tick-frame::before{left:0;border-left:2px solid var(--hivis);}
.tick-frame::after{right:0;border-right:2px solid var(--hivis);}

/* ============================================================
   10. Forms, alignment, WP core classes
   ============================================================ */
input[type=text],input[type=email],input[type=search],textarea{
  background:var(--slate);border:1px solid var(--rule);color:var(--paper);
  font-family:inherit;font-size:1rem;padding:13px 15px;width:100%;}
.alignwide{max-width:1180px;}
.alignfull{max-width:none;}
.aligncenter{margin-inline:auto;}
.alignleft{float:left;margin:0 1.5em 1em 0;}
.alignright{float:right;margin:0 0 1em 1.5em;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);}
.wp-caption-text{font-size:.82rem;color:rgba(201,207,212,.5);}
.sticky .entry-header{border-left:3px solid var(--hivis);padding-left:20px;}

/* ============================================================
   11. Narrow screens
   ============================================================ */
@media (max-width:760px){
  .hero-curve{height:min(30vh,240px);opacity:.45;}
  .hero .lede{position:relative;}
  .sector-row{flex-direction:column;align-items:flex-start;gap:6px;}
  .sector-row .meta{text-align:left;}
  .section-head h2{max-width:none;}
  .scope-row{flex-direction:column;gap:8px;}
  .scope-row .code{width:auto;}
}

/* ============================================================
   12. Comments, search, widgets
   ============================================================ */
.comments .comment{border-top:1px solid var(--rule);padding:22px 0;}
.comments .comment-meta{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(201,207,212,.45);margin-bottom:.8em;}
.comments .comment-author a{color:var(--paper);}
.comments .children{list-style:none;margin:0 0 0 26px;padding:0;}
.comment-form label{display:block;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(201,207,212,.5);margin:16px 0 7px;}
.comment-form .btn{cursor:pointer;background:var(--hivis);color:var(--graphite);border:1px solid var(--hivis);}
.comment-reply-title{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 86,'wght' 700;
  font-size:1.4rem;margin-top:2em;}
.search-form{max-width:var(--measure);}
.footer-widgets{padding-block:clamp(28px,4vw,44px);border-bottom:1px solid var(--rule);}
.footer-widget-title{font-size:1rem;font-variation-settings:'wdth' 88,'wght' 700;margin-bottom:.8em;}
.footer-widget ul{list-style:none;margin:0;padding:0;}
.footer-widget li{padding:5px 0;}

/* ============================================================
   13. Graphics
   ============================================================ */
.graphic{width:100%;}
.graphic svg{width:100%;height:auto;display:block;overflow:visible;}
.graphic .g-rule line{stroke:var(--rule);stroke-width:1;}
.section--light .graphic .g-rule line{stroke:var(--rule-dark);}
.graphic .g-bar rect{fill:var(--hivis);}
.graphic .g-bar-mute rect{fill:var(--concrete);opacity:.24;}
.section--light .graphic .g-bar-mute rect{fill:var(--graphite);opacity:.16;}
.graphic .g-link path{stroke:var(--survey);stroke-width:1.5;fill:none;}
.graphic .g-float line{stroke:var(--concrete);stroke-width:1.5;opacity:.5;}
.section--light .graphic .g-float line{stroke:var(--graphite);opacity:.4;}
.graphic .g-marker line{stroke:var(--hivis);stroke-width:1.5;}
.graphic .g-dot{fill:var(--hivis);}
.graphic .g-dot--alt{fill:var(--survey);}
.graphic .g-curve-plan{stroke:var(--concrete);stroke-width:2;fill:none;
  stroke-dasharray:8 7;opacity:.7;}
.section--light .graphic .g-curve-plan{stroke:var(--graphite);opacity:.45;}
.graphic .g-curve-actual{stroke:var(--hivis);stroke-width:3.5;fill:none;}
.graphic .g-curve-cost{stroke:var(--survey);stroke-width:2.5;fill:none;}
.graphic .g-glyph{stroke:var(--hivis);stroke-width:2;fill:none;
  stroke-linecap:square;stroke-linejoin:miter;}
.graphic .g-label{font-family:'PlexMono',monospace;font-size:13px;letter-spacing:.12em;
  fill:var(--concrete);opacity:.55;}
.section--light .graphic .g-label{fill:var(--graphite);opacity:.5;}
.graphic .g-label--hi{fill:var(--hivis);opacity:1;font-weight:600;}
.graphic .g-label--mute{opacity:.38;}
.graphic--wide{margin:clamp(36px,5vw,56px) 0;padding:clamp(20px,3vw,34px);
  border:1px solid var(--rule);}
.graphic--card{margin-bottom:22px;padding:16px;border:1px solid var(--rule-dark);
  background:rgba(20,24,28,.03);}
.graphic--glyph{width:60px;flex:none;}

/* Figure section */
.section--figure{background:
  linear-gradient(rgba(201,207,212,.04) 1px,transparent 1px) 0 0/100% 44px,
  var(--graphite);}
.figure-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px);align-items:center;}
.figure-legend{display:flex;align-items:center;gap:.55em;margin-top:2em;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(201,207,212,.5);}
.figure-legend .key{width:22px;height:0;border-top:2px solid var(--concrete);
  opacity:.6;margin-left:1.4em;}
.figure-legend .key:first-child{margin-left:0;}
.figure-legend .key--plan{border-top-style:dashed;}
.figure-legend .key--actual{border-top:3px solid var(--hivis);opacity:1;}
@media (max-width:860px){.figure-split{grid-template-columns:1fr;}}

/* Stats band */
.band{background:var(--hivis);color:var(--graphite);}
.band-inner{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px);padding-block:clamp(24px,3vw,34px);}
.band-item{flex:1 1 200px;}
.band-item .fig{display:block;font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 82,'wght' 800;font-size:clamp(1.5rem,3vw,2.1rem);
  letter-spacing:-.02em;line-height:1;}
.band-item .cap{display:block;margin-top:.6em;font-size:.82rem;opacity:.72;}

/* Service cards */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);}
.service-card{background:var(--paper);padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;transition:background .18s ease;}
.service-card:hover{background:#e9ecee;}
.service-card .code{color:var(--hivis);font-weight:600;font-size:.9rem;
  letter-spacing:.1em;margin-bottom:.5em;}
.service-card h3{margin-bottom:.5em;}
.service-card h3 a{color:var(--graphite);}
.service-card h3 a:hover{color:#9a6600;text-decoration:none;}
.service-card p{color:rgba(20,24,28,.66);font-size:.93rem;margin-bottom:1.4em;}
.service-card .more{margin-top:auto;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:#9a6600;}

/* Sector rows with glyphs */
.sector-row{align-items:center;}
.sector-row .label{flex:1;}
.sector-row .graphic--glyph{margin-right:clamp(16px,2.5vw,28px);}

/* Service page */
.service-header{padding-bottom:clamp(8px,2vw,20px);}
.service-header h1{max-width:16ch;}
.service-header .lede{margin-top:1.5em;max-width:var(--measure);
  color:rgba(201,207,212,.72);font-size:1.05rem;}
.service-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:var(--section);}
.service-nav-item{background:var(--graphite);padding:22px 24px;display:flex;
  flex-direction:column;gap:8px;color:var(--paper);}
.service-nav-item:hover{background:var(--slate);text-decoration:none;}
.service-nav-item.is-current{background:var(--slate);border-left:3px solid var(--hivis);}
.service-nav-item .code{color:var(--hivis);font-size:.82rem;letter-spacing:.12em;}
.service-nav-item .name{font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 88,'wght' 700;font-size:1.02rem;line-height:1.15;}

/* CTA + dark button on light ground */
.btn--dark{background:var(--graphite);color:var(--paper);border-color:var(--graphite);}
.btn--dark:hover{background:transparent;color:var(--graphite);}
.btn--dark .dot{background:var(--hivis);}
.section--cta{background:
  linear-gradient(rgba(20,24,28,.05) 1px,transparent 1px) 0 0/100% 52px,
  linear-gradient(90deg,rgba(20,24,28,.05) 1px,transparent 1px) 0 0/52px 100%,
  var(--paper);}

/* Note cards get a hover lift */
.note-card{transition:background .18s ease;}
.note-card h3 a:hover{color:var(--hivis);text-decoration:none;}

@media (max-width:760px){
  .sector-row{flex-direction:row;flex-wrap:wrap;align-items:center;}
  .sector-row .meta{flex-basis:100%;padding-left:76px;}
  .graphic--wide{padding:14px;}
}

/* Service grid sits as a 2x2 rather than orphaning a card */
@media (min-width:900px){
  .service-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .service-grid{grid-template-columns:1fr;}
}
.graphic--glyph{width:72px;}
.graphic .g-glyph{stroke-width:2.5;}