/* =========================================================
   TSCB UTILITY-SYSTEEM — contactgegevens
   Onderdeel van het tscb-systeem, zie basis/kleur.css voor
   de kleur-bridge en het versie-/hergebruikbeleid.
   Un-layered laten, dan wint dit van de Bricks-defaults.
   ---------------------------------------------------------
   Markup (een <dl>, want dit zijn label/waarde-paren):

     <dl class="tscb_contact">
       <dt class="tscb_contact__tel">Tel</dt>
       <dd><a href="tel:...">...</a></dd>
       <dt class="tscb_contact__mail">Email</dt>
       <dd><a href="mailto:...">...</a></dd>
     </dl>

   Géén <table>: een tabel is voor data met rijen én kolommen
   die betekenis hebben. Dit zijn losse paren, en een <dl> zegt
   dat precies. Schermlezers lezen 'm ook als paren voor.
   De kolommen komen van CSS grid, dus het blijft netjes onder
   elkaar zonder tabel-markup.

   De iconen zijn inline SVG in een mask, geen icon-library en
   geen los bestand: daardoor pakken ze hun kleur uit het palet
   (background-color kleurt door het masker heen) en is er geen
   extra request. Wil je andere iconen: alleen de twee
   --_tscb_contact_icon regels onderaan vervangen.
   ========================================================= */

.tscb_contact {
  --tscb_contact_icon_size:  1.05em;
  --tscb_contact_icon_color: var(--tscb_tertiary_2);
  --tscb_contact_icon_gap:   0.55em;   /* tussen icoon en label */
  --tscb_contact_gap_x:      var(--tscb_space_xl);   /* label -> waarde */
  --tscb_contact_gap_y:      var(--tscb_space_xs);

  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: var(--tscb_contact_gap_x);
  row-gap: var(--tscb_contact_gap_y);
  align-items: baseline;

  /* Loopt mee met het tekstritme uit layout/spacing.css: het
     ICOON begint op dezelfde lijn als de lopende tekst, want
     dat is het eerste dat je van de regel ziet.

     Wil je in plaats daarvan de LABELS op de tekstlijn en de
     iconen links laten uithangen, dan moet deze padding een
     negatieve margin worden ter grootte van icoon + gat. Dat
     kan niet met padding (negatief mag niet) en het is krap:
     op 320px is de goot 16px terwijl icoon + gat ~24px is, dus
     dan steekt het icoon het scherm uit. Daarom hangt het niet. */
  margin: 0 0 var(--tscb_text_space_bottom);
  padding-inline-start: var(--tscb_text_indent);
}

/* Het icoon staat absoluut en niet als flex-item in de <dt>.
   Reden: bij baseline-uitlijning in de grid haalt een flex-<dt>
   z'n baseline uit het eerste kind, en dat zou het icoon zijn —
   een lege doos zonder tekstbaseline. Het label en de waarde
   zouden dan net niet op één lijn staan. Zo blijft de <dt> een
   gewoon tekstblok en klopt de baseline. */
.tscb_contact dt {
  position: relative;
  padding-inline-start: calc(
    var(--tscb_contact_icon_size) + var(--tscb_contact_icon_gap));
}

.tscb_contact dt::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.16em;                 /* optisch op de regel, niet op de bovenkant */
  width: var(--tscb_contact_icon_size);
  height: var(--tscb_contact_icon_size);
  background-color: var(--tscb_contact_icon_color);
  -webkit-mask: var(--_tscb_contact_icon) center / contain no-repeat;
          mask: var(--_tscb_contact_icon) center / contain no-repeat;
}

.tscb_contact dd {
  margin: 0;
}

/* Links in de lijst blijven de tekstkleur houden; het icoon is
   al het signaal dat er iets te klikken valt. */
.tscb_contact a {
  color: inherit;
  text-decoration: none;
}
.tscb_contact a:hover,
.tscb_contact a:focus-visible {
  text-decoration: underline;
}

/* ---- de iconen ---- */
.tscb_contact__tel  { --_tscb_contact_icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M6.62%2010.79a15.05%2015.05%200%200%200%206.59%206.59l2.2-2.2a1%201%200%200%201%201.02-.24c1.12.37%202.33.57%203.57.57a1%201%200%200%201%201%201V20a1%201%200%200%201-1%201A17%2017%200%200%201%203%204a1%201%200%200%201%201-1h3.5a1%201%200%200%201%201%201c0%201.24.2%202.45.57%203.57a1%201%200%200%201-.25%201.02l-2.2%202.2z'/%3E%3C/svg%3E"); }
.tscb_contact__mail { --_tscb_contact_icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M20%204H4a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2zm0%204-8%205-8-5V6l8%205%208-5v2z'/%3E%3C/svg%3E"); }