/* =============================================================
   SGA Course Catalog
   Scoped stylesheet — applies only inside the .cc wrapper so it
   never overrides the theme's global H1/H2/H3 or Bootstrap styles.
   Every class in the catalog markup is prefixed cc- for the same
   reason (Bootstrap ships .card, .badge, .list, etc.).

   Light mode only, official SGA palette:
     --cc-blue        #005289  primary blue
     --cc-teal        #00948f  primary teal (decorative only)
     --cc-blue-dk     #003762  dark blue
     --cc-teal-dk     #006763  dark teal (teal-family text)
     --cc-green       #b4d88b  green highlight
     --cc-yellow      #ffde6c  yellow highlight
     --cc-offwhite    #f7f7f7  off-white background
   Font: franklin-gothic-urw, served site-wide by the theme's
   Adobe Fonts kit.
   ============================================================= */

.cc {
  --cc-blue: #005289;
  --cc-teal: #00948f;
  --cc-blue-dk: #003762;
  --cc-teal-dk: #006763;
  --cc-green: #b4d88b;
  --cc-yellow: #ffde6c;
  --cc-offwhite: #f7f7f7;
  --cc-ink: #1a2230;
  --cc-ink-soft: #4a5568;
  --cc-border: #e4e7ec;
  --cc-chip-bg: #eaf2f7;
  --cc-chip-line: #d3e3ee;

  --cc-font: "franklin-gothic-urw", "Libre Franklin", "Franklin Gothic Medium",
             "Arial Narrow", Arial, sans-serif;
  --cc-maxw: 1200px;
  --cc-gutter: clamp(1.25rem, 4vw, 3rem);

  /* Height of the fixed theme header; course-catalog.js keeps it
     in sync as the header shrinks on scroll or changes per breakpoint. */
  --cc-head: 135px;
  --cc-bar: 64px;

  display: block;
  font-family: var(--cc-font);
  color: var(--cc-ink-soft);
  font-size: 17px;
  line-height: 1.6;
  background: #fff;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Resets inside the wrapper only ----------------------- */
.cc *, .cc *::before, .cc *::after { box-sizing: border-box; }
.cc h1, .cc h2, .cc h3, .cc h4 {
  font-family: var(--cc-font);
  color: var(--cc-ink);
  margin: 0;
  text-transform: none;
  text-wrap: balance;
}
.cc p, .cc ul, .cc ol, .cc dl, .cc dd { margin: 0; }
.cc img { max-width: 100%; display: block; }
.cc a { color: var(--cc-blue); }
.cc a:hover { color: var(--cc-blue-dk); }
.cc [id] { scroll-margin-top: calc(var(--cc-head) + var(--cc-bar) + 16px); }
.cc :focus-visible { outline: 3px solid var(--cc-teal); outline-offset: 2px; border-radius: 2px; }

.cc-wrap {
  width: 100%;
  max-width: var(--cc-maxw);
  margin: 0 auto;
  padding-left: var(--cc-gutter);
  padding-right: var(--cc-gutter);
}

.cc-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-teal-dk);
}

/* =============================================================
   1. HERO (dark blue, replaces the old standalone logo header)
   ============================================================= */
.cc-hero {
  background: linear-gradient(135deg, #003762 0%, #00343f 60%, #006763 100%);
  color: #fff;
}
.cc-hero .cc-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.cc-hero .cc-eyebrow { color: var(--cc-yellow); margin-bottom: 1rem; }
.cc-hero .cc-eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 0.6rem;
  vertical-align: middle;
}
.cc-hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}
.cc-hero .cc-lede {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 62ch;
}
.cc-stats {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: clamp(1.5rem, 2.5vw, 2.5rem);
}
.cc-stat b {
  display: block;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1;
  font-weight: 700;
  color: var(--cc-yellow);
  font-variant-numeric: tabular-nums;
}
.cc-stat span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* =============================================================
   2. ORIENTATION (white, three teal-ruled cards)
   ============================================================= */
