/* Post actions: Share menu and "Add Us On Google" under the post byline (partials/post-actions.hbs).
   Outline buttons in the header's button style; they take the surrounding text colour, so they are
   dark on Default and Split posts, white on the Hero image, and follow dark mode. */

.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.text-center .post-actions {
  justify-content: center;
}

/* Two classes on links so the global a:hover underline in mews-base.css does not reach them */
.post-action,
a.post-action {
  align-items: center;
  background-color: transparent;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 0.25rem;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 0.5rem;
  letter-spacing: normal;
  line-height: 1.25;
  padding: 0.5rem 0.875rem;
  text-decoration: none;
  text-transform: none;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
  white-space: nowrap;
}
.post-action:hover,
a.post-action:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border-color: color-mix(in srgb, currentColor 60%, transparent);
  text-decoration: none;
}
.post-action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.post-action svg {
  flex-shrink: 0;
  height: 0.9375rem;
  width: 0.9375rem;
}

/* Share menu */
.post-share {
  position: relative;
}
.post-share-menu {
  background-color: var(--color-body-bg);
  border: 1px solid var(--color-lightest);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  color: var(--color-body-text);
  left: 0;
  min-width: 12rem;
  padding: 0.375rem;
  position: absolute;
  text-align: left;
  top: calc(100% + 0.375rem);
  z-index: 20;
}
.post-share-menu[hidden] {
  display: none;
}
/* The Hero header sits at the bottom of a clipped image, so its menu opens upwards */
.mews-post-hero .post-share-menu {
  bottom: calc(100% + 0.375rem);
  top: auto;
}
.text-center .post-share-menu {
  left: 50%;
  transform: translateX(-50%);
}
.post-share-menu a,
.post-share-menu button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0.25rem;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 0.625rem;
  line-height: 1.25;
  padding: 0.5rem 0.625rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}
/* The menu keeps its own colours anywhere. Over the Hero image, the header's .text-white utility
   (mews-base.css) forces white links with !important; this selector outranks it. */
.post-actions .post-share-menu :is(a, button) {
  color: var(--color-body-text) !important;
}
.post-share-menu a:hover,
.post-share-menu button:hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
  text-decoration: none;
}
.post-share-menu a:focus-visible,
.post-share-menu button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.post-share-menu svg {
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
}

@media (max-width: 479.98px) {
  .post-actions {
    margin-top: 1rem;
  }
}

/* Floating share rail (partials/share-rail.hbs), modelled on unhyd.com's: a card fixed to the
   left edge on wide screens, shown by mews-share.js once the byline has scrolled under the
   header and hidden over the footer. Below 1200px there is no room beside the article, so the
   header Share button covers sharing. Hidden rails are visibility: hidden, so not focusable. */
.share-rail {
  display: none;
}
@media (min-width: 1200px) {
  .share-rail {
    display: block;
    left: 1rem;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 50%;
    transform: translateY(calc(-50% + 1rem));
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    visibility: hidden;
    z-index: 40;
  }
  .share-rail.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
    visibility: visible;
  }
}
@media (min-width: 1440px) {
  .share-rail {
    left: 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .share-rail,
  .share-rail.is-visible {
    transform: translateY(-50%);
  }
}
@media print {
  .share-rail {
    display: none !important;
  }
}
.share-rail-inner {
  align-items: center;
  background-color: var(--color-body-bg);
  border: 1px solid var(--color-lightest);
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.425rem;
}
.share-rail-label {
  color: color-mix(in srgb, var(--color-lighter) 70%, var(--color-body-bg));
  font-family: var(--font-accent);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
/* Two classes on links so the global a:hover underline in mews-base.css does not reach them */
.share-rail-btn,
a.share-rail-btn {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0.75rem;
  color: color-mix(in srgb, var(--color-body-text) 75%, var(--color-body-bg));
  cursor: pointer;
  display: flex;
  height: 2.25rem;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
  width: 2.25rem;
}
.share-rail-btn:hover,
a.share-rail-btn:hover {
  background-color: color-mix(in srgb, var(--color-body-text) 6%, transparent);
  color: var(--color-body-text);
  text-decoration: none;
}
.share-rail-btn:focus-visible {
  outline: 2px solid var(--color-body-text);
  outline-offset: 2px;
}
.share-rail-btn svg {
  display: block;
  height: 1rem;
  width: 1rem;
}
.share-rail-icon-copied,
.share-rail-btn.is-copied .share-rail-icon-copy {
  display: none;
}
.share-rail-btn.is-copied .share-rail-icon-copied {
  display: block;
}