/**
 * MooseU polish layer — applied AFTER all other CSS to refine the
 * aesthetic. This is where the educational-warmth direction gets
 * its character: paper grain, hand-drawn accents, refined cards,
 * confident type, subtle motion.
 *
 * Uses tokens from mooseu-tokens.css. No raw hex codes.
 */

/* ════════════════════════════════════════════════════════════════
   GLOBAL ATMOSPHERE — paper grain on the app bg + warm app surface
   ════════════════════════════════════════════════════════════════ */

html {
  background:
    radial-gradient(circle at 8% 12%, rgba(246, 194, 68, 0.08) 0, transparent 38%),
    radial-gradient(circle at 92% 25%, rgba(38, 115, 196, 0.06) 0, transparent 42%),
    radial-gradient(circle at 50% 95%, rgba(247, 141, 63, 0.05) 0, transparent 50%),
    var(--mu-bg-app, #f5f9ff);
  background-attachment: fixed;
}

body {
  font-family: var(--mu-font-body), "Source Sans 3", system-ui, sans-serif !important;
  color: var(--mu-navy, #1e3a5f) !important;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle paper-like main container — soft inner shadow on left/right
   to suggest a magazine-spread feel without being heavy. */
#main-container {
  background: var(--mu-bg-paper, #fff) !important;
  box-shadow:
    0 1px 0 rgba(30, 58, 95, 0.06),
    0 8px 32px rgba(30, 58, 95, 0.04);
  border-radius: 0 !important;
  border: 0 !important;
  position: relative;
}

/* Top + bottom of main container: subtle gradient strip to mark edges */
#main-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--mu-blue, #2673c4) 0%,
    var(--mu-yellow, #f6c244) 35%,
    var(--mu-orange, #f78d3f) 65%,
    var(--mu-blue, #2673c4) 100%);
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════════
   HEADER — bigger, warmer, with subtle texture
   ════════════════════════════════════════════════════════════════ */

#header {
  background:
    radial-gradient(circle at 80% 50%, rgba(246, 194, 68, 0.10) 0, transparent 50%),
    radial-gradient(circle at 15% 85%, rgba(38, 115, 196, 0.06) 0, transparent 60%),
    var(--mu-bg-app, #f5f9ff) !important;
  padding-block: 1.25rem !important;
  padding-inline: 2rem !important;
  border-bottom: 0 !important;
  position: relative;
}

/* Tagline — Patrick Hand handwritten so it looks human, not a button */
.site-name, .site-branding__name, .site-name a,
.site-slogan, .site-branding__slogan {
  font-family: var(--mu-font-script), "Patrick Hand", cursive, serif !important;
  font-weight: 700 !important;
  color: var(--mu-navy, #1e3a5f) !important;
  letter-spacing: 0.5px !important;
}

.site-name, .site-branding__name, .site-name a {
  font-size: 1.4rem !important;
  line-height: 1.3 !important;
}

.site-slogan, .site-branding__slogan {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  font-style: normal !important;
  margin-top: 0.1rem !important;
  line-height: 1.2 !important;
}

/* Auth pill buttons — refined, less heavy */
.navigation__menubar-account li > a,
.solo-account-menu a,
.nav__menu-link-account {
  padding: 0.55rem 1rem !important;
  border-radius: var(--mu-radius-md, 0.6rem) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.3px;
  background: var(--mu-blue, #2673c4) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(38, 115, 196, 0.20);
  transition: transform var(--mu-duration-fast, 0.12s) ease,
              box-shadow var(--mu-duration-fast, 0.12s) ease,
              background var(--mu-duration-fast, 0.12s) ease;
}

.navigation__menubar-account li > a:hover {
  background: var(--mu-navy-deep, #0f2347) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(38, 115, 196, 0.30);
}

/* Search button in header */
#search-button-open button,
.search-button-open button,
.solo-button-search,
button.btn-animate.solo-button-menu {
  background: var(--mu-blue, #2673c4) !important;
  color: #fff !important;
  border-radius: var(--mu-radius-md, 0.6rem) !important;
  padding: 0.55rem 0.9rem !important;
  border: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   NAVIGATION — taller, padded, with subtle highlight on active
   ════════════════════════════════════════════════════════════════ */

#primary-menu {
  background: var(--mu-blue, #2673c4) !important;
  background:
    linear-gradient(180deg, var(--mu-blue, #2673c4) 0%, #2168b3 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 2px 8px rgba(15, 35, 71, 0.12);
  padding-block: 0 !important;
}

.menu--main, .nav__menu, .navigation__menubar.navigation__menubar-main {
  justify-content: flex-start !important;
  max-width: var(--mu-container-max, 1280px) !important;
  margin: 0 auto !important;
  padding-inline: 1.5rem !important;
}

.menu--main a,
.nav__menu-link-main {
  padding: 1rem 1.5rem !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.92) !important;
  position: relative;
  transition: color var(--mu-duration-fast, 0.12s) ease,
              background var(--mu-duration-fast, 0.12s) ease;
}

.menu--main a::after,
.nav__menu-link-main::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0;
  height: 3px;
  background: var(--mu-yellow, #f6c244);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--mu-duration-mid, 0.22s) cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.menu--main a:hover::after,
.menu--main a.is-active::after,
.nav__menu-link-main:hover::after,
.nav__menu-link-main.is-active::after {
  transform: scaleX(1);
}

/* ════════════════════════════════════════════════════════════════
   WHITEBOARD HEADERS — sturdier, more "framed"
   ════════════════════════════════════════════════════════════════ */

.block-inline-blockmooseu-header {
  background:
    radial-gradient(180px 80px at 18% 40%, rgba(246, 194, 68, 0.15), transparent 60%),
    radial-gradient(220px 90px at 80% 65%, rgba(38, 115, 196, 0.10), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
  border: 3px solid rgba(30, 58, 95, 0.12) !important;
  border-radius: var(--mu-radius-lg, 0.85rem) !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 6px 20px rgba(30, 58, 95, 0.08) !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.block-inline-blockmooseu-header .field--name-field-icon {
  font-size: 2rem !important;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: rgba(246, 194, 68, 0.20);
  border-radius: 50%;
}

.block-inline-blockmooseu-header .field--name-field-header-title {
  font-family: var(--mu-font-script), "Patrick Hand", cursive !important;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem) !important;
  font-weight: 700 !important;
  color: var(--mu-navy, #1e3a5f) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   DIVIDER (mooseu_divider) — bigger, more presence
   ════════════════════════════════════════════════════════════════ */

.block-inline-blockmooseu-divider.mu-whiteboard {
  background:
    radial-gradient(200px 100px at 20% 30%, rgba(246, 194, 68, 0.18), transparent 65%),
    radial-gradient(280px 120px at 75% 70%, rgba(38, 115, 196, 0.10), transparent 60%),
    radial-gradient(180px 90px at 50% 100%, rgba(247, 141, 63, 0.08), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fffaef 100%) !important;
  border: 4px solid var(--mu-yellow, #f6c244) !important;
  padding: 1.5rem 2rem !important;
  margin: 2rem 0 1.5rem !important;
  border-radius: var(--mu-radius-xl, 1.25rem) !important;
  box-shadow: 0 8px 24px rgba(246, 194, 68, 0.20) !important;
  justify-content: center !important;
}

.block-inline-blockmooseu-divider .field--name-field-mu-icon-divider {
  font-size: 2.4rem !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  background: rgba(246, 194, 68, 0.25) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.block-inline-blockmooseu-divider .field--name-field-mu-divider-title {
  font-family: var(--mu-font-script), "Patrick Hand", cursive !important;
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
  font-weight: 700 !important;
  color: var(--mu-navy, #1e3a5f) !important;
  line-height: 1.1 !important;
}

/* ════════════════════════════════════════════════════════════════
   CARDS — news, course, role tiles
   ════════════════════════════════════════════════════════════════ */

/* News + course list cards (on home, in 3-col grid) */
.layout--threecol-section--25-50-25 > .layout__region--first .views-row,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row {
  background: var(--mu-bg-paper, #fff) !important;
  border: 1px solid rgba(30, 58, 95, 0.08) !important;
  border-radius: var(--mu-radius-md, 0.6rem) !important;
  padding: 0.75rem !important;
  margin-bottom: 0.5rem !important;
  transition: transform var(--mu-duration-mid, 0.22s) cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow var(--mu-duration-mid, 0.22s) cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color var(--mu-duration-mid, 0.22s) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.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(-2px);
  box-shadow: 0 8px 24px rgba(38, 115, 196, 0.18) !important;
  border-color: var(--mu-blue, #2673c4) !important;
}

/* Card thumbnail — slightly bigger, square, rounded */
.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 {
  width: 64px !important;
  height: 64px !important;
  border-radius: var(--mu-radius-sm, 0.375rem) !important;
  object-fit: cover !important;
}

/* Card title — confident weight, subtle blue */
.layout--threecol-section--25-50-25 > .layout__region--first .views-row a,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row a {
  font-weight: 700 !important;
  color: var(--mu-blue, #2673c4) !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0.1px;
}

/* Date stamps softer */
.layout--threecol-section--25-50-25 .field--name-field-published-date {
  font-size: 0.72rem !important;
  color: rgba(30, 58, 95, 0.45) !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

/* Past Articles pill — bigger, more inviting */
.more-link {
  display: flex !important;
  justify-content: center;
  margin-top: 1rem !important;
}

.more-link a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  background: var(--mu-blue, #2673c4) !important;
  color: #fff !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: var(--mu-radius-pill, 999px) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 12px rgba(38, 115, 196, 0.25) !important;
  transition: transform var(--mu-duration-fast, 0.12s) ease, box-shadow var(--mu-duration-fast, 0.12s) ease;
}

.more-link a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(38, 115, 196, 0.35) !important;
}

/* ════════════════════════════════════════════════════════════════
   YELLOW WELCOME CARD — refined 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.30) 100%) !important;
  background-blend-mode: multiply, normal !important;
  border: 2px solid var(--mu-yellow, #f6c244) !important;
  border-radius: var(--mu-radius-lg, 0.85rem) !important;
  padding: 1.75rem 2rem !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(246, 194, 68, 0.25) !important;
  position: relative;
}

.layout--threecol-section--25-50-25 > .layout__region--second .block-inline-blockbasic p,
.mooseu-highlighted-block p {
  margin: 0 0 1em 0 !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--mu-navy, #1e3a5f) !important;
}

.layout--threecol-section--25-50-25 > .layout__region--second .block-inline-blockbasic p:last-child,
.mooseu-highlighted-block p:last-child {
  margin-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   ROLE GRID — refined tile look with hover lift
   ════════════════════════════════════════════════════════════════ */

.layout--twocol-section--25-75 {
  background:
    radial-gradient(circle at 50% 0%, rgba(246, 194, 68, 0.10) 0, transparent 40%),
    rgba(255, 251, 229, 0.50) !important;
  border-radius: var(--mu-radius-xl, 1.25rem) !important;
  padding: 2rem !important;
  margin: 1.5rem 0 !important;
  border: 2px solid rgba(246, 194, 68, 0.35) !important;
}

/* Role tile grid — let Drupal's responsive-grid CSS variables drive
   layout (it computes auto-fit based on cell-min-width at runtime).
   We just polish the aesthetics. */
.layout--twocol-section--25-75 .views-view-responsive-grid {
  --views-responsive-grid--column-count: 4 !important;
  --views-responsive-grid--cell-min-width: 150px !important;
  --views-responsive-grid--layout-gap: 14px !important;
}

.layout--twocol-section--25-75 .views-view-responsive-grid__item {
  background: var(--mu-bg-paper, #fff) !important;
  border: 2px solid rgba(30, 58, 95, 0.06) !important;
  border-radius: var(--mu-radius-lg, 0.85rem) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.06) !important;
  transition: transform var(--mu-duration-mid, 0.22s) cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow var(--mu-duration-mid, 0.22s) cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color var(--mu-duration-mid, 0.22s) cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.layout--twocol-section--25-75 .views-view-responsive-grid__item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(38, 115, 196, 0.22) !important;
  border-color: var(--mu-blue, #2673c4) !important;
}

.layout--twocol-section--25-75 .views-view-responsive-grid__item img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/* Role intro card on left of role section */
.layout--twocol-section--25-75 > .layout__region--first .block-inline-blockbasic {
  background: var(--mu-bg-paper, #fff) !important;
  border: 2px solid var(--mu-yellow, #f6c244) !important;
  border-radius: var(--mu-radius-lg, 0.85rem) !important;
  padding: 1.25rem 1.5rem !important;
  margin-top: 0.5rem !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  box-shadow: 0 4px 14px rgba(246, 194, 68, 0.15) !important;
}

/* ════════════════════════════════════════════════════════════════
   COURSE CHOICE TILES — bigger, friendlier
   ════════════════════════════════════════════════════════════════ */

.mu-courses-choices {
  gap: 2rem !important;
  margin: 2rem 0 !important;
}

.mu-courses-choice {
  background: var(--mu-bg-paper, #fff) !important;
  border: 2px solid rgba(30, 58, 95, 0.08) !important;
  border-radius: var(--mu-radius-lg, 0.85rem) !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 16px rgba(30, 58, 95, 0.06) !important;
  transition: transform var(--mu-duration-mid, 0.22s) cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow var(--mu-duration-mid, 0.22s) cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.mu-courses-choice:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(38, 115, 196, 0.20) !important;
  border-color: var(--mu-blue, #2673c4) !important;
}

.mu-courses-choice img {
  max-width: 100% !important;
  border-radius: var(--mu-radius-md, 0.6rem) !important;
  margin-bottom: 1rem !important;
}

.mu-courses-choice h3 {
  font-family: var(--mu-font-script), "Patrick Hand", cursive !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  color: var(--mu-navy, #1e3a5f) !important;
  margin: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   PAGE HEADINGS (.mu-courses-heading, .mu-page-heading)
   ════════════════════════════════════════════════════════════════ */

.mu-courses-heading,
.mu-page-heading {
  font-family: var(--mu-font-script), "Patrick Hand", cursive !important;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem) !important;
  font-weight: 700 !important;
  color: var(--mu-navy, #1e3a5f) !important;
  margin: 1.5rem 0 1.25rem !important;
  letter-spacing: 0.5px !important;
  line-height: 1.1 !important;
}

/* ════════════════════════════════════════════════════════════════
   LODGE ROLE PAGE — refined sidebar
   ════════════════════════════════════════════════════════════════ */

.layout--twocol-section--67-33 .field--name-field-required-courses,
.layout--twocol-section--67-33 .field--name-field-suggested-courses {
  background:
    linear-gradient(135deg, #fffbe5 0%, rgba(246, 194, 68, 0.18) 100%) !important;
  border: 2px solid var(--mu-yellow, #f6c244) !important;
  border-radius: var(--mu-radius-lg, 0.85rem) !important;
  padding: 1.25rem !important;
  margin-bottom: 1rem !important;
  box-shadow: 0 4px 14px rgba(246, 194, 68, 0.15) !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-script), "Patrick Hand", cursive !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--mu-navy, #1e3a5f) !important;
  margin: 0 0 0.5rem !important;
  letter-spacing: 0.3px;
}

.layout--twocol-section--67-33 .field--name-field-required-courses a,
.layout--twocol-section--67-33 .field--name-field-suggested-courses a {
  display: block;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--mu-radius-sm, 0.375rem);
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--mu-blue, #2673c4) !important;
  text-decoration: none !important;
  transition: background var(--mu-duration-fast, 0.12s) ease;
}

.layout--twocol-section--67-33 .field--name-field-required-courses a:hover,
.layout--twocol-section--67-33 .field--name-field-suggested-courses a:hover {
  background: var(--mu-yellow, #f6c244);
  color: var(--mu-navy, #1e3a5f) !important;
}

/* Lodge role body — better typography */
.node--type-lodge-role .field--name-body p,
.node--type-lodge-role .field--name-body li {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mu-navy, #1e3a5f);
}

.node--type-lodge-role .field--name-body h2,
.node--type-lodge-role .field--name-body h3 {
  font-family: var(--mu-font-display), "Cooper Black", Georgia, serif;
  color: var(--mu-blue, #2673c4);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.node--type-lodge-role .field--name-body ul {
  padding-left: 1.5rem;
  margin: 0.5rem 0 1rem;
}

.node--type-lodge-role .field--name-body li {
  padding-left: 0.5rem;
  margin-bottom: 0.4rem;
}

.node--type-lodge-role .field--name-body li::marker {
  color: var(--mu-yellow, #f6c244);
  font-size: 1.1em;
}

/* Role title strip on the role node — bigger, more presence */
.node--type-lodge-role .node__title,
.node--type-lodge-role .node__header h1 {
  display: none !important;  /* The title is in the image already */
}

/* ════════════════════════════════════════════════════════════════
   COURSE PAGE — better proportions
   ════════════════════════════════════════════════════════════════ */

.node--type-course .field--name-body p,
.node--type-course .field--name-body li {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mu-navy, #1e3a5f);
}

.node--type-course .field--name-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--mu-radius-md, 0.6rem);
  margin: 1rem 0;
  box-shadow: 0 4px 16px rgba(38, 115, 196, 0.10);
}

.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: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  background: rgba(38, 115, 196, 0.06);
  padding: 0.35rem 0.75rem;
  border-radius: var(--mu-radius-pill, 999px);
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
}

.node--type-course .layout--twocol-section--33-67 .field__label {
  color: rgba(30, 58, 95, 0.60);
  font-weight: 600;
  font-size: 0.85rem;
  margin-right: 0.2rem;
}

/* ════════════════════════════════════════════════════════════════
   IN-PERSON LOOKUP CALLOUT — refined
   ════════════════════════════════════════════════════════════════ */

.mu-inperson-callout {
  background:
    radial-gradient(circle at 30% 30%, rgba(246, 194, 68, 0.30) 0, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(247, 141, 63, 0.25) 0, transparent 65%),
    linear-gradient(135deg, #fffbe5 0%, #ffefcd 100%) !important;
  border: 3px dashed var(--mu-yellow, #f6c244) !important;
  border-radius: var(--mu-radius-xl, 1.25rem) !important;
  padding: 3rem 2rem !important;
  margin: 2rem 0 !important;
  text-align: center !important;
  box-shadow: 0 8px 24px rgba(246, 194, 68, 0.20) !important;
}

.mu-inperson-callout h2 {
  font-family: var(--mu-font-script), "Patrick Hand", cursive !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  font-weight: 700 !important;
  color: var(--mu-blue, #2673c4) !important;
  margin: 0 0 0.5rem !important;
  letter-spacing: 1px !important;
}

.mu-inperson-cs {
  font-family: var(--mu-font-script), "Patrick Hand", cursive !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--mu-orange, #f78d3f) !important;
  margin: 0 !important;
  font-style: italic !important;
}

/* ════════════════════════════════════════════════════════════════
   FOOTER — light, branded gradient strip
   ════════════════════════════════════════════════════════════════ */

footer, [role="contentinfo"], #footer, .footer-menu-container {
  background: linear-gradient(180deg, var(--mu-bg-app, #f5f9ff) 0%, #eaf2fb 100%) !important;
  border-top: 4px solid var(--mu-blue, #2673c4) !important;
  padding: 1.25rem 1.5rem !important;
  text-align: center !important;
  font-size: 0.85rem !important;
  color: rgba(30, 58, 95, 0.70) !important;
  margin-top: 2rem !important;
}

footer a, [role="contentinfo"] a {
  color: var(--mu-blue, #2673c4) !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════════════════════════
   PAGE LOAD — gentle stagger reveal on home cards
   ════════════════════════════════════════════════════════════════ */

@keyframes muRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Motion DISABLED while debugging role-grid render — animation
   delays were stacking with viewport-snapshot timing causing tiles
   beyond the 4th to stay at opacity:0 in headless screenshots. */
@keyframes muRiseFinal {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — stack at narrower viewports
   ════════════════════════════════════════════════════════════════ */

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

  .layout--threecol-section--25-50-25 > .layout__region--second {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 768px) {
  .layout--threecol-section--25-50-25,
  .layout--twocol-section--25-75,
  .layout--twocol-section--67-33,
  .layout--twocol-section--33-67 {
    grid-template-columns: 1fr !important;
  }

  .layout--twocol-section--25-75 .views-view-responsive-grid {
    --views-responsive-grid--column-count: 2 !important;
  }

  .mu-courses-choices {
    grid-template-columns: 1fr !important;
  }

  .menu--main, .nav__menu {
    padding-inline: 0.5rem !important;
  }

  .menu--main a, .nav__menu-link-main {
    padding: 0.75rem 0.85rem !important;
    font-size: 0.85rem !important;
  }
}