:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --pjg-bg:#121417;
  --pjg-surface:#1b1e23;
  --pjg-surface-2:#22262c;
  --pjg-line:#2c3037;
  --pjg-text:#f5f2ec;
  --pjg-text-muted:#a8adb5;
  --pjg-accent:#f4650f;
  --pjg-accent-2:#ffb703;
  --pjg-accent-ink:#1a0d04;
  --pjg-radius:14px;
  --pjg-h-font:"Oswald",Impact,"Arial Narrow",sans-serif;
  --pjg-b-font:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

.pjg-wrap{max-width:1180px;margin:0 auto;padding:0 6%;box-sizing:border-box}
body{font-family:var(--pjg-b-font)}

/* ---------- EYEBROW ---------- */
.pjg-eyebrow{display:inline-block;font-family:var(--pjg-h-font);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:13px;color:var(--pjg-accent);margin-bottom:14px}

/* ---------- HERO ---------- */
.pjg-hero{background:var(--pjg-bg);color:var(--pjg-text);padding:clamp(64px,10vw,120px) 0 clamp(48px,7vw,84px)}html body .pjg-hero__h{color:var(--pjg-text);font-family:var(--pjg-h-font);font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(34px,6vw,64px);line-height:1.04;margin:0 0 20px;max-width:820px;text-wrap:balance}html body .pjg-hero__h em{font-style:normal;color:var(--pjg-accent)}
.pjg-hero__p{font-size:clamp(16px,1.8vw,20px);color:var(--pjg-text-muted);max-width:560px;line-height:1.6;margin:0 0 32px}
.pjg-hero__cta{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- BUTTONS ---------- */
.pjg-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--pjg-h-font);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;font-size:15px;padding:15px 30px;
  border-radius:10px;transition:transform 160ms var(--ease-out),filter 160ms ease,background-color 160ms ease,border-color 160ms ease,color 160ms ease}
html body .pjg-btn{text-decoration:none!important}
.pjg-btn--accent{background:var(--pjg-accent);color:var(--pjg-accent-ink)}
.pjg-btn--ghost{background:transparent;color:var(--pjg-text);border:2px solid var(--pjg-line)}
@media (hover:hover) and (pointer:fine){
  .pjg-btn:hover{transform:translateY(-2px)}
  .pjg-btn--accent:hover{filter:brightness(1.08)}
  .pjg-btn--ghost:hover{border-color:var(--pjg-accent);color:var(--pjg-accent)}
}
.pjg-btn:active{transform:scale(.97)}

/* ---------- IKONY SVG ---------- */
.pjg-ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pjg-bar__item,.pjg-legal-bar__contact-row a{display:inline-flex;align-items:center;gap:8px}
.pjg-contact-info__ico{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:rgba(244,101,15,.12);color:var(--pjg-accent)}
.pjg-contact-info__ico .pjg-ico{width:18px;height:18px}

/* ---------- INFO BAR ---------- */
.pjg-bar{background:var(--pjg-accent);color:var(--pjg-accent-ink)}
.pjg-bar__in{display:flex;flex-wrap:wrap;gap:10px 28px;padding:14px 6%;justify-content:center;align-items:center}
.pjg-bar__item{font-family:var(--pjg-h-font);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--pjg-accent-ink);text-decoration:none}
.pjg-bar__item--phone,.pjg-bar__item--addr{text-decoration:underline;text-underline-offset:3px}

