/* ============================================================
   Brooks — styles written for the converted site.

   Everything else under /css was exported from the original
   WordPress build. This file holds the pieces that were
   rewritten by hand during the conversion.
   ============================================================ */

/* ---------- hero ----------
   Replaces the Slider Revolution module that used to sit at the
   top of the home page. That slider rebuilt itself at runtime
   from the WordPress REST API, which no longer exists; the
   content it showed was a single background image and two lines
   of text, so it is expressed directly here instead. */

.brooks-hero {
  position: relative;
  width: 100%;
  height: 900px;
  overflow: hidden;
  background: #1b1b1b;
}

.brooks-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keeps the caption readable over a bright photograph.
   pointer-events:none is essential — without it this layer sits above the
   video and swallows every click meant for the player. */
.brooks-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .30) 0%,
    rgba(0, 0, 0, .10) 38%,
    rgba(0, 0, 0, .55) 100%
  );
}


@media (max-width: 1024px) { .brooks-hero { height: 743px } }
@media (max-width: 778px)  { .brooks-hero { height: 565px } }
@media (max-width: 480px)  { .brooks-hero { height: 420px } }

/* ---------- contact form ----------
   The form is a plain POST now (Contact Form 7's REST backend is gone).
   These cover the pieces CF7's own stylesheet does not: the honeypot and
   the success / error notice. */

.brooks-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.brooks-note {
  margin: 0 0 22px;
  padding: 16px 20px;
  border-left: 3px solid;
  font-family: 'PT Serif', Georgia, serif;
  font-size: 15px;
  line-height: 26px;
}
.brooks-note p { margin: 0 0 6px }
.brooks-note p:last-child { margin-bottom: 0 }

.brooks-note--ok {
  border-color: #3E8E5A;
  background: #F1F8F3;
  color: #245A38;
}
.brooks-note--error {
  border-color: #B4453C;
  background: #FCF2F1;
  color: #8A2F28;
}

/* ---------- hero video ----------
   The video autoplays. Browsers only permit that when the video is muted, so
   it starts silent with an unmute control in the corner — there is no way to
   autoplay with sound, on any browser.

   Sizing: in video mode the hero stops using the fixed photo heights and
   becomes a true 16:9 box. Because the container is exactly the video's own
   aspect ratio, the iframe fills it edge to edge at every screen width with
   no cropping and no black bars. */

.brooks-hero--video {
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  background: #000;
}

.brooks-hero__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
/* Cover, not contain.

   The hero box is 16:9 but max-height clamps it on a viewport wider than
   16:9, so the box can be wider than the video — never taller, because its
   height is only ever the 16:9 height or less. Sizing the iframe from its
   own width and letting aspect-ratio set the height therefore always fills
   the box; the overflow is clipped by .brooks-hero__frame. No viewport units
   and no media query, so it holds wherever the hero sits on the page. */
.brooks-hero__frame iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

.brooks-hero--video::after { z-index: 2 }

/* ---- sound toggle ---- */
.brooks-hero__sound {
  position: absolute;
  right: clamp(14px, 3vw, 34px);
  bottom: clamp(14px, 3vw, 34px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 15px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: 'PT Serif', Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.brooks-hero__sound:hover,
.brooks-hero__sound:focus-visible {
  background: #E9C0A4;
  border-color: #E9C0A4;
  color: #14140F;
}
.brooks-hero__sound:focus-visible { outline: 3px solid #fff; outline-offset: 3px }
.brooks-hero__sound svg { flex: none }
.brooks-hero__sound .on { display: none }
.brooks-hero__sound[aria-pressed="true"] .off { display: none }
.brooks-hero__sound[aria-pressed="true"] .on { display: inline }

/* the poster stays as the backdrop until the player has started, so there is
   never a flash of empty black while YouTube loads */
.brooks-hero--video .brooks-hero__img { z-index: 0 }
.brooks-hero--video.is-playing .brooks-hero__img { opacity: 0; transition: opacity .5s .3s }

/* Reduced motion: no autoplay. The poster and a play button show instead, and
   the video only starts if the visitor asks for it. */
.brooks-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 88px;
  height: 62px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  display: none;
}
.brooks-hero--manual .brooks-hero__play { display: block }
.brooks-hero--manual.is-playing .brooks-hero__play { display: none }
.brooks-hero__play svg { width: 100%; height: 100% }
.brooks-hero__play-bg { fill: #212121; fill-opacity: .82; transition: fill .2s, fill-opacity .2s }
.brooks-hero__play:hover .brooks-hero__play-bg { fill: #E9C0A4; fill-opacity: 1 }

@media (max-width: 560px) {
  .brooks-hero__sound { padding: 8px 14px 8px 12px; font-size: 11px; letter-spacing: 1.4px }
  .brooks-hero__sound .label { display: none }
}