/* CodePen Horizontal Accordion Styles - Adapted for WordPress */
/* Original by Daniel Wakefield - https://codepen.io/flashvenom/pen/bGbwawQ */

/*reset start */
.uk-horizontal-accordion-block {
  box-sizing: border-box;
}

.uk-horizontal-accordion-block *,
.uk-horizontal-accordion-block *::before,
.uk-horizontal-accordion-block *::after {
  box-sizing: inherit;
}

/* Accessibility: Remove default outline removal, but keep for non-interactive elements */
.uk-horizontal-accordion-block input:focus,
.uk-horizontal-accordion-block textarea:focus {
  outline: 2px solid #0033A0;
  outline-offset: 2px;
}

/* Links and buttons get focus styles defined elsewhere */

.uk-horizontal-accordion-block h1,
.uk-horizontal-accordion-block h2,
.uk-horizontal-accordion-block h3,
.uk-horizontal-accordion-block h4,
.uk-horizontal-accordion-block h5,
.uk-horizontal-accordion-block h6,
.uk-horizontal-accordion-block ul,
.uk-horizontal-accordion-block li,
.uk-horizontal-accordion-block p {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}

/*reset end */

/* Full width block wrapper - break out of main content container */
.uk-horizontal-accordion-block {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: 0;
  padding-right: 0;
}

/* Also handle WordPress alignment classes */
.wp-block-acf-uk-horizontal-accordion,
.alignfull .uk-horizontal-accordion-block,
.alignwide .uk-horizontal-accordion-block {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

.uk-horizontal-accordion-block .geAcc,
.uk-horizontal-accordion-block #geAcc,
.uk-horizontal-accordion-block [id^="geAcc-"] {
  list-style-type: none;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  width: 100%;
}

.uk-horizontal-accordion-block .geAcc__tile {
  background-attachment: fixed !important;
  overflow: hidden !important; /* Ensure content is clipped to prevent spillover */
  position: relative;
  transition: none; /* Removed width expansion animation - tiles change size instantly */
  width: 100%;
  cursor: pointer;
  background-repeat: repeat;
  background-size: cover;
  background-position: 0 0;
  isolation: isolate; /* Create new stacking context to prevent z-index issues */
}

/* Accessibility: Screen reader only class */
.uk-horizontal-accordion-block .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: Button for keyboard navigation and screen readers */
.uk-horizontal-accordion-block .geAcc__tile__button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;
  /* Ensure sufficient touch target size (WCAG 2.5.5) */
  min-width: 44px;
  min-height: 44px;
}

/* When tile is active, lower z-index so content buttons are clickable */
.uk-horizontal-accordion-block .geAccT--active .geAcc__tile__button {
  z-index: 1;
}

.uk-horizontal-accordion-block .geAcc__tile__button:focus {
  outline: 3px solid #FFDC00;
  outline-offset: 2px;
  /* High contrast focus indicator (WCAG 2.4.7) */
  box-shadow: 0 0 0 3px rgba(255, 220, 0, 0.5), 0 0 0 5px rgba(0, 51, 160, 0.3);
}

.uk-horizontal-accordion-block .geAcc__tile__button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.uk-horizontal-accordion-block .geAcc__tile__button:focus-visible {
  outline: 3px solid #FFDC00;
  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);
}

/* Background Pattern Styles */
.uk-horizontal-accordion-block .geAcc__tile.bg-pattern-stars {
  background-image: url('../uk-tab-accordion/assets/pixel-overlay.png');
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
}

.uk-horizontal-accordion-block .geAcc__tile.bg-pattern-dashed {
  background-image: url('../uk-tab-accordion/assets/dash-1.png');
  background-repeat: repeat;
  background-size: 130%;
  background-position: 0 0;
  background-size: auto;
}

.uk-horizontal-accordion-block .geAcc__tile__content {
  height: 100%;
  left: 0;
  padding: 2em;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(100%); /* Slide out to the right when hidden */
  transition: transform 0.5s ease, opacity 0.5s ease;
  pointer-events: none; /* Prevent interaction when hidden */
  visibility: hidden; /* Completely hide content on inactive tiles */
}

.uk-horizontal-accordion-block .geAcc__tile__content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2em;
  opacity: 0;
  transition: opacity 1s ease; /* Slow fade-in transition */
}

.uk-horizontal-accordion-block .geAcc__tile__image {
  width: 100%;
  flex-shrink: 0;
  transition: none;
}

.uk-horizontal-accordion-block .geAcc__tile__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: none;
}

.uk-horizontal-accordion-block .geAcc__tile__text {
  width: 100%;
  flex: 1;
  transition: none;
}

.uk-horizontal-accordion-block .geAcc__tile__title {
  color: #1b365d;
  font-size: 3.5em;
  font-weight: 900;
  margin: 0 0 0.5em 0;
  text-transform: uppercase;
  line-height: 1.1;
  font-family: "alternate-gothic-atf", sans-serif;
  transition: none;
}

.uk-horizontal-accordion-block .geAcc__tile__excerpt {
  color: #1B365D;
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1.6em;
  width: 100%;
  transition: none;
}

