/*
 * DNCG Course Compare 2.0: "Add to compare" and the comparison table.
 *
 * Loaded while the network switch dncg_compare_everywhere is on; 1.x's
 * public/css/compare.css serves the switch-off path, unchanged.
 *
 * The theme's contract holds here as in the theme: no literal colour in any
 * notation, theme tokens only (each child theme sets the values), and no
 * text below --fs-min (1.1rem). Buttons are the theme's own (.btn
 * .btn--primary / --lime / --outline / --white-outline); this sheet only
 * sizes and spaces them where they sit. One rule per component.
 */

/* ------------------------------------------------------------ utilities */

/* Read out, not shown. */
.dncg-cc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------ header count (as 1.x) */

/* margin-right: auto keeps the badge beside the label when the mobile
   accordion turns the anchor into a space-between flex row. */
.dncg-mycourses__count { display: inline-block; margin-left: 8px; margin-right: auto; font-family: var(--font-mono); font-size: var(--fs-min); font-weight: 700; line-height: 1.3; color: var(--btn-accent-text); background: var(--btn-accent-bg); min-width: 22px; text-align: center; padding: 0 6px; border-radius: var(--radius-pill); vertical-align: middle; }
.dncg-mycourses__count--empty { display: none; }
.dncg-mycourses-item > a { display: inline-flex; align-items: center; gap: 8px; }
.dncg-mycourses-item .dncg-mycourses__count { margin: 0; flex: 0 0 auto; }

/* ---------------------------------------------------------------- toast */

.dncg-cc-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 12px); z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; max-width: calc(100vw - 32px); background: var(--navy); color: var(--white); font-size: var(--fs-min); font-weight: 700; padding: .75rem 1.4rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.dncg-cc-toast--show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dncg-cc-toast__link { color: var(--accent-on-dark, var(--white)); text-decoration: underline; }
.dncg-cc-toast__link:focus-visible { outline: 3px solid var(--focus-halo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .dncg-cc-toast { transition: none; }
}

/* ----------------------------------------------------------- checkboxes */

/* "Add to compare" / "Compare": a real checkbox, drawn. The input stays in
   the page (focusable, announced as a checkbox with its state); the label
   carries the focus ring. */
.dncg-cc-check { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-size: var(--fs-min); font-weight: 700; line-height: 1.3; }
.dncg-cc-check__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dncg-cc-check__box { flex: 0 0 auto; position: relative; width: 1.15em; height: 1.15em; border: 2px solid currentColor; border-radius: var(--radius-sm); background: transparent; }
.dncg-cc-check__input:checked + .dncg-cc-check__box::after { content: ""; position: absolute; left: 32%; top: 8%; width: 30%; height: 60%; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg); }
/* Keyboard focus only (a mouse click leaves the box focused too). */
.dncg-cc-check:has(.dncg-cc-check__input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 3px var(--focus-halo); }
.dncg-cc-check.is-busy { cursor: progress; opacity: .7; }

/* On a card: under the card's facts, in link colour. */
.dncg-cc-check--card { margin-top: .9rem; padding: .35rem .2rem; color: var(--link); }
.dncg-cc-check--card.is-on { color: var(--navy); }

/* Beside a search result row (1.x's place for its "+"). */
.dncg-cc-check--row { flex: 0 0 auto; align-self: center; margin-left: .6rem; padding: .35rem .5rem; color: var(--link); }
.dncg-course-list li { display: flex; align-items: stretch; }
.dncg-course-list li > a { flex: 1 1 auto; }

/* The course page: the theme's own button (white outline in the hero, navy
   outline under a plain heading), a step smaller than the hero's main
   buttons. */
.dncg-cc-check--button.btn { padding: .55rem 1.2rem; gap: .55rem; }
.dncg-cc-check--button.is-on.btn--white-outline { background: var(--white); color: var(--navy); border-color: var(--white); }
.dncg-cc-check--button.is-on.btn--outline { background: var(--navy); color: var(--white); }

/* ------------------------------------------------- course page add row */

.dncg-cc-add { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.2rem; margin: 1rem 0 1.4rem; }
.dncg-cc-add__link { font-size: var(--fs-min); font-weight: 700; color: var(--link); text-decoration: underline; }
/* In the hero: a quieter second row tucked under the main buttons (as 1.x). */
.dncg-cc-add--hero { margin: -1.2rem 0 2rem; }
/* The apprenticeship hero's button row is a paragraph with no 2rem gap to
   tuck into. */
