/**
 * UK Page Banner Slider Block Styles
 * 
 * Styles for the page banner slider block with H1 title and description
 */

/* Slider Container */
.uk-page-banner-slider {
  position: relative;
  overflow: visible;
  /* Add margin-bottom to prevent overlay from overlapping content below */
  margin-bottom: 6rem; /* 96px - provides space for overlay extending beyond slider */
}

.page-banner-slider-wrapper {
  position: relative;
  overflow: visible;
}

.page-banner-slider {
  position: relative;
  overflow: visible;
}

.page-banner-slider .slick-list,
.page-banner-slider .slick-track {
  overflow: visible;
}

.page-banner-slider::before,
.page-banner-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6.875rem; /* 110px */
  pointer-events: none;
  z-index: 5;
}

.page-banner-slider::after {
  right: 0;
  transform: rotateY(180deg);
}

.page-banner-slider::before {
  left: 0;
}

/* Individual Slide */
.page-banner-slide {
  position: relative;
  padding-top: 2.25rem; /* 36px */
  padding-bottom: 2.25rem; /* 36px */
  background-color: #fff;
  box-shadow: 0 0.5rem 0 0 #ffdc00; /* 0 8px 0 0 */
  outline: none; /* Remove focus outline from slides */
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
  width: 92%;
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
}

/* Clickable slide styles */
.page-banner-slide.has-link {
  cursor: pointer;
}

.page-banner-slide.has-link:focus {
  outline: 0.1875rem solid #ffdc00; /* 3px */
  outline-offset: 0.125rem; /* 2px */
  box-shadow:
    0 0.5rem 0 0 #ffdc00,
    /* 0 8px 0 0 */ 0 0 0 0.1875rem rgba(255, 220, 0, 0.5),
    /* 3px */ 0 0 0 0.3125rem rgba(0, 51, 160, 0.3); /* 5px */
}

.page-banner-slide.has-link:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 0 0.5rem 0 0 #ffdc00; /* 0 8px 0 0 */
}

.page-banner-slide.has-link:focus-visible {
  outline: 0.1875rem solid #ffdc00; /* 3px */
  outline-offset: 0.125rem; /* 2px */
  box-shadow:
    0 0.5rem 0 0 #ffdc00,
    /* 0 8px 0 0 */ 0 0 0 0.1875rem rgba(255, 220, 0, 0.5),
    /* 3px */ 0 0 0 0.3125rem rgba(0, 51, 160, 0.3); /* 5px */
}

.page-banner-slider .slick-slide {
  padding: 0 0.5rem; /* 0 8px */
  margin: 0 0.75rem !important; /* 0 12px */
  box-sizing: border-box;
  transition:
    opacity 0.3s ease,
    filter 0.3s ease;
}

.page-banner-slider .slick-slide:not(.slick-current) {
  opacity: 0.5;
  filter: grayscale(8%) brightness(0.9);
}

.page-banner-slider .slick-slide.slick-current {
  opacity: 1;
  filter: none;
}

.slick-list,
.slick-track {
  padding: 0 1rem; /* 0 16px */
}

@media (max-width: 1100px) {
  .page-banner-slide {
    width: 100%;
    max-width: 100%;
  }
  .page-banner-slider .slick-slide {
    margin: 0 0.375rem !important; /* 0 6px */
    padding: 0 0.375rem; /* 0 6px */
  }
  .slick-list,
  .slick-track {
    padding: 0 0.5rem; /* 0 8px */
  }

  /* No preview/dimming on tablet */
  .page-banner-slider .slick-slide {
    opacity: 1;
    filter: none;
  }
  .page-banner-slider .slick-slide .page-banner-slide {
    transform: none;
  }
}

@media (max-width: 768px) {
  .page-banner-slide {
    width: 100%;
    max-width: 100%;
  }
  .page-banner-slider .slick-slide {
    /* Make active slide feel wider on mobile */
    margin: 0 !important;
    padding: 0;
  }
  .slick-list,
  .slick-track {
    padding: 0;
  }

  /* No preview/dimming on mobile */
  .page-banner-slider .slick-slide {
    opacity: 1;
    filter: none;
  }
  .page-banner-slider .slick-slide .page-banner-slide {
    transform: none;
  }

  /* Make photo height responsive on mobile */
  .page-banner-slide.has-background-image {
    --slide-height: clamp(
      17.5rem,
      70vw,
      26.25rem
    ); /* clamp(280px, 70vw, 420px) */
  }
}

.page-banner-slide.has-background-image {
  background-color: transparent;
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: none;
  /* Responsive image area */
  --slide-height: clamp(
    22.5rem,
    45vw,
    32.625rem
  ); /* clamp(360px, 45vw, 522px) */
  height: var(--slide-height);
  position: relative;
  overflow: visible;
}

.page-banner-slider .slick-center .page-banner-slide,
.page-banner-slider .slick-current .page-banner-slide {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 1rem 2.1875rem rgba(0, 0, 0, 0.3); /* 0 16px 35px */
}

