/**
 * MooseU MODERN — 2026 professional skin. Loads last (weight 300).
 *
 * Direction: retire the hand-drawn/watercolor treatment in favour of a
 * crisp educational-portal look — Sora geometric headings, white cards
 * with hairline borders + layered low shadows on the soft #f5f9ff canvas,
 * brand warmth kept as small gold/blue ACCENTS instead of washes/glows.
 *
 * Everything here intentionally out-cascades mooseu-polish/elevate (same
 * specificity, later order, !important where they used !important).
 */

/* ─────────────────────────────────────────────────────────────────
   0. SHARED CARD LANGUAGE
   ──────────────────────────────────────────────────────────────── */
:root {
  --mu-card-border: #e6ebf3;
  --mu-shadow-rest: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 10px rgba(16, 24, 40, 0.04);
  --mu-shadow-hover: 0 6px 16px rgba(30, 58, 95, 0.10), 0 12px 28px rgba(30, 58, 95, 0.08);
}

/* The transparent-PNG logo was picking up the global img loading tint —
   keep that tint for card thumbnails only. */
img { background-color: transparent; }
.views-row .node__content img { background-color: var(--mu-yellow-soft); }

/* Single crisp brand accent instead of the rainbow gradient strip. */
#main-container::before {
  background: var(--mu-blue) !important;
  height: 3px !important;
}

/* ─────────────────────────────────────────────────────────────────
   1. HEADER — quiet, cohesive bar
   ──────────────────────────────────────────────────────────────── */
#header {
  background: #fff !important;
  border-bottom: 1px solid var(--mu-card-border) !important;
  padding-block: 0.9rem !important;
}

.block-system-branding-block img,
.site-logo-img {
  max-height: 120px !important;
  background: transparent !important;
}

/* Account buttons: quiet ghost links; the last (Log in) stays filled. */
.navigation__menubar-account li > a,
.solo-account-menu a,
.nav__menu-link-account {
  background: #fff !important;
  color: var(--mu-blue) !important;
  border: 1px solid #d4e0ef !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 0.5rem 0.95rem !important;
  font-family: var(--mu-font-display) !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

.navigation__menubar-account li > a:hover {
  background: var(--mu-bg-hover) !important;
  border-color: var(--mu-blue) !important;
  transform: none;
}

.navigation__menubar-account li:last-child > a {
  background: var(--mu-blue) !important;
  color: #fff !important;
  border-color: var(--mu-blue) !important;
}

.navigation__menubar-account li:last-child > a:hover {
  background: var(--mu-navy-deep) !important;
  border-color: var(--mu-navy-deep) !important;
}

/* Search: clean rounded field + filled button, one visual control. */
#edit-keys.solo-input,
.solo-search-block-form input[type="search"] {
  border: 1px solid #d4e0ef !important;
  border-radius: 10px !important;
  background: #f8fafd;
  font-size: 0.88rem;
}

#edit-submit.search-button-block,
.solo-search-block-form .form-submit {
  border-radius: 10px !important;
  font-family: var(--mu-font-display) !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────
   2. NAVIGATION — sharp, intentional
   ──────────────────────────────────────────────────────────────── */
#primary-menu {
  background: linear-gradient(180deg, var(--mu-blue) 0%, #2169b5 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 2px 6px rgba(15, 35, 71, 0.10) !important;
}

.menu--main a,
.nav__menu-link-main {
  font-family: var(--mu-font-display) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  padding: 0.95rem 1.2rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  transition: color 0.15s ease, background 0.15s ease;
}

.menu--main a:hover,
.nav__menu-link-main:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#primary-menu a.nav__menu-link-main.is-active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

/* ─────────────────────────────────────────────────────────────────
   3. SECTION HEADERS — white cards, icon chips, Sora titles
   (replaces the whiteboard glow treatment)
   ──────────────────────────────────────────────────────────────── */
.block-inline-blockmooseu-header,
.mu-whiteboard {
  background: #fff !important;
  border: 1px solid var(--mu-card-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--mu-shadow-rest) !important;
  padding: 0.9rem 1.1rem !important;
}

.block-inline-blockmooseu-header .field--name-field-icon {
  width: 2.5rem !important;
  height: 2.5rem !important;
  font-size: 1.35rem !important;
  background: rgba(38, 115, 196, 0.10) !important;
  border-radius: 10px !important;
}

.block-inline-blockmooseu-header .field--name-field-header-title {
  font-family: var(--mu-font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--mu-navy) !important;
}

/* Divider band ("What Role Will You Learn About Today?") */
.block-inline-blockmooseu-divider,
.block-inline-blockmooseu-divider.mu-whiteboard {
  height: auto !important;
  background: #fff !important;
  border: 1px solid var(--mu-card-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--mu-shadow-rest) !important;
  padding: 1.1rem 1.5rem !important;
  margin: 2rem 0 1.25rem !important;
}

.block-inline-blockmooseu-divider .field--name-field-mu-divider-title {
  font-family: var(--mu-font-display) !important;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--mu-navy) !important;
}

.block-inline-blockmooseu-divider .field--name-field-mu-icon-divider {
  width: 2.75rem !important;
  height: 2.75rem !important;
  font-size: 1.5rem !important;
  background: rgba(246, 194, 68, 0.18) !important;
  border-radius: 10px !important;
}

/* Gold accent line replaces the smudge gradient. */
.block-inline-blockmooseu-divider::after {
  left: calc(50% - 32px) !important;
  right: calc(50% - 32px) !important;
  bottom: 9px !important;
  height: 3px !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg, var(--mu-yellow), var(--mu-orange)) !important;
}

/* ─────────────────────────────────────────────────────────────────
   4. WELCOME CARD — crisp white, gold top accent (no watercolor)
   ──────────────────────────────────────────────────────────────── */
