/*
Theme Name: Kratka
Description: Wspólny, edytowalny motyw korepetycji z papierową siatką.
Version: 1.0.0
Text Domain: kratka
Requires at least: 5.4
Requires PHP: 7.4
*/

@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("assets/fonts/space-grotesk-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("assets/fonts/space-grotesk-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("assets/fonts/instrument-sans-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}
@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("assets/fonts/instrument-sans-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

:root{
  /* Metafory skóry występują wyłącznie tutaj. */
  --pomarancz:#f67d2c;
  --pomarancz-2:#e06a15;
  --pomarancz-tekst:#ad4c08;
  --pomarancz-ciemny:#8f3f05;
  --atrament:#2b2b2b;
  --proza:#4a4a4a;
  --szary-logo:#666666;
  --mgla-ui:#8a8a8a;
  --obwodka:#767676;
  --biel:#ffffff;
  --papier:#f7f6f4;
  --papier-2:#efedea;
  --linia:#e2ded8;
  --kratka-linia:rgba(43,43,43,.085);
  --cien-karty:0 1px 2px rgba(43,43,43,.05),0 8px 22px rgba(43,43,43,.07);
  --cien-belki:0 6px 18px rgba(43,43,43,.05);
  --druk-tlo:#ffffff;
  --druk-tekst:#000000;
  --druk-obwodka:#999999;

  /* Stabilny kontrakt semantyczny komponentów. */
  --kolor-akcentu:var(--pomarancz);
  --kolor-akcentu-hover:var(--pomarancz-2);
  --kolor-linku:var(--pomarancz-tekst);
  --kolor-linku-hover:var(--pomarancz-ciemny);
  --kolor-tekstu:var(--atrament);
  --kolor-tekstu-wtornego:var(--proza);
  --kolor-tekstu-na-kontrascie:var(--atrament);
  --kolor-tekstu-na-akcencie:var(--atrament);
  --kolor-metadanych:var(--szary-logo);
  --kolor-ui-nietekstowego:var(--mgla-ui);
  --kolor-obwodki:var(--obwodka);
  --kolor-karty:var(--biel);
  --kolor-tla:var(--papier);
  --kolor-tla-alternatywnego:var(--papier-2);
  --kolor-linii:var(--linia);
  --kolor-kratki:var(--kratka-linia);
  --kolor-fokusu:var(--pomarancz-tekst);
  --kolor-fokusu-kontekstowy:var(--kolor-fokusu);
  --cien-komponentu:var(--cien-karty);
  --cien-nawigacji:var(--cien-belki);

  --font-naglowek:"Space Grotesk","Segoe UI",Tahoma,sans-serif;
  --font-tekst:"Instrument Sans","Segoe UI",Tahoma,sans-serif;
  --t-h1:clamp(1.8rem,1.35rem + 2.1vw,2.6rem);
  --t-h2:clamp(1.4rem,1.15rem + 1.2vw,2rem);
  --t-h3:clamp(1.1rem,1.02rem + .45vw,1.32rem);
  --t-baza:clamp(1rem,.965rem + .18vw,1.08rem);
  --t-mala:.885rem;
  --t-mikro:.78rem;
  --opas:1160px;
  --luz:clamp(1rem,.7rem + 1.2vw,1.75rem);
  --pion:clamp(2.75rem,2rem + 3.2vw,4.75rem);
  --kratka-krok:26px;
  --promien:2px;

  /* Aliasy stabilnego kontraktu rdzenia. */
  --font-podstawowy:var(--font-tekst);
  --font-wyrozniajacy:var(--font-naglowek);
  --rozmiar-maly:var(--t-mala);
  --rozmiar-tekstu:var(--t-baza);
  --rozmiar-lead:clamp(1.5rem,1.2rem + 1.4vw,2.05rem);
  --rozmiar-h3:var(--t-h3);
  --waga-naglowka:600;
  --interlinia-zwarta:1.1;
  --odstep-liter-wersaliki:.09em;
  --odstep-1:.25rem;
  --odstep-2:.5rem;
  --odstep-3:.75rem;
  --odstep-4:1rem;
  --odstep-5:1.5rem;
  --odstep-6:2rem;
  --odstep-7:3rem;
  --odstep-sekcji:var(--pion);
  --odstep-kontenera:var(--luz);
  --szerokosc-kontenera:var(--opas);
  --promien-maly:var(--promien);
  --minimalny-cel-dotykowy:48px;
  --rozmiar-ikony:1.375rem;
  --grubosc-linii:1px;
  --grubosc-fokusu:3px;
  --odsuniecie-obrysu:2px;
  --wysokosc-naglowka:4.5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--wysokosc-naglowka) + var(--odstep-2) + 2px)}
body{margin:0;color:var(--kolor-tekstu-wtornego);background:var(--kolor-tla);
  font-family:var(--font-tekst);font-size:var(--t-baza);line-height:1.7;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-naglowek);color:var(--kolor-tekstu);line-height:1.2;
  margin:0 0 .6em;font-weight:600;letter-spacing:-.01em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
p{margin:0 0 1.05em}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0}
a{color:var(--kolor-linku);text-decoration:underline;text-underline-offset:.15em;
  text-decoration-thickness:.06em}
