/* MAGMED — warstwa własna nad Tailwindem */

:root {
  --brand: #1eb7ec;
  --brand-ink: #0e7fb0;
  --brand-ink-2: #0b6690;
  --ink: #0b0d0e;
  --body: #3d4852;
  --rule: #d7e3ea;
  --paper: #ffffff;
  --paper-2: #f5f9fb;
  --r: 10px;
}

/* Maska krzyża z logotypu. Union dwóch zaokrąglonych prostokątów,
   definicja clipPath siedzi w HTML jako ukryty <svg>. Wymaga kwadratowego kadru. */
.cross-mask { clip-path: url(#magmed-cross); }

@supports not (clip-path: url(#magmed-cross)) {
  .cross-mask { border-radius: 24px; }
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); letter-spacing: -0.02em; }

/* Liczby: ceny, godziny, telefony */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Hero: przyciemnienie od dołu i od lewej, żeby tekst był czytelny na zdjęciu */
.hero-scrim {
  background:
    linear-gradient(to top, rgba(6, 12, 16, .88) 0%, rgba(6, 12, 16, .55) 32%, rgba(6, 12, 16, .10) 62%, rgba(6, 12, 16, .28) 100%),
    linear-gradient(to right, rgba(6, 12, 16, .55) 0%, rgba(6, 12, 16, 0) 55%);
}

/* Header nad zdjęciem, po scrollu biały */
.site-header { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.site-header[data-solid="false"] { background: transparent; border-color: transparent; color: #fff; }
.site-header[data-solid="true"] { background: rgba(255, 255, 255, .97); border-color: var(--rule); color: var(--ink); backdrop-filter: blur(8px); }
.site-header[data-solid="false"] .logo-invert { filter: brightness(0) invert(1); }

/* Wiersz z ceną: nazwa po lewej, cena po prawej. Bez kropek. */
.leader { display: flex; align-items: baseline; gap: 1.5rem; }
.leader > .leader-fill { flex: 1; min-width: 1.5rem; }

/* Motyw kropek z krzyża w logotypie. Dwa nasycenia, jak na starej stronie. */
.dots {
  background-image:
    radial-gradient(circle at center, rgba(30,183,236,.55) 42%, transparent 43%),
    radial-gradient(circle at center, rgba(30,183,236,.13) 42%, transparent 43%);
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
}
.dots-soft {
  background-image: radial-gradient(circle at center, rgba(30,183,236,.16) 42%, transparent 43%);
  background-size: 40px 40px;
}

/* Krzyż z kropek jako znak sekcji */
.cross-dots {
  --d: rgba(30,183,236,.9);
  background-image: radial-gradient(circle at center, var(--d) 45%, transparent 46%);
  background-size: 25% 25%;
  background-position: 0 0;
  clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%);
}

/* Szybki kontakt: panel z numerami */
[data-quick-panel][hidden] { display: none; }

.link-underline {
  background-image: linear-gradient(var(--brand), var(--brand));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease;
}
.link-underline:hover { background-size: 100% 1.5px; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }
.chev { transition: transform .2s ease; }

/* Przełącznik placówki: oba warianty w DOM, CSS decyduje co widać */
body[data-placowka="reda"] [data-only="lebork"] { display: none; }
body[data-placowka="lebork"] [data-only="reda"] { display: none; }

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 3px;
}
.site-header[data-solid="false"] a:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}