/* Wyszukiwarka miejsc pochówku – style wzorowane na poprzedniej wersji strony (klasy WMP*).
   Dostępność (WCAG 2.1 AA): kontrast tekstu ≥ 4,5:1 we wszystkich stanach (także :hover / :focus),
   wskaźnik fokusu i obramowania pól ≥ 3:1, linki podkreślone (nie tylko kolor), brak animacji. */

:root {
    --kolor-tekstu: #1a1a1a;
    --kolor-tla: #ffffff;
    --kolor-akcentu: #8a1c1c;          /* biały tekst na tym tle: 9,3:1 */
    --kolor-akcentu-ciemny: #6b1515;   /* :hover przycisków */
    --kolor-ostrzezenia: #c00000;      /* na białym: 5,9:1 */
    --kolor-ramki: #767676;            /* obramowanie pól na białym: 4,5:1 */
    --kolor-wiersza: #f2f2f2;
    --kolor-fokusa: #1a1a1a;           /* obwódka fokusu na jasnym tle: 17:1 */
}

/* w ramce na stronie PGK (cmentarz.koszalin.pl) – kolorystyka strony PGK, przezroczyste tło */
.osadzona {
    --kolor-akcentu: #1d4a3b;
    --kolor-akcentu-ciemny: #12302a;
    --kolor-tla: transparent;
}

/* w ramce treść wypełnia kartę strony PGK (bez własnej maksymalnej szerokości i marginesów) */
.osadzona .wmp { max-width: none; padding: 0.25rem 0.25rem 1rem; }

body {
    margin: 0;
    font-family: Arial, "Open Sans", Tahoma, Verdana, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--kolor-tekstu);
    background: var(--kolor-tla);
}

.wmp {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0.75rem 1rem 1.5rem;
}

.wmp-tytul {
    font-size: 1.25rem;
    margin: 0.5rem 0 0.75rem;
}

.wmp-podtytul {
    font-size: 1.05rem;
    margin: 1.25rem 0 0.5rem;
}

.wmp-instrukcja {
    list-style: square;
    padding-left: 1.25rem;
}

.wmp-instrukcja p {
    margin: 0.25rem 0 0.5rem;
}

.warntxt {
    font-weight: bold;
    color: var(--kolor-ostrzezenia);
    margin: 0.25rem 0;
}

.wmp-info {
    border-left: 4px solid var(--kolor-akcentu);
    background: #faf6f0;
    padding: 0.75rem 1rem;
    margin: 0;
}

.wmp-uwaga {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: #4a4a4a;
}

.nowrap { white-space: nowrap; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a { color: var(--kolor-akcentu); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

/* wyraźny fokus z klawiatury: ciemna obwódka z odstępem (na tle strony, niezależnie od koloru elementu) */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--kolor-fokusa);
    outline-offset: 2px;
}

/* ===== Formularz ===== */

.WMPSearchForm {
    display: grid;
    grid-template-columns: max-content minmax(12rem, 22rem) 1fr;
    gap: 0.8rem 1rem;
    align-items: center;
    padding: 1.2rem 0;
}

.WMPSearchForm > label {
    grid-column: 1;
    text-align: right;
    font-weight: bold;
}

.WMPSearchForm > input[type=text] {
    grid-column: 2;
    padding: 0.55rem 0.6rem;
    font-size: 1rem;
    color: var(--kolor-tekstu);
    background: #fff;
    border: 1px solid var(--kolor-ramki);
    border-radius: 3px;
}

.WMPSearchForm > input[aria-invalid=true] {
    border: 2px solid var(--kolor-ostrzezenia);
}

.WMPSearchForm > .wmp-opis {
    grid-column: 3;
    font-size: 0.875rem;
}

.WMPSearchForm > button {
    grid-column: 2;
    justify-self: start;
    padding: 0.6rem 2.5rem;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background: var(--kolor-akcentu);
    border: 2px solid var(--kolor-akcentu);
    border-radius: 3px;
    cursor: pointer;
}

.WMPSearchForm > button:hover {
    color: #fff;
    background: var(--kolor-akcentu-ciemny);
    border-color: var(--kolor-akcentu-ciemny);
}

.wmp-komunikaty {
    border: 2px solid var(--kolor-ostrzezenia);
    border-radius: 3px;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0 1rem;
    background: #fff;
}