a:hover,a:focus-visible{color:var(--kolor-linku-hover)}
:focus-visible{outline:3px solid var(--kolor-fokusu);outline-offset:2px;border-radius:var(--promien)}
svg{flex:none;width:1em;height:1em}
hr{border:0;border-top:2px solid var(--kolor-akcentu);width:3.5rem;margin:1.25rem auto}
.opas{width:min(calc(100% - 2 * var(--luz)),var(--opas));margin-inline:auto}
.tylko-dla-czytnika{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;color:inherit}
.kratka{background-color:var(--kolor-tla);background-image:
  repeating-linear-gradient(0deg,var(--kolor-kratki) 0 1px,transparent 1px var(--kratka-krok)),
  repeating-linear-gradient(90deg,var(--kolor-kratki) 0 1px,transparent 1px var(--kratka-krok));
  background-position:center}

.belka{position:sticky;top:0;z-index:40;background:var(--kolor-karty);
  border-bottom:1px solid var(--kolor-linii);box-shadow:var(--cien-nawigacji)}
.belka__rzad{display:flex;align-items:center;justify-content:space-between;
  gap:.7rem var(--luz);min-height:4.5rem;flex-wrap:wrap;padding-block:.35rem}
.marka{margin:0;font-size:0;line-height:0}
.marka .custom-logo-link{display:inline-flex;align-items:center;color:var(--kolor-tekstu);
  font-family:var(--font-naglowek);font-size:1rem;line-height:1.2;text-decoration:none}
.marka img{width:clamp(180px,22vw,232px);max-height:42px;object-fit:contain;object-position:left center}
.marka--tekst{font-size:initial;line-height:1.1}
.marka--tekst .custom-logo-link{font-size:clamp(1.2rem,1rem + .8vw,1.5rem);font-weight:800;letter-spacing:.005em;color:var(--kolor-tekstu)}
.marka--tekst .custom-logo-link:hover,.marka--tekst .custom-logo-link:focus-visible{color:var(--kolor-akcentu-hover)}
.belka__prawa{display:flex;align-items:center;gap:.6rem var(--luz);flex-wrap:wrap}

.uklad{display:grid;gap:var(--luz);padding-block:var(--pion);grid-template-columns:1fr;
  align-items:start}
.karta-tresci{background:var(--kolor-karty);border:1px solid var(--kolor-linii);
  border-top:3px solid var(--kolor-akcentu);box-shadow:var(--cien-komponentu);
  padding:clamp(1.35rem,1rem + 1.6vw,2.6rem);color:var(--kolor-tekstu-wtornego);min-width:0}
