/* ==========================================================================
   AI Support & Opportunities for Communities — directory styles.

   Extends /styles.css rather than restating it: every colour below resolves
   to a token that stylesheet already defines, so light mode and dark mode
   both follow the rest of daricecorey.com with nothing to keep in sync by
   hand. (--coral is the site's purple accent.)
   ========================================================================== */

/* Semantic tokens for the bits this page paints itself. styles.css flips the
   site palette under prefers-color-scheme; these flip alongside it so the
   status colors and accent-filled surfaces keep their contrast in both themes. */
:root {
  --cf-on-accent: #1a0a2e;                 /* text sitting on a filled accent */
  --cf-ok:    #7ee2a8; --cf-ok-line:    rgba(126,226,168,.42); --cf-ok-bg:    rgba(126,226,168,.09);
  --cf-warn:  #fbd24e; --cf-warn-line:  rgba(251,210,78,.42);  --cf-warn-bg:  rgba(251,210,78,.09);
  --cf-alert: #f89b9b; --cf-alert-line: rgba(248,155,155,.45); --cf-alert-bg: rgba(248,155,155,.10);
  --cf-mark: rgba(192,132,252,.30);
}
@media (prefers-color-scheme: light) {
  :root {
    --cf-on-accent: #fff;
    --cf-ok:    #0f7a4a; --cf-ok-line:    rgba(15,122,74,.34);  --cf-ok-bg:    rgba(15,122,74,.07);
    --cf-warn:  #8a5a00; --cf-warn-line:  rgba(138,90,0,.34);   --cf-warn-bg:  rgba(138,90,0,.07);
    --cf-alert: #b02525; --cf-alert-line: rgba(176,37,37,.34);  --cf-alert-bg: rgba(176,37,37,.06);
    --cf-mark: rgba(124,58,237,.20);
  }
}

.cf-wrap { max-width: 1240px; margin: 0 auto; padding: 0 3rem; }

/* ---- Hero (deep-purple band, matching the other directory) --------------- */
.cf-hero { background: #2d1f4e; padding: 4rem 0 3.5rem; }
.cf-hero .section-heading { margin-bottom: 1.25rem; }
.cf-hero-lede { font-size: 1rem; color: rgba(255,255,255,.8); max-width: 680px; line-height: 1.75; margin-bottom: 2rem; }
.cf-hero-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cf-badge-pill {
  display: inline-block; background: rgba(192,132,252,.14);
  border: 1px solid rgba(192,132,252,.35); color: #c084fc;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: 999px;
}
.cf-updated { font-size: .75rem; color: rgba(255,255,255,.55); letter-spacing: .04em; }

/* The band stays dark in light mode, so re-assert the bright accent inside it
   the same way /styles.css does for the site's other hero bands. */
@media (prefers-color-scheme: light) {
  .cf-hero { --coral: #c084fc; --coral-dim: #a855f7; }
}

/* ---- Intro ------------------------------------------------------------- */
.cf-lede { font-size: 1rem; color: var(--muted); line-height: 1.8; max-width: 68ch; margin-top: 2rem; }
.cf-lede + .cf-lede { margin-top: .9rem; }
.cf-stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.cf-stat .n { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: var(--coral); line-height: 1; display: block; }
.cf-stat .l { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .45rem; display: block; }

/* ---- Doors explainer ---------------------------------------------------- */
.cf-doors-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); font-weight: 500; margin-top: 2.5rem; }
.cf-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin: .85rem 0 1rem; border: 1px solid var(--line); }
.cf-door { background: var(--bg2); padding: 1.35rem 1.4rem; }
.cf-door h3 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: .55rem; font-weight: 500; }
.cf-door p { font-size: .88rem; color: var(--muted); line-height: 1.6; }