.layout--threecol-section--25-50-25 > .layout__region--second .block-inline-blockbasic,
.mooseu-highlighted-block {
  background:
    url('/sites/default/files/2025-06/mooseu-yellow-watercolor.png') no-repeat center / cover,
    linear-gradient(135deg, #fffbe5 0%, rgba(246, 194, 68, 0.22) 100%) !important;
  border: 1px solid rgba(246, 194, 68, 0.55) !important;
  border-top: 4px solid var(--mu-yellow) !important;
  border-radius: 14px !important;
  box-shadow: var(--mu-shadow-rest) !important;
  padding: 2rem 2.25rem !important;
}

.layout--threecol-section--25-50-25 > .layout__region--second .block-inline-blockbasic p {
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  color: #2b3f57 !important;
}

/* ─────────────────────────────────────────────────────────────────
   5. NEWS + COURSE ROWS — calm hierarchy: navy titles, whisper dates
   ──────────────────────────────────────────────────────────────── */
.layout--threecol-section--25-50-25 > .layout__region--first .views-row,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row {
  border: 1px solid var(--mu-card-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row:hover,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--mu-shadow-hover) !important;
  border-color: #cfe0f4 !important;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row a,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row a {
  color: var(--mu-navy) !important;
  font-weight: 600 !important;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row a:hover,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row a:hover {
  color: var(--mu-blue) !important;
  text-decoration: none !important;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row .node__content img,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row .node__content img {
  border-radius: 8px !important;
  border-color: var(--mu-card-border) !important;
}

/* ─────────────────────────────────────────────────────────────────
   6. ROLE SECTION — transparent band, white intro, real profile cards
   ──────────────────────────────────────────────────────────────── */
.layout--twocol-section--25-75 {
  background: transparent !important;
  border: 0 !important;
  padding: 0.5rem 0 !important;
}

.layout--twocol-section--25-75 > .layout__region--first .block-inline-blockbasic {
  background: #fff !important;
  border: 1px solid var(--mu-card-border) !important;
  border-left: 4px solid var(--mu-yellow) !important;
  border-radius: 14px !important;
  box-shadow: var(--mu-shadow-rest) !important;
  padding: 1.4rem 1.5rem !important;
  font-size: 0.97rem !important;
  line-height: 1.65 !important;
  color: #2b3f57 !important;
}

/* Profile cards: white card → cropped portrait → caption underneath.
   The role PNGs carry a baked-in blue label bar in their bottom ~15%;
   the aspect-ratio wrapper crops it out so the real <title> caption
   (added by rebuild 36) provides the label with proper contrast. */
.layout--twocol-section--25-75 .views-view-responsive-grid__item {
  background: #fff !important;
  border: 1px solid var(--mu-card-border) !important;
  border-radius: 16px !important;
  padding: 10px 10px 4px !important;
  box-shadow: var(--mu-shadow-rest) !important;
  overflow: hidden !important;
}

.layout--twocol-section--25-75 .views-view-responsive-grid__item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--mu-shadow-hover) !important;
  border-color: #cfe0f4 !important;
}

.layout--twocol-section--25-75 .views-field-field-role-icon {
  border-radius: 11px;
  overflow: hidden;
  aspect-ratio: 275 / 233;   /* crops the baked-in blue bar */
}

.layout--twocol-section--25-75 .views-field-field-role-icon img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: top !important;
  transition: transform var(--mu-duration-mid) var(--mu-easing);
}

.layout--twocol-section--25-75 .views-view-responsive-grid__item:hover .views-field-field-role-icon img {
  transform: scale(1.045);
}

