/* ══════════════════════════════════════════════════════════
   cstyles.css — Catalog-Specific Styles
   Paul D. Camp Community College
   Left sidebar "chapters" TOC — banner header, search box,
   and expandable subsections. Load AFTER styles.css.
   Meets WCAG 2.1 AA (contrast, focus visibility, keyboard
   and screen-reader operability).
   ══════════════════════════════════════════════════════════ */

:root {
  /* Dark gradient stop for the sidebar banner — chosen to keep
     black text at ~5.7:1+ contrast across the whole gradient
     (site's --navy-dark is too dark for black text: ~2.6:1) */
  --banner-dark: #218c1c;
}

/* ── Page Wrapper (catalog pages only — intentionally NOT
   .form-wrapper, which belongs to forms.css and is sized for
   narrow single-column forms) ── */
.catalog-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--white);
}

/* ── Catalog Page Layout ── */
.catalog-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Sidebar Container ── */
.catalog-toc {
  flex: 0 0 280px;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

/* ── Banner Header (gradient stays within a luminance range
   that passes AA contrast with BLACK text — navy-dark alone
   was too dark for that; this range tests ~5.7:1 to ~7:1) ── */
.toc-banner {
  background: linear-gradient(115deg, var(--banner-dark) 0%, var(--navy) 100%);
  border-bottom: 4px solid var(--gold);
  padding: 1rem 1.1rem 1.1rem;
}

.toc-banner h2 {
  margin: 0 0 .75rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: #000;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Search Box ── */
.toc-search {
  position: relative;
}

.toc-search input[type="search"] {
  width: 100%;
  padding: .55rem .6rem .55rem 2rem;
  border: 2px solid transparent;
  border-radius: 3px;
  font-family: var(--font-ui);
  font-size: .9rem;
  box-sizing: border-box;
}

.toc-search .toc-search-icon {
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.toc-search input[type="search"]:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px var(--navy-dark);
}

/* Screen-reader-only status message announcing result count */
#toc-search-status {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Chapter List ── */
.toc-list {
  list-style: none;
  counter-reset: chapter;
  margin: 0;
  padding: .5rem 0;
}

.toc-item {
  counter-increment: chapter;
  border-bottom: 1px solid var(--light);
}

.toc-row {
  display: flex;
  align-items: stretch;
}

.toc-link {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: .4rem;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  padding: .6rem .5rem .6rem .75rem;
  line-height: 1.3;
}

.toc-link::before {
  content: counter(chapter) ".";
  color: var(--navy-dark);
  flex-shrink: 0;
}

.toc-link:hover {
  background: var(--light);
}

.toc-link[aria-current="page"] {
  background: var(--mid);
  color: #000;
}

/* Entries with no page of their own (e.g. Academic Calendar, which
   only has subsection pages) are a <span>, not an <a> — same look,
   but no hover highlight or pointer cursor implying it's clickable */
span.toc-link {
  cursor: default;
}

span.toc-link:hover {
  background: none;
}

/* ── Dropdown Toggle Button ── */
.toc-toggle {
  flex: 0 0 auto;
  width: 2.4rem;
  background: transparent;
  border: none;
  border-left: 1px solid var(--light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-dark);
}

.toc-toggle:hover {
  background: var(--light);
}

.toc-toggle[aria-expanded="true"] .toc-caret {
  transform: rotate(180deg);
}

.toc-caret {
  display: inline-block;
  transition: transform .15s;
}

/* Shared focus style for links and buttons in the sidebar —
   uses a white ring + dark shadow so it stays visible against
   both white rows and the dark banner (site's default --focus
   orange tests under the WCAG 3:1 minimum for UI components) */
.toc-link:focus-visible,
.toc-toggle:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: -4px;
  box-shadow: 0 0 0 2px var(--navy-dark);
  position: relative;
  z-index: 1;
}

/* ── Subsections (revealed by the dropdown toggle) ── */
.toc-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--row-alt);
}

.toc-sub li {
  border-top: 1px solid var(--light);
}

.toc-sub a {
  display: block;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--text);
  padding: .5rem .75rem .5rem 2.1rem;
}

