/* Small rules the remake needs to stand in for jQuery plugins. */

.lfp-root {
  display: contents;
}

/* Their wordmark logo, shown where the theme printed the site title as text */
.custom-logo-link .custom-logo {
  display: block;
  width: auto;
  height: 64px;
  margin: 8px 0;
}
@media (max-width: 767px) {
  .custom-logo-link .custom-logo {
    height: 50px;
    margin: 6px 0;
  }
}

/* Home video's "scroll down" cue. The original pinned it to the window (position: fixed; top: 800px),
   so it floated over the rest of the page. Here it sits near the bottom of the first screen of the
   video, scrolls away with it, bounces, and scrolls past the video when clicked (lfp.js). */
#block-19 > div {
  position: relative;
}
#block-19 #arrow {
  position: absolute;
  /* Near the bottom of the screen, but never over YouTube's centre play button (the video is 1000px tall). */
  top: clamp(548px, calc(100svh - 220px), 900px);
  bottom: auto;
  left: 50%;
  z-index: 2;
  width: auto;
  height: auto;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  transform: translateX(-50%);
  animation: lfp-arrow-bounce 2s ease-in-out infinite;
}
#block-19 #arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
@keyframes lfp-arrow-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, -14px); }
  60% { transform: translate(-50%, -7px); }
}
/* Below desktop width the video is 16:9 (or hidden), so the cue isn't needed. */
@media screen and (max-width: 991px) {
  #block-19 #arrow {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #block-19 #arrow {
    animation: none;
  }
}

/* Parallax bands (replaces parallax.js) */
.lfp-parallax {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.lfp-parallax > .lfp-parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
  pointer-events: none;
}
.lfp-parallax > :not(.lfp-parallax-layer) {
  position: relative;
  z-index: 1;
}

/* Envira gallery: the plugin faded the grid and each image in after load */
.envira-gallery-wrap .envira-gallery-public.envira-gallery-css-animations .envira-gallery-item img.lfp-loaded {
  opacity: 1;
}

/* Lightbox */
.lfp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
}
.lfp-lightbox.open {
  display: flex;
}
.lfp-lightbox figure {
  margin: 0;
  max-width: 90vw;
  text-align: center;
}
.lfp-lightbox img {
  max-width: 90vw;
  max-height: 84vh;
  border: 4px solid #fff;
  background: #fff;
}
.lfp-lightbox figcaption {
  color: #fff;
  font-size: 13px;
  margin-top: 8px;
}
.lfp-lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  font-size: 48px;
  line-height: 1;
  padding: 10px 16px;
  cursor: pointer;
  opacity: 0.8;
}
.lfp-lightbox button:hover,
.lfp-lightbox button:focus-visible {
  opacity: 1;
}
.lfp-lightbox .lfp-lb-close {
  top: 10px;
  right: 10px;
  font-size: 40px;
}
.lfp-lightbox .lfp-lb-prev {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.lfp-lightbox .lfp-lb-next {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.lfp-lightbox.single .lfp-lb-prev,
.lfp-lightbox.single .lfp-lb-next {
  display: none;
}
html.lfp-lb-lock {
  overflow: hidden;
}

/* The contact form's custom CSS set the whole page to Courier, so that page's footer didn't match the rest. */
.site-footer {
  font-family: Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Home: an empty quote block (no text) left a dark bar and a stray quotation mark. */
.wp-block-quote:has(> p:only-child:empty) {
  display: none;
}

/* Contact form preview note */
.lfp-form-note {
  margin-top: 12px;
  font-weight: bold;
}

/* ---- Below full desktop width: the original's layout tricks pushed content off narrower screens ---- */
@media (max-width: 1199px) {
  /* The footer credit was a fixed 1000px wide, and a site-wide .text-right rule shifted the social icons 600px left. */
  .site-footer .yellow {
    width: auto !important;
  }
  .text-right {
    margin-left: 0 !important;
  }
  /* The contact pages pulled a whole row 300px past the right edge. */
  #page .vc_row[class*="vc_custom_"] {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}

/* ---- Phones and tablets ---- */
@media (max-width: 991px) {
  /* Per-page builder nudges (blocks pulled or pushed 30-300px sideways) only fit the desktop layout. */
  #page [class*="vc_custom_"]:not(.vc_row) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Menu: taller rows and one thumb-sized toggle per submenu (the theme also drew a second chevron). */
  #site-navigation .menu li.dropdown::after {
    display: none;
  }
  #site-navigation .menu > li {
    position: relative;
  }
  #site-navigation .menu > li > a {
    display: block;
    height: auto;
    padding: 10px 0;
    line-height: 24px;
  }
  #site-navigation .menu > li > .shapely-dropdown {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    font-size: 16px;
  }
  #site-navigation .menu > li > .shapely-dropdown i {
    transition: transform 0.2s ease;
  }
  #site-navigation .menu > li > .shapely-dropdown[aria-expanded="true"] i {
    transform: rotate(180deg);
  }
  /* Home call-to-action: the phone button didn't fit its quarter-width column; stack it under the text. */
  .cfa-section .col-sm-9,
  .cfa-section .col-sm-3 {
    float: none;
    width: 100%;
  }
  /* Photos, maps and long links stay inside the screen. */
  #page .wpb_single_image img,
  #page .wp-block-image img {
    max-width: 100%;
    height: auto;
  }
  #page iframe {
    max-width: 100%;
  }
  /* YouTube embeds kept their fixed desktop heights (the original resized them with a script),
     leaving tall black bars around the videos; size them 16:9 instead. */
  #page iframe[src*="youtube"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  /* The contact map was nudged 30px right with an inline margin. */
  #page .wpb_raw_html iframe {
    margin-left: 0 !important;
  }
  .main-container p,
  .main-container a,
  .main-container .wpb_raw_html {
    overflow-wrap: break-word;
  }
}

