/* ==========================================================================
   Biały nagłówek + pas tytułowy na papierowym tle (wszystkie podstrony).
   Ładowany po main.css i powiadomienia.css - nadpisuje ciemny nagłówek
   i styl tytułów stron. Pas tytułowy: okruszki + H1 na tle --kal-paper,
   zakończony przerywaną linią "perforacji" jak przy odrywanej kartce.
   ========================================================================== */

:root {
  --kal-pas-tlo: var(--kal-paper);
  --kal-pas-perforacja: #CDC4AB;
  --kal-naglowek-linia: #EBE6D8;
  --kal-tusz: #1D1A16;
}

/* ---------- Nagłówek ---------- */
.kal-header {
  position: relative;
  z-index: 30; /* podmenu i panel koperty nad pasem tytułowym */
  background: #fff;
  border-bottom: 1px solid var(--kal-naglowek-linia);
}
.kal-header__inner {
  gap: 24px;
  min-height: 72px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.kal-logo { --kal-logo-bg: var(--kal-tusz); }
.kal-logo__text { color: var(--kal-tusz); }
.kal-logo:hover .kal-logo__text { color: var(--kal-brass); }

.kal-nav__list a {
  color: var(--kal-tusz);
  font-family: var(--kal-font-display);
  font-weight: 600;
}
.kal-nav__list a:hover { color: var(--kal-brass); }

.kal-nav-toggle {
  border: 1px solid #E3DDCC;
  border-radius: 8px;
}
.kal-nav-toggle__bar { width: 20px; background: var(--kal-tusz); }

@media (min-width: 768px) {
  .kal-nav__list { gap: 26px; }
  .kal-nav__list > li > a {
    position: relative;
    padding: 6px 0;
  }
  /* Aktywny dział: mosiężna kropka pod nazwą */
  .kal-nav__list > li.current-menu-item > a::before,
  .kal-nav__list > li.current-menu-ancestor > a::before,
  .kal-nav__list > li.current-menu-parent > a::before,
  .kal-nav__list > li.current_page_item > a::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--kal-brass);
  }
  .kal-nav__list li.menu-item-has-children > a::before { margin-left: -9px; }

  .kal-nav__list .sub-menu {
    top: calc(100% + 10px);
    background: #fff;
    border: 1px solid #E3DDCC;
    border-top: 2px solid var(--kal-brass);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 14px 30px rgba(29, 26, 22, 0.14);
  }
  /* Most nad szczeliną między pozycją menu a podmenu, żeby hover nie gasł */
  .kal-nav__list li.menu-item-has-children::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
  }
  .kal-nav__list .sub-menu .sub-menu { top: -10px; border-radius: 0 8px 8px 8px; }
  .kal-nav__list .sub-menu a { color: var(--kal-tusz); font-weight: 500; }
  .kal-nav__list .sub-menu a:hover {
    color: var(--kal-brass);
    background: var(--kal-paper);
  }
}

.kal-nav__list .sub-menu li.hr_after > a { border-bottom-color: var(--kal-naglowek-linia); }