.layout--twocol-section--25-75 .views-field-title {
  text-align: center;
  padding: 0.6rem 0.25rem 0.5rem;
  font-family: var(--mu-font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.layout--twocol-section--25-75 .views-field-title a {
  color: var(--mu-navy) !important;
  text-decoration: none !important;
}

.layout--twocol-section--25-75 .views-view-responsive-grid__item:hover .views-field-title a {
  color: var(--mu-blue) !important;
}

/* ─────────────────────────────────────────────────────────────────
   7. GLOBAL ATMOSPHERE — calm the page-level washes
   ──────────────────────────────────────────────────────────────── */
html {
  background: var(--mu-bg-app, #f5f9ff) !important;
}

.mu-page-heading,
.mu-courses-heading {
  font-family: var(--mu-font-display) !important;
  font-size: clamp(1.8rem, 3vw, 2.3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

.mu-courses-choice h3 {
  font-family: var(--mu-font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
}

.mu-courses-choice {
  border: 1px solid var(--mu-card-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--mu-shadow-rest) !important;
}

.mu-courses-choice:hover {
  box-shadow: var(--mu-shadow-hover) !important;
  border-color: #cfe0f4 !important;
}

/* Past Articles pill — align with the new button language. */
.more-link a {
  border-radius: 10px !important;
  font-family: var(--mu-font-display) !important;
  font-size: 0.83rem !important;
  box-shadow: var(--mu-shadow-rest) !important;
}

/* ─────────────────────────────────────────────────────────────────
   7b. HEADER IDENTITY — crest + real-text tagline.
   moose_u2.png is 600×300 with the crest at x≈30–280 and the tagline
   baked in as pixels from x≈290. Crop the image to the crest (height-
   driven crop: at 150px tall the scaled image is 300px wide, so a
   144px window shows exactly the crest) and let the REAL site slogan
   (rebuild 37) carry the tagline as crisp, accessible HTML.
   ──────────────────────────────────────────────────────────────── */
.branding-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 1.15rem !important;
}

.site-logo {
  display: block !important;
  width: 144px;
  height: 150px;
  overflow: hidden;
  flex: 0 0 auto;
}

.block-system-branding-block img,
.site-logo-img {
  max-height: none !important;
  height: 150px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
}

.site-slogan,
.site-branding__slogan {
  font-family: var(--mu-font-display) !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--mu-navy) !important;
  max-width: 24ch;
  margin: 0 !important;
  padding-left: 0.9rem;
  border-left: 3px solid var(--mu-yellow);
}

/* ─────────────────────────────────────────────────────────────────
   7c. UTILITY ZONE — one shared 40px control baseline.
   Buttons, search field and search button all sit on identical
   heights/radii so the right side of the header reads as one group.
   ──────────────────────────────────────────────────────────────── */
.navigation__menubar-account {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.navigation__menubar-account li > a,
.solo-account-menu a,
.nav__menu-link-account {
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-block: 0 !important;
  margin: 0 !important;
}

#edit-keys.solo-input,
.solo-search-block-form input[type="search"] {
  height: 40px !important;
  padding-block: 0 !important;
  width: 215px;
}

#edit-submit.search-button-block,
.solo-search-block-form .form-submit {
  height: 40px !important;
  padding-block: 0 !important;
}

.solo-search-block-form {
  gap: 0.5rem;
  align-items: center;
}

#header-inner > #block-mooseu-account-menu,
#header-inner > #search-block-form {
  align-self: center;
}

/* ─────────────────────────────────────────────────────────────────
   7d. LATEST COURSES ROWS — mirror the Recent News media-object.
   Courses carry their image in field_hero_media (news uses
   field_thumbnail), so the placement rules never matched and the
   image auto-flowed under the title. Pin it into the thumbnail slot;
   with no date row, the title centres vertically.
   ──────────────────────────────────────────────────────────────── */
.layout--threecol-section--25-50-25 > .layout__region--first .views-row .field--name-field-hero-media,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row .field--name-field-hero-media {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0 !important;
}

.layout--threecol-section--25-50-25 > .layout__region--third .views-row .node__header {
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

/* Uniform row rhythm across both columns. */
.layout--threecol-section--25-50-25 > .layout__region--first .views-row,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row {
  min-height: 78px;
  display: flex;
  align-items: center;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row > article,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row > article {
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────
   7e. PIXEL-PERFECT PASS — alignment, sizing, premium hover.
   ──────────────────────────────────────────────────────────────── */

/* 1. Welcome text starts at the TOP of the card (was vertically
   centred), with clean breathing room above. */
.layout--threecol-section--25-50-25 > .layout__region--second .block-inline-blockbasic {
  justify-content: flex-start !important;
  padding-top: 2.25rem !important;
}

/* 2. Search sits LEFT of the account buttons. */
#header-inner {
  grid-template-areas: "brand gap search account";
}

@media (max-width: 900px) {
  #header-inner {
    grid-template-areas:
      "brand brand"
      "search account";
  }
}

/* Magnifier icon: Solo hardcodes it 20px from the top (sized for its
   own taller input) — centre it against ANY field height. */
.solo-search-block-form .form-type-search {
  position: relative;
}

.solo-search-block-form .form-type-search::before {
  inset-block-start: 50% !important;
  translate: 0 -50%;
  inset-inline-start: 10px !important;
}

/* 3. Sidebar rows: taller, roomier; titles wrap in FULL (the previous
   2-line clamp ellipsized long course titles that need three lines —
   the text was always complete in the markup). */
.layout--threecol-section--25-50-25 > .layout__region--first .views-row,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row {
  padding: 0.95rem 0.9rem !important;
  min-height: 96px;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row .node__title a,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row .node__title a {
  display: block;            /* kills the -webkit-box clamp + ellipsis */
  overflow: visible;
}

/* 4. Crisp accent: coloured left border grounds each item card —
   blue for news, gold for courses. */
.layout--threecol-section--25-50-25 > .layout__region--first .views-row {
  border-left: 3px solid var(--mu-blue) !important;
}

.layout--threecol-section--25-50-25 > .layout__region--third .views-row {
  border-left: 3px solid var(--mu-yellow) !important;
}

/* 5. Premium hover: a real lift with a richer shadow, same smooth
   curve everywhere (news, courses, role cards already lift -4px). */
.layout--threecol-section--25-50-25 > .layout__region--first .views-row:hover,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row:hover {
  transform: translateY(-3px);
}

/* 6. Divider band: icon chip perfectly centred against the title. */
.block-inline-blockmooseu-divider,
.block-inline-blockmooseu-divider.mu-whiteboard {
  display: flex !important;
  align-items: center !important;
}

.block-inline-blockmooseu-divider .field--name-field-mu-icon-divider {
  align-self: center !important;
  line-height: 1 !important;
}

/* ─────────────────────────────────────────────────────────────────
   7f. COURSE PAGE PRODUCTION PASS — CTA, metadata, video card,
   Live Classroom Finder, /course-map.
   ──────────────────────────────────────────────────────────────── */

/* Retire the watercolor "course lookup" placeholder baked into course
   bodies (reversible: content untouched, just not rendered). */
img[src*="course%20lookup"],
img[src*="course lookup"] {
  display: none !important;
}

/* ── Primary CTA: "Take … Course Online" (field_articulate_link) ─── */
.node--type-course .field--name-field-articulate-link {
  margin: 1rem 0 1.25rem;
}

.node--type-course .field--name-field-articulate-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(180deg, var(--mu-blue) 0%, #2169b5 100%) !important;
  color: #fff !important;
  font-family: var(--mu-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(38, 115, 196, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-decoration: none !important;
  transition: transform var(--mu-duration-fast) var(--mu-easing),
              box-shadow var(--mu-duration-fast) var(--mu-easing),
              background var(--mu-duration-fast) var(--mu-easing);
}

.node--type-course .field--name-field-articulate-link a::before {
  content: "▶";
  font-size: 0.75em;
  opacity: 0.9;
}

.node--type-course .field--name-field-articulate-link a:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #2f7fd0 0%, var(--mu-blue) 100%) !important;
  box-shadow: 0 8px 20px rgba(38, 115, 196, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.node--type-course .field--name-field-articulate-link a:active {
  transform: translateY(0);
}

/* ── Metadata: definition rows replace the blue pills ────────────── */
.node--type-course .layout--twocol-section--33-67 .field--name-field-duration,
.node--type-course .layout--twocol-section--33-67 .field--name-field-delivery-mode,
.node--type-course .layout--twocol-section--33-67 .field--name-field-course-category {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  background: transparent;
  padding: 0.55rem 0.1rem;
  border-radius: 0;
  border-bottom: 1px solid var(--mu-card-border);
  margin: 0;
}

.node--type-course .layout--twocol-section--33-67 .field--name-field-duration .field__label,
.node--type-course .layout--twocol-section--33-67 .field--name-field-delivery-mode .field__label,
.node--type-course .layout--twocol-section--33-67 .field--name-field-course-category .field__label {
  flex: 0 0 7.5rem;
  font-family: var(--mu-font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(30, 58, 95, 0.55);
  margin: 0;
}

.node--type-course .layout--twocol-section--33-67 .field--name-field-duration .field__item,
.node--type-course .layout--twocol-section--33-67 .field--name-field-delivery-mode .field__item,
.node--type-course .layout--twocol-section--33-67 .field--name-field-course-category .field__item {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mu-navy);
}

.node--type-course .field--name-field-course-category a {
  color: var(--mu-blue) !important;
}

/* ── Video: structured media card ────────────────────────────────── */
.mu-video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--mu-navy-deep);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--mu-shadow-rest), 0 14px 32px rgba(15, 35, 71, 0.14);
  border: 1px solid var(--mu-card-border);
  margin: 1.25rem 0;
}

.mu-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Live Classroom Finder (replaces the coming-soon banner) ─────── */
.mu-classroom-finder {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 2rem;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f6f9fe 100%);
  border: 1px solid var(--mu-card-border);
  border-radius: 16px;
  box-shadow: var(--mu-shadow-rest);
  padding: 1.75rem 2rem;
  margin: 2rem 0 1rem;
}

/* Abstract map visual: soft grid + brand pins + radar pulse. */
.mu-cf-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(140px 90px at 75% 20%, rgba(246, 194, 68, 0.14), transparent 60%),
    radial-gradient(160px 110px at 20% 80%, rgba(38, 115, 196, 0.12), transparent 65%),
    linear-gradient(rgba(38, 115, 196, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 115, 196, 0.07) 1px, transparent 1px),
    #f1f6fd;
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
  border: 1px solid rgba(38, 115, 196, 0.14);
}

.mu-cf-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--mu-blue);
  box-shadow: 0 2px 6px rgba(15, 35, 71, 0.30);
}

.mu-cf-pin--1 { top: 28%; left: 30%; background: var(--mu-blue); }
.mu-cf-pin--2 { top: 52%; left: 62%; background: var(--mu-orange); }
.mu-cf-pin--3 { top: 66%; left: 24%; background: var(--mu-yellow); }

.mu-cf-ring {
  position: absolute;
  top: 52%;
  left: 62%;
  width: 14px;
  height: 14px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  border: 2px solid rgba(247, 141, 63, 0.55);
}

@media (prefers-reduced-motion: no-preference) {
  .mu-cf-ring {
    animation: muPulse 2.6s var(--mu-easing) infinite;
  }
  @keyframes muPulse {
    0%   { transform: scale(1); opacity: 0.9; }
    70%  { transform: scale(3.2); opacity: 0; }
    100% { transform: scale(3.2); opacity: 0; }
  }
}

.mu-classroom-finder__eyebrow {
  font-family: var(--mu-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mu-orange);
  margin: 0 0 0.35rem !important;
}

.mu-classroom-finder__title {
  font-family: var(--mu-font-display) !important;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--mu-navy) !important;
  margin: 0 0 0.6rem !important;
}

.mu-classroom-finder__copy {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #2b3f57 !important;
  max-width: 56ch;
  margin: 0 0 1.1rem !important;
}

.mu-classroom-finder__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(180deg, var(--mu-yellow) 0%, #efb83a 100%);
  color: var(--mu-navy-deep) !important;
  font-family: var(--mu-font-display);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.85rem 1.6rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(246, 194, 68, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-decoration: none !important;
  transition: transform var(--mu-duration-fast) var(--mu-easing),
              box-shadow var(--mu-duration-fast) var(--mu-easing);
}

.mu-classroom-finder__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(246, 194, 68, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mu-classroom-finder__arrow {
  transition: transform var(--mu-duration-fast) var(--mu-easing);
}

.mu-classroom-finder__cta:hover .mu-classroom-finder__arrow {
  transform: translateX(3px);
}

@media (max-width: 760px) {
  .mu-classroom-finder {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
  }
  .mu-cf-map { max-height: 160px; }
}

/* ── /course-map page ────────────────────────────────────────────── */
.path-course-map .mu-map-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #2b3f57;
  max-width: 70ch;
  margin: 0.5rem 0 1.5rem;
}

.view-id-course_map .views-exposed-form {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--mu-card-border);
  border-radius: 14px;
  box-shadow: var(--mu-shadow-rest);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.view-id-course_map .mu-map-row {
  background: #fff;
  border: 1px solid var(--mu-card-border);
  border-left: 3px solid var(--mu-yellow);
  border-radius: 12px;
  box-shadow: var(--mu-shadow-rest);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  transition: transform var(--mu-duration-fast) var(--mu-easing),
              box-shadow var(--mu-duration-fast) var(--mu-easing);
}

.view-id-course_map .mu-map-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--mu-shadow-hover);
}

