/* TRAINING COURSES STYLES */
/* Training Courses Index Shortcode Styles */
/* Container wrapper for each training course item */
.dam-post-showcase {
  max-width: 1500px;
}
.dam-post-showcase-item :nth-child(odd) .mcsc-training-courses-index-item {
  background-color: var(--wp--preset--color--base); /* White */
}
.dam-post-showcase-item:nth-child(even) .mcsc-training-courses-index-item {
  background-color: var(--wp--preset--color--base-4); /* Light blue */
}
.mcsc-training-courses-item-wrapper .mcsc-training-courses-index-item {
  display: flex;
  border-radius: 30px;
  padding: 2rem;
  gap: 2rem;
  align-items: center;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.10);
  margin-bottom:2rem;
}
.mcsc-training-courses-index-item .metadata-container, .crm-link {
  font-family: var(--wp--preset--font-family--heading);
}
/* Zebra Striping */
.mcsc-training-courses-item-wrapper:nth-child(odd) .mcsc-training-courses-index-item {
  background-color: var(--wp--preset--color--base); /* White */
}
.mcsc-training-courses-item-wrapper:nth-child(even) .mcsc-training-courses-index-item {
  background-color: var(--wp--preset--color--base-4); /* Light blue */
}

/* Layout: three columns */
.mcsc-training-courses-item-wrapper .featured-image-container,
.mcsc-training-courses-item-wrapper .metadata-container,
.mcsc-training-courses-item-wrapper .content-container {
  width: 33.33%;
}
.content-container .wp-block-buttons.is-content-justification-center {
  justify-content:left;
}
/* Featured image styling */
.mcsc-training-courses-item-wrapper .featured-image-container img {
  width: 100%;
  height: auto;
  border-radius: 30px;
  display: block;
}
/* Metadata styles */
.mcsc-training-courses-item-wrapper .date-and-time {
  font-weight: bold;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-3);
  margin: 0;
  line-height: 1;
}
.mcsc-training-courses-item-wrapper .metadata-container h3 {
  font-size: var(--wp--preset--font-size--large);
  line-height: 1;
  color: var(--wp--preset--color--accent);
  margin: 1rem 0;
}
.mcsc-training-courses-item-wrapper .type-format-center {
  font-weight: bold;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-2);
  margin: 0 0 0.5rem;
  line-height: 1;
}
.taxonomy-category {
pointer-events: none !important;
}
/* Content + Register button styles */
.mcsc-training-courses-item-wrapper .content-container {
  line-height: 1.5;
}
.mcsc-training-courses-item-wrapper .wp-block-button.crm-link a {
  background-color: var(--wp--preset--color--accent);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}