.uk-horizontal-accordion-block .geAcc__tile__excerpt p {
  margin: 0 0 1em 0;
}

/* Button styles are inherited from uk-eight-bit-buttons block */
/* Ensure btn-container displays properly within accordion */
.uk-horizontal-accordion-block .geAcc__tile__text .btn-container {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin-top: 1em;
}

.uk-horizontal-accordion-block .geAcc__tile__bar {
  bottom: 0;
  display: block;
  left: 0;
  padding: 1em;
  position: absolute;
  z-index: 3;
  background: transparent;
}

.uk-horizontal-accordion-block .geAccT--active .geAcc__tile__bar {
  display: none;
}

.uk-horizontal-accordion-block .geAcc__tile__bar span {
  display: block;
  float: left;
  font-size: 50px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  text-transform: uppercase;
  font-family: "alternate-gothic-atf", sans-serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
  height: inherit;
  color: #1B365D; /* Default color, can be overridden by inline style */
}

/* Hide arrow icons on desktop (only show on mobile) */
.uk-horizontal-accordion-block .geAcc__tile__bar-arrow {
  display: none;
}


/* Mobile: Stack tiles vertically */
@media only screen and (max-width: 991px) {
  /* Container: Stack vertically instead of horizontal */
  .uk-horizontal-accordion-block .geAcc,
  .uk-horizontal-accordion-block #geAcc,
  .uk-horizontal-accordion-block [id^="geAcc-"] {
    display: block;
    float: none;
  }

  /* All tiles full width and stack vertically */
  .uk-horizontal-accordion-block .geAcc__tile {
    width: 100% !important;
    float: none;
    display: block;
    min-height: auto;
    height: auto;
  }

  /* Override all desktop width calculations on mobile */
  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__0,
  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__1,
  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__2,
  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__3,
  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__4,
  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__0,
  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__1,
  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__2,
  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__3,
  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__4,
  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__0,
  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__1,
  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__2,
  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__3,
  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__4,
  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__0,
  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__1,
  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__2,
  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__3,
  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__4,
  .uk-horizontal-accordion-block .geAccT--4--active .geAccT__0,
  .uk-horizontal-accordion-block .geAccT--4--active .geAccT__1,
  .uk-horizontal-accordion-block .geAccT--4--active .geAccT__2,
  .uk-horizontal-accordion-block .geAccT--4--active .geAccT__3,
  .uk-horizontal-accordion-block .geAccT--4--active .geAccT__4 {
    width: 100% !important;
  }

  /* Content: Stack image and text vertically */
  .uk-horizontal-accordion-block .geAcc__tile__content {
    position: relative;
    display: flex;
    height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transform: translateY(-100%); /* Slide out upward on mobile when hidden */
    transition: transform 0.5s ease, opacity 0.5s ease, height 0.5s ease, padding 0.5s ease;
    pointer-events: none;
  }

  .uk-horizontal-accordion-block .geAcc__tile__content {
    visibility: hidden; /* Completely hide content on inactive tiles (mobile) */
  }

  .uk-horizontal-accordion-block .geAccT--active .geAcc__tile__content {
    opacity: 1;
    transform: translateY(0); /* Slide in from top on mobile when active */
    height: auto;
    padding: 1.5em;
    pointer-events: auto;
    visibility: visible; /* Show content on active tiles (mobile) */
    z-index: 11; /* Above button overlay when active */
  }

  .uk-horizontal-accordion-block .geAcc__tile__content-wrapper {
    flex-direction: column;
    gap: 1.5em;
    opacity: 0;
    transition: opacity 1s ease; /* Slow fade-in transition on mobile */
  }

  .uk-horizontal-accordion-block .geAccT--active .geAcc__tile__content-wrapper {
    opacity: 1; /* Fade in the content wrapper when active on mobile */
  }

  .uk-horizontal-accordion-block .geAcc__tile__image {
    width: 100%;
  }

  .uk-horizontal-accordion-block .geAcc__tile__text {
    width: 100%;
  }

  /* Bar: Horizontal text on mobile, positioned at top */
  .uk-horizontal-accordion-block .geAcc__tile {
    display: flex;
    flex-direction: column;
  }

  .uk-horizontal-accordion-block .geAcc__tile__bar {
    position: relative;
    top: 0;
    bottom: auto;
    height: auto;
    padding: 1em;
    order: -1; /* Move bar above content on mobile */
  }

  .uk-horizontal-accordion-block .geAcc__tile__content {
    order: 0; /* Content comes after bar */
  }

  .uk-horizontal-accordion-block .geAcc__tile__bar span {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transform: none;
    white-space: normal;
    font-size: 2em;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 1em;
  }

  /* Arrow icons on mobile - positioned far right */
  .uk-horizontal-accordion-block .geAcc__tile__bar-arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: auto; /* Push arrows to far right */
  }

  /* Show down arrow when inactive, hide up arrow */
  .uk-horizontal-accordion-block .geAcc__tile__bar-arrow-down {
    display: block;
  }

  .uk-horizontal-accordion-block .geAcc__tile__bar-arrow-up {
    display: none;
  }

  /* Show up arrow when active, hide down arrow */
  .uk-horizontal-accordion-block .geAccT--active .geAcc__tile__bar-arrow-down {
    display: none;
  }

  .uk-horizontal-accordion-block .geAccT--active .geAcc__tile__bar-arrow-up {
    display: block;
  }

  /* Show bar on all tiles (including active) on mobile */
  .uk-horizontal-accordion-block .geAccT--active .geAcc__tile__bar {
    display: block;
  }

  /* Hide placeholder image on mobile */
  .uk-horizontal-accordion-block .geAcc__tile img[src^="data:image/png;base64"] {
    display: none;
    visibility: hidden;
  }
}


