/* ========================================
   CSS VARIABLES - Shared Values
   ======================================== */
:root {
  --uk-banner-padding: 6rem 1.5rem 3rem 1.5rem;
  --uk-banner-padding-card-long: 10rem 3rem 2rem 3rem;
  --uk-banner-gap: 1rem;
  --uk-banner-margin: 60px;
  --uk-banner-color-primary: #0033a0;
  --uk-banner-color-dark: #0b2f77;
  --uk-banner-color-accent: #1e8aff;
  --uk-banner-color-accent-light: #c7e2ff;
  --uk-banner-color-drop: #4cbcc0;
  --uk-banner-color-overlay: rgba(0, 0, 0, 0.3);
  --uk-banner-clip-corner-lg: 10px;
  --uk-banner-clip-corner-md: 4px;
  --uk-banner-z-overlay: 1;
  --uk-banner-z-content: 2;
  --uk-banner-z-decor-desktop: 100;
  --uk-banner-z-decor-mobile: 100;
  --uk-banner-decor-top: -200px;
  --uk-banner-decor-left: 60%;
  --uk-banner-decor-transform: translateX(-50%);
}

/* ========================================
       BASE STYLES
       ======================================== */
.row > * {
  padding: 0.25rem !important;
}
.uk-banner {
  margin-top: var(--uk-banner-margin);
}

.uk-banner-card {
  --card-max: 1100px;
  --figure-max: 200px;
  --drop-top: 16px;
  --drop-right: -16px;
  --drop-bottom: -16px;
  --drop-left: 16px;
  width: auto !important;
  margin: 30px auto !important;
}

.uk-banner-transparent,
.uk-banner-cta {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
}

.uk-banner-cta {
  padding: var(--uk-banner-padding);
  margin-top: 0;
}

/* Compact CTA (no design element): reduce vertical padding */
.uk-banner-cta.cta-compact {
  --uk-banner-padding: 2.5rem 2rem;
}

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

.uk-banner h1,
.uk-banner h2,
.uk-banner h3,
.uk-banner h4,
.uk-banner h5,
.uk-banner h6 {
  margin-bottom: 1rem;
  font-weight: 900;
  font-family: "alternate-gothic-atf", sans-serif;
  color: var(--uk-banner-color-primary);
  font-size: 4rem;
  text-transform: none !important;
  position: relative;
  z-index: 2;
}

.uk-banner h1::before,
.uk-banner h2::before,
.uk-banner h3::before,
.uk-banner h4::before,
.uk-banner h5::before,
.uk-banner h6::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  pointer-events: none;
}

.uk-banner img.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================
       DESIGN ELEMENTS
       ======================================== */

@keyframes ukFloat {
  0%,
  100% {
    transform: var(--uk-banner-decor-transform) translateY(0);
  }
  50% {
    transform: var(--uk-banner-decor-transform) translateY(-20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .uk-banner .design-container .design-element,
  .custom-banner .design-container .design-element {
    animation: none;
  }
}

.uk-banner .design-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--uk-banner-z-decor-desktop);
  overflow: hidden;
}

.uk-banner .design-container .design-element,
.custom-banner .design-container .design-element {
  position: absolute;
  pointer-events: none;
  top: var(--uk-banner-decor-top);
  right: var(--uk-banner-decor-right);
  left: var(--uk-banner-decor-left);
  transform: var(--uk-banner-decor-transform);
  z-index: var(--uk-banner-z-decor-desktop);
  animation: ukFloat 4s ease-in-out infinite;
}

.uk-banner .design-element img {
  max-width: 200px;
  height: auto;
  transform: rotate(180deg);
}

/* ========================================
       BACKGROUND IMAGE STYLES
       ======================================== */