.toc-sub a:hover {
  background: var(--light);
}

.toc-sub a[aria-current="page"] {
  background: var(--mid);
  color: #000;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   Third-level nesting — for subsections that themselves expand
   into a chapters/sections/subsections tree (currently: Program
   Requirements, which branches into Career Pathways, which
   branch into individual programs). Reuses the same visual
   language as the two levels above (rotating caret, white-
   outline/dark-shadow double-ring focus) rather than inventing
   a new interaction pattern.
   ══════════════════════════════════════════════════════════ */

/* The <li> in .toc-sub that itself has a nested tree (e.g.
   "Program Requirements") needs its own row + toggle instead
   of being a plain link, so give it a reset from the plain
   .toc-sub li styling above. */
.toc-sub-item {
  border-top: 1px solid var(--light);
}

.toc-sub-row {
  display: flex;
  align-items: stretch;
}

.toc-sub-row a {
  flex: 1 1 auto;
  padding: .5rem .75rem .5rem 2.1rem;
}

.toc-subtoggle {
  flex: 0 0 auto;
  width: 2.1rem;
  background: transparent;
  border: none;
  border-left: 1px solid var(--light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-dark);
}

.toc-subtoggle:hover {
  background: var(--light);
}

.toc-subtoggle[aria-expanded="true"] .toc-caret {
  transform: rotate(180deg);
}

.toc-subtoggle:focus-visible,
.toc-sub-row a:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: -4px;
  box-shadow: 0 0 0 2px var(--navy-dark);
  position: relative;
  z-index: 1;
}

/* Container revealed by .toc-subtoggle — holds repeating
   pairs of a pathway label + its list of program links */
.toc-tree {
  background: var(--white);
  padding: .4rem 0 .4rem 0;
}

.toc-pathway-label {
  margin: .6rem 0 .2rem;
  padding: 0 .75rem 0 2.1rem;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy-dark);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.toc-tree .toc-pathway-label:first-child {
  margin-top: .2rem;
}

.toc-programs {
  list-style: none;
  margin: 0 0 .3rem;
  padding: 0;
}

.toc-programs li {
  margin: 0;
}

.toc-programs a {
  display: block;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--text);
  padding: .35rem .75rem .35rem 2.9rem;
  line-height: 1.35;
}

.toc-programs a:hover {
  background: var(--light);
}

.toc-programs a[aria-current="page"] {
  background: var(--mid);
  color: #000;
  font-weight: 700;
}

.toc-programs a:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: -4px;
  box-shadow: 0 0 0 2px var(--navy-dark);
  position: relative;
  z-index: 1;
}

/* Discontinued/status tag shown after a program name */
.toc-status {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
}

/* ── No-results message shown by search ── */
.toc-no-results {
  padding: 1rem .75rem;
  font-family: var(--font-ui);
  font-size: .85rem;
  color: var(--muted);
}

/* ── Full-site search results ──
   Shown in place of .toc-list while a search query is active;
   each result links straight to a matching page, with a text
   snippet (built from that page's real content) showing where
   the match occurred. */
.toc-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-search-result {
  border-bottom: 1px solid var(--light);
}

.toc-search-result a {
  display: block;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  padding: .6rem .75rem .2rem;
}

.toc-search-result a:hover {
  background: var(--light);
}

.toc-search-result a:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: -4px;
  box-shadow: 0 0 0 2px var(--navy-dark);
  position: relative;
  z-index: 1;
}

.toc-search-snippet {
  display: block;
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.4;
  padding: 0 .75rem .6rem;
}

.toc-search-snippet mark {
  background: #fff3b0;
  color: inherit;
  padding: 0 .1em;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .toc-toggle,
  .toc-subtoggle,
  .toc-caret,
  .subject-toggle,
  .subject-caret {
    transition: none;
  }
}

/* ── Main Catalog Content ── */
.catalog-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.5rem 2rem;
}

.catalog-content h1 {
  font-family: var(--font-ui);
  color: var(--navy-dark);
  margin-bottom: 1rem;
}

.catalog-content h2 {
  font-family: var(--font-ui);
  color: var(--navy-dark);
  font-size: 1.3rem;
  margin-top: 2rem;
  margin-bottom: .75rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--gold);
}

