/*
 * mod_jpc_sociallinks - default styles (round outline buttons, designed for a dark footer).
 *
 * Easy to override: change the --jpc-sl-* tokens below from your template CSS, from the module's
 * "Custom CSS" box ({module} = this module), or replace the rules. Literal values live only in the token block.
 */

.jpc-social {
  /* tokens */
  --jpc-sl-gap: 0.6rem;
  --jpc-sl-size: 2.75rem;
  --jpc-sl-icon: 1.4rem;
  --jpc-sl-color: var(--color-on-primary, #fff);
  --jpc-sl-border: 1px solid #ffffff80;
  --jpc-sl-radius: 50%;
  --jpc-sl-hover-bg: #fff;
  --jpc-sl-hover-color: var(--color-primary-dark, #344E2C);
  --jpc-sl-focus: var(--color-gold-on-dark, #E3BC4B);
  --jpc-sl-outline: 3px;
  --jpc-sl-lh: 1;

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

.jpc-social__link {
  display: grid;
  place-items: center;
  width: var(--jpc-sl-size);
  height: var(--jpc-sl-size);
  border: var(--jpc-sl-border);
  border-radius: var(--jpc-sl-radius);
  color: var(--jpc-sl-color);
  text-decoration: none;
}
.jpc-social__link:hover { background: var(--jpc-sl-hover-bg); color: var(--jpc-sl-hover-color); }
.jpc-social__link:focus-visible { outline: var(--jpc-sl-outline) solid var(--jpc-sl-focus); outline-offset: 2px; }

.jpc-social__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; }