/* Desktop: 992px and above - same styles as 1280px+ */
@media only screen and (min-width: 992px) {
  .uk-horizontal-accordion-block .geAcc,
  .uk-horizontal-accordion-block #geAcc,
  .uk-horizontal-accordion-block [id^="geAcc-"] {
    display: flex;
    float: none;
    min-height: 550px;
  }

  .uk-horizontal-accordion-block .geAcc__tile {
    background-attachment: inherit !important;
    width: 16.6666666%;
  }

  /* Ensure patterns work correctly on desktop */
  .uk-horizontal-accordion-block .geAcc__tile.bg-pattern-stars {
    background-attachment: inherit !important;
  }

  .uk-horizontal-accordion-block .geAcc__tile.bg-pattern-dashed {
    background-attachment: inherit !important;
  }

  .uk-horizontal-accordion-block .geAcc__tile__bar {
    height: 100%;
  }

  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__0 {
    width: 100%;
  }

  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__1 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__2 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__3 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__0 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__1 {
    width: 100%;
  }

  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__2 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__3 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__0 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__1 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__2 {
    width: 100%;
  }

  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__3 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__0 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__1 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__2 {
    width: 16.66667%;
  }

  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__3 {
    width: 100%;
  }

  /* Support for 5 tabs */
  .uk-horizontal-accordion-block .geAccT--4--active .geAccT__0,
  .uk-horizontal-accordion-block .geAccT--4--active .geAccT__1,
  .uk-horizontal-accordion-block .geAccT--4--active .geAccT__2,
  .uk-horizontal-accordion-block .geAccT--4--active .geAccT__3 {
    width: 12.5%;
  }

  .uk-horizontal-accordion-block .geAccT--4--active .geAccT__4 {
    width: 100%;
  }

  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__1,
  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__2,
  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__3,
  .uk-horizontal-accordion-block .geAccT--0--active .geAccT__4 {
    width: 12.5%;
  }

  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__0,
  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__2,
  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__3,
  .uk-horizontal-accordion-block .geAccT--1--active .geAccT__4 {
    width: 12.5%;
  }

  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__0,
  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__1,
  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__3,
  .uk-horizontal-accordion-block .geAccT--2--active .geAccT__4 {
     width: 12.5%;
  }

  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__0,
  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__1,
  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__2,
  .uk-horizontal-accordion-block .geAccT--3--active .geAccT__4 {
    width: 12.5%;
  }

  .uk-horizontal-accordion-block .geAcc__tile img {
    width: 100%;
  }

  .uk-horizontal-accordion-block .geAcc__tile__content {
    width: 100%;
    max-width: 1440px;
  }

  .uk-horizontal-accordion-block .geAccT--active .geAcc__tile__content {
    opacity: 1;
    transform: translateX(0); /* Slide in from right when active */
    pointer-events: auto; /* Enable interaction when visible */
    visibility: visible; /* Show content on active tiles */
    z-index: 11; /* Above button overlay when active */
  }

  .uk-horizontal-accordion-block .geAccT--active .geAcc__tile__content-wrapper {
    opacity: 1; /* Fade in the content wrapper when active */
  }

  /* Desktop: Side-by-side layout (image left, content right) */
  .uk-horizontal-accordion-block .geAcc__tile__content-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 4em;
    width: 100%;
  }

  .uk-horizontal-accordion-block .geAcc__tile__image {
    width: 50%;
    flex-shrink: 0;
  }

  .uk-horizontal-accordion-block .geAcc__tile__text {
    width: 50%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }


  .uk-horizontal-accordion-block .geAcc__tile__bar span {
    line-height: normal;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
  }
}

/* Reduced motion support (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .uk-horizontal-accordion-block .geAcc__tile__content,
  .uk-horizontal-accordion-block .geAcc__tile__content-wrapper {
    transition: none !important;
    animation: none !important;
  }
  
  .uk-horizontal-accordion-block .geAcc__tile {
    transition: none !important;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support (WCAG 1.4.11) */
@media (prefers-contrast: high) {
  .uk-horizontal-accordion-block .geAcc__tile__button:focus {
    outline: 3px solid;
    outline-offset: 3px;
    border: 2px solid;
  }
  
  .uk-horizontal-accordion-block .geAcc__tile__title,
  .uk-horizontal-accordion-block .geAcc__tile__excerpt {
    text-shadow: none;
  }
  
  .uk-horizontal-accordion-block .geAcc__tile__bar {
    border: 1px solid currentColor;
  }
}