/* ==========================================================================
   The Pebbles — additions for the PHP/CMS version of the site.
   Loaded after styles.css on every page. styles.css itself is unchanged.
   ========================================================================== */

/* ---------- Announcement banners ------------------------------------------
   The strip is fixed under the fixed nav (as before). Several live banners
   share one grid cell and take turns, so the strip is only ever as tall as
   the tallest one. --announce-h is measured as the page loads (see
   includes/banner.php) so the content below is pushed down by exactly the
   strip's height — at any screen width, for any length of text. */
.announce-stack {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 999;
  display: grid;
}
.announce-stack > .announce-banner {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.announce-stack > .announce-banner.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease;
}
div.announce-banner { cursor: default; }
.announce-banner__cta { margin-left: auto; }

/* Homepage hero: the original breathing room (60px, or 40px on tablets and
   phones) below the strip, whatever the strip's height. */
.announce-stack + .hero { padding-top: calc(var(--nav-height) + 60px + var(--announce-h, 56px)); }
@media (max-width: 1024px) {
  .announce-stack + .hero { padding-top: calc(var(--nav-height) + 40px + var(--announce-h, 60px)); }
}
/* Any other page: push its first section down by the strip's height. */
.announce-stack + :not(.hero) { margin-top: var(--announce-h, 56px); }

/* Colour choices (Admin → Banners → Colour). Amber is the original. */
.announce-banner--sage {
  background: linear-gradient(115deg, #5E6B45 0%, #7B8A5E 45%, #5E6B45 100%);
  background-size: 200% 100%;
  color: #fff;
}
.announce-banner--sage .announce-banner__tag { background: rgba(255,255,255,0.92); color: #3a4429; }
.announce-banner--sage .announce-banner__pulse { background: #F0C05C; animation-name: announcePulseLight; }
.announce-banner--charcoal {
  background: linear-gradient(115deg, #2D2D2D 0%, #474440 45%, #2D2D2D 100%);
  background-size: 200% 100%;
  color: #fff;
}
.announce-banner--charcoal .announce-banner__tag { background: #E8A824; color: #1f1604; }
.announce-banner--charcoal .announce-banner__pulse { background: #E8A824; animation-name: announcePulseLight; }
@keyframes announcePulseLight {
  0% { box-shadow: 0 0 0 0 rgba(240,192,92,0.7); }
  70% { box-shadow: 0 0 0 12px rgba(240,192,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,192,92,0); }
}
@media (prefers-reduced-motion: reduce) {
  .announce-stack > .announce-banner { transition: none; }
}

/* ---------- Menu: the page you're on ------------------------------------- */
.nav__links a[aria-current="page"],
.nav__links > li.is-current > a { color: var(--sage-dark); }
.nav__dropdown a[aria-current="page"] { font-weight: 600; }

/* ---------- Testimonials page -------------------------------------------- */
.tm-section { padding: 80px 24px; }
.tm-section--videos { background: var(--white); }
.tm-section--written { background: var(--cream); }
.tm-wrap { max-width: 1080px; margin: 0 auto; }
.tm-head { text-align: center; margin-bottom: 44px; }
.tm-head .section-title { margin-bottom: 0; }

/* written reviews — the same card the homepage used to show */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.tm-card {
  background: var(--white);
  border-radius: var(--radius-lg, 20px);
  padding: 32px;
  box-shadow: 0 4px 20px rgba(45,45,45,0.06);
  border-left: 4px solid var(--tm-accent, var(--sage-dark));
  margin: 0;
}
.tm-person { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tm-avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--tm-accent, var(--sage-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.tm-name { display: block; color: var(--charcoal); font-size: 0.95rem; }
.tm-meta { font-size: 0.8rem; color: var(--gray); }
.tm-quote { color: var(--charcoal); line-height: 1.7; font-size: 0.95rem; margin: 0; }
.tm-more { text-align: center; margin: 40px 0 0; }
.tm-empty { text-align: center; color: var(--gray); font-size: 1.05rem; line-height: 1.8; max-width: 560px; margin: 0 auto; }
.tm-empty a { color: var(--sage-dark); font-weight: 600; }

/* video stories */
.tm-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; align-items: start; }
.tm-video {
  margin: 0;
  background: var(--white);
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  box-shadow: 0 6px 26px rgba(45,45,45,0.09);
  border-top: 4px solid var(--tm-accent, var(--sage-dark));
}
.tm-video__media { background: #1b1b1b; }
.tm-video__body { padding: 22px 26px 26px; }
.tm-video .tm-person { margin-bottom: 0; }
.tm-video .tm-quote { margin-bottom: 18px; }

.tm-player { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.tm-player--portrait { aspect-ratio: 9 / 16; width: min(100%, 340px); margin: 0 auto; }
.tm-player iframe,
.tm-player video,
.tm-player__facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tm-player video { object-fit: contain; background: #000; }
.tm-player__facade { display: block; padding: 0; cursor: pointer; background: #111 center / cover no-repeat; }
.tm-player__facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%); }
.tm-player__play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 70px; height: 70px; margin: -35px 0 0 -35px;
  border-radius: 50%;
  background: rgba(232,168,36,0.95);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: transform 0.2s ease;
}
.tm-player__play::after {
  content: ""; position: absolute; left: 28px; top: 22px;
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff;
}
.tm-player__facade:hover .tm-player__play,
.tm-player__facade:focus-visible .tm-player__play { transform: scale(1.08); }
.tm-player__facade:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }

@media (max-width: 768px) {
  .tm-section { padding: 60px 20px; }
  .tm-grid, .tm-videos { grid-template-columns: 1fr; }
  .tm-card { padding: 26px; }
}

/* ---------- Contact form: message shown when JavaScript is off ------------ */
.form-notice { border-radius: 12px; padding: 14px 18px; margin: 0 0 20px; font-weight: 500; }
.form-notice--ok { background: #e8f3e6; color: #2f6b3a; }
.form-notice--err { background: #fdeceb; color: #b3261e; }