/* =====================================================================
   BUILD THE TRADES CAREER FAIR — jobfair.css
   Self-contained. No CDN, no external fonts, no framework.
   All asset paths are relative to this file's own folder.

   FONT NOTE: the brief specified Open Sans and "no external links,"
   so this uses a system stack that falls back gracefully. To load the
   real Open Sans webfont, uncomment the @import on the next line —
   that IS an external request to Google Fonts.
   ===================================================================== */
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap'); */

:root{
  --navy:      #00167A;   /* headers */
  --gold:      #FFBD59;   /* accent rules, icons */
  --ink:       #1A1A1A;   /* body text */
  --ink-soft:  #4A4A4A;
  --page:      #000000;   /* page background */
  --card:      #FFFFFF;   /* content background */
  --hair:      #E3E6F0;
  --wash:      #F4F6FC;

  --sans: 'Open Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1060px;
  --pad:  clamp(1.25rem, 4vw, 3.25rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--page);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- shell ---------- */
.jf-shell{
  max-width:var(--wrap);
  margin:0 auto;
  background:var(--card);
}
@media (min-width:1100px){
  .jf-shell{ margin:2.5rem auto; }
}

.jf-section{ padding:clamp(2rem,5vw,3.25rem) var(--pad); }
.jf-section + .jf-section{ border-top:1px solid var(--hair); }
.jf-section--wash{ background:var(--wash); }

/* ---------- masthead ---------- */
.jf-mast{
  display:flex; align-items:center; gap:1rem;
  padding:1.25rem var(--pad);
  border-bottom:3px solid var(--gold);
}
.jf-mast img{ width:64px; height:auto; display:block; flex:none; }
.jf-mast-name{
  font-weight:300; font-size:clamp(.95rem,2.4vw,1.15rem);
  line-height:1.25; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy);
}
.jf-mast-name b{ display:block; font-weight:800; }

/* ---------- headings ---------- */
h1,h2,h3{ font-family:var(--sans); color:var(--navy); margin:0; }

h1{
  font-size:clamp(2rem,6vw,3.4rem);
  font-weight:800; line-height:1.02;
  letter-spacing:-.02em; text-transform:uppercase;
}
h1 .jf-gold{ color:var(--gold); display:block; }

h2{
  font-size:clamp(1.35rem,3.4vw,1.9rem);
  font-weight:700; line-height:1.15; letter-spacing:-.01em;
  margin-bottom:.4rem;
}

h3{
  font-size:1.02rem; font-weight:700; line-height:1.3;
  letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:.35rem;
}

.jf-eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
  margin:0 0 .55rem;
}
.jf-lede{
  font-size:clamp(1rem,2.2vw,1.12rem);
  color:var(--ink-soft); max-width:56ch; margin:.75rem 0 0;
}
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

/* ---------- hero ---------- */
.jf-hero{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
}
.jf-hero-photo{
  width:100%; height:auto; display:block;
  border-radius:4px; border:1px solid var(--hair);
}
.jf-kicker{
  font-size:clamp(1rem,2.6vw,1.25rem); font-weight:700;
  color:var(--navy); letter-spacing:.02em;
  margin:1.15rem 0 .15rem; text-transform:uppercase;
}
.jf-kicker span{ color:var(--gold); display:block; font-weight:800; }

/* ---------- fact strip ---------- */
.jf-facts{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--hair);
  border:1px solid var(--hair); margin-top:1.75rem;
}
.jf-fact{ background:var(--card); padding:1.1rem 1.25rem; }
.jf-fact-label{
  font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.3rem;
}
.jf-fact-value{ font-weight:700; color:var(--navy); line-height:1.3; }
.jf-fact-sub{ font-size:.88rem; color:var(--ink-soft); line-height:1.4; }

/* ---------- benefit grid ---------- */
.jf-grid{ display:grid; gap:clamp(1.25rem,3vw,2rem); margin-top:1.75rem; }
.jf-grid--4{ grid-template-columns:repeat(4,1fr); }
.jf-grid--3{ grid-template-columns:repeat(3,1fr); }

.jf-card svg{ width:38px; height:38px; display:block; margin-bottom:.7rem; }
.jf-card p{ font-size:.93rem; color:var(--ink-soft); margin:0; }

/* ---------- included list ---------- */
.jf-inc{ display:flex; gap:1rem; align-items:flex-start; }
.jf-inc svg{ width:32px; height:32px; flex:none; margin-top:.15rem; }
.jf-inc p{ font-size:.93rem; color:var(--ink-soft); margin:0; }

/* ---------- details table ---------- */
.jf-dl{ margin:1.5rem 0 0; }
.jf-dl-row{
  display:grid; grid-template-columns:180px 1fr;
  gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--hair);
}
.jf-dl-row:first-child{ border-top:1px solid var(--hair); }
.jf-dl-key{
  font-size:.74rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--navy); padding-top:.18rem;
}
.jf-dl-val{ color:var(--ink); }
.jf-dl-val small{ display:block; color:var(--ink-soft); font-size:.88rem; }

/* ---------- notice ---------- */
.jf-notice{
  border-left:5px solid var(--gold); background:var(--wash);
  padding:1.15rem 1.35rem; margin-top:1.5rem;
}
.jf-notice strong{ color:var(--navy); }

/* ---------- sponsors ---------- */
.jf-sponsors{
  border-top:1px solid var(--hair);
  padding:clamp(1.5rem,4vw,2.5rem) var(--pad);
}
.jf-sponsor-row{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,3vw,2.5rem); align-items:center;
}
.jf-sponsor-row img{
  width:100%; height:110px; display:block;
  object-fit:contain; object-position:center;
}

/* ---------- footer ---------- */
.jf-foot{
  background:var(--navy); color:#fff;
  padding:1.6rem var(--pad); text-align:center;
}
.jf-foot p{ margin:0 0 .3rem; font-size:.85rem; opacity:.9; }
.jf-foot p:last-child{ margin:0; font-size:.76rem; opacity:.7; letter-spacing:.05em; }

/* ---------- staging notes ---------- */
.jf-note{
  background:#FFF4D6; border:1px dashed #C8A23A; color:#5A4510;
  padding:.7rem .95rem; margin:1rem var(--pad); font-size:.82rem;
  line-height:1.5;
}
.jf-note b{ color:#7A5A00; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .jf-grid--4{ grid-template-columns:repeat(2,1fr); }
  .jf-facts{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .jf-sponsor-row{ grid-template-columns:repeat(2,1fr); }
  .jf-sponsor-row img{ height:90px; }
  .jf-hero{ grid-template-columns:1fr; }
  .jf-hero-photo{ order:-1; }
  .jf-grid--3{ grid-template-columns:1fr; }
  .jf-dl-row{ grid-template-columns:1fr; gap:.15rem; }
}
@media (max-width:480px){
  .jf-grid--4{ grid-template-columns:1fr; }
  body{ font-size:16px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

@media print{
  body{ background:#fff; }
  .jf-shell{ margin:0; max-width:none; }
  .jf-note{ display:none; }
}