/**
 * MooseU layout system — recreates the Drupal 10 portal look on top of
 * Solo. Targets the actual class names Solo emits (.solo-outer,
 * .layout--threecol-section, .layout--twocol-section, .mu-whiteboard,
 * Solo views block wrappers) so we don't need a single template override.
 *
 * Sections in this file:
 *   1. Page width + global container
 *   2. Header band
 *   3. Blue navigation bar
 *   4. Layout Builder section spacing + nesting
 *   5. Whiteboard headers (mu-whiteboard from mooseu_header bundle)
 *   6. Recent News card list
 *   7. Latest Courses card list
 *   8. Welcome (yellow) card in centre column
 *   9. Role section (intro card + 4-col image grid + soft yellow bg)
 *  10. Footer
 *  11. Responsive breakpoints
 */

/* ========================================================================
   1. Page width + global container
   ======================================================================== */

/* Match the live MooseU site's container behavior. Solo's sw-100 puts
   the outer wrapper at 100% width; Solo's main-container has its own
   has-border + radius-4 box styling. We don't override widths here —
   let Solo settings drive that — but we do tighten the inside spacing. */

main, [role="main"] {
  padding: 1.25rem 1.5rem 2rem;
}

/* Hide leaked field labels for media references — Drupal sometimes
   renders both the FIELD-level label ("Hero image") AND the inner
   media-image label ("Image") even with formatter_label set to hidden.
   Suppress them both. */
.field--name-field-hero-media > .field__label,
.field--name-field-role-icon > .field__label,
.field--name-field-thumbnail > .field__label,
.field--name-field-media-image > .field__label {
  display: none !important;
}

/* Hide broken / empty <img> tags Drupal sometimes emits for missing
   media. Targets img with no src or src="" — broken icon goes away. */
img:not([src]),
img[src=""],
img[src="http://default"],
img[src^="http://default/"] {
  display: none !important;
}

/* Visually-hidden labels remain in DOM for a11y but don't display */
.field--label-visually_hidden > .field__label,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Hide visually-hidden field labels everywhere — Drupal sometimes leaks
   the inner text "Image" / "Body" etc. into the rendered output when
   Views' alter_text strips tags but keeps content. */
.field--label-visually_hidden > .field__label,
.field--label-visually_hidden::before {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Stronger: hide the bare text node "Image" that leaks when Views
   rewrite strips the wrapping <label>. Selecting on the container
   class clips its first text-node child. */
.layout--twocol-section--25-75 > .layout__region--second .field--label-visually_hidden {
  font-size: 0 !important;
}
.layout--twocol-section--25-75 > .layout__region--second .field--label-visually_hidden .field__item {
  font-size: 1rem !important;
}

/* Page heading style — used on /courses, /become-an-instructor, /contact */
.mu-courses-heading,
.mu-page-heading {
  font-family: "Cooper Black", "Patrick Hand", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 900;
  color: #1e3a5f;
  margin: 1rem 0 0.5rem;
  letter-spacing: 0.5px;
}

/* Promo image used on /become-an-instructor + similar pages */
.mu-promo-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.85rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(38, 115, 196, 0.12);
}

.mu-courses-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
  align-items: stretch;
}

.mu-courses-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none !important;
  color: #1e3a5f !important;
  background: #fff;
  border: 1px solid #e3eaf5;
  border-radius: 0.85rem;
  padding: 1.25rem 1rem;
  transition: transform 0.15s, box-shadow 0.15s;
}

.mu-courses-choice:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(38, 115, 196, 0.18);
  border-color: var(--moose-blue, #2673c4);
}

.mu-courses-choice img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: 0.6rem;
  margin-bottom: 0.75rem;
}

.mu-courses-choice h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--moose-blue, #2673c4);
}

@media (max-width: 700px) {
  .mu-courses-choices {
    grid-template-columns: 1fr;
  }
}

/* Live constrains its main-container to ~1100px even though the global
   width is sw-100. Match that — the welcome card + columns then sit in
   a designed reading width, not edge-to-edge. */
