/* One Way Roofing — shared behaviour styles.
   Loaded by every page's helmet. These rules are what let the prerendered,
   React-free HTML stay responsive and interactive: visibility that used to be
   decided by component state (`sc-if`) is now decided by media queries and
   `data-open` attributes, which both the dc runtime and assets/site.js set. */

/* ---------- Accessibility primitives ---------- */

.ow-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: #ffffff;
  color: #0c2233;
  font: 600 15px/1 'Instrument Sans', Arial, sans-serif;
  padding: 14px 20px;
  border-radius: 0 0 12px 0;
  box-shadow: 0 8px 28px rgba(8, 25, 43, 0.18);
  text-decoration: none;
}
.ow-skip:focus {
  left: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #1b75bc;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- FAQ accordion ----------
   The answer is always in the DOM (Google's FAQPage structured data requires
   the Q&A to be present on the page); it is collapsed with CSS, not removed. */

[data-ow='faq-panel'][data-open='false'] {
  display: none;
}
[data-ow='faq-btn'] {
  cursor: pointer;
}

/* ---------- Header: responsive without JS ----------
   `.ow-desktop` / `.ow-mobile` replace the old `sc-if desktop` / `sc-if mobile`
   state so a single prerendered document serves both viewports. */

@media (max-width: 1020px) {
  .ow-desktop {
    display: none !important;
  }
  .ow-mobile {
    display: flex !important;
  }
}
@media (min-width: 1021px) {
  .ow-mobile,
  [data-ow='mobile-menu'] {
    display: none !important;
  }
}

.ow-mobile {
  display: none;
}

[data-ow='mobile-menu'][data-open='false'] {
  display: none;
}

/* ---------- Services dropdown ----------
   Hover for pointers, focus-within for keyboards, `data-open` for the JS
   toggle. No React state involved. */

.ow-svc-menu {
  display: none;
}
.ow-svc:hover .ow-svc-menu,
.ow-svc:focus-within .ow-svc-menu,
.ow-svc-menu[data-open='true'] {
  display: block;
}
.ow-chev {
  display: inline-block;
  transition: transform 0.25s;
}
.ow-svc:hover .ow-chev,
.ow-svc:focus-within .ow-chev {
  transform: rotate(180deg);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-ow='hero-parallax'] {
    transform: none !important;
  }
}