/* wd-port.css — Rob's universal rules on top of a copied Divi site (tools/copy-site.py).
   Divi's own CSS stays untouched; this file only overrides what the rules forbid.
   Rule numbers match .claude/skills/universal-checks/SKILL.md. */

/* U1 slider and carousel arrows visible at rest, on every width (Divi shows them on hover only) */
.et_pb_slider .et-pb-arrow-prev, .et_pb_slider .et-pb-arrow-next,
.et_pb_gallery_fullwidth .et-pb-arrow-prev, .et_pb_gallery_fullwidth .et-pb-arrow-next,
.et_pb_post_slider .et-pb-arrow-prev, .et_pb_post_slider .et-pb-arrow-next {
  opacity: 1 !important; visibility: visible !important; display: block !important;
}
.et_pb_slider .et-pb-arrow-prev, .et_pb_post_slider .et-pb-arrow-prev { left: 12px !important; }
.et_pb_slider .et-pb-arrow-next, .et_pb_post_slider .et-pb-arrow-next { right: 12px !important; }
.swiper-button-prev, .swiper-button-next, .slick-arrow, .owl-nav button,
.dipi-sbn, .dipi-sbp, [class*="carousel"] [class*="arrow"] {
  opacity: 1 !important; visibility: visible !important;
}
/* Divi Carousel Maker's "arrows on hover" (.arrow-on-hover, Mr Gardners Gardens 2026-09-30) also slides each
   arrow out of its clipped container at rest, so opacity alone leaves it invisible. Hold the hover position. */
@media (min-width: 981px) {
  .desktop_middle-inside.arrow-on-hover .swiper-button-prev, .desktop_middle-inside.arrow-on-hover .swiper-button-next { transform: translateX(0) !important; }
  .desktop_middle-outside.arrow-on-hover .swiper-button-prev { transform: translateX(-150%) !important; }
  .desktop_middle-outside.arrow-on-hover .swiper-button-next { transform: translateX(150%) !important; }
}
@media (max-width: 980px) {
  .tablet_middle-inside.arrow-on-hover .swiper-button-prev, .tablet_middle-inside.arrow-on-hover .swiper-button-next,
  .tablet_middle-outside.arrow-on-hover .swiper-button-prev, .tablet_middle-outside.arrow-on-hover .swiper-button-next,
  .mobile_middle-inside.arrow-on-hover .swiper-button-prev, .mobile_middle-inside.arrow-on-hover .swiper-button-next,
  .mobile_middle-outside.arrow-on-hover .swiper-button-prev, .mobile_middle-outside.arrow-on-hover .swiper-button-next { transform: translateX(0) !important; }
}

/* U12 fixed (parallax) backgrounds scroll normally on tablets and phones */
@media (max-width: 980px) {
  .et_parallax_bg, .et_pb_parallax_css, [style*="background-attachment: fixed"], [style*="background-attachment:fixed"] {
    background-attachment: scroll !important;
  }
}

/* U5/U18 the header stays pinned on phones, whatever the live site does (Rob, 2026-09-29).
   Divi hides overflow on body and #page-container, which silently disables position:sticky;
   clip keeps the no-sideways-scroll effect without breaking it. */
@media (max-width: 980px) {
  html body, html body #page-container, html body #et-boc { overflow-x: clip !important; overflow-y: visible !important; }
  html body .et-l--header, html body #main-header { position: sticky !important; top: 0; z-index: 9990; }
  /* Divi's fixed nav pads #page-container by the header's height (inline, set by its script) because its
     header is taken out of the flow; once sticky it is back in the flow, so that padding is a blank band
     above the header (Alan Winford, 2026-09-30) */
  html body.et_fixed_nav #page-container { padding-top: 0 !important; }
}

/* U5 round call button, bottom right, phones and tablets */
.wd-call {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 99999;
  width: 56px; height: 56px; border-radius: 50%; display: none; align-items: center; justify-content: center;
  background: var(--wd-accent, #1f6fd1); box-shadow: 0 4px 14px rgba(0, 0, 0, .28); text-decoration: none;
}
.wd-call svg { width: 26px; height: 26px; fill: var(--wd-call-fg, #fff); }
@media (max-width: 980px) { .wd-call { display: flex; } }

/* U5 back-to-top button, after about a screen */
.wd-top {
  position: fixed; right: 22px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 99998;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font-size: 20px; line-height: 44px;
  background: rgba(20, 20, 20, .7); color: #fff; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.wd-top.is-on { opacity: 1; pointer-events: auto; }
@media (min-width: 981px) { .wd-top { bottom: 24px; } }
.wd-call:focus-visible, .wd-top:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* U5 Divi Pixel's custom back-to-top sits in the bottom-right corner, under the call button; on phones and
   tablets it goes above it, like the kit's own back-to-top (FNQ Building Certification, 2026-09-30) */
@media (max-width: 980px) {
  html body .et_pb_scroll_top.dipi-custom-icon { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* U5 Divi's own back-to-top (bottom: 125px) sat over the footer's last line on phones, above the room the kit
   leaves below the footer (150px); it goes to the same place, above the call button (Tapped Out Brick, 2026-10-01) */
@media (max-width: 980px) {
  html body .et_pb_scroll_top.et-pb-icon { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* U5 the floating buttons never cover the last footer line on phones: room below the footer's last row */
@media (max-width: 980px) {
  /* specific enough to beat Divi's per-section padding, which loads after this file */
  html body .et-l--footer .et_builder_inner_content > .et_pb_section:last-of-type,
  html body #main-footer #footer-bottom { padding-bottom: 150px !important; }   /* call button + back-to-top stacked */
}