/* ===== Wyniki ===== */

.wmp-tabela-kontener { overflow-x: auto; }

.wmp-tabela {
    width: 100%;
    border-collapse: collapse;
}

.wmp-tabela th, .wmp-tabela td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.wmp-tabela th {
    white-space: nowrap;
    background: var(--kolor-wiersza);
}

.wmp-tabela tbody tr:hover { background: var(--kolor-wiersza); }

.wmp-tabela .wmp-lp { text-align: right; width: 3rem; }

.wmp-tabela a { font-weight: bold; }

.wmp-zakres { color: #4a4a4a; margin: 0.25rem 0 0.5rem; }

/* ===== Stronicowanie wyników ===== */

.wmp-stronicowanie ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0.5rem;
}

.wmp-stronicowanie a,
.wmp-stronicowanie .nieaktywny,
.wmp-stronicowanie .przerwa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;          /* cel dotyku ≥ 24×24 px (WCAG 2.5.8) */
    gap: 0.3em;                  /* odstęp między strzałką a tekstem (flex pomija spacje) */
    padding: 0 0.6rem;
    box-sizing: border-box;
    border-radius: 3px;
}

.wmp-stronicowanie a {
    border: 1px solid var(--kolor-ramki);
    background: #fff;
    color: var(--kolor-akcentu);
    text-decoration: none;
}

.wmp-stronicowanie a:hover {
    background: #f0f0f0;
    border-color: var(--kolor-tekstu);
    text-decoration: underline;
}

