/* =========================================================
   FORMS — Polish Flavors
   uniwersalny moduł: inputy, selecty, textarea, checkbox/radio,
   upload, range, switch, stany (focus/hover/error/success/disabled),
   layouty dla .contactform / .signup / .filterbar
   ========================================================= */

:root{
  --form-bg: #fff;
  --form-bg-muted: #f8f8f9;
  --form-border: #d8dbe2;
  --form-border-strong: #c9cdd6;
  --form-text: #1b1e27;
  --form-placeholder: #8e97a6;
  --form-focus: #2f6fed;         /* akcent */
  --form-success: #1a9e61;
  --form-error: #d93d4a;
  --form-warning: #e3a008;
  --form-shadow: 0 1px 0 rgba(0,0,0,.03), 0 6px 16px rgba(0,0,0,.06);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --pad-y: .9rem;
  --pad-x: 1rem;
  --gap: 1rem;
  --gap-lg: 1.25rem;
  --f-sm: .925rem;
  --f-base: 1rem;
  --f-lg: 1.0625rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --form-bg: #111318;
    --form-bg-muted: #0e1014;
    --form-border: #2a2f3a;
    --form-border-strong: #3a4250;
    --form-text: #e7eaf0;
    --form-placeholder: #9aa3b2;
    --form-shadow: 0 0 0 rgba(0,0,0,0);
  }
}