.mu-map-empty {
  background: #fff;
  border: 1px dashed rgba(38, 115, 196, 0.35);
  border-radius: 14px;
  padding: 2rem;
  text-align: center;
  color: #2b3f57;
}

.mu-map-empty h3 {
  font-family: var(--mu-font-display);
  color: var(--mu-navy);
  margin: 0 0 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────
   7g. CONTENT NODES — reading measure, rich-text typography,
   resource cards, breadcrumbs, sidebar continuity.
   ──────────────────────────────────────────────────────────────── */

/* ── Breadcrumb trail (block enabled by rebuild 40) ───────────────
   Solo renders nav.breadcrumb-nav > ul.breadcrumb-menu with built-in
   SVG chevron separators and the current page as span.breadcrumb-title.
   Its #breadcrumb region wrapper carries a dark default background —
   flatten it to the page canvas. */
#breadcrumb {
  /* Solo paints regions with var(--r-bg); a region-scoped redefinition
     turned this one black. Override the variable so every painter
     inside resolves to transparent. */
  --r-bg: transparent;
  --r-tx: rgba(30, 58, 95, 0.60);
  background: transparent !important;
  padding: 0 !important;
}

#breadcrumb,
#breadcrumb * {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#breadcrumb a,
#breadcrumb a.btn-animate {
  color: rgba(30, 58, 95, 0.60) !important;
}

.breadcrumb-nav {
  font-size: 0.8rem;
  margin: 0.85rem auto 0;
  max-width: 1100px;
  padding: 0 1.5rem;
}

.breadcrumb-nav .breadcrumb-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-nav li {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.breadcrumb-nav a {
  color: rgba(30, 58, 95, 0.60) !important;
  text-decoration: none !important;
  background: transparent !important;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
  transition: color var(--mu-duration-fast) var(--mu-easing),
              background var(--mu-duration-fast) var(--mu-easing);
}

.breadcrumb-nav a:hover {
  color: var(--mu-blue) !important;
  background: var(--mu-bg-hover) !important;
}

.breadcrumb-nav .breadcrumb-sep {
  width: 16px;
  height: 16px;
  fill: rgba(30, 58, 95, 0.35);
}

.breadcrumb-nav .breadcrumb-title {
  color: var(--mu-navy);
  font-weight: 600;
}

/* ── Page title: REAL H1 on role pages (old skin hid it because the
   name was baked into the image — we crop the image instead) ─────── */
.node--type-lodge-role .node__title,
.node--type-lodge-role .node__header h1 {
  display: block !important;
  font-family: var(--mu-font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--mu-navy);
  margin: 0.75rem 0 0.25rem;
}

/* Role portrait: crop the baked-in label bar, present as a clean card. */
.node--type-lodge-role .field--name-field-role-icon .media {
  aspect-ratio: 275 / 233;
  overflow: hidden;
  border-radius: 14px;
  max-width: 280px;
  border: 1px solid var(--mu-card-border);
  box-shadow: var(--mu-shadow-rest);
  margin: 0.5rem 0 1rem;
}

.node--type-lodge-role .field--name-field-role-icon img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* ── Reading measure + body tokens (all node bundles) ────────────── */
.node .field--name-body {
  max-width: 72ch;
  font-size: 1.02rem;
  line-height: 1.75;
  color: #2b3f57;
}

/* The measure is for the NODE's own prose. Inline Layout Builder blocks
   (gateway grid, welcome card, classroom finder…) nest their body
   fields inside the node's DOM and must span their containers. */
.node .block-inline-blockbasic .field--name-body,
.node [class*="block-inline-block"] .field--name-body {
  max-width: none;
}

.node .field--name-body p {
  margin: 0 0 1.15em;
}

.node .field--name-body strong {
  color: var(--mu-navy);
}

/* ── Rich-text scale (WYSIWYG content) ───────────────────────────── */
.node .field--name-body h2 {
  font-family: var(--mu-font-display) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--mu-navy) !important;
  margin: 2em 0 0.6em !important;
}

.node .field--name-body h3 {
  font-family: var(--mu-font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--mu-navy) !important;
  margin: 1.6em 0 0.5em !important;
}

.node .field--name-body h2:first-child,
.node .field--name-body h3:first-child {
  margin-top: 0 !important;
}

.node .field--name-body ul,
.node .field--name-body ol {
  padding-left: 1.4rem;
  margin: 0.5rem 0 1.25rem;
}

.node .field--name-body li {
  padding-left: 0.35rem;
  margin-bottom: 0.55em;
}

.node .field--name-body ul li::marker {
  color: var(--mu-blue);
  content: "▸  ";
  font-size: 0.9em;
}

.node .field--name-body ol li::marker {
  color: var(--mu-blue);
  font-family: var(--mu-font-display);
  font-weight: 600;
}

.node .field--name-body blockquote {
  border-left: 4px solid var(--mu-blue);
  background: rgba(38, 115, 196, 0.05);
  border-radius: 0 12px 12px 0;
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--mu-navy);
}

.node .field--name-body blockquote p:last-child {
  margin-bottom: 0;
}

/* ── Resource Download Cards — document links stop being raw text.
   Pure CSS: the link becomes a flex card with a doc icon chip on the
   left and a type badge on the right. (File size needs markup Drupal
   does not emit for bare links; real file fields keep their size text
   and inherit the same card.) ────────────────────────────────────── */