/* ---------- SECTIONS ---------- */
.pjg-section{padding:clamp(48px,8vw,88px) 0}
.pjg-section--dark{background:var(--pjg-bg);color:var(--pjg-text)}
.pjg-section--light{background:#f7f5f1;color:#1a1d21}
.pjg-section__h{font-family:var(--pjg-h-font);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.6vw,40px);line-height:1.1;margin:0 0 22px;max-width:700px;text-wrap:balance}
.pjg-section__body{font-size:17px;line-height:1.7}
.pjg-section__body p{margin:0 0 16px}
.pjg-section--dark .pjg-section__body{color:var(--pjg-text-muted)}html body .pjg-section--dark .pjg-section__h{color:var(--pjg-text)}html body .pjg-section--light .pjg-section__h{color:#14161a}

/* ---------- CARDS ---------- */
.pjg-cards,.pjg-cards.pjg-wrap{display:flex;flex-wrap:wrap;gap:22px;margin:8px 0 0;padding:0;max-width:none}
.pjg-cards .pjg-card{flex:1 1 240px}html body .pjg-card{display:block;background:var(--pjg-surface);border:1px solid var(--pjg-line);border-radius:var(--pjg-radius);
  padding:30px 26px;text-decoration:none!important;color:var(--pjg-text);transition:transform 180ms var(--ease-out),border-color 180ms ease}html body .pjg-card *{text-decoration:none!important}
@media (hover:hover) and (pointer:fine){a.pjg-card:hover{transform:translateY(-4px);border-color:var(--pjg-accent)}}
a.pjg-card:active{transform:scale(.985)}
.pjg-card__icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:12px;background:rgba(244,101,15,.12);color:var(--pjg-accent)}
.pjg-card__icon .pjg-ico{width:26px;height:26px}html body .pjg-card__h{color:var(--pjg-text);font-family:var(--pjg-h-font);font-weight:600;text-transform:uppercase;font-size:19px;margin:0 0 10px;letter-spacing:.01em}
.pjg-card__body{font-size:15px;line-height:1.6;color:var(--pjg-text-muted)}
.pjg-card__body p{margin:0}

/* ---------- TRUST STRIP ---------- */
.pjg-trust{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:28px}
.pjg-trust__item{display:flex;align-items:center;gap:10px;font-family:var(--pjg-h-font);font-weight:600;
  font-size:14px;text-transform:uppercase;letter-spacing:.02em}
.pjg-trust__item::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--pjg-accent);color:var(--pjg-accent-ink);font-size:13px;font-weight:700}

/* ---------- CONTACT / FORM ---------- */
.pjg-contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.pjg-contact-info{display:flex;flex-direction:column;gap:18px}
.pjg-contact-info__row{display:flex;gap:14px;align-items:flex-start}
.pjg-contact-info__label{font-family:var(--pjg-h-font);font-weight:600;text-transform:uppercase;
  font-size:13px;letter-spacing:.06em;color:var(--pjg-accent);margin-bottom:2px;display:block}
.pjg-map{border-radius:var(--pjg-radius);overflow:hidden;margin-top:8px;border:1px solid var(--pjg-line)}
.pjg-map iframe{display:block;width:100%;height:280px;border:0}

.pjg-formcard{background:var(--pjg-surface);border:1px solid var(--pjg-line);border-radius:var(--pjg-radius);padding:32px}
.pjg-formcard .wpcf7-form label{display:block;font-family:var(--pjg-h-font);font-weight:600;text-transform:uppercase;
  font-size:12px;letter-spacing:.06em;color:var(--pjg-text-muted);margin-bottom:20px}
.pjg-formcard .wpcf7-form input[type=text],
.pjg-formcard .wpcf7-form input[type=email],
.pjg-formcard .wpcf7-form input[type=tel],
.pjg-formcard .wpcf7-form textarea{
  width:100%;margin-top:8px;background:var(--pjg-bg);border:1px solid var(--pjg-line);border-radius:8px;
  padding:13px 14px;font-family:var(--pjg-b-font);font-size:15px;color:var(--pjg-text);box-sizing:border-box}
.pjg-formcard .wpcf7-form input:focus,
.pjg-formcard .wpcf7-form textarea:focus{border-color:var(--pjg-accent)}
.pjg-formcard .wpcf7-form textarea{min-height:120px;resize:vertical}
.pjg-formcard .wpcf7-submit{font-family:var(--pjg-h-font);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  font-size:15px;background:var(--pjg-accent);color:var(--pjg-accent-ink);border:0;border-radius:10px;
  padding:15px 30px;cursor:pointer;transition:filter .12s ease}
