/* ==========================================================================
   Buttons

   One treatment for every call to action on the site. A port of the Material
   Design ripple component to plain CSS and JS, because this project has no
   React, no Tailwind and no motion package.

   The brief: white gradient, slightly transparent. That reads beautifully over
   photography and over the ink grounds, and disappears completely on Shell and
   Sand, which is where most of these buttons actually live. So the fill is the
   same in both cases and only the contrast scaffolding changes: on light
   grounds the button carries an ink hairline and ink type, on dark grounds it
   drops the hairline and reverses to white type. One object, two settings.

   Applied by selector rather than by adding a class to every fragment, so the
   markup in _assets/sections stays untouched and a new button picks the
   treatment up by using any of the names below.
   ========================================================================== */

.yp-listings-all,
.yp-meet-btn,
.yp-news-cta,
.yp-social-btn,
.yp-contact-submit,
.yp-tst-btn,
.et_pb_button,
.yp-listings-nav-btn,
.yp-news-arrow {
  position: relative;
  overflow: hidden;                 /* clips the ripple to the button */
  isolation: isolate;               /* keeps the ripple under the label */

  /* The white gradient. Top-lit rather than flat, so the surface has a
     direction and does not read as a plain translucent panel. */
  background-image: linear-gradient(
      to bottom,
      rgb(var(--yp-white-rgb) / 0.92) 0%,
      rgb(var(--yp-white-rgb) / 0.72) 55%,
      rgb(var(--yp-white-rgb) / 0.58) 100%) !important;
  background-color: transparent !important;

  border: 1px solid rgb(var(--yp-ink-rgb) / 0.22) !important;
  color: var(--yp-ink) !important;

  font-family: var(--yp-serif) !important;
  text-transform: uppercase;
  letter-spacing: var(--yp-track-nav, 0.18em);
  text-decoration: none !important;

  /* Backdrop blur is what stops the translucency turning into mud over busy
     photography: the ground behind is softened rather than shown through. */
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);

  box-shadow: 0 1px 2px rgb(var(--yp-ink-rgb) / 0.06),
              0 8px 24px -14px rgb(var(--yp-ink-rgb) / 0.35);

  transition: border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-listings-all:hover,
.yp-meet-btn:hover,
.yp-news-cta:hover,
.yp-social-btn:hover,
.yp-contact-submit:hover,
.yp-tst-btn:hover,
.et_pb_button:hover,
.yp-listings-nav-btn:hover,
.yp-news-arrow:hover {
  border-color: rgb(var(--yp-ink-rgb) / 0.5) !important;
  box-shadow: 0 1px 2px rgb(var(--yp-ink-rgb) / 0.08),
              0 14px 30px -14px rgb(var(--yp-ink-rgb) / 0.45);
}

.yp-listings-all:active,
.yp-meet-btn:active,
.yp-news-cta:active,
.yp-social-btn:active,
.yp-contact-submit:active,
.yp-tst-btn:active,
.et_pb_button:active { transform: translateY(1px); }

.yp-listings-all:focus-visible,
.yp-meet-btn:focus-visible,
.yp-news-cta:focus-visible,
.yp-social-btn:focus-visible,
.yp-contact-submit:focus-visible,
.yp-tst-btn:focus-visible,
.et_pb_button:focus-visible,
.yp-listings-nav-btn:focus-visible,
.yp-news-arrow:focus-visible {
  outline: 2px solid var(--yp-ink);
  outline-offset: 3px;
}

/* Divi paints its buttons with its own !important rules and hangs an arrow
   glyph off a pseudo element. Both have to go or the shape fights this one.

   Its colour rule is written as `.et_pb_button.et_pb_bg_layout_light` plus an
   id-scoped selector, which outranks a bare class even with !important, so it
   was putting white type on the white fill. Matching that specificity is the
   only way to take it back. */
.et_pb_button { padding: 14px 30px !important; border-radius: 999px !important; }
.et_pb_button::after { display: none !important; }

/* Divi's cached inline <style> writes
     body #page-container .et_pb_section .et_pb_button_0 { color:#fff !important }
   which is body + id + two classes. A bare class with !important loses to it
   no matter what, so this matches its shape exactly. */
/* The class is repeated deliberately. Divi's inline block ties on specificity
   and sits later in the document, so it wins a tie; doubling the class breaks
   the tie without resorting to an id we do not own. */
body #page-container .et_pb_section .et_pb_button.et_pb_button,
body #page-container .et_pb_button.et_pb_button,
body .et_pb_button.et_pb_bg_layout_light,
body .et_pb_button.et_pb_bg_layout_dark {
  color: var(--yp-ink) !important;
  background-image: linear-gradient(
      to bottom,
      rgb(var(--yp-white-rgb) / 0.92) 0%,
      rgb(var(--yp-white-rgb) / 0.72) 55%,
      rgb(var(--yp-white-rgb) / 0.58) 100%) !important;
  border-color: rgb(var(--yp-ink-rgb) / 0.22) !important;
}

/* ---- on dark grounds -----------------------------------------------------
   The same white fill, but the hairline and the type flip. Over ink or over a
   photograph an ink border is invisible and ink type is unreadable. */

.yp-sec-ink .yp-listings-all,
.yp-sec-ink .yp-news-cta,
.yp-sec-ink .yp-social-btn,
.yp-sec-ink .yp-tst-btn,
.yp-meet-dark .yp-meet-btn,
.yp-hero .yp-listings-all {
  background-image: linear-gradient(
      to bottom,
      rgb(var(--yp-white-rgb) / 0.22) 0%,
      rgb(var(--yp-white-rgb) / 0.12) 55%,
      rgb(var(--yp-white-rgb) / 0.08) 100%) !important;
  border-color: rgb(var(--yp-white-rgb) / 0.42) !important;
  color: var(--yp-white) !important;
}

.yp-sec-ink .yp-listings-all:hover,
.yp-sec-ink .yp-news-cta:hover,
.yp-sec-ink .yp-social-btn:hover,
.yp-sec-ink .yp-tst-btn:hover,
.yp-meet-dark .yp-meet-btn:hover {
  border-color: rgb(var(--yp-white-rgb) / 0.85) !important;
}

/* ---- the ripple ----------------------------------------------------------
   buttons.js inserts one span per press, sized so the circle always reaches
   the farthest corner from the point of contact, which is what makes the
   Material ripple feel like it comes from the finger rather than the centre.
   Painting and geometry are here; only the timing is in the script. */

.yp-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  opacity: 0.4;
  background: radial-gradient(circle,
              rgb(var(--yp-ink-rgb) / 0.30) 0%,
              rgb(var(--yp-ink-rgb) / 0.12) 60%,
              rgb(var(--yp-ink-rgb) / 0) 100%);
  animation: yp-ripple-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* On a dark ground the ink ripple is invisible, so it inverts with the type. */
.yp-sec-ink .yp-ripple,
.yp-meet-dark .yp-ripple {
  background: radial-gradient(circle,
              rgb(var(--yp-white-rgb) / 0.42) 0%,
              rgb(var(--yp-white-rgb) / 0.16) 60%,
              rgb(var(--yp-white-rgb) / 0) 100%);
}

@keyframes yp-ripple-in {
  to { transform: scale(1); opacity: 0.4; }
}

.yp-ripple.is-out { animation: yp-ripple-out 0.4s ease forwards; }

@keyframes yp-ripple-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .yp-ripple { display: none; }
  .yp-listings-all,
  .yp-meet-btn,
  .yp-news-cta,
  .yp-social-btn,
  .yp-contact-submit,
  .yp-tst-btn,
  .et_pb_button { transition: none; }
}