/* ==========================================================================
   Colorado Workers Comp — resource 77, template "Colorado Workers Comp".
   Built from design/co-workers-comp/ (Ryan's zip, 2026-09-19). New family
   file; nothing here is appended to another stylesheet.

   Every value is the design's own. The export styled inline, so the inline
   declarations were lifted wholesale rather than reinterpreted through the
   site's Bootstrap components — trimming a design to the theme's components
   is what made an earlier build look nothing like the design.

   CONTRAST: the hero and the deadlines band are navy. The ICA theme sets
   h1/h2 colour directly, and a direct rule beats the design's inherited
   colour, which rendered home-page headings at 1.14:1. Colour is therefore
   restated scoped to .cwc-hero and .cwc-sec--navy below. Navy here is the
   design's #1e2d3b (--bs-tertiary-hex), NOT --bs-heading-color-hex (#212124),
   which is the text colour and renders the band ink-black.

   FAIL-OPEN: both audience blocks are in the DOM. Every rule that hides one
   is gated on .cwc-js, which co-workers-comp.js adds to <main>. With no JS,
   a script error, or a CSP block, both blocks stay fully visible. Same
   pattern as .ehp-js (employee-health.css) and .lcp-js (locations.css).
   ========================================================================== */

.cwc {
  --cwc-navy:   #1e2d3b;
  --cwc-blue:   #0072bc;
  --cwc-sky:    #80b7e3;
  --cwc-gold:   #ffd240;
  --cwc-gold-ink:#3d2c00;
  --cwc-tint:   #f2f8fc;
  --cwc-border: #e7e7e7;
  --cwc-rule:   #DCE3E8;
  --cwc-body:   #495356;
  --cwc-ink:    #212124;
  --cwc-head:   'Catamaran', sans-serif;
}

/* ---- shared scaffolding ---- */
.cwc-wrap { max-width: 1180px; margin: 0 auto; padding: 64px 24px; }
.cwc-wrap--narrow { max-width: 900px; }
.cwc-sec { position: relative; }
.cwc-sec--white { background: #fff; border-bottom: 1px solid var(--cwc-border); }
.cwc-sec--tint  { background: var(--cwc-tint); border-bottom: 1px solid var(--cwc-border); }
.cwc-sec--navy  { background: var(--cwc-navy); color: #fff; }
.cwc-sec--narrow { border-bottom: 0; }

.cwc-kicker {
  font-family: var(--cwc-head); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cwc-blue); margin: 0 0 10px;
}
.cwc-kicker--light { color: var(--cwc-sky); }

.cwc-h1 {
  font-family: var(--cwc-head); font-weight: 800;
  font-size: clamp(30px, 3.8vw, 44px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 0 0 12px;
  max-width: 22ch; text-wrap: balance;
}
.cwc-h2 {
  font-family: var(--cwc-head); font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1;
  letter-spacing: -0.015em; margin: 0 0 12px;
}
.cwc-h2--sm { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; margin-bottom: 14px; }

.cwc-head { max-width: 60ch; margin-bottom: 34px; }
.cwc-head--split {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: flex-end; justify-content: space-between;
  max-width: none; margin-bottom: 26px;
}
.cwc-head--split > div { max-width: 56ch; min-width: 0; }
.cwc-lede { font-size: 18px; line-height: 1.55; color: var(--cwc-body); margin: 0; }
.cwc-lede--light { color: var(--cwc-tint); }

/* Theme collision: restate heading colour inside the dark sections. */
.cwc .cwc-hero .cwc-h1,
.cwc .cwc-sec--navy .cwc-h2 { color: #fff; }

/* ---- 1. hero ---- */
.cwc-hero { position: relative; background: var(--cwc-navy); color: #fff; overflow: hidden; }
.cwc-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 88% 12%, rgba(0,114,188,0.55) 0%, rgba(0,114,188,0) 58%),
    radial-gradient(90% 80% at 6% 100%, rgba(128,183,227,0.20) 0%, rgba(128,183,227,0) 62%);
}
.cwc-hero__mark {
  position: absolute; top: -20%; left: -20%; width: 140%; height: 140%;
  background-image: url('/assets/images/icons/ica-mark-white.svg');
  background-repeat: repeat; background-size: 460px 460px;
  opacity: 0.12; transform: rotate(-12deg); pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 20%, #000 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 85%);
          mask-image: radial-gradient(120% 100% at 80% 20%, #000 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 85%);
}
.cwc-hero__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg,
    var(--cwc-blue) 0%, var(--cwc-blue) 34%,
    var(--cwc-gold) 34%, var(--cwc-gold) 52%,
    rgba(255,255,255,0.10) 52%);
}
.cwc-hero__inner { position: relative; padding: 40px 24px 36px; }
.cwc-hero__lede {
  font-size: 18px; line-height: 1.5; color: var(--cwc-tint);
  max-width: 64ch; margin: 0 0 24px;
}

/* audience toggle — anchors, so it still navigates with no JS */
.cwc-toggle__label { letter-spacing: 0.12em; margin-bottom: 10px; }
.cwc-toggle {
  display: inline-flex; flex-wrap: wrap; gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(128,183,227,0.35);
  border-radius: 999px; padding: 6px;
}
.cwc-toggle__btn {
  font-family: var(--cwc-head); font-weight: 700; font-size: 16px;
  padding: 11px 22px; border-radius: 999px; border: 0;
  cursor: pointer; text-decoration: none;
  background: transparent; color: var(--cwc-tint);
  transition: background .18s, color .18s;
}
.cwc-toggle__btn.is-on { background: var(--cwc-gold); color: var(--cwc-gold-ink); }
a.cwc-toggle__btn:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* ---- 2. steps ---- */
.cwc-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px;
}
.cwc-step { display: flex; flex-direction: column; gap: 12px; }
.cwc-step__mark { display: flex; align-items: center; gap: 10px; }
.cwc-step__n {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cwc-head); font-weight: 800; font-size: 19px;
  background: var(--cwc-blue); color: #fff;
}
/* First step is gold. :first-child, not a row field, so adding or removing a
   step cannot leave the wrong one highlighted. */
