/*
Theme Name: Karłów Parking
Theme URI: https://karlowparking.pl/
Author: SlotWise
Description: Lekki, jednostronicowy motyw dla parkingu i wypożyczalni rowerów elektrycznych w Karłowie. Bez page buildera, bez jQuery. Po aktywacji przejmuje cały front strony i renderuje one-pager z sekcjami: parking, rowery, rezerwacja, dojazd, FAQ. Treści edytowalne w Wygląd > Dostosuj > Parking Karłów.
Version: 1.2.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: karlow-parking
*/

/* ============================================================
   1. TOKENY
   ============================================================ */
:root{
  /* kolory wyprowadzone ze zdjęcia obiektu:
     leśna zieleń • las Gór Stołowych • żwir • drewno domków */
  --ink:#152420;          /* świerkowa czerń – tekst */
  --ink-2:#46564F;        /* tekst drugorzędny */
  --ink-3:#75847C;        /* podpisy, meta */
  --paper:#F4F6F2;        /* tło strony */
  --card:#FFFFFF;
  --line:#E2E6DE;
  --line-2:#CDD4C9;
  --teal:#1E7A46;         /* akcent główny – leśna zieleń */
  --teal-700:#14532D;
  --teal-50:#E6F2EA;
  --amber:#B5670F;        /* akcent rowerowy – drewno domków */
  --amber-50:#FAF0E2;

  --r-card:16px;
  --r-btn:10px;
  --maxw:1140px;
  --gut:clamp(20px,5vw,40px);
  --sec:clamp(64px,9vw,124px);

  --f-display:'Archivo','Archivo Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --shadow:0 1px 2px rgba(21,36,32,.04), 0 8px 24px -12px rgba(21,36,32,.16);
}

/* ============================================================
   2. RESET + BAZA
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.03}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.section--tight{padding-top:0}
/* #slotwise jest divem, więc nie łapie się na section[id] — bez tego wpada pod przyklejony nagłówek */
section[id],#slotwise{scroll-margin-top:92px}
html{scroll-behavior:smooth}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--card);padding:12px 18px;border-radius:8px}

/* typografia pomocnicza */
.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.17em;color:var(--ink-3);display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line-2);max-width:120px}
.h2{font-size:clamp(1.75rem,3.6vw,2.6rem)}
.lead{font-size:clamp(1.03rem,1.5vw,1.22rem);color:var(--ink-2);line-height:1.55}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3);font-size:.9rem}

/* ikony */
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:30px;height:30px}

