/*
Theme Name: TRAWU Union
Theme URI: https://trawu-union.co.za/
Author: TRAWU Union
Author URI: https://trawu-union.co.za/
Description: Custom theme for the Transport and Retail Allied Workers Union (TRAWU). A bold, modern identity built around union red and ink black, a poster-style display typeface, and a hazard-stripe motif that nods to the transport and industrial sectors TRAWU organises in.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: trawu-union
*/

/* -------------------------------------------------- */
/* Tokens                                              */
/* -------------------------------------------------- */
:root{
  --ink:#15120F;
  --ink-soft:#211C17;
  --red:#C81E24;
  --red-deep:#8E1418;
  --bone:#F5F1E6;
  --bone-dim:#E7E0CE;
  --steel:#6B6862;
  --amber:#E8A33D;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  padding:0;
  font-family:'Barlow', sans-serif;
  background:var(--bone);
  color:var(--ink);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

/* -------------------------------------------------- */
/* Hazard stripe divider                               */
/* -------------------------------------------------- */
.trawu-stripe{
  height:14px;
  background:repeating-linear-gradient(135deg, var(--red) 0 18px, var(--ink) 18px 36px);
}

/* -------------------------------------------------- */
/* Header / nav                                        */
/* -------------------------------------------------- */
.site-header{
  background:var(--ink);
  color:var(--bone);
  padding:20px 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.site-branding{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone);}
.site-branding .custom-logo{max-height:48px;width:auto;}
.brand-badge{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--red);
  color:var(--bone);
  border:2px solid var(--bone-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Anton', sans-serif;
  font-size:24px;
  line-height:1;
  flex-shrink:0;
}
.brand-wordmark{font-family:'Anton', sans-serif;font-size:26px;letter-spacing:0.5px;line-height:1;}
.brand-wordmark span{color:var(--red);}
.brand-tagline{font-family:'Barlow Semi Condensed', sans-serif;font-size:11px;letter-spacing:2.5px;color:var(--steel);text-transform:uppercase;margin-top:2px;}

.main-navigation ul{
  list-style:none;
  display:flex;
  gap:32px;
  margin:0;
  padding:0;
  font-family:'Barlow Semi Condensed', sans-serif;
  font-size:14px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  font-weight:600;
}
.main-navigation a{color:var(--bone);text-decoration:none;opacity:0.85;transition:opacity 0.15s;}
.main-navigation a:hover{opacity:1;color:var(--red);}

.menu-toggle{display:none;background:none;border:1px solid var(--bone-dim);color:var(--bone);padding:8px 12px;font-family:'Barlow Semi Condensed', sans-serif;text-transform:uppercase;letter-spacing:0.5px;font-size:13px;border-radius:2px;}

.header-cta{
  background:var(--red);
  color:var(--bone);
  padding:10px 22px;
  font-family:'Barlow Semi Condensed', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-size:14px;
  text-decoration:none;
  border-radius:2px;
  white-space:nowrap;
}

/* -------------------------------------------------- */
/* Hero                                                 */
/* -------------------------------------------------- */
.hero{
  background:var(--ink);
  color:var(--bone);
  padding:100px 6vw 90px;
  position:relative;
  overflow:hidden;
}
.hero-eyebrow{
  font-family:'Barlow Semi Condensed', sans-serif;
  color:var(--amber);
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:13px;
  font-weight:600;
  margin-bottom:20px;
}
.hero h1{
  font-family:'Anton', sans-serif;
  font-size:clamp(46px,8vw,96px);
  line-height:0.95;
  letter-spacing:0.5px;
  max-width:900px;
  margin:0;
}
.hero h1 em{font-style:normal;color:var(--red);}
.hero p{
  max-width:560px;
  font-size:18px;
  color:var(--bone-dim);
  margin-top:28px;
}
.hero-actions{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;}

.btn-primary,
.btn-ghost{
  padding:16px 30px;
  font-family:'Barlow Semi Condensed', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-size:15px;
  text-decoration:none;
  border-radius:2px;
  display:inline-block;
}
.btn-primary{background:var(--red);color:var(--bone);border:1.5px solid var(--red);}
.btn-ghost{border:1.5px solid var(--bone-dim);color:var(--bone);background:transparent;}

/* -------------------------------------------------- */
/* Sections, general                                    */
/* -------------------------------------------------- */
.section{padding:80px 6vw;}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
.section-eyebrow{
  font-family:'Barlow Semi Condensed', sans-serif;
  color:var(--red);
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:13px;
  font-weight:600;
  margin-bottom:10px;
}
.section-head h2{
  font-family:'Anton', sans-serif;
  font-size:clamp(32px,4vw,48px);
  letter-spacing:0.3px;
  margin:0;
}
.section-head p{max-width:420px;color:var(--steel);font-size:15px;margin:0;}

/* -------------------------------------------------- */
/* About                                                */
/* -------------------------------------------------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.about-copy h2{font-family:'Anton', sans-serif;font-size:clamp(28px,4vw,42px);margin-bottom:20px;}
.about-copy p{color:var(--ink-soft);font-size:16px;margin:0;}
.about-copy p + p{margin-top:16px;}
.about-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink);border-radius:4px;overflow:hidden;}
.stat{background:var(--bone);padding:28px 24px;}
.stat .num{font-family:'Anton', sans-serif;font-size:38px;color:var(--red);}
.stat .label{font-family:'Barlow Semi Condensed', sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--steel);margin-top:4px;}

/* -------------------------------------------------- */
/* Sectors                                              */
/* -------------------------------------------------- */
.sectors-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2px;
  background:var(--ink);
  border-radius:4px;
  overflow:hidden;
}
.sector-card{background:var(--bone);padding:30px 26px;border-top:4px solid var(--red);}
.sector-card h3{font-family:'Anton', sans-serif;font-size:20px;margin:0 0 10px;letter-spacing:0.2px;}
.sector-card p{font-size:14px;color:var(--steel);margin:0;}

