/* Root scope: all styles are scoped to the microsite only */
#microsite {
  font-family: 'Public Sans', sans-serif;
  font-size: 14pt;
  color: #000;
  line-height: 1.6;
  background-color: #fff;
  padding: 1rem;
}

.hero--left {
  height: 700px;
}
.hero__background {
  height: 100%;
}
/* Headings */
#microsite h1 {
  font-family: 'Poppins', sans-serif;
  color: #104f63;
  font-size: 3rem;
  margin-bottom: 1rem;
}
#microsite .white-header {
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  font-size: 3rem;
  margin-bottom: 1rem;
  
}
#microsite .white-non-h1 {
  font-family: 'Poppins', sans-serif;
  color: #104f63;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
#microsite .white-background-transparency {
    background-color: #ffffff;
    padding: 5px;
    border-radius: 10px;
}
#microsite h2,
#microsite h3 {
  font-family: 'Poppins', sans-serif;
  color: #2aa486;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}


#microsite p {
    font-family: 'Public Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.5555555556em;
  /*margin-bottom: 1.3333333333em;*/
}
#microsite p .resource-title {
  font-size: 1.4rem;
}
#microsite .small {
    font-family: 'Public Sans', sans-serif;
  font-size: 10pt;
  /*margin-bottom: 1.3333333333em;*/
}
#microsite ul li, #microsite ol li {
      font-family: 'Public Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.5555555556em;
}
ul.no-bullets {
  list-style-type: none;   /* hides the bullets */
  padding-left: 1.5rem;    /* maintains indentation */
  margin: 0;               /* optional: reset margin if needed */
}
#microsite label:hover, #microsite input[type='checkbox'], #microsite input[type='submit'], #microsite button {
  cursor: pointer;
}

#microsite img {
  padding: 1rem;
}
#microsite .breadcrumb__item__current {
   font-family: 'Public Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.5555555556em;
}

/* Links */
#microsite a, #microsite select {
  color: #104f63;
  text-decoration: underline;
  font-size: 1.3rem;
  line-height: 1.5555555556em;
  /*margin-bottom: 1.3333333333em;*/
}
#microsite select.sort {
  width: auto;
}
#microsite .select--grey.multi a.open-options {
  padding-right: 1.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#microsite a.nav__logo {
  float: right;
}
#microsite a.s4a_nav__logo {
  float: left;
  width: 10rem;
  height: 4.5rem;
  margin: 0;
  background: url(../screening-for-all/img/S4A-Graphic-New.png) center / 100% no-repeat;
}
#microsite .nav__toggle {
  margin-left: 12px;
}
#microsite .footer a {
  color: #fff;
}
#microsite .tab-group--secondary-nav {
    background-color: #fff;
}
#microsite .no-underline {
  text-decoration: none;
}
#microsite .white-link {
  color: #e49036;
  text-decoration: underline;
}

#microsite a:focus,
#microsite a:hover {
  outline: 3px solid #ffffff;
}
#microsite .tab-group--secondary-nav a {
  line-height: normal;
  margin-bottom: 0;
  padding: 0.6666666667em 0.8888888889em;
}

/* Buttons */
#microsite .button, #microsite input[type="submit"].search {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  padding: 0.75rem 1.25rem;
  background-color: #104f63;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  text-align: center;
  text-transform: none;
  text-decoration: none;
}
#microsite .button:hover,
#microsite .button:focus {
  background-color: #2aa486;
  outline: 3px solid #e49036;
}
/* Button with icon (uses flex to align icon + text) */
/* Button with icon: left-align everything with right padding */
#microsite .button--pic {
  display: inline-flex !important;     /* force inline flex */
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  padding: 0.75rem 1.25rem;
  background-color: #2aa486;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  text-align: left;
  text-transform: none;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  vertical-align: middle;
}

#microsite .button--pic img {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  vertical-align: middle;
  display: inline !important;        /* ✅ override display: block */
  margin: 0;                         /* remove auto margin from global img */
}
#microsite .button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: left; /* centers buttons when fewer in a row */
}

#microsite .button-group .button {
  width: 100%;                /* ✅ fixed, uniform width */
  text-align: center;
  padding: 1rem;
  background-color: #2aa486;
  color: white;
  border: none;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  text-transform: none;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
}
.resource-icon {
    font-size: 28px;
    margin-bottom: 8px;
}
#microsite .button.button--top-link {
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  white-space: nowrap;
}
.download-button {
  margin-top: 0.5rem;
}