/* przyciski */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-body);font-size:1rem;font-weight:600;text-decoration:none;
  padding:15px 26px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;
  white-space:nowrap;  /* etykieta nie łamie się w środku przycisku */
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.btn .ico{flex-shrink:0}
.btn--primary{background:var(--teal);color:#fff}
.btn--primary:hover{background:var(--teal-700);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn--sm{padding:10px 18px;font-size:.92rem}
/* na wąskich ekranach etykiety nie mogą się łamać (nowrap), więc schodzimy ze stopnia pisma i paddingu */
@media (max-width:600px){
  .btn{font-size:.94rem;padding:14px 20px}
}

/* ============================================================
   3. NAGŁÓWEK
   ============================================================ */
.hdr{position:sticky;top:0;z-index:50;background:rgba(244,246,242,.82);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .25s}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:24px;height:68px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand__mark{width:34px;height:34px;border-radius:9px;background:var(--teal);display:grid;place-items:center;color:#fff}
.brand__mark .ico{width:20px;height:20px;stroke-width:2.1}
.brand__txt{font-family:var(--f-display);font-weight:800;font-variation-settings:'wdth' 118;font-size:1.02rem;letter-spacing:.01em;line-height:1.05;text-transform:uppercase}
.brand__txt span{display:block;font-size:.62rem;font-weight:600;letter-spacing:.2em;color:var(--ink-3);font-family:var(--f-mono);text-transform:uppercase}
.nav{display:flex;gap:26px}
.nav a{color:var(--ink-2);text-decoration:none;font-size:.95rem;font-weight:500}
.nav a:hover{color:var(--ink)}
@media (max-width:900px){.nav{display:none}.hdr .btn{display:none}}

/* ============================================================
   4. HERO
   ============================================================ */
/* hero jest jedną kolumną: nagłówek → lead → przyciski.
   Limit szerokości nagłówka jest w ch, żeby łamanie trzymało się przy każdym stopniu pisma. */
.hero{padding-top:clamp(44px,6.5vw,84px);padding-bottom:clamp(24px,4vw,48px)}
.hero h1{font-size:clamp(2.1rem,7.2vw,5.2rem);font-variation-settings:'wdth' 106;letter-spacing:-.035em;max-width:20ch;margin-bottom:30px}
.hero h1 em{
  font-style:normal;color:var(--teal);display:block;
  font-size:.54em;letter-spacing:-.02em;line-height:1.1;margin-top:.22em;
}
.hero .lead{margin-bottom:32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:600px){
  .hero h1{max-width:none}
  .hero .lead{font-size:1rem}
  .hero__cta .btn{flex:1 1 200px}
}

/* pasek faktów */
.facts{display:flex;flex-wrap:wrap;gap:10px 30px;padding-top:34px;margin-top:34px;border-top:1px solid var(--line)}
.facts li{display:flex;align-items:center;gap:9px;font-size:.93rem;color:var(--ink-2)}
.facts .ico{width:19px;height:19px;color:var(--teal)}

/* ============================================================
   5. DROGOWSKAZ  ← element sygnaturowy
   ============================================================ */
.signpost{display:grid;gap:8px}
.sp{
  display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;gap:16px;
  background:var(--card);text-decoration:none;color:inherit;
  padding:17px 34px 17px 18px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  filter:drop-shadow(0 1px 0 rgba(21,36,32,.10)) drop-shadow(0 6px 14px rgba(21,36,32,.05));
  transition:transform .2s ease;
}
.sp:hover{transform:translateX(7px)}
.sp__mode{color:var(--teal)}
.sp--bike .sp__mode{color:var(--amber)}
.sp__name{font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.sp__name small{display:block;font-weight:400;font-size:.82rem;color:var(--ink-3);letter-spacing:0}
.sp__time,.sp__dist{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.92rem}
.sp__time{font-weight:600}
.sp__dist{color:var(--ink-3);min-width:64px;text-align:right}
@media (max-width:600px){
  .sp{grid-template-columns:26px 1fr auto;gap:12px;padding:14px 26px 14px 14px}
  .sp__dist{display:none}
}

/* ============================================================
   6. KARTY / SIATKI
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (min-width:861px){.grid-2--flip>*:last-child{order:-1}}
@media (max-width:860px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,3vw,30px)}
.card h3{font-size:1.12rem;margin:16px 0 8px;letter-spacing:-.015em}
.card p{color:var(--ink-2);font-size:.97rem}
.card__ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--teal-50);color:var(--teal)}
.card--bike .card__ico{background:var(--amber-50);color:var(--amber)}

/* cennik */
.price{width:100%;border-collapse:collapse;margin-top:8px}
.price th,.price td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);font-size:.98rem}
.price th{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);font-weight:600;padding-bottom:10px}
.price td:last-child{text-align:right;font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.price tr:last-child td{border-bottom:0}
.price small{display:block;color:var(--ink-3);font-size:.83rem;font-family:var(--f-body);font-weight:400}

/* lista z ptaszkami */
.checks li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.97rem;color:var(--ink-2);align-items:flex-start}
.checks li:last-child{border-bottom:0}
.checks .ico{width:20px;height:20px;color:var(--teal);margin-top:2px}

/* kroki rezerwacji (realna sekwencja → numeracja uzasadniona) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);counter-reset:s}
.steps li{counter-increment:s;padding-top:18px;border-top:2px solid var(--ink)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:.72rem;font-weight:600;color:var(--teal);letter-spacing:.1em;display:block;margin-bottom:10px}
.steps h3{font-size:1.02rem;margin-bottom:6px}
.steps p{color:var(--ink-2);font-size:.93rem}
@media (max-width:700px){.steps{grid-template-columns:1fr}}

/* sekcja rezerwacji */
.book{background:var(--ink);color:#EAF0EC;border-radius:22px;padding:clamp(28px,4.5vw,56px)}
.book h2{color:#fff}
.book .eyebrow{color:#8FA69B}
.book .eyebrow::after{background:#33443D}
.book .lead{color:#B9C7C0}
.book .steps li{border-top-color:#3B4C45}
.book .steps li::before{color:#5FBE86}
.book .steps h3{color:#fff}
.book .steps p{color:#B9C7C0}

/* widget rezerwacji — poza ciemną kartą, na pełną szerokość kontenera, bez ramki */
.book-embed{margin-top:clamp(22px,3.2vw,40px)}
.book-embed>*{width:100%}
.widget{width:100%;min-height:420px}
.widget iframe{width:100%;min-height:640px;border:0;display:block}
/* SlotWise zarządza własnym odstępem — nie dokładamy paddingu ani marginesu */
.slotwise-embed{margin:0;padding:0}
.slotwise-embed .atrakcje-widget-wrapper{width:100%;max-width:none}

/* dojazd */
.band{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)}
.band img{width:100%;aspect-ratio:24/10;object-fit:cover}
.band--map iframe{display:block;width:100%;aspect-ratio:24/10;min-height:320px;border:0}
@media(max-width:600px){.band--map iframe{aspect-ratio:4/3}}
.addr{font-family:var(--f-mono);font-size:.94rem;line-height:1.9;color:var(--ink-2)}
.addr strong{color:var(--ink)}
.routes li{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.96rem}
.routes li:last-child{border-bottom:0}
.routes span{font-family:var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}

.note{display:flex;gap:14px;background:var(--amber-50);border:1px solid #EBD9BE;border-radius:12px;padding:18px 20px;margin-top:26px}
.note .ico{color:var(--amber);margin-top:2px}
.note p{font-size:.94rem;color:#5C4114}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq__q{width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:22px 0;display:flex;gap:20px;align-items:center;justify-content:space-between;cursor:pointer;text-align:left;font-family:var(--f-display);font-weight:600;font-size:clamp(1rem,1.7vw,1.18rem);color:var(--ink);letter-spacing:-.015em}
.faq__q .ico{color:var(--teal);transition:transform .25s ease}
.faq__q[aria-expanded="true"] .ico{transform:rotate(45deg)}
.faq__a{display:none;padding:2px 0 26px;border-bottom:1px solid var(--line);color:var(--ink-2);max-width:72ch;font-size:.98rem}
.faq__a.is-open{display:block}
.faq__a a{font-weight:500}

/* dofinansowanie UE — bez ramki, oddzielone od FAQ samą kreską i rytmem */
.eu{border-top:1px solid var(--line);padding-block:clamp(38px,5vw,60px) var(--sec)}
/* logotypy są jednym JPG-iem z białym tłem — multiply wtapia je w kolor strony,
   więc nie widać białego prostokąta na tle --paper */
.eu__logos{width:100%;max-width:560px;height:auto;mix-blend-mode:multiply;margin:0 auto clamp(30px,4vw,46px)}
/* nagłówek i opis biegną na całą szerokość kontenera — bez limitu w ch */
.eu__title{font-size:clamp(1.3rem,2.6vw,1.95rem);margin-bottom:14px}
.eu__name{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.015em;line-height:1.28;
  font-size:clamp(1.05rem,1.9vw,1.3rem);color:var(--teal-700);
}
.eu__body{margin-top:clamp(24px,3vw,34px)}
.eu__body p{color:var(--ink-2);font-size:.97rem}
.eu__body p+p{margin-top:14px}
.eu__body strong{color:var(--ink);font-weight:600}
/* kwoty zostają w toku tekstu — wyróżnia je tylko cyfra w kroju mono, jak w cennikach */
.eu__body .eu__amt{margin-top:24px}
.eu__body .eu__amt+.eu__amt{margin-top:10px}
.eu__amt b{font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}

/* stopka */
.ftr{background:var(--ink);color:#A9BAB2;padding-block:clamp(48px,7vw,84px);font-size:.94rem}
.ftr a{color:#DCE7E1;text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr h4{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:#6F847A;font-weight:600;margin-bottom:16px}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.ftr li{padding:5px 0}
.ftr__bottom{margin-top:52px;padding-top:24px;border-top:1px solid #2A3A33;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.84rem;color:#6F847A}
@media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr__grid{grid-template-columns:1fr}}

/* mobilny pasek CTA */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(244,246,242,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.dock .btn{flex:1;padding-left:16px;padding-right:16px}
@media (max-width:900px){.dock.is-on{display:flex}}

/* animacje wejścia */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}