/* ==========================================================================
   Migrated-content components. Added for the full-site migration: the 97
   pages and 628 articles that exist on michigansbdc.org today, plus the
   in-house course library that replaces the pointer to lms.michigansbdc.org.
   Uses the tokens already defined in style.css — no new palette.
   ========================================================================== */

/* --- small key/value and list primitives used across migrated pages --- */
.kv-grid{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.25rem; margin:0; max-width:46rem;}
.kv-grid dt{font-weight:700; color:var(--muted);}
.kv-grid dd{margin:0;}
.chip-list{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0;}
.chip-list .chip{padding:.4rem .85rem; border-radius:999px; background:var(--tint); font-size:.92rem; font-weight:600;}
.tick-list{margin:0; padding-left:1.15rem; max-width:62ch; color:var(--muted);}
.tick-list li{margin-bottom:.4rem;}
.tick-list li::marker{color:var(--accent);}

/* --- article cards --- */
.mig-cards{list-style:none; margin:0; padding:0; display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));}
.mig-card{display:flex; flex-direction:column; background:var(--glass-strong,#fff);
  border:1px solid var(--line); border-radius:1rem; overflow:hidden;
  transition:transform .18s, box-shadow .18s, border-color .18s;}
.mig-card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 .8rem 1.8rem rgb(23 45 48 / 10%);}
.mig-card img{aspect-ratio:16/9; object-fit:cover; width:100%;}
.mig-card__b{padding:1rem 1.15rem 1.2rem; display:flex; flex-direction:column; gap:.4rem; flex:1;}
.mig-card__t{font-size:1.04rem; font-weight:700; line-height:1.3;}
.mig-card__t a{color:inherit; text-decoration:none;}
.mig-card__t a:hover{text-decoration:underline;}
.mig-card__m{font-size:.84rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto;
  padding-top:.6rem; border-top:1px solid var(--line);}
.mig-card__cat{font-weight:700; color:var(--accent);}

