/*
 * mod_jpc_sociallinks - default styles.
 *
 * Three styles, chosen in the module: --outline (round outline buttons for dark backgrounds, the default),
 * --basic (plain icons in the template's link colour) and --boxed (solid squares).
 * Override by setting the --jpc-sl-* tokens from your template CSS. Literal values live only in the token blocks.
 */

.jpc-sociallinks {
  /* shared tokens */
  --jpc-sl-gap: 0.6rem;
  --jpc-sl-size: 2.75rem;
  --jpc-sl-icon: 1.4rem;
  --jpc-sl-pad: 0;
  --jpc-sl-color: #fff;
  --jpc-sl-bg: transparent;
  --jpc-sl-border: 1px solid #ffffff80;
  --jpc-sl-radius: 50%;
  --jpc-sl-hover-bg: #fff;
  --jpc-sl-hover-color: #344e2c;
  --jpc-sl-focus: #e3bc4b;
  --jpc-sl-outline: 3px;
  --jpc-sl-lh: 1;
}

.jpc-sociallinks--basic {
  --jpc-sl-gap: 0.5rem;
  --jpc-sl-size: auto;
  --jpc-sl-icon: 0.95rem;
  --jpc-sl-border: 0 none;
  --jpc-sl-radius: 0;
  --jpc-sl-focus: currentColor;
}

.jpc-sociallinks--boxed {
  --jpc-sl-gap: 0.5rem;
  --jpc-sl-size: auto;
  --jpc-sl-icon: 0.95rem;
  --jpc-sl-pad: 0.3rem;
  --jpc-sl-bg: #333;
  --jpc-sl-border: 0 none;
  --jpc-sl-radius: 3px;
  --jpc-sl-hover-bg: #000;
  --jpc-sl-hover-color: #fff;
  --jpc-sl-focus: currentColor;
}

.jpc-sociallinks__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jpc-sl-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jpc-sociallinks__link {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--jpc-sl-size);
  height: var(--jpc-sl-size);
  padding: var(--jpc-sl-pad);
  border: var(--jpc-sl-border);
  border-radius: var(--jpc-sl-radius);
  background: var(--jpc-sl-bg);
  text-decoration: none;
}

/* The basic style keeps the template's own link colour. */
.jpc-sociallinks--outline .jpc-sociallinks__link,
.jpc-sociallinks--boxed .jpc-sociallinks__link {
  color: var(--jpc-sl-color);
}

.jpc-sociallinks--outline .jpc-sociallinks__link:hover,
.jpc-sociallinks--boxed .jpc-sociallinks__link:hover {
  background: var(--jpc-sl-hover-bg);
  color: var(--jpc-sl-hover-color);
}

.jpc-sociallinks--basic .jpc-sociallinks__link:hover { opacity: 0.75; }

.jpc-sociallinks__link:focus-visible { outline: var(--jpc-sl-outline) solid var(--jpc-sl-focus); outline-offset: 2px; }

.jpc-sociallinks__icon {
  width: var(--jpc-sl-icon);
  height: var(--jpc-sl-icon);
  font-size: var(--jpc-sl-icon);
  line-height: var(--jpc-sl-lh);
  object-fit: contain;
}

/* Accessible name and new-window notice: hidden visually, still read by screen readers. */
.jpc-sociallinks__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}