/* different state jump menu block */
.block-views-blockstates-block-1 {
	float: right;
	margin-right: 120px;
}


/* resource search index teasers */
/* fix layout so that they are side by side */
.block-views-blockhelp-hub-resources-block-1 {
    padding-left: 2em;
    padding-right: 4em;
}
@media (min-width: 977px) {
  .block-facet-blockresource-type-taxonomy-term-name {
      float: right;
      margin-right: 2em;
  }
}

.main-resource-info h6.d-inline:not(:last-of-type)::after {
  content: " | ";
  margin: 0 0.25em;
}

.view-help-hub-resources .views-row {
    border-bottom: 4px solid;
    margin-bottom: 1em;
}

.contact-info-wrapper {
    background-color: #fffbcc;
}


/* Target the specific facet list using the data attribute */
ul[data-drupal-facet-id="resource_type_taxonomy_term_name"] {
    background-color: #f9f9f9; /* Light background */
    border: 1px solid #ddd; /* Subtle border */
    padding: 10px;
    border-radius: 5px;
    list-style: none;
    margin: 0;
}

/* Style each checkbox item */
ul[data-drupal-facet-id="resource_type_taxonomy_term_name"] .facet-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
}

/* Remove border from the last item */
ul[data-drupal-facet-id="resource_type_taxonomy_term_name"] .facet-item:last-child {
    border-bottom: none;
}

/* Style the checkboxes */
ul[data-drupal-facet-id="resource_type_taxonomy_term_name"] .facets-checkbox {
    appearance: none; /* Remove default styling */
    width: 18px;
    height: 18px;
    border: 2px solid #005a8c; /* FosterClub blue */
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

/* Style the checkbox when checked */
ul[data-drupal-facet-id="resource_type_taxonomy_term_name"] .facets-checkbox:checked {
    background-color: #005a8c; /* FosterClub blue */
    border-color: #005a8c;
}

/* Add a checkmark inside the checked checkbox */
ul[data-drupal-facet-id="resource_type_taxonomy_term_name"] .facets-checkbox:checked::after {
    content: "\2713"; /* Unicode checkmark */
    color: white;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Style the facet labels */
ul[data-drupal-facet-id="resource_type_taxonomy_term_name"] label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

/* Add hover effect to facet items */
ul[data-drupal-facet-id="resource_type_taxonomy_term_name"] .facet-item:hover {
    background-color: #f0f0f0;
}




/* dxpr 5 column fix */
/* Force full-width DXPR sections */
/* Make the background color full width without breaking content alignment */
@media (min-width: 680px) {
  #resource-top-picks.az-section {
	    margin-left: -14px;
      width: 100vw;
  }
}


/* Custom styles for the five-column layout */
#resource-top-picks .az-row--md .az-column {
    flex: 0 0 20%; /* Set each column to take 20% of the row */
    font-family: "M PLUS Rounded 1c Bold","M PLUS Rounded 1c";
    font-weight: 700;
    font-style: normal;
    max-width: 20%; /* Ensure no column exceeds 20% width */
}
/* Keep the inside content properly centered */
#resource-top-picks .az-ctnr.container-fluid {
    max-width: 1300px; /* or whatever your site's main container max width is */
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}


/* Ensure the images within the columns fit properly */
#resource-top-picks .az-row--md .az-column .az-image-content {
    width: 100%; /* Full width of the column */
    height: auto; /* Maintain aspect ratio */
}


@media (max-width: 720px) {
    #resource-top-picks .az-row--md .az-column {
        flex: 0 0 50%; /* Each column takes 50% of the row */
        max-width: 50%; /* Column takes half the width */
    }
    
    h1 p {
    	font-size: 74px;
    }
}


/* paginations styles */
/* Pagination container */
.pager-nav {
    text-align: center;
    padding: 20px 0;
    font-family: 'Open Sans', Arial, sans-serif;
}

/* Base pagination list style */
.pagination {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 8px;
}

/* Each page item */
.pagination .page-item {
    display: inline-block;
}

/* Each page link */
.pagination .page-link {
    display: block;
    padding: 8px 14px;
    background-color: #ffffff; /* White background */
    color: #111111; /* FosterClub dark text */
    border: 2px solid #ffc10e; /* Yellow border */
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover effect */
.pagination .page-link:hover {
    background-color: #ffc10e; /* Yellow on hover */
    color: #111111; /* Keep text dark for contrast */
}

/* Active/current page */
.pagination .is-active .page-link,
.pagination .page-link[aria-current="page"] {
    background-color: #ffc10e; /* Yellow for active page */
    color: #111111;
    border-color: #ffc10e;
}

/* Next / Last buttons */
.pagination .pager__item--next .page-link,
.pagination .pager__item--last .page-link {
    font-weight: 700;
}