.karta-tresci>h1{margin-bottom:1rem}
.proza{min-width:0}
.proza a:not(.przycisk){color:var(--kolor-linku)}
.proza a:not(.przycisk):hover,.proza a:not(.przycisk):focus-visible{color:var(--kolor-linku-hover)}
.proza blockquote{margin:1.4em 0;padding:.2rem 0 .2rem 1.25rem;
  border-left:3px solid var(--kolor-akcentu);color:var(--kolor-tekstu);font-size:1.02em}
.proza h3{margin-top:2em}
.proza pre,.proza table{max-width:100%;overflow:auto}
.proza input,.proza textarea{max-width:100%}

.meta{display:flex;flex-wrap:wrap;gap:.3rem .95rem;margin:0 0 1.35rem;padding:0;
  list-style:none;font-size:var(--t-mikro);letter-spacing:.05em;text-transform:uppercase;
  color:var(--kolor-metadanych)}
.meta li{display:flex;align-items:center;gap:.4rem;min-height:24px}
.meta a{display:inline-flex;align-items:center;min-height:24px;color:var(--kolor-metadanych)}
.meta svg{color:var(--kolor-ui-nietekstowego);width:14px;height:14px}
.etykieta-archiwum{font-family:var(--font-naglowek);font-size:var(--t-mikro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--kolor-metadanych);margin:0 0 .5rem}

.panel{display:grid;gap:var(--luz);align-content:start;min-width:0}
.widget{background:var(--kolor-karty);border:1px solid var(--kolor-linii);padding:1.25rem;
  box-shadow:var(--cien-komponentu);min-width:0}
.widget__tytul{font-family:var(--font-naglowek);font-size:.86rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 1rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--kolor-linii);position:relative}
.widget__tytul::after{content:"";position:absolute;left:0;bottom:-1px;width:2.5rem;height:3px;
  background:var(--kolor-akcentu)}
.widget ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.widget li{font-size:var(--t-mala)}
.widget li a{display:inline-flex;align-items:center;min-height:36px;color:var(--kolor-tekstu-wtornego);
  text-decoration:none}
.widget li a:hover,.widget li a:focus-visible{color:var(--kolor-linku-hover);text-decoration:underline}
.szukajka{display:flex;gap:0;max-width:100%}
.szukajka input[type=text],.szukajka input[type=search]{flex:1 1 auto;min-width:0;min-height:46px;
  padding:.6rem .85rem;border:1px solid var(--kolor-obwodki);border-right:0;
  border-radius:var(--promien) 0 0 var(--promien);background:var(--kolor-karty);
  color:var(--kolor-tekstu-wtornego);font:inherit;font-size:var(--t-mala)}
.szukajka button{flex:none;width:46px;min-height:46px;border:1px solid var(--kolor-linku);
  border-radius:0 var(--promien) var(--promien) 0;background:var(--kolor-akcentu);
  color:var(--kolor-tekstu-na-akcencie);display:grid;place-items:center;cursor:pointer}
.szukajka button:hover{background:var(--kolor-akcentu-hover);border-color:var(--kolor-linku-hover)}
.szukajka button:focus-visible{outline-color:var(--kolor-tekstu)}
.szukajka svg{width:18px;height:18px}

.komentarze{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--kolor-linii)}
.lista-komentarzy,.lista-komentarzy .children{list-style:none;margin:0;padding:0}
.lista-komentarzy .children{margin-top:1rem;margin-left:clamp(.5rem,2vw,1.5rem)}
.komentarz{display:flex;gap:1rem;background:var(--kolor-tla);border:1px solid var(--kolor-linii);
  padding:1.15rem;margin-bottom:1rem;min-width:0}