.cc-orient { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.cc-orient-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1.5rem;
}
.cc-panel {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-top: 4px solid var(--cc-teal);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  min-width: 0;
  font-size: 1rem;
}
.cc-panel h2 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-teal-dk);
  margin-bottom: 0.9rem;
}
.cc-ways { display: grid; gap: 0.9rem; margin-top: 1rem; }
.cc-way h3 { font-size: 1.1rem; font-weight: 700; color: var(--cc-blue); margin-bottom: 0.15rem; }
.cc-steps { padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.cc-steps b { color: var(--cc-ink); }
.cc-key { display: grid; gap: 0.6rem; }
.cc-key div { display: grid; grid-template-columns: 96px 1fr; gap: 0.75rem; align-items: baseline; }
.cc-key dt {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-blue);
  background: var(--cc-chip-bg);
  border: 1px solid var(--cc-chip-line);
  border-radius: 2px;
  padding: 2px 6px;
  text-align: center;
}
.cc-key dd { font-size: 0.95rem; }
.cc-note { font-size: 0.9rem; color: var(--cc-ink-soft); margin-top: 0.9rem; }
.cc-why { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--cc-border); font-size: 0.95rem; }

/* =============================================================
   3. STICKY SEARCH BAR (sits directly under the fixed theme header)
   ============================================================= */
