:root > * {
  --md-primary-fg-color:        #045C64;
  --md-accent-fg-color:         #eb8339ff;
  --md-typeset-a-color:         #047eaaff;
  --md-admonition-icon--overview: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"/><path d="M12 3.5c3.432 0 6.124 1.534 8.054 3.241 1.926 1.703 3.132 3.61 3.616 4.46a1.6 1.6 0 0 1 0 1.598c-.484.85-1.69 2.757-3.616 4.461-1.929 1.706-4.622 3.24-8.054 3.24-3.432 0-6.124-1.534-8.054-3.24C2.02 15.558.814 13.65.33 12.8a1.6 1.6 0 0 1 0-1.598c.484-.85 1.69-2.757 3.616-4.462C5.875 5.034 8.568 3.5 12 3.5ZM1.633 11.945a.115.115 0 0 0-.017.055c.001.02.006.039.017.056.441.774 1.551 2.527 3.307 4.08C6.691 17.685 9.045 19 12 19c2.955 0 5.31-1.315 7.06-2.864 1.756-1.553 2.866-3.306 3.307-4.08a.111.111 0 0 0 .017-.056.111.111 0 0 0-.017-.056c-.441-.773-1.551-2.527-3.307-4.08C17.309 6.315 14.955 5 12 5 9.045 5 6.69 6.314 4.94 7.865c-1.756 1.552-2.866 3.306-3.307 4.08Z"/></svg>')
}

.md-banner {
  background-color: chocolate;
}

/* These are social card options for authors and contributors sections */
.nt-card {
    text-align: center;
}

.authors .nt-card-text {
    font-size:20px;
}

.contributors .nt-card .nt-card-image img {
    height: 60px;
}

.contributors .nt-card .nt-card-image {
    min-height: 60px;
}

/* This makes the normal admonition blocks have the same font size as normal text */
.md-typeset .admonition,
.md-typeset details {
  font-size: 18px;
}

.md-header__button.md-logo img, .md-header__button.md-logo svg {
  fill: currentcolor;
  display: block;
  height: 60px;
  width: auto;
}

/* These are options to create a new admonition class for the overview section in About */
.md-typeset .admonition.overview,
.md-typeset details.overview {
  border-color: rgb(77, 77, 77);
}
.md-typeset .overview > .admonition-title,
.md-typeset .overview > summary {
  background-color: rgba(77, 77, 77, 0.1);
}
.md-typeset .overview > .admonition-title::before,
.md-typeset .overview > summary::before {
  background-color: rgb(77, 77, 77);
  -webkit-mask-image: var(--md-admonition-icon--overview);
          mask-image: var(--md-admonition-icon--overview);
}

.md-typeset .overview {
  /* line-height: 1; */
  font-size: 14px;
}

/* Hide the site name text but keep space */
.md-header__title {
  visibility: hidden;   /* hide text but element still occupies space */
  width: 250px;         /* desired empty space */
  flex-shrink: 0;       /* prevent shrinking */
}

.md-typeset .admonition.note {
    background-color: #f2f2f2; /* soft background */
    border: 1px solid #ffffff !important;/* white border */
    border-left: 4px solid #045C64 !important; /* accent strip on left */
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Remove the blue header bar and padding from the hidden title */
.md-typeset .admonition.note > .admonition-title {
    display: none;
}

/* Style headings and lists inside the box */
.md-typeset .admonition.note h3,
.md-typeset .admonition.note h4 {
    margin-top: 0.5em;
    margin-bottom: 0.3em;
    font-weight: 600;
}

.md-typeset .admonition.note ul {
    margin-top: 0;
    margin-bottom: 0.5em;
}

/* Container to hold all GRP cards side by side */
.grp-cards-container {
  display: flex;
  flex-wrap: wrap;         /* wrap to next line if screen is narrow */
  gap: 15px;               /* spacing between cards */
  margin-bottom: 20px;
  justify-content: flex-start; /* align cards to left */
}

/* Individual GRP competency cards */
.grp-card {
  border-left: 5px solid #491F53;   /* accent stripe */
  background-color: #f2f2f2;        /* slightly darker grey background */
  border: 1px solid #ffffff !important;/* white border */
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  font-size: 16px;
  line-height: 1.5;

  /* NEW: control card width for rectangular layout */
  flex: 1 1 250px;   /* grow, shrink, basis width */
  max-width: 300px;  /* optional max width */
  min-width: 240px;  /* optional min width */
}

/* Card titles */
.grp-card h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
  color: #045C64;
}

/* Card text */
.grp-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Vertical action steps (card-style list) */
.action-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0;
}

/* Each card */
.action-step {
  display: flex;
  gap: 15px;
  background: #f7f7f7;
  border-left: 5px solid #045C64; /* your primary color */
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  align-items: flex-start;
}

/* Step number circle */
.step-icon {
  min-width: 35px;
  height: 35px;
  background: #045C64;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
}

/* Step content */
.step-content h4 {
  margin: 0 0 5px;
  color: #045C64;
  font-size: 18px;
}

.step-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}