.pjg-formcard .wpcf7-submit:hover{filter:brightness(1.08)}
.pjg-formcard .wpcf7-spinner{margin-left:10px}
.pjg-formcard .wpcf7-not-valid-tip{color:#ff8b6a;font-size:13px;margin-top:6px;font-weight:500;text-transform:none;letter-spacing:0}html body .pjg-formcard form.sent .wpcf7-response-output{border-color:var(--pjg-accent);color:var(--pjg-text)}

/* ---------- FOOTER CTA ---------- */
.pjg-cta-band{background:var(--pjg-accent);color:var(--pjg-accent-ink);text-align:center}
.pjg-cta-band .pjg-wrap{padding:52px 6%}html body .pjg-cta-band h2{color:var(--pjg-accent-ink);font-family:var(--pjg-h-font);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,36px);margin:0 0 22px}
.pjg-cta-band .pjg-btn--ghost{border-color:var(--pjg-accent-ink);color:var(--pjg-accent-ink)}
.pjg-cta-band .pjg-btn--ghost:hover{background:var(--pjg-accent-ink);color:var(--pjg-accent)}

@media (max-width:760px){
  .pjg-cards .pjg-card{flex:1 1 100%}
  .pjg-contact-grid{grid-template-columns:1fr}
  .pjg-bar__in{justify-content:flex-start;text-align:left}
}

/* ============ NADPISANIA MOTYWU ASTRA — marka PJGarage ============ */

/* Ukryj domyślny pasek tytułu strony Astry — nasz [pjg_hero] ma własny H1, dublowanie = błąd SEO */
.page .entry-header,
.single .entry-header,
.ast-archive-title{display:none!important}

