/* =========================================
   CAUTIONS & ALERTS SLIDER
   ========================================= */

/* Container & Title */
.nssc-slider-container {
  padding: 4rem 0;
}

.nssc-slider-title {
  color: #042969;
  font-weight: 600;
  font-size: 2.25rem;
}

/* Slide & Wrapper Fixes 
   Forces Drupal's invisible wrappers to stretch to the grid width 
*/
.splide__slide {
  height: auto;
  display: flex !important;
}

.splide__slide > * {
  width: 100%;
  display: flex;
}

/* Card Styling */
.nssc-card {
  background: #f4f6f8;
  border: none;
  border-radius: 15px;
  padding: 2rem;
  min-height: 350px;
  
  display: flex;
  flex-direction: column;
  
  /* Forces the card to stretch within the flex container */
  width: 100%;
  flex: 1 1 auto;
  
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-top 0.3s ease;
}

.nssc-card:hover {
  /* Soft Depth Shadow */
  box-shadow: 0 12px 24px rgba(0, 74, 135, 0.1); 
}

/* Ensure the title changes color on hover too */
.nssc-card:hover .nssc-card__title a {
  color: #1577BB;
  text-decoration: none;
}

.nssc-card__date {
  color: #42B1FF;
  font-weight: 600;
  margin-bottom: 1rem;
  display: block;
}

.nssc-card__title a {
  color: #2c3e50;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
}

/* =========================================
   NAVIGATION CONTROLS (HEADER GROUP)
   ========================================= */

.nssc-slider-controls {
  display: flex;
  align-items: center;
  gap: 1rem; /* Space between "See All Releases" and arrows */
}

/* Force the custom arrows to be circles */
.splide__arrows .splide__arrow {
  position: static; /* Removes Splide's absolute positioning */
  transform: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hide the default Splide SVGs */
.splide__arrows .splide__arrow svg {
  display: none !important;
}

/* Ensure FontAwesome icons inside are white */
.splide__arrow i {
  color: #ffffff;
  font-size: 1rem;
}

/* Design specific colors */
.splide__arrow--prev, 
.splide__arrow--next {
  background-color: #A2E2FF !important; /* Light blue circle */
}

.splide__arrow--prev:hover, 
.splide__arrow--next:hover {
  background-color: #1577BB !important; /* Dark blue circle */
}

.splide__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Remove any rogue default arrows Splide might try to inject */
#nssc-news-slider > .splide__arrows {
  display: none !important;
}

/* 1. Force the Splide slide to be a flexible row */
#nssc-news-slider .splide__slide {
  display: flex !important;
  height: auto !important; /* Ensures slides match the tallest sibling */
}

/* 2. Force BOTH Drupal wrappers (the div AND the span) to stretch */
#nssc-news-slider .splide__slide .views-field,
#nssc-news-slider .splide__slide .field-content {
  display: flex !important;
  flex-direction: column !important; /* Passes the height down */
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* 3. Force the card itself to fill that now-stretched span */
#nssc-news-slider .nssc-card {
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column;
}

/* Slider Card Category Pill */
.nssc-card__pill {
  display: inline-block;
  background-color: #e5ebf2; 
  color: #042969; 
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 50px; 
  
  /* The Flexbox Magic */
  margin-top: auto; /* Pushes the pill to the bottom */
  margin-bottom: 0; /* Removes the old bottom margin */
  align-self: flex-start; 
}