.cwc-step:first-child .cwc-step__n { background: var(--cwc-gold); color: var(--cwc-gold-ink); }
.cwc-step__bar { flex: 1 1 auto; height: 3px; background: var(--cwc-rule); border-radius: 2px; }
.cwc-step__title { font-family: var(--cwc-head); font-weight: 800; font-size: 20px; line-height: 1.2; margin: 0; }
.cwc-step__text { font-size: 16px; line-height: 1.5; color: var(--cwc-body); margin: 0; }

/* ---- 3. deadlines ---- */
.cwc-grid { display: grid; gap: 14px; }
.cwc-grid--deadline { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cwc-dl {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(128,183,227,0.3);
  border-radius: 10px; padding: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.cwc-dl__badge {
  font-family: var(--cwc-head); font-weight: 800; font-size: 32px;
  line-height: 1; color: var(--cwc-gold); margin: 0;
}
.cwc-dl__title {
  font-family: var(--cwc-head); font-weight: 700; font-size: 17px;
  line-height: 1.25; color: #fff; margin: 0;
}
.cwc-dl__text { font-size: 15px; line-height: 1.5; color: var(--cwc-rule); margin: 0; }

/* ---- 4. cards ---- */
.cwc-grid--card { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
.cwc-card {
  background: #fff; border: 1px solid var(--cwc-border);
  border-top: 5px solid var(--cwc-blue); border-radius: 10px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.cwc-card__title { font-family: var(--cwc-head); font-weight: 800; font-size: 20px; line-height: 1.22; margin: 0; }
.cwc-card__text { font-size: 16px; line-height: 1.5; color: var(--cwc-body); margin: 0; flex: 1 1 auto; }
.cwc-card__cta {
  font-family: var(--cwc-head); font-weight: 700; font-size: 16px;
  color: var(--cwc-blue); text-decoration: none; align-self: flex-start;
}
.cwc-card__cta:hover { text-decoration: underline; color: var(--cwc-blue); }

/* ---- 5. guidelines + external rail ---- */
.cwc-two {
  display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start;
}
.cwc-two__prose { flex: 1 1 420px; min-width: 0; }
.cwc-two__prose p { font-size: 18px; line-height: 1.55; color: var(--cwc-body); margin: 0 0 14px; max-width: 64ch; }
.cwc-two__prose p.cwc-strong { color: var(--cwc-navy); font-weight: 700; margin-bottom: 0; }
.cwc-rail {
  flex: 1 1 330px; min-width: 0; background: var(--cwc-tint);
  border: 1px solid var(--cwc-border); border-radius: 10px; padding: 26px;
}
.cwc-rail__title { font-family: var(--cwc-head); font-weight: 800; font-size: 20px; margin: 0 0 6px; }
.cwc-rail__note { font-size: 15px; line-height: 1.45; color: var(--cwc-body); margin: 0 0 16px; }
.cwc-rail__list { display: flex; flex-direction: column; gap: 2px; }
.cwc-rail__item {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--cwc-rule);
  text-decoration: none; color: var(--cwc-navy);
}
.cwc-rail__item:last-child { border-bottom: 0; }
.cwc-rail__item:hover { color: var(--cwc-blue); }
.cwc-rail__text { min-width: 0; }
.cwc-rail__name { display: block; font-family: var(--cwc-head); font-weight: 700; font-size: 17px; line-height: 1.25; }
.cwc-rail__note-sm { display: block; font-size: 14px; line-height: 1.4; color: var(--cwc-body); margin-top: 2px; }
.cwc-rail__arrow { flex: none; font-weight: 700; color: var(--cwc-blue); }

/* ---- 6. FAQ ---- */
.cwc-faq { display: flex; flex-direction: column; gap: 10px; }
.cwc-faq__item { background: #fff; border: 1px solid var(--cwc-border); border-radius: 10px; overflow: hidden; }
.cwc-faq__q {
  width: 100%; display: flex; gap: 16px; align-items: center; justify-content: space-between;
  text-align: left; font-family: var(--cwc-head); font-weight: 700; font-size: 19px;
  line-height: 1.3; color: var(--cwc-navy); padding: 20px 22px; cursor: pointer;
  list-style: none;
}
.cwc-faq__q::-webkit-details-marker { display: none; }
.cwc-faq__q:hover { color: var(--cwc-blue); }
.cwc-faq__icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cwc-tint); color: var(--cwc-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; transition: transform .18s, background .18s, color .18s;
}
.cwc-faq__item[open] .cwc-faq__icon { background: var(--cwc-blue); color: #fff; transform: rotate(45deg); }
.cwc-faq__a { padding: 0 22px 22px; font-size: 17px; line-height: 1.6; color: var(--cwc-body); max-width: 72ch; }
.cwc-faq__a p { margin: 0 0 12px; }
.cwc-faq__a p:last-child { margin-bottom: 0; }

.cwc-disclaimer { font-size: 15px; line-height: 1.55; color: var(--cwc-body); margin: 26px 0 0; max-width: 80ch; }
.cwc-reviewed { font-size: 14px; line-height: 1.5; color: var(--cwc-body); margin: 10px 0 0; font-style: italic; }

/* ---- audience switching. Gated on .cwc-js so no-JS shows both blocks. ---- */
.cwc-js .cwc-aud { display: none; }
.cwc-js.cwc-show-worker   #cwc-worker   { display: block; }
.cwc-js.cwc-show-employer #cwc-employer { display: block; }

/* ---- reveal. Gated the same way, for the same reason: the site's SAL has
   left content at opacity:0 when its observer did not fire. ---- */
.cwc-js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.cwc-js [data-reveal].is-in { opacity: 1; transform: none; }

@keyframes cwcHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.cwc-js .cwc-anim { animation: cwcHeroIn .7s cubic-bezier(.2,.7,.3,1) both; }
.cwc-js .cwc-anim--1 { animation-duration: .6s; }
.cwc-js .cwc-anim--2 { animation-delay: .08s; }
.cwc-js .cwc-anim--3 { animation-delay: .16s; }
.cwc-js .cwc-anim--4 { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .cwc *, .cwc *::before, .cwc *::after { animation: none !important; transition: none !important; }
  .cwc-js [data-reveal] { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .cwc-wrap { padding: 44px 16px; }
  .cwc-hero__inner { padding: 32px 16px 28px; }
  .cwc-toggle { width: 100%; }
  .cwc-toggle__btn { flex: 1 1 auto; text-align: center; }
}