.button--pdf-download {
  background-color: #104f63;
  color: white;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.button--pdf-download:hover {
  background-color: #0d3f50;
}

/* Cards */
/* Base card style */
#microsite .card {
  background-color: #f9f9f9;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  border-left: 5px solid #104f63;
}
#microsite .card-object:hover {
  box-shadow: 1px 1px 24px #E4E4EB;
}
#microsite .card ul {
      font-family: 'Public Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.5555555556em;
}
#microsite .card--one-third {
  max-width: 300px; /* Adjust based on your three-column layout */
   margin-left: 0;        /* Align left */
  margin-right: auto;    /* Prevent right-side stretching */
}
#microsite .card--one-third--larger {
  max-width: 400px; /* Adjust based on your three-column layout */
   margin-left: 0;        /* Align left */
  margin-right: auto;    /* Prevent right-side stretching */
}
#microsite .card .button {
  display: block;         /* ensures full width behavior */
  width: 100%;            /*  fills the card */
  text-align: center;
  padding: 1rem;
  background-color: #2aa486;
  color: white;
  border: none;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  line-height: 1.5;
  text-transform: none;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
  margin-top: 1rem;       /* optional: space from content above */
}
#microsite .card--featured {
  text-align: center;
}

#microsite .card--featured img {
  display: inline-block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
#microsite .card--xl {
  text-align: left;
}
.image-text-block img {
  float: center;
  padding-right: 50px; /* Adjust this value as needed */
  max-width: 150px;    /* Optional: control image size */
}

.image-text-block p,
.image-text-block div {
  overflow: hidden; /* Helps align text nicely */
}
.content__image {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers both image and button */
  gap: 0.5rem;
  margin-bottom: 1rem; /* optional spacing below */
}
.content__image img {
  border: 1px solid #ccc; /* subtle gray border */
  border-radius: 6px;      /* slightly rounded corners */
  max-width: 100%;
  height: auto;
}

/* tables */
.simple-table {
  width: 100%;
  border-collapse: collapse;
     font-family: 'Public Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.5555555556em;
  margin: 1rem 0;
  border: 2px solid #ccc;
}

.simple-table th,
.simple-table td {
  border: 1px solid #ccc;
  padding: 0.75rem;
  text-align: left;
}
.simple-table th {
  font-size: 1.5rem;
}

.simple-table thead {
  background-color: #b5778c;
}

/* Responsive Styles */
@media (max-width: 600px) {
  .responsive-table thead {
    display: none;
  }

  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
    font-size: 1.125rem; /* Match on mobile too */
  }

  .responsive-table tr {
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5rem;
    background-color: #fafafa;
  }

  .responsive-table td {
    text-align: left;
    padding-left: 50%;
    position: relative;
    border: none;
    border-bottom: 1px solid #ddd;
  }

  .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    width: 45%;
    white-space: nowrap;
    font-weight: bold;
    color: #444;
  }
}




/* Modifier: right-side border instead of left */
#microsite .card--right {
  border-left: none !important;
  border-right: 5px solid #104f63 !important;
}#microsite .card h3 {
  margin-top: 0;
}
#microsite .card--right ul {
  text-align: right;
  list-style-position: inside;
  padding-left: 0;
}
#microsite .card--xl__content {
    width: 100%;
    margin-top: 2%;
  }
  #microsite .card--xl__content__right {
text-align: right;
width: 100%;
    margin-top: 2%;
  }
#microsite .card--xl__content {
  display: inline-block;
}
/* Purple card variant */
.card--purple {
  background-color: rgba(181, 119, 140, 0.5); /* ✅ only the background is transparent */
  border-left: 5px solid #b5778c;
  color: #000;
    border-radius: 6px;
}

/* Orange card variant */
#microsite .card--orange {
    display: inline-block; /* Shrink-wrap width */
  background-color: rgba(228, 144, 54, 0.2);
  color: #000;
  padding: 15px; /* tighten bottom padding */
  border-left: 5px solid #e49036;
  border-radius: 0.25rem;  
  width: auto !important;     /* override any forced widths */
  height: auto !important;    /* override any forced heights */
  max-width: 100%;            /* keep it responsive */
  margin: 1rem;
}
#microsite .card--orange p {
  margin-bottom: 0;
}
/* Ensure text inside these cards stays black */
#microsite .card--purple h1,
#microsite .card--purple h2,
#microsite .card--purple h3,
#microsite .card--purple p,
#microsite .card--orange h1,
#microsite .card--orange h2,
#microsite .card--orange h3,
#microsite .card--orange p {
  color: #000;
}
#microsite .icon-grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
  /*display: flex;
  flex-wrap: wrap;*/
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1rem;
}

#microsite .icon-tile {
  /*flex: 1 1 0;
  max-width: 22%;  ⬅️ Ensures 4 across with spacing */
  background-color: #f0f0f0;
  color: #000;
  text-align: center;
  padding: 1.23rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background-color 0.2s ease;
}
#microsite .icon-tile ul {
  list-style-position: inside;
  padding-left: 0;
  text-align: center;
}

#microsite .icon-tile h3 {
  padding-left: 0;
  text-align: center;
  font-size: 1.3rem;
}
#microsite .icon-tile li {
  display: list-item;
}
#microsite .icon-tile img {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
}

