/* ========================================================================
   KarPayı — Public Footer (lazy)
   v0.66.10.1.2.1 FE-FOOTER-VISUAL-REBALANCE — visual polish pass on the
   v0.66.10.1.2 foundation.

   Class contract preserved in full (see tests/Unit/Templates/FooterContractTest).
   Markup untouched for _column and _bottom; _intro moves the methodology
   note under the tagline and retires the orphan status chip — the
   disabled social icons now carry the "soon" reading on their own.

   Load AFTER: design-tokens.css → foundation.css → app.css
   Active at all breakpoints; mobile stacks columns, desktop keeps the
   five-column grid. Companion to mega-menu.css + mobile-drawer.css as
   the third public shell asset.

   Class family (BEM): `kp-footer__*`.
   Contract: design-system-agreement.md §15 Footer Contract.
   ======================================================================== */


/* =====================================================================
   1. FOOTER OUTER — surface + layout container
   ===================================================================== */
.kp-footer {
  margin-top: var(--space-8);
  padding: var(--space-8) 0 var(--space-5);
  background: var(--surface-2);
  color: var(--text-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.kp-footer__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  display: grid;
  gap: var(--space-6);
}

.kp-footer__divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}


/* =====================================================================
   2. INTRO — brand block (brand + tagline + methodology) + meta (social)
   ===================================================================== */
.kp-footer__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .kp-footer__intro {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

.kp-footer__brand-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.kp-footer__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-1);
  transition: color var(--duration-fast) var(--ease-out);
}

.kp-footer__brand:hover,
.kp-footer__brand:focus-visible {
  color: var(--primary);
}

.kp-footer__brand-logo {
  font-family: var(--kp-font, inherit);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
}

.kp-footer__brand-logo-accent {
  color: var(--primary);
}

.kp-footer__tagline {
  margin: 0;
  color: var(--text-1);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  max-width: 44ch;
}

.kp-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

@media (min-width: 768px) {
  .kp-footer__meta {
    align-items: flex-end;
  }
}

.kp-footer__meta-note {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  max-width: 52ch;
}


/* =====================================================================
   3. SOCIAL — borderless flat tiles; disabled dims via text color
   ===================================================================== */
.kp-footer__social {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kp-footer__social-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  border: 0;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.kp-footer__social-item svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

.kp-footer__social-item:hover,
.kp-footer__social-item:focus-visible {
  color: var(--text-1);
  background: var(--surface-1);
}

.kp-footer__social-item--disabled {
  color: var(--text-3);
  cursor: default;
}

.kp-footer__social-item--disabled:hover,
.kp-footer__social-item--disabled:focus-visible {
  color: var(--text-3);
  background: transparent;
}

/* Status wrapper retired in v0.66.10.1.2.1 — disabled social icons now
   carry the "soon" reading. Class definition retained for downstream
   selectors and the footer class contract. */
.kp-footer__status {
  display: none;
}


/* =====================================================================
   4. GRID — 5 semantic columns (mobile: stack, tablet: 2, desktop: 5)
   ===================================================================== */
.kp-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-4);
}

@media (min-width: 576px) {
  .kp-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .kp-footer__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }
}

.kp-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.kp-footer__heading {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps, 0.06em);
  text-transform: uppercase;
  color: var(--text-1);
  line-height: 1.2;
}


/* =====================================================================
   5. LIST + ITEMS
   ===================================================================== */
.kp-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kp-footer__item {
  margin: 0;
  padding: 0;
}

.kp-footer__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  transition: color var(--duration-fast) var(--ease-out);
}

.kp-footer__link:hover,
.kp-footer__link:focus-visible {
  color: var(--primary);
}

.kp-footer__link--disabled {
  color: var(--text-3);
  cursor: default;
}

.kp-footer__link--disabled:hover,
.kp-footer__link--disabled:focus-visible {
  color: var(--text-3);
}

.kp-footer__link-label {
  min-width: 0;
}

/* Badge at the link suffix. Markup keeps the .kp-chip family so the
   footer contract test is satisfied, but the pill surface is stripped:
   it renders as a quiet caption-sized micro-label in text-3. */
.kp-footer__link-badge,
.kp-footer__link-badge.kp-chip,
.kp-footer__link-badge.kp-chip--sm,
.kp-footer__link-badge.kp-chip--muted {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--text-3);
  font-size: 0.6875rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-inline-start: 0.25rem;
  white-space: nowrap;
}


/* =====================================================================
   6. BOTTOM BAR — copyright left, legal + crawl inline, version right
   ===================================================================== */
.kp-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

@media (min-width: 768px) {
  .kp-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
  }
}

.kp-footer__copyright {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35ch;
  color: var(--text-3);
}

@media (min-width: 768px) {
  .kp-footer__copyright {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.kp-footer__copyright-mark,
.kp-footer__copyright-year,
.kp-footer__copyright-brand,
.kp-footer__copyright-rights {
  white-space: nowrap;
}

.kp-footer__copyright-brand {
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.kp-footer__copyright-rights {
  color: var(--text-3);
}

.kp-footer__legal,
.kp-footer__crawl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}

.kp-footer__legal-item,
.kp-footer__crawl-item {
  margin: 0;
  padding: 0;
}

.kp-footer__legal-link,
.kp-footer__crawl-link {
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.kp-footer__legal-link:hover,
.kp-footer__legal-link:focus-visible,
.kp-footer__crawl-link:hover,
.kp-footer__crawl-link:focus-visible {
  color: var(--text-1);
}

.kp-footer__legal-link--disabled {
  color: var(--text-3);
  cursor: default;
  opacity: 0.7;
}

.kp-footer__legal-link--disabled:hover,
.kp-footer__legal-link--disabled:focus-visible {
  color: var(--text-3);
}

.kp-footer__version {
  margin: 0;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
}


/* =====================================================================
   7. DARK MODE — semantic tokens drive most of the swap; localize the
      outer surface so the footer still sits one plane below the body.
   ===================================================================== */
[data-theme="dark"] .kp-footer {
  background: var(--bg);
  border-top-color: var(--border);
}

[data-theme="dark"] .kp-footer__social-item:hover,
[data-theme="dark"] .kp-footer__social-item:focus-visible {
  color: var(--text-1);
  background: var(--surface-1);
}


/* =====================================================================
   8. REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kp-footer__brand,
  .kp-footer__social-item,
  .kp-footer__link,
  .kp-footer__legal-link,
  .kp-footer__crawl-link {
    transition: none;
  }
}