/* Układ: klasyczny portal lokalny jak echogminy.pl – żółty pasek informacyjny, kremowa belka z logo, niebieskie menu, biała treść w kontenerze 1140 px, granatowa stopka. Jeden motyw: błękit i pomarańcz z logo + krem i granat z Echa Gminy. */
:root{
  --blue:#0060a8;        /* niebieski z logo Wróbel */
  --blue-dark:#084a7c;   /* ciemniejszy lazur – hover, linki */
  --navy:#0b3250;        /* granat w tonacji logo – stopka, nagłówki */
  --orange:#f5a623;      /* pomarańcz „Tanie czytanie” */
  --yellow:#fff38b;      /* żółty pasek echogminy */
  --cream:#fffbdd;       /* krem belki z logo */
  --bg:#ffffff;
  --bg-2:#f7f7f7;
  --text:#333333;
  --muted:#7e7e7e;
  --line:#dddddd;
  --font:"Lucida Grande","Lucida Sans Unicode","Lato",Arial,sans-serif;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-dark)}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700;color:var(--navy)}
h1{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h2{font-size:clamp(1.35rem,2.4vw,1.8rem)}
h3{font-size:1.1rem}
p{margin:0}
.container{max-width:1140px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.skip{position:absolute;left:-999px;top:0;background:var(--orange);color:#000;padding:.5rem 1rem;z-index:100;font-weight:700}
.skip:focus{left:var(--gl)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.btn{display:inline-block;padding:.65rem 1.3rem;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;font-size:1rem;line-height:1.2;text-transform:uppercase;letter-spacing:.03em;transition:background .15s,color .15s}
.btn-orange{background:var(--orange);color:#1a1a1a}
.btn-orange:hover{background:#e0931a}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark)}
.btn-outline{border-color:#fff;color:#fff;background:transparent}
.btn-outline:hover{background:#fff;color:var(--blue-dark)}

/* Pasek górny – jak echogminy */
.topbar{background:var(--yellow);color:var(--text);font-size:.92rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:40px;flex-wrap:wrap;padding-block:.35rem}
.topbar ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem;flex-wrap:wrap}
.topbar a{color:var(--text);text-decoration:none}
.topbar a:hover{text-decoration:underline}
.topbar .fb{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}
.topbar .fb svg{width:16px;height:16px;fill:var(--blue-dark)}
@media (max-width:600px){.topbar .date{display:none}}

/* Belka z logo */
.masthead{background:var(--cream);border-bottom:1px solid #efe8b8}
.masthead .container{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.9rem;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--navy)}
.logo img{width:110px;height:110px;flex:none}
.logo-text{display:grid;gap:.15rem}
.logo-text strong{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;color:var(--blue-dark);text-transform:uppercase;letter-spacing:.02em}
.logo-text small{font-size:.95rem;color:var(--text)}
.logo-text em{font-style:normal;color:var(--orange);font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem}
@media (max-width:480px){.logo img{width:80px;height:80px}}
.masthead-right{display:grid;gap:.25rem;text-align:right;font-size:.95rem;color:var(--text)}
.masthead-right strong{font-size:1.25rem;color:var(--navy)}
.masthead-right a{text-decoration:none;color:var(--navy)}
@media (max-width:860px){.masthead-right{text-align:left}}

/* Menu – niebieskie, jak pasek echogminy */
.mainnav{background:var(--blue);position:sticky;top:env(safe-area-inset-top,0px);z-index:50;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.mainnav .container{display:flex;justify-content:space-between;align-items:center}
.menu{list-style:none;margin:0;padding:0;display:flex}
.menu a{display:block;color:#fff;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;padding:.9rem 1.1rem;border-left:1px solid rgba(255,255,255,.18)}
.menu li:last-child a{border-right:1px solid rgba(255,255,255,.18)}
.menu a:hover,.menu a[aria-current="page"]{background:var(--blue-dark)}
.menu .shop a{background:var(--orange);color:#1a1a1a;border-color:transparent}
.menu .shop a:hover{background:#e0931a}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;padding:.5rem .8rem;margin-block:.45rem;font:inherit;font-weight:700;text-transform:uppercase;cursor:pointer;align-items:center;gap:.5rem}
@media (max-width:860px){
  .burger{display:flex}
  .mainnav .container{flex-wrap:wrap}
  .menu{display:none;flex-direction:column;width:100%;padding-bottom:.5rem}
  .menu.open{display:flex}
  .menu a,.menu li:last-child a{border:0;border-top:1px solid rgba(255,255,255,.18)}
}

/* Baner */
.banner{background:var(--navy);color:#fff;background-image:linear-gradient(100deg,var(--navy) 0%,var(--navy) 55%,var(--blue) 100%)}
.banner .container{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2rem;padding-block:2.6rem;align-items:center}
.banner h1{color:#fff}
.banner h1 span{color:var(--orange)}
.banner p{margin-top:1rem;max-width:60ch;color:#e6ecf6}
.banner .actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.hours-box{background:#fff;color:var(--text);border-top:5px solid var(--orange);padding:1.2rem 1.3rem}
.hours-box h2{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.hours{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;margin:.8rem 0 0;font-variant-numeric:tabular-nums}
.hours dt{color:var(--muted)}
.hours dd{margin:0;font-weight:700}
.banner .hours-box .status{margin-top:.9rem;font-weight:700;font-size:1rem;display:flex;gap:.6rem;align-items:center;color:#111111}
.status::before{content:"";width:12px;height:12px;border-radius:50%;background:#1f8a3f;flex:none}
.status.closed::before{background:#c9201a}
@media (max-width:860px){.banner .container{grid-template-columns:1fr}}

/* Sekcje */
.section{padding-block:2.8rem}
.section.alt{background:var(--bg-2);border-block:1px solid #ececec}
.section-title{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.section-title h2{text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1.15rem,2vw,1.45rem);white-space:nowrap}
.section-title::after{content:"";flex:1;height:3px;background:var(--blue)}
.section-title.orange::after{background:var(--orange)}
.lead{font-size:1.08rem;max-width:68ch}

/* O nas */
.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:2rem}
.cols>*{min-width:0}
.story{display:grid;gap:1rem}
.story p{max-width:70ch}
.box{background:var(--cream);border:1px solid #efe8b8;padding:1.2rem 1.3rem;display:grid;gap:.6rem}
.box h3{color:var(--navy)}
.box ul{margin:0;padding-left:1.2rem}
.box.white{background:#fff;border-color:var(--line)}
.since{display:grid;gap:.2rem;border-left:5px solid var(--orange);padding-left:1rem}
.since strong{font-size:2.4rem;line-height:1;color:var(--blue-dark)}
.since span{color:var(--muted)}
@media (max-width:860px){.cols{grid-template-columns:1fr}}

/* Oferta – lista kart z nagłówkiem na niebiesko */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.grid3>*{min-width:0}
.offer{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.offer h3{background:var(--blue);color:#fff;padding:.75rem 1rem;font-size:1rem;text-transform:uppercase;letter-spacing:.04em}
.offer p{padding:1rem;color:var(--text);flex:1}
.offer ul{margin:0;padding:0 1rem 1rem 2.2rem;color:var(--muted);font-size:.95rem}
@media (max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid3{grid-template-columns:1fr}}

/* Usługi */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.service{background:#fff;border:1px solid var(--line);border-top:4px solid var(--orange);padding:1.1rem 1.1rem 1.2rem;display:grid;gap:.5rem;align-content:start}
.service .ico{width:40px;height:40px;background:var(--cream);display:grid;place-items:center;color:var(--blue-dark)}
.service .ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.service p{font-size:.95rem;color:var(--text)}

/* Sklep */
.shop{background:var(--blue);color:#fff}
.shop .container{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 2rem;align-items:center;padding-block:2.2rem}
.shop h2{color:#fff}
.shop p{margin-top:.5rem;color:#e6ecf6;max-width:60ch}
.shop .tag{display:inline-block;background:var(--orange);color:#1a1a1a;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;padding:.25rem .6rem;margin-bottom:.7rem}
.shop .actions{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:760px){.shop .container{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:.6rem;max-width:860px}
.faq details{border:1px solid var(--line);background:#fff}
.faq summary{cursor:pointer;padding:.9rem 1rem;font-weight:700;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:1rem}
.faq summary::after{content:"+";color:var(--orange);font-size:1.4rem;line-height:1;font-weight:900}
.faq details[open] summary{background:var(--cream)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:.8rem 1rem 1rem;color:var(--text);border-top:1px solid var(--line)}

/* Kontakt */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:1.5rem}
.contact>*{min-width:0}
.contact-list{display:grid;gap:1rem;align-content:start}
.contact-list .box{gap:.25rem}
.contact-list .box h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.contact-list .val{font-size:1.15rem;font-weight:700;color:var(--navy);word-break:break-word}
.contact-list a{text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.maplink{display:block;background:var(--blue);color:#fff;text-decoration:none;font-weight:700;padding:.9rem 1rem;text-align:center;text-transform:uppercase;letter-spacing:.04em}
.maplink:hover{background:var(--blue-dark)}
form{background:#fff;border:1px solid var(--line);padding:1.4rem;display:grid;gap:.9rem}
form h3{font-size:1.2rem;text-transform:uppercase;letter-spacing:.04em;padding-bottom:.6rem;border-bottom:3px solid var(--orange)}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media (max-width:560px){.row{grid-template-columns:1fr}}
label{display:grid;gap:.3rem;font-weight:700;font-size:.9rem;color:var(--navy)}
input,textarea,select{font:inherit;color:var(--text);background:#fff;border:1px solid #bbb;padding:.7rem .8rem;width:100%;border-radius:0}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,96,168,.18)}
textarea{min-height:120px;resize:vertical}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.85rem;color:var(--muted)}
.consent input{width:auto;margin-top:.2rem}
.toast{display:none;padding:.8rem 1rem;border:1px solid}
.toast.show{display:block}
.toast.ok{background:#e9f7ee;border-color:#2e9e4f;color:#1a5a2e}
.toast.err{background:#fdecea;border-color:#da251d;color:#8a1a12}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.note{font-size:.9rem;color:var(--muted)}
.recaptcha-note{font-size:.8rem}
.recaptcha-note a{color:var(--muted)}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

/* Stopka – granat echogminy */
footer{background:var(--navy);color:#dfe6f2;margin-top:2.5rem}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding-block:2.4rem}
.fgrid>*{min-width:0}
footer h2{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.8rem;padding-bottom:.4rem;border-bottom:2px solid var(--orange);display:inline-block}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
footer a{color:#fff;text-decoration:none}
footer a:hover{color:var(--orange)}
.flogo{display:flex;align-items:center;gap:.8rem;color:#fff;font-weight:700;font-size:1.2rem}
.flogo img{width:80px;height:80px;flex:none;background:#fff;padding:4px;border-radius:6px}
.fabout{display:grid;gap:.8rem;max-width:44ch}
.copy{border-top:1px solid rgba(255,255,255,.15);padding-block:1rem;font-size:.85rem;display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;color:#b9c6dc}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

/* Podstrony tekstowe (polityka prywatności itp.) */
.page-head{background:var(--navy);color:#fff}
.page-head .container{padding-block:1.8rem}
.page-head h1{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem)}
.page-head p{color:#dfe6f2;margin-top:.4rem;font-size:.95rem}
.breadcrumb{list-style:none;margin:0 0 .6rem;padding:0;display:flex;gap:.5rem;font-size:.85rem;color:#b9c6dc;flex-wrap:wrap}
.breadcrumb a{color:#fff;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.legal{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:2.5rem;padding-block:2.5rem}
.legal>*{min-width:0}
.legal article{display:grid;gap:1.6rem;max-width:72ch}
.legal section{display:grid;gap:.7rem}
.legal h2{font-size:1.25rem;padding-bottom:.4rem;border-bottom:3px solid var(--blue)}
.legal h3{font-size:1.02rem;color:var(--blue-dark)}
.legal ul,.legal ol{margin:0;padding-left:1.3rem;display:grid;gap:.35rem}
.legal .placeholder{background:var(--yellow);padding:0 .25rem;font-weight:700}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);align-self:start;background:var(--bg-2);border:1px solid var(--line);padding:1.1rem 1.2rem}
.toc h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.6rem;color:var(--muted)}
.toc ol{margin:0;padding-left:1.2rem;display:grid;gap:.35rem;font-size:.92rem}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
@media (max-width:900px){.legal{grid-template-columns:1fr}.toc{position:static}}