.uk-banner[style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.uk-banner[style*="background-image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--uk-banner-color-overlay);
  z-index: 1;
}

.uk-banner[style*="background-image"] .container,
.uk-banner[style*="background-image"] .container-fluid {
  z-index: 2;
  position: relative;
}

/* ========================================
       BUTTON STYLES
       ======================================== */

.uk-banner .btn-container {
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
}

.uk-banner .btn-container + .btn-container {
  margin-left: 1rem;
}

/* ========================================
       TRANSPARENT BANNER - STARFIELD DECORATIONS
       ======================================== */

.uk-banner-transparent {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
}

.uk-banner-transparent .banner-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.uk-banner-transparent .banner-decor .decor-item {
  position: absolute;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}

.uk-banner-transparent .banner-decor .decor-item img {
  width: 100%;
  height: 100%;
  display: block;
}

.uk-banner-transparent .banner-decor .decor-item.type-star {
  background-image: url("/wp-content/uploads/star-default.png");
}

.uk-banner-transparent .banner-decor .decor-item.type-sparkle {
  background-image: url("/wp-content/uploads/sparkle-default.png");
}

.uk-banner-transparent .banner-decor .decor-item.size-sm {
  width: 5px;
  height: 5px;
}

.uk-banner-transparent .banner-decor .decor-item.size-md {
  width: 20px;
  height: 20px;
}

.uk-banner-transparent .banner-decor .decor-item.size-lg {
  width: 65px;
  height: 65px;
}

.uk-banner-transparent .banner-decor .decor-item.size-xl {
  width: 90px;
  height: 90px;
}

.uk-banner-transparent .banner-decor .decor-item.layer-back {
  z-index: 1;
}

.uk-banner-transparent .banner-decor .decor-item.layer-front {
  z-index: 3;
}

@keyframes ukTwinkle {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.85);
    opacity: 0.65;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uk-banner-transparent .banner-decor .decor-item.twinkle {
    animation: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .uk-banner-transparent .banner-decor .decor-item.twinkle {
    animation: ukTwinkle 2.4s ease-in-out infinite;
  }
}

/* ========================================
       TRANSPARENT BANNER - HERO SECTION
       ======================================== */

.uk-banner-transparent .transparent-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--uk-banner-color-primary);
  margin: auto 20rem;
}

.uk-banner-transparent .transparent-hero.btn-center .btn-group {
  display: flex;
  justify-content: center;
  width: 100%;
}

.uk-banner-transparent .transparent-hero.btn-center .btn-container {
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
       CARD LONG LAYOUT
       ======================================== */

.uk-banner-card .card-long-layout {
  min-height: 280px;
  display: block;
  padding: var(--uk-banner-padding-card-long);
  background: #ffffff;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  border: none;
  clip-path: polygon(
    0 var(--uk-banner-clip-corner-lg),
    5px var(--uk-banner-clip-corner-lg),
    5px 5px,
    var(--uk-banner-clip-corner-lg) 5px,
    var(--uk-banner-clip-corner-lg) 0,
    calc(100% - var(--uk-banner-clip-corner-lg)) 0,
    calc(100% - var(--uk-banner-clip-corner-lg)) 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) var(--uk-banner-clip-corner-lg),
    100% var(--uk-banner-clip-corner-lg),
    100% calc(100% - var(--uk-banner-clip-corner-lg)),
    calc(100% - 5px) calc(100% - var(--uk-banner-clip-corner-lg)),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - var(--uk-banner-clip-corner-lg)) calc(100% - 5px),
    calc(100% - var(--uk-banner-clip-corner-lg)) 100%,
    var(--uk-banner-clip-corner-lg) 100%,
    var(--uk-banner-clip-corner-lg) calc(100% - 5px),
    5px calc(100% - 5px),
    5px calc(100% - var(--uk-banner-clip-corner-lg)),
    0 calc(100% - var(--uk-banner-clip-corner-lg))
  );
}

.uk-banner-card .card-long-layout .row {
  gap: 0;
  column-gap: 0;
  align-items: center;
  flex-wrap: nowrap;
  --bs-gutter-x: 0;
}

.uk-banner-card .card-long-layout .btn-group {
  display: flex;
}

.uk-banner-card .card-long-layout.btn-right .btn-group {
  justify-content: flex-end;
  width: 100%;
}

.uk-banner-card .card-long-layout.btn-left .btn-group {
  justify-content: flex-start;
}

.uk-banner-card .card-long-layout.btn-right .btn-container {
  margin-right: 0;
}

