/**
 * UK Page Banner Block Styles
 * 
 * Styles for the page banner block with H3 subtitle, H1 title, and breadcrumbs
 */

.uk-page-banner {
  position: relative;
  padding-top: 2.25rem; /* 36px */
  padding-bottom: 2.25rem; /* 36px */
  /*margin-top: 45px;
    margin-bottom: 65px;*/
  background-color: #fff;
  box-shadow: 0 0.5rem 0 0 #ffdc00; /* 0 8px 0 0 */
}

.uk-page-banner.has-background-image {
  background-color: transparent;
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: none;
  height: 30.25rem; /* 484px */
  position: relative;
  overflow: visible;
  /* Add margin-bottom to prevent overlay from overlapping content below */
  margin-bottom: 6rem; /* 96px - provides space for overlay extending beyond banner */
}

/* Background image container */
.uk-page-banner.has-background-image[data-bg-image]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 24.5rem; /* 392px */
  background-image: var(--bg-image-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  clip-path: polygon(
    0 0.625rem,
    0.3125rem 0.625rem,
    0.3125rem 0.3125rem,
    0.625rem 0.3125rem,
    0.625rem 0,
    calc(100% - 0.625rem) 0,
    calc(100% - 0.625rem) 0.3125rem,
    calc(100% - 0.3125rem) 0.3125rem,
    calc(100% - 0.3125rem) 0.625rem,
    100% 0.625rem,
    100% calc(100% - 0.625rem),
    calc(100% - 0.3125rem) calc(100% - 0.625rem),
    calc(100% - 0.3125rem) calc(100% - 0.3125rem),
    calc(100% - 0.625rem) calc(100% - 0.3125rem),
    calc(100% - 0.625rem) 100%,
    0.625rem 100%,
    0.625rem calc(100% - 0.3125rem),
    0.3125rem calc(100% - 0.3125rem),
    0.3125rem calc(100% - 0.625rem),
    0 calc(100% - 0.625rem)
  );
}

.uk-page-banner .container {
  position: relative;
  z-index: 2;
}

/* White banner content box when background image is enabled */
.uk-page-banner.has-background-image .container.banner-container-overlay {
  background-color: #fff;
  box-shadow: 0 0.5rem 0 0 rgba(255, 220, 0, 1); /* 0px 8px 0px 0px */
  padding: 2rem 0; /* 32px 0 */
  width: 71.375rem; /* 1142px */
  max-width: 83.33%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(50% - -2.40625rem); /* calc(50% - -38.5px) */
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
  align-items: center;
}

.page-banner-content {
  max-width: 100%;
  text-align: center;
  padding: 1.5em;
}

/* Breadcrumb Styles */
.uk-page-banner .breadcrumb-nav {
  margin-top: 1.25rem; /* 20px */
  margin-bottom: 0;
  text-align: center;
}

.uk-page-banner .breadcrumb {
  margin: 0;
  padding: 0;
  background: none;
  font-size: 0.875em; /* 14px */
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.uk-page-banner .breadcrumb-item {
  display: inline-block;
}

/* Accessibility: #1b365d on white (#fff) = ~8.2:1 contrast ratio - WCAG 2.1 AA compliant */
.uk-page-banner .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 0.5rem; /* 0 8px */
  color: #1b365d;
}

.uk-page-banner .breadcrumb-item a {
  color: #1b365d;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.uk-page-banner .breadcrumb-item a:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 0.1875rem; /* 3px */
}

.uk-page-banner .breadcrumb-item.active {
  color: #1b365d;
}

/* Subtitle Styles (uses span for accessibility) */
/* Accessibility: #0033a0 on white (#fff) = ~8.6:1 contrast ratio - WCAG 2.1 AA compliant */
.uk-page-banner-subtitle {
  font-size: 1.25em; /* 20px */
  font-weight: 900;
  line-height: 1em; /* 100% */
  margin-bottom: 0.625rem; /* 10px */
  text-align: center;
  color: #0033a0 !important;
  text-transform: uppercase;
}

/* Main Title (H1) Styles */
/* Accessibility: #0033a0 on white (#fff) = ~8.6:1 contrast ratio - WCAG 2.1 AA compliant */
.uk-page-banner-title {
  padding-top: 1rem; /* 16px */
  color: #0033a0;
  text-shadow: 0.1875rem 0.25rem 0 #ffdc00; /* 3px 4px 0 */
  font-size: 3.75em; /* 60px */
  font-style: normal;
  font-weight: 900;
  line-height: 1em; /* 100% */
  text-transform: uppercase;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .uk-page-banner-title {
    font-size: 2em; /* 32px */
  }

  .uk-page-banner-subtitle {
    font-size: 1em; /* 16px */
  }
  
  /* Reduce margin-bottom on mobile for banner with background image */
  .uk-page-banner.has-background-image {
    margin-bottom: 4rem; /* 64px - reduced for mobile */
  }
}

/* Full Width Alignment */
.uk-page-banner.alignfull {
  width: 100%;
  max-width: 100%;
}

.uk-page-banner.alignfull .container {
  max-width: 100%;
  padding-left: 1.25rem; /* 20px */
  padding-right: 1.25rem; /* 20px */
}

/* Wide Alignment */
.uk-page-banner.alignwide {
  width: 100%;
  max-width: 75rem; /* 1200px */
  margin-left: auto;
  margin-right: auto;
}

/* Accessibility: Focus states for interactive elements */
.uk-page-banner .breadcrumb-item a:focus-visible {
  outline: 0.1875rem solid #ffdc00; /* 3px - High contrast yellow */
  outline-offset: 0.125rem; /* 2px */
  box-shadow:
    0 0 0 0.1875rem rgba(255, 220, 0, 0.5), /* 3px */
    0 0 0 0.3125rem rgba(0, 51, 160, 0.3); /* 5px - Blue shadow for depth */
}
.uk-page-banner .breadcrumb-item a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Accessibility: Screen reader only class */
.uk-page-banner .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  clip-path: inset(50%);
}

/* Accessibility: Reduced motion support (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .uk-page-banner,
  .uk-page-banner .container,
  .uk-page-banner .page-banner-content,
  .uk-page-banner .breadcrumb-item a {
    transition: none !important;
    animation: none !important;
  }
  .uk-page-banner.has-background-image .container.banner-container-overlay {
    transform: translateX(
      -50%
    ) !important; /* Remove animation but keep centering */
  }
}

/* Accessibility: High contrast mode support (WCAG 1.4.11) */
@media (prefers-contrast: high) {
  .uk-page-banner {
    border: 0.125rem solid currentColor; /* 2px */
  }
  .uk-page-banner-title,
  .uk-page-banner-subtitle,
  .uk-page-banner .breadcrumb-item,
  .uk-page-banner .breadcrumb-item a {
    color: CanvasText !important;
  }
  .uk-page-banner.has-background-image .container.banner-container-overlay {
    border: 0.125rem solid CanvasText; /* 2px */
    background-color: Canvas !important;
  }
  .uk-page-banner .breadcrumb-item a:focus-visible {
    outline: 0.1875rem solid Highlight; /* 3px */
    box-shadow: none;
  }
}

.searchandfilter input{
	border: 0.0625rem solid #1b365d !important;
    box-shadow: 0.3125rem 0.3125rem 0 0 #1b365d !important;
    border-radius: 0.375rem !important;
    padding: 16px 20px 15px !important;
}
.searchandfilter select{
	border: 0.0625rem solid #1b365d !important;
    box-shadow: 0.3125rem 0.3125rem 0 0 #1b365d !important;
    border-radius: 0.375rem !important;
    padding: 16px 20px 15px !important;
}