.node .field--name-body a[href$=".pdf"],
.node .field--name-body a[href$=".doc"],
.node .field--name-body a[href$=".docx"],
.node .field--name-body a[href$=".ppt"],
.node .field--name-body a[href$=".pptx"],
.node .field--name-body a[href$=".xls"],
.node .field--name-body a[href$=".xlsx"],
.node .field--name-body a[href$=".zip"],
.node .field--type-file .file a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #fff;
  border: 1px solid var(--mu-card-border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin: 0.75rem 0;
  font-weight: 600;
  color: var(--mu-navy) !important;
  text-decoration: none !important;
  box-shadow: none;
  transition: background var(--mu-duration-fast) var(--mu-easing),
              border-color var(--mu-duration-fast) var(--mu-easing),
              box-shadow var(--mu-duration-fast) var(--mu-easing),
              transform var(--mu-duration-fast) var(--mu-easing);
  /* cancel the animated prose underline */
  background-image: none !important;
}

.node .field--name-body a[href$=".pdf"]::before,
.node .field--name-body a[href$=".doc"]::before,
.node .field--name-body a[href$=".docx"]::before,
.node .field--name-body a[href$=".ppt"]::before,
.node .field--name-body a[href$=".pptx"]::before,
.node .field--name-body a[href$=".xls"]::before,
.node .field--name-body a[href$=".xlsx"]::before,
.node .field--name-body a[href$=".zip"]::before,
.node .field--type-file .file a::before {
  content: "📄";
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(38, 115, 196, 0.08);
  font-size: 1.15rem;
}

/* Type badge on the right edge. */
.node .field--name-body a[href$=".pdf"]::after  { content: "PDF"; }
.node .field--name-body a[href$=".doc"]::after,
.node .field--name-body a[href$=".docx"]::after { content: "DOC"; }
.node .field--name-body a[href$=".ppt"]::after,
.node .field--name-body a[href$=".pptx"]::after { content: "PPT"; }
.node .field--name-body a[href$=".xls"]::after,
.node .field--name-body a[href$=".xlsx"]::after { content: "XLS"; }
.node .field--name-body a[href$=".zip"]::after  { content: "ZIP"; }

.node .field--name-body a[href$=".pdf"]::after,
.node .field--name-body a[href$=".doc"]::after,
.node .field--name-body a[href$=".docx"]::after,
.node .field--name-body a[href$=".ppt"]::after,
.node .field--name-body a[href$=".pptx"]::after,
.node .field--name-body a[href$=".xls"]::after,
.node .field--name-body a[href$=".xlsx"]::after,
.node .field--name-body a[href$=".zip"]::after {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--mu-font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mu-navy-deep);
  background: linear-gradient(180deg, var(--mu-yellow), #efb83a);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
}

.node .field--name-body a[href$=".pdf"]:hover,
.node .field--name-body a[href$=".doc"]:hover,
.node .field--name-body a[href$=".docx"]:hover,
.node .field--name-body a[href$=".ppt"]:hover,
.node .field--name-body a[href$=".pptx"]:hover,
.node .field--name-body a[href$=".xls"]:hover,
.node .field--name-body a[href$=".xlsx"]:hover,
.node .field--name-body a[href$=".zip"]:hover,
.node .field--type-file .file a:hover {
  background: #f8fafd;
  border-color: #cfe0f4;
  box-shadow: var(--mu-shadow-rest);
  transform: translateY(-1px);
}

/* ── Sidebar continuity: Required/Suggested courses join the modern
   card language (retires the yellow-watercolor panel) ────────────── */
.layout--twocol-section--67-33 .field--name-field-required-courses,
.layout--twocol-section--67-33 .field--name-field-suggested-courses {
  background: #fff !important;
  border: 1px solid var(--mu-card-border) !important;
  border-left: 4px solid var(--mu-yellow) !important;
  border-radius: 14px !important;
  box-shadow: var(--mu-shadow-rest) !important;
  padding: 1.25rem 1.4rem !important;
}

.layout--twocol-section--67-33 .field--name-field-required-courses > .field__label,
.layout--twocol-section--67-33 .field--name-field-suggested-courses > .field__label {
  font-family: var(--mu-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: rgba(30, 58, 95, 0.55) !important;
  margin: 0 0 0.75rem !important;
}

/* Course teasers everywhere (role-page sidebar, course-map rows): the
   Duration / Delivery mode rows are full-page detail — in a compact
   teaser they're noise. The course's own page keeps them. */
.node--view-mode-teaser .field--name-field-duration,
.node--view-mode-teaser .field--name-field-delivery-mode,
.node--view-mode-teaser .field--name-field-course-category {
  display: none !important;
}

/* Course teaser inside the sidebar: tidy, card-like. */
.layout--twocol-section--67-33 .field--name-field-required-courses .node--view-mode-teaser img,
.layout--twocol-section--67-33 .field--name-field-suggested-courses .node--view-mode-teaser img {
  border-radius: 10px;
  border: 1px solid var(--mu-card-border);
}

.layout--twocol-section--67-33 .node--view-mode-teaser ul.links a {
  display: inline-flex;
  align-items: center;
  background: var(--mu-blue);
  color: #fff !important;
  font-family: var(--mu-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: 9px;
  text-decoration: none !important;
  transition: background var(--mu-duration-fast) var(--mu-easing),
              transform var(--mu-duration-fast) var(--mu-easing);
}

.layout--twocol-section--67-33 .node--view-mode-teaser ul.links a:hover {
  background: var(--mu-navy-deep);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────────
   7h. LEARNING PATHWAYS — homepage branch gateway + /pathways
   tabbed directory (scaffolding for Women / Legion / Associations).
   ──────────────────────────────────────────────────────────────── */

/* ── Homepage gateway: 4 balanced branch cards ───────────────────── */
.mu-branch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 0.5rem 0 1rem;
}

.mu-branch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--mu-card-border);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--mu-shadow-rest);
  text-decoration: none !important;
  transition: transform var(--mu-duration-mid) var(--mu-easing),
              box-shadow var(--mu-duration-mid) var(--mu-easing),
              border-color var(--mu-duration-mid) var(--mu-easing);
}

.mu-branch-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mu-shadow-hover);
  border-color: #cfe0f4;
}

.mu-branch-card__icon {
  display: inline-grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 12px;
  background: rgba(38, 115, 196, 0.08);
  font-size: 1.45rem;
}

/* Portrait variant — a branch person instead of an emoji (top-cropped
   so the baked-in label bar in the role art never shows). Drawn a step
   larger than the emoji box so the faces read at a glance. */
.mu-branch-card__icon--img {
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  overflow: hidden;
  background: rgba(38, 115, 196, 0.08);
  border: 1px solid var(--mu-card-border);
  /* top-align the oversized img so ALL the overflow (the baked label
     bar) crops at the bottom — centring splits it both ways. */
  place-items: start;
}