.uk-banner-card .card-long-layout::before {
  content: "";
  position: absolute;
  inset: -6px;
  background: var(--uk-banner-color-dark);
  clip-path: polygon(
    0 var(--uk-banner-clip-corner-lg),
    5px var(--uk-banner-clip-corner-lg),
    5px 5px,
    var(--uk-banner-clip-corner-lg) 5px,
    var(--uk-banner-clip-corner-lg) 0,
    calc(100% - var(--uk-banner-clip-corner-lg)) 0,
    calc(100% - var(--uk-banner-clip-corner-lg)) 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) var(--uk-banner-clip-corner-lg),
    100% var(--uk-banner-clip-corner-lg),
    100% calc(100% - var(--uk-banner-clip-corner-lg)),
    calc(100% - 5px) calc(100% - var(--uk-banner-clip-corner-lg)),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - var(--uk-banner-clip-corner-lg)) calc(100% - 5px),
    calc(100% - var(--uk-banner-clip-corner-lg)) 100%,
    var(--uk-banner-clip-corner-lg) 100%,
    var(--uk-banner-clip-corner-lg) calc(100% - 5px),
    5px calc(100% - 5px),
    5px calc(100% - var(--uk-banner-clip-corner-lg)),
    0 calc(100% - var(--uk-banner-clip-corner-lg))
  );
  pointer-events: none;
  z-index: -1;
}

.uk-banner-card .card-long-layout::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--card-long-bg, #fff);
  border: 6px solid var(--uk-banner-color-accent);
  border-top: 6px solid var(--uk-banner-color-accent-light);
  clip-path: polygon(
    0 var(--uk-banner-clip-corner-md),
    2px var(--uk-banner-clip-corner-md),
    2px 2px,
    var(--uk-banner-clip-corner-md) 2px,
    var(--uk-banner-clip-corner-md) 0,
    calc(100% - var(--uk-banner-clip-corner-md)) 0,
    calc(100% - var(--uk-banner-clip-corner-md)) 2px,
    calc(100% - 2px) 2px,
    calc(100% - 2px) var(--uk-banner-clip-corner-md),
    100% var(--uk-banner-clip-corner-md),
    100% calc(100% - var(--uk-banner-clip-corner-md)),
    calc(100% - 2px) calc(100% - var(--uk-banner-clip-corner-md)),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - var(--uk-banner-clip-corner-md)) calc(100% - 2px),
    calc(100% - var(--uk-banner-clip-corner-md)) 100%,
    var(--uk-banner-clip-corner-md) 100%,
    var(--uk-banner-clip-corner-md) calc(100% - 2px),
    2px calc(100% - 2px),
    2px calc(100% - var(--uk-banner-clip-corner-md)),
    0 calc(100% - var(--uk-banner-clip-corner-md))
  );
  pointer-events: none;
  z-index: -1;
}

/* ========================================
       CARD HERO LAYOUT
       ======================================== */

.uk-banner-card .card-hero {
  background: #ffffff;
  border-radius: 0;
  position: relative;
}

.uk-banner-card .card-hero::after {
  content: "";
  position: absolute;
  left: var(--drop-left);
  right: var(--drop-right);
  bottom: var(--drop-bottom);
  top: var(--drop-top);
  background: var(--card-drop-color, var(--uk-banner-color-drop));
  border-radius: 0;
  z-index: -1;
}

.uk-banner-card .card-hero-inner {
  display: grid;
  grid-template-columns: 1fr var(--figure-max);
  gap: 1rem;
  align-items: stretch;
}

.uk-banner-card .card-hero.size-long .card-hero-inner {
  padding: 4rem;
}

.uk-banner-card .card-hero-inner.img-left .card-hero-figure {
  order: -1;
}

.uk-banner-card .card-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.uk-banner-card .card-hero-content .card-hero {
  max-width: var(--card-max);
  width: 100%;
  margin: 0 auto;
}

.uk-banner-card .card-hero.size-short {
  --card-max: 900px;
}

.uk-banner-card .card-hero.size-short .card-hero-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 4rem 0 0 4rem;
}

.uk-banner-card .card-hero.size-short .card-hero-figure {
  display: flex;
  align-items: flex-end;
}

.uk-banner-card .card-hero.size-short .card-hero-figure img {
  width: 200px;
  height: 430px;
}

