/*
  BLU University: the student area (students.blu.university after login): the library, course pages and lesson pages.
  Calm and school-like: ivory paper, navy type, thin rules instead of boxes, the same Inter Tight as www.blu.university.
  Colours, type and spacing only. Nothing is hidden or moved, and no wording changes.

  Every rule sits under one of two roots, so the login, checkout and website pages are left alone:
    .container--main       the Premier course theme (all seven product themes share it)
    main:has(.products)    the library page
  Served from www.blu.university/_site/kajabi/ and loaded by one line in Kajabi. See student-area-changes.md for the undo.
*/

@font-face { font-family: 'Inter Tight'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('https://www.blu.university/_site/fonts/inter-tight-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('https://www.blu.university/_site/fonts/inter-tight-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('https://www.blu.university/_site/fonts/inter-tight-latin-500-normal.woff2') format('woff2'); }

.container--main, main:has(.products) {
  --s-night: #0e1a33; --s-ink: #132241; --s-ivory: #f7f5f0; --s-body: #2a3550; --s-muted: #4a5369;
  --s-link: #2f4a8a; --s-gold: #8a6a2f; --s-rule: rgba(19, 34, 65, .14); --s-rule-strong: #132241;
  --s-font: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--s-font) !important; -webkit-font-smoothing: antialiased; color: var(--s-body);
}
.container--main *:not(.fa):not([class*="w-"]), main:has(.products) *:not(.fa) { font-family: var(--s-font) !important; }
.container--main ::selection, main:has(.products) ::selection { background: var(--s-ink); color: var(--s-ivory); }

/* ================= Course and lesson pages (Premier) ================= */
.container--main { background: var(--s-night) !important; }
.container--main .section--global { background: var(--s-ivory) !important; padding-top: clamp(28px, 5vh, 48px) !important; padding-bottom: clamp(48px, 8vh, 88px) !important; }

/* header and footer: the website's navy, its 15px links */
.container--main .header { background: var(--s-night) !important; padding: 14px 0; }
.container--main .logo--image img { height: 30px !important; width: auto !important; max-height: none !important; }
.container--main .header-menu a { font-size: 15px !important; font-weight: 400 !important; color: rgba(255, 255, 255, .8) !important; }
.container--main .header-menu a:hover { color: #fff !important; }
.container--main .user__dropdown a { color: var(--s-ink) !important; }
/* the phone menu is navy, and the theme's phone menu ends at 767px, where the dropdown turns white again */
@media (max-width: 766px) { .container--main .user__dropdown a { color: rgba(255, 255, 255, .8) !important; } }
.container--main .footer { background: var(--s-night) !important; border-top: 0; }
.container--main .footer, .container--main .footer a { font-size: 14px !important; color: rgba(255, 255, 255, .72) !important; }
.container--main .section--search { background: var(--s-ivory) !important; border-bottom: 1px solid var(--s-rule); }
.container--main .search__input { color: var(--s-ink) !important; background: transparent !important; }

/* course opening: the photo stays, darkened from the left so the title reads, set left as on the website */
.container--main .section--hero { background: linear-gradient(90deg, rgba(14, 26, 51, .92), rgba(14, 26, 51, .72) 55%, rgba(14, 26, 51, .38)) !important; padding-top: clamp(48px, 9vh, 88px) !important; padding-bottom: clamp(48px, 9vh, 88px) !important; }
.container--main .section--hero .row { justify-content: flex-start !important; text-align: left !important; }
.container--main .section--hero .btn__spacing { margin-left: 0 !important; text-align: left !important; flex: 0 0 min(100%, 680px); max-width: min(100%, 680px); }
.container--main .section--hero .btn { margin-left: 0 !important; }
.container--main .section--hero .panel__block { padding: 0 !important; text-align: left !important; }
.container--main .section--hero h1 { margin: 0 0 16px !important; font-size: clamp(32px, min(3.6vw, 6.4vh), 50px) !important; font-weight: 500 !important; line-height: 1.06 !important; letter-spacing: -.03em !important; color: #fff !important; text-wrap: balance; }
.container--main .section--hero p { font-size: 17px !important; font-weight: 300; line-height: 1.6 !important; color: rgba(255, 255, 255, .86) !important; }

/* panels: no white boxes, the page itself is the paper */
.container--main .panel { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.container--main .section--global .panel__body { padding: 0 !important; }

/* buttons: the website's pill */
.container--main .btn { box-sizing: border-box; font-size: 15px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: 999px !important; box-shadow: none !important; transition: background-color .25s, border-color .25s, color .25s; }
.container--main .btn--solid { background: var(--s-ink) !important; border: 1px solid var(--s-ink) !important; color: var(--s-ivory) !important; padding: 13px 26px !important; }
.container--main .btn--solid:hover { background: var(--s-link) !important; border-color: var(--s-link) !important; }
.container--main .btn--outline { background: transparent !important; border: 1px solid var(--s-ink) !important; color: var(--s-ink) !important; padding: 13px 26px !important; }
.container--main .btn--outline:hover { background: var(--s-ink) !important; color: var(--s-ivory) !important; }
.container--main .section--hero .btn--solid { background: var(--s-ivory) !important; border-color: var(--s-ivory) !important; color: var(--s-ink) !important; }
.container--main .section--hero .btn--solid:hover { background: #fff !important; border-color: #fff !important; }
.container--main a:focus-visible, .container--main .btn:focus-visible, .container--main textarea:focus-visible { outline: 2px solid var(--s-link); outline-offset: 3px; }

/* the curriculum: ruled rows, like a catalogue */
.container--main .syllabus__heading { margin: 0 0 18px !important; padding: 0 0 14px !important; border-bottom: 1px solid var(--s-rule-strong); font-size: clamp(24px, 2.2vw, 30px) !important; font-weight: 500 !important; letter-spacing: -.025em; color: var(--s-ink) !important; }
.container--main .syllabus__heading .pull-right { opacity: 1 !important; font-size: 15px !important; font-weight: 400; letter-spacing: 0; line-height: 2.2; color: var(--s-muted) !important; font-variant-numeric: tabular-nums; }
.container--main .syllabus__item { margin: 0 !important; padding: 16px 0 !important; border-bottom: 1px solid var(--s-rule); }
.container--main .syllabus__item:first-of-type { padding-top: 0 !important; }
.container--main .syllabus__img img { border-radius: 4px; }
.container--main .syllabus__title { margin-bottom: 4px !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: -.012em; color: var(--s-ink) !important; }
.container--main .syllabus__text { opacity: 1 !important; font-size: 15px !important; font-weight: 400; line-height: 1.5 !important; color: var(--s-muted) !important; }
.container--main .syllabus__item a:hover .syllabus__title { color: var(--s-link) !important; }
.container--main .progress__bar { height: 2px !important; border-radius: 0 !important; background: var(--s-rule) !important; }
.container--main .progress__fill { background: var(--s-gold) !important; border-radius: 0 !important; }
.container--main .pag__link { font-size: 15px !important; font-weight: 400 !important; color: var(--s-ink) !important; }
.container--main .pag__link--current { font-weight: 500 !important; color: var(--s-link) !important; text-decoration: underline; text-underline-offset: 5px; }
.container--main .pag__link--disabled { color: var(--s-muted) !important; opacity: .55; }

/* breadcrumbs */
.container--main .breadcrumbs, .container--main .breadcrumbs a, .container--main .breadcrumbs__crumb { font-size: 14px !important; color: var(--s-muted) !important; }
.container--main .breadcrumbs a:hover { color: var(--s-ink) !important; }

/* the lesson: the film and its list on navy, then the reading column */
.container--main .player__playlist, .container--main .playlist, .container--main .playlist__title { background: var(--s-night) !important; }
.container--main .playlist__title, .container--main .playlist__title * { color: rgba(255, 255, 255, .86); }
.container--main .playlist__title { border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 16px !important; font-weight: 500 !important; line-height: 1.3 !important; color: #fff !important; }
.container--main .playlist__body .track { border-color: rgba(255, 255, 255, .08) !important; }
.container--main .track__title { font-size: 14.5px !important; font-weight: 400 !important; color: rgba(255, 255, 255, .86) !important; }
.container--main .track__count { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .62) !important; }
.container--main .track--active { background: rgba(255, 255, 255, .08) !important; }
.container--main .track--active .track__count, .container--main .track--active .fa { color: #9db7ea !important; }
.container--main .track__more { display: inline-block; margin: 0 auto; padding: 9px 20px !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, .34) !important; border-radius: 999px; font-size: 14px !important; font-weight: 500 !important; color: #fff !important; }
.container--main .player__nav { background: var(--s-ivory) !important; padding-left: 0 !important; padding-right: 0 !important; }
.container--main .player__nav a.btn.btn--solid.btn--simple-player { padding: 11px 22px !important; background: var(--s-ink) !important; background-color: var(--s-ink) !important; border: 1px solid var(--s-ink) !important; color: var(--s-ivory) !important; }
.container--main .player__nav a.btn.btn--solid.btn--simple-player.disabled, .container--main .player__nav a.btn.btn--solid.btn--simple-player[disabled] { background: transparent !important; background-color: transparent !important; border-color: var(--s-rule) !important; color: var(--s-muted) !important; opacity: 1; }

.container--main .panel__title { margin-bottom: 6px !important; font-size: clamp(30px, 3vw, 40px) !important; font-weight: 500 !important; line-height: 1.08 !important; letter-spacing: -.03em !important; color: var(--s-ink) !important; text-wrap: balance; }
.container--main .panel__sub-title, .container--main .panel__sub-title a { font-size: 16px !important; font-weight: 400 !important; color: var(--s-muted) !important; }
.container--main .mark-as-complete { margin-bottom: 28px; }
.container--main .panel__block { font-size: 17px; line-height: 1.68; color: var(--s-body); }
.container--main .section--global .panel__block :is(p, li, span, em, strong) { font-size: inherit; color: inherit !important; }
.container--main .section--global .panel__block :is(strong, b) { font-weight: 500; color: var(--s-ink) !important; }
.container--main .section--global .panel__block :is(h2, h3, h4) { margin-top: 1.5em; font-weight: 500 !important; letter-spacing: -.02em; line-height: 1.2; color: var(--s-ink) !important; }
.container--main .section--global .panel__block h2 { font-size: 25px; }
.container--main .section--global .panel__block :is(h2, h3, h4) :is(span, strong) { font-size: inherit !important; font-weight: 500 !important; color: var(--s-ink) !important; }
.container--main .section--global .panel__block a:not(.btn) { color: var(--s-link) !important; text-decoration: underline; text-underline-offset: 3px; }

/* comments */
.container--main .panel__heading { font-size: 22px !important; font-weight: 500 !important; letter-spacing: -.02em; color: var(--s-ink) !important; }
.container--main .panel:has(.comments), .container--main .panel:has(.new_comment) { margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--s-rule-strong) !important; }
.container--main .new_comment .form-control { background: #fff !important; border: 1px solid rgba(19, 34, 65, .22) !important; border-radius: 10px !important; font-size: 16px !important; color: var(--s-ink) !important; box-shadow: none !important; }
.container--main .new_comment .form-control::placeholder { color: var(--s-muted); }
.container--main .comment { border-color: var(--s-rule) !important; }
.container--main .comment__name { font-weight: 500 !important; color: var(--s-ink) !important; }
.container--main .muted, .container--main .comment__date { opacity: 1 !important; color: var(--s-muted) !important; font-size: 14px !important; }
.container--main .comment__body { font-size: 16px !important; line-height: 1.6 !important; color: var(--s-body) !important; }
.container--main .comment__reply { font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--s-link) !important; }

/* ================= The library ================= */
main:has(.products) { background: var(--s-ivory); }
main:has(.products) .section.background-light { background: var(--s-ivory) !important; }
main:has(.products) .section.background-light .section__overlay { background: var(--s-ivory) !important; }

/* the opening: the photo stays, darkened evenly, the title set left without its box, as on the course pages */
main:has(.products) .section:not(.background-light) .section__overlay { background: linear-gradient(90deg, rgba(14, 26, 51, .8), rgba(14, 26, 51, .42) 70%) !important; }
main:has(.products) .section:not(.background-light) .row { justify-content: flex-start !important; }
main:has(.products) .block-type--text { text-align: left !important; }
main:has(.products) .block-type--text .block { background: transparent !important; padding-left: 0 !important; }
main:has(.products) .block-type--text :is(h1, h2, h3, p, span) { font-weight: 500 !important; letter-spacing: -.03em; color: #fff !important; }

/* the row of links under the header */
main:has(.products) .link-list__link { font-size: 15px !important; font-weight: 400 !important; color: var(--s-ink) !important; }
main:has(.products) .link-list__link:hover { color: var(--s-link) !important; }

/* the list of classes: ruled rows on the paper, each title readable */
main:has(.products) .products__header { margin-bottom: 4px !important; padding-bottom: 16px; border-bottom: 1px solid var(--s-rule-strong); align-items: flex-end; }
main:has(.products) .products__title { font-size: clamp(28px, 2.8vw, 38px) !important; font-weight: 500 !important; letter-spacing: -.03em !important; color: var(--s-ink) !important; }
main:has(.products) .resume-course { background: transparent !important; box-shadow: none !important; }
main:has(.products) .resume-course__content { padding: 0 !important; }
main:has(.products) .resume-course__status { font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--s-link) !important; }
main:has(.products) .resume-course__title { font-size: 15px !important; line-height: 1.4 !important; color: var(--s-body) !important; }
main:has(.products) .resume-course__image img { border-radius: 4px; }

main:has(.products) .products__col { margin: 0 !important; }
main:has(.products) .product { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--s-rule) !important; box-shadow: none !important; margin: 0 !important; padding: 22px 0 !important; border-radius: 0 !important; }
main:has(.products) .product__image { background: transparent !important; flex: 0 0 200px; max-width: 200px; }
main:has(.products) .product__image img { display: block; width: 100%; border-radius: 4px; }
main:has(.products) .product__content { background: transparent !important; padding: 0 0 0 clamp(20px, 2.4vw, 32px) !important; }
main:has(.products) .product__title { margin-bottom: 8px !important; font-size: clamp(20px, 1.7vw, 24px) !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -.02em !important; color: var(--s-ink) !important; }
main:has(.products) a:hover .product__title { color: var(--s-link) !important; }
main:has(.products) .product__body { font-size: 15.5px !important; line-height: 1.55 !important; color: var(--s-muted) !important; }
main:has(.products) .progress { height: auto !important; margin: 2px 0 10px !important; padding: 0 !important; background: transparent !important; }
main:has(.products) .progress__outer { height: 2px !important; border-radius: 0 !important; background: var(--s-rule) !important; }
main:has(.products) .progress__inner { background: var(--s-gold) !important; border-radius: 0 !important; }
main:has(.products) .product__button .btn { background: transparent !important; border: 1px solid var(--s-ink) !important; border-radius: 999px !important; color: var(--s-ink) !important; font-size: 14.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 20px !important; box-shadow: none !important; transition: background-color .25s, color .25s; }
main:has(.products) .product__button .btn:hover { background: var(--s-ink) !important; color: var(--s-ivory) !important; }
main:has(.products) a:focus-visible { outline: 2px solid var(--s-link); outline-offset: 3px; }

@media (max-width: 767px) {
  .container--main .logo--image img { height: 24px !important; }
  .container--main .section--hero { background: rgba(14, 26, 51, .84) !important; }
  main:has(.products) .section:not(.background-light) .section__overlay { background: rgba(14, 26, 51, .66) !important; }
  .container--main .syllabus__title { font-size: 17px !important; }
  .container--main .panel__block { font-size: 16.5px; }
  /* a compact row on the phone: the small picture beside the title, not a full-width banner */
  main:has(.products) .product { display: flex !important; flex-flow: row nowrap !important; align-items: flex-start; gap: 14px; padding: 16px 0 !important; }
  main:has(.products) .product > a { flex: 0 0 92px; }
  main:has(.products) .product__image { flex-basis: auto; max-width: 92px; }
  main:has(.products) .product__content { flex: 1; min-width: 0; padding: 0 !important; }
  main:has(.products) .product__title { font-size: 18px !important; }
  main:has(.products) .product__body { font-size: 15px !important; }
  main:has(.products) .resume-course__content { display: flex !important; flex-flow: row nowrap !important; align-items: center; gap: 14px; }
  main:has(.products) .resume-course__image { flex: 0 0 92px; max-width: 92px; order: -1; }
  main:has(.products) .resume-course__text { text-align: left !important; }
}
@media (prefers-reduced-motion: reduce) {
  .container--main .btn, main:has(.products) .btn { transition: none !important; }
}