:root{
  --bg:#f7f4ef; --paper:#ffffff; --ink:#1d1c1a; --muted:#6b675f;
  --brand:#cc2e41; --brand-2:#2e6b4a; --accent:#efe7dc; --line:#e8e2d8;
  --radius:14px; --gap:16px; --shadow:0 10px 20px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.65 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
p{margin:0 0 12px}
img{width:100%;height:auto;border-radius:12px}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
main {padding: 0 14px;}

/* Header */
.header{background:rgba(255,255,255,.88);backdrop-filter:saturate(120%) blur(6px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line)}
.header__bar{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.header__logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.header__logo-emoji{font-size:43px}
.header__burger{display:none;border:0;background:transparent;font-size:24px}
.nav__list{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav__link{display:block;border-radius:10px}
.nav__link:hover{background:var(--accent)}

/* Sections */
.section{padding:36px 0}
.section__head{margin-bottom:14px}
.section__title{font-size:28px;margin:0 0 6px}
.section__desc{color:var(--muted);margin:0}

/* Hero */
.footer__brand {
  font-weight: 700;
  color: #000;
  display: flex;
  align-items: center;
}
.footer__brand span {
  font-size: 43px;
  margin-right: 14px;
}
.header__logo-text
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:28px 0}
.hero__kicker{color:var(--brand-2);font-weight:700;margin:0 0 8px}
.hero__title{font-size:44px;line-height:1.1;margin:0 0 12px}
.hero__text{color:var(--ink)}
.hero__cta{display:flex;gap:12px;margin:10px 0 14px}
.hero__badges{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:6px 0 0;padding:0}
.hero__badge{background:var(--paper);border:1px solid var(--line);padding:6px 10px;border-radius:999px;box-shadow:var(--shadow)}
.hero__figure{margin:0}
.hero__figcaption{margin-bottom: 10px;font-size:12px;color:var(--muted);margin-top:6px}

/* Manifesto */
.manifesto__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.manifesto__item{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.manifesto__title{margin:0 0 8px}

/* Cards */
.cards{display:grid;margin-bottom: 10px;gap:18px}
.cards--grid{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s ease}
.card:hover{transform:translateY(-2px)}
.card__media{position:relative}
.card__tag{position:absolute;left:10px;top:10px;background:#fff;padding:6px 10px;border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow);font-size:13px}
.card__body{padding:14px}
.card__title{margin:0 0 6px;font-size:20px}
.card__text{margin:0 0 10px;color:var(--ink)}
.meta{display:flex;gap:12px;list-style:none;margin:0;padding:0;color:var(--muted);font-size:13px}
.hero__img {height: 440px;height: auto;margin-top: 29px;}
/* Tabs */
.tabs{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.tabs__bar{display:flex;flex-wrap:wrap;padding:8px;gap:8px;border-bottom:1px solid var(--line)}
.tabs__btn{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.tabs__btn.is-active,.tabs__btn:hover{background:var(--accent)}
.tabs__content{padding:14px}
.tabs__panel{display:none}
.tabs__panel.is-active{display:block}
.tabs__text{margin:0;color:var(--ink)}

/* Season */
.season__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.season__card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.season__title{margin:0 0 8px}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.steps__item{display:flex;align-items:flex-start;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px}
.steps__icon{font-size:20px;line-height:1}
.steps__body{flex:1}

/* Pantry */
.pantry__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pantry__group{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.pantry__title{margin:0 0 8px}
.pantry__text{margin:0}

/* Regions */
.regions__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.region{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.region__title{margin:0 0 8px}
.region__text{margin:0}

/* Myths */
.myths__list{display:grid;grid-template-columns:1fr;gap:12px}
.myth{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.myth__q{margin:0 0 6px}
.myth__a{margin:0}

/* Compare */
.table{display:grid;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow);margin-bottom:10px}
.table__row{display:grid;grid-template-columns:2fr 1fr 1fr;border-top:1px solid var(--line);padding:12px;gap:10px}
.table__row--head{background:#fff7f7;font-weight:700;border-top:0}
.compare__note{color:var(--muted);margin:8px 0 0}

/* Safety */
.safety__content{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.callout {padding: 14px;}
/* Posts */
.posts{display:grid;gap:16px}
.posts--grid{grid-template-columns:repeat(3,1fr)}
.post{margin-bottom: 21px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.post__title{margin:0 0 6px}
.post__meta{color:var(--muted);font-size:13px;margin:0 0 8px}

/* FAQ */
.faq__item{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.faq__q{cursor:pointer}
.faq__a{color:var(--ink);margin-top:8px}

/* CTA */
.cta{display:flex;align-items:flex-start;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.cta__icon{font-size:28px;line-height:1}
.cta__title{margin:0 0 6px}
.form{display:grid;gap:10px}
.form__row{display:flex;gap:10px}
.form__input{flex:1;padding:10px;border:1px solid var(--line);border-radius:10px}
.form__hint{color:var(--muted);font-size:13px}

/* Footer */
.footer{margin-top:32px;background:#fff;border-top:1px solid var(--line)}
.footer__top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;padding:20px 0}
.footer__title{margin:0 0 8px}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.footer__bottom{border-top:1px solid var(--line);padding:12px 0}

/* Animations */
@keyframes fadeUp{from{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}
.section,.card,.post,.cta,.faq__item,.region,.season__card,.manifesto__item{animation:fadeUp .5s ease both}

/* Responsive */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr}
  .hero__img {height: auto;}
  .cards--grid{grid-template-columns:repeat(2,1fr)}
  .posts--grid{grid-template-columns:repeat(2,1fr)}
  .manifesto__grid{grid-template-columns:1fr 1fr}
  .pantry__grid{grid-template-columns:1fr 1fr}
  .regions__grid{grid-template-columns:1fr}
  .season__grid{grid-template-columns:1fr 1fr}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav__link {margin-bottom: 26px;}
  .nav__list {display: block;}
  .header__burger{display:block; color: #000;}
  .nav{display: none;position: absolute; right: 0; top: 62px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 21px; width: 100%;}
  .nav.is-open{display:block}
  .cards--grid{grid-template-columns:1fr}
  .posts--grid{grid-template-columns:1fr}
  .manifesto__grid{grid-template-columns:1fr}
  .pantry__grid{grid-template-columns:1fr}
  .season__grid{grid-template-columns:1fr}
  .table__row{grid-template-columns:1fr;gap:6px}
}

/* ---------- Reset minimalny dla pól ---------- */
input, select, textarea, button{
  font: inherit;
  color: #000000;
}
input::placeholder,
textarea::placeholder{ color: var(--form-placeholder); opacity: 1; }

/* ---------- Wrapper z emoji-ikoną (nasz pattern: <label class="input">🧑 …) ---------- */
.input{
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--form-border);
  background: #e7e7e7;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius-lg);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  line-height: 1.2;
  box-shadow: var(--form-shadow);
}
.input > input,
.input > textarea,
.input > select{
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  outline: none;
  min-width: 0;
  font-size: var(--f-base);
}
.input > textarea{ resize: vertical; }
.input:focus-within{
  border-color: var(--form-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-focus) 20%, transparent);
}
.input.is-error{ border-color: var(--form-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-error) 20%, transparent); }
.input.is-success{ border-color: var(--form-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-success) 20%, transparent); }
.input.is-disabled,
.input:has(> :disabled){
  opacity: .6;
  filter: grayscale(.15);
  cursor: not-allowed;
}

/* Wariant search z lupką w toolbarze */
.input--search{
  background: var(--form-bg-muted);
  border-style: dashed;
}

/* Małe podpowiedzi pod polami */
.field__hint{
  margin-top: .4rem;
  font-size: .9rem;
  color: var(--form-placeholder);
}
.field__msg{
  margin-top: .45rem;
  font-size: .92rem;
}
.field__msg--error{ color: var(--form-error); }
.field__msg--success{ color: var(--form-success); }

/* ---------- Layout formularzy ---------- */
/* Strona Kontakt */
.contactform{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--gap-lg);
  margin-top: .5rem;
}
.contactform .input:nth-last-child(2){ grid-column: 1 / -1; } /* textarea */
.contactform button[type=submit]{ grid-column: 1 / -1; justify-self: start; }

@media (max-width: 860px){
  .contactform{ grid-template-columns: 1fr; }
}

/* Newsletter / signup (inline) */
.signup{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap);
  align-items: center;
  max-width: 680px;
}
.signup .input{ margin: 0; }
.signup .signup__legal{
  grid-column: 1 / -1;
  margin: .4rem 0 0;
  font-size: .9rem; color: var(--form-placeholder);
}

/* Pasek filtrów bloga */
.filterbar{
  background: var(--form-bg-muted);
  padding: var(--gap-lg);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--form-border);
}
.filterbar__row{
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: var(--gap-lg);
}
.filterbar .btn{ white-space: nowrap; }
.filterbar .btn.is-active{ outline: 2px solid var(--form-focus); }

@media (max-width: 980px){
  .filterbar__row{ grid-template-columns: 1fr; }
}

/* ---------- Select (custom bez bibliotek) ---------- */
select{
  appearance: none;
  padding-right: 2.2rem;
  background:
    linear-gradient(to bottom, transparent 0, transparent 100%),
    radial-gradient(currentColor 0, currentColor 0) left top / 0 0 no-repeat;
}
.input select{
  background-image:
    linear-gradient(to bottom, transparent 0, transparent 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e97a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .2rem center;
}

/* ---------- Checkbox & Radio (estetyczne, dostępne) ---------- */
.control{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  user-select: none;
  font-size: var(--f-base);
}
.control input{ position: absolute; transform: scale(0); }
.control__box{
  width: 20px; height: 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--form-border-strong);
  background: var(--form-bg);
  display: inline-grid; place-items: center;
  transition: all .2s ease;
}
.control__box::after{
  content: "✔️"; font-size: 13px; opacity: 0; transform: scale(.6); transition: .2s ease;
}
.control:has(input:checked) .control__box{
  border-color: var(--form-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-focus) 20%, transparent);
}
.control:has(input:checked) .control__box::after{ opacity: 1; transform: scale(1); }

/* Radio jako kółko */
.control--radio .control__box{ border-radius: 999px; }
.control--radio .control__box::after{ content: "•"; font-size: 24px; line-height: 1; }

/* ---------- Przełącznik (switch) ---------- */
.switch{
  display: inline-flex; align-items: center; gap: .7rem; cursor: pointer;
}
.switch input{ position: absolute; transform: scale(0); }
.switch__track{
  width: 44px; height: 26px; background: var(--form-border);
  border-radius: 999px; position: relative; transition: background .2s ease;
}
.switch__thumb{
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 999px; background: var(--form-bg); box-shadow: var(--form-shadow);
  transition: transform .2s ease;
}
.switch:has(input:checked) .switch__track{ background: var(--form-focus); }
.switch:has(input:checked) .switch__thumb{ transform: translateX(18px); }

/* ---------- Input typu file ---------- */
.input--file{
  position: relative; overflow: hidden;
}
.input--file input[type=file]{
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.input--file .input__label{
  pointer-events: none;
  color: var(--form-placeholder);
}

/* ---------- Range (suwak) ---------- */
input[type=range]{
  width: 100%;
  background: transparent;
}
input[type=range]::-webkit-slider-runnable-track{
  height: 6px; background: var(--form-border); border-radius: 4px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 999px; background: var(--form-focus);
  margin-top: -6px; box-shadow: 0 0 0 2px #fff;
}
input[type=range]::-moz-range-track{ height: 6px; background: var(--form-border); border-radius: 4px; }
input[type=range]::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 999px; background: var(--form-focus); border: 2px solid #fff;
}

/* ---------- Stany semantyczne na polach ---------- */
/* HTML5 walidacja bez JS — delikatnie, bez „krzyku” */
input:required:invalid,
textarea:required:invalid{
  box-shadow: none;
}
.input:has(> :required:invalid){ border-color: var(--form-border-strong); }
.input:has(> :user-invalid){ border-color: var(--form-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-error) 18%, transparent); }
.input:has(> :valid){ border-color: color-mix(in srgb, var(--form-focus) 35%, var(--form-border)); }

/* ---------- Przycisk submit w formularzach ---------- */
form .btn[type=submit]{
  padding-inline: 1.1rem;
  border-radius: var(--radius-lg);
}

/* ---------- Focus ring dla dostępności (dla wszystkich kontroli) ---------- */
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--form-focus) 85%, transparent);
  outline-offset: 2px;
}

/* ---------- Stany disabled ---------- */
:where(input, textarea, select, button):disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* ---------- Małe utility do układania pól w wierszu ---------- */
.form-row{
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 720px){ .form-row{ grid-template-columns: 1fr; } }

/* ---------- Karty/ramki dla grup pól ---------- */
fieldset.form-fieldset{
  border: 1px dashed var(--form-border);
  padding: calc(var(--gap) + .25rem);
  border-radius: var(--radius-lg);
  background: var(--form-bg-muted);
}
fieldset.form-fieldset legend{
  padding: 0 .5rem;
  font-weight: 600;
  color: var(--form-placeholder);
}

/* ---------- Specjalne: mapa iframe na Kontakt ---------- */
.map__embed{
  width: 100%;
  height: 420px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--form-border);
  box-shadow: var(--form-shadow);
}

/* ---------- Mikro-animacje bezpieczne ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Cookie consent banner */
.cookie-consent{
  position:fixed;
  left:0;right:0;bottom:18px;
  display:flex;justify-content:center;z-index:9999;
  pointer-events:none;
}
.cookie-consent__inner{
  pointer-events:auto;
  background:rgba(255,255,255,0.98);
  border:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
  border-radius:12px;
  padding:12px 16px;
  display:flex;gap:12px;align-items:center;max-width:1180px;width:calc(100% - 40px);
}
.cookie-consent__text{color:var(--ink);font-size:14px;line-height:1.3}
.cookie-consent__text .cookie-consent__link{color:var(--brand);text-decoration:underline}
.cookie-consent__actions{margin-left:auto}
.cookie-consent__btn{background:var(--brand);color:#fff;border:0;padding:8px 12px;border-radius:10px;cursor:pointer}
.cookie-consent--hidden{opacity:0;transform:translateY(10px);transition:opacity .24s ease, transform .24s ease}
@media (max-width:720px){
  .cookie-consent__inner{flex-direction:column;align-items:flex-start}
  .cookie-consent__actions{width:100%;display:flex;justify-content:flex-end;margin-left:0}
}