.catalog-content h3 {
  font-family: var(--font-ui);
  color: var(--navy-dark);
  font-size: 1.05rem;
  margin-top: 1.25rem;
  margin-bottom: .5rem;
}

.catalog-content p {
  margin-bottom: 1rem;
}

.catalog-content ul {
  margin: 0 0 1rem 1.5rem;
}

.catalog-content ol {
  margin: 0 0 1rem 1.5rem;
}

.catalog-content ol ol {
  margin-top: .3rem;
}

.catalog-content li {
  margin-bottom: .3rem;
}

.table-scroll {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.catalog-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.catalog-content caption {
  text-align: left;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: .5rem;
  font-size: 1.1rem;
}

.catalog-content th,
.catalog-content td {
  border: 1px solid var(--border);
  padding: .5rem .6rem;
  text-align: left;
  vertical-align: top;
}

.catalog-content thead th {
  background: var(--mid);
  color: #000;
}

.catalog-content tbody tr:nth-child(even) {
  background: var(--row-alt);
}

@media print {
  .catalog-content tr {
    break-inside: avoid;
  }

  /* Header background may or may not survive printing depending on
     the browser's "print backgrounds" setting — force black text so
     the headers stay legible either way, rather than depending on it. */
  .catalog-content thead th {
    color: #000 !important;
  }

  /* Compact spacing so multi-row calendar tables fit in fewer pages */
  body {
    padding: 0.25rem !important;
    font-size: 11px;
  }
  .catalog-content h1 {
    font-size: 1.1rem;
    margin-bottom: .4rem;
  }
  .catalog-content table {
    font-size: 8.5px;
  }
  .catalog-content caption {
    font-size: .85rem;
    margin-bottom: .2rem;
  }
  .catalog-content th,
  .catalog-content td {
    padding: .15rem .25rem;
    line-height: 1.15;
  }
  .table-scroll {
    margin-bottom: .5rem;
    overflow-x: visible;
  }
}

.catalog-hero-image {
  margin-bottom: 1.5rem;
}

.catalog-hero-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.accred-seal-block {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.accred-seal {
  flex: 0 0 140px;
  width: 140px;
  height: auto;
}

.accred-seal-block p {
  flex: 1 1 auto;
  margin-bottom: 0;
}

@media (max-width: 500px) {
  .accred-seal-block {
    flex-direction: column;
  }
  .accred-seal {
    width: 100px;
    flex-basis: auto;
  }
}

/* ── Responsive ── */
@media (max-width: 800px) {
  .catalog-layout {
    flex-direction: column;
  }
  .catalog-toc {
    position: static;
    width: 100%;
  }
}

/* ── Print / Save as PDF Button ──
   Add this markup at the bottom of a chapter page's content:
   <div class="print-button-wrapper no-print">
     <button type="button" class="btn" onclick="window.print()">Print or save as PDF</button>
   </div>
   Uses the site's existing .btn class from styles.css for visual
   consistency. .no-print hides the wrapper itself when printing —
   see the expanded @media print block below. */
.print-button-wrapper {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--light);
  text-align: center;
}

/* ── Print "Program Map Only" mode ──
   Used on individual program pages (progXXX.html) AND on
   combined certs/CSC pages that hold several programs under
   one <section class="program-section" id="PLANCODE">. The
   print button adds a temporary class to <body> before calling
   window.print(), removed again on the browser's afterprint
   event. Only elements marked .map-keep survive printing —
   normally the page/section heading and quick-facts block, plus
   the .program-map wrapper around the curriculum table and its
   footnotes.

   On a combined page, clicking a specific section's print
   button also temporarily adds .map-keep + .print-target to
   THAT section only (removed on afterprint), so the first rule
   below hides every other section entirely, and the second rule
   strips that one section down to just its own .map-keep parts.
   Markup pattern:
     <script>
     function printProgramMap(sectionId) {
       document.querySelectorAll('.program-section').forEach(function (el) {
         el.classList.remove('print-target', 'map-keep');
       });
       if (sectionId) {
         var target = document.getElementById(sectionId);
         if (target) target.classList.add('print-target', 'map-keep');
       }
       document.body.classList.add('print-map-only');
       window.print();
     }
     window.addEventListener('afterprint', function () {
       document.body.classList.remove('print-map-only');
       document.querySelectorAll('.program-section').forEach(function (el) {
         el.classList.remove('print-target', 'map-keep');
       });
     });
     </script>
*/
@media print {
  body.print-map-only .catalog-content > :not(.map-keep) {
    display: none !important;
  }
  body.print-map-only .program-section.print-target > :not(.map-keep) {
    display: none !important;
  }
}

/* ── Print ── */
@media print {
  header,
  #toptoc,
  .catalog-toc,
  .no-print {
    display: none !important;
  }
  .catalog-wrapper {
    max-width: none;
    background: none;
  }
  .catalog-layout {
    display: block;
  }
  .catalog-content {
    padding: 0;
  }
}

/* ══════════════════════════════════════════════════════════
   Course Listing — subject-toggle accordion + search
   Added for acadcourselistings.html. Reuses the same visual
   language as the sidebar TOC (gold-accented banners, white-
   outline/dark-shadow double-ring focus, rotating caret) so
   the page reads as part of the same system rather than a
   one-off widget. All colors come from variables already
   defined in styles.css / above in this file.
   ══════════════════════════════════════════════════════════ */

.course-search-wrap {
  position: relative;
  margin-bottom: 1.5rem;
}

.course-search-wrap input[type="search"] {
  width: 100%;
  padding: .7rem .8rem .7rem 2.4rem;
  border: 2px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 1rem;
  box-sizing: border-box;
}

.course-search-wrap input[type="search"]:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px var(--navy-dark);
}