.wmp-stronicowanie a[aria-current=page],
.wmp-stronicowanie a[aria-current=page]:hover {
    background: var(--kolor-akcentu);
    border-color: var(--kolor-akcentu);
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.wmp-stronicowanie .nieaktywny {
    border: 1px solid #d0d0d0;
    color: #767676;              /* nieaktywny element – i tak kontrast 4,5:1 */
}

.wmp-stronicowanie .przerwa { min-width: 1.5rem; padding: 0; color: #4a4a4a; }

/* ===== Szczegóły ===== */

.WMPContInfo {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) 1.4fr;
    gap: 1.5rem;
    align-items: start;
}

.WMPDiedInfo {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

.WMPDiedInfo dt {
    font-weight: bold;
    text-align: right;
}

.WMPDiedInfo dd { margin: 0; }

.wmp-pochowani { padding-left: 1.25rem; }

/* ===== Przyciski nawigacji ===== */

.wmp-nawigacja {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin: 1rem 0;
}

.WMPNaviButton {
    display: inline-block;
    padding: 0.55rem 1rem;
    border: 1px solid var(--kolor-ramki);
    border-radius: 3px;
    background: #f7f7f7;
    color: var(--kolor-tekstu);
    text-decoration: none;
}

.WMPNaviButton:hover {
    background: #e6e6e6;
    color: var(--kolor-tekstu);
    border-color: var(--kolor-tekstu);
}

/* przycisk główny – kolory jawnie dla każdego stanu (wyższa specyficzność niż .WMPNaviButton:hover) */
.WMPNaviButton.wmp-przycisk-glowny {
    background: var(--kolor-akcentu);
    border-color: var(--kolor-akcentu);
    color: #fff;
    font-weight: bold;
}

.WMPNaviButton.wmp-przycisk-glowny:hover {
    background: var(--kolor-akcentu-ciemny);
    border-color: var(--kolor-akcentu-ciemny);
    color: #fff;
    text-decoration: underline;
}

.wmp-nawigacja-lewo { justify-content: flex-start; }

/* przyciski w kolumnie w panelu obok mapy (jak WMPButtonsColumn w poprzedniej wersji) */
.wmp-przyciski-pion {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    max-width: 20rem;
    margin: 1.25rem 0 0;
}

.wmp-przyciski-pion .WMPNaviButton,
.wmp-przycisk-szeroki {
    text-align: center;
}

.wmp-przycisk-szeroki {
    display: block;
    max-width: 20rem;
    box-sizing: border-box;
}

/* ===== Mapa ===== */

.wmp-mapa {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    border: 1px solid var(--kolor-ramki);
}

.wmp-mapa > img:first-child {
    max-width: 100%;
    height: auto;
}

.wmp-mapa-poglad { margin-bottom: 0.75rem; }

/* strzałka (statyczna, SVG 35×21): grot w prawym środku wskazuje grób */
.wmp-strzalka, .wmp-strzalka-grob {
    position: absolute;
    transform: translate(-35px, -50%);
    pointer-events: none;
    line-height: 1.2;
}

.wmp-strzalka-grob {
    display: flex;
    align-items: center;
}

.WMPArrow {
    position: absolute;
    right: 40px;
    font-weight: bold;
    font-size: 0.8rem;
    color: var(--kolor-ostrzezenia);
    background: #fff;
    border: 1px solid var(--kolor-ostrzezenia);
    padding: 0 3px;
    white-space: nowrap;
}

.wmp-zakladki {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.75rem 0;
    border-bottom: 2px solid var(--kolor-akcentu);
}

.wmp-zakladki a {
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--kolor-tekstu);
    background: #f2f2f2;
    border: 1px solid #c8c8c8;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

.wmp-zakladki a:hover {
    background: #e0e0e0;
    color: var(--kolor-tekstu);
    text-decoration: underline;
}

.wmp-zakladki a.wybrana,
.wmp-zakladki a.wybrana:hover {
    background: var(--kolor-akcentu);
    border-color: var(--kolor-akcentu);
    color: #fff;
    font-weight: bold;
}

.wmp-mapa-uklad {
    display: grid;
    grid-template-columns: minmax(0, 700px) minmax(14rem, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.wmp-mapa-panel .wmp-podtytul { margin-top: 0; }

.wmp-bramy { list-style: none; padding: 0; margin: 0 0 1rem; }
.wmp-bramy li { margin-bottom: 0.2rem; }
.wmp-bramy a { display: inline-block; padding: 0.2rem 0.4rem; border-left: 4px solid transparent; }
.wmp-bramy a[aria-current] { font-weight: bold; color: var(--kolor-tekstu); border-left-color: var(--kolor-akcentu); text-decoration: none; }
.wmp-bramy small { color: #555; }

.wmp-legenda-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
}

.wmp-legenda-lista li { display: flex; align-items: center; gap: 0.4rem; }

.wmp-legenda-znak { display: inline-block; flex: none; }
.wmp-legenda-znak.kwatera { width: 26px; height: 16px; background: rgba(255, 230, 0, 0.45); border: 2px solid #dc0000; }
/* widok kwatery: bez wypełnienia, żółty pas po obu stronach czerwonego obrysu (jak na mapie) */
.wmp-legenda-znak.kwatera.obwodka { margin: 3px; background: transparent; box-shadow: 0 0 0 3px rgba(255, 220, 0, 0.8), inset 0 0 0 3px rgba(255, 220, 0, 0.8); }
.wmp-legenda-znak.trasa { width: 30px; height: 6px; border-radius: 3px; background: rgba(65, 105, 225, 0.75); }
.wmp-legenda-znak.brama { width: 16px; height: 16px; border-radius: 50%; background: #c80000; border: 2px solid #fff; box-shadow: 0 0 0 1px #c80000; }

.wmp-legenda {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.5rem 0 1rem;
    border: 1px solid #ddd;
}

.wmp-legenda-warstw summary { cursor: pointer; margin: 0.5rem 0; }

/* ===== Telefon / powiększenie ===== */

@media (max-width: 40rem) {
    .WMPSearchForm { grid-template-columns: 1fr; }
    .WMPSearchForm > label,
    .WMPSearchForm > input[type=text],
    .WMPSearchForm > .wmp-opis,
    .WMPSearchForm > button { grid-column: 1; text-align: left; }
    .WMPSearchForm > .wmp-opis { margin-top: -0.5rem; }
    .WMPContInfo { grid-template-columns: 1fr; }
    .wmp-mapa-uklad { grid-template-columns: 1fr; }
    .wmp-nawigacja { justify-content: flex-start; }
    .WMPDiedInfo { grid-template-columns: 1fr; gap: 0 1rem; }
    .WMPDiedInfo dt { text-align: left; margin-top: 0.4rem; }
}

/* tryb wysokiego kontrastu systemu */
@media (forced-colors: active) {
    .WMPNaviButton, .wmp-zakladki a { border: 1px solid ButtonText; }
    .wmp-zakladki a.wybrana { outline: 2px solid Highlight; }
}