/* --- library filter bar --- */
.mig-filters{display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end; margin:0 0 1.5rem;}
.mig-filters label{display:block; font-size:.85rem; font-weight:700; color:var(--muted); margin-bottom:.3rem;}
.mig-filters input, .mig-filters select{padding:.7rem .9rem; font-size:1rem; border-radius:.7rem;
  border:1px solid var(--control-line); background:#fff; color:var(--ink); min-width:13rem;}
.mig-count{font-weight:700; margin:0 0 1rem;}
.mig-pager{display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 0; list-style:none; padding:0;}
.mig-pager a, .mig-pager span{display:block; padding:.5rem .85rem; border-radius:.6rem; border:1px solid var(--line);
  text-decoration:none; font-weight:600; background:#fff;}
.mig-pager [aria-current="page"]{background:var(--accent); color:#fff; border-color:var(--accent);}

/* --- article body (migrated WordPress content, shortcodes removed) --- */
.mig-article{max-width:44rem; margin:0 auto;}
.mig-article__meta{display:flex; flex-wrap:wrap; gap:.6rem 1rem; font-size:.9rem; color:var(--muted);
  padding-bottom:1rem; border-bottom:1px solid var(--line); margin-bottom:1.75rem;}
.mig-body{font-size:1.06rem; line-height:1.75;}
.mig-body > * + *{margin-top:1.1em;}
.mig-body h2{font-size:1.6rem; margin-top:2em;}
.mig-body h3{font-size:1.25rem; margin-top:1.8em;}
.mig-body ul, .mig-body ol{padding-left:1.3rem;}
.mig-body li + li{margin-top:.45em;}
.mig-body img{border-radius:.8rem; margin-inline:auto;}
.mig-body figure{margin:1.6em 0;}
.mig-body figcaption{font-size:.88rem; color:var(--muted); margin-top:.5rem; text-align:center;}
.mig-body blockquote{margin:1.6em 0; padding:.2rem 0 .2rem 1.25rem; border-left:4px solid var(--accent);
  font-size:1.12rem; color:var(--ink);}
.mig-body table{width:100%; border-collapse:collapse;}
.mig-body th, .mig-body td{text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--line);}
.mig-tablewrap{overflow-x:auto;}
.mig-hero-img{width:100%; max-height:26rem; object-fit:cover; border-radius:1rem; margin-bottom:2rem;}
.mig-next{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; margin-top:3rem;
  padding-top:1.25rem; border-top:1px solid var(--line); font-weight:600;}

/* --- course library (in-house replacement for the external LMS) --- */
.course-collection + .course-collection{margin-top:2.5rem;}
.course-collection h2{font-size:clamp(1.3rem,2.4vw,1.8rem); margin-bottom:.9rem;}
.course-grid{list-style:none; margin:0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));}
.course-card{display:flex; flex-direction:column; gap:.55rem; padding:1.25rem; border-radius:1rem;
  background:var(--glass-strong,#fff); border:1px solid var(--line);}
.course-card h3{font-size:1.08rem;}
.course-card h3 a{color:inherit; text-decoration:none;}
.course-card h3 a:hover{text-decoration:underline;}
.course-card p{color:var(--muted); font-size:.95rem; margin:0;}
.course-card__f{margin-top:auto; padding-top:.7rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.86rem;}
/* --teal-deep, not --accent: the accent on this pale background measures 4.28:1,
   which fails WCAG AA for text this size. */
.badge{display:inline-block; padding:.22rem .6rem; border-radius:999px; background:var(--tint);
  color:var(--teal-deep, #075861); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;}
.lesson-list{list-style:none; margin:0; padding:0; counter-reset:l;}
.lesson-list li{counter-increment:l; display:flex; gap:.85rem; align-items:flex-start;
  padding:.85rem 0; border-bottom:1px solid var(--line);}
.lesson-list li::before{content:counter(l,decimal-leading-zero); flex:none; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums;}

/* --- migration report table --- */
.rep-table{width:100%; border-collapse:collapse; min-width:40rem;}
.rep-table th, .rep-table td{text-align:left; padding:.65rem .8rem; border-bottom:1px solid var(--line);
  vertical-align:top; font-size:.95rem;}
.rep-table thead th{background:var(--tint); font-size:.82rem; text-transform:uppercase; letter-spacing:.03em;}
.rep-stats{list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));}
.rep-stats li{padding:1.1rem 1.25rem; border-radius:1rem; background:var(--glass-strong,#fff); border:1px solid var(--line);}
.rep-stats b{display:block; font-size:2rem; font-weight:700; letter-spacing:-.03em; line-height:1;}
.rep-stats span{display:block; color:var(--muted); font-size:.9rem; margin-top:.35rem;}

@media (prefers-reduced-motion: reduce){ .mig-card:hover{transform:none;} }
@media (max-width:40rem){
  .kv-grid{grid-template-columns:1fr; gap:.15rem .5rem;}
  .kv-grid dd{margin-bottom:.6rem;}
  .mig-filters input, .mig-filters select{min-width:0; width:100%;}
  .mig-filters > div{flex:1 1 100%;}
}

/* Topic band: the header for an article that has no photograph of its own.
   Reads as a designed topic marker rather than a stock photo standing in for
   a picture the article never had. */
.mig-band{position:relative; border-radius:1rem; overflow:hidden; margin-bottom:2rem;}
.mig-band img{width:100%; height:clamp(7rem,18vw,11rem); object-fit:cover; filter:saturate(.72);}
.mig-band::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgb(8 107 112 / 88%) 0%, rgb(8 107 112 / 55%) 55%, rgb(8 107 112 / 18%) 100%);}
.mig-band__k{position:absolute; inset-inline-start:clamp(1rem,3vw,1.75rem); inset-block-end:clamp(.9rem,2.5vw,1.4rem);
  margin:0; z-index:1; color:#fff; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.92rem;}

/* Utility classes. The site's Content Security Policy is style-src 'self', so
   there are no style attributes anywhere — inline styles are blocked outright,
   and a page that relies on them silently loses its spacing. */
.mt-1{margin-top:1rem;}
.mt-2{margin-top:1.25rem;}
.mt-3{margin-top:1.5rem;}
.mt-4{margin-top:1.75rem;}
.muted{color:var(--muted);}
.lesson-t{font-weight:700; margin:0 0 .15rem;}
.lesson-m{margin:0; color:var(--muted); font-size:.9rem;}
.lesson-check{display:flex; gap:.5rem; align-items:center; margin-top:.45rem;
  font-size:.9rem; color:var(--muted); cursor:pointer;}
.course-progress{margin-top:1rem;}

/* Training calendar cards: the date leads, because that is what people scan for. */
/* date on its own line, time under it: mixed wrapping made the grid look ragged */
.ev-card .ev-when{display:grid; gap:.1rem; margin:0 0 .35rem;}
.ev-card .ev-day{font-weight:700; color:var(--accent); font-size:.92rem;}
.ev-card .ev-time{color:var(--muted); font-size:.88rem;}
.ev-card .mig-card__b{padding-top:1.15rem;}

/* Book a time: ten working days, seven hours a day, no third-party scheduler. */
.book-days{display:flex; gap:.5rem; overflow-x:auto; padding:.25rem 0 .6rem; scrollbar-width:thin;}
.book-day{flex:none; display:grid; gap:.1rem; justify-items:center; min-width:4.4rem; padding:.6rem .5rem;
  border:1px solid var(--line); border-radius:.7rem; background:#fff; color:inherit; line-height:1.15;}
.book-day__d{font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.book-day__n{font-size:1.3rem; font-weight:700;}
.book-day__m{font-size:.78rem; color:var(--muted);}
.book-day.is-on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset;}
.book-day.is-on .book-day__d,.book-day.is-on .book-day__m{color:var(--accent);}
.book-slots{display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 1rem;}
.book-slot{padding:.6rem 1rem; border:1px solid var(--control-line); border-radius:.6rem;
  background:#fff; color:inherit; font-weight:600;}
.book-slot:hover{border-color:var(--accent);}
.book-slot.is-on{background:var(--accent); border-color:var(--accent); color:#fff;}
.book-go{margin-top:1rem;}
.book-call{margin-top:1rem; color:var(--muted);}
@media (max-width:40rem){ .book-slots{gap:.4rem;} .book-slot{flex:1 1 7.5rem; text-align:center;} }

/* Site-wide search results */
.srch-list{list-style:none; margin:0; padding:0; display:grid; gap:.5rem;}
.srch-item a, .srch-item{display:grid; gap:.2rem; padding:.85rem 1rem; border:1px solid var(--line);
  border-radius:.8rem; background:#fff; text-decoration:none; color:inherit;}
.srch-item a:hover{border-color:var(--accent); box-shadow:0 .4rem 1.1rem rgb(23 45 48 / 8%);}
.srch-item{border:0; padding:0; background:none;}
.srch-kind{font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);}
.srch-t{font-weight:650; line-height:1.35;}
.srch-t mark{background:var(--tint); color:inherit; padding:0 .1em; border-radius:.2em;}
.srch-d{font-size:.9rem; color:var(--muted);}

/* Header search control — matches the language button's shape and weight. */
.header-search{display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem;
  border:1px solid var(--line); border-radius:999px; background:var(--glass-strong,#fff);
  text-decoration:none; color:var(--ink); font-weight:600; font-size:.92rem;}
.header-search:hover{border-color:var(--accent); color:var(--accent);}
.header-search svg{width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round;}
@media (max-width:52rem){ .header-search span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;} }

/* Language layer */
.lang-notice{margin:0; padding:.7rem clamp(1rem,4vw,2rem); background:var(--tint); color:var(--ink);
  font-size:.94rem; text-align:center;}
.language-options [data-set-lang].is-on{font-weight:700; color:var(--accent);}
[dir="rtl"] .book-days,[dir="rtl"] .mig-filters{direction:rtl;}
[dir="rtl"] .tick-list{padding-left:0; padding-right:1.15rem;}
[dir="rtl"] .mig-body blockquote{border-left:0; border-right:4px solid var(--accent); padding:.2rem 1.25rem .2rem 0;}

/* Withdraw / cancel: present but quiet. A destructive action needs an explicit
   tick before the button will submit — no one loses a request by mis-clicking. */
.withdraw-form{margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--line);
  display:grid; gap:.85rem; justify-items:start; max-width:34rem;}
.button-quiet{display:inline-block; padding:.7rem 1.2rem; border-radius:2px;
  border:1px solid var(--control-line); background:#fff; color:var(--ink);
  font-weight:650; text-decoration:none; cursor:pointer;}
.button-quiet:hover{border-color:#a4402c; color:#8f3a28;}