/*
Theme Name: Żłobek BIP
Description: Motyw Biuletynu Informacji Publicznej żłobka (WCAG 2.1 AA). Wymaga wtyczki „Żłobek BIP”.
Version: 1.15
Requires PHP: 8.0
Text Domain: zlobek-bip
*/

/* Wygląd jak na stronie żłobka („Słonecznie”, beż z kroplą różu): te same barwy i czcionki (Baloo 2, Nunito, z własnego serwera),
   prosto i urzędowo: nagłówek w różanej śmietance i jasna stopka, oddzielone cienką linią, bez ozdobnych brzegów. Wymogi BIP bez zmian: logo BIP na górze, menu przedmiotowe,
   wyszukiwarka, metryczki. --tlo-*: pasy na całą szerokość (nagłówek, treść, stopka), --morela: przyciski i znaczniki. */
:root{
  color-scheme:light;
  --bg:#FFFDFA; --surface:#FFFDFA; --ink:#24394F; --muted:#4A5361; --line:#EDD9CE;
  --accent:#A4441A; --accent-ink:#FFFFFF; --granat:#24394F; --leaf:#FFF1EF; --bip:#C8102E;
  --morela:#FFC09A; --morela-hover:#FFAD7F; --morela-ink:#24394F;
  --tlo-naglowek:#FFF1EF; --tlo-strona:#FFFDFA; --tlo-stopka:#F6E4DB; --tlo-logo:transparent;
  --cien:0 8px 24px rgb(36 57 79 / .06);
  --fs:16px;
  --display:"Baloo 2",system-ui,sans-serif;
  --font:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1A222D; --surface:#212C39; --ink:#F5EEE2; --muted:#C8C0B2; --line:#364352;
  --accent:#F5B48A; --accent-ink:#18212C; --granat:#FFE2C2; --leaf:#2A3543;
  --morela:#FFC09A; --morela-hover:#FFD2B5; --morela-ink:#24394F;
  --tlo-naglowek:#1F2833; --tlo-strona:#1A222D; --tlo-stopka:#222C38; --tlo-logo:#fff; --cien:none;
}
:root[data-contrast="high"]{
  color-scheme:dark;
  --bg:#000; --surface:#000; --ink:#FFF; --muted:#FFF; --line:#FFF;
  --accent:#FFE600; --accent-ink:#000; --granat:#FFE600; --leaf:#000;
  --morela:#FFE600; --morela-hover:#FFF; --morela-ink:#000;
  --tlo-naglowek:#000; --tlo-strona:#000; --tlo-stopka:#000; --tlo-logo:#fff; --cien:none;
}
html{font-size:var(--fs);scroll-padding-top:16px}
body{margin:0;background:var(--tlo-strona);color:var(--ink);font:1rem/1.6 var(--font)}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--granat);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;text-wrap:balance;margin:0}
h1,h2{font-weight:800;color:var(--granat)}
h1{font-size:clamp(2rem,4vw,2.8rem)}
h2{font-size:1.4rem}
p{margin:0}
p,li{text-wrap:pretty}
img{max-width:100%;height:auto}
.wrap{max-width:1100px;margin-inline:auto;padding-inline:16px}
.skip{position:absolute;left:-9999px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{left:16px;top:8px;background:var(--surface);padding:8px 12px;z-index:100000}
/* Zalogowani mają u góry pasek WordPressa (32 px, na telefonie 46 px): link pojawia się pod nim */
.admin-bar .skip:focus{top:40px}
@media (max-width:782px){.admin-bar .skip:focus{top:54px}}

/* Pasek ułatwień dostępu */
.util{border-bottom:1px solid var(--line);background:var(--surface);font-size:.85rem}
.util .wrap{display:flex;justify-content:flex-end;padding-block:6px}
.a11y{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.a11y button{font:inherit;font-weight:700;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px;cursor:pointer}
.a11y button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

/* Nagłówek: logo BIP, nazwa podmiotu, wyszukiwarka */
header.main{background:var(--tlo-naglowek);border-bottom:1px solid var(--line)}
header.main .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:14px}
/* Nazwa może przejść do drugiego wiersza, żeby wyszukiwarka została po prawej */
.bip-brand{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none;flex:1 1 0;min-width:280px}
.bip-logo{display:block;flex:none}
/* Logo z przezroczystym tłem (biały pas z „bip” jest częścią znaku); czarny napis w trybie ciemnym i kontraście stoi na białej plakietce (--tlo-logo). */
.bip-logo img{display:block;background:var(--tlo-logo);padding:4px;border-radius:4px}
/* Logo z nazwą jak w nagłówku strony żłobka */
.bip-brand strong{display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--granat);text-wrap:balance}
.bip-zlobek{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.bip-zlobek img{display:block;height:48px;width:auto}
.search-form{display:flex;gap:6px}
.search-form input[type="search"]{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--muted);border-radius:14px;padding:9px 14px;min-width:0;width:14rem;max-width:100%}
.btn{font:inherit;font-weight:800;background:var(--morela);color:var(--morela-ink);border:0;border-radius:999px;padding:9px 20px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--morela-hover)}