.appr-hero__actions + .dncg-cc-add--hero { margin: .4rem 0 1.6rem; }
.dncg-cc-add--hero .dncg-cc-add__link { color: var(--page-title-fg, var(--white)); }
.dncg-cc-add__link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 3px var(--focus-halo); }

/* ---------------------------------------------------------------- page */

.dncg-cc-page { background: var(--surface, var(--white)); }
.dncg-cc-page__inner { max-width: var(--content-max); margin: 0 auto; padding: 2.6rem var(--page-gutter) 3.6rem; }
.dncg-cc-page__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.2rem, 3.5vw, 3rem); color: var(--text-heading, var(--navy)); margin: 0 0 .6rem; }
.dncg-cc-page__title:focus { outline: none; }
.dncg-cc-page__title:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.dncg-cc-page__intro { font-size: var(--fs-min); line-height: 1.6; color: var(--muted); max-width: 70ch; margin: 0 0 1.8rem; }

.dncg-cc-status { display: flex; align-items: center; gap: 12px; font-size: var(--fs-min); color: var(--muted); }
.dncg-cc-status::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: dncg-cc-spin .8s linear infinite; }
@keyframes dncg-cc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .dncg-cc-status::before { animation: none; }
}

.dncg-cc-empty { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--light); padding: 2rem 2.2rem; max-width: 760px; }
.dncg-cc-empty__title { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--navy); margin: 0 0 .6rem; }
.dncg-cc-empty p { font-size: var(--fs-min); line-height: 1.6; color: var(--ink); margin: 0 0 1.2rem; }

.dncg-cc-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.dncg-cc-search__label { flex: 1 0 100%; font-size: var(--fs-min); font-weight: 700; color: var(--navy); }
.dncg-cc-search__input { flex: 1 1 16rem; min-height: 3rem; padding: .55rem .9rem; font-size: var(--fs-min); color: var(--ink); background: var(--white); border: 2px solid var(--control-border, var(--line)); border-radius: var(--radius-sm); }
.dncg-cc-search__input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.dncg-cc-notice { font-size: var(--fs-min); line-height: 1.55; color: var(--notice-info-text); background: var(--notice-info-bg); border: 1px solid var(--notice-info-line); border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin: 0 0 1.2rem; }
.dncg-cc-shared { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.dncg-cc-shared p { flex: 1 1 24rem; margin: 0; }
.dncg-cc-shared__own { font-weight: 700; color: var(--link); }

.dncg-cc-hint { font-size: var(--fs-min); color: var(--muted); margin: 1.2rem 0 0; }
.dncg-cc-hint a { font-weight: 700; color: var(--link); }

/* -------------------------------------------------------------- toolbar */

.dncg-cc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin: 0 0 1.2rem; }
.dncg-cc-tool.btn { padding: .55rem 1.2rem; }
@media (max-width: 40em) {
    .dncg-cc-switch { flex: 1 0 100%; }
}
.dncg-cc-switch { display: inline-flex; align-items: center; gap: .7rem; margin-right: auto; cursor: pointer; font-size: var(--fs-min); font-weight: 700; color: var(--navy); }
.dncg-cc-switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dncg-cc-switch__label { display: inline-flex; align-items: center; gap: .7rem; }
.dncg-cc-switch__label::before { content: ""; flex: 0 0 auto; width: 2.6rem; height: 1.5rem; border-radius: var(--radius-pill); border: 2px solid var(--navy); background: var(--white); box-shadow: inset -1.1rem 0 0 0 var(--white), inset 0 0 0 1.5rem var(--line); transition: box-shadow .15s ease; }
.dncg-cc-switch__input:checked + .dncg-cc-switch__label::before { box-shadow: inset 1.1rem 0 0 0 var(--white), inset 0 0 0 1.5rem var(--navy); }
.dncg-cc-switch__input:focus-visible + .dncg-cc-switch__label::before { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .dncg-cc-switch__label::before { transition: none; }
}

