/* ==========================================================================
   Zdieľanie stránky (blok .page-share pod obsahom stránky)
   Tlačidlá majú rovnaký štýl ako tlačidlá sociálnych sietí v hlavičke
   (share-links.css): kruh, vyplnené pozadie, jemný okraj a pri hover/focus
   zlatý okraj zhrubnutý o 1px. Pozadie je farba hlavičky, aby tlačidlá
   fungovali aj na svetlom pozadí stránky.
   Šípka pred nadpisom je menšia a modernejšia (ikona share-nodes).
   Cieľ: <div class="page-share"> (téma Porto).
   ========================================================================== */

/* --- Premenné --------------------------------------------------------------- */
.page-share {
  --pshare-size: 34px;                            /* priemer kruhového tlačidla */
  --pshare-icon-size: 16px;                       /* veľkosť ikony vo vnútri */
  --pshare-gap: .35rem;                           /* medzera medzi tlačidlami */

  --pshare-color: #fffaf2;                        /* farba ikony vo všetkých stavoch */
  --pshare-bg: #762833;                           /* farba hlavičky (#6b1420) + 8 % bielej ako v hlavičke */
  --pshare-border: rgba(255, 255, 255, .18);      /* jemný svetlý okraj */
  --pshare-border-hover: #d9b45c;                 /* zlatý okraj pri hover/focus */

  --pshare-title-size: 19px;                      /* veľkosť nadpisu (pôvodne 28.8px) */
  --pshare-arrow-color: #d9b45c;                  /* farba ikony pred nadpisom */
  --pshare-arrow-size: 13px;                      /* veľkosť ikony pred nadpisom (rovnaký pomer k nadpisu) */
}

/* --- Nadpis ------------------------------------------------------------------- */
.page-share h3 {
  font-size: var(--pshare-title-size);
}

/* --- Ikona pred nadpisom: menšia a modernejšia ------------------------------- */
.page-share h3 > i.fa-share {
  margin-right: 8px;
  font-size: var(--pshare-arrow-size);
  color: var(--pshare-arrow-color);
  vertical-align: .12em;                          /* optické zarovnanie k písmu Cinzel */
}

.page-share h3 > i.fa-share::before {
  content: "\f1e0";                               /* Font Awesome: share-nodes (namiesto hrubej šípky f064) */
}

/* --- Tlačidlo (farba pozadia sa pri hover nemení) ------------------------------ */
.page-share .share-links a,
.page-share .share-links a:hover,
.page-share .share-links a:focus,
.page-share .share-links a:active {
  position: relative;
  width: var(--pshare-size);
  height: var(--pshare-size);
  margin: 0 calc(var(--pshare-gap) / 2);
  border-radius: 50%;                             /* kruh */
  border: 1px solid var(--pshare-border);
  background: var(--pshare-bg);                   /* prebije farby jednotlivých sietí (.share-facebook ...) */
  color: var(--pshare-color);
  box-shadow: none;
  opacity: 1;                                     /* zruší stmavenie pri hover z témy */
  transform: none;
  transition: none;
}

.page-share .share-links a:first-child {
  margin-left: 0;
}

/* --- Ikona (glyf v ::before, text odkazu je skrytý cez text-indent) ---------- */
.page-share .share-links a::before {
  display: flex;                                  /* ikona presne v strede kruhu */
  align-items: center;
  justify-content: center;
  height: auto;
  margin: 0;
  font-size: var(--pshare-icon-size);
  line-height: 1;
  color: inherit;
}

/* --- Hover / klávesnicový focus: výraznejší a o 1px hrubší zlatý okraj -------
   Okraj zostáva 1px (rozmery sa nemenia), ďalší 1px pridáva vnútorný tieň. */
.page-share .share-links a:hover,
.page-share .share-links a:focus,
.page-share .share-links a:focus-visible {
  border-color: var(--pshare-border-hover);
  box-shadow: inset 0 0 0 1px var(--pshare-border-hover);
  outline: none;
}