/*
 * Contrast and focus corrections for the captured theme. Two colours failed WCAG AA everywhere
 * they appeared: the current page's item in the navigation (#29a9e1 on white, 2.7:1) and the
 * link lists in the footer and the mega menu (#5e6e82 on #edeef0, a hair under 4.5:1). Both are
 * darkened by the smallest amount that clears the threshold, so the palette still reads as
 * SwimTec's.
 *
 * Elementor writes a rule per element — `.elementor-6568 .elementor-element-2b1f0a4 a { color }`
 * — so no selector written by hand outranks it and `!important` is the override layer rather
 * than a shortcut. Kept to the two declarations that need it.
 */
.elementor-nav-menu .elementor-item-active,
.elementor-nav-menu a.elementor-item-active,
.elementor-nav-menu .current-menu-item > .elementor-item {
  color: #0b6f9e !important;
}

/* …except in the account bar above the navigation, which is dark blue: there the brand's own
   #29a9e1 already reads at 6.7:1 and the darker blue would not. */
.elementor-element-3c722270 .elementor-nav-menu .elementor-item-active {
  color: #29a9e1 !important;
}

.elementor-icon-list-item > a > .elementor-icon-list-text,
.elementor-icon-list-item > a:hover > .elementor-icon-list-text {
  color: #222c3a !important;
}

/* The footer sits on pale grey on most pages and on a mid blue on the Orlando ones, where the
   same text drops to 2.1:1. One colour has to clear 4.5:1 against both, so the footer's own type
   goes darker than the menus': 5.0:1 on the blue panel, 12:1 on the grey. */
footer a,
footer .elementor-heading-title,
[style*="color: #4b5e78"],
[style*="color:#4b5e78"],
[style*="color: #4b5e78"] a,
[style*="color:#4b5e78"] a {
  color: #222c3a !important;
}

/* The skip link has somewhere to land now; give the landing a visible focus ring, and never an
   outline-less one, for everything a keyboard can reach. */
main:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #0b6f9e;
  outline-offset: 2px;
}

/* The blog cards: the excerpt was #777 on white (4.5:1 short by a whisker) and the date #adadad
   (2.2:1). Both take the smallest step that clears the threshold. */
.elementor-post__excerpt p {
  color: #6f6f6f !important;
}

.elementor-post-date,
.elementor-post__meta-data {
  color: #767676 !important;
}

/* The contact form's own submit button is white on the brand's light blue, 3.0:1. Every other
   button on the site is the darker blue already. */
.gform_button,
.gform_wrapper .gform_footer input[type="submit"] {
  background-color: #0b6f9e !important;
}

/* The photo galleries.

   Elementor ships each tile as an empty div and lets its own script paint the picture on and lay
   the grid out. That script is not in the capture (scripts/transform.mjs turns the tiles into real
   images), so the grid has to be here too, or four photographs stack down the left-hand side of
   the page at full width with half the row empty beside them. */
.elementor-gallery__container {
  display: grid;
  /* 10rem, not 15: these galleries sit in a half-width column beside a video, so a 15rem minimum
     resolved to a single column and stacked four photographs down one side of the page. */
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .75rem;
  width: 100%;
}
.elementor-gallery__container .e-gallery-item {
  display: block;
  overflow: hidden;
  border-radius: 4px;
}
.elementor-gallery__container img.e-gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .3s ease;
}
.elementor-gallery__container .e-gallery-item:hover img.e-gallery-image { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .elementor-gallery__container img.e-gallery-image { transition: none; }
  .elementor-gallery__container .e-gallery-item:hover img.e-gallery-image { transform: none; }
}

/* The videos, as a poster and a play button until somebody presses it (assets/video.js). The
   iframe that replaces this is built on click, so the page itself says nothing to YouTube. */