.dncg-cc-linkbox { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin: 0 0 1.2rem; font-size: var(--fs-min); }
.dncg-cc-linkbox label { font-weight: 700; color: var(--navy); }
.dncg-cc-linkbox input { flex: 1 1 20rem; min-height: 2.8rem; padding: .45rem .8rem; font-size: var(--fs-min); color: var(--ink); background: var(--light); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* Which courses are side by side, when they do not all fit. */
.dncg-cc-picker { margin: 0 0 1rem; }
.dncg-cc-picker[hidden] { display: none; }
.dncg-cc-picker__label { font-size: var(--fs-min); color: var(--muted); margin: 0 0 .5rem; }
.dncg-cc-picker__list { display: flex; flex-wrap: wrap; gap: .5rem; }
/* One line each, cut with an ellipsis: the whole title is still the
   button's text, so it is what a screen reader reads. */
.dncg-cc-pick { cursor: pointer; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; font-size: var(--fs-min); font-weight: 700; line-height: 1.3; color: var(--navy); background: var(--white); border: 2px solid var(--navy); border-radius: var(--radius-pill); padding: .4rem .9rem; }
.dncg-cc-pick[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.dncg-cc-pick:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }

/* ---------------------------------------------------------------- table */

/* Sticky headings stick to the top of the screen, under the admin bar when
   there is one. No ancestor may clip or scroll (it would trap them), which
   is why the table never scrolls sideways: it stacks instead (below). */
.dncg-cc-wrap { --dncg-cc-top: 0px; }
.admin-bar .dncg-cc-wrap { --dncg-cc-top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .dncg-cc-wrap { --dncg-cc-top: 46px; }
}
@media screen and (max-width: 600px) {
    .admin-bar .dncg-cc-wrap { --dncg-cc-top: 0px; }
}

.dncg-cc-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--fs-min); line-height: 1.55; color: var(--ink); }
.dncg-cc-table th, .dncg-cc-table td { text-align: left; vertical-align: top; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.dncg-cc-table td + td, .dncg-cc-table th + td, .dncg-cc-table th + th, .dncg-cc-table td + th { border-left: 1px solid var(--line); }

/* Course headings. */
.dncg-cc-corner { width: 13rem; }
.dncg-cc-headrow > * { position: sticky; top: var(--dncg-cc-top); z-index: 3; background: var(--white); border-bottom: 2px solid var(--navy); }
.dncg-cc-course { font-weight: 400; }
.dncg-cc-course__college { display: block; font-size: var(--fs-min); font-weight: 700; color: var(--muted); margin-bottom: .2rem; }
.dncg-cc-course__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: var(--link); text-decoration: none; margin-bottom: .35rem; overflow-wrap: anywhere; }
.dncg-cc-course__title:hover { text-decoration: underline; }
.dncg-cc-course__summary { display: block; font-size: var(--fs-min); color: var(--ink); margin-bottom: .5rem; }
.dncg-cc-remove { cursor: pointer; border: 0; background: none; padding: .2rem 0; font-size: var(--fs-min); font-weight: 700; color: var(--muted); text-decoration: underline; }
.dncg-cc-remove:hover { color: var(--navy); }

/* Groups and rows. */
.dncg-cc-grouphead { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--navy); background: var(--light); padding-top: 1.4rem !important; }
.dncg-cc-rowhead { font-weight: 700; color: var(--navy); background: var(--surface-alt, var(--light)); }
.dncg-cc-rowhead__label { display: block; }
.dncg-cc-differs { display: none; margin-top: .3rem; width: max-content; max-width: 100%; font-size: var(--fs-min); font-weight: 700; line-height: 1.3; color: var(--warning); background: var(--warning-tint); border-radius: var(--radius-pill); padding: .1rem .6rem; }
.dncg-cc-row.is-diff .dncg-cc-differs { display: block; }
.dncg-cc-row.is-diff .dncg-cc-rowhead { box-shadow: inset var(--card-edge, 4px) 0 0 0 var(--accent); }
.dncg-cc-row[hidden], .dncg-cc-group[hidden] { display: none; }

/* Values. */
.dncg-cc-cell p { margin: 0 0 .5rem; }
.dncg-cc-cell p:last-child { margin-bottom: 0; }
.dncg-cc-lead { color: var(--ink); }
.dncg-cc-list { margin: 0 0 .5rem; padding-left: 1.2rem; }
.dncg-cc-list li { margin: 0 0 .25rem; }
.dncg-cc-note { color: var(--muted); }
.dncg-cc-more { display: inline-block; font-weight: 700; color: var(--link); }
.dncg-cc-none { display: block; color: var(--muted); }
.dncg-cc-reason { display: block; color: var(--muted); }
.dncg-cc-table a:focus-visible, .dncg-cc-remove:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }

/* Next steps. */
.dncg-cc-actions .btn { display: flex; width: 100%; margin: 0 0 .6rem; padding: .7rem 1rem; }
.dncg-cc-actions .btn:last-child { margin-bottom: 0; }

/* Stacked (narrow screens, or many courses on a mid-width one): the row name
   sits across the top of its values, and the course columns share the
   width. Columns that do not fit are taken out (is-off) and the picker
   chooses which show. The table keeps its semantics through the ARIA roles
   comparison.js gives every part, which display changes would otherwise
   take away in some browsers. */
.dncg-cc-table.is-stacked, .dncg-cc-table.is-stacked thead, .dncg-cc-table.is-stacked tbody { display: block; }
.dncg-cc-table.is-stacked thead { position: sticky; top: var(--dncg-cc-top); z-index: 3; background: var(--white); box-shadow: var(--shadow-sm); }
.dncg-cc-table.is-stacked tr { display: grid; grid-template-columns: repeat(var(--cc-show, 2), minmax(0, 1fr)); }
.dncg-cc-table.is-stacked .dncg-cc-headrow > * { position: static; }
.dncg-cc-table.is-stacked .dncg-cc-corner { display: none; }
.dncg-cc-table.is-stacked .dncg-cc-rowhead, .dncg-cc-table.is-stacked .dncg-cc-grouphead { grid-column: 1 / -1; border-left: 0; }
.dncg-cc-table.is-stacked .dncg-cc-rowhead { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding-top: .6rem; padding-bottom: .6rem; border-bottom: 0; }
.dncg-cc-table.is-stacked .dncg-cc-differs { margin-top: 0; }
.dncg-cc-table.is-stacked .dncg-cc-row.is-diff .dncg-cc-differs { display: inline-block; }
.dncg-cc-table.is-stacked td, .dncg-cc-table.is-stacked th { padding: .7rem .75rem; }
.dncg-cc-table.is-stacked .dncg-cc-headrow > th { border-left: 0; }
.dncg-cc-table.is-stacked .dncg-cc-headrow > th + th, .dncg-cc-table.is-stacked .dncg-cc-row td + td { border-left: 1px solid var(--line); }
/* The headings stick while the rows scroll under them, so on a phone they
   keep to the title (three lines at most; the full title is still there for
   a screen reader) and Remove. The college and the summary are rows below. */
.dncg-cc-table.is-stacked .dncg-cc-course__title { font-size: var(--fs-min); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .2rem; }
.dncg-cc-table.is-stacked .dncg-cc-course__college, .dncg-cc-table.is-stacked .dncg-cc-course__summary { display: none; }
.dncg-cc-table.is-stacked .dncg-cc-headrow > th { padding-top: .55rem; padding-bottom: .45rem; }
.dncg-cc-table .is-off { display: none !important; }

/* ---------------------------------------------------------------- print */

@media print {
    .site-header, .site-footer, .dncg-cc-toolbar, .dncg-cc-picker, .dncg-cc-remove, .dncg-cc-toast,
    .dncg-cc-linkbox, .dncg-cc-shared .btn, .dncg-cc-shared__own, .dncg-cc-hint, .dncg-cc-page__intro,
    #cookie-law-info-bar, .cli-modal { display: none !important; }
    .dncg-cc-page__inner { max-width: none; padding: 0; }
    .dncg-cc-page__title { font-size: 1.6rem; }
    /* Back to a plain table, every course in it, the headings repeated on
       each printed page. What "Show only differences" hid stays hidden. */
    .dncg-cc-table { display: table; table-layout: auto; }
    .dncg-cc-table thead { display: table-header-group; }
    .dncg-cc-table tbody { display: table-row-group; }
    .dncg-cc-table tr { display: table-row; }
    .dncg-cc-table .is-off { display: table-cell !important; }
    .dncg-cc-table .dncg-cc-corner { display: table-cell !important; }
    .dncg-cc-headrow > *, .dncg-cc-table.is-stacked thead { position: static; box-shadow: none; }
    .dncg-cc-row, .dncg-cc-grouprow { break-inside: avoid; }
    .dncg-cc-actions .btn { border: 1px solid var(--navy); background: none; color: var(--navy); }
    /* The theme prints each link's address after it; in the table that
       buries the course names. The next steps row keeps nothing to press. */
    .dncg-cc-table a::after { content: none !important; }
    .dncg-cc-group--actions { display: none !important; }
}