/* ---- Search bar --------------------------------------------------------- */
.cf-tools { position: sticky; top: 5rem; z-index: 40; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem 0; margin-bottom: 2rem; }
.cf-toolbar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.cf-searchbox { position: relative; flex: 1 1 320px; min-width: 0; }
.cf-searchbox svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--muted); pointer-events: none; }
#cf-q { width: 100%; background: var(--bg2); border: 1px solid var(--line); color: var(--cream); font-family: var(--sans); font-size: .95rem; padding: .85rem 2.6rem .85rem 2.8rem; border-radius: 2px; }
#cf-q::placeholder { color: var(--muted); }
#cf-q:focus { border-color: var(--coral); outline: none; }
.cf-clearq { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .35rem .5rem; border-radius: 2px; }
.cf-clearq:hover { color: var(--coral); }
.cf-select { background: var(--bg2); border: 1px solid var(--line); color: var(--cream); font-family: var(--sans); font-size: .8rem; padding: .8rem .9rem; border-radius: 2px; cursor: pointer; }
.cf-select:focus { border-color: var(--coral); outline: none; }

/* ---- Filter boxes ------------------------------------------------------- */
/* The labelled boxes the childcare directory uses, so the two read as one
   system. Same measurements, same panel, same open/selected states -- kept as
   its own block here rather than shared, because /styles.css is the site
   stylesheet and these belong to the directories, not the site. */
.cf-controls-hint { font-size: .85rem; color: var(--muted); line-height: 1.7; max-width: 68ch; margin-bottom: 1.25rem; }
/* One grid for the boxes and the Reset together: cf-fieldrow is display:contents
   so the boxes script.js writes into it become cells of this grid directly, and
   Reset drops into the cell the fifth box leaves empty instead of stranding
   itself beside a gap. */
.cf-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.25rem; align-items: end; margin-bottom: 2rem; }
.cf-fieldrow { display: contents; }
.cf-field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.cf-field-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); font-weight: 500; }
.cf-reset-row { align-self: end; justify-self: start; }

.cf-multi { position: relative; min-width: 0; }
.cf-multi-toggle {
  width: 100%; text-align: left; background: var(--bg2); color: var(--cream);
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--sans); font-size: .9rem; font-weight: 300;
  padding: .7rem 2.4rem .7rem .85rem; cursor: pointer; transition: border-color .2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cf-multi-toggle::after {
  content: ''; position: absolute; right: .9rem; top: 50%; width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.cf-multi-toggle:hover { border-color: var(--coral); }
.cf-multi-toggle.has-selection { border-color: var(--coral); color: var(--coral); }

.cf-multi-panel {
  position: absolute; z-index: 60; top: calc(100% + .35rem); left: 0;
  width: min(22rem, 80vw); background: var(--bg2);
  border: 1px solid var(--coral); border-radius: 2px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.cf-multi-head { display: flex; gap: .5rem; padding: .6rem; border-bottom: 1px solid var(--line); }
.cf-multi-head-bare { justify-content: flex-end; }
.cf-multi-head input {
  flex: 1; min-width: 0; background: var(--bg); color: var(--cream);
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--sans); font-size: .85rem; font-weight: 300; padding: .45rem .6rem;
}
.cf-multi-head input:focus { border-color: var(--coral); outline: none; }
.cf-multi-clear {
  background: none; border: none; cursor: pointer; padding: 0 .3rem;
  font-family: var(--sans); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--coral);
}
.cf-multi-clear:hover { text-decoration: underline; }

.cf-multi-list { max-height: 16rem; overflow-y: auto; padding: .35rem; }
.cf-multi-opt {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .6rem; cursor: pointer; font-size: .87rem; color: var(--cream);
  border-radius: 2px;
}
.cf-multi-opt:hover { background: color-mix(in srgb, var(--bg2) 85%, var(--coral)); }
.cf-multi-opt input { accent-color: var(--coral); width: 1rem; height: 1rem; flex-shrink: 0; }
.cf-multi-opt span { min-width: 0; overflow-wrap: anywhere; }
.cf-multi-opt em { margin-left: auto; font-style: normal; font-size: .74rem; color: var(--muted); padding-left: .5rem; }
.cf-multi-opt.is-empty { opacity: .38; }
.cf-multi-opt[hidden] { display: none; }

/* ---- "Only show" switches ----------------------------------------------- */
/* The pill switches the childcare directory uses for the same job. The real
   checkbox is hidden rather than removed, so it still takes focus and still
   answers to the keyboard. */
.cf-onlys { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: -.75rem 0 2rem; }
.cf-onlys[hidden] { display: none; }
.cf-onlys-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin-right: .25rem; }
/* Named cf-only, not cf-toggle: that class already belongs to the card's
   "See the details" button, and sharing it dressed these pills in a link's
   underline while pushing pill geometry onto every card. */
