/* =====================================================================
   CONTENT ENGAGEMENT (Global Component) — v0.66.10.15.5.3
   Phase 1 contract:
     - [data-share-rail] wrapper hosts the action set; surface-specific
       wrappers add their own layout class (`.kp-action-rail` desktop
       3×2 grid, `.kp-share-row` mobile horizontal, `.kp-footer-site-share`
       footer site-wide share).
     - Selectors live under the global `.kp-` namespace; they are NOT
       page- or article-scoped. Any surface that ships a [data-share-rail]
       wrapper inherits the same look without inventing its own family.
     - Orphan classes from the v0.66.10.15.5.2.x rounds (kp-share-sidebar
       legacy desktop column, kp-engagement-secondary* bookmark pill that
       got promoted into the primary action set in 15.5.2.2) were
       retired here so the engagement CSS stays focused on the active
       contract.
   v0.66.10.15.5.3 extracted this block out of public-content.css so it
   can load on every public page (footer site-share renders globally,
   not only on content surfaces). The base public layout pulls this file
   into layout_styles alongside footer.css; content pages no longer need
   to ship engagement rules in their own CSS payload.
   ===================================================================== */

/* ── Share button base (used by .kp-share-row and .kp-footer-site-share)
     ──────────────────────────────────────────────────────────────────── */
.kp-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.kp-share-btn:hover {
  background: var(--surface-2);
  color: var(--primary);
  border-color: var(--primary);
}

/* ── Share row (Mobile content engagement) ─────────────────────────────
     v0.66.10.15.5.1.2 — single horizontal row of seven actions
     (like + bookmark + 5 share). flex-wrap is locked off so the row
     stays in a single line; if the viewport is too narrow for 7×44px
     touch targets, the row scrolls horizontally rather than wrapping. */
.kp-share-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}
.kp-share-row::-webkit-scrollbar {
  height: 4px;
}
.kp-share-row .kp-share-btn {
  flex: 0 0 auto;
}

/* Like state in the mobile share row — primary brand tint, mirrors
   the desktop .kp-action-btn--like.is-active rule. */
.kp-share-btn--like.is-active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface-2);
}

/* Bookmark active state in the mobile share row — v0.66.10.15.5.2.3.
   Outline → filled is driven by the sprite swap; the surface change
   here mirrors the like active rule so the engagement family reads
   as one signal set. */
.kp-share-btn--bookmark.is-active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface-2);
}

/* Mobile like button hosts the icon + counter side-by-side, so the
   circular share-btn shape stretches into a pill. The other share
   buttons remain perfect circles. v0.66.10.15.5.1.7 polish. */
.kp-share-btn--like {
  width: auto;
  min-width: 40px;
  padding: 0 0.625rem;
  border-radius: 999px;
}

/* Like counter — v0.66.10.15.5.1.6 polish. The span is hidden via
   Alpine x-show when likeCount === 0 and printed inline next to the
   heart sprite when ≥ 1. Inherits color from the parent button so
   the active-state primary tint reaches the count without extra
   binding. tabular-nums keeps the digits column-aligned across
   single-/double-/triple-digit transitions. */
.kp-engagement-like-count {
  margin-left: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

/* Login CTA — flashes when an anonymous bookmark click is rejected by
   the backend (HTTP 401). Handled in the engagement JS module via the
   bookmarkLoginRequired flag. */
.kp-engagement-login-cta {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
}

/* ── Right rail (Desktop content engagement) ──────────────────────────
     v0.66.10.15.4 FE-ARTICLE-RIGHT-SHARE-LIKE-RAIL. A single sticky
     wrapper hosts the TOC at the top and the 2×3 action grid at the
     bottom. Wrapper owns the sticky offset; the nested .kp-toc loses
     its own sticky/overflow so it flows naturally inside the column,
     while the action rail sits at the bottom with a separator border
     so it always reads as a discrete surface. */
.kp-right-rail {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: calc(100vh - 8rem);
}

.kp-right-rail .kp-toc {
  position: static;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Desktop action grid — 3 columns × 2 rows (v0.66.10.15.5 Phase 1).
   Order: Like → WhatsApp → X → Facebook → Email. */
.kp-action-rail {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.kp-action-rail .kp-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.kp-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
}

.kp-action-btn:hover {
  background: var(--surface-2);
  color: var(--primary);
  border-color: var(--primary);
}

.kp-action-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.kp-action-btn:active {
  transform: scale(0.96);
}

.kp-action-btn[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.kp-action-btn--like.is-active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface-2);
}

.kp-action-btn--like.is-active:hover {
  background: var(--surface-2);
  color: var(--primary);
}

/* Bookmark active state on the desktop rail — v0.66.10.15.5.2.3.
   Same primary-tint envelope as the like active rule so idle vs
   saved is visible at a glance without inventing a second active
   palette inside the engagement surface. */
.kp-action-btn--bookmark.is-active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface-2);
}

.kp-action-btn--bookmark.is-active:hover {
  background: var(--surface-2);
  color: var(--primary);
}

/* ── Footer site-share (v0.66.10.15.5.3) ──────────────────────────────
     Site-wide share block that lives in the public footer between the
     navigation grid and the legal bottom bar. Distinct from the
     "follow us" social icons in _intro.html.twig — this surface invites
     visitors to recommend the entire site (content_type=site) rather
     than the specific page they are reading. Action set is intentionally
     calm: WhatsApp, X, LinkedIn, Facebook (no email, no like, no
     bookmark) so the block reads as a quiet invitation, not a
     marketing spike — Gemini UX review locked the YMYL/finance posture.
     Buttons follow the text + icon side-by-side pattern so the
     platform name carries the click affordance even for screen-only
     readers; aria-label still surfaces the full "X ile Paylaş" phrasing
     for assistive tech. */
.kp-footer-site-share {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem 0;
}

.kp-footer-site-share__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
}

.kp-footer-site-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Footer pill — v0.66.10.15.5.3.1 visual balance pass.
   `min-width` keeps the X pill (single-character label) from
   collapsing into a square next to the longer-labelled WhatsApp /
   Facebook / LinkedIn pills, so the four buttons read as a single
   rhythm without forcing the same width on the WhatsApp pill that
   naturally needs more room. `justify-content: center` keeps the
   icon + label pair centred inside the rounded shell so the
   asymmetric label widths still feel quiet. The icon is a touch
   bigger (1.125rem) than the v15.5.3 baseline so the brand glyph
   carries enough weight next to the short label. */
.kp-footer-site-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  min-width: 6rem;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
}

.kp-footer-site-share__btn:hover {
  background: var(--surface-2);
  color: var(--primary);
  border-color: var(--primary);
}

.kp-footer-site-share__btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.kp-footer-site-share__btn:active {
  transform: scale(0.97);
}

.kp-footer-site-share__btn .kp-icon-sm {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

/* ── Print + reduced-motion ──────────────────────────────────────────── */
@media print {
  .kp-action-rail,
  .kp-share-row,
  .kp-footer-site-share {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kp-action-btn,
  .kp-footer-site-share__btn {
    transition: none;
  }
  .kp-action-btn:active,
  .kp-footer-site-share__btn:active {
    transform: none;
  }
}