/* The front door's highlight links (login.html, D126). A file of its own rather than more of campusme-theme.css:
   only the front door loads it, and it carries nothing another screen needs.

   The links are the navy highlight chips the page already had (D95), made clickable: each opens its module's
   product highlight page. They keep the chip's look, with a brass edge and a filled "See highlights" pill on the
   right so they read as something to press. */

.cm-fd-features li.cm-fd-has-page { padding: 0; }
.cm-fd-highlight-link { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0; padding: 12px 13px 12px 15px;
  background: transparent; border: 1px solid rgba(212,181,114,.38); border-radius: 11px; color: inherit; font: inherit;
  text-align: left; text-decoration: none; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.cm-fd-highlight-link:hover { background: var(--cm-navy-700); border-color: var(--cm-brass); color: inherit; text-decoration: none; }
.cm-fd-highlight-link:focus { outline: none; }
.cm-fd-highlight-link:focus-visible { border-color: var(--cm-brass); outline: 2px solid var(--cm-brass); outline-offset: 3px; }
.cm-fd-highlight-link > span:not(.cm-fd-highlight-cue) { flex: 1 1 auto; min-width: 0; }
/* The call to action: a filled brass pill, so the chip reads as something to press and not just a caption. */
.cm-fd-highlight-cue { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; background: var(--cm-brass); color: var(--cm-navy);
  font: 600 12.5px var(--cm-font); white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.28);
  transition: background .18s ease, transform .18s ease; }
/* The chip's icon tile is written for any "i" in the list; the icon in the pill is not a tile. */
.cm-fd-features .cm-fd-highlight-cue i { width: auto; height: auto; background: none; margin: 0; font-size: 12px;
  color: var(--cm-navy); }
.cm-fd-highlight-link:hover .cm-fd-highlight-cue, .cm-fd-highlight-link:focus-visible .cm-fd-highlight-cue {
  background: #E6CD93; transform: translateY(-1px); }

/* A little wider than the plain chips were: the pill takes room from the words beside it. */
.cm-fd-features { max-width: 580px; }

/* A short window - a 1366x768 laptop at 100% leaves about 650px. The theme drops the chips' descriptions here
   to keep the page from scrolling; a highlight link keeps its own, because it is what tells a visitor what the
   page behind it is about. */
@media (max-height: 680px) {
  .cm-fd-features li.cm-fd-has-page { padding: 0; }
  .cm-fd-features li.cm-fd-has-page small { display: block; }
  .cm-fd-highlight-link { padding: 9px 11px 9px 13px; }
}

/* A phone. The theme drops the chips here - a student holding a slip needs the token card, not a pitch - but
   a chip that opens a highlight page is a way in to something, so those come back, one line each. */
@media (max-width: 575.98px) {
  .cm-fd-features { display: grid; margin-top: 16px; gap: 8px; }
  .cm-fd-features li:not(.cm-fd-has-page) { display: none; }
  .cm-fd-features small { display: none; }
  .cm-fd-highlight-link { align-items: center; padding: 10px 10px 10px 13px; }
  .cm-fd-highlight-cue { padding: 8px 12px; }
}