.uk-banner-card .card-hero.size-long .card-hero-cta .btn-group,
.uk-banner-card.long-card .card-hero .card-hero-cta .btn-group {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.uk-banner-card .card-hero.size-long .card-hero-figure img,
.uk-banner-card.long-card .card-hero .card-hero-figure img {
  transform: rotate(180deg);
}

/* ========================================
       CTA BANNER - IMAGE SHADOW
       ======================================== */

.uk-banner-cta .cta-content-wrapper {
  position: relative;
}

.uk-banner-cta .cta-flex .cta-col-right img {
  box-shadow: 17px -16px 0 0 var(--uk-banner-image-shadow-color, var(--uk-banner-color-primary));
}

.uk-banner-cta .cta-long-layout {
  padding: var(--uk-banner-padding);
}

/* ========================================
       RESPONSIVE BREAKPOINTS
       ======================================== */

/* Mobile (below 48em / 768px) */
@media (max-width: 48em) {
  /* Card layout mobile */
  .uk-banner-card .card-long-layout {
    padding: var(--uk-banner-padding-card-long);
  }

  .uk-banner-card .card-long-layout .row {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .uk-banner-card .card-hero {
    padding: 1.25rem;
  }

  .uk-banner-card .card-hero-inner {
    grid-template-columns: 1fr;
  }

  .uk-banner-card .card-hero-inner .card-hero-figure {
    order: -1;
  }

  .uk-banner-card .card-hero.size-short .card-hero-text {
    padding: 0;
  }

  .uk-banner-card .card-hero.size-short .card-hero-cta .btn-group {
    width: 100%;
    justify-content: flex-start;
  }

  .uk-banner-card .card-hero-figure img,
  .uk-banner-card .card-hero.size-short .card-hero-figure img {
    max-width: 100% !important;
    height: auto !important;
  }

  .uk-banner-card .card-hero-cta .btn-group {
    margin-top: 0.75rem;
  }

  .uk-banner .card-hero-row {
    flex-direction: column;
    gap: 1rem;
  }

  .uk-banner .card-hero-row img.img-fluid {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .uk-banner .card-hero-row > .card-hero-image {
    order: -1;
    text-align: center;
  }

  /* Button layout mobile */
  .uk-banner .btn-group {
    justify-content: flex-start !important;
    width: 100%;
  }

  /* CTA layout mobile */
  .uk-banner-cta .cta-flex .row,
  .uk-banner-cta .cta-long-layout .row {
    flex-direction: column;
    gap: 1.25rem;
  }

  .uk-banner-cta .cta-flex .cta-col-right {
    order: -1;
  }

  .uk-banner-cta .cta-flex .cta-col-left {
    order: 0;
  }

  /* Transparent banner mobile */
  .uk-banner-transparent .transparent-hero {
    min-height: auto;
    margin: 0 1rem;
    padding: 3rem 1rem;
  }

  .uk-banner .design-element,
  .custom-banner .design-element {
    display: block !important;
    z-index: var(--uk-banner-z-decor-mobile);
  }

  .custom-banner .card-hero-row,
  .custom-banner > .container > .row {
    flex-direction: column !important;
  }
}

/* Tablet (48em to 75em / 768px to 1200px) */
@media (min-width: 48em) and (max-width: 75em) {
  :root {
    --uk-banner-padding: 3rem 2rem;
    --uk-banner-padding-card-long: 6rem 4rem;
  }

  /* Card long layout grid */
  .uk-banner-card .card-long-layout .row {
    display: flex;
    align-items: start;
    gap: 0;
  }

  .uk-banner-card .card-long-layout .btn-group {
    align-self: flex-end;
  }

  .uk-banner-card .card-long-layout .card-col-left,
  .uk-banner-card .card-long-layout .card-col-right {
    flex: 1;
  }

  /* CTA long layout grid */
  .uk-banner-cta .cta-long-layout .row {
    display: flex;
    align-items: start;
    gap: 0;
  }

  .uk-banner-cta .cta-long-layout .cta-col-left {
    flex: 1;
  }

  .uk-banner-cta .cta-long-layout .cta-col-right {
    flex: 1;
  }

  /* CTA flex layout tablet */
  .uk-banner-cta .cta-flex .cta-col-right {
    order: -1;
  }

  .uk-banner-cta .cta-flex .cta-col-left {
    order: 0;
  }

  /* CTA banner design element */
  .uk-banner-cta .design-element,
  .custom-banner.uk-banner-cta .design-element {
    display: block !important;
    z-index: var(--uk-banner-z-decor-mobile);
    --uk-banner-decor-top: -240px;
    --uk-banner-decor-right: auto;
    --uk-banner-decor-left: 50%;
    --uk-banner-decor-transform: translateX(-50%);
  }
  .uk-banner-card.long-card .design-element {
    --uk-banner-decor-top: -240px;
    --uk-banner-decor-left: 50%;
  }

  .uk-banner-transparent {
    padding-left: 0;
    padding-right: 0;
  }

  .uk-banner-transparent .transparent-hero {
    margin: auto 0;
  }

  .uk-banner-transparent .container,
  .uk-banner-transparent .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

  .uk-banner-transparent .transparent-hero h1,
  .uk-banner-transparent .transparent-hero h2,
  .uk-banner-transparent .transparent-hero h3 {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Desktop (75em and up / 1200px and up) */
@media (min-width: 75em) {
  :root {
    --uk-banner-padding: 4rem 6rem;
    --uk-banner-padding-card-long: 6rem 8rem;
    --uk-banner-decor-top: -140px;
    --uk-banner-decor-right: 190px;
    --uk-banner-decor-left: auto;
    --uk-banner-decor-transform: translateX(-50%);
  }

  /* Widen long card container on desktop */
  .uk-banner-card > .container {
    max-width: none;
    width: 100%;
  }

  .uk-banner-card .card-long-layout {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Compact CTA on desktop */
  .uk-banner-cta.cta-compact {
    --uk-banner-padding: 2rem 3rem;
  }
  .uk-banner .btn-group,
  .uk-banner .cta-col-right,
  .uk-banner .cta-col-left,
  .uk-banner .card-col-right,
  .uk-banner .card-col-left {
    position: relative;
  }

  .uk-banner-cta .btn-group,
  .uk-banner-card.long-card .btn-group {
    margin-top: 20px;
  }

  /* Card long layout grid */
  .uk-banner-card .card-long-layout .row {
    display: flex;
    align-items: start;
  }

  .uk-banner-card .card-long-layout .card-col-left {
    flex: 2;
  }

  .uk-banner-card .card-long-layout .card-col-right {
    flex: 1;
  }

  .uk-banner-card .card-long-layout .btn-group {
    display: flex;
    align-self: flex-end;
  }

  /* CTA flex layout */
  .uk-banner-cta .cta-flex .row,
  .uk-banner-cta .cta-long-layout .row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    column-gap: 4rem;
  }

  .custom-banner .cta-flex .row {
    grid-template-columns: 1fr 1fr;
  }

  .custom-banner.image-left .cta-flex .row {
    grid-template-areas: "image text";
  }

  .cta-flex.img-left .row {
    flex-direction: row-reverse;
  }

  .cta-flex.img-right .row {
    flex-direction: row;
  }

  .uk-banner-cta .cta-flex .cta-col-left,
  .uk-banner-cta .cta-flex .cta-col-right,
  .uk-banner-cta .cta-long-layout .cta-col-left,
  .uk-banner-cta .cta-long-layout .cta-col-right {
    flex: 1 1;
  }

  /* CTA long layout (no image): use 2/1 split on desktop */
  .uk-banner-cta .cta-long-layout .cta-col-left {
    flex: 3;
  }

  .uk-banner-cta .cta-long-layout .cta-col-right {
    flex: 1;
  }

  .uk-banner-cta .cta-flex .cta-col-right img {
    display: block;
    width: 100%;
    height: auto;
  }

  .uk-banner-cta .cta-flex .cta-col-left .btn-group,
  .uk-banner-cta .cta-long-layout .cta-col-left .btn-group {
    justify-content: flex-start;
  }

  /* Image positioning */
  .custom-banner.image-left .card-hero-row,
  .custom-banner.image-left > .container > .row {
    flex-direction: row-reverse !important;
  }

  .custom-banner.image-right .card-hero-row,
  .custom-banner.image-right > .container > .row {
    flex-direction: row !important;
  }

  .uk-banner-cta .design-element,
  .custom-banner.uk-banner-cta .design-element {
    --uk-banner-decor-top: -200px;
    --uk-banner-decor-left: 75%;
  }
  .uk-banner-card.long-card .design-element {
    --uk-banner-decor-top: -200px;
    --uk-banner-decor-left: 75%;
  }

  /* Limit CTA inner width on desktop */
  .uk-banner-cta .cta-content-wrapper {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========================================
       ACCESSIBILITY ENHANCEMENTS
       ======================================== */

/* Accessibility: Screen reader only class */
.uk-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: Focus states for interactive elements */
.uk-banner .btn:focus-visible,
.uk-banner a:focus-visible {
  outline: 3px solid #ffdc00; /* High contrast yellow */
  outline-offset: 2px;
  box-shadow:
    0 0 0 3px rgba(255, 220, 0, 0.5),
    0 0 0 5px rgba(0, 51, 160, 0.3); /* Blue shadow for depth */
}
.uk-banner .btn:focus:not(:focus-visible),
.uk-banner a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Accessibility: Reduced motion support (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .uk-banner .design-container .design-element,
  .custom-banner .design-container .design-element,
  .uk-banner-transparent .banner-decor .decor-item {
    animation: none !important;
    transition: none !important;
  }

  .uk-banner-transparent .banner-decor .decor-item.twinkle {
    animation: none !important;
  }
}

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

  .uk-banner h1,
  .uk-banner h2,
  .uk-banner h3,
  .uk-banner h4,
  .uk-banner h5,
  .uk-banner h6 {
    color: CanvasText !important;
  }

  .uk-banner .banner-content,
  .uk-banner .card-hero-text,
  .uk-banner .cta-description {
    color: CanvasText !important;
  }

  .uk-banner .btn {
    border: 2px solid ButtonText !important;
    color: ButtonText !important;
    background: ButtonFace !important;
    box-shadow: none !important;
  }

  .uk-banner .btn:focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }

  .uk-banner-card .card-hero::after {
    background-color: CanvasText !important;
  }

  .uk-banner-card .card-long-layout::before {
    background-color: CanvasText !important;
  }

  .uk-banner img {
    border: 2px solid CanvasText;
  }
}
/* ========================================
   SPOTLIGHT BANNER VARIANT
   ======================================== */

.uk-banner-spotlight {
  padding: 4rem 0;
}

.uk-banner-spotlight .spotlight-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding: 10px; /* Space for the border offset */
}

/* Timeline Card Border Style */
.spotlight-card {
  position: relative;
  background: #fff;
  padding: 3rem 4rem;
  z-index: 1;
}

/* Blue outer border using clip-path */
.spotlight-card::before {
  content: "";
  position: absolute;
  inset: -4px;
  background: #1e8aff;
  clip-path: polygon(
    0 10px,
    5px 10px,
    5px 5px,
    10px 5px,
    10px 0,
    calc(100% - 10px) 0,
    calc(100% - 10px) 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) 10px,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 5px) calc(100% - 10px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 10px) calc(100% - 5px),
    calc(100% - 10px) 100%,
    10px 100%,
    10px calc(100% - 5px),
    5px calc(100% - 5px),
    5px calc(100% - 10px),
    0 calc(100% - 10px)
  );
  z-index: -2;
}

/* White inner background using clip-path to match border shape */
.spotlight-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(
    0 10px,
    5px 10px,
    5px 5px,
    10px 5px,
    10px 0,
    calc(100% - 10px) 0,
    calc(100% - 10px) 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) 10px,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 5px) calc(100% - 10px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 10px) calc(100% - 5px),
    calc(100% - 10px) 100%,
    10px 100%,
    10px calc(100% - 5px),
    5px calc(100% - 5px),
    5px calc(100% - 10px),
    0 calc(100% - 10px)
  );
  z-index: -1;
}