.mu-branch-card__icon--img img {
  /* Source art is square with a label bar baked into the bottom ~15% —
     oversize vertically so the bar is cropped by the wrapper. */
  width: 100%;
  height: 122%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* ---- Role badges (public Member Profile pages) ----------------------
   Rendered by mooseu_class_order_node_view() on trainer nodes. Pill +
   medallion per role: gold = Instructor, blue = Education Coordinator,
   teal = Committee Member. */
.mu-role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.4rem 0 1.2rem;
}

.mu-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 1rem 0.35rem 0.4rem;
  border-radius: 999px;
  border: 1px solid;
  background: #fff;
  box-shadow: var(--mu-shadow, 0 1px 2px rgba(16, 42, 77, 0.06), 0 6px 18px rgba(16, 42, 77, 0.07));
  font-family: var(--mu-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mu-role-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--mu-shadow-hover, 0 2px 4px rgba(16, 42, 77, 0.08), 0 10px 26px rgba(16, 42, 77, 0.12));
}

.mu-role-badge__icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  color: #fff;
  /* the medallion ring */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(16, 42, 77, 0.25);
}

.mu-role-badge__icon svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.mu-role-badge--instructor {
  border-color: #e8d59a;
  background: linear-gradient(135deg, #fff8e6, #fff 60%);
  color: #8a6d1d;
}
.mu-role-badge--instructor .mu-role-badge__icon {
  background: linear-gradient(135deg, #f0b429, #c98a12);
}

.mu-role-badge--coordinator {
  border-color: #c9dcf4;
  background: linear-gradient(135deg, #eef5ff, #fff 60%);
  color: #1d4f8a;
}
.mu-role-badge--coordinator .mu-role-badge__icon {
  background: linear-gradient(135deg, #2673c4, #174e8c);
}

.mu-role-badge--committee {
  border-color: #bfe5dc;
  background: linear-gradient(135deg, #eefaf7, #fff 60%);
  color: #115e4f;
}
.mu-role-badge--committee .mu-role-badge__icon {
  background: linear-gradient(135deg, #0f9d83, #0a6b59);
}

.mu-branch-card__title {
  font-family: var(--mu-font-display) !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--mu-navy) !important;
  margin: 0.25rem 0 0 !important;
  line-height: 1.25 !important;
}

.mu-branch-card__desc {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: rgba(30, 58, 95, 0.65) !important;
  margin: 0 !important;
  flex: 1 1 auto;
}

.mu-branch-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mu-font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--mu-blue);
  margin-top: 0.4rem;
}

.mu-branch-card__cta span {
  transition: transform var(--mu-duration-fast) var(--mu-easing);
}

.mu-branch-card:hover .mu-branch-card__cta {
  color: var(--mu-navy-deep);
}

.mu-branch-card:hover .mu-branch-card__cta span {
  transform: translateX(3px);
}

.mu-branch-card__badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-family: var(--mu-font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mu-navy-deep);
  background: linear-gradient(180deg, var(--mu-yellow), #efb83a);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
}

@media (max-width: 1024px) {
  .mu-branch-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .mu-branch-grid { grid-template-columns: 1fr; }
}

/* ── /pathways: master tab bar ───────────────────────────────────── */
.mu-pathway-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--mu-card-border);
  border-radius: 14px;
  box-shadow: var(--mu-shadow-rest);
  padding: 0.5rem;
  margin: 1.25rem 0 1.5rem;
}

.mu-pathway-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.15rem;
  border-radius: 10px;
  font-family: var(--mu-font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(30, 58, 95, 0.65) !important;
  text-decoration: none !important;
  transition: background var(--mu-duration-fast) var(--mu-easing),
              color var(--mu-duration-fast) var(--mu-easing);
}

.mu-pathway-tab:hover {
  background: var(--mu-bg-hover);
  color: var(--mu-blue) !important;
}

.mu-pathway-tab.is-active {
  background: linear-gradient(180deg, var(--mu-blue) 0%, #2169b5 100%);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(38, 115, 196, 0.30);
}

/* The branch state is driven by the tab bar; hide the auto-generated
   exposed filter form (it would duplicate the tabs as a dropdown). */
.view-id-role_pathways .views-exposed-form {
  display: none;
}

/* ── /pathways: role cards (same language as the home tiles) ─────── */
.view-id-role_pathways .views-view-responsive-grid--horizontal {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 16px !important;
}

.view-id-role_pathways .views-view-responsive-grid__item {
  background: #fff;
  border: 1px solid var(--mu-card-border);
  border-radius: 16px;
  padding: 10px 10px 4px;
  box-shadow: var(--mu-shadow-rest);
  overflow: hidden;
  transition: transform var(--mu-duration-mid) var(--mu-easing),
              box-shadow var(--mu-duration-mid) var(--mu-easing),
              border-color var(--mu-duration-mid) var(--mu-easing);
}

.view-id-role_pathways .views-view-responsive-grid__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--mu-shadow-hover);
  border-color: #cfe0f4;
}

.view-id-role_pathways .views-field-field-role-icon {
  border-radius: 11px;
  overflow: hidden;
  aspect-ratio: 275 / 233;   /* crops the baked-in label bar */
}

/* Drupal leaks the visually-hidden "Image" media label as a bare text
   node here — silence it (the img itself is unaffected). */
.view-id-role_pathways .views-field-field-role-icon .field--label-visually_hidden {
  font-size: 0;
}

.view-id-role_pathways .views-field-field-role-icon img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  object-position: top;
  transition: transform var(--mu-duration-mid) var(--mu-easing);
}

.view-id-role_pathways .views-view-responsive-grid__item:hover img {
  transform: scale(1.045);
}

.view-id-role_pathways .views-field-title {
  text-align: center;
  padding: 0.6rem 0.25rem 0.5rem;
  font-family: var(--mu-font-display);
  font-size: 0.95rem;
  font-weight: 600;
}

.view-id-role_pathways .views-field-title a {
  color: var(--mu-navy) !important;
  text-decoration: none !important;
}

.view-id-role_pathways .views-view-responsive-grid__item:hover .views-field-title a {
  color: var(--mu-blue) !important;
}

/* ── /pathways: "in development" panel ───────────────────────────── */
.mu-pathway-coming {
  background: #fff;
  border: 1px dashed rgba(38, 115, 196, 0.35);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  margin: 0.5rem 0 1.5rem;
}

.mu-pathway-coming__icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 14px;
  background: rgba(246, 194, 68, 0.18);
  font-size: 1.7rem;
  margin-bottom: 0.85rem;
}

.mu-pathway-coming__title {
  font-family: var(--mu-font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--mu-navy) !important;
  margin: 0 0 0.5rem !important;
}

.mu-pathway-coming__copy {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(30, 58, 95, 0.65);
  max-width: 52ch;
  margin: 0 auto 1.25rem;
}

.mu-pathway-coming__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, var(--mu-yellow) 0%, #efb83a 100%);
  color: var(--mu-navy-deep) !important;
  font-family: var(--mu-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: 11px;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(246, 194, 68, 0.35);
  transition: transform var(--mu-duration-fast) var(--mu-easing),
              box-shadow var(--mu-duration-fast) var(--mu-easing);
}

