/* ==========================================================================
   CCRI Pathway Finder — public-facing styles
   Organized top to bottom in the order things appear on the page:
   header, filter bar, active-filter chips, result cards, empty/loading states.

   Colors and fonts match CCRI's brand standards:
     Primary:   Forest Green #00703c (confirmed official — the 2026 brand
                guidelines PDF states #005834, but that's incorrect)
     Secondary: Sunshine #F6D877, Sage #9ACD6E, Ocean #91C7D4, Teal #008D7F
     Tertiary:  Nickel #4A4B4B
     Fonts:     Roboto / Roboto Slab / Roboto Condensed (primary),
                New Spirit (headings/callouts)

   NOTE: this assumes Roboto, Roboto Slab, and New Spirit are already loaded
   sitewide by CCRI's headcode.inc (same as the rest of ccri.edu), so no
   @font-face or Google Fonts <link> is added here. If a font doesn't
   render once this is live in OmniCMS, that's the first thing to check.

   Sizing: em units throughout (not rem), matching site convention. Font
   sizes were also bumped up a step from the original pass, which ran small.
   ========================================================================== */

:root {
  --pw-green: #00703c;       /* CCRI primary */
  --pw-green-deep: #004e2a;  /* darker shade for gradients/hover, derived from the corrected primary */
  --pw-sunshine: #f6d877;    /* CCRI secondary - accents */
  --pw-sage: #9acd6e;
  --pw-ocean: #91c7d4;
  --pw-teal: #008d7f;
  --pw-nickel: #4a4b4b;      /* CCRI tertiary - body text */
  --pw-paper: #ffffff;
  --pw-ink: #282828;
  --pw-line: #dfe1e3;
  --pw-focus: #008d7f;
  --pw-radius: 10px;
  --pw-font-display: 'New Spirit', 'Roboto Slab', Georgia, serif;
  --pw-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

.pathway-app * {
  box-sizing: border-box;
}

.pathway-app {
  font-family: var(--pw-font-body);
  font-size: 1em;
  color: var(--pw-ink);
 
  margin: 0 auto;
}

/* ---------- Filters ---------- */
.pw-filters {
  background: #f5f5f5;
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius);
  padding: 1.75em;
  margin-bottom: 2em;
}

.pw-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.1em;
}

.pw-field label {
  display: block;
  font-size: 1em;
  font-weight: 600;
  color: var(--pw-green);
  margin-bottom: 0.4em;
}

.pw-field select {
  width: 100%;
  font-family: var(--pw-font-body);
  font-size: 1em;
  padding: 1em;
  padding-right: 2.2em;
  border-radius: 6px;
  border: 1px solid #282828;
  background: #fff;
  color: #282828;
  min-width: 150px;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' height='10' viewBox='0 0 18 10' width='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m17.5419 2.36978-7.4609 7.14844c-.23437.19531-.46875.27344-.66406.27344-.23437 0-.46875-.07813-.66406-.23438l-7.5-7.1875c-.390627-.35156-.390627-.97656-.03906-1.32812.35156-.390626.97656-.390626 1.32812-.03906l6.875 6.5625 6.83596-6.5625c.3515-.351566.9765-.351566 1.3281.03906.3516.35156.3516.97656-.0391 1.32812z' fill='%23262626'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - .625em) 50%;
  background-size: 1em;
  white-space: normal;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pw-field select:hover {
  border-color: var(--pw-green);
}

.pw-field select:focus-visible {
  outline: none;
  border-color: var(--pw-focus);
  box-shadow: 0 0 0 3px rgba(0,141,127,0.22);
}

.pw-field select:disabled {
  background-color: #f2f2f2;
  color: #9aa1a8;
  cursor: not-allowed;
}

.pw-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 1.1em;
  min-height: 1px;
}

.pw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--pw-green);
  color: #fff;
  font-size: 0.95em;
  font-weight: 600;
  padding: 0.4em 0.65em 0.4em 0.85em;
  border-radius: 999px;
}

.pw-chip button {
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  font-size: 0.9em;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pw-chip button:hover {
  background: rgba(255,255,255,0.32);
}

.pw-reset {
  margin-top: 1.1em;
  background: none;
  border: none;
  color: var(--pw-focus);
  font-family: var(--pw-font-body);
  font-weight: 600;
  font-size: 1em;
  cursor: pointer;
  padding: 0.2em 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pw-reset:hover {
  color: var(--pw-green-deep);
}

.pw-reset[hidden] {
  display: none;
}

/* ---------- Results ---------- */
.pw-result-count {
  font-size: 1em;
  font-weight: 600;
  color: var(--pw-ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1em;
}

.pw-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.1em;
}

.pw-card {
  background: #f5f5f5;
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius);
  padding: 1.4em 1.5em;
}

.pw-card-cluster {
    font-weight: 500;
    text-transform: uppercase;
    color: #7d7d7d;
    margin: 0 0 0.4em !important;
    font-size: .9em !important;
}
.pw-card-title {
    padding-bottom: 15px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    color: #292929;
    clear: both;
    line-height: 1.2em;
    font-size: 1.5em;
    letter-spacing: initial;
}

.pw-card-section {
  margin-top: 0.9em;
}

.pw-card-section h3 {
     font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pw-ink);
    margin: 0 0 0.4em;
    padding-bottom: .2em !important;
}

.pw-card-section ul {
    margin: 0;
    font-size: .9em;
    line-height: 1.5;
    margin-bottom: 1em !important;
}

.pw-card-section li {
  margin-bottom: 0.2em;
}

.pw-card-section .pw-muted {
  color: #9aa1a8;
  font-style: italic;
  font-size: 1em;
}

.pw-empty {
  text-align: center;
  padding: 3em 1em;
  color: var(--pw-ink);
  font-size: 1.1em;
}

.pw-loading {
  text-align: center;
  color: var(--pw-ink);
  font-size: 1.05em;
  padding: 2em 0;
}

.pw-loading[hidden] {
  display: none;
}