/* === Color variables === */
:root {
  
  --wg-dark-yellow: #E3C134;    /* dark yellow accent */
  --wg-light-gray: #DDDCD6;
  --wg-gray: #a9a8a5;    /*dark gray */
  --wg-yellow: #EFCC3C;
}
.region-header .brand a{
color:white
}

/* === Overall page background === */
/* Light gray around the central white content box */
body {
  background-color: var(--wg-light-gray);
}

/* Main page container white (inside the grey background) */
#page,
.page,
.main-container {
 background-color: var(--wg-light-gray);
}

.main-container-wrap {
  background:  var(--wg-yellow);
}
.menu-base-theme {
    background: var(--wg-gray);
  }

 .menu-base-theme > li {
    border-left: none;
  }

.btn, .node-readmore a, .flexslider .more-link, input[type="submit"],
.flexslider .flex-control-paging li a.flex-active
{
  background-color: var(--wg-gray);
  border-color: var(--wg-gray);
  color: var(--wg-yellow);
}

/* hover / focus state */
.btn:hover,
.btn:focus,
.node-readmore a:hover,
.node-readmore a:focus,
.flexslider .more-link:hover,
.flexslider .more-link:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: var(--wg-light-gray);
  border-color: var(--wg-light-gray);
  color: var(--wg-yellow);
}

a {
  color: var(--wg-dark-yellow);
  font-weight: bold;
}
a:hover,
.menu-base-theme li a
{
  color: var(--wg-yellow);
}

.brand.logo {
  padding-bottom: 40px;
}

.brand.site-name , .social-media {
  padding-bottom: 20px;
}

.region-features-first img,
.region-features-second img,
.region-features-third img {
  width: 100%;
  height: 200px;      /* pick a height you like */
  object-fit: cover;  /* crops without distortion */
  display: block;
}

.messages-list__item.messages.messages--error{display:none;}


/* Institutions & Members: 3-card grid */
.inst-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Each institution card */
.inst-card {
  flex: 1 1 260px;
  max-width: 320px;
  background-color: #ffffff;
  border: 1px solid #BEBEBE;   /* light grey */
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  box-sizing: border-box;
}

/* Institution name */
.inst-card h3 {
  margin-top: 10px;
  margin-bottom: 8px;
  color: #808080;              /* darker grey */
}

/* Logo area */
.inst-logo {
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

/* Logos themselves: no stretching */
.inst-logo img {
  max-width: 140px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
  .inst-grid {
    flex-direction: column;
  }
  .inst-card {
    max-width: 100%;
  }
}

.social-media a:hover {
  background: var(--wg-gray);
}
.region.region-breadcrumb {
  font-size: 22px;
}

/* Webform required star in red */


/* Make sure the star is visible next to the label */
.js-form-item--required > label::before,
.webform-required::before,
.form-required::before{
  content: "* ";
  color: #d00;
  font-weight: bold;
}
div.webform-required {
  display: none;
}
/**********************************************************/

/* ========= FRONT PAGE LINES & CARDS ========= */
/* Use your palette if variables exist, otherwise fall back to hex */


/* Slightly more breathing room */
.path-frontpage .content-container {
  margin-top: 20px;
}

/* === Organization block (top text) === */
.path-frontpage .node--type-page .field--name-body {
  background: #ffffff;
  border: 1px solid var(--wg-light-gray);
  border-left: 4px solid var(--wg-yellow);
  padding: 24px 28px;
  margin-bottom: 32px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.path-frontpage .node--type-page .field--name-body h2 {
  margin-top: 0;
  margin-bottom: 10px;
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--wg-yellow);
}

/* === Objectives title === */
.path-frontpage .features .custom-block-title {
  text-align: center;
  margin-bottom: 10px;
}

.path-frontpage .features .custom-block-title .title {
  display: inline-block;
  padding: 6px 18px;
  border-bottom: 3px solid var(--wg-yellow);
  font-size: 1.5rem;
}

/* === Objectives 3-column row with lines === */
.path-frontpage .features .row {
 /* border-top: 1px solid var(--wg-light-gray);
 border-bottom: 1px solid var(--wg-light-gray);*/
  padding: 18px 0;
  margin: 0;
}

.path-frontpage .features .col-sm {
  padding: 0 10px;
}

/* Inner cards */
.path-frontpage .features .region-features-first .block,
.path-frontpage .features .region-features-second .block,
.path-frontpage .features .region-features-third .block {
  background: #ffffff;
  padding: 14px 18px 8px;
  height: 100%;
  
  border-top: 1px solid var(--wg-light-gray);
  border-bottom: 1px solid var(--wg-light-gray);
  /*padding: 18px 24px;*/
  text-align: center;
}

/* Headings inside objectives */
.path-frontpage .features h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.2em;
  color: var(--wg-gray);
    text-align: center;
}

/* Nicer bullets */
.path-frontpage .features ul {
  padding-left: 20px;
  margin-bottom: 0;
}

/* === Collaboration & Networking band === */
.path-frontpage .services {
  margin-top: 28px;
}

.path-frontpage .services .region-services-forth .block {
  background: #ffffff;
  border-top: 1px solid var(--wg-light-gray);
  border-bottom: 1px solid var(--wg-light-gray);
  padding: 18px 24px;
  text-align: center;
}
/* Keep the bullets but center the whole block */

.path-frontpage .services .region-services-forth ul {
  display: inline-block;
  text-align: left;
  margin-bottom: 0;
  padding-left: 18px;
}

/* === Left Sidebar === */
/* === Full-width white frame around logo === */
.left-wrapper .site-branding__logo {
  display: block;
  background: #ffffff;
  padding: 27px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;   /* space before the site title */
}

/* Center the logo inside the white box */
.left-wrapper .site-branding__logo img {
  display: block;
  margin: 0 auto;
  max-width: 100%;   /* scale properly */
  height: auto;
}
.row {
    margin: 0 auto !important;
}
.site-branding__name {
    display: block;
    margin-bottom: 40px;
}
/* Institutions grid: 3 boxes in one row */
.inst-grid{
  display: flex;
  gap: 24px;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.inst-card{
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 18px;
  background: #fff;
  text-align: center;
}

/* Keep logos nicely sized and not deformed */
.inst-logo img{
  max-width: 100%;
  height: 90px;        /* same height for all logos */
  object-fit: contain; /* no deformation */
  display: block;
  margin: 0 auto 12px auto;
}

.inst-card h3{
  margin: 0;
  text-align: center;
}

/* Responsive: stack on small screens */
@media (max-width: 768px){
  .inst-grid{
    flex-wrap: wrap;
  }
  .inst-card{
    flex: 1 1 100%;
  }
}