/* ══ AUREOLA NA NUMERZE TELEFONU ═══════════════════════════════════════════
   ≥1024px numer siedzi w przyklejonym nagłówku (.header-call) i jest widoczny
   przez całe przewijanie — dokładamy mu pulsującą poświatę.
   <1024px nagłówek numeru nie pokazuje; tam rolę przejmuje #mobile-cta
   z matter.css i to jego dotyczy osobna decyzja.

   Arkusz ładuje się jako ostatni, więc wygrywa kaskadę bez !important.

   PUŁAPKA 1 — poświata nie może iść przez `box-shadow` na samym .header-call.
   Animacja bije zwykłe deklaracje, więc skasowałaby cień z :hover
   (refinement.css:169). Stąd osobny ::after — .header-call nie miał wcześniej
   żadnego pseudoelementu.

   PUŁAPKA 2 — .header-call nie ma `position`, więc ::after zaczepiłby się
   o pierwszego pozycjonowanego przodka. Dlatego position:relative niżej.

   PUŁAPKA 3 — ::after nie dostaje tła, tylko box-shadow, a ten rysuje się na
   ZEWNĄTRZ pudełka pseudoelementu. Dzięki temu poświata nie przykrywa
   zielonej pigułki i nie trzeba kombinować z z-index.

   Wygaszanie animacji przy prefers-reduced-motion załatwia już matter.css
   regułą `*,*:before,*:after{animation:none!important}` — nie dubluję jej. */

:root{
  --pin-swiatlo:251,146,60; /* koral #FB923C (2026-09-26 system 60/30/10; wcześniej lawenda 201,190,232, turkus, szampan), do rgba() w poświacie */
  --pin-tempo:6s;           /* tempo spokojnego oddechu — poświata ma koić, nie migać */
}

@keyframes pin-oddech{
  0%,100%{opacity:.75;transform:scale(1)}
  50%    {opacity:.2;transform:scale(1.07)}
}

@media (min-width:1024px){
  .header-call,.header-messenger{position:relative}
  .header-call::after,.header-messenger::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:0 0 0 3px rgba(var(--pin-swiatlo),.38),
               0 0 20px 5px rgba(var(--pin-swiatlo),.34);
    animation:pin-oddech var(--pin-tempo) ease-in-out infinite;
  }
}

/* ── <1024px: ten sam oddech na istniejącym pasku #mobile-cta ────────────────
   Pasek jest w matter.css (position:fixed, z-index:60) i sam pilnuje, żeby nie
   zasłonić stopki (.site-footer{padding-bottom:100px}). Nie dokładamy drugiego
   paska ani paddingu do body — byłby duplikat i martwy pas na dole.
   Lewa pigułka pokazuje teraz numer zamiast słowa „Zadzwoń”, więc potrzebuje
   odrobinę więcej miejsca niż domyślne 1fr. */
@media (max-width:1023px){
  #mobile-cta{grid-template-columns:1.15fr 46px 1.35fr} /* środek: okrągła ikona Messengera */
  #mobile-cta>a:first-child{
    position:relative;
    gap:7px;
    font-size:13px;
    font-weight:700;
  }
  #mobile-cta>a:first-child::after,#mobile-cta>a.cta-messenger::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:0 0 0 3px rgba(var(--pin-swiatlo),.32),
               0 0 18px 4px rgba(var(--pin-swiatlo),.3);
    animation:pin-oddech var(--pin-tempo) ease-in-out infinite;
  }
}

@media (max-width:359px){
  #mobile-cta>a:first-child{font-size:12px;gap:5px}
}

/* ══ MESSENGER OBOK NUMERU ══════════════════════════════════════════════════
   ≥1024px: niebieskie kółko obok zielonego kółka .header-call, ta sama wysokość.
   Oba siedzą w .header-kontakt, bo .nav-shell ma justify-content:space-between
   i luźny przycisk odjechałby od telefonu.
   <1024px okrągła ikona w pasku #mobile-cta, między numerem a „Zapytaj o wizytę”. */
/* Biały krążek z ciemną ikoną (2026-09-26; wcześniej błękit marki #0866FF gryzł się z paletą),
   zachowanie 1:1 jak .header-call: ta sama poświata (wyżej),
   uniesienie na hover i magnes z refinement.js (KONTROLKI). margin-right odsuwa parę
   od krawędzi belki, żeby poświata nie dotykała jej brzegu. */
.header-kontakt{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-right:12px}
.header-messenger{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border-radius:100px;background:#FFFFFF;color:#1C1917;font-size:var(--fs-small);font-weight:700;letter-spacing:.015em;white-space:nowrap;box-shadow:inset 0 0 0 1px #E7E5E4,0 4px 14px rgba(28,25,23,.12);transition:background .22s,transform .22s,box-shadow .22s}
.header-messenger:hover{background:#F5F5F4;color:#1C1917;transform:translateY(-1px);box-shadow:inset 0 0 0 1px #D6D3D1,0 10px 20px -10px rgba(28,25,23,.35)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .header-messenger{translate:var(--mx,0) var(--my,0);transition:background .22s,transform .22s,box-shadow .22s,translate var(--magnes-czas) var(--magnes-krzywa)}
}
.header-messenger svg{width:var(--icon-size);height:var(--icon-size)}
.header-messenger:focus-visible,#mobile-cta>a.cta-messenger:focus-visible{outline:3px solid #a88948;outline-offset:3px}
/* Oba przyciski w nagłówku to same ikony w kółkach 44 px. Numer i nazwa zostają
   w aria-label, a tekst w <span> jest ukryty tylko wizualnie. */
.header-call,.header-messenger{width:44px;padding:0;justify-content:center}
.header-call span,.header-messenger span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1023px){
  .header-kontakt{display:none}
  #mobile-cta>a.cta-messenger{position:relative;padding:0;border:0;background:#FFFFFF;color:#1C1917;box-shadow:inset 0 0 0 1px #E7E5E4,0 2px 5px -3px #10262040}
  #mobile-cta>a.cta-messenger svg{width:22px;height:22px}
}