/* assets/css/_nexafolio-lists.scss */

/* Theme variables (override in :root or via inline style in preview) */
:root {
  --nex-primary: #1e73be;
  --nex-on-primary: #ffffff;
  --nex-muted: #cfd8dc;
  --nex-bg: transparent;
  --nex-gap: 0.75rem;
  --nex-icon-size: 1.25rem;
  --nex-font-size-sm: 0.9375rem;
  --nex-transition-fast: 180ms;
  --nex-focus-ring: 3px rgba(30,115,190,0.18);
}

/* Base list reset and layout */
.nex-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
  font-size: var(--nex-font-size-sm);
  color: inherit;
}

/* Footer contact list (Bootstrap friendly but independent) */
.nex-list--footer {
  display: flex;
  flex-direction: column;
  gap: var(--nex-gap);
  align-items: flex-start;
  padding-left: 0;
}

.nex-list--footer__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0;
  color: inherit;
  background: var(--nex-bg);
  border: 0;
  line-height: 1.2;
  transition: color var(--nex-transition-fast) ease, transform var(--nex-transition-fast) ease;
}

/* Icon wrapper */
.nex-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--nex-icon-size) + 0.25rem);
  height: calc(var(--nex-icon-size) + 0.25rem);
  font-size: var(--nex-icon-size);
  color: var(--nex-muted);
  flex: 0 0 auto;
}

/* Text wrapper (keeps IDs on small element for Customizer) */
.nex-list__text {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  word-break: break-word;
}

/* Links inside list items */
.nex-list__link {
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  padding: 0.125rem 0.25rem;
  transition: background var(--nex-transition-fast) ease, color var(--nex-transition-fast) ease;
}
.nex-list__link:hover,
.nex-list__link:focus {
  background: rgba(255,255,255,0.04);
  color: var(--nex-primary);
  outline: none;
}
.nex-list__link:focus {
  box-shadow: 0 0 0 var(--nex-focus-ring);
}

/* Social list layout */
.nex-list--social {
  display: flex;
  gap: var(--nex-gap);
  align-items: center;
  padding: 0;
  margin: 0;
}
.nex-list--social__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nex-list--social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: var(--nex-on-primary);
  transition: transform var(--nex-transition-fast) ease, background var(--nex-transition-fast) ease;
}
.nex-list--social__link:hover,
.nex-list--social__link:focus {
  transform: translateY(-3px);
  background: var(--nex-primary);
  color: var(--nex-on-primary);
  box-shadow: 0 6px 18px rgba(30,115,190,0.12);
}
.nex-list--social__link:focus {
  box-shadow: 0 0 0 var(--nex-focus-ring);
}

/* Remove underline but keep accessible focus/hover */
.nex-list__link,
.nex-list__text a,
.nex-list--social__link,
#nexafolio-footer-contact a {
  text-decoration: none;
  text-decoration-skip-ink: auto;
  -webkit-text-decoration-skip: ink;
  transition: color 180ms ease, background 180ms ease;
}

/* Ensure hover still gives a visible affordance */
.nex-list__link:hover,
.nex-list--social__link:hover,
#nexafolio-footer-contact a:hover {
  text-decoration: none;
  color: var(--nex-primary);
  background: rgba(255,255,255,0.04);
}

/* Strong visible focus for keyboard users */
.nex-list__link:focus,
.nex-list--social__link:focus,
#nexafolio-footer-contact a:focus {
  outline: none;
  box-shadow: 0 0 0 var(--nex-focus-width, 3px) var(--nex-focus-color, rgba(30,115,190,0.18));
  border-radius: 4px;
}

/* If you want to remove underline only on desktop but keep on print */
@media print {
  .nex-list__link,
  .nex-list--social__link,
  #nexafolio-footer-contact a {
    text-decoration: underline;
  }
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .nex-list--footer {
    flex-direction: column;
  }
  .nex-list--social {
    gap: calc(var(--nex-gap) * 1.25);
  }
}

/* High contrast and reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nex-list__link,
  .nex-list--social__link {
    transition: none;
  }
}

/* Print styles */
@media print {
  .nex-list--social,
  .nex-list--footer {
    color: #000;
  }
  .nex-list--social__link {
    background: none;
    box-shadow: none;
  }
}