/* ── IDC brand tokens ───────────────────────────────────────────────
   Colors sampled directly from the client's brand palette; contrast
   checked against WCAG AA (4.5:1 for text, 3:1 for large text/UI).
   The light brand colors (orange, lavender, lime) are FILL-ONLY —
   never used as text — paired with charcoal or the "deep" companion
   shades derived from them for anything that needs to be legible.

   Headline font: Fira Sans, bold. Body font: Open Sans, regular.
------------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@700&family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  /* neutrals */
  --ink: #303030;         /* charcoal — primary text, AAA on white */
  --ink-soft: #757575;    /* secondary/muted text — AA on white (4.6:1) */
  --paper: #ffffff;       /* page background, per brand: generally white */
  --paper-raised: #ffffff;
  --cream: #f8f7ed;       /* sparing use only — input fills, never load-bearing for contrast */
  --line: #e3e1d9;        /* hairline border — does the separation work cream can't */

  /* program accents — fills only */
  --ic: #e8af76;
  --ic-text: #ae6419;     /* deep amber companion — 4.5:1 on white, safe as text/links */
  --id: #563854;          /* plum — safe as both fill AND text, 10:1 on white */
  --id-soft: #c2abd1;     /* lavender — fill only */

  /* shared status colors (same meaning on both IC and ID sites) */
  --status-confirmed-bg: #d1e073;   /* lime — fill only */
  --status-confirmed-text: var(--ink);
  --status-pending-bg: #c2abd1;     /* lavender — fill only */
  --status-pending-text: var(--id); /* plum reads at 6.3:1 on lavender */
  --status-locked-bg: #ececdf;
  --status-locked-text: var(--ink-soft);

  --radius: 6px;
  --font-display: 'Fira Sans', sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--ic-text); }
[data-program="ID"] a { color: var(--id); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 0.4em;
}

h1 { font-size: 2.3rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; color: var(--ink-soft); }

.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

header.site {
  border-bottom: 1px solid var(--line);
  padding: 18px 24px;
}
header.site .wrap { padding: 0; max-width: 780px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
header.site .brand { display: flex; align-items: center; gap: 12px; }
header.site .brand img { width: 34px; height: 34px; display: block; }
header.site .eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
header.site .title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.02em; }
header.site a.nav-link { font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; font-weight: 500; }
header.site a.nav-link:hover { color: var(--ink); }

/* ── Workshop cards ─────────────────────────────────────────────── */
.workshop-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.day-ticks {
  display: flex;
  gap: 3px;
  margin: 6px 0 10px;
}
.day-ticks span {
  width: 14px;
  height: 5px;
  border-radius: 2px;
  background: var(--line);
}
.day-ticks span.on { background: var(--ic); }
[data-program="ID"] .day-ticks span.on { background: var(--id); }

.workshop-meta { font-size: 0.92rem; color: var(--ink-soft); }
.workshop-dates { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.01em; margin-bottom: 2px; }

.status-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.status-open { background: var(--status-confirmed-bg); color: var(--status-confirmed-text); }
.status-full { background: var(--status-pending-bg); color: var(--status-pending-text); }
.status-locked { background: var(--status-locked-bg); color: var(--status-locked-text); }
.status-waiting { background: var(--status-pending-bg); color: var(--status-pending-text); }

.card-action { flex-shrink: 0; text-align: right; }

/* ── Buttons & forms ────────────────────────────────────────────── */
button, .btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  border-radius: var(--radius);
  padding: 11px 20px;
  cursor: pointer;
  background: var(--ic);
  color: var(--ink);
  transition: opacity 0.15s ease;
}
[data-program="ID"] button, [data-program="ID"] .btn { background: var(--id); color: #fff; }
button:hover, .btn:hover { opacity: 0.85; }
button:disabled { background: var(--line); color: var(--ink-soft); cursor: not-allowed; opacity: 1; }
button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.secondary:hover { background: var(--cream); opacity: 1; }
button.danger { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
button.danger:hover { background: var(--cream); opacity: 1; }
button.small { padding: 7px 14px; font-size: 0.82rem; }

label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=date], input[type=number], textarea, select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  margin-bottom: 16px;
}
textarea { resize: vertical; min-height: 100px; }
input:focus, textarea:focus, select:focus, button:focus, a:focus {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.notice {
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: 20px;
  border: 1px solid var(--line);
}
.notice.error { background: #fff; color: var(--ic-text); border-color: var(--ic-text); }
.notice.success { background: var(--status-confirmed-bg); color: var(--ink); border-color: transparent; }
.notice.info { background: var(--cream); color: var(--ink-soft); }

.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--ink-soft);
}

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }

.section { margin-bottom: 40px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }

details.section { margin-bottom: 24px; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--paper-raised); }
details.section summary { cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
details.section summary::-webkit-details-marker { display: none; }
details.section summary::before { content: '\25B8'; display: inline-block; margin-right: 8px; font-size: 0.85rem; color: var(--ink-soft); transition: transform 0.12s ease; }
details.section[open] summary::before { transform: rotate(90deg); }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(48,48,48,0.5);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal {
  background: var(--paper-raised); border-radius: var(--radius); padding: 28px;
  max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.desc-render { font-size: 0.92rem; color: var(--ink); }
.desc-render p { color: var(--ink); }
.desc-render ul, .desc-render ol { padding-left: 20px; color: var(--ink); }

.rte { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.rte-toolbar { display: flex; gap: 2px; background: var(--cream); padding: 5px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rte-toolbar button { background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 0.78rem; font-weight: 700; padding: 5px 9px; border-radius: 4px; cursor: pointer; min-width: 28px; }
.rte-toolbar button:hover { background: var(--paper); opacity: 1; }
.rte-editable { min-height: 110px; padding: 10px 12px; font-size: 0.92rem; background: #fff; outline: none; }
.rte-editable ul, .rte-editable ol { padding-left: 20px; }

.type-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; margin-right: 6px; }
.type-badge.ic { background: var(--ic); color: var(--ink); }
.type-badge.id { background: var(--id); color: #fff; }

.hidden { display: none !important; }

@media (max-width: 560px) {
  .workshop-card { flex-direction: column; }
  .card-action { text-align: left; width: 100%; }
  .card-action button { width: 100%; }
}