/* ---- Phones: easier to read, watch and tap ---- */
@media (max-width: 767px) {
  /* The theme's light grey text and 1.1 line spacing are hard going on a small screen. */
  body {
    color: #4a545b;
  }
  .main-container p,
  .main-container li {
    line-height: 1.6;
  }
  .main-container li {
    font-size: 15px;
  }
  .main-container [style*="justify"] {
    text-align: left !important;
  }
  h1,
  h2,
  h3,
  h4 {
    line-height: 1.25;
    overflow-wrap: break-word;
  }
  /* The FAQ page stacks its heading three times with -40px margins; wrapped onto two lines they collided. */
  #page .vc_custom_1501925101657,
  #page .vc_custom_1503173836304 {
    margin-top: 0 !important;
  }

  /* Home: the reel was 1000px tall, so the original hid it on phones. Show it (at 16:9, above) instead. */
  #block-19 .hide-on-mobile {
    display: block;
  }
  #block-19 iframe {
    display: block;
  }

  /* Forms: 16px text stops iPhones zooming in on focus; taller fields and bigger checkboxes for thumbs. */
  .main-container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  .main-container select,
  .main-container textarea {
    max-width: 100%;
    min-height: 44px;
    font-size: 16px !important;
  }
  .main-container input[type="checkbox"],
  .main-container input[type="radio"],
  #fbuilder input[type="checkbox"] {
    width: 22px;
    height: 22px;
    vertical-align: middle;
  }
  #fbuilder select {
    width: 100%;
    min-height: 44px;
  }
  /* Each checkbox's label is its tap area, so give every row a full thumb's height. */
  #fbuilder .cff-checkbox-field .dfield label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
  }
  .main-container input[type="submit"],
  .main-container input[type="button"],
  .main-container button[type="submit"] {
    min-height: 44px;
    padding: 0 24px;
  }

  /* Footer: centred, with thumb-sized social links and back-to-top button. */
  .site-footer .text-right {
    text-align: center;
  }
  .site-footer .yellow br {
    display: inline; /* the theme hides <br> on phones, which ran the copyright and credit together */
  }
  .site-footer #social {
    float: none;
  }
  .site-footer .social-list {
    padding-left: 0;
  }
  .social-list a {
    display: inline-block;
    min-width: 44px;
    line-height: 44px;
    text-align: center;
  }
  .back-to-top {
    width: 44px;
    height: 44px;
  }
}