.cf-only { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; text-decoration: none; }
.cf-only[hidden] { display: none; }
.cf-only input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-only span {
  display: inline-block; border: 1px solid var(--line); border-radius: 999px;
  padding: .4rem .85rem; font-size: .78rem; color: var(--muted);
  background: var(--bg2); transition: all .15s; white-space: nowrap;
}
.cf-only:hover span { border-color: var(--coral); color: var(--cream); }
.cf-only input:checked + span { background: var(--coral); border-color: var(--coral); color: var(--cf-on-accent); }
.cf-only input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }

/* ---- Layout ------------------------------------------------------------- */
/* One column. The two-column layout here carried a sidebar of seventeen filter
   accordions; with every filter now in the row above, the results get the full
   width and the cards get room to breathe. */
.cf-results { padding-bottom: 5rem; }

/* ---- Results ------------------------------------------------------------ */
.cf-resulthead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cf-count { font-size: .85rem; color: var(--muted); }
.cf-count strong { color: var(--cream); font-weight: 500; }
.cf-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem; }
.cf-chip { display: inline-flex; align-items: center; gap: .45rem; background: rgba(192,132,252,.12); border: 1px solid rgba(192,132,252,.3); color: var(--cream); font-size: .76rem; padding: .35rem .75rem; border-radius: 999px; }
.cf-chip button { background: none; border: none; color: var(--coral); cursor: pointer; font-size: .95rem; line-height: 1; padding: 0; }
.cf-chip button:hover { color: var(--cream); }
.cf-group { margin-bottom: 2.5rem; padding: 0; background: none; }
.cf-chips:empty { margin-bottom: 0; }
.cf-group-head { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem; }
.cf-group-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.cf-group-head .n { color: var(--muted); letter-spacing: .05em; }