.facetwp-template > .mcsc-training-courses-item-wrapper > .mcsc-training-courses-index-item > .content-container > .wp-block-buttons > .wp-block-button.crm-link > a.button.wp-block-button__link.wp-element-button:hover,
.mcsc-training-facets .mcsc-training-facets-row div.facetwp-facet.facetwp-facet-reset.facetwp-type-reset button.facetwp-reset:hover{
  background-color: var(--wp--preset--color--accent-2)!important;
}
/* No trainings message */
.mcsc-training-data p.no-trainings {
  text-align: center;
}
/* Responsive layout for mid-sized screens */
@media (max-width: 1149px) {
  .mcsc-training-courses-item-wrapper .featured-image-container img {
    object-fit: cover;
  }
  .mcsc-training-courses-item-wrapper p.date-and-time > span.mobile-hide {
    display: none;
  }
  .mcsc-training-courses-item-wrapper p.date-and-time > span.times {
    display: block;
  }
  .mcsc-training-courses-item-wrapper .content-container > p {
    font-size: var(--wp--preset--font-size--small);
  }
} 
/* Responsive layout for mobile */
@media (max-width: 768px) {
  .mcsc-training-courses-item-wrapper .mcsc-training-courses-index-item {
    flex-direction: column;
  }
  .mcsc-training-courses-item-wrapper .featured-image-container,
  .mcsc-training-courses-item-wrapper .metadata-container,
  .mcsc-training-courses-item-wrapper .content-container {
    width: 100%;
  }
  .mcsc-training-description p {
    margin-top:-1.5rem;
  }
}
/* Training Courses Spotlight Shortcode Styles */
/* Scoped wrapper: use flex/grid only within this layout */
.mcsc-training-courses-spotlight-item-wrapper {
  /* flex: 1 1 calc(33.333% - 2rem); */
  flex: 1 1 calc(30% - 2rem);
  box-sizing: border-box;
  display: flex;
}
/* Main card layout */
.mcsc-training-courses-spotlight-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
/* Image styles */
.mcsc-training-courses-spotlight-item .featured-image-container img {
  width: 100%;
  height: auto;
  border-radius: 30px;
  object-fit: cover;
  display: block;
}
/* Metadata - Date and Type/Format*/
.mcsc-training-courses-spotlight-item .metadata-container {
  font-family: var(--wp--preset--font-family--heading);
  margin-top: 0.5rem;
}
.mcsc-training-courses-spotlight-item .metadata-container .date-and-time,
.mcsc-training-courses-spotlight-item .metadata-container .type-format {
  font-weight: 700;
  color: var(--wp--preset--color--accent-3, #faab75);
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  /* margin-top: 0.5rem; */
  margin-bottom: 0;
  line-height:1;
}
/* Title */
.mcsc-training-courses-spotlight-item .mcsc-training-course-title {
  text-decoration: none;
}
.mcsc-training-courses-spotlight-item .mcsc-training-course-title h3 {
  font-size:28px;
  font-weight: 500;
  color: var(--wp--preset--color--accent, #eb5326);
  line-height: 1.25;
  margin: 0;
}
/* Hover (optional) */
.mcsc-training-courses-spotlight-item .mcsc-training-course-title:hover h3 {
  color: #c45e3d;
}
/* Outer flex container for layout */
.dam-post-showcase-wrapper .mcsc-training-courses-spotlight-item-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding:2rem;
}
/* Responsive tweaks */
@media (max-width: 900px) {
  .mcsc-training-courses-spotlight-item-wrapper {
    flex: 1 1 calc(50% - 2rem);
  }
}
@media (max-width: 600px) {
  .mcsc-training-courses-spotlight-item-wrapper {
    flex: 1 1 100%;
  }
}

/* Training Courses Facet Styles */
/* General styles for the FacetWP search and filter elements */
/* Text labels for the facets */
.mcsc-training-facets p {
  color: var(--wp--preset--color--accent-2);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  text-transform: uppercase;
  padding-left: .5rem;
}
.mcsc-training-facets .facetwp-facet {
  margin-block-start: unset;
}
.mcsc-training-facets .facetwp-facet.facetwp-facet-reset.facetwp-type-reset {
  padding-top: 2rem;
}
/* Center page-specific styles - Make the center dropdown unselectable */
.mcsc-training-facets.mscc-center-page .mcsc-training-facets-row div.facetwp-facet.facetwp-facet-training_center.facetwp-type-dropdown select.facetwp-dropdown,
.mcsc-training-facets.mscc-service-page .mcsc-training-facets-row div.facetwp-facet.facetwp-facet.facetwp-facet-training_type.facetwp-type-dropdown select.facetwp-dropdown
 {  
  background-color: #D3D3D3; /* Light gray background */
  pointer-events: none;
}
/* Mobile styles for the facets  */
@media (max-width: 1050px) {
  /* Hide inactive facets smaller screens */
  .mcsc-training-facets.mscc-center-page .mcsc-training-facets-row:nth-child(1) > div.wp-block-group:last-child,
  .mcsc-training-facets.mscc-service-page .mcsc-training-facets-row:nth-child(2) > div.wp-block-group:first-child {
    display: none;
  }
  /* Make the 'center' dropdown full width */
  .mcsc-training-facets.mscc-service-page .mcsc-training-facets-row:nth-child(1) > div.wp-block-group:last-child, 
  .mcsc-training-facets.mscc-service-page .mcsc-training-facets-row:nth-child(1) > div.wp-block-group:last-child div.facetwp-facet select.facetwp-dropdown {
    min-width: 100%;
  }
}
@media (max-width: 800px) {
  /* Make the 'reset' button its own row on smaller screens */
  .mcsc-training-facets .mcsc-training-facets-row:nth-child(2) > div.wp-block-group:last-child {
    display: block;
    text-align: center;
    width: 100%;
  }
}
@media (max-width: 600px) {
    /* Make facets full width on mobile viewports */
    .mcsc-training-facets .mcsc-training-facets-row > div.wp-block-group,
    .mcsc-training-facets .mcsc-training-facets-row div.facetwp-facet select.facetwp-dropdown,
    .mcsc-training-facets .mcsc-training-facets-row div.facetwp-facet.facetwp-facet-training_search.facetwp-type-search,
    .mcsc-training-facets .mcsc-training-facets-row div.facetwp-facet.facetwp-facet.facetwp-facet-training_date_range .facetwp-type-date_range,
    .mcsc-training-facets .mcsc-training-facets-row div.facetwp-facet.facetwp-facet-training_search.facetwp-type-search span,
    .mcsc-training-facets .mcsc-training-facets-row div.facetwp-facet.facetwp-facet-training_search.facetwp-type-search span.facetwp-input-wrap input.facetwp-search {
      width: 100% !important;
      min-width: 100% !important;
    }
    /* Remove padding from the search input */
    .mcsc-training-facets .mcsc-training-facets-row div.facetwp-facet.facetwp-facet-training_search.facetwp-type-search span.facetwp-input-wrap input.facetwp-search {
      padding-right: 0;
    }
    /* Make the data range input fields 50% width each on mobile */
    .mcsc-training-facets .mcsc-training-facets-row div.facetwp-facet.facetwp-facet-training_date_range.facetwp-type-date_range input.facetwp-date.ready {
      min-width: 50%;
    }
}
@media (max-width: 425px) {
    /* Make the data range input fields 100% width each on smaller mobile */
    .mcsc-training-facets .mcsc-training-facets-row div.facetwp-facet.facetwp-facet-training_date_range.facetwp-type-date_range input.facetwp-date.ready {
      min-width: 100%;
      margin-bottom: 0.5rem;
    }
}

/* Styles for input fields and select elements */
.facetwp-search,
.facetwp-dropdown,
.facetwp-date {
    border-radius: 30px; /* Apply 30px rounded corners */
    padding: 8px 12px; /* Add some padding for better appearance */
    border: 1px solid #ccc; /* Add a subtle border */
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    /* You can add more styling here like box-shadow, background-color etc. */
}

/* Specific styling for the date input fields to match others */
.facetwp-date-min.fdate-alt-input,
.facetwp-date-max.fdate-alt-input {
    border-radius: 30px; /* Ensure these also have rounded corners */
    padding: 8px 12px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-family: var(--wp--preset--font-family--body);
}

/* Style for the select dropdowns */
.facetwp-dropdown {
    border-radius: 30px; /* Apply 30px rounded corners */
    padding: 8px 12px; /* Add some padding for better appearance */
    border: 1px solid #ccc; /* Add a subtle border */
    font-family: var(--wp--preset--font-family--body);
    /* Ensure font applies to the select element itself */
    background-color: var(--wp--preset--color--base);
}

/* Attempt to apply font to options within dropdowns, though browser support varies */
.facetwp-dropdown option {
    font-family: var(--wp--preset--font-family--body);
}

/* Style for the reset button for consistency */
.facetwp-reset {
    font-family: var(--wp--preset--font-family--heading) !important;
    font-weight:700;
    border-radius: 30px; /* Apply rounded corners to the reset button */
    padding: 0.75rem 2rem; /* Adjust padding as needed */
    background-color:var(--wp--preset--color--accent); /* Example background color */
    color: white; /* Example text color */
    border: none; /* Remove default border */
    cursor: pointer; /* Indicate it's clickable */
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    text-transform: uppercase; /* Make text all caps */
}

/* Basic styling for the input wrap to align the icon */
.facetwp-input-wrap {
    display: flex;
    align-items: center;
}

/* Adjust the icon's position if necessary, though it's usually managed by the plugin */
.facetwp-icon {
    margin-right: 5px; /* Space between icon and input field */
}

/* Ensure the wrapper groups align properly, if needed */
.wp-block-group.is-content-justification-center.is-nowrap.is-layout-flex {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 15px; /* Space between the input/select groups */
    justify-content: center; /* Center the items horizontally */
    margin-bottom: 1rem; /* Space below each row of inputs */
}