/* ===========================================================================
   hsb-tekstlinks.css — links in lopende tekst

   Gaat alleen over links MIDDEN IN een alinea: in een artikel, in de
   themateksten, in de omschrijving van een lezing. Niet over het menu, de
   knoppen, de kaarten of de voet -- die hebben hun eigen vorm en blijven
   zoals ze zijn. Vandaar dat elke regel hieronder aan een tekstblok hangt
   en er nergens een kale `a {}` staat.

   WAAROM NIET GEWOON EEN ANDERE KLEUR

   De huisblauwe #103856 leest prachtig op wit (12,2:1), maar het verschil
   met de lopende tekst #1d2733 is maar 1,2:1. Als kleur alleen het verschil
   moet maken, ziet niemand dat het een link is. De richtlijn vraagt
   daarvoor 3:1.

   Een streep lost dat op, en dan hoeft de kleur niet te schreeuwen. Daarom:
   huisblauw met een streep eronder, en oranje zodra je er met de muis
   overheen gaat. Rustig in een lange tekst, en onmiskenbaar een link.

   De cijfers, op wit:

     #0071e3  Apple-blauw   4,7:1   leesbaar, maar niet van deze site
     #103856  huisblauw    12,2:1   met streep
     #c24d16  oranje knop   4,8:1   als aanwijskleur
     #f56c20  oranje accent 3,0:1   te licht voor lopende tekst
   =========================================================================== */

.blog-content a,
.inz-artikel__lead a,
.hsb-tekst a,
.hsb-tp__verhaal a,
.hsb-ld__tekst a,
.seo-footer-wrapper a,
.hsb-paginatekst a {
  color: #103856;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;

  /* De streep lichter dan de letter: hij moet zeggen "dit is een link",
     niet door de tekst heen snijden. */
  text-decoration-color: rgb(16 56 86 / .35);
  transition: color .15s, text-decoration-color .15s;
}

.blog-content a:hover,
.inz-artikel__lead a:hover,
.hsb-tekst a:hover,
.hsb-tp__verhaal a:hover,
.hsb-ld__tekst a:hover,
.seo-footer-wrapper a:hover,
.hsb-paginatekst a:hover {
  color: #c24d16;
  text-decoration-color: #c24d16;
}

/* Met de toetsenbord-tab erdoorheen moet net zo goed te zien zijn waar je
   bent als met de muis. */
.blog-content a:focus-visible,
.inz-artikel__lead a:focus-visible,
.hsb-tekst a:focus-visible,
.hsb-tp__verhaal a:focus-visible,
.hsb-ld__tekst a:focus-visible,
.seo-footer-wrapper a:focus-visible,
.hsb-paginatekst a:focus-visible {
  outline: 2px solid #c24d16;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Een link naar een ander domein krijgt een pijltje. Dat scheelt een
   verrassing: je weet dat je de site verlaat. Alleen als het echt een
   ander adres is, dus niet bij /sprekers/... of een anker. */
.blog-content a[href^="http"]:not([href*="hetsprekersburo.nl"])::after,
.hsb-tekst a[href^="http"]:not([href*="hetsprekersburo.nl"])::after,
.hsb-tp__verhaal a[href^="http"]:not([href*="hetsprekersburo.nl"])::after,
.hsb-ld__tekst a[href^="http"]:not([href*="hetsprekersburo.nl"])::after,
.seo-footer-wrapper a[href^="http"]:not([href*="hetsprekersburo.nl"])::after {
  content: "↗";
  display: inline-block;
  margin-left: .25em;
  font-size: .85em;
  text-decoration: none;
  vertical-align: baseline;
}


/* --- Op een donkere ondergrond -----------------------------------------------
   In de sprekersblokken van een inzicht staat witte tekst op blauw. Het
   huisblauw hierboven zou daar onzichtbaar zijn, dus daar wordt de link wit
   met een lichte streep, en oranje bij aanwijzen.

   Die blokken komen uit de tekstverwerker in het CMS, dus er kan een link
   in staan -- vandaar dat dit er toch bij hoort. */
.bg-blue .inz-spreker__info a,
.bg-blue .text-white a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(255 255 255 / .45);
  transition: color .15s, text-decoration-color .15s;
}
.bg-blue .inz-spreker__info a:hover,
.bg-blue .text-white a:hover {
  color: #f9b98c;
  text-decoration-color: #f9b98c;
}
.bg-blue .inz-spreker__info a:focus-visible,
.bg-blue .text-white a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 2px;
}