/**
 * Planning Center Connection — Shared Components
 *
 * Defines the design-system components used across multiple widgets:
 *   - .wcpc-pill (with variants)
 *   - .wcpc-card (BEM anatomy; --compact variant for related strips)
 *   - .wcpc-button (primary / ghost — matches Kit button)
 *   - .wcpc-section (titled detail-page content block)
 *   - .wcpc-callout (cross-link strip)
 *   - .wcpc-grid (card grid)
 *
 * Every selector is scoped under `.wcpc-pco` per §7 of DESIGN-SYSTEM.md.
 * Legacy class aliases (`.wcpc-pco-event-card`, `.wcpc-pco-event-card__tag`,
 * `.wcpc-pco-filter-bar__chip`, etc.) are paired with the new BEM classes via
 * selector grouping so existing markup and any user CSS continue to match
 * during the v0.20 transition. Legacy aliases are slated for removal in v0.21.
 *
 * Load order: (WCPC Core tokens.css -> card.css) -> design-tokens.css ->
 *             components.css -> frontend.css
 *
 * Ported from sibling WCPC Sermon Manager v1.94.1 so both plugins render
 * identically on the same page.
 *
 * @package WCPC\PCO
 * @since   0.20.0
 */

/* ============================================================
   Pill / Chip
   ============================================================ */

.wcpc-pco .wcpc-pill,
.wcpc-pco .wcpc-pco-event-card__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--pl-space-1);
    font-family: var(--pl-font-accent);
    font-weight: 600;
    font-size: var(--pl-font-size-micro);
    line-height: 1.4;
    text-transform: none;              /* sentence case — uppercase is the eyebrow's (0.41.0) */
    letter-spacing: 0;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: var(--pl-radius-pill);
    background: var(--pl-surface-alt);
    color: var(--pl-text-muted);
    text-decoration: none;
    transition: background-color var(--pl-transition-fast),
                color var(--pl-transition-fast),
                border-color var(--pl-transition-fast);
}

.wcpc-pco a.wcpc-pill {
    cursor: pointer;
}

.wcpc-pco a.wcpc-pill:hover {
    background: var(--pl-tint-blue);
    color: var(--pl-text-on-blue);
    text-decoration: none;
}

.wcpc-pco .wcpc-pill:focus-visible {
    outline: none;
    box-shadow: var(--pl-focus-ring);
}

/* Variants */

.wcpc-pco .wcpc-pill--info {
    background: var(--pl-tint-blue);
    color: var(--pl-text-on-blue);
}

.wcpc-pco .wcpc-pill--success {
    background: var(--pl-tint-green);
    color: var(--pl-color-success-text);
}

.wcpc-pco .wcpc-pill--warn {
    background: var(--pl-tint-amber);
    color: var(--pl-color-warn-text);
}

.wcpc-pco .wcpc-pill--error {
    background: var(--pl-tint-rose);
    color: var(--pl-color-error-text);
}

.wcpc-pco .wcpc-pill--muted {
    background: var(--pl-surface-section);
    color: var(--pl-text-strong);
}

/*
 * Resolved chip colors (PC-23, v0.32). The widget emits --chip-bg/--chip-fg
 * plus per-term hook classes (.wcpc-pill--tone-plum, .wcpc-pill--cal-11415)
 * so the site stylesheet can override without plugin changes.
 */
.wcpc-pco .wcpc-pill--auto.wcpc-pill--auto {
    background: var(--chip-bg, rgba(52, 101, 127, 0.10));
    color: var(--chip-fg, var(--pl-color-primary));
}

.wcpc-pco a.wcpc-pill--auto.wcpc-pill--auto:hover {
    background: var(--chip-bg, rgba(52, 101, 127, 0.12));
    color: var(--chip-fg, var(--pl-color-primary));
    filter: brightness(0.96);
}

/*
 * The doubled class above is deliberate (v0.35.0). Our widgets render inside
 * an Elementor wrapper that also carries `.wcpc-sermons`, and Sermon Manager's
 * components.css declares `.wcpc-sermons .wcpc-pill--info { background: … }`
 * at the same specificity as the single-class form. It loads after us, so it
 * won every tie and the resolved --chip-bg / --chip-fg never applied — chips
 * silently fell back to the flat info style. Most visible on the navy event
 * hero, where the fallback is a 10%-opacity navy tint on navy: invisible.
 * Chaining the class buys one point of specificity and settles it regardless
 * of enqueue order.
 */

/*
 * Dark blue is the only solid-fill tone — on the navy hero band it would
 * disappear entirely (navy on navy). A soft white inner ring keeps it
 * defined there while staying near-invisible against the chip's own navy
 * fill on light surfaces.
 */
.wcpc-pco .wcpc-pill--auto.wcpc-pill--tone-dark-blue {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* Optional icon inside a pill */
.wcpc-pco .wcpc-pill svg,
.wcpc-pco .wcpc-pill i {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

/* ============================================================
   Card
   ============================================================

   0.43.0 — the card anatomy (frame, hover, media, body, eyebrow, title,
   meta, summary, chips row, footer, CTA, emblem tile, date chip, row /
   person / compact variants and the grid presets) is styled by WCPC Core's
   card.css (`.wcpc-card …`), which every WCPC plugin shares and which loads
   before this sheet. Only the PCO-specific pieces stay here.
   ============================================================ */

/* Radius size buckets (Elementor radius control aliases) */
.wcpc-pco .wcpc-card--radius-sm { border-radius: var(--pl-radius-sm); }
.wcpc-pco .wcpc-card--radius-md { border-radius: var(--pl-radius-md); }
.wcpc-pco .wcpc-card--radius-lg { border-radius: var(--pl-radius-lg); }

/* Hidden by a visitor filter (calendar / event grids). */
.wcpc-pco .wcpc-pco-event-card.is-hidden {
    display: none !important;
}

/* ============================================================
   Card Grid
   ============================================================ */

.wcpc-pco .wcpc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pl-space-5);
}

.wcpc-pco .wcpc-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .wcpc-pco .wcpc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .wcpc-pco .wcpc-grid,
    .wcpc-pco .wcpc-grid--wide { grid-template-columns: 1fr; }
}

/* ============================================================
   Button (Kit-matched)
   ============================================================ */

.wcpc-pco .wcpc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pl-space-2);
    /* Open Sans (body), title case — per DESIGN-SYSTEM.md §3.5 (2026-05-29).
       Was Roboto/uppercase; the church voice reads warmer in title case. */
    font-family: var(--pl-font-body);
    font-weight: 500;
    font-size: var(--pl-font-size-body);
    line-height: 1.2;
    text-transform: capitalize;
    letter-spacing: normal;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--pl-radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--pl-transition-fast),
                color var(--pl-transition-fast),
                border-color var(--pl-transition-fast);
}

.wcpc-pco .wcpc-button--primary {
    background: var(--pl-color-primary);
    color: var(--pl-text-on-primary);
}

.wcpc-pco .wcpc-button--primary:hover {
    background: var(--pl-color-primary-dark);
    color: var(--pl-text-on-primary);
}

.wcpc-pco .wcpc-button--ghost {
    background: transparent;
    color: var(--pl-color-primary);
    border-color: var(--pl-color-primary);
}

.wcpc-pco .wcpc-button--ghost:hover {
    background: var(--pl-color-primary);
    color: var(--pl-text-on-primary);
}

.wcpc-pco .wcpc-button:focus-visible {
    outline: none;
    box-shadow: var(--pl-focus-ring);
}

.wcpc-pco .wcpc-button[disabled],
.wcpc-pco .wcpc-button.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Global link-colour guard (v0.33.0).
   Elementor's Theme Style "link colour" compiles to a selector scoring ~18
   classes (`.elementor-kit-N .elementor-widget-container *:not(...) > a:not(...)`),
   which outranks every per-widget rule Elementor itself emits. Our buttons are
   anchors, so they were repainted in the link colour wherever a widget sits
   inside `.elementor-widget-container` — on `--primary` that meant navy text on
   a navy fill and an invisible label. Specificity cannot win against that
   selector, so the component asserts its own contract here. Widgets that expose
   a Text colour control emit `!important` from their own `{{WRAPPER}}` rule, so
   the panel still overrides this. */
.wcpc-pco .wcpc-button--primary {
    color: var(--pl-text-on-primary) !important;
}

.wcpc-pco .wcpc-button--primary:hover {
    color: var(--pl-text-on-primary) !important;
}

.wcpc-pco .wcpc-button--ghost {
    color: var(--pl-color-primary) !important;
}

.wcpc-pco .wcpc-button--ghost:hover {
    color: var(--pl-text-on-primary) !important;
}

/* ============================================================
   Detail section
   A titled content block — Description, Upcoming dates, Location, etc.
   One heading style + spacing rhythm so every section on a detail page
   reads as one family.

   Anatomy:
     .wcpc-section
       .wcpc-section__title   (h2)
       .wcpc-section__body
   ============================================================ */

.wcpc-pco .wcpc-section {
    margin: 0 0 var(--pl-space-7);
}

.wcpc-pco .wcpc-section:last-child {
    margin-bottom: 0;
}

.wcpc-pco .wcpc-section__title {
    font-family: var(--pl-font-display);
    font-weight: 700;
    font-size: var(--pl-font-size-h4);   /* 24px */
    line-height: 1.2;
    color: var(--pl-text-strong);
    margin: 0 0 var(--pl-space-4);
}

.wcpc-pco .wcpc-section__body {
    font-family: var(--pl-font-body);
    font-size: var(--pl-font-size-body);
    line-height: 1.6;
    color: var(--pl-text-strong);
}

/* Collapse stray outer margins so section spacing stays predictable
   regardless of what the body content leads/trails with. */
.wcpc-pco .wcpc-section__body > :first-child {
    margin-top: 0;
}

.wcpc-pco .wcpc-section__body > :last-child {
    margin-bottom: 0;
}

/* ============================================================
   Cross-link callout
   A slim horizontal strip that links one item to a related one.
   Icon + text block + CTA, with the CTA pinned to the right edge.
   The whole strip is usually the link (a.wcpc-callout).

   Anatomy:
     .wcpc-callout
       .wcpc-callout__icon
       .wcpc-callout__text
         .wcpc-callout__label
         .wcpc-callout__title
       .wcpc-callout__cta
   ============================================================ */

.wcpc-pco .wcpc-callout {
    display: flex;
    align-items: center;
    gap: var(--pl-space-3);
    padding: var(--pl-space-3) var(--pl-space-4);
    border: 1px solid var(--pl-border-hairline);
    border-radius: var(--pl-radius-md);
    background: var(--pl-surface-card);
    color: var(--pl-text-strong);
    font-family: var(--pl-font-body);
    font-size: var(--pl-font-size-small);
    text-decoration: none;
    transition: border-color var(--pl-transition-fast),
                box-shadow var(--pl-transition-base),
                transform var(--pl-transition-base);
}

.wcpc-pco a.wcpc-callout:hover {
    border-color: var(--pl-color-primary);
    box-shadow: var(--pl-shadow-sm);
    transform: translateY(-2px);
}

.wcpc-pco a.wcpc-callout:focus-visible {
    outline: none;
    box-shadow: var(--pl-focus-ring);
}

.wcpc-pco .wcpc-callout__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pl-text-strong);
    font-size: 1.25em;
    line-height: 1;
}

.wcpc-pco .wcpc-callout__text {
    display: inline;
    color: var(--pl-text-strong);
    font-family: var(--pl-font-body);
    font-size: var(--pl-font-size-small);
    line-height: 1.4;
    min-width: 0;
}

.wcpc-pco .wcpc-callout__label {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-transform: none;
    letter-spacing: 0;
    color: inherit;
}

.wcpc-pco .wcpc-callout__separator {
    color: inherit;
    white-space: pre;
}

.wcpc-pco .wcpc-callout__title {
    font: inherit;
    color: inherit;
}

.wcpc-pco .wcpc-callout__cta {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--pl-space-1);
    white-space: nowrap;
    font-family: var(--pl-font-body);
    font-weight: 400;
    color: var(--pl-text-strong);
}

.wcpc-pco .wcpc-callout__cta-text {
    text-decoration: underline;
}

.wcpc-pco .wcpc-callout__cta-arrow {
    flex-shrink: 0;
    transition: transform var(--pl-transition-fast);
}

.wcpc-pco a.wcpc-callout:hover .wcpc-callout__cta-arrow {
    transform: translateX(2px);
}

@media (max-width: 600px) {
    .wcpc-pco .wcpc-callout {
        flex-wrap: wrap;
    }
    .wcpc-pco .wcpc-callout__cta {
        margin-left: 0;
    }
}

/* ============================================================
   Reduced motion — neutralize transitions inside .wcpc-pco
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .wcpc-pco *,
    .wcpc-pco *::before,
    .wcpc-pco *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}