/**
 * Social sharing bar — single News articles and Event posts.
 * Enqueued only on singular posts in the News/Events categories.
 * The bar is injected INSIDE Astra's .entry-meta block (the row that shows the
 * category link, e.g. "News"), so it sits on the SAME row as the category.
 * Palette follows the theme tokens: --fg (navy), --gold.
 */

/* Make the category row a flex line: category link on the left, share on the
   right. Astra's .entry-meta is inline by default. */
.single .entry-meta:has(.iv-share) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Style the category label ("News"/"Events") so it reads as an intentional
   tag rather than a plain link. Gold accent, uppercase, to match the SHARE
   label on the same row. */
.single .entry-meta:has(.iv-share) .ast-terms-link {
    display: inline-flex;
    align-items: center;
}

.single .entry-meta:has(.iv-share) .ast-terms-link a {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--gold, #a9822f);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold, #a9822f);
    text-decoration: none;
    line-height: 1.4;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.single .entry-meta:has(.iv-share) .ast-terms-link a:hover,
.single .entry-meta:has(.iv-share) .ast-terms-link a:focus-visible {
    background: var(--gold, #a9822f);
    color: #ffffff;
}

/* Push the share group to the far right of the row. */
.single .entry-meta .iv-share {
    margin-left: auto;
}

.iv-share {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.iv-share__label {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fg, #1a2a3a);
    opacity: 0.7;
}

.iv-share__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.iv-share__item {
    margin: 0;
    padding: 0;
}

/* Rounded-rectangle pill buttons — the original look (navy base, white text,
   brand color on hover). Explicit colors so they render IDENTICALLY in light
   and dark mode (never inherit the page palette). */
.iv-share__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    background: #2c4a68;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

/* Keep the label + icon white regardless of theme link colors. */
.iv-share__link,
.iv-share__link:visited,
.iv-share__link:hover,
.iv-share__link:focus,
.iv-share__link:focus-visible,
.iv-share__link .iv-share__text,
.iv-share__link .iv-share__icon {
    color: #ffffff;
}

/* Astra colors everything inside .entry-meta with a blue link color
   (.entry-meta, .entry-meta * { color: var(--ast-global-color-0) }), which
   tints our inline-SVG icons (they use fill:currentColor) on the category row.
   Force white on the meta-row pills, their icons, their SVGs and SVG paths so
   the top pills match the bottom bar exactly. */
.single .entry-meta .iv-share__link,
.single .entry-meta .iv-share__link .iv-share__text,
.single .entry-meta .iv-share__link .iv-share__icon,
.single .entry-meta .iv-share__link .iv-share__icon svg,
.single .entry-meta .iv-share__link .iv-share__icon svg path {
    color: #ffffff;
    fill: #ffffff;
}

.iv-share__link:hover,
.iv-share__link:focus-visible {
    transform: translateY(-1px);
}

.iv-share__link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Brand color on hover — same in light and dark mode. */
.iv-share__link--facebook:hover,
.iv-share__link--facebook:focus-visible { background: #1877f2; }
.iv-share__link--x:hover,
.iv-share__link--x:focus-visible { background: #000000; }
.iv-share__link--whatsapp:hover,
.iv-share__link--whatsapp:focus-visible { background: #25d366; }
.iv-share__link--linkedin:hover,
.iv-share__link--linkedin:focus-visible { background: #0a66c2; }
.iv-share__link--email:hover,
.iv-share__link--email:focus-visible { background: #8a6d1f; }

.iv-share__icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.iv-share__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Labels visible on the pills. */
.iv-share__text {
    display: inline;
}

/* On narrow screens, drop to icon-only pills to save room. */
@media (max-width: 600px) {
    .iv-share__text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .iv-share__link {
        padding: 0.4rem;
    }
}

/* Fallback for browsers without :has() — share still shows, just not pushed
   fully right (it wraps under the category on its own line). */
@supports not (selector(:has(*))) {
    .single .entry-meta .iv-share {
        display: inline-flex;
        margin-left: 0.75rem;
    }
}

/* On narrow screens let the share group wrap under the category rather than
   squeeze the row. */
@media (max-width: 480px) {
    .single .entry-meta .iv-share {
        margin-left: 0;
        margin-top: 0.5rem;
        flex-basis: 100%;
    }
}

/* ── Footer variant: a full-width bar at the BOTTOM of the article ───────── */
.iv-share--footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 2.5rem 0 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--surface2, rgba(26, 42, 58, 0.15));
}

/* The bottom bar is roomy, so its "Share" label is a touch larger. */
.iv-share--footer .iv-share__label {
    font-size: 0.95rem;
    opacity: 0.85;
}

.iv-share--footer .iv-share__list {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* The bottom bar always keeps its labels, even on small screens. */
@media (max-width: 600px) {
    .iv-share--footer .iv-share__text {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        clip: auto;
        overflow: visible;
    }
    .iv-share--footer .iv-share__link {
        padding: 0.45rem 0.8rem;
    }
}

/* ── Previous / Next post navigation (below the share bar) ───────────────── */
/* Astra renders these with its OWN direction arrow (span.ast-left-arrow /
   ast-right-arrow) inside the link text, so we must NOT add our own pseudo
   arrow or they double up. Style them as compact bordered cards that size to
   their content; Previous sits left, Next sits right, on every width. */
.single .post-navigation .nav-links {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.single .post-navigation .nav-previous {
    text-align: left;
}

.single .post-navigation .nav-next {
    text-align: right;
    margin-left: auto;
}

.single .post-navigation .nav-previous a,
.single .post-navigation .nav-next a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    border: 1px solid var(--surface2, rgba(26, 42, 58, 0.18));
    border-radius: 8px;
    background: var(--surface, transparent);
    color: var(--fg, #1a2a3a);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    transition: border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.single .post-navigation .nav-previous a:hover,
.single .post-navigation .nav-next a:hover,
.single .post-navigation .nav-previous a:focus-visible,
.single .post-navigation .nav-next a:focus-visible {
    border-color: var(--gold, #a9822f);
    color: var(--gold, #a9822f);
    transform: translateY(-1px);
}

/* On narrow screens keep BOTH cards on the same row — Previous left, Next
   right — since they are compact. Only shrink padding a touch if space is
   tight. Astra sets width:100% on the wrappers at ≤420px, so override that
   and size each card to its content. */
@media (max-width: 600px) {
    .single .post-navigation .nav-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.75rem;
    }
    .single .post-navigation .nav-previous,
    .single .post-navigation .nav-next {
        width: auto;
        flex: 0 1 auto;
        margin: 0;
    }
    /* Keep Previous on the left; if the row cannot hold both, Next wraps to
       the next line and stays right-aligned (per the accepted fallback). */
    .single .post-navigation .nav-previous { margin-right: auto; }
    .single .post-navigation .nav-next { margin-left: auto; text-align: right; }
    .single .post-navigation .nav-previous a,
    .single .post-navigation .nav-next a {
        padding: 0.6rem 0.85rem;
    }
}

/* ── "View … volunteer profile →" link inside article content ───────────── */
/* These obituary posts end with a plain link to the person's /volunteer/
   profile. Style it as a clear call-to-action button that matches the theme
   accent. Targets a link to a /volunteer/ URL that is the only thing in its
   paragraph. */
.single .entry-content p > a[href*="/volunteer/"]:only-child {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    background: var(--gold, #a9822f);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.single .entry-content p > a[href*="/volunteer/"]:only-child:hover,
.single .entry-content p > a[href*="/volunteer/"]:only-child:focus-visible {
    background: var(--fg, #1a2a3a);
    color: #ffffff;
    transform: translateY(-1px);
}

/* ── General inline link treatment inside article content ───────────────── */
/* Give ordinary in-content links (citations, source names, cross-links) a
   consistent, legible style instead of Astra's default flat blue: the theme
   gold accent with an underline affordance that strengthens on hover. The
   standalone volunteer-profile CTA button above is more specific, so it keeps
   its button look. */
.single .entry-content a:not([class]) {
    color: var(--gold, #a9822f);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--gold, #a9822f) 45%, transparent);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.single .entry-content a:not([class]):hover,
.single .entry-content a:not([class]):focus-visible {
    color: var(--fg, #1a2a3a);
    text-decoration-color: currentColor;
}

/* Keep the CTA button's underline off even though it is classless. */
.single .entry-content p > a[href*="/volunteer/"]:only-child {
    text-decoration: none;
}