/* Sign Depot USA — Crew Training site styles
   Brand colors sampled from the Sign Depot USA logo:
   orange #F45501, blue #0A1D93. */
:root {
  --blue: #0A1D93;
  --orange: #F45501;
  --ink: #1c1e26;
  --grey: #5a5e6a;
  --line: #e3e5ec;
  --bg: #f6f7fb;
  --card: #ffffff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}
a { color: var(--blue); }

/* Header */
.site-header {
  background: #fff;
  border-bottom: 4px solid var(--orange);
}
.site-header .wrap {
  max-width: 1020px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.site-header img.logo { height: 54px; width: auto; display: block; }
.site-header .site-name {
  font-weight: 800; font-size: 20px; color: var(--blue); letter-spacing: .2px;
}
.site-header .site-name small {
  display: block; font-weight: 600; font-size: 13px; color: var(--grey);
  letter-spacing: 1.6px; text-transform: uppercase;
}

/* Hero band */
.hero { background: var(--blue); color: #fff; }
.hero .wrap { max-width: 1020px; margin: 0 auto; padding: 34px 20px 30px; }
.hero h1 { margin: 0 0 6px; font-size: 34px; line-height: 1.15; }
.hero p { margin: 0; font-size: 18px; color: #cfd6ff; max-width: 640px; }
.hero .backlink { color: #ffb59a; font-weight: 700; text-decoration: none; font-size: 15px; }
.hero .backlink:hover { text-decoration: underline; }

/* Layout */
main { max-width: 1020px; margin: 0 auto; padding: 28px 20px 60px; }
h2.section {
  font-size: 24px; color: var(--blue); margin: 36px 0 14px;
  padding-bottom: 8px; border-bottom: 3px solid var(--orange);
}
p.lede { font-size: 18px; color: var(--grey); max-width: 720px; }

/* Training cards (home page) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 8px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 3px rgba(10, 29, 147, .06);
}
.card:hover { border-color: var(--orange); }
.card .tag {
  align-self: flex-start; background: var(--orange); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
}
.card h3 { margin: 2px 0 0; font-size: 21px; color: var(--blue); }
.card p { margin: 0; color: var(--grey); font-size: 16px; }
.card .go { margin-top: auto; font-weight: 800; color: var(--orange); }
.card.soon { border-style: dashed; background: transparent; box-shadow: none; }
.card.soon h3 { color: var(--grey); }

/* Notice boxes */
.note, .warn, .spec { border-radius: 12px; padding: 16px 18px; margin: 20px 0; font-size: 17px; }
.note { background: #eef7e6; border: 2px solid #4a7c2f; }
.warn { background: #fdeeee; border: 2px solid #b02a2a; }
.spec { background: #fff8d6; border: 2px solid #8a6d00; font-weight: 600; }

/* Video list */
ol.playlist { list-style: none; counter-reset: vid; padding: 0; margin: 0; }
ol.playlist > li {
  counter-increment: vid; position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 20px 16px 76px; margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(10, 29, 147, .06);
}
ol.playlist > li::before {
  content: counter(vid); position: absolute; left: 20px; top: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
ol.playlist h3 { margin: 2px 0 6px; font-size: 20px; color: var(--ink); }
ol.playlist p { margin: 0 0 8px; font-size: 17px; }
a.btn {
  display: inline-block; background: var(--orange); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 17px; border-radius: 10px; padding: 12px 20px; margin: 6px 0 4px;
}
a.btn:hover { background: #d94800; }
.url { font-size: 14px; word-break: break-all; color: var(--grey); margin: 2px 0 6px; }

/* Checklist */
.checkgroup { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px 22px 14px; margin-bottom: 16px; }
.checkgroup h3 { color: var(--blue); font-size: 20px; margin: 16px 0 6px; }
.tips { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px 22px 10px; margin-bottom: 16px; }
.tips ul { margin: 8px 0; padding-left: 22px; }
.tips li { margin: 10px 0; font-size: 17px; }
.tips li strong { color: var(--blue); }
ul.check { list-style: none; padding: 0; margin: 0; }
ul.check li { padding: 11px 0 11px 42px; position: relative; border-bottom: 1px solid var(--line); font-size: 17px; }
ul.check li:last-child { border-bottom: none; }
ul.check li::before { content: "☐"; position: absolute; left: 0; top: 6px; font-size: 28px; color: var(--blue); }
.fields {
  background: var(--card); border: 2px solid var(--blue); border-radius: 12px;
  padding: 14px 18px; font-size: 18px; line-height: 2.1; margin: 18px 0;
}
ul.redflags { font-size: 17px; }
ul.redflags li { margin-bottom: 12px; }

/* Footer */
.site-footer { background: var(--blue); color: #cfd6ff; }
.site-footer .wrap { max-width: 1020px; margin: 0 auto; padding: 22px 20px; font-size: 15px; }
.site-footer strong { color: #fff; }

@media (max-width: 560px) {
  .hero h1 { font-size: 27px; }
  ol.playlist > li { padding-left: 20px; padding-top: 70px; }
}

/* Top navigation bar (sticky) + language toggle + back button */
.site-header { position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 8px rgba(10,29,147,.08); }
.site-header a.brand { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topnav a { color: var(--blue); font-weight: 700; text-decoration: none; font-size: 16px; padding: 8px 4px; }
.topnav a:hover { color: var(--orange); }
.topnav .lang { font-size: 15px; color: var(--grey); border: 2px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.topnav .lang a { font-size: 15px; padding: 2px; }
.topnav .lang strong { color: var(--orange); }
a.backbtn {
  display: inline-block; margin: 0 0 18px; padding: 12px 20px;
  background: var(--blue); color: #fff; border-radius: 10px;
  font-weight: 800; font-size: 17px; text-decoration: none;
}
a.backbtn:hover { background: var(--orange); }
@media (max-width: 560px) {
  .topnav { margin-left: 0; gap: 10px; }
  .site-header img.logo { height: 44px; }
  .topnav a { font-size: 15px; }
}

/* Step cards v2: big numbered circles (blue circle, white number).
   Numbers come from a CSS counter, so adding or removing a step
   renumbers the whole page by itself. A finished step turns orange
   and the number swaps to a check mark. */
.progresswrap { margin: 6px 0 22px; }
.progresstext { font-weight: 800; font-size: 20px; margin-bottom: 8px; color: var(--blue); }
.progress { height: 16px; background: #e3e5ec; border-radius: 999px; overflow: hidden; }
.progress .bar { height: 100%; width: 0; background: var(--orange); transition: width .3s; }
.steps { counter-reset: stepnum; }
.step {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  padding: 20px; margin-bottom: 16px; cursor: pointer;
  counter-increment: stepnum;
}
.step::before {
  content: counter(stepnum);
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 30px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.step.done::before { content: "✓"; background: var(--orange); }
.step > span { order: 2; flex: 1; min-width: 0; }
.step input.stepcheck { order: 3; width: 36px; height: 36px; flex: none; margin-top: 4px; accent-color: var(--blue); }
.step .steptitle { display: block; font-weight: 800; font-size: 22px; color: var(--blue); margin-bottom: 4px; }
.step p { margin: 0 0 8px; font-size: 18px; }
.step.done { border-color: #4a7c2f; background: #f2f8ec; }
@media (max-width: 560px) {
  .step { padding: 16px; gap: 12px; }
  .step::before { width: 52px; height: 52px; font-size: 25px; }
  .step input.stepcheck { width: 32px; height: 32px; }
  .step .steptitle { font-size: 20px; }
}
.alldone { background: #eef7e6; border: 2px solid #4a7c2f; border-radius: 12px; padding: 16px 18px; font-size: 19px; font-weight: 700; }
ul.plainlist { font-size: 18px; line-height: 1.6; padding-left: 22px; }
ul.plainlist li { margin-bottom: 8px; }

/* Photos: hero panel on the home page + pictures on cards.
   .round is for the website's circle photos: shown whole, their white
   corners blend into the white card. */
.heropanel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin: 0 auto 26px; max-width: 520px; box-shadow: 0 1px 3px rgba(10, 29, 147, .06); }
.heropanel img { display: block; width: 100%; height: auto; border-radius: 12px; }
.herocaption { margin: 10px 4px 2px; text-align: center; color: var(--grey); font-size: 16px; }
.cardimg { display: block; width: 100%; height: 170px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
.cardimg.round { height: auto; object-fit: contain; }

/* Lesson videos: our own walkthrough videos (silent, captions on screen). */
.videowrap { margin: 6px 0 22px; }
.lessonvideo { display: block; width: 100%; height: auto; background: #000; border: 2px solid var(--line); border-radius: 14px; }

/* Step photos inside lesson step cards. */
.stepimg { display: block; width: 100%; height: auto; border-radius: 10px; margin-top: 10px; }

/* Video captions (subtitle track): strong backing so the words stay readable. */
::cue { background: rgba(0, 0, 0, 0.85); color: #fff; font-weight: 600; }

/* Header refresh (Nov 6): the logo already says Sign Depot USA, so the words
   beside it go away and Training Library becomes the big title. Brand and nav
   centered. One style change updates the header on every page. */
.site-header .wrap { flex-direction: column; align-items: center; gap: 10px; }
.site-header a.brand { justify-content: center; }
.site-header .site-name { font-size: 0; }
.site-header .site-name small {
  font-size: 32px; font-weight: 800; color: var(--blue);
  letter-spacing: .2px; text-transform: none; line-height: 1.1;
}
.topnav { margin-left: 0; justify-content: center; }
@media (max-width: 560px) {
  .site-header .site-name small { font-size: 26px; }
}

/* Management gate (gate.js) */
.gate-locked { overflow: hidden; }
.gate-overlay { position: fixed; inset: 0; background: rgba(10,29,147,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.gate-card { background: #fff; border-radius: 16px; padding: 34px 30px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.gate-card h2 { margin: 10px 0 6px; color: var(--blue); font-size: 30px; }
.gate-card p { margin: 6px 0 14px; font-size: 18px; }
.gate-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gate-input { font-size: 19px; padding: 12px 14px; border: 2px solid var(--blue); border-radius: 10px; width: 210px; }
.gate-btn { font-size: 19px; font-weight: 700; padding: 12px 22px; border: none; border-radius: 10px; background: var(--orange); color: #fff; cursor: pointer; }
.gate-err { color: #b00020; font-weight: 700; }
.gate-back { display: inline-block; margin-top: 16px; font-size: 17px; }
.lockline { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--blue); margin-top: 8px; }

/* Onboarding map: compact stage rows with lesson bubbles */
.mapbox{background:#fff;border:1px solid #e3e6f0;border-radius:18px;padding:8px 22px;margin:0 0 10px;box-shadow:0 2px 10px rgba(10,29,147,.05);}
.stagerow{padding:13px 0;border-bottom:1px solid #eef0f7;}
.stagerow:last-child{border-bottom:none;}
.stagename{font-weight:700;color:#0A1D93;font-size:18px;margin-bottom:7px;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{background:#eef1fb;border:1px solid #c9d2f2;color:#0A1D93;border-radius:999px;padding:4px 13px;font-size:15px;font-weight:600;}
.stagenote{color:#444;font-size:16px;}

a.chip { text-decoration: none; color: var(--ink); cursor: pointer; }
a.chip:hover { border-color: var(--blue); color: var(--blue); }
.art { font-size: 13.5px; font-weight: 700; color: var(--blue); align-self: center; white-space: nowrap; }

/* Embedded video players */
.video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; margin: 10px 0 6px; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }