/* ==========================================================================
   KF Elements — Social
   --------------------------------------------------------------------------
   A quiet band: an optional head and one row of outbound links. Until the
   site lists an account a VISITOR gets no markup at all, so nothing here
   styles an empty state for them; an EDITOR gets the band with a notice in
   the links' place (the operator's ruling of 2026-09-23, ADR-0006's dated
   sections), drawn as a dashed panel so it reads as an instruction to the
   person who can act on it and never as part of the design.

   No font request, no image, no `url()` to any host, no @import: a social
   band that fetches anything is exactly the failure the widget's consent
   gate exists to prevent. An icon is Elementor's own library or an SVG from
   the site's own media, drawn inline by Elementor.

   Tokens only: every colour reads a --kfe-* custom property from base.css,
   or the pack's own `#fff` / `rgba(…)` dark-ground idioms. NO SITE'S VALUE
   LIVES HERE.
   ========================================================================== */

/* THE PADDING IS DECLARED HERE, and it reads the frame's tokens itself for
   the reason reviews.css gives: `.kfe .kfe-social` is (0,2,0) and shadows
   `.kfe-section`'s own token padding at (0,1,0), so without the read an
   instance's `section_padding` would write its two tokens and paint nothing.
   The fallback is 5vh, the reviews band's: a band of links is not a 13vh
   section. */
.kfe .kfe-social { padding: var(--kfe-section-pad-start, 5vh) 0 var(--kfe-section-pad-end, 5vh); }

/* The head. A new widget, so every level carries the class. */
.kfe .kfe-social .head { text-align: var(--kfe-head-align, center); margin-bottom: 22px; }
.kfe .kfe-social .head .kfe-social-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  letter-spacing: -0.01em;
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0;
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.4rem, 2.4vw, 1.8rem)));
  line-height: 1.2;
}
.kfe .kfe-social .kfe-social-intro {
  max-width: 660px;
  margin: 10px auto 0;
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, 16px);
  line-height: 1.6;
}
.kfe .kfe-social .kfe-social-intro p + p { margin-top: 1em; }

/* The row. It follows the head's alignment: `--kfe-head-align` is written as
   `start` or `center`, and both are valid `justify-content` values. */
.kfe .kfe-social .kfe-social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--kfe-head-align, center);
  align-items: center;
  gap: 12px 28px;
}
.kfe .kfe-social .kfe-social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--kfe-link, var(--kfe-accent));
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.kfe .kfe-social .kfe-social-link:hover,
.kfe .kfe-social .kfe-social-link:focus-visible {
  color: var(--kfe-accent-deep, var(--kfe-link, var(--kfe-accent)));
}
.kfe .kfe-social .kfe-social-link:hover .kfe-social-name,
.kfe .kfe-social .kfe-social-link:focus-visible .kfe-social-name { text-decoration: underline; }

/* The icon in a ring. NO UNCONDITIONAL `fill`, for the reason base.css gives
   for the card's bare icon: a stroked outline keeps its own `fill="none"`,
   and only an SVG with no fill of its own takes the link's colour. */
.kfe .kfe-social .kfe-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--kfe-line);
  font-size: 18px;
  line-height: 0;
}
.kfe .kfe-social .kfe-social-icon svg { width: 1em; height: 1em; }
.kfe .kfe-social .kfe-social-icon svg:not([fill]) { fill: currentColor; }
.kfe .kfe-social .kfe-social-icon i { font-style: normal; }

/* The editors' notice: a dashed panel with one sentence. Only a viewer who
   can edit ever receives this element. */
.kfe .kfe-social .kfe-social-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  border: 1px dashed var(--kfe-line);
  border-radius: 14px;
  background: var(--kfe-surface-deep);
  color: var(--kfe-body, var(--kfe-muted));
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
.kfe .kfe-social .kfe-social-notice p { margin: 0; }

/* dark-ground flips, in the pack's idiom */
.kfe .kfe-social.kfe-dark .head .kfe-social-title { color: #fff; }
.kfe .kfe-social.kfe-dark .kfe-social-intro { color: var(--kfe-on-dark); }
.kfe .kfe-social.kfe-dark .kfe-social-link { color: #fff; }
.kfe .kfe-social.kfe-dark .kfe-social-link:hover,
.kfe .kfe-social.kfe-dark .kfe-social-link:focus-visible { color: var(--kfe-on-dark-soft); }
.kfe .kfe-social.kfe-dark .kfe-social-icon { border-color: rgba(255, 255, 255, 0.28); }
.kfe .kfe-social.kfe-dark .kfe-social-notice {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--kfe-on-dark);
}

@media (max-width: 560px) {
  .kfe .kfe-social .kfe-social-list { gap: 10px 20px; }
}