.page-banner-slider .slick-slide .page-banner-slide {
  transform: scale(0.92);
}

/* Background image container */
.page-banner-slide.has-background-image[data-bg-image]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--slide-height);
  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)
  );
}

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

/* Banner Icon Wrapper */
.uk-page-banner-slider .banner-icon-wrapper {
  position: absolute;
  top: -2.1875rem; /* -35px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  width: 4.625rem; /* 74px */
  height: 4.375rem; /* 70px */

}

.uk-page-banner-slider .banner-building-icon {
  width: 100%;
  height: 100%;
  display: block;

}

.page-banner-slider-overlay-wrapper {
  position: absolute;
  left: 50%;
  top: 108%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem; /* 30px */
  pointer-events: none;
  z-index: 12;
  
}

.page-banner-slider-overlay {
  background-color: #0033a0;
  width: min(90%, 42.3125rem); /* 677px */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.875rem; /* 30px */
  align-items: center;
  pointer-events: none;
  padding: 30px 0;
}

.slide-meta {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.uk-page-banner-slider .page-banner-content {
  max-width: 100%;
  text-align: center;
  color: #fff;
}

/* Banner Description Styles */
.uk-page-banner-slider .uk-page-banner-description {
  margin-bottom: 0;
  text-align: center;
  color: #fff;
  font-size: 1em; /* 16px */
  line-height: 1.6em;
  max-width: 100%;
}

.uk-page-banner-slider .uk-page-banner-description p {
  margin: 0 0 0.75rem 0; /* 0 0 12px 0 */
}

.uk-page-banner-slider .uk-page-banner-description p:last-child {
  margin-bottom: 0;
}

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

/* Slider Navigation - Arrows */
.uk-page-banner-slider .slick-prev,
.uk-page-banner-slider .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.125rem; /* 50px */
  height: 3.125rem; /* 50px */
  background: rgba(255, 255, 255, 0.8);
  border: none;
  cursor: pointer;
  z-index: 10;
  background-size: 1.25rem 1.25rem; /* 20px 20px */
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.3s ease;
  font-size: 0; /* Hide default text */
  /* Ensure sufficient touch target size (WCAG 2.5.5) */
  min-width: 2.75rem; /* 44px */
  min-height: 2.75rem; /* 44px */
}

/* Accessibility: Enhanced focus states (WCAG 2.4.7) */
.uk-page-banner-slider .slick-prev:focus,
.uk-page-banner-slider .slick-next:focus {
  outline: 0.1875rem solid #ffdc00; /* 3px */
  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 */
}

.uk-page-banner-slider .slick-prev:focus:not(:focus-visible),
.uk-page-banner-slider .slick-next:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.uk-page-banner-slider .slick-prev:focus-visible,
.uk-page-banner-slider .slick-next:focus-visible {
  outline: 0.1875rem solid #ffdc00; /* 3px */
  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 */
}

/* Remove default Slick arrow :before pseudo-elements */
.uk-page-banner-slider .slick-prev:before,
.uk-page-banner-slider .slick-next:before {
  display: none !important;
}

.uk-page-banner-slider .slick-prev:hover {
  background-color: #d8e4f3 !important;
  background-image: url("/wp-content/uploads/2025/09/left-arrow.svg");
}

.uk-page-banner-slider .slick-next:hover {
  background-color: #d8e4f3 !important;
  background-image: url("/wp-content/uploads/2025/09/right-arrow.svg");
}

.uk-page-banner-slider .slick-prev {
  left: -1.0625rem; /* -17px */
  background-image: url("/wp-content/uploads/2025/09/left-arrow.svg");
  background-size: 3rem !important; /* 48px */
}

.uk-page-banner-slider .slick-next {
  right: -1.0625rem; /* -17px */
  background-image: url("/wp-content/uploads/2025/09/right-arrow.svg");
  background-size: 3rem !important; /* 48px */
}

@media (max-width: 1100px) {
  .page-banner-slider {
    padding: 0;
  }

  .uk-page-banner-slider .slick-prev,
  .uk-page-banner-slider .slick-next {
    width: 2.625rem; /* 42px */
    height: 2.625rem; /* 42px */
    top: 45%;
    background-size: 2rem 2rem; /* 32px 32px */
  }

  .uk-page-banner-slider .slick-prev {
    left: 1rem; /* 16px */
  }

  .uk-page-banner-slider .slick-next {
    right: 1rem; /* 16px */
  }
}

/* Dots Container */
.page-banner-slider-dots-container {
  position: relative;
  width: 100%;
  text-align: center;
}

/* Slider Navigation - Dots */
.page-banner-slider-dots-container .slick-dots,
.uk-page-banner-slider .slick-dots {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  display: flex !important;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 20;
  gap: 0.5rem; /* 8px */
}