@media (max-width: 767px) {
  .kal-header__inner { min-height: 64px; gap: 0; padding-left: 16px; padding-right: 16px; }
  .kal-logo { gap: 8px; }
  .kal-logo__mark { width: 28px; height: 28px; }
  .kal-logo__text { font-size: 1.12rem; }
  .kal-header .kal-pow { margin-right: 8px; }
  .kal-nav__list a { border-top-color: var(--kal-naglowek-linia); }
  .kal-nav__list .sub-menu a { opacity: 1; color: #4A443A; }
}

/* Koperta z powiadomieniami - kwadratowy przycisk z obramowaniem */
.kal-header .kal-pow__przycisk {
  color: var(--kal-tusz);
  border: 1px solid #E3DDCC;
  border-radius: 8px;
}
.kal-header .kal-pow__przycisk:hover,
.kal-header .kal-pow__przycisk[aria-expanded="true"] {
  color: var(--kal-brass);
  border-color: var(--kal-brass);
  background: var(--kal-paper);
}
.kal-header .kal-pow__przycisk:focus-visible { outline-color: var(--kal-brass); }
.kal-header .kal-pow__licznik { border-color: #fff; }

/* ---------- Wyszukiwarka (lupa w nagłówku) ---------- */
.kal-header .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kal-szukaj {
  position: relative;
  order: 2; /* za kopertą */
  flex: none;
  margin-left: 8px;
}
.kal-szukaj__przycisk {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  color: var(--kal-tusz);
  border: 1px solid #E3DDCC;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kal-szukaj__przycisk::-webkit-details-marker { display: none; }
.kal-szukaj__przycisk:hover,
.kal-szukaj[open] .kal-szukaj__przycisk {
  color: var(--kal-brass);
  border-color: var(--kal-brass);
  background: var(--kal-paper);
}
.kal-szukaj__panel,
.kal-szukaj-mobile,
.kal-szukaj-wyniki__form {
  display: flex;
  gap: 8px;
}
.kal-szukaj__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 1100;
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 14px;
  background: #fff;
  border: 1px solid #E3DDCC;
  border-top: 2px solid var(--kal-brass);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 14px 30px rgba(29, 26, 22, 0.14);
}
.kal-szukaj__panel input,
.kal-szukaj-mobile input,
.kal-szukaj-wyniki__form input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--kal-tusz);
  background: #fff;
  border: 1px solid #D8CFB6;
  border-radius: 8px;
}
.kal-szukaj__panel input:focus,
.kal-szukaj-mobile input:focus,
.kal-szukaj-wyniki__form input:focus {
  outline: 2px solid var(--kal-brass);
  outline-offset: 0;
  border-color: var(--kal-brass);
}
.kal-szukaj__panel button,
.kal-szukaj-mobile button,
.kal-szukaj-wyniki__form button {
  flex: none;
  height: 42px;
  padding: 0 16px;
  font-family: var(--kal-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: var(--kal-tusz);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.kal-szukaj__panel button:hover,
.kal-szukaj-mobile button:hover,
.kal-szukaj-wyniki__form button:hover { background: var(--kal-brass); }
.kal-szukaj-mobile { display: none; }

@media (max-width: 767px) {
  .kal-szukaj { display: none; }
  .kal-szukaj-mobile { display: flex; padding: 12px 0 4px; }
}

/* ---------- Pas tytułowy ---------- */
/* Okruszki siedzą na papierowym tle pasa. */
.kal-breadcrumbs {
  padding-top: 26px;
  box-shadow: 0 0 0 100vmax var(--kal-pas-tlo);
  clip-path: inset(0 -100vmax);
  background: var(--kal-pas-tlo);
}
.kal-breadcrumbs__list { color: #7A7263; }
.kal-breadcrumbs__item a { color: #6B6457; }
.kal-breadcrumbs__item a:hover { color: var(--kal-brass); }
.kal-breadcrumbs__item [aria-current="page"] { color: var(--kal-tusz); font-weight: 600; }
.kal-breadcrumbs__sep { color: #B9B09A; }

/* Tytuł strony zamyka pas: papierowe tło rozlane na całą szerokość okna
   i w górę aż do nagłówka (cień przesunięty o 100vmax w górę - dół pasa
   wypada równo z dolną krawędzią tytułu), pod spodem perforacja na całą
   szerokość (border-image z wysunięciem w bok). Bez position/clip-path na
   H1, żeby tło nie przykryło tekstu okruszków nad nim. */
.kal-main h1:not(.kal-hero__title, .kal-month__header > h1, .kal-nt-hero h1) {
  margin-top: 0;
  margin-bottom: 36px;
  padding-top: 10px !important;
  padding-bottom: 30px;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.18;
  color: var(--kal-tusz);
  background: var(--kal-pas-tlo);
  box-shadow: 0 -100vmax 0 100vmax var(--kal-pas-tlo);
  border-bottom: 2px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--kal-pas-perforacja) 0 9px, transparent 9px 16px) 0 0 2 0 / 0 0 2px 0 / 0 100vmax;
}

/* Widok miesiąca (H1 między przyciskami poprzedni/następny) i święto
   nietypowe (H1 obok kartki z kalendarza) - pas zamyka cały nagłówek,
   a nie sam tytuł. */
.kal-main .kal-month__header:has(> h1),
.kal-main .kal-nt-hero {
  margin-bottom: 28px;
  padding-bottom: 26px;
  background: var(--kal-pas-tlo);
  box-shadow: 0 -100vmax 0 100vmax var(--kal-pas-tlo);
  border-bottom: 2px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--kal-pas-perforacja) 0 9px, transparent 9px 16px) 0 0 2 0 / 0 0 2px 0 / 0 100vmax;
}
.kal-main .kal-month__header > h1,
.kal-main .kal-nt-hero h1 {
  margin: 0;
  padding: 0 !important;
  background: none;
  box-shadow: none;
  border: 0;
  border-image: none;
}
.kal-main .kal-nt-hero h1 { margin: 4px 0 10px; }
.kal-main .kal-month__header:has(> h1) .kal-month__nav {
  background: #fff;
  border-color: #D8CFB6;
  border-radius: 8px;
  padding: 7px 14px;
}

/* Kartka z kalendarza (dziś i dowolny dzień) ma tytuł wyśrodkowany w intro */
.kal-main h1.kal-intro__title {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .kal-breadcrumbs { padding-top: 18px; }
  /* Tytuł miesiąca w osobnym wierszu, przyciski poprzedni/następny pod nim */
  .kal-main .kal-month__header:has(> h1) { flex-wrap: wrap; gap: 14px; }
  .kal-main .kal-month__header > h1 { order: -1; flex-basis: 100%; }
  .kal-main h1:not(.kal-hero__title, .kal-month__header > h1, .kal-nt-hero h1) {
    margin-bottom: 26px;
    padding-bottom: 22px;
  }
}

@media print {
  .kal-breadcrumbs,
  .kal-main h1:not(.kal-hero__title, .kal-month__header > h1, .kal-nt-hero h1) {
    background: none;
    box-shadow: none;
    clip-path: none;
    border: 0;
    border-image: none;
  }
}

/* ---------- Wyniki wyszukiwania (search.php) ---------- */
.kal-szukaj-wyniki { padding-bottom: 64px; }
.kal-szukaj-wyniki__form { max-width: 560px; margin-bottom: 12px; }
.kal-szukaj-wyniki__liczba { color: #6B6457; font-size: 0.95rem; }