/* Nagłówek / pasek menu — ciemny, spójny z resztą marki */
.ast-primary-header-bar,
.main-header-bar,
.site-header{
  background:var(--pjg-bg)!important;border-bottom:1px solid var(--pjg-line)!important;box-shadow:none!important
}
.ast-primary-header-bar .ast-container,.ast-main-header-bar-alignment{padding-top:10px!important;padding-bottom:10px!important}
.ast-primary-header-bar .site-title,
.ast-primary-header-bar .site-title a,
.site-title a{
  color:var(--pjg-text)!important;font-family:var(--pjg-h-font);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;font-size:22px
}
.site-header .site-description{color:var(--pjg-text-muted)!important;font-family:var(--pjg-b-font);font-size:13px}
.main-navigation ul li a,
.ast-header-navigation nav > .menu > .menu-item > a,
.main-header-menu .menu-link{
  color:var(--pjg-text-muted)!important;font-family:var(--pjg-h-font);font-weight:600;
  text-transform:uppercase;font-size:20px;letter-spacing:.03em
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-header-menu .current-menu-item > .menu-link{color:var(--pjg-accent)!important}
.ast-mobile-menu-buttons-minimal .astra-mobile-menu-icon svg,
.ast-mobile-svg-simple path{fill:var(--pjg-text)!important}

/* Stopka — ciemna, akcent na linkach */
.site-footer,
.ast-small-footer,
.ast-footer-overlay{
  background:var(--pjg-bg)!important;color:var(--pjg-text-muted)!important;border-top:1px solid var(--pjg-line)!important
}
.site-footer a,.ast-small-footer a{color:var(--pjg-accent)!important;text-decoration:none}
.site-footer a:hover,.ast-small-footer a:hover{text-decoration:underline}

/* Body / tło strony poza sekcjami (np. przy skrolu poza .pjg-section) */
body{background:var(--pjg-bg)}html body .pjg-contact-info a{text-decoration:none;color:#14161a;font-weight:600}html body .pjg-contact-info a:hover{color:var(--pjg-accent)}

/* ---------- PASEK PRAWNY (stopka) ---------- */
.pjg-legal-bar{background:var(--pjg-bg);border-top:1px solid var(--pjg-line)}
.pjg-legal-bar__contact-row{display:flex;flex-wrap:wrap;gap:8px 28px;padding:14px 0;
  border-bottom:1px solid var(--pjg-line);font-family:var(--pjg-h-font);font-weight:600;font-size:14px}html body .pjg-legal-bar__contact-row a{color:var(--pjg-accent);text-decoration:none}html body .pjg-legal-bar__contact-row a:hover{text-decoration:underline}
.pjg-legal-bar__in{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;
  padding:16px 0;font-size:13px;color:var(--pjg-text-muted)}html body .pjg-legal-bar__in a{color:var(--pjg-text-muted);text-decoration:underline;text-underline-offset:2px}html body .pjg-legal-bar__in a:hover{color:var(--pjg-accent)}

/* ---------- STICKY HEADER ---------- */
.site-header,#masthead{position:sticky;top:0;z-index:999}
html.pjg-js #masthead{position:static}
html.pjg-js #masthead.pjg-fixed{position:fixed;top:0;left:0;right:0;z-index:999;transform:translateY(-100%);transition:transform 220ms var(--ease-out)}
html.pjg-js #masthead.pjg-fixed.pjg-in{transform:none}
body.admin-bar #masthead.pjg-fixed{top:32px}
#masthead.pjg-fixed .custom-logo-link img,#masthead.pjg-fixed .site-logo-img{max-height:68px!important}
@media (max-width:544px){#masthead.pjg-fixed .custom-logo-link img,#masthead.pjg-fixed .site-logo-img{max-height:52px!important}}

/* Ukryj domyślny pasek "Powered by Astra" - zastąpiony własnym .pjg-legal-bar */
.site-below-footer-wrap{display:none!important}

/* ---------- CHECKBOX ZGODY (formularz kontaktowy) ---------- */
.pjg-formcard .wpcf7-acceptance{display:block;margin:4px 0 20px}
.pjg-formcard .wpcf7-acceptance .wpcf7-list-item{margin:0;display:flex;align-items:flex-start;gap:10px}
.pjg-formcard .wpcf7-acceptance input[type=checkbox]{margin-top:3px;width:18px;height:18px;flex:0 0 18px;accent-color:var(--pjg-accent);cursor:pointer}html body .pjg-formcard .wpcf7-acceptance .wpcf7-list-item-label{
  text-transform:none;font-family:var(--pjg-b-font);font-weight:400;
  font-size:14px;color:var(--pjg-text-muted);letter-spacing:normal;line-height:1.5;cursor:pointer}html body .pjg-formcard .wpcf7-acceptance a{color:var(--pjg-accent);text-decoration:underline}
.pjg-formcard .wpcf7-not-valid-tip{margin-top:-14px;margin-bottom:14px}

/* ---------- LOGO W NAGŁÓWKU ---------- */
.custom-logo-link img,.site-logo-img,.ast-site-identity img{
  max-height:160px!important;width:auto!important;display:block
}
@media (max-width:544px){
  .custom-logo-link img,.site-logo-img,.ast-site-identity img{max-height:90px!important}
}
/* Logo zawiera już napis "PJ GARAGE" - osobny tekst tytułu obok jest zbędny */
.ast-site-identity .site-title{display:none!important}

/* ---------- FOKUS (klawiatura) ---------- */
html body :is(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--pjg-accent);outline-offset:3px}
html body .pjg-bar a:focus-visible,html body .pjg-cta-band a:focus-visible{outline-color:var(--pjg-accent-ink)}
html body .pjg-formcard .wpcf7-form :is(input,textarea):focus-visible{outline-offset:2px}

/* ---------- RUCH: użytkownicy z prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pjg-btn,.pjg-card,html.pjg-js #masthead.pjg-fixed{transition-property:color,background-color,border-color,filter}
  .pjg-btn:hover,.pjg-btn:active,a.pjg-card:hover,a.pjg-card:active{transform:none}
  html.pjg-js #masthead.pjg-fixed{transform:none}
}

/* ---------- PEŁNA SZEROKOŚĆ: Astra w trybie "stretched" zostawia padding na <article> ---------- */
body.ast-page-builder-template #primary article.page{padding:0;margin:0}
body.ast-page-builder-template #primary .entry-content{margin:0}

/* ---------- Kompaktowy pasek po przewinięciu: wysokość ~80px zamiast ~120px ---------- */
#masthead.pjg-fixed .site-primary-header-wrap{min-height:0!important;padding-top:0!important;padding-bottom:0!important}
#masthead.pjg-fixed .site-branding{padding-top:6px;padding-bottom:6px}
.pjg-cards>br{display:none}
#masthead.pjg-fixed .ast-primary-header-bar .ast-container{padding-top:0!important;padding-bottom:0!important}
#masthead.pjg-fixed .ast-main-header-bar-alignment{padding-top:0!important;padding-bottom:0!important}
/* Astra animuje logo (0.2s linear) - przy przejściu na kompaktowy pasek wyglądało to jak "kurczenie się" w trakcie wjazdu */
.custom-logo-link,.custom-logo-link img,.site-branding img{transition:none!important}
html body .pjg-contact-info a{text-decoration:none!important}

/* =====================================================================
   WEJŚCIE STRONY (page load) — czysty CSS, kolejność od góry do dołu
   fill-mode: backwards => przed startem element jest ukryty, po animacji
   wraca do zwykłych stylów (nie blokuje hover/active/transition).
   ===================================================================== */
:root{--pjg-a-rise:pjg-rise;--pjg-a-pop:pjg-pop;--pjg-a-drop:pjg-drop}
@keyframes pjg-rise{from{opacity:0;transform:translateY(26px)}}
@keyframes pjg-drop{from{opacity:0;transform:translateY(-100%)}}
@keyframes pjg-pop{from{opacity:0;transform:scale(.88)}}
@keyframes pjg-fade{from{opacity:0}}

.pjg-bar{animation:var(--pjg-a-drop) 520ms var(--ease-out) backwards}
.custom-logo-link img{animation:var(--pjg-a-pop) 700ms var(--ease-out) 120ms backwards}
.main-header-menu>.menu-item{animation:var(--pjg-a-rise) 600ms var(--ease-out) backwards}
.main-header-menu>.menu-item:nth-child(1){animation-delay:200ms}
.main-header-menu>.menu-item:nth-child(2){animation-delay:270ms}
.main-header-menu>.menu-item:nth-child(3){animation-delay:340ms}
.main-header-menu>.menu-item:nth-child(4){animation-delay:410ms}

.pjg-hero .pjg-eyebrow{animation:var(--pjg-a-rise) 650ms var(--ease-out) 220ms backwards}
.pjg-hero__h{animation:var(--pjg-a-rise) 750ms var(--ease-out) 320ms backwards}
.pjg-hero__h em{display:inline-block;animation:var(--pjg-a-rise) 750ms var(--ease-out) 520ms backwards}
.pjg-hero__p{animation:var(--pjg-a-rise) 700ms var(--ease-out) 640ms backwards}
.pjg-hero__cta .pjg-btn{animation:var(--pjg-a-rise) 650ms var(--ease-out) 780ms backwards}
.pjg-hero__cta .pjg-btn:nth-child(2){animation-delay:880ms}

/* ---------- WJAZD SEKCJI PRZY PRZEWIJANIU (klasy dokłada mały JS, tylko poniżej pierwszego ekranu) ---------- */
html.pjg-js .pjg-reveal{opacity:0;transform:translateY(28px);
  transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
html.pjg-js .pjg-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  :root{--pjg-a-rise:pjg-fade;--pjg-a-pop:pjg-fade;--pjg-a-drop:pjg-fade}
  html.pjg-js .pjg-reveal{transform:none;transition:opacity 400ms ease}
}

/* =====================================================================
   PRZEJŚCIA MIĘDZY PODSTRONAMI (cross-document View Transitions)
   Chrome/Edge/Safari 18.2+; w pozostałych zwykła nawigacja. Tylko bez prefers-reduced-motion.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-group(root){animation-duration:240ms;animation-timing-function:var(--ease-out)}

/* Przy przejściu między podstronami (klik w link) header i pasek nie odtwarzają animacji wejścia -
   dostaje ją tylko pierwsze wejście, wpisanie adresu i odświeżenie. Treść (hero) animuje się zawsze. */
html.pjg-seen .pjg-bar,
html.pjg-seen .custom-logo-link img,
html.pjg-seen .main-header-menu>.menu-item{animation:none}