.course-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

#course-search-status {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.course-listing-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.course-listing-controls .btn-text {
  background: none;
  border: none;
  color: var(--navy-dark);
  font-family: var(--font-ui);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: .3rem .1rem;
  flex-shrink: 0;
}

.course-listing-controls .btn-text:focus-visible {
  outline: 3px solid var(--navy-dark);
  outline-offset: 2px;
}

.subject-group {
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: .6rem;
  overflow: hidden;
}

.subject-heading {
  margin: 0;
  font-size: 1rem;
}

.subject-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--mid);
  border: none;
  border-bottom: 3px solid var(--gold);
  padding: .8rem 1rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
}

.subject-toggle:hover {
  background: var(--light);
}

.subject-name {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 1rem;
  color: #000;
}

.subject-count {
  flex: 0 0 auto;
  font-size: .8rem;
  color: var(--navy-dark);
  font-weight: 400;
}

.subject-caret {
  flex: 0 0 auto;
  color: var(--navy-dark);
  transition: transform .15s;
}

.subject-toggle[aria-expanded="true"] .subject-caret {
  transform: rotate(180deg);
}

.subject-toggle:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: -4px;
  box-shadow: 0 0 0 2px var(--navy-dark);
  position: relative;
  z-index: 1;
}

.subject-panel {
  background: var(--white);
  padding: 0 1rem;
}

.course-entry {
  padding: 1rem 0;
  border-top: 1px solid var(--light);
}

.subject-panel .course-entry:first-child {
  border-top: none;
}

.course-title {
  font-family: var(--font-ui);
  color: var(--navy-dark);
  font-size: 1rem;
  margin: 0 0 .4rem;
}

.course-desc {
  margin: 0 0 .5rem;
}

.course-meta {
  font-size: .85rem;
  color: var(--muted);
  margin: 0 0 .3rem;
  line-height: 1.5;
}

.course-outline {
  margin: 0;
  font-size: .85rem;
}

/* Search-match highlighting within course titles */
.course-entry.search-match .course-title {
  background: linear-gradient(transparent 60%, #fff3b0 60%);
}

/* Hidden state applied by JS filtering, distinct from the
   [hidden] attribute used for the collapsed/expanded toggle
   state so the two mechanisms don't fight each other */
.subject-group.search-hidden,
.course-entry.search-hidden {
  display: none;
}

.course-listing-noresults {
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-ui);
}