#microsite .icon-tile:hover,
#microsite .icon-tile:focus {
  background-color: #e0e0e0;
  outline: 3px solid #e49036;
}
/* Optional: prevent cards from floating side-by-side on small screens */
@media (max-width: 768px) {
  .card-orange,
  .card-purple {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
}


/* Banners */
#microsite .banner {
  position: relative;
  background-color: #4ba5bd;
  color: #fff;
  padding: 2rem 1rem; /* More vertical space */
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;  /* Larger text */
  font-weight: 700;   /* Bold for readability */
  margin-bottom: 1rem;
  line-height: 1.3;
  letter-spacing: 0.5px;
  width: auto;
}
#microsite .blue__background {
  position: relative;
  display: inline-block;
  width: 30%;
  box-sizing: border-box;
  padding: 0.5rem;
  margin-top: 11.5625rem;
  font-size: 5rem;
}
#microsite .banner__title {
  position: absolute;
  top: -20%; /* Decrease this value to move the text higher */
  left: 18%;
  transform: translateX(-50%);
  color: #104f63;
  font-size: 2rem;
  z-index: 2;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .banner__title {
    top: 5%;
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .banner__title {
    top: 3%;
    font-size: 1.5rem;
  }
}
.section--banner {
  background-color: #104f63;
}

.banner--headers {
  color: #e49036;
}


/* Images */
#microsite img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

/* Accessibility helpers */
#microsite [tabindex]:focus,
#microsite button:focus,
#microsite input:focus,
#microsite textarea:focus,
#microsite select:focus {
  outline: 3px solid #e49036;
  outline-offset: 2px;
}

#microsite .image-caption {
  display: inline-block;
  text-align: center;
  margin: 0;
}

#microsite .image-caption img {
  display: block;
  max-width: 100%;
  height: auto;
}

#microsite .image-caption figcaption {
  font-size: 0.875rem;
  color: #555;
  margin-top: 0.5rem;
  line-height: 1.4;
  width: 100%;
}

#microsite .image-caption a {
  font-size: 0.875rem;
  color: #555;
  margin-top: 0.5rem;
  line-height: 1.4;
}

#microsite .image-caption {
  float: right;
  margin-left: 1rem;
  margin-bottom: 1rem;
}
#microsite .image-caption.centered {
  float: right;
  margin: 1rem auto;
  display: table;
}


/* Forms */
/*#microsite form {
  max-width: 600px;
  margin: 2rem 0;
}

#microsite label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

#microsite input,
#microsite textarea,
#microsite select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-size: 1rem;
}*/

#microsite input:focus,
#microsite textarea:focus,
#microsite select:focus {
  border-color: #2aa486;
}

/* Resource library */
.search {
    display: grid;
    grid-template-columns: 1fr 150px auto;
    gap: 8px;
    padding-bottom: 16px;
}
.resultbox .resource-grid {
    display: grid;
    grid-template-columns: 150px auto;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: solid 1px #B6B6BE;
    border-radius: 0;
}
.resultbox .resource-grid.no-border {
    border-bottom: none;
}
#microsite .select--grey.multi:after {
  top: 50%;
}
#microsite .resultbox img {
  box-sizing: border-box;
  padding: 8px 16px 16px 0;
  margin: 0;
}
#microsite .object-control__content__order {
  top: 55px;
}
.resultbox .filters select, .search input {
    width: 100%;
  font-size: 1.3rem;
}
.resultbox .results a {
    position: relative;
    font-size: 125%;
}
.resultbox .results a.button {
    font-size: 75%;
}
.resultbox .results a:hover {
    text-decoration: none;
    color: #0A504C;
}
.resultbox .results a span.title {
    font-size: 110%;
    font-weight: 700;
}
.resultbox .results a span.path {
    font-size: 90%;
    color: #aaa;
    display: block;
    padding: 0 64px 0 0;
}
.resultbox .results a i.fa-2x {
    position: absolute;
    top: 10%;
    right: 8px;
    color: #DDECEF;
    font-size: 250%;
}
.resultbox .results .fullreference {
    display: none;
}
#microsite .input-container__top-label {
  color: #35363D;
  font-size: 1.3rem;
}
#microsite .chip {
  font-size: 1.3rem;
  cursor: auto;
  border-radius: 8px;
}
#microsite .chip.blue {
  background-color: #4ba5bd;
}
#microsite .chip.red {
  background-color: #b5778c;
}
#microsite .chip.orange {
  color: #fff;
  background-color: #e49036;
}
#microsite .chip.green {
  background-color: #2aa486;
}
#microsite .chip:hover {
  background-color: transparent;
    border-color: #D2D2D9;
    color: #35363D;
}

/* Responsive adjustments */
@media (max-width: 1023px) {
  #microsite .banner__title {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    transform: translateX(0);
  }  
  .resultbox .resource-grid {
      grid-template-columns: 75px auto;
  }
}
@media (max-width: 768px) {
  #microsite {
    padding: 0.5rem;
  }

  #microsite h1 {
    font-size: 1.5rem;
  }

  #microsite .button {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}