/* Image Styles with Teal Offset Background */
.spotlight-image-container {
  position: relative;
  padding-bottom: 20px;
  padding-left: 20px;
}

.spotlight-image-container::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  right: 20px; /* Offset from right */
  bottom: 0;
  background-color: #4cbcc0; /* Teal color */
  z-index: 0;
}

.spotlight-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: none !important; /* Override high contrast border if needed */
}

/* Content Styles */
.spotlight-content {
  text-align: left;
}

.spotlight-label {
  font-family: "Usual", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--uk-banner-color-primary);
  margin-bottom: 0.5rem;
}

/* Title Styling */
.spotlight-content h1,
.spotlight-content h2,
.spotlight-content h3 {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  color: var(--uk-banner-color-primary);
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Add star icon before title if needed via CSS or leave to HTML structure if icon is separate. 
   Based on image, the star seems decorative. */

.spotlight-content p {
  font-size: 1.125rem;
  line-height: 1.5;
  color: #1b365d;
  margin-bottom: 1.5rem;
}

/* Button Group Alignment */
.spotlight-content .btn-group {
  justify-content: flex-start;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .spotlight-card {
    padding: 2rem;
  }

  .spotlight-image-container {
    margin-bottom: 2rem;
    padding-left: 10px;
  }

  .spotlight-image-container::before {
    top: 10px;
    right: 10px;
  }

  .spotlight-content h1,
  .spotlight-content h2,
  .spotlight-content h3 {
    font-size: 2.5rem;
  }
}