.swimtec-video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.swimtec-video img { display: block; width: 100%; height: auto; }
.swimtec-video__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 4.25rem;
  height: 3rem;
  border-radius: .75rem;
  background: rgba(18, 18, 18, .82);
  transition: background .2s ease;
}
.swimtec-video__play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: .5rem 0 .5rem .85rem;
  border-color: transparent transparent transparent #fff;
}
.swimtec-video:hover .swimtec-video__play,
.swimtec-video:focus-visible .swimtec-video__play { background: #cc0000; }
@media (prefers-reduced-motion: reduce) { .swimtec-video__play { transition: none; } }

/* The FAQ accordions.

   Elementor hides every answer with display:none and opens them from a script the capture does
   not have, so every answer was in the page and unreachable. The answers are visible by default
   now; assets/accordion.js collapses them only once it is running, which is the order that leaves
   a visitor without JavaScript reading the FAQ rather than staring at dead headings. */
.elementor-accordion .elementor-tab-content { display: block; }
.elementor-accordion .elementor-tab-content[hidden] { display: none; }
.elementor-accordion.swimtec-accordion .elementor-tab-title { cursor: pointer; }
.elementor-accordion.swimtec-accordion .elementor-tab-title:focus-visible { outline: 2px solid #3579b8; outline-offset: -2px; }

/* The image carousels.

   Elementor lays these out for Swiper: a flex row of full-width slides inside an overflow:hidden
   viewport, with Swiper translating the row to move between them. Swiper is not in the capture, so
   slide one sat in the window and every other slide was parked off-canvas for good - 36 of 43
   slides across the site - behind arrows that did nothing.

   Rather than ship a slider library to look at six photographs, the row becomes what it already
   almost is: a scroll-snapping strip. Every slide is reachable by swipe, trackpad, scrollbar and
   keyboard, which is more than the arrows managed, and assets/carousel.js wires the arrows that
   Elementor already drew to scroll it. */
.elementor-main-swiper .swiper-wrapper {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* Swiper wrote a width onto every slide from the widget's slides_per_view; scripts/transform.mjs
   passes that number down as a custom property so the slides sit three across as they do on the
   live site, rather than one photograph the width of the page. */
.elementor-main-swiper .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--swimtec-per-view, 3) - 1) * var(--swimtec-gap, 10px)) / var(--swimtec-per-view, 3));
}
.elementor-main-swiper .swiper-wrapper { gap: var(--swimtec-gap, 10px); }
@media (max-width: 1024px) { .elementor-main-swiper .swiper-wrapper > .swiper-slide { flex-basis: calc((100% - var(--swimtec-gap, 10px)) / 2); } }
@media (max-width: 767px) { .elementor-main-swiper .swiper-wrapper > .swiper-slide { flex-basis: 100%; } }
.elementor-main-swiper .elementor-swiper-button { cursor: pointer; z-index: 2; }
/* Swiper generates the bullets, so the capture holds an empty container. assets/carousel.js fills
   it with one button per slide and marks the current one; these are the styles Swiper would have
   brought with it. A strip with no indicator gives no sign there is more to the right. */
.elementor-main-swiper .swiper-pagination:empty { display: none; }
.elementor-main-swiper .swiper-pagination.swimtec-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 0;
  position: static;
}
.elementor-main-swiper .swiper-pagination.swimtec-dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Not currentColor: these rows sit in sections whose inherited text colour is white, left over
     from a dark background the capture flattened, so a currentColor dot is white on white. A fixed
     dark fill inside a pale halo reads on paper, on a photograph and on a dark panel alike. */
  background: rgba(17, 17, 17, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.elementor-main-swiper .swiper-pagination.swimtec-dots .swiper-pagination-bullet-active {
  background: rgba(17, 17, 17, 0.85);
}
.elementor-main-swiper .swiper-pagination.swimtec-dots .swiper-pagination-bullet:focus-visible {
  outline: 2px solid rgba(17, 17, 17, 0.85);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .elementor-main-swiper .swiper-wrapper { scroll-behavior: auto; }
  .elementor-main-swiper .swiper-pagination.swimtec-dots .swiper-pagination-bullet { transition: none; }
}

/* An image that has not loaded has no intrinsic width, and the link Elementor wraps it in is
   inline, so the link shrink-wraps to nothing and the reserved ratio has zero to work from. Live
   never hits this because it ships an SVG placeholder with the real dimensions. Making the link a
   block gives the image its column to size against, which is what the placeholder was providing. */
.elementor-widget-image .elementor-widget-container > a,
.elementor-widget-theme-post-featured-image .elementor-widget-container > a,
.elementor-post__thumbnail__link { display: block; }

/* Post thumbnails size themselves from their ratio box, not from the picture.
   `.elementor-post__thumbnail` is a padding-bottom ratio container with the image absolutely
   positioned inside it, so the space is already reserved and the image's only job is to fill it.
   The build's own reservation capped that image at the source file's width — 900px inside a 1120px
   card — which left a 220px white gap down the right of every card in the blog archive. Live fills
   the width; it has a different fault, about 625px of dead space below each image, because the rule
   positioning them absolutely never applies there at all. */
.elementor-post__thumbnail img { width: 100% !important; height: 100% !important; }