.cf-card { background: var(--bg2); border: 1px solid var(--line); padding: 1.5rem 1.6rem; margin-bottom: 1rem; transition: border-color .18s; }
.cf-card:hover { border-color: rgba(192,132,252,.32); }
.cf-card-top { display: flex; justify-content: space-between; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.cf-card-org { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: .4rem; }
.cf-card h3 { font-family: var(--serif); font-size: 1.22rem; font-weight: 700; line-height: 1.3; color: var(--cream); }
.cf-card h3 mark, .cf-card p mark { background: var(--cf-mark); color: var(--cream); padding: 0 .12em; border-radius: 2px; }
.cf-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .85rem 0; }
.cf-badge { font-size: .7rem; letter-spacing: .05em; padding: .28rem .65rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.cf-badge.door1 { border-color: var(--cf-ok-line); color: var(--cf-ok); background: var(--cf-ok-bg); }
.cf-badge.door2 { border-color: var(--cf-warn-line); color: var(--cf-warn); background: var(--cf-warn-bg); }
.cf-badge.door3 { border-color: var(--cf-alert-line); color: var(--cf-alert); background: var(--cf-alert-bg); }
.cf-badge.money { border-color: rgba(192,132,252,.45); color: var(--coral); background: rgba(192,132,252,.1); }
.cf-badge.deadline { border-color: var(--cf-alert); color: var(--cf-alert); background: var(--cf-alert-bg); font-weight: 500; }
/* A date that has already passed is history, not urgency. It stays on the card
   so the record still reads honestly, but it gives up the alert colour — the
   red is reserved for dates someone can still act on. */
.cf-badge.closed { border-color: var(--line); color: var(--muted); background: transparent; }
/* Still open, but far enough off that alert red would cry wolf next to a date
   that really is days away. */
.cf-badge.upcoming { border-color: var(--cf-warn-line); color: var(--cf-warn); background: var(--cf-warn-bg); }
.cf-badge.fresh { border-color: var(--cf-ok-line); color: var(--cf-ok); background: var(--cf-ok-bg); font-weight: 500; }
.cf-closed-note { color: var(--muted); font-size: .82em; }
.cf-card-desc { font-size: .92rem; color: var(--muted); line-height: 1.7; }
.cf-card-actions { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-top: 1.1rem; }
.cf-toggle { background: none; border: none; color: var(--coral); font-family: var(--sans); font-size: .8rem; letter-spacing: .05em; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.cf-toggle:hover { color: var(--cream); }
.cf-visit { color: var(--cream); font-size: .8rem; letter-spacing: .05em; text-decoration: none; border-bottom: 1px solid var(--coral); padding-bottom: 2px; }
.cf-visit:hover { color: var(--coral); }

/* ---- Card detail -------------------------------------------------------- */
.cf-detail { display: none; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.cf-detail.open { display: block; }
.cf-dl { display: grid; grid-template-columns: minmax(140px, 190px) 1fr; gap: .55rem 1.5rem; font-size: .87rem; line-height: 1.65; }
.cf-dl dt { color: var(--coral); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .2rem; }
.cf-dl dd { color: var(--muted); }
.cf-dl dd .tag { display: inline-block; background: rgba(192,132,252,.09); border: 1px solid var(--line); border-radius: 2px; padding: .1rem .5rem; margin: 0 .3rem .3rem 0; font-size: .78rem; color: var(--cream); }
.cf-detail-note { margin-top: 1.4rem; padding: 1rem 1.15rem; border-left: 2px solid var(--coral); background: rgba(192,132,252,.06); font-size: .87rem; line-height: 1.7; color: var(--cream); }
.cf-detail-note strong { color: var(--coral); font-weight: 500; display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4rem; }
.cf-detail-note.warn { border-left-color: var(--cf-alert); background: var(--cf-alert-bg); }
.cf-detail-note.warn strong { color: var(--cf-alert); }
.cf-unstated { margin-top: 1.1rem; font-size: .78rem; color: var(--muted); line-height: 1.6; opacity: .85; }
.cf-unstated em { font-style: normal; color: var(--cream); opacity: .75; }
.cf-verified { margin-top: 1.25rem; font-size: .74rem; color: var(--muted); opacity: .8; }

/* ---- Empty / loading ---------------------------------------------------- */
.cf-empty { text-align: center; padding: 4rem 1rem; border: 1px dashed var(--line); }
.cf-empty h3 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .75rem; }
.cf-empty p { color: var(--muted); font-size: .92rem; margin-bottom: 1.5rem; max-width: 52ch; margin-left: auto; margin-right: auto; }
.cf-empty-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cf-status { padding: 3rem 0; color: var(--muted); font-size: .92rem; }

/* ---- Show more ---------------------------------------------------------- */
.cf-more-wrap { display: flex; justify-content: center; margin-top: 2.5rem; }
.cf-more-wrap button[hidden] { display: none; }

/* ---- Why this exists ---------------------------------------------------- */
section.cf-about-section { background: var(--bg2); padding: 5rem 0; margin-top: 1rem; }
.cf-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin-top: 2rem; }
.cf-about-block { background: var(--bg); padding: 2rem 1.75rem; }
.cf-about-block h3 { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--cream); margin-bottom: .75rem; }
.cf-about-block p { font-size: .88rem; color: var(--muted); line-height: 1.7; }

/* ---- Footer credit ------------------------------------------------------ */
.cf-credit { font-family: var(--serif); font-size: .95rem; font-style: italic; color: var(--coral); margin-bottom: .6rem; }

/* ---- Footnote ----------------------------------------------------------- */
.cf-foot { border-top: 1px solid var(--line); padding: 2.5rem 0 4rem; font-size: .84rem; color: var(--muted); line-height: 1.75; }
.cf-foot p + p { margin-top: .8rem; }
.cf-foot a { color: var(--coral); }

.cf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
  .cf-wrap { padding: 0 1.5rem; }
  .cf-controls { grid-template-columns: 1fr 1fr; }
  .cf-doors { grid-template-columns: 1fr; }
  .cf-about-grid { grid-template-columns: 1fr; }
  .cf-tools { position: static; }
  .cf-dl { grid-template-columns: 1fr; gap: .15rem 0; }
  .cf-dl dt { padding-top: .8rem; }
}
@media (max-width: 560px) {
  .cf-hero { padding: 3rem 0 2.5rem; }
  .cf-controls { grid-template-columns: 1fr; }
  .cf-multi-panel { width: min(22rem, 92vw); }
  .cf-stats { gap: 1.75rem; }
  .cf-card { padding: 1.25rem 1.1rem; }
}