.mu-pathway-coming__back:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(246, 194, 68, 0.45);
}

/* ─────────────────────────────────────────────────────────────────
   7i. HOME WELCOME — launch message layout (badge, headline, steps).
   Container chrome comes from the welcome-card rules in §4; these
   style the structure inside.
   ──────────────────────────────────────────────────────────────── */
/* Prose links: Solo paints content links maroon; brand blue everywhere
   prose appears (node bodies, inline blocks, view areas). */
.node .field--name-body a:not(.button),
.block-inline-blockbasic .field--name-body a:not(.button),
.mu-map-empty a,
.mu-map-intro a {
  color: var(--mu-blue) !important;
}

.node .field--name-body a:not(.button):hover,
.block-inline-blockbasic .field--name-body a:not(.button):hover {
  color: var(--mu-navy-deep) !important;
}

.mu-welcome__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mu-font-display);
  font-size: 0.66rem !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mu-navy-deep) !important;
  background: linear-gradient(180deg, var(--mu-yellow), #efb83a);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  margin: 0 0 0.9rem !important;
}

.mu-welcome__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mu-navy-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .mu-welcome__badge::before {
    animation: muBadgePulse 2.2s var(--mu-easing) infinite;
  }
  @keyframes muBadgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }
}

.mu-welcome__title {
  font-family: var(--mu-font-display) !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--mu-navy) !important;
  line-height: 1.15 !important;
  margin: 0 0 0.2rem !important;
}

.mu-welcome__tag {
  font-family: var(--mu-font-display);
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  color: var(--mu-blue) !important;
  margin: 0 0 1.1rem !important;
}

.mu-welcome__how {
  font-family: var(--mu-font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: rgba(30, 58, 95, 0.55) !important;
  margin: 1.5rem 0 0.4rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mu-card-border);
}

.mu-welcome__lead {
  margin-bottom: 1rem !important;
}

/* Numbered steps: gold-ringed navy chips, content beside. */
.mu-welcome-steps {
  list-style: none;
  counter-reset: mu-step;
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
  display: grid;
  gap: 0.9rem;
}

.mu-welcome-steps li {
  counter-increment: mu-step;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.8rem;
  align-items: start;
  font-size: 0.97rem !important;
  line-height: 1.6 !important;
  color: #2b3f57;
}

.mu-welcome-steps li::before {
  content: counter(mu-step);
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--mu-navy);
  border: 2px solid var(--mu-yellow);
  color: var(--mu-yellow);
  font-family: var(--mu-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 0.1rem;
}

.mu-welcome-steps strong {
  color: var(--mu-navy);
}

.mu-welcome__help {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: rgba(30, 58, 95, 0.70) !important;
  border-top: 1px solid var(--mu-card-border);
  padding-top: 1.1rem;
  margin: 0 !important;
}

/* The anchor jump from step 1 shouldn't land under the sticky-ish nav. */
#mu-branches {
  scroll-margin-top: 5rem;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─────────────────────────────────────────────────────────────────
   7j. HOME RAIL — Latest Courses lives under Recent News in the left
   rail (3 + 3); the welcome message takes the remaining width. The
   emptied third region isn't rendered, so the grid runs two tracks.
   ──────────────────────────────────────────────────────────────── */
.layout--threecol-section--25-50-25 {
  grid-template-columns: 320px minmax(0, 1fr) !important;
  gap: 1.5rem !important;
}

/* Breathing room before the Courses header that follows the news list. */
.layout--threecol-section--25-50-25 > .layout__region--first
  .block-views-blocknews-recent-block-1 ~ .block-inline-blockmooseu-header {
  margin-top: 1.75rem !important;
}

/* Course teasers in the shared rail keep their gold accent (news stays
   blue). */
.layout--threecol-section--25-50-25 > .layout__region--first .views-row:has(.node--type-course) {
  border-left-color: var(--mu-yellow) !important;
}

/* Compact rail rows: descriptions belong on the course pages. */
.layout--threecol-section--25-50-25 > .layout__region--first .views-row .field--name-field-short-description {
  display: none !important;
}

/* The welcome card is wider now; keep the prose at a comfortable
   measure inside it. */
.layout--threecol-section--25-50-25 > .layout__region--second .block-inline-blockbasic {
  padding-inline: 2.5rem !important;
}

.mu-welcome {
  max-width: 62ch;
}

@media (max-width: 1024px) {
  .layout--threecol-section--25-50-25 {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   7k. BACKEND DASHBOARDS — coordinator / instructor panels.
   ──────────────────────────────────────────────────────────────── */
.mu-dash-title {
  font-family: var(--mu-font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--mu-navy);
  margin: 0.5rem 0 0.75rem;
}

.mu-dash-h2 {
  font-family: var(--mu-font-display) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: rgba(30, 58, 95, 0.55) !important;
  margin: 2rem 0 0.6rem !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--mu-card-border);
}

.mu-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mu-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  margin: 0 0.35rem 0.5rem 0;
}

.mu-chip--ok {
  background: rgba(55, 182, 178, 0.14);
  color: #1c6e6b;
  border: 1px solid rgba(55, 182, 178, 0.45);
}

.mu-chip--warn {
  background: rgba(247, 141, 63, 0.12);
  color: #9a4f10;
  border: 1px solid rgba(247, 141, 63, 0.45);
}

.mu-chip--cert {
  background: rgba(38, 115, 196, 0.08);
  color: var(--mu-blue) !important;
  border: 1px solid rgba(38, 115, 196, 0.30);
  text-decoration: none !important;
}

.mu-chip--cert:hover {
  background: var(--mu-blue);
  color: #fff !important;
}

.mu-dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0.5rem;
}

.mu-dash-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(180deg, var(--mu-blue) 0%, #2169b5 100%);
  color: #fff !important;
  font-family: var(--mu-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.7rem 1.35rem;
  border-radius: 11px;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(38, 115, 196, 0.30);
  transition: transform var(--mu-duration-fast) var(--mu-easing),
              box-shadow var(--mu-duration-fast) var(--mu-easing);
}

.mu-dash-btn--gold {
  background: linear-gradient(180deg, var(--mu-yellow) 0%, #efb83a 100%);
  color: var(--mu-navy-deep) !important;
  box-shadow: 0 4px 12px rgba(246, 194, 68, 0.40);
}

.mu-dash-btn:hover {
  transform: translateY(-2px);
}

.mu-dash-until {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: rgba(30, 58, 95, 0.6);
}

/* Dashboard links: brand blue, not Solo's maroon. */
.path-backend td a,
.path-backend .mu-dash-certs a {
  color: var(--mu-blue) !important;
  text-decoration: none !important;
}

.path-backend td a:hover {
  color: var(--mu-navy-deep) !important;
}

/* Dashboard tables: the house card language. */
.path-backend table {
  width: 100%;
  background: #fff;
  border: 1px solid var(--mu-card-border);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--mu-shadow-rest);
}

.path-backend th {
  font-family: var(--mu-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(30, 58, 95, 0.55);
  text-align: left;
  padding: 0.7rem 1rem;
  background: #f8fafd;
  border-bottom: 1px solid var(--mu-card-border);
}

.path-backend td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--mu-card-border);
  font-size: 0.95rem;
  color: #2b3f57;
}

