/* =========================================================================
   SOMM ALLIANCE — GENERAL SITEWIDE DESIGN SYSTEM
   Drop this file in once and link it on EVERY page template (after the
   theme's own stylesheet) to apply the new look consistently site-wide.
   Colors are hardcoded on purpose and flagged !important so they win over
   the legacy theme CSS without needing to touch page markup.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ---------- 1. Base / Reset ---------- */
body {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #0b1b1e !important;
  background: #fbfdfd !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  color: #002529 !important;
  margin: 0 0 0.4em 0 !important;
  line-height: 1.18 !important;
}
a { color: #002529 !important; text-decoration: none !important; }
img { max-width: 100%; }
.wrapped { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* clearfix for float layouts (no CSS grid, no display:table) */
.wrapped:after,
.item-list ul:after,
.indicator--values:after,
footer .wrapped:after { content: ""; display: block; clear: both; }

/* ---------- 2. Header ---------- */
header#header {
  background: rgba(251,253,253,0.92) !important;
  border-bottom: 1px solid #e4edee !important;
  position: sticky; top: 0; z-index: 50;
}
.header-wrapper {
  padding: 16px 24px !important;
}
.header-wrapper:after { content:""; display:block; clear:both; }
.site-branding { float: left; }
.site-branding h1 a {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #002529 !important;
}
#header-navigation-wrapper { float: right; }
#header-navigation-wrapper:after { content:""; display:block; clear:both; }
.block-mainnavigation ul {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.block-mainnavigation ul li {
  float: left !important; margin-left: 28px !important;
}
.block-mainnavigation ul li a {
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: #2f4247 !important;
}
.block-mainnavigation ul li a:hover { color: #0e9cad !important; }
.header-utilities a {
  display: inline-block;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  border: 1px solid #e4edee !important;
  color: #002529 !important;
}
.header-utilities a:hover { background: #c7f5f9 !important; }

/* ---------- 3. Hero / page header banner (used on inner pages too) ---------- */
.page-header--wrapper {
  position: relative !important;
  background-color: #002529 !important;
  background-size: cover !important;
  background-position: center !important;
}
.page-header--wrapper:before {
  content: '';
  position: absolute; left:0; top:0; right:0; bottom:0;
  background: rgba(0,37,41,0.82) !important;
}
.header--content { position: relative; padding: 90px 24px 70px !important; z-index: 1; }
.header--content .content { max-width: 680px; }
.header--content h1, .header--content h2 {
  color: #fff !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
}
.header--content p { color: rgba(255,255,255,0.85) !important; font-size: 1.05rem !important; margin: 18px 0 0 !important; }
.header--content a {
  display: inline-block; margin-top: 24px;
  background: #9aedf7 !important; color: #002529 !important;
  font-weight: 700 !important; padding: 13px 28px !important; border-radius: 999px !important;
}

/* breadcrumb that appears on inner pages */
#breadcrumb, .breadcrumb {
  background: #fff !important;
  padding: 14px 24px !important;
  border-bottom: 1px solid #e4edee !important;
  font-size: 0.85rem !important;
}
#breadcrumb a, .breadcrumb a { color: #0e9cad !important; font-weight: 600 !important; }

/* ---------- 4. Indicators block ---------- */
.indicators--wrapper { background: #002529 !important; color: #fff !important; }
.indicator--description h3 { color: #fff !important; }
.indicator--description-body p { color: rgba(255,255,255,0.75) !important; }
.indicator--description-body a.action { color: #9aedf7 !important; font-weight: 700 !important; }
.indicator--values { margin-top: 32px; }
.paragraph--type--indicator {
  float: left !important;
  width: 23% !important;
  margin: 0 2% 20px 0 !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 18px !important;
  padding: 24px 20px !important;
  box-sizing: border-box;
}
.indicator--number strong { font-family: 'Space Grotesk', sans-serif !important; font-size: 2.1rem !important; color: #9aedf7 !important; }
.indicator--number label { display:block; font-size: 0.82rem !important; color: rgba(255,255,255,0.75) !important; }
.indicator--description-text { color: rgba(255,255,255,0.6) !important; font-size: 0.82rem !important; }

/* ---------- 5. Generic section titles ---------- */
.block--institutions-list > h2,
.block--somm-disciplines > h2,
.block--articles-from-the-center > h2,
#content-bottom h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  margin-bottom: 28px !important;
}

/* ---------- 6. Institutions / logos grid ---------- */
.more-link { text-align: right; margin-bottom: 14px; }
.more-link a { font-weight: 700 !important; color: #0e9cad !important; }
.institution--list .item-list ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.institution--list .item-list ul li {
  float: left !important;
  width: 17.33% !important;
  margin: 0 1% 16px 0 !important;
  box-sizing: border-box;
  background: #fff !important;
  border: 1px solid #e4edee !important;
  border-radius: 14px !important;
  padding: 16px !important;
  text-align: center;
}
.institution--list .item-list ul li:hover { border-color: #9aedf7 !important; }

/* ---------- 7. Research disciplines ---------- */
.block--somm-disciplines { background: #c7f5f9 !important; padding: 60px 0 !important; }
.somm-disciplines header p { max-width: 720px; color: #2f4247 !important; margin-bottom: 30px !important; }
.somm-disciplines .item-list ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.research-row {
  float: left !important;
  width: 23% !important;
  margin: 0 2% 20px 0 !important;
  box-sizing: border-box;
  background: #fff !important;
  border: 1px solid #e4edee !important;
  border-left: 5px solid #0e9cad !important;
  border-radius: 14px !important;
  padding: 22px 18px !important;
}
.research-row h3 { font-size: 1.05rem !important; }
.research-row p { font-size: 0.85rem !important; color: #2f4247 !important; }
.research-row a { font-weight: 700 !important; font-size: 0.85rem !important; color: #0e9cad !important; }

/* color-code by discipline (keeps original research--tid-N classes) */
.research--tid-1 { border-left-color: #0e9cad !important; }
.research--tid-2 { border-left-color: #002529 !important; }
.research--tid-3 { border-left-color: #9aedf7 !important; }
.research--tid-4 { border-left-color: #4a5667 !important; }
.research-label-link {
  background: rgba(0,37,41,0.85) !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  margin-right: 4px !important;
}

/* ---------- 8. Article teaser cards (used on homepage, listing & article pages) ---------- */
.related--articles .item-list ul,
.promoted--articles .item-list ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.related--articles .item-list ul > li,
.promoted--articles .item-list ul > li {
  float: left !important;
  width: 31.33% !important;
  margin: 0 2% 24px 0 !important;
  box-sizing: border-box;
}
.article--teaser {
  background: #fff !important;
  border: 1px solid #e4edee !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
.article--image { position: relative; overflow: hidden; }
.article--image img { width: 100%; display: block; }
.article--content { padding: 18px 20px 22px !important; }
.article--content time { font-size: 0.75rem !important; font-weight: 700 !important; color: #0e9cad !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
.article--content h3 { font-size: 1.02rem !important; margin: 6px 0 4px !important; }
.article--content h3 a { color: #002529 !important; }
.article--content p { font-size: 0.86rem !important; color: #2f4247 !important; }
.article--content > a { font-weight: 700 !important; font-size: 0.84rem !important; color: #0e9cad !important; }

/* single/full article body (article detail pages) */
.article--body, .article .field--name-body, article .content p {
  font-size: 1.02rem !important; color: #27383c !important; line-height: 1.75 !important;
}

/* ---------- 9. News feed band ---------- */
#content-bottom { background: #002529 !important; color: #fff !important; padding: 60px 0 0 !important; }
#content-bottom .news--centers .item-list ul { list-style: none !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid rgba(255,255,255,0.15) !important; }
.news-list { padding: 18px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.15) !important; }
.news-list:after { content:""; display:block; clear:both; }
.news-list a { color: rgba(255,255,255,0.85) !important; font-weight: 600 !important; }
.news-list h3 a { color: #9aedf7 !important; font-size: 0.95rem !important; }
.news-list .date { color: rgba(255,255,255,0.5) !important; font-size: 0.8rem !important; }
#content-bottom .more-link { padding: 24px 0 50px !important; text-align: center !important; }
#content-bottom .more-link a {
  display: inline-block; background: #9aedf7 !important; color: #002529 !important;
  font-weight: 700 !important; padding: 12px 26px !important; border-radius: 999px !important;
}

/* transfer promo band */
.transfer-home-block { background: #9aedf7 !important; color: #002529 !important; }
.transfer-home-block a {
  display: inline-block;
  font-weight: 700 !important; background: #002529 !important; color: #fff !important;
  padding: 11px 24px !important; border-radius: 999px !important;
}

/* ---------- 10. Pager (articles listing pagination) ---------- */
.pager { text-align: center !important; margin: 30px 0 !important; }
.pager__items { list-style: none !important; margin: 0 !important; padding: 0 !important; display: inline-block; }
.pager__item { float: left !important; margin: 0 4px !important; }
.pager__item a, .pager__item.is-active {
  display: inline-block; min-width: 34px; text-align: center;
  padding: 7px 10px !important; border-radius: 999px !important;
  border: 1px solid #e4edee !important; color: #002529 !important; font-weight: 600 !important;
}
.pager__item.is-active a, .pager__item.is-active { background: #002529 !important; color: #fff !important; border-color:#002529 !important; }
.pager__item a:hover { background: #c7f5f9 !important; }

/* ---------- 11. Footer ---------- */
footer[role="contentinfo"] { background: #071a1c !important; color: rgba(255,255,255,0.75) !important; padding: 60px 0 24px !important; }
.footer-branding { float: left; width: 20%; }
.footer-branding img { filter: brightness(0) invert(1); max-width: 140px; }
.footer-menu { float: left; width: 55%; }
.footer-menu nav > ul { list-style: none !important; margin:0 !important; padding:0 !important; }
.footer-menu nav > ul > li { float: left !important; margin: 0 30px 20px 0 !important; }
.footer-menu nav > ul > li > a { color: #fff !important; font-weight: 700 !important; font-size: 0.95rem !important; }
.footer-menu nav > ul > li > ul { list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important; }
.footer-menu nav > ul > li > ul li { margin-bottom: 8px !important; }
.footer-menu nav > ul > li > ul a { color: rgba(255,255,255,0.65) !important; font-size: 0.85rem !important; }
.footer-menu nav > ul > li > ul a:hover { color: #9aedf7 !important; }
.footer-contact { float: left; width: 25%; }
.footer-contact p { margin: 4px 0 !important; font-size: 0.85rem !important; }
.footer-contact strong { color: #fff !important; }

#copyright {
  background: #040f10 !important; color: rgba(255,255,255,0.5) !important;
  font-size: 0.8rem !important; padding: 16px 24px !important;
}
#copyright:after { content:""; display:block; clear:both; }
#copyright p { float: left; margin: 0; }
#copyright nav { float: right; }
#copyright nav ul { list-style: none !important; margin:0 !important; padding:0 !important; }
#copyright nav ul li { float: left !important; margin-left: 16px !important; }
#copyright nav ul a { color: rgba(255,255,255,0.5) !important; }
#copyright nav ul a:hover { color: #9aedf7 !important; }

/* ---------- 12. Responsive ---------- */
@media (max-width: 900px) {
  .paragraph--type--indicator { width: 48% !important; }
  .research-row { width: 48% !important; }
  .related--articles .item-list ul > li,
  .promoted--articles .item-list ul > li { width: 48% !important; }
  .institution--list .item-list ul li { width: 31.3% !important; }
  .footer-branding, .footer-menu, .footer-contact { width: 100% !important; float: none !important; margin-bottom: 24px; }
  .block-mainnavigation { display: none !important; }
  .hamburger-wrapper { display: block !important; }
}
@media (max-width: 600px) {
  .paragraph--type--indicator { width: 100% !important; }
  .research-row { width: 100% !important; }
  .related--articles .item-list ul > li,
  .promoted--articles .item-list ul > li { width: 100% !important; }
  .institution--list .item-list ul li { width: 48% !important; }
}