/*
 * Secondary link — SD-52
 * Arrow icon + underlined label. Used in modules, footer, and nav.
 * Footer and other contexts may add scoped overrides (color, size).
 *
 * Structure:
 *   .dk-link.dk-link-secondary
 *     .dk-link-secondary-icon   (svg arrow)
 *     .dk-link-secondary-label
 *       .dk-link-secondary-text (visible label)
 *       .dk-link-secondary-line (underline bar, 4px below text)
 */

.dk-link-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--dk-space-01);    /* 8px between icon and label */
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-block-size: 2.75rem;    /* 44px touch target */
  padding: 0;
  text-decoration: none;
  user-select: auto;
}


.dk-link-secondary:focus-visible {
  outline: none;
  border-radius: 2px;
  box-shadow:
    0 0 0 2px var(--dk-color-black),
    0 0 0 4px var(--dk-color-white),
    0 0 0 8px var(--dk-color-focus);
}

/* Arrow icon */
.dk-link-secondary-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.dk-link-secondary-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Label: text + underline stacked */
.dk-link-secondary-label {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-00);    /* 4px between text and underline */
}

.dk-link-secondary-text {
  line-height: 1.2;
}

/* Underline bar — always 2px height reserved to prevent layout shift on hover */
.dk-link-secondary-line {
  display: block;
  inline-size: 100%;
  block-size: 2px;
  background: linear-gradient(to bottom, currentColor 1px, transparent 1px);
}

.dk-link-secondary:hover .dk-link-secondary-line {
  background: currentColor; /* full 2px on hover */
}