/*
 * LMS styles not in the prebuilt template CSS (public/build is compiled from
 * the template and cannot be rebuilt on Node 18). Keep this file small.
 */

/* Bulleted and numbered lists in long-form text (policy pages, help text). */
/* The template forces "list-style: none !important" inside a cascade layer, which an unlayered
   rule can't beat, so the bullets and numbers are drawn with ::before instead. */
.lms-prose ol { counter-reset: lms-item; }
.lms-prose ul > li, .lms-prose ol > li { position: relative; padding-inline-start: 1.5rem; margin-bottom: 0; }
.lms-prose ul > li::before { content: ""; position: absolute; inset-inline-start: 0.5rem; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.lms-prose ol > li { counter-increment: lms-item; }
.lms-prose ol > li::before { content: counter(lms-item) "."; position: absolute; inset-inline-start: 0.25rem; }
.lms-prose li + li { margin-top: 0.25rem; }

/* College logo: one image per theme. The light-theme file has dark text, the dark-theme file white text. */
.logo-for-dark { display: none; }
[data-theme="dark"] .logo-for-light { display: none; }
[data-theme="dark"] .logo-for-dark { display: inline-block; }

/* Light / Dark / System switch (partials/theme-switch). */
.theme-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; border: 1px solid var(--border-default); }
.theme-switch button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; border-radius: 7px; color: var(--text-tertiary); }
.theme-switch button:hover { color: var(--text-primary); }
.theme-switch button[aria-pressed="true"] { background: var(--surface-sunken); color: var(--text-primary); }

/* Public home page (public/home). */
.lms-wrap { max-width: 1080px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .lms-wrap { padding-inline: 1.5rem; } }
.lms-hero { padding-top: 3rem; padding-bottom: 3.5rem; }
.lms-hero-title { font-size: 26px; line-height: 1.2; }
@media (min-width: 640px) { .lms-hero-title { font-size: 32px; } }
.lms-choice { transition: border-color .15s, transform .15s; }
.lms-choice:hover { border-color: var(--color-primary-600); transform: translateY(-1px); }
#about { scroll-margin-top: 4rem; }

/* Section links in the public header (home page only), hidden on small screens. */
.site-nav { display: none; gap: 1.25rem; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.site-nav a:hover { color: var(--text-primary); }
@media (min-width: 1024px) { .site-nav { display: flex; } }

/* Unread count beside a sidebar link (e.g. Messages). */
.sidebar-count { margin-inline-start: auto; min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--color-gold-500); color: #1a1a1a; font-size: 11px; font-weight: 700; text-align: center; }