/* Układ: menu przedmiotowe + treść */
.layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px;padding-block:32px}
.bip-menu h2{font-size:1.3rem;margin-bottom:10px}
.bip-menu ul{list-style:none;margin:0;padding:0}
.bip-menu ul ul{padding-left:14px;border-left:2px solid var(--line);margin:2px 0 6px 10px}
.bip-menu a{display:block;padding:6px 10px;border-radius:8px;color:var(--ink);text-decoration:none}
.bip-menu a:hover{background:var(--leaf)}
.bip-menu .current_page_item > a{background:var(--leaf);color:var(--accent);font-weight:700;box-shadow:inset 4px 0 0 var(--morela);border-radius:0 8px 8px 0}

.content{display:grid;gap:24px;align-content:start}
.entry{display:grid;gap:14px;max-width:75ch}
.entry > *{margin:0}
.entry ul,.entry ol{padding-left:22px}
:is(.entry > p,.entry > :is(ul,ol) > li){text-align:justify}
@media (max-width:767px){:is(.entry > p,.entry > :is(ul,ol) > li){hyphens:auto}}
.archiwalna{background:var(--leaf);border-left:6px solid var(--morela);padding:14px 18px;border-radius:0 12px 12px 0}
.archiwalna p + p{margin-top:4px}

section.box{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--cien);padding:18px 22px;display:grid;gap:12px}
.metryczka{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 24px;margin:0}
.metryczka div{display:grid;gap:2px}
.metryczka dt{font-size:.94rem;color:var(--muted)}
.metryczka dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}

/* position: bez niego tekst dla czytników w tabeli (.screen-reader-text) wychodzi poza przewijany blok i rozpycha stronę */
.scroll{overflow-x:auto;position:relative}
table{border-collapse:collapse;width:100%;font-size:.95rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.94rem;color:var(--muted)}
.nav-links{display:flex;gap:16px}
.results{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.plik-info{color:var(--muted);font-size:.85rem;white-space:nowrap}

footer{background:var(--tlo-stopka);color:var(--ink);border-top:1px solid var(--line);padding-block:32px 24px;font-size:.95rem}
footer a{color:var(--ink)}
footer h2{font-size:1.1rem;margin-bottom:10px}
.stopka-gora{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 48px;align-items:start}
.stopka-podmiot{display:grid;gap:8px;justify-items:start}
.stopka-podmiot strong{font-family:var(--display);font-size:1.15rem;line-height:1.25;color:var(--granat)}
footer ul{list-style:none;margin:0;padding:0;columns:2 220px;column-gap:32px}
footer li{break-inside:avoid;margin-bottom:8px}
.stopka-dol{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
.stopka-dol .zaloguj{flex:none;margin-left:auto;color:var(--muted);text-underline-offset:3px}
.stopka-dol .zaloguj:hover{color:var(--accent)}
:root[data-contrast="high"] footer{border-top:2px solid #fff}

/* Telefon: menu przedmiotowe chowa się pod przyciskiem */
.menu-toggle{display:none;align-items:center;gap:10px;font:inherit;font-weight:700;color:var(--ink);background:var(--surface);border:0;border-radius:999px;padding:10px 16px;cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,background .2s}
.bars{position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-6px}
.bars::after{top:6px}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  .layout{grid-template-columns:1fr;gap:20px;padding-block:20px}
  .stopka-gora{grid-template-columns:1fr}
  .menu-toggle{display:inline-flex}
  .site-nav{display:none}
  .site-nav.open{display:block}
  .bip-brand{flex:1 1 100%;flex-wrap:wrap;gap:10px 14px}
  .bip-zlobek img{height:40px}
  .bip-logo img{width:135px;height:auto}
  .bip-brand strong{font-size:1.2rem}
  .search-form{flex:1 1 0;min-width:0}
  .search-form input[type="search"]{flex:1;width:auto}
}
@media (prefers-reduced-motion:reduce){.bars,.bars::before,.bars::after{transition:none}}

/* Ścieżka nawigacji nad tytułem: pigułka z domkiem i strzałkami */
.okruszki{margin-bottom:16px}
.okruszki ol{list-style:none;margin:0;padding:7px 16px;display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;font-size:.88rem}
.okruszki li{display:inline-flex;align-items:center;gap:10px;color:var(--muted)}
.okruszki li+li::before{content:"";width:12px;height:12px;flex:none;background:currentColor;opacity:.55;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.okruszki a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:700;text-decoration:none;text-underline-offset:3px}
.okruszki a:hover{color:var(--accent);text-decoration:underline}
.okruszki svg{flex:none;color:var(--accent)}
.okruszki [aria-current]{color:var(--muted)}