/* ==========================================================================
   Tlačidlá sociálnych sietí v hlavičke (farská stránka)
   Štýl prevzatý z BasilicaGuide: .lang-pill a .icon-btn (style.css).
   Vzhľad je statický, pri hover/focus sa mení len okraj.
   Cieľ: <div class="share-links"> v .header-top (téma Porto).
   ========================================================================== */

/* --- Premenné ------------------------------------------------------------
   Definované na .share-links, aby nekolidovali s ničím iným na stránke.
   Farby zodpovedajú paletre BasilicaGuide (názvy v zátvorkách). */
.header-top .share-links {
  --share-size: 34px;                             /* priemer kruhového tlačidla (.icon-btn) */
  --share-icon-size: 16px;                        /* veľkosť ikony vo vnútri */
  --share-gap: .35rem;                            /* medzera medzi tlačidlami (ako .lang-pills) */

  --share-color: #fffaf2;                         /* farba ikony vo všetkých stavoch (--color-white) */
  --share-bg: rgba(255, 255, 255, .08);           /* vyplnené priesvitné pozadie (ako .lang-pill) */
  --share-border: rgba(255, 255, 255, .18);       /* jemný svetlý okraj (ako .lang-pill) */
  --share-border-hover: #d9b45c;                  /* zlatý okraj pri hover/focus */
}

/* --- Tlačidlo (vyplnené pozadie, pozadie sa pri hover nemení) ------------- */
.header-top .share-links a,
.header-top .share-links a:hover,
.header-top .share-links a:focus,
.header-top .share-links a:active,
.header-top .share-links a:visited {
  display: inline-flex;                           /* ikona presne v strede kruhu */
  align-items: center;
  justify-content: center;
  width: var(--share-size);
  height: var(--share-size);
  margin: 0 calc(var(--share-gap) / 2);
  border-radius: 50%;                             /* kruh */
  border: 1px solid var(--share-border) !important;
  background: var(--share-bg) !important;         /* !important prebije biele pozadie z témy */
  color: var(--share-color) !important;           /* !important prebije farbu odkazu z témy (modrá) */
  box-shadow: none;                               /* zruší tieň z témy */
  text-decoration: none;
  transform: none;                                /* žiadny posun pri hover */
  transition: none;                               /* žiadna animácia */
}

/* --- Ikona (Font Awesome <i> alebo inline <svg>) -------------------------- */
.header-top .share-links a i,
.header-top .share-links a svg,
.header-top .share-links a svg path {
  color: inherit !important;                      /* vždy dedí farbu z tlačidla, nikdy modrú */
  fill: currentColor;                             /* pre SVG ikony */
}

.header-top .share-links a i,
.header-top .share-links a svg {
  font-size: calc(var(--share-icon-size) - 1px);  /* pre font ikony */
  width: var(--share-icon-size);                  /* pre SVG ikony */
  height: var(--share-icon-size);
}

/* --- Hover / klávesnicový focus: výraznejší a o 1px hrubší okraj ------------
   Okraj zostáva 1px (rozmery sa nemenia), ďalší 1px pridáva vnútorný tieň.
   Pozadie ani farba ikony sa nemenia. */
.header-top .share-links a:hover,
.header-top .share-links a:focus,
.header-top .share-links a:focus-visible {
  border-color: var(--share-border-hover) !important;
  box-shadow: inset 0 0 0 1px var(--share-border-hover);  /* +1px hrúbka bez posunu rozloženia */
  outline: none;                                  /* výraznejší okraj nahrádza predvolený outline */
}