/* --------- Buttons --------- */

/* Mirrors elements.button in theme.json — keep both in step. */
.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  border: 2px solid var(--wp--preset--color--contrast);
  border-radius: 48px;
  background-color: transparent;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--accent);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 2px;
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn--light {
  border-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--base);
}

.btn--light:hover,
.btn--light:focus-visible {
  border-color: var(--wp--preset--color--base);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

/* --------- Menus --------- */

/* e88_render_menu() adds site-menu to every menu it renders. */
.site-menu,
.site-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-menu a {
  transition: color 0.3s ease;
  white-space: nowrap;
}

/* --------- Pagination --------- */

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: var(--wp--preset--spacing--40);
}

.pagination .page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--wp--preset--color--border);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background-color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

/* --------- Form fields --------- */

input,
textarea {
  border: none;
  font-size: var(--wp--preset--font-size--normal);
  padding: 18px 24px;
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--surface);
}

textarea {
  padding: 24px;
}

/* opacity, not the border colour it used to use — that gave ~1.1:1 against
   the field fill, far under the 4.5:1 text minimum. */
input::placeholder,
textarea::placeholder {
  color: var(--wp--preset--color--contrast);
  opacity: 0.55;
}

/* --------- Contact form --------- */

.contact-box {
  max-width: 700px;
}

.contact-form__input-wrap {
  position: relative;
  margin-bottom: var(--wp--preset--spacing--30);
}

/* Underlined fields, as on the original site. */
.form-input {
  display: block;
  width: 100%;
  padding: 18px 8px;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--contrast);
  border-radius: 0;
  background: transparent;
  color: var(--wp--preset--color--contrast);
  font: inherit;
}

textarea.form-input {
  resize: vertical;
}

.form-input::placeholder {
  color: var(--wp--preset--color--contrast);
  opacity: 1;
}

.form-input:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

.form-input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.contact-box .btn {
  width: 100%;
  min-height: 56px;
}

/* Empty until the script puts the browser's validation message here. */
.field-error:not(:empty) {
  display: block;
  margin-top: 6px;
  color: var(--color-error);
  font-size: var(--wp--preset--font-size--x-small);
}

.form-status:not(:empty) {
  margin-top: var(--wp--preset--spacing--30);
}

.form-status.is-error {
  color: var(--color-error);
}

.form-status.is-success {
  color: var(--color-success);
}

.form-note {
  margin-top: var(--wp--preset--spacing--40);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.4;
  text-align: center;
}

.form-note a {
  color: var(--wp--preset--color--secondary);
}

/* --------- Utilities --------- */

.grecaptcha-badge {
  display: none;
  visibility: hidden;
}

/* --------- Quick Exit --------- */

/* Fixed top right on every screen, above the header and the open drawer, so it
   is one tap away wherever the visitor is. Tucked 20px past the right edge
   like the Donate tab, so its rounded right end is hidden. At the top of the
   page it sits in the header row — the header keeps that spot free
   (layout.css, --quick-exit-width). */
.quick-exit {
  position: fixed;
  top: calc(var(--wp--preset--spacing--30) + (var(--header-row-height) - 44px) / 2);
  right: -20px;
  z-index: var(--z-quick-exit);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  border-radius: 48px;
  background-color: var(--wp--preset--color--contrast);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--accent);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.quick-exit:hover,
.quick-exit:focus-visible {
  background-color: var(--wp--preset--color--primary);
}

/* Narrow screens: under the menu toggle instead of beside it, so the header
   row only has to fit the logo and the toggle. */
@media screen and (max-width: 1199px) {
  .quick-exit {
    top: calc(var(--wp--preset--spacing--30) + var(--header-row-height) + 8px);
    right: -16px;
    padding: 0 24px;
    letter-spacing: 1px;
  }
}

.browse-safely-link {
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small);
}

.browse-safely-link:hover,
.browse-safely-link:focus-visible {
  color: var(--wp--preset--color--primary);
}

/* --------- Floating Donate button --------- */

/* A pill tucked past the right screen edge, so its rounded right end stays
   hidden and only the left half shows; the nudge pulls a little more of it
   out. It slides away while the footer is in view (donate-float.js), so it
   never sits on the footer links. */
.donate-float {
  position: fixed;
  right: -20px;
  bottom: var(--wp--preset--spacing--40);
  z-index: var(--z-floating);
  padding: 12px 28px;
  border-radius: 48px;
  background-color: var(--wp--preset--color--secondary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--accent);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 2px;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.3s ease,
    visibility 0s linear 0s;
}

.donate-float:hover,
.donate-float:focus-visible {
  background-color: var(--wp--preset--color--contrast);
}

.donate-float.is-away {
  transform: translateX(110%);
  visibility: hidden;
  transition:
    background-color 0.2s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s;
}

/* The periodic nudge animates `translate`, not `transform`, so it never
   fights the slide-away above. */
@media (prefers-reduced-motion: no-preference) {
  .donate-float {
    animation: donate-nudge 8s ease-in-out infinite;
  }

  .donate-float:hover,
  .donate-float:focus-visible {
    animation-play-state: paused;
  }
}

@keyframes donate-nudge {
  0%,
  86%,
  100% {
    translate: 0;
  }

  90% {
    translate: -10px;
  }

  94% {
    translate: 0;
  }

  97% {
    translate: -5px;
  }
}

/* --------- Social links --------- */

.social-links {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links__link {
  display: block;
  color: var(--wp--preset--color--contrast);
  transition: color 0.2s ease;
}

.social-links__link:hover,
.social-links__link:focus-visible {
  color: var(--wp--preset--color--primary);
}

.social-links__icon {
  display: block;
}

/* --------- Copy to clipboard ([copy_text] shortcode) --------- */

.copy-text__value {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.copy-text__button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -4px 0;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--small);
  vertical-align: middle;
  cursor: pointer;
  transition: color 0.2s ease;
}

.copy-text__button:hover,
.copy-text__button:focus-visible {
  color: var(--wp--preset--color--secondary);
}

.copy-text__icon {
  display: block;
  flex-shrink: 0;
}

/* --------- Donate popup --------- */

.donate-popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-popup);
  display: grid;
  place-items: center;
  padding: 15px;
}

.donate-popup[hidden] {
  display: none;
}

.donate-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 27, 27, 0.45);
}

.donate-popup__dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  border-radius: 12px;
  background-color: var(--wp--preset--color--base);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.donate-popup__dialog:focus {
  outline: none;
}

.donate-popup__dialog .wp-block-image {
  margin: 0;
}

.donate-popup__dialog img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 50dvh;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .donate-popup:not([hidden]) .donate-popup__backdrop {
    animation: donate-popup-fade 0.6s ease;
  }

  .donate-popup:not([hidden]) .donate-popup__dialog {
    animation: donate-popup-in 0.6s ease;
  }
}

@keyframes donate-popup-fade {
  from {
    opacity: 0;
  }
}

@keyframes donate-popup-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* 44px: a comfortable tap target, not the 16px cross of the old popup. */
.donate-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background-color: var(--wp--preset--color--base);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
}

.donate-popup__close::before,
.donate-popup__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: currentColor;
}

.donate-popup__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.donate-popup__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.donate-popup__close:hover,
.donate-popup__close:focus-visible {
  color: var(--wp--preset--color--primary);
}