/**********/
/* BASICS */
/**********/

a {
  color:var(--clr-link);
  
  text-underline-offset:.15em;
  text-decoration-thickness:.07em;

  outline-offset:.125em;
}

a:focus-visible {
  text-decoration-line:none;
  outline:solid .1rem var(--accent-color);
}





/**************/
/* LINK LIST */
/**************/

.list--links {
  display:grid;
  gap:calc(1.25em * var(--line-height-factor));
  font-variant-numeric: oldstyle-nums;
}





/*************/
/* LINK ICON */
/*************/

.link--icon {
  justify-self:start;
  min-height:2.6em;
  padding-right:.5em;

  display:grid;
  grid-template-columns: 2.6em 1fr;
  column-gap:.5em;
  align-items:center;
  
  text-decoration-line:none;
  color:var(--clr-root);
  text-wrap: balance;
  line-height: calc(1.3 * var(--line-height-factor));
}

.link--icon[href$="pdf"] {
  display:flex;
}

.link--icon svg {
  display:block;
  width:2.25em;
  height:2.25em;
  align-self: center;
  flex-shrink:0;
  justify-self:center;
}

.link--icon--two-lines {
  align-items:start;
}

.link--icon--two-lines svg {
  grid-row:span 2;
}

.link--icon em {
  font-weight:300;
  align-self:end;
}

/* hover */
.link--icon[href]:hover {
  text-decoration-line:underline;
}

/* current */
.link--icon[aria-current] {
  font-weight:700;
}

.link--icon[aria-current] em {
  font-weight:700;
}

.link--icon[aria-current]:hover {
  text-decoration-line:none;
  cursor:default;
}





/***************/
/* LINK SOCIAL */
/***************/

.list--links--socials ul {
  margin:0;
  padding:0;
  list-style: none;

  display:flex;
  column-gap:.5em;
}

@supports (list-style-type:"") {
  .list--links--socials ul {
    list-style:initial;
    list-style-type:"";
  }
} 

.link--social {
  display:grid;
  place-items:center;
  height:2.6em;
  width:2.6em;
  color:var(--clr-root);
}

.link--social svg {
  display:block;
  width:2em;
  height:2em;
}





/**************/
/* LINK ARROW */
/**************/

.link--arrow {
  display:inline-grid;
  align-items:center;
  gap:.25em;

  text-decoration-line:none;
}

.link--arrow--left {
  grid-template-columns:1.25em 1fr;
}

.link--arrow--right {
  grid-template-columns:1fr 1.25em;
}

.link--arrow > span:first-of-type {
  position:relative;
  
  display:block;
  width:1em;
  height:max(.075em, 1px);

  background-color:currentColor;

  transition:width .2s;
}

.link--arrow--left > span:first-of-type {
  justify-self:end;
  border-radius:1em 0 0 1em;
}

.link--arrow--right > span:first-of-type {
  order:1;
  justify-self:start;
  border-radius:0 1em 1em 0;
}


.link--arrow > span:first-of-type:before,
.link--arrow > span:first-of-type:after  {
  content:"";

  position:absolute;
  height:100%;
  width:.7em;

  border-radius:inherit;
  background-color:inherit;

  transition:inherit;
}

.link--arrow--left > span:first-of-type:before,
.link--arrow--left > span:first-of-type:after  {
  transform-origin:max(.0375em, .5px) 50%;
}

.link--arrow--right > span:first-of-type:before,
.link--arrow--right > span:first-of-type:after  {
  right:0;
  transform-origin:calc(100% - max(.0375em, .5px)) 50%;
}

.link--arrow--left > span:first-of-type:before {
  transform:rotate(45deg);
}
.link--arrow--left > span:first-of-type:after {
  transform:rotate(-45deg);
}

.link--arrow--right > span:first-of-type:before {
  transform:rotate(-45deg);
}
.link--arrow--right > span:first-of-type:after {
  transform:rotate(45deg);
}

/* hover and focus */
.link--arrow:hover { 
  text-decoration-line:underline;
}

:root[data-reduced-motion="no-preference"] .link--arrow:hover {
  text-decoration-line:none;
}

:root[data-reduced-motion="no-preference"] .link--arrow:hover > span:first-of-type,
:root[data-reduced-motion="no-preference"] .link--arrow:focus-visible > span:first-of-type {
  width:calc(1.25em + var(--gap) * .5);
}

:root[data-reduced-motion="no-preference"] .link--arrow:hover > span:first-of-type:before,
:root[data-reduced-motion="no-preference"] .link--arrow:hover > span:first-of-type:after,
:root[data-reduced-motion="no-preference"] .link--arrow:focus-visible > span:first-of-type:before,
:root[data-reduced-motion="no-preference"] .link--arrow:focus-visible > span:first-of-type:after {
  width:.3em;
}

@media only print {
  .link--arrow > span:first-of-type {
    display:none;
  }

  .link--arrow--left {
    grid-template-columns:1fr;
  }
  
  .link--arrow--right {
    grid-template-columns:1fr;
  }
}





/*******/
/* PDF */
/*******/

a[href$="pdf"]::after {
  content:" [pdf]";
}

a[href$="pdf"][data-size]::after {
  content:" [pdf\00a0" attr(data-size) "MB]";
}

/* PDF met span */
a[href$="pdf"]:has(span)::after {
  content:initial;
}

a[href$="pdf"]:has(span) span::after {
  content:" [pdf]";
}

a[href$="pdf"] span[data-size]::after {
  content:" [pdf\00a0" attr(data-size) "MB]";
}





/*********/
/* PRINT */
/*********/

@media only print {
  main a[href^="https://"]:after {
    content: " (" attr(href) ")";
  }
}