/* -------------------------------------------------- */
/* Services                                             */
/* -------------------------------------------------- */
.services{background:var(--ink);color:var(--bone);}
.services .section-eyebrow{color:var(--amber);}
.services .section-head p{color:var(--bone-dim);}
.service-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:rgba(245,241,230,0.15);}
.service-item{background:var(--ink);padding:32px 6px;}
.service-item h3{font-family:'Anton', sans-serif;font-size:22px;margin:0 0 10px;color:var(--bone);}
.service-item p{font-size:14px;color:var(--bone-dim);margin:0;}

/* -------------------------------------------------- */
/* CTA                                                  */
/* -------------------------------------------------- */
.cta{background:var(--red);color:var(--bone);text-align:center;padding:90px 6vw;}
.cta h2{font-family:'Anton', sans-serif;font-size:clamp(30px,5vw,54px);max-width:700px;margin:0 auto 18px;}
.cta p{max-width:520px;margin:0 auto 34px;color:rgba(245,241,230,0.9);font-size:16px;}
.cta .btn-ghost{border-color:var(--bone);color:var(--bone);}

/* -------------------------------------------------- */
/* Footer                                               */
/* -------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--bone-dim);padding:60px 6vw 30px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.footer-grid h4{font-family:'Barlow Semi Condensed', sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:13px;color:var(--red);margin:0 0 16px;}
.footer-grid p, .footer-grid a{font-size:14px;color:var(--bone-dim);display:block;text-decoration:none;margin:0 0 8px;}
.footer-grid a:hover{color:var(--red);}
.footer-bottom{border-top:1px solid rgba(245,241,230,0.15);padding-top:24px;font-size:12px;color:var(--steel);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* -------------------------------------------------- */
/* About page                                           */
/* -------------------------------------------------- */
.about-hero{
  background:var(--ink);
  color:var(--bone);
  padding:100px 6vw 70px;
  position:relative;
}
.about-hero-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:56px;
  align-items:center;
}
.about-hero .section-eyebrow{color:var(--amber);}
.about-hero h1{
  font-family:'Anton', sans-serif;
  font-size:clamp(40px,7vw,80px);
  line-height:0.98;
  margin:0;
}
.about-hero p{
  max-width:600px;
  font-size:18px;
  color:var(--bone-dim);
  margin-top:24px;
}
.about-hero-visual{display:flex;justify-content:center;flex-shrink:0;}
.about-hero-visual svg{width:200px;height:200px;}

.pillars-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2px;
  background:var(--ink);
  border-radius:4px;
  overflow:hidden;
}
.pillar-card{background:var(--bone);padding:32px 28px;}
.pillar-index{
  font-family:'Anton', sans-serif;
  font-size:16px;
  color:var(--red);
  letter-spacing:1px;
  margin-bottom:14px;
}
.pillar-card h3{font-family:'Anton', sans-serif;font-size:21px;margin:0 0 10px;letter-spacing:0.2px;}
.pillar-card p{font-size:14px;color:var(--steel);margin:0;}

.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;}
.tag{
  font-family:'Barlow Semi Condensed', sans-serif;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.4px;
  color:var(--bone);
  background:var(--ink-soft);
  border:1px solid rgba(245,241,230,0.15);
  padding:9px 16px;
  border-radius:20px;
}

.id-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.id-card{
  background:var(--bone);
  border:1.5px solid var(--ink);
  border-radius:8px;
  padding:0 0 24px;
  overflow:hidden;
}
.id-card-top{
  background:var(--red);
  color:var(--bone);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 20px;
  font-family:'Barlow Semi Condensed', sans-serif;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
}
.id-card h3{
  font-family:'Anton', sans-serif;
  font-size:24px;
  margin:24px 20px 4px;
  letter-spacing:0.2px;
}
.id-card-title{
  font-family:'Barlow Semi Condensed', sans-serif;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--steel);
  margin:0 20px 18px;
}
.id-card-contact{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 20px;
  padding-top:16px;
  border-top:1px dashed var(--steel);
  font-size:14px;
}
.id-card-contact a{color:var(--ink-soft);text-decoration:none;}
.id-card-contact a:hover{color:var(--red);}

/* -------------------------------------------------- */
/* Generic page / single content (for non-front pages) */
/* -------------------------------------------------- */
.page-content{padding:80px 6vw;max-width:820px;margin:0 auto;}
.page-content h1{font-family:'Anton', sans-serif;font-size:clamp(32px,5vw,52px);margin-bottom:24px;}
.page-content p{margin-bottom:16px;font-size:16px;}

/* -------------------------------------------------- */
/* Responsive                                           */
/* -------------------------------------------------- */
@media (max-width:800px){
  .main-navigation{display:none;width:100%;order:3;}
  .main-navigation.is-open{display:block;}
  .main-navigation ul{flex-direction:column;gap:16px;padding:20px 0;}
  .menu-toggle{display:inline-block;}
  .about{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .about-hero{padding:70px 6vw 50px;}
  .about-hero-grid{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .about-hero-visual svg{width:150px;height:150px;}
}