/* Hide any duplicate dots - multiple selectors to catch all cases */
.uk-page-banner-slider .slick-dots ~ .slick-dots {
  display: none !important;
}

/* Hide dots that appear outside the slider container */
.page-banner-slider-wrapper > .slick-dots {
  display: none !important;
}

/* Hide dots that appear in the section but not in the slider */
.uk-page-banner-slider > .slick-dots {
  display: none !important;
}

/* Hide dots that are siblings of the slider wrapper */
.page-banner-slider-wrapper ~ .slick-dots {
  display: none !important;
}

/* Hide dots that are in the section but not direct children of slider */
.uk-page-banner-slider .page-banner-slider-wrapper ~ .slick-dots {
  display: none !important;
}

/* Only show dots that are direct children of .page-banner-slider */
.page-banner-slider > .slick-dots {
  display: flex !important;
}

/* Ensure only one set of dots is visible - hide all but the first */
.uk-page-banner-slider .slick-dots:not(:first-of-type) {
  display: none !important;
}

.uk-page-banner-slider .slick-dots li {
  margin: 0;
}

.uk-page-banner-slider .slick-dots li button {
  width: 0.75rem; /* 12px */
  height: 0.75rem; /* 12px */
  background: #1b365d;
  opacity: 0.7;
  font-size: 0;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

/* Remove Slick's default ::before pseudo-element */
.uk-page-banner-slider .slick-dots li button::before {
  content: none !important;
  display: none !important;
}

.uk-page-banner-slider .slick-dots li button::after {
  content: none !important;
  display: none !important;
}

.uk-page-banner-slider .slick-dots li.slick-active button {
  background: #1b365d;
  opacity: 1;
}

.uk-page-banner-slider .slick-dots li button:focus-visible {
  outline: 0.1875rem solid #ffdc00; /* 3px */
  outline-offset: 0.125rem; /* 2px */
  box-shadow: 0 0 0 0.1875rem rgba(255, 220, 0, 0.5); /* 3px */
}

/* Show arrows on mobile */
@media (max-width: 768px) {
  .uk-page-banner-slider .slick-prev,
  .uk-page-banner-slider .slick-next {
    display: block !important;
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    z-index: 10;
  }

  .uk-page-banner-slider .slick-prev {
    left: 0.625rem; /* 10px */
  }

  .uk-page-banner-slider .slick-next {
    right: 0.625rem; /* 10px */
  }
  .uk-page-banner-slider .uk-page-banner-title {
    font-size: 2.5rem;
  }
}

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

  .uk-page-banner-description {
    font-size: 0.875em; /* 14px */
  }

  /* Overlay in flow on mobile so it doesn't stack over content below */
  .page-banner-slider-overlay-wrapper {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin-top: -2rem; /* Slight overlap with slider for visual continuity */
    margin-bottom: 0;
  }

  /* Section margin only for spacing; overlay no longer extends past block */
  .uk-page-banner-slider {
    margin-bottom: 2rem; /* 32px - overlay is in flow, no overlap */
  }
}

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

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

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

/* Accessibility: Screen reader only class */
.uk-page-banner-slider .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-slider,
  .uk-page-banner-slider .container,
  .uk-page-banner-slider .page-banner-content,
  .uk-page-banner-slider .slick-prev,
  .uk-page-banner-slider .slick-next,
  .uk-page-banner-slider .slick-dots li button {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .uk-page-banner-slider
    .page-banner-slide.has-background-image
    .container.banner-container-overlay {
    transform: translateX(
      -50%
    ) !important; /* Remove animation but keep centering */
  }

  /* Disable Slick transitions for reduced motion */
  .uk-page-banner-slider .slick-slide {
    transition: none !important;
  }
}

/* Accessibility: High contrast mode support (WCAG 1.4.11) */
@media (prefers-contrast: high) {
  .uk-page-banner-slider {
    border: 0.125rem solid currentColor; /* 2px */
  }

  .uk-page-banner-title,
  .uk-page-banner-description {
    color: CanvasText !important;
  }

  .page-banner-slide.has-background-image .container.banner-container-overlay {
    border: 0.125rem solid CanvasText; /* 2px */
    background-color: Canvas !important;
  }

  .uk-page-banner-slider .slick-prev:focus-visible,
  .uk-page-banner-slider .slick-next:focus-visible,
  .uk-page-banner-slider .slick-dots li button:focus-visible {
    outline: 0.1875rem solid Highlight; /* 3px */
    box-shadow: none;
  }

  .page-banner-slide.has-link:focus-visible {
    outline: 0.1875rem solid Highlight; /* 3px */
    box-shadow: none;
  }

  .uk-page-banner-slider .slick-prev,
  .uk-page-banner-slider .slick-next {
    border-color: CanvasText;
  }

  .uk-page-banner-slider .slick-dots li button {
    border-color: CanvasText;
  }

  .uk-page-banner-slider .slick-dots li.slick-active button {
    background: CanvasText !important;
    opacity: 1;
  }
}