/* ============================================================================
   footer.css — self-contained stylesheet for the app-footer module descendants
   ----------------------------------------------------------------------------
   The <app-footer> ROOT keeps its tag; this file styles the renamed footer-*
   descendants (breadcrumb trail + directory columns):

     app-footer (root — unchanged)
     ├─ footer-breadcrumb                       (hosts the breadcrumb)
     │  └─ footer-breadcrumb-section > -pane > -frame > -inner > -trail
     │       └─ footer-breadcrumb-item ×3 > footer-label-wrap > a | footer-label
     └─ footer-directory
        └─ footer-directory-section > -pane > -frame
             └─ footer-directory-column ×4 > footer-directory-links
                  ├─ footer-directory-item > footer-label-wrap > footer-label | a
                  └─ footer-divider  "—"

   Same contract as calendar.css/accordion.css. Native <a> links stay native.
   ========================================================================== */

/* ── Structure ───────────────────────────────────────────────────────────── */
footer-breadcrumb,
footer-directory {
  display: grid;
  gap: calc(var(--size-5, 16) * 1px);
  align-content: baseline;
  width: stretch;
}
footer-breadcrumb-section,
footer-directory-section {
  display: grid;
  gap: calc(var(--size-3, 4) * 1px);
  width: stretch;
}
footer-breadcrumb-pane,
footer-directory-pane {
  display: grid;
  gap: calc(var(--size-3, 4) * 1px);
}
footer-breadcrumb-frame,
footer-directory-frame {
  display: grid;
  gap: calc(var(--size-5, 16) * 1px);
}
footer-breadcrumb-inner,
footer-directory-column {
  display: flex;
  flex-direction: column;
  gap: calc(var(--size-5, 16) * 1px);
  width: 100%;
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
}
footer-breadcrumb-trail,
footer-directory-links {
  display: flex;
  gap: calc(var(--size-3, 4) * 1px);
}

/* ── Items ([bare] chips: layout + cursor only) ──────────────────────────── */
footer-breadcrumb-item,
footer-directory-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--size-3, 4) * 1px);
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  align-content: center;
  cursor: pointer;
}
footer-breadcrumb-item *,
footer-directory-item * {
  cursor: pointer;
}

/* ── Leaves ──────────────────────────────────────────────────────────────── */
footer-label-wrap {
  display: block;
  width: stretch;
  white-space: nowrap;
}
footer-label {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}
/* Column divider "—" (keeps data-id="lang-divider"). */
footer-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  width: 1em;
  margin: 0;
  padding: 0;
  border: none;
  align-self: center;
  flex-shrink: 0;
}

/* ── Staged-reveal parity (overlay-guarded) ──────────────────────────────── */
footer-label,
footer-divider {
  transition: opacity calc(var(--size-9, 256) * 1ms) ease-in 0ms;
}
body[data-loading-overlay]:not([loaded]) footer-label,
body[data-loading-overlay]:not([loaded]) footer-divider,
body[data-loading-overlay]:not([visible]) footer-label,
body[data-loading-overlay]:not([visible]) footer-divider {
  opacity: calc(var(--size-1, 1) * 0);
}
body[data-loading-overlay][visible] footer-label,
body[data-loading-overlay][visible] footer-divider {
  opacity: calc(var(--size-10, 512) * 0.1);
}

/* ── Print parity ─────────────────────────────────────────────────────────────
   Pre-rename the footer PRINTED (container{display:none} always lost to [grid])
   with the generic-tag print treatment — mirror it: container zeros, section
   16px white box, content zeros + break-avoid, group-control break-avoid. */
@media print {
  footer-breadcrumb,
  footer-directory {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    gap: 0 !important;
  }
  footer-breadcrumb-section,
  footer-directory-section {
    margin: calc(var(--size-5, 16) * 1px) !important;
    margin-left: calc(var(--size-5, 16) * 1px) !important;
    margin-right: calc(var(--size-5, 16) * 1px) !important;
    padding: calc(var(--size-5, 16) * 1px) !important;
    min-height: auto !important;
    max-width: none !important;
    gap: 0 !important;
    background: var(--color-white, #ffffff) !important;
  }
  footer-breadcrumb-pane,
  footer-directory-pane {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    gap: 0 !important;
    page-break-inside: avoid;
  }
  footer-breadcrumb-frame,
  footer-directory-frame {
    break-inside: avoid;
  }
}