.cc-bar {
  position: sticky;
  top: var(--cc-head);
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
}
.cc-bar .cc-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.cc-search { flex: 1 1 280px; position: relative; min-width: 0; margin: 0; }
.cc-search input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  padding: 0.65rem 0.8rem 0.65rem 2.4rem;
  border: 1px solid #c9d2dc;
  border-radius: 2px;
  background: #fff;
  color: var(--cc-ink);
  -webkit-appearance: none;
  appearance: none;
}
.cc-search input:focus { border-color: var(--cc-blue); outline: 2px solid var(--cc-blue); outline-offset: 0; }
.cc-search svg {
  position: absolute; left: 0.8rem; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  fill: none; stroke: var(--cc-ink-soft); stroke-width: 2;
}
.cc-fmtfilter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cc-fmtfilter button {
  font-family: var(--cc-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0.55rem 0.85rem;
  border-radius: 2px;
  border: 2px solid var(--cc-blue);
  background: transparent;
  color: var(--cc-blue);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.cc-fmtfilter button:hover { background: var(--cc-chip-bg); }
.cc-fmtfilter button[aria-pressed="true"] { background: var(--cc-blue); color: #fff; }
.cc-result { font-size: 0.9rem; color: var(--cc-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =============================================================
   4. CATALOG LAYOUT (off-white field, rail + content)
   ============================================================= */
.cc-catalog-field { background: var(--cc-offwhite); }
.cc-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 2rem;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.cc-rail {
  position: sticky;
  top: calc(var(--cc-head) + var(--cc-bar) + 1.5rem);
  align-self: start;
  display: grid;
  gap: 2px;
  max-height: calc(100vh - var(--cc-head) - var(--cc-bar) - 3rem);
  overflow-y: auto;
}
.cc-rail p {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-teal-dk);
  margin-bottom: 0.4rem;
}
.cc-rail p.cc-next { margin-top: 1.1rem; }
.cc .cc-navlink {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  text-decoration: none;
  color: var(--cc-ink);
  font-size: 0.95rem;
  line-height: 1.3;
  border-left: 3px solid transparent;
}
.cc .cc-navlink:hover { background: #fff; color: var(--cc-blue); }
.cc .cc-navlink.cc-active { border-left-color: var(--cc-teal); background: #fff; color: var(--cc-blue); font-weight: 600; }
.cc .cc-navlink.cc-dim { opacity: .45; }
.cc-navlink .cc-n { color: var(--cc-ink-soft); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---- Section heads ----------------------------------------- */
.cc-cap, .cc-path, .cc-browse { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.cc-caphead {
  display: grid;
  gap: 0.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--cc-blue-dk);
}
.cc-caphead h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cc-blue-dk);
}
.cc-caphead .cc-tag { font-size: 1.1rem; font-weight: 600; color: var(--cc-ink); }
.cc-caphead .cc-intro { max-width: 70ch; }
.cc-best { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; font-size: 0.95rem; }
.cc-best span {
  background: var(--cc-green);
  color: var(--cc-blue-dk);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
}
.cc-count { font-size: 0.9rem; color: var(--cc-ink-soft); font-variant-numeric: tabular-nums; }

/* ---- Browse cards ------------------------------------------ */
.cc-pcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-top: 0.4rem;
}
.cc .cc-pcard {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-top: 4px solid var(--cc-teal);
  padding: 1rem 1.15rem 1.15rem;
  text-decoration: none;
  color: var(--cc-ink-soft);
  font-size: 0.95rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cc .cc-pcard:hover { border-color: var(--cc-blue); border-top-color: var(--cc-blue); box-shadow: 0 4px 14px rgba(0, 55, 98, .08); color: var(--cc-ink-soft); }
.cc-pcard b { color: var(--cc-blue); font-size: 1.1rem; line-height: 1.25; }
.cc-pcard .cc-pn { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-teal-dk); }

/* ---- Course rows ------------------------------------------- */
.cc-list { display: grid; gap: 0.5rem; }
.cc-course { background: #fff; border: 1px solid var(--cc-border); border-left: 4px solid transparent; }
.cc-course[open] { border-left-color: var(--cc-teal); box-shadow: 0 4px 14px rgba(0, 55, 98, .08); }
.cc-course summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1rem;
  padding: 0.9rem 2.8rem 0.9rem 1rem;
  position: relative;
}
.cc-course summary::-webkit-details-marker { display: none; }
.cc-course summary::after {
  content: "";
  position: absolute; right: 1.1rem; top: 1.25rem;
  width: 9px; height: 9px;
  border-right: 2px solid var(--cc-blue);
  border-bottom: 2px solid var(--cc-blue);
  transform: rotate(45deg);
  transition: transform .15s;
}
.cc-course[open] summary::after { transform: rotate(-135deg); top: 1.5rem; }
.cc .cc-t { color: var(--cc-ink); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.cc-course summary:hover .cc-t { color: var(--cc-blue); }
.cc-tgroup { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; min-width: 0; }
/* Campus link: small teal tag, same footprint as the Badge / Best for tags. */
.cc .cc-access {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--cc-teal-dk);
  color: #fff;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background-color .18s ease;
}
.cc .cc-access:hover, .cc .cc-access:focus-visible { background: var(--cc-blue-dk); color: #fff; text-decoration: none; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; justify-content: flex-end; }
.cc-who { grid-column: 1 / -1; font-size: 0.9rem; color: var(--cc-ink-soft); }

/* Chips: delivery formats are blue tint; duration/level/PDH are neutral. */
.cc-fmt {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--cc-chip-bg); color: var(--cc-blue); border: 1px solid var(--cc-chip-line);
  padding: 2px 7px; border-radius: 2px; white-space: nowrap;
}
.cc-dur, .cc-lvl, .cc-pdh {
  font-size: 0.78rem; color: var(--cc-ink);
  background: var(--cc-offwhite); border: 1px solid var(--cc-border);
  padding: 2px 7px; border-radius: 2px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cc-dur small, .cc-lvl small { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-ink-soft); }
.cc-dur b, .cc-lvl b, .cc-pdh b { font-weight: 700; }
.cc-badge {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--cc-yellow); color: var(--cc-blue-dk);
  padding: 2px 7px; border-radius: 2px; white-space: nowrap;
}

/* Expanded course profile */
.cc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.75rem;
  padding: 0.25rem 1rem 1.25rem;
  border-top: 1px solid var(--cc-border);
}
.cc-main { display: grid; gap: 1.1rem; padding-top: 1rem; min-width: 0; }
.cc-main section { display: grid; gap: 0.5rem; }
.cc h4 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-teal-dk);
}
.cc-main p { max-width: 72ch; }
.cc-main ul, .cc-card ul { padding-left: 1.2rem; display: grid; gap: 0.25rem; }
.cc .cc-topics { columns: 2; column-gap: 1.75rem; display: block; }
.cc-topics li { break-inside: avoid; margin-bottom: 0.25rem; }
.cc-side { display: grid; gap: 0.75rem; align-content: start; padding-top: 1rem; min-width: 0; }
.cc-card {
  background: var(--cc-offwhite);
  border-top: 4px solid var(--cc-teal);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.92rem;
}
.cc-card .cc-details { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.cc-fmts { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.cc-person { display: grid; gap: 0.35rem; }
.cc-person + .cc-person { border-top: 1px solid var(--cc-border); padding-top: 0.65rem; }
.cc-name { font-weight: 700; color: var(--cc-ink); }
.cc-role { font-style: italic; color: var(--cc-ink-soft); font-size: 0.85rem; }
.cc-inst p:not(.cc-name):not(.cc-role) { font-size: 0.88rem; }

/* ---- Pathways ---------------------------------------------- */
.cc-path p { max-width: 72ch; }
.cc-stage { margin-top: 1.4rem; display: grid; gap: 0.5rem; }
.cc-stage h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cc-blue);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--cc-border);
}
.cc-area { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.cc .cc-area h4 { font-size: 1.05rem; color: var(--cc-blue-dk); text-transform: none; letter-spacing: 0; font-weight: 700; }
.cc-plabel { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cc-teal-dk); }
.cc-plist { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.cc-plist li { background: #fff; border: 1px solid var(--cc-border); border-left: 4px solid var(--cc-teal); }
.cc .cc-prow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1rem;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: inherit;
}
.cc .cc-prow:hover { color: inherit; }
.cc-prow:hover .cc-t { color: var(--cc-blue); text-decoration: underline; }
.cc-plist .cc-note { font-size: 0.92rem; padding: 0 1rem 0.9rem; margin-top: -0.3rem; }

/* ---- Empty state + closing note ---------------------------- */
.cc-empty { background: #fff; border: 1px dashed #c9d2dc; padding: 2rem; text-align: center; margin-bottom: 2rem; }
.cc-empty button {
  font-family: var(--cc-font);
  margin-top: 0.8rem;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.75rem 1.4rem;
  border-radius: 2px;
  border: 2px solid var(--cc-blue);
  background: var(--cc-blue);
  color: #fff;
  cursor: pointer;
}
.cc-empty button:hover { background: var(--cc-blue-dk); border-color: var(--cc-blue-dk); }
.cc-footnote { border-top: 1px solid var(--cc-border); background: #fff; }
.cc-footnote .cc-wrap { padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: 0.9rem; color: var(--cc-ink-soft); }

.cc [hidden] { display: none !important; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 991px) {
  .cc-orient-grid { grid-template-columns: 1fr 1fr; }
  .cc-orient-grid .cc-panel:first-child { grid-column: 1 / -1; }
  .cc-layout { grid-template-columns: 1fr; }
  .cc-rail {
    position: static;
    max-height: none;
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
  }
  .cc-rail p { display: none; }
  .cc .cc-navlink { white-space: nowrap; border: 1px solid var(--cc-border); background: #fff; }
  .cc .cc-navlink.cc-active { border-color: var(--cc-teal); }
}
@media (max-width: 900px) {
  .cc-hero .cc-wrap { grid-template-columns: 1fr; align-items: start; }
  .cc-stats { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 1.5rem; }
}
@media (max-width: 720px) {
  .cc-orient-grid { grid-template-columns: 1fr; }
  .cc-body { grid-template-columns: 1fr; }
  .cc-course summary, .cc .cc-prow { grid-template-columns: 1fr; }
  .cc-meta { justify-content: flex-start; }
  .cc .cc-topics { columns: 1; }
  .cc-fmtfilter { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
  .cc-fmtfilter button { white-space: nowrap; padding: 0.45rem 0.7rem; }
  .cc-bar .cc-wrap { gap: 0.5rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  /* Count stays announced to screen readers; per-section counts show it visually. */
  .cc-result { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 520px) {
  .cc { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .cc-bar, .cc-rail { display: none; }
  .cc-layout { grid-template-columns: 1fr; }
  .cc-course { break-inside: avoid; }
}