.path-backend tr:last-child td {
  border-bottom: 0;
}

.path-backend tbody tr:hover td {
  background: #f8fafd;
}

/* Honeypot: visually gone, present for bots. */
.mu-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────
   7l. STAFF HUB — tabs, badges, inline actions.
   ──────────────────────────────────────────────────────────────── */
.mu-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid var(--mu-card-border);
  border-radius: 14px;
  box-shadow: var(--mu-shadow-rest);
  padding: 0.45rem;
  margin: 0.75rem 0 1.25rem;
}

.mu-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  font-family: var(--mu-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(30, 58, 95, 0.65) !important;
  text-decoration: none !important;
  transition: background var(--mu-duration-fast) var(--mu-easing),
              color var(--mu-duration-fast) var(--mu-easing);
}

.mu-tab:hover {
  background: var(--mu-bg-hover);
  color: var(--mu-blue) !important;
}

.mu-tab--active {
  background: linear-gradient(180deg, var(--mu-blue) 0%, #2169b5 100%);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(38, 115, 196, 0.30);
}

.mu-tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mu-yellow), #efb83a);
  color: var(--mu-navy-deep);
  font-size: 0.7rem;
  font-weight: 700;
}

.mu-actions-cell {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mu-btn-sm {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  font-family: var(--mu-font-display);
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform var(--mu-duration-fast) var(--mu-easing),
              box-shadow var(--mu-duration-fast) var(--mu-easing);
}

.mu-btn-sm:hover {
  transform: translateY(-1px);
}

.mu-btn-sm--approve {
  background: linear-gradient(180deg, #3dbb7c 0%, #2fa468 100%);
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(47, 164, 104, 0.35);
}

.mu-btn-sm--decline {
  background: #fff;
  color: #b33c2e !important;
  border: 1px solid rgba(179, 60, 46, 0.4);
}

.mu-btn-sm--grant {
  background: rgba(38, 115, 196, 0.08);
  color: var(--mu-blue) !important;
  border: 1px solid rgba(38, 115, 196, 0.30);
}

.mu-btn-sm--grant:hover {
  background: var(--mu-blue);
  color: #fff !important;
}

.mu-chip--packet {
  background: #f8fafd;
  color: rgba(30, 58, 95, 0.6);
  border: 1px dashed rgba(30, 58, 95, 0.25);
}

.mu-hub-note {
  font-size: 0.85rem;
  color: rgba(30, 58, 95, 0.55);
  margin: 0 0 0.75rem;
}

.mu-config-card {
  background: #fff;
  border: 1px solid var(--mu-card-border);
  border-left: 4px solid var(--mu-yellow);
  border-radius: 14px;
  box-shadow: var(--mu-shadow-rest);
  padding: 1.25rem 1.5rem;
}

.mu-csv {
  font-size: 0.7rem;
  margin-left: 0.5rem;
  color: var(--mu-blue) !important;
}

/* ─────────────────────────────────────────────────────────────────
   7m. NAV DROPDOWN — My Dashboard submenu on the blue band.
   Children are access-filtered by Drupal, so each person's dropdown
   holds only the dashboards they can open.
   ──────────────────────────────────────────────────────────────── */
#primary-menu .nav__menu-item-main {
  position: relative;
}

#primary-menu .navigation__menubar-main ul,
#primary-menu .nav__menu-item-main > ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--mu-card-border);
  border-radius: 0 0 12px 12px;
  box-shadow: var(--mu-shadow-hover);
  padding: 0.4rem;
  margin: 0;
  list-style: none;
  display: none;
  z-index: 600;
}

#primary-menu .nav__menu-item-main:hover > ul,
#primary-menu .nav__menu-item-main:focus-within > ul {
  display: block;
}

#primary-menu .nav__menu-item-main > ul li {
  display: block !important;
  width: 100% !important;
}

#primary-menu .nav__menu-item-main > ul a {
  display: block;
  padding: 0.6rem 0.9rem !important;
  border-radius: 8px;
  font-family: var(--mu-font-display);
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--mu-navy) !important;
  background: transparent !important;
}

#primary-menu .nav__menu-item-main > ul a::after {
  display: none;
}

#primary-menu .nav__menu-item-main > ul a:hover {
  background: var(--mu-bg-hover) !important;
  color: var(--mu-blue) !important;
}

/* Solo's own toggler button renders as a dark box; the hover/focus
   dropdown replaces it, with a caret on the link itself. */
#primary-menu .dropdown-toggler {
  display: none !important;
}

/* The link's own ::after is the yellow underline (polish.css), so the
   caret rides the inner span instead. */
#primary-menu .nav__menu-item-main.has-sub__menu > a span::after {
  content: " ▾";
  font-size: 0.75em;
  opacity: 0.85;
}

/* Below the desktop breakpoint the children render inline. */
@media (max-width: 991px) {
  #primary-menu .nav__menu-item-main > ul {
    position: static;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.2rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
  #primary-menu .nav__menu-item-main > ul li {
    width: auto !important;
  }
  #primary-menu .nav__menu-item-main > ul a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.78rem !important;
  }
  #primary-menu .nav__menu-item-main > ul a:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   8. MOBILE NAV — with a two-item menu a hamburger is ceremony.
   Below 992px Solo showed BOTH the dark hamburger block AND the
   expanded item list. Drop the hamburger, render the links as a
   simple horizontal row on the blue band. No JS, nothing to break.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  #primary-menu .mobile-nav.hamburger-icon,
  #primary-menu .mobile-menubar-toggler-button {
    display: none !important;
  }

  #primary-menu .navigation__menubar-main,
  #primary-menu .menu--main ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    margin: 0 !important;
    padding: 0 0.5rem !important;
    background: transparent !important;
  }

  #primary-menu .nav__menu-item-main {
    width: auto !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    border: 0 !important;
    margin: 0 !important;
  }

  #primary-menu .nav__menu-link-main {
    padding: 0.85rem 1rem !important;
  }
}

/* --- Dropdown menus (2026-06-05): the open submenu used to render
   transparent with white links, invisible against the page. Solid
   card, dark links, clear hover. --- */
.sub__menu.sub__menu-main {
  background: #fff !important;
  border: 1px solid var(--mu-card-border, #e6ebf3);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 32px rgba(16, 24, 40, 0.18);
  padding: 0.4rem;
  min-width: 240px;
  z-index: 140;
}
.sub__menu-main .nav__submenu-item { background: transparent; }
.sub__menu-main .nav__menu-link {
  display: block;
  color: var(--mu-blue, #1e3a5f) !important;
  font-weight: 600;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  text-shadow: none;
}
.sub__menu-main .nav__menu-link:hover,
.sub__menu-main .nav__menu-link:focus {
  background: #eef4fd;
  color: var(--mu-blue, #1e3a5f) !important;
}