/*
 * The header, and the two other places the captured Elementor script used to do the work.
 *
 * The drop-downs first.
 *
 * Elementor draws the menu and then expects its own JavaScript to open anything: the sub-menus are
 * `display: none` with nothing to show them, and the mobile panel waits for a class its toggle
 * never gets. That script has not run on this site — nor on the WordPress original, where the same
 * bundle throws on parse — so the drop-downs have been dead for both. They are restored here in
 * CSS, which is where a hover menu belongs; assets/nav.js only handles the parts a pointer alone
 * cannot do, which is the phone.
 *
 * Then the account bar's booking button, and the crop on the blog cards — both added by
 * scripts/transform.mjs, and both at the end of this file.
 */

@media (min-width: 48rem) {
  .elementor-nav-menu--main .elementor-nav-menu > li,
  .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li {
    position: relative;
  }

  /* Anchored to the parent's trailing edge: the navigation sits on the right of the header, so a
     panel hung from the left of "Orlando Swim Lessons" ran off the window. */
  /* The class is written twice on purpose. Elementor positions these with
     `.elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:not(:first-child)>ul` and
     `!important`, so only a more specific selector can say where the panel actually goes. */
  .elementor-nav-menu--main .elementor-nav-menu.elementor-nav-menu ul.sub-menu {
    position: absolute;
    top: 100%;
    /* The theme sets the leading edge on these with `!important` (a rule meant for spacing the
       items in the bar), and with a width and both edges given the leading edge would win. */
    inset-inline-start: auto !important;
    left: auto !important;
    inset-inline-end: 0;
    z-index: 1000;
    display: none;
    /* As wide as its longest item, because the items are sentences — "Parent & Infant, Water
       Adjustment & Safety, Baby Swim Lessons" is one of them — and never wider than the window. */
    width: max-content;
    min-width: 15rem;
    max-width: min(28rem, 90vw);
    margin: 0;
    padding: 0.4rem 0;
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(13, 23, 42, 0.18);
    text-align: start;
    /* The theme leaves eight pixels between the item and its panel, and on a menu that wraps to
       two rows another link sits in that gap: the pointer crosses it on the way down, the item
       stops being hovered, and the panel shuts before anyone reaches it. The gap stays — as a
       transparent border, which belongs to the panel, so the pointer never leaves it. */
    border-top: 0.5rem solid transparent;
    background-clip: padding-box;
  }

  /* The margin that made the gap is set per element by Elementor, with `!important`, so this has
     to name more of the same element than that rule does to take it away. */
  .elementor-nav-menu--main .elementor-nav-menu.elementor-nav-menu li.menu-item-has-children > ul.sub-menu.elementor-nav-menu--dropdown {
    margin-top: 0 !important;
  }

  /* A sub-menu of a sub-menu opens beside its parent rather than under the bar. */
  .elementor-nav-menu--main .elementor-nav-menu.elementor-nav-menu ul.sub-menu ul.sub-menu {
    top: 0;
    inset-inline-start: auto !important;
    left: auto !important;
    inset-inline-end: 100%;
  }

  /* Hover for a mouse, focus-within for a keyboard: the same menu, opened either way. */
  .elementor-nav-menu--main .elementor-nav-menu.elementor-nav-menu li:hover > ul.sub-menu,
  .elementor-nav-menu--main .elementor-nav-menu.elementor-nav-menu li:focus-within > ul.sub-menu {
    display: block;
  }

  .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu .elementor-sub-item {
    display: block;
    padding: 0.55rem 1.1rem;
  }
}

/* On a phone the menu is a panel, so a sub-menu belongs underneath its parent, not floating over
   it, and it stays closed until the arrow beside the parent is tapped. */
.elementor-nav-menu--dropdown.elementor-nav-menu__container ul.sub-menu {
  display: none;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li.swimtec-open > ul.sub-menu {
  display: block;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li.swimtec-open > .elementor-item .sub-arrow i {
  transform: rotate(180deg);
}

/*
 * The account bar's "Book Now" button (transform.mjs: addBookingCta).
 *
 * Elementor stacks the widgets in a column, one per row, so the bar is told to lay its column out
 * as a row for the two things that now share it — the button and the account menu. Scoped by
 * `:has()` to the wrap that carries the button, so no other column on the site moves.
 */
.elementor-widget-wrap:has(> .swimtec-book-cta) {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
}

.elementor-widget-wrap:has(> .swimtec-book-cta) > .elementor-widget {
  width: auto;
}

.swimtec-book-cta {
  display: inline-block;
  flex: none;
  /* The brand's light blue reads at 6.4:1 against the bar's navy with near-black type on it, and
     is the one colour on the site that nothing else in the header uses. */
  background: #29a9e1;
  color: #0b2233;
  border-radius: 999px;
  padding: 0.42rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.swimtec-book-cta:hover,
.swimtec-book-cta:focus-visible {
  background: #4fc3f0;
  color: #0b2233;
  text-decoration: none;
}

/* The phone's copy, across the foot of the header: the bar that holds the other one is hidden at
   this width, and the row that replaces it has no room for a button. */
.swimtec-book-cta--mobile {
  display: none;
}

@media (max-width: 47.99rem) {
  .swimtec-book-cta--mobile {
    display: block;
    margin: 0;
    border-radius: 0;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    text-align: center;
  }
}

/*
 * The blog cards' crop (transform.mjs: restoreThumbnailRatio).
 *
 * The class the build adds is what makes the image absolute inside the box Elementor's stylesheet
 * reserves; this is what fills that box. Elementor's own script sizes the image by height or by
 * width depending on how the picture's proportions compare with the box's, and recomputes it on
 * resize because the box is 0.66 of its width on a desktop and 0.5 on a phone. `cover` is the same
 * result at any width, for any picture, with nothing running.
 */
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}