.komentarz>div{min-width:0}
.komentarz>img{width:70px;height:70px;flex:none;border-radius:50%}
.komentarz__glowa{display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:baseline;margin-bottom:.45rem}
.komentarz__glowa strong{font-family:var(--font-naglowek);color:var(--kolor-tekstu)}
.komentarz__glowa strong a{display:inline-flex;align-items:center;min-height:26px;color:var(--kolor-tekstu);text-decoration:none}
.komentarz__glowa strong a:hover,.komentarz__glowa strong a:focus-visible{color:var(--kolor-linku-hover);text-decoration:underline}
.komentarz__glowa>a{display:inline-flex;align-items:center;min-height:26px;color:var(--kolor-metadanych);font-size:var(--t-mikro);text-decoration:none}
.komentarz p{margin:0 0 .7rem;font-size:var(--t-mala);overflow-wrap:anywhere}
.comment-reply-link{display:inline-flex;align-items:center;min-height:36px;font-size:var(--t-mikro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--kolor-linku);text-decoration:none}
.comment-respond{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--kolor-linii)}
.comment-respond p.info{font-size:var(--t-mala);color:var(--kolor-metadanych)}
.pole{display:grid;gap:.4rem;margin-bottom:1.1rem}
.pole label{font-family:var(--font-naglowek);font-size:var(--t-mala);font-weight:600;color:var(--kolor-tekstu)}
.pole input[type=text],.pole textarea{width:100%;min-height:48px;padding:.7rem .9rem;
  border:1px solid var(--kolor-obwodki);border-radius:var(--promien);background:var(--kolor-karty);
  color:var(--kolor-tekstu-wtornego);font:inherit;font-size:var(--t-mala)}
.pole textarea{min-height:11rem;resize:vertical;line-height:1.6}
.zgoda{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1.35rem;font-size:var(--t-mala)}
.zgoda input{appearance:none;width:24px;height:24px;margin:.2rem 0 0;flex:none;display:grid;
  place-content:center;border:2px solid var(--kolor-obwodki);border-radius:var(--promien);
  background:var(--kolor-karty);cursor:pointer}
.zgoda input::before{content:"";width:12px;height:12px;transform:scale(0);
  box-shadow:inset 1em 1em var(--kolor-linku-hover);clip-path:polygon(14% 44%,0 59%,38% 100%,100% 20%,82% 5%,37% 65%)}
.zgoda input:checked::before{transform:scale(1)}
.zgoda input:focus-visible{outline:3px solid var(--kolor-fokusu);outline-offset:2px}
.wymagane{color:var(--kolor-linku)}
.comment-respond .przycisk{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:.8rem 2rem;background:var(--kolor-akcentu);color:var(--kolor-tekstu-na-akcencie);
  border:1px solid var(--kolor-akcentu-hover);border-radius:var(--promien);font-family:var(--font-naglowek);
  font-weight:600;font-size:.92rem;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.comment-respond .przycisk:hover{background:var(--kolor-akcentu-hover);border-color:var(--kolor-linku-hover)}
.comment-respond .przycisk:focus-visible{outline-color:var(--kolor-tekstu)}

.zalacznik__obraz{display:inline-block;padding:.5rem;background:var(--kolor-karty);
  border:1px solid var(--kolor-linii);box-shadow:var(--cien-komponentu)}

@media (min-width:1024px){
  .uklad{grid-template-columns:minmax(0,1fr) 290px;gap:2.5rem}
}
@media (min-width:1367px){
  html{font-size:clamp(16px,calc(11.069px + .361vw),18px)}
  :root{--opas:clamp(1160px,calc(102.888vw - 245.556px),1730px)}
}
@media (max-width:640px){
  :root{--wysokosc-naglowka:7.5rem}
  .belka__rzad{padding-block:.45rem .8rem}
  .belka__prawa{width:100%;justify-content:space-between;flex-wrap:nowrap}
  .marka img{width:min(100%,215px)}
  .komentarz{align-items:flex-start}
}
@media (max-width:390px){
  .komentarz>img{width:54px;height:54px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{
  .belka,.panel,.do-gory,.menu,.comment-respond{display:none!important}
  body{background:var(--druk-tlo);color:var(--druk-tekst)}
  .karta-tresci,.taryfa,.wpis-karta,.hero-karta__foto{border:1px solid var(--druk-obwodka);box-shadow:none}
  .taryfa__glowa{background:var(--druk-tlo);color:var(--druk-tekst)}
  a{color:var(--druk-tekst)}
}