.page-wrapper #main-container,
.page-wrapper > .solo-outer > .solo-inner > .main-container,
#main-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* Header + nav band stay full-width — they shouldn't shrink with the
   main content. */
#header,
header[role="banner"],
#primary-menu {
  max-width: none !important;
  width: 100% !important;
}

/* But their INNER content respects the same 1100px so logo + utility
   menu sit aligned with the main content below. */
#header-inner,
#primary-menu-inner {
  max-width: 1100px;
  margin: 0 auto !important;
}

/* ========================================================================
   2. Header band — large logo, tagline, utilities on the right
   ======================================================================== */

/* Header: faint blue tint matching live's #f5f9ff bg, big prominent logo. */
header[role="banner"],
.solo-header,
#header,
.region--header,
.solo-header-region {
  background: #f5f9ff !important;
  padding: 1rem 1.5rem !important;
  border-bottom: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

#header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1.5rem;
}

/* Site branding */
.block-system-branding-block,
.site-branding,
#block-mooseu-branding {
  display: flex !important;
  align-items: center;
  gap: 1.5rem;
  padding: 0 !important;
  flex: 0 1 auto;
}

/* Big logo to match live's prominent branding (~200px tall). */
.block-system-branding-block img,
.site-branding img,
.site-logo img,
.site-logo-img,
.solo-logo img {
  max-height: 200px;
  height: auto;
  width: auto;
  display: block;
}

.site-logo {
  display: inline-block !important;
}

/* Tagline: slab-serif heavy face like Cooper Black, matching live. */
.site-name, .site-branding__name, .site-name a,
.site-slogan, .site-branding__slogan {
  font-family: "Cooper Black", "Patrick Hand", Georgia, serif !important;
}

.site-name, .site-branding__name, .site-name a {
  font-weight: 900;
  color: #1e3a5f !important;
  font-size: 1.85rem !important;
  letter-spacing: 0;
  line-height: 1.25;
  text-decoration: none !important;
}

.site-slogan, .site-branding__slogan {
  color: #1e3a5f;
  font-size: 1.5rem;
  font-weight: 900;
  font-style: normal;
  margin-top: 0.25rem;
  display: block;
  line-height: 1.25;
}

/* Account/utilities block in header — push to the right */
#block-mooseu-account-menu, .block-system-menu-block-account {
  flex: 0 0 auto;
}

/* G8 — header auth-buttons should NOT be wrapped in a dark pill.
   Live shows them as plain blue buttons sitting on the light-blue
   header. Strip my dark-bg override + match live's button look. */
#block-mooseu-account-menu,
#block-mooseu-account-menu-menu,
.block-system-menu-block-account,
.solo-account-menu,
.navigation__menubar-account {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.navigation__menubar-account li > a,
.solo-account-menu a,
.nav__menu-link-account {
  background: var(--moose-blue, #2673c4) !important;
  color: #fff !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: 0.3rem !important;
  font-weight: 600;
  margin: 0 0.25rem;
}

.navigation__menubar-account li > a:hover,
.solo-account-menu a:hover {
  background: var(--moose-blue-light, #5999d9) !important;
}

/* ========================================================================
   3. Blue navigation bar
   ======================================================================== */

/* Hide hamburger toggle on desktop, show full horizontal menu instead.
   Solo's dynamic CSS does this based on the mn-992 setting at runtime
   (when Solo regenerates dynamic CSS), but on a fresh install the
   dynamic file may not exist yet — so enforce the rule explicitly here. */
@media (min-width: 992px) {
  .page-wrapper.mn-992 .mobile-nav.hamburger-icon,
  .mn-992 .mobile-nav,
  .mn-992 .mobile-menubar-toggler-button {
    display: none !important;
  }
  .page-wrapper.mn-992 .menu--main,
  .page-wrapper.mn-992 .nav__menu,
  .page-wrapper.mn-992 .block-system-menu-block-main ul {
    display: flex !important;
  }
}

/* Below the breakpoint, do the inverse — hide the horizontal menu, show
   the hamburger. */
@media (max-width: 991px) {
  .page-wrapper.mn-992 .menu--main,
  .page-wrapper.mn-992 .nav__menu,
  .page-wrapper.mn-992 .block-system-menu-block-main ul {
    display: none;
  }
}

/* Navigation styling — match live: solid moose-blue band on the primary
   menu region with white links. */
#primary-menu {
  background: var(--moose-blue, #2673c4) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#primary-menu-inner,
nav.menu--main,
nav.block-menu.menu--main,
.block-system-menu-block-main {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* The menu list — centered items inside the blue band. Justify-content
   center ensures that even with few items the blue strip looks
   intentionally laid out (no "empty rectangle to the right"). */
.menu--main, .block-system-menu-block-main ul, .menu.nav__menu,
.navigation__menubar.navigation__menubar-main {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 0;
  padding: 0 !important;
  list-style: none;
  margin: 0 !important;
  background: transparent !important;
  width: 100%;
}

.menu--main li, .block-system-menu-block-main li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.menu--main a,
.nav__menu-link-main,
.block-system-menu-block-main a {
  display: block;
  padding: 0.85rem 1.25rem !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  letter-spacing: 0.3px;
  transition: background 0.15s ease;
}

.menu--main a:hover,
.nav__menu-link-main:hover,
.block-system-menu-block-main a:hover {
  background: rgba(0, 0, 0, 0.15);
  color: #fff !important;
}

.menu--main a.is-active,
.nav__menu-link-main.is-active,
.menu--main li.menu-item--active-trail > a {
  background: var(--moose-blue-light, #5999d9);
}

/* ========================================================================
   4. Layout Builder section spacing + nesting
   ======================================================================== */

/* Reduce massive vertical gaps Solo introduces between sections */
.layout {
  padding: 0 !important;
  margin: 0 !important;
}

/* Sections that contain content get standard spacing */
main .layout--threecol-section,
main .layout--twocol-section,
main .layout--onecol {
  padding: 1.25rem 0 !important;
}

/* Three-column 25-50-25 row — tighter than my first pass; matches the
   compact feel of the live home where the right-most courses column
   sits close to the welcome card. */
.layout--threecol-section--25-50-25 {
  display: grid !important;
  grid-template-columns: 280px minmax(360px, 1fr) 280px !important;
  gap: 1rem !important;
  align-items: start;
  margin-bottom: 0 !important;
}

.layout--threecol-section--25-50-25 > .layout__region {
  padding: 0 !important;
  min-width: 0;
}

/* Two-column 25-75 row */
.layout--twocol-section--25-75 {
  display: grid !important;
  grid-template-columns: 300px 1fr !important;
  gap: 1.5rem !important;
  align-items: start;
  margin-top: 0 !important;
}

.layout--twocol-section--25-75 > .layout__region {
  padding: 0 !important;
  min-width: 0;
}

/* Two-column 33-67 row — used on course pages: hero image left, body+meta right */
.layout--twocol-section--33-67 {
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  gap: 1.5rem !important;
  align-items: start;
}

.layout--twocol-section--33-67 > .layout__region {
  padding: 0 !important;
  min-width: 0;
}

.layout--twocol-section--33-67 > .layout__region--first img {
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  box-shadow: 0 4px 16px rgba(38, 115, 196, 0.10);
}

/* In-Person Course Lookup callout — big watercolor graphic-style box */
.mu-inperson-callout {
  background: linear-gradient(108deg, #e0f0ff 0%, #fff8c0 50%, #ffe0a0 100%);
  border-radius: 0.85rem;
  padding: 3rem 2rem;
  text-align: center;
  margin: 1.5rem 0;
  border: 2px solid var(--moose-yellow, #f6c244);
  box-shadow: 0 4px 16px rgba(38, 115, 196, 0.10);
}

.mu-inperson-callout h2 {
  font-family: "Cooper Black", "Patrick Hand", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--moose-blue, #2673c4);
  margin: 0 0 0.5rem;
  letter-spacing: 1px;
}

.mu-inperson-cs {
  font-family: "Patrick Hand", "Kalam", cursive, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--moose-orange, #f78d3f);
  margin: 0;
  font-style: italic;
}

/* Two-column 67-33 row — used on lodge_role pages: body left, courses
   sidebar right (matches live's role page layout). */
.layout--twocol-section--67-33 {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 1.5rem !important;
  align-items: start;
}

.layout--twocol-section--67-33 > .layout__region {
  padding: 0 !important;
  min-width: 0;
}

/* Required / Suggested Courses sidebar treatment on lodge_role pages —
   yellow watercolor cards like live. */
.layout--twocol-section--67-33 .field--name-field-required-courses,
.layout--twocol-section--67-33 .field--name-field-suggested-courses {
  background: linear-gradient(108deg, #fffbe5 60%, rgba(246, 194, 68, 0.20));
  border: 2px solid var(--moose-yellow, #f6c244);
  border-radius: 0.85rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.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: "Cooper Black", "Patrick Hand", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--moose-blue, #2673c4);
  margin: 0 0 0.5rem;
}

/* Trim huge spacer — the divider section between top and roles. Some
   onecol sections only contain a divider block; collapse those. */
main .layout--onecol {
  padding: 0 !important;
  margin: 0 !important;
}

main .layout--onecol > .layout__region--content:empty,
main .layout--onecol > .layout__region--content > .block-inline-blockmooseu-divider {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Tighten outer LB section spacing across the page */
main .layout {
  margin-block: 0 !important;
}

main .layout--threecol-section {
  padding-block: 0.5rem !important;
}

main .layout--twocol-section {
  padding-block: 0.5rem !important;
}

/* ========================================================================
   5. Whiteboard headers (mooseu_header inline blocks)
   ======================================================================== */

.block-inline-blockmooseu-header,
.mu-whiteboard {
  background: #fff !important;
  border: 2px solid #e3eaf5 !important;
  border-radius: 0.6rem !important;
  padding: 1rem 1.25rem !important;
  margin: 0 0 0.75rem 0 !important;
  box-shadow: 0 1px 4px rgba(38, 115, 196, 0.06) !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.block-inline-blockmooseu-header .field--name-field-icon,
.mu-whiteboard .field--name-field-icon {
  font-size: 1.4rem !important;
  flex: 0 0 auto;
}

.block-inline-blockmooseu-header .field--name-field-heading,
.mu-whiteboard .field--name-field-heading {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--moose-blue, #2673c4) !important;
  margin: 0 !important;
  flex: 1;
}

.block-inline-blockmooseu-header .field--name-field-subheading,
.mu-whiteboard .field--name-field-subheading {
  display: block !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #6b7c93 !important;
  margin-top: 0.15rem;
}

.block-inline-blockmooseu-divider,
.mu-divider {
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #d8e3f0, transparent) !important;
  margin: 1.5rem 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ========================================================================
   6. Recent News card list (left column)
   ======================================================================== */

.layout--threecol-section--25-50-25 > .layout__region--first .views-row,
.block-views-blocknews-recent-block-1 .views-row {
  background: #fff;
  border: 1px solid #e3eaf5;
  border-radius: 0.45rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.4rem;
  transition: box-shadow 0.15s, transform 0.15s;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row:hover,
.block-views-blocknews-recent-block-1 .views-row:hover {
  box-shadow: 0 4px 14px rgba(38, 115, 196, 0.10);
  transform: translateY(-1px);
}

/* Each row's article: thumbnail-left, title+meta-right */
.layout--threecol-section--25-50-25 > .layout__region--first .views-row > article,
.layout--threecol-section--25-50-25 > .layout__region--first .views-row .node {
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 0.6rem;
  align-items: center;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row .node__content {
  grid-row: 1;
  grid-column: 1;
  order: 0;
  padding: 0 !important;
  margin: 0 !important;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row .node__header {
  grid-row: 1;
  grid-column: 2;
  order: 1;
  padding: 0 !important;
  margin: 0 !important;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row .node__content img {
  width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
  border-radius: 0.4rem;
  background: #fffbe5;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row .field--name-field-published-date {
  font-size: 0.75rem;
  color: #8da4c0;
  margin-top: 0.15rem;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row ul.links {
  display: none !important;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row a,
.block-views-blocknews-recent-block-1 .views-row a {
  color: var(--moose-blue, #2673c4) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: 0.95rem;
  line-height: 1.35;
  display: block;
}

.layout--threecol-section--25-50-25 > .layout__region--first .views-row a:hover,
.block-views-blocknews-recent-block-1 .views-row a:hover {
  color: #1d5aa3 !important;
  text-decoration: underline !important;
}

/* "Past Articles →" call-out at the end of the news column */
.layout--threecol-section--25-50-25 > .layout__region--first .more-link {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
}

.layout--threecol-section--25-50-25 > .layout__region--first .more-link a {
  display: inline-block;
  background: var(--moose-blue, #2673c4);
  color: #fff !important;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none !important;
}

/* ========================================================================
   7. Latest Courses card list (right column)
   ======================================================================== */

.layout--threecol-section--25-50-25 > .layout__region--third .views-row {
  background: #fff;
  border: 1px solid #e3eaf5;
  border-radius: 0.45rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.4rem;
  transition: box-shadow 0.15s;
}

.layout--threecol-section--25-50-25 > .layout__region--third .views-row:hover {
  box-shadow: 0 4px 14px rgba(38, 115, 196, 0.10);
}

.layout--threecol-section--25-50-25 > .layout__region--third .views-row > article,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row .node {
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 0.6rem;
  align-items: center;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.layout--threecol-section--25-50-25 > .layout__region--third .views-row .node__content {
  grid-row: 1;
  grid-column: 1;
  padding: 0 !important;
  margin: 0 !important;
}

.layout--threecol-section--25-50-25 > .layout__region--third .views-row .node__header {
  grid-row: 1;
  grid-column: 2;
  padding: 0 !important;
  margin: 0 !important;
}

.layout--threecol-section--25-50-25 > .layout__region--third .views-row .node__content img {
  width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
  border-radius: 0.4rem;
  background: #fffbe5;
}

/* Hide course meta fields on the homepage card — keeps the row compact
   and lets the title breathe instead of the duration/delivery wrapping
   one word per line. */
.layout--threecol-section--25-50-25 > .layout__region--third .views-row .field--name-field-duration,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row .field--name-field-delivery-mode,
.layout--threecol-section--25-50-25 > .layout__region--third .views-row .field--name-field-short-description {
  display: none !important;
}

.layout--threecol-section--25-50-25 > .layout__region--third .views-row ul.links {
  display: none !important;
}

.layout--threecol-section--25-50-25 > .layout__region--third .views-row a {
  color: var(--moose-blue, #2673c4) !important;
  font-weight: 700 !important;
  font-size: 0.92rem;
  text-decoration: none !important;
  line-height: 1.35;
  display: block;
}

/* ========================================================================
   8. Welcome card — middle column of three-col, yellow watercolor
   ======================================================================== */

.layout--threecol-section--25-50-25 > .layout__region--second .block-inline-blockbasic {
  background: linear-gradient(108deg, #fffbe5 60%, rgba(246, 194, 68, 0.20)) !important;
  border: 2px solid var(--moose-yellow, #f6c244) !important;
  border-radius: 0.85rem !important;
  padding: 1.5rem 1.75rem !important;
  margin: 0 !important;
  box-shadow: 0 4px 20px rgba(246, 194, 68, 0.18) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #2c3e50 !important;
}

.layout--threecol-section--25-50-25 > .layout__region--second .block-inline-blockbasic p {
  margin: 0 0 1em 0 !important;
}

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

/* ========================================================================
   9. Role section (twocol 25-75 — intro left, image grid right)
   ======================================================================== */

.layout--twocol-section--25-75 {
  background: #fffbe5 !important;
  border-radius: 0.85rem !important;
  padding: 1.5rem !important;
  margin: 1.5rem 0 !important;
  border: 1.5px solid rgba(246, 194, 68, 0.35);
}

/* Intro card on the left */
.layout--twocol-section--25-75 > .layout__region--first .block-inline-blockbasic {
  background: #fff !important;
  border: 2px solid var(--moose-yellow, #f6c244) !important;
  border-radius: 0.6rem !important;
  padding: 1.1rem 1.25rem !important;
  font-size: 0.93rem;
  line-height: 1.55;
  color: #2c3e50;
  margin-top: 0.5rem !important;
}

/* The lodge_roles view block — image-only fields-row in responsive grid.
   The view emits .views-view-responsive-grid__item nodes; each one
   contains a single linked image. The PNGs already carry a baked-in
   blue title bar, so no extra title styling needed. */

.layout--twocol-section--25-75 > .layout__region--second .views-view-responsive-grid {
  --views-responsive-grid--column-count: 5 !important;
  --views-responsive-grid--cell-min-width: 200px !important;
  --views-responsive-grid--layout-gap: 10px !important;
}

.layout--twocol-section--25-75 > .layout__region--second .views-view-responsive-grid__item {
  background: #fff;
  border: 1px solid rgba(38, 115, 196, 0.10);
  border-radius: 0.6rem;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

.layout--twocol-section--25-75 > .layout__region--second .views-view-responsive-grid__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(38, 115, 196, 0.20);
  border-color: var(--moose-blue, #2673c4);
}

.layout--twocol-section--25-75 > .layout__region--second .views-view-responsive-grid__item-inner {
  padding: 0;
  margin: 0;
}

.layout--twocol-section--25-75 > .layout__region--second .views-field-field-role-icon,
.layout--twocol-section--25-75 > .layout__region--second .views-field-field-role-icon img,
.layout--twocol-section--25-75 > .layout__region--second .field-content img {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  background: #fff;
}

.layout--twocol-section--25-75 > .layout__region--second a {
  display: block;
  text-decoration: none !important;
}

/* ========================================================================
   10. Footer — match live: thin light blue/gray strip, copyright only
   ======================================================================== */

footer, [role="contentinfo"], .footer-menu-container, #footer {
  background: #f5f9ff !important;
  color: #6b7c93 !important;
  margin-top: 1.5rem !important;
  padding: 0.5rem 1.5rem !important;
  border-top: 1px solid #e3eaf5;
  font-size: 0.85rem;
  text-align: center;
}

footer a, [role="contentinfo"] a {
  color: var(--moose-blue, #2673c4) !important;
  text-decoration: none;
}

footer a:hover, [role="contentinfo"] a:hover {
  text-decoration: underline;
}

/* Hide social icon clusters Solo may render in footer regions */
footer .block-social-share,
footer .social-icons,
footer .block-share-by-link,
footer ul.social {
  display: none !important;
}

/* ========================================================================
   11. Responsive
   ======================================================================== */

@media (max-width: 960px) {
  .layout--threecol-section--25-50-25 {
    grid-template-columns: 1fr !important;
  }
  .layout--twocol-section--25-75 {
    grid-template-columns: 1fr !important;
  }
  .layout--twocol-section--25-75 > .layout__region--second .views-view-grid > div,
  .layout--twocol-section--25-75 > .layout__region--second .view-content {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  main, [role="main"] {
    padding: 1rem !important;
  }
}

@media (max-width: 600px) {
  .layout--twocol-section--25-75 > .layout__region--second .views-view-grid > div,
  .layout--twocol-section--25-75 > .layout__region--second .view-content {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .menu--main, .block-system-menu-block-main ul, .menu.nav__menu {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}