/**
* WordPress integration overrides for the Zachoszcz design.
*
* Loaded after zachoszcz-design.css. Bridges the static design system to
* WordPress output: admin bar, Contact Form 7, generic page/post content,
* accessibility helpers.
*
* @package Zachoszcz
*/
/* ---------- Sticky header: make position:sticky actually work ----------
The design CSS sets `overflow-x: hidden` on html/body, which turns
into a scroll container — the sticky header then sticks to body (which
never scrolls): it does not stick at all, and with the admin bar's
`html { margin-top: 32px }` bump its top offset is measured from body's
edge, doubling to 64px and covering the content below (e.g. breadcrumbs
on the vehicle page). `overflow-x: clip` clips without creating a scroll
container, so the header sticks to the real viewport again. */
html,
body {
overflow-x: clip;
}
/* ---------- Admin bar offset for the sticky header ---------- */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
.admin-bar .site-header { top: 46px; }
}
/* ---------- Accessibility ---------- */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--ink);
color: #fff;
padding: 12px 20px;
border-radius: 0 0 4px 0;
font-size: 14px;
}
.skip-link:focus { left: 0; }
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
word-wrap: normal !important;
}
/* ---------- Generic page / post content ---------- */
.page-content { padding: 72px 0 96px; }
.entry-content { max-width: 760px; margin: 0 auto; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content img,
.entry-content .wp-block-image img { border-radius: var(--radius-lg); height: auto; }
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-top: 0.4em; }
.entry-content a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.entry-content blockquote {
border-left: 3px solid var(--brand);
padding-left: 20px;
color: var(--muted);
font-size: 18px;
}
.entry-content .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 22px;
border-radius: var(--radius);
font-weight: 600;
font-size: 15px;
background: var(--ink);
color: #fff;
text-decoration: none;
}
.entry-content .is-style-alternative .wp-block-button__link { background: var(--brand); }
/* ---------- Contact Form 7 → design form styling ---------- */
.contact-cf7 .wpcf7-form .row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
@media (max-width: 768px) {
.contact-cf7 .wpcf7-form .row { grid-template-columns: 1fr; }
}
.contact-cf7 .wpcf7-form .field { margin-bottom: 16px; }
.contact-cf7 .wpcf7-form .row .field { margin-bottom: 0; }
.contact-cf7 .wpcf7-form-control-wrap { display: block; }
.contact-cf7 .wpcf7-form input[type="text"],
.contact-cf7 .wpcf7-form input[type="email"],
.contact-cf7 .wpcf7-form input[type="tel"],
.contact-cf7 .wpcf7-form input[type="url"],
.contact-cf7 .wpcf7-form input[type="number"],
.contact-cf7 .wpcf7-form input[type="date"],
.contact-cf7 .wpcf7-form textarea,
.contact-cf7 .wpcf7-form select {
width: 100%;
padding: 15px 16px;
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: 15px;
font-family: inherit;
background: #fff;
color: var(--ink);
transition: border-color 0.15s ease;
}
.contact-cf7 .wpcf7-form textarea { resize: vertical; min-height: 120px; }
.contact-cf7 .wpcf7-form input:focus,
.contact-cf7 .wpcf7-form textarea:focus,
.contact-cf7 .wpcf7-form select:focus {
outline: none;
border-color: var(--brand);
}
.contact-cf7 .wpcf7-form input::placeholder,
.contact-cf7 .wpcf7-form textarea::placeholder { color: var(--muted-2); }
.contact-cf7 .wpcf7-form .wpcf7-submit {
width: 100%;
height: 56px;
border: none;
border-radius: var(--radius);
background: var(--ink);
color: #fff;
font-weight: 600;
font-size: 15px;
font-family: inherit;
cursor: pointer;
transition: background 0.15s ease;
margin-top: 8px;
}
.contact-cf7 .wpcf7-form .wpcf7-submit:hover { background: #2a2a35; }
.contact-cf7 .wpcf7-form .wpcf7-spinner { margin: 12px auto 0; display: block; }
.contact-cf7 .wpcf7-not-valid-tip {
color: #c0392b;
font-size: 12px;
margin-top: 6px;
font-family: "Geist Mono", monospace;
}
.contact-cf7 .wpcf7-form input.wpcf7-not-valid,
.contact-cf7 .wpcf7-form textarea.wpcf7-not-valid,
.contact-cf7 .wpcf7-form select.wpcf7-not-valid { border-color: #c0392b; }
.contact-cf7 .wpcf7-response-output {
margin: 20px 0 0 !important;
padding: 14px 18px !important;
border-radius: var(--radius);
font-size: 14px;
}
.contact-cf7 .wpcf7 form.sent .wpcf7-response-output { border-color: #27ae60; background: #eafaf0; }
.contact-cf7 .wpcf7 form.invalid .wpcf7-response-output,
.contact-cf7 .wpcf7 form.failed .wpcf7-response-output { border-color: #c0392b; background: #fdeeec; }
/* Inline vehicle-inquiry CF7 (on single vehicle aside) */
.vd-inquiry .wpcf7-form input[type="text"],
.vd-inquiry .wpcf7-form input[type="email"],
.vd-inquiry .wpcf7-form input[type="tel"],
.vd-inquiry .wpcf7-form textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: 14px;
font-family: inherit;
margin-bottom: 10px;
background: #fff;
}
.vd-inquiry .wpcf7-form textarea { min-height: 90px; resize: vertical; }
.vd-inquiry .wpcf7-form input:focus,
.vd-inquiry .wpcf7-form textarea:focus { outline: none; border-color: var(--brand); }
.vd-inquiry .wpcf7-form .wpcf7-submit {
width: 100%;
height: 48px;
border: none;
border-radius: var(--radius);
background: var(--brand);
color: #fff;
font-weight: 600;
font-size: 15px;
cursor: pointer;
}
.vd-inquiry .wpcf7-form .wpcf7-submit:hover { background: var(--brand-600); }
.vd-inquiry .wpcf7-not-valid-tip { font-size: 11px; color: #c0392b; }
/* ---------- Pagination (WP archive) mirrors design .of-pagination ---------- */
.wp-pagenavi,
.pagination-classic { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pagination-classic a,
.pagination-classic span {
min-width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: 14px;
color: var(--ink);
text-decoration: none;
padding: 0 8px;
}
.pagination-classic a:hover { border-color: var(--ink); }
.pagination-classic .current {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
/* Featured-image cover fill for cards / list / gallery / news */
.vcard__media img.vcard__img,
.vlist__media img,
.news__img,
.blog-card__img { display: block; }
/* Badges and favourite buttons must stay above the cover photo
(design CSS positions them without z-index, so a later ![]()
wins). */
.vcard__media .badge,
.vlist__media .badge { z-index: 3; }
.vcard__fav { z-index: 3; }
/* ---------- Header: 7 nav items need more room than the design's 6 ----------
Labels must never wrap (a wrapped line pokes out of the 76px bar and paints
over the content below, e.g. breadcrumbs on the vehicle page), and the
drawer takes over earlier than the design's 1024px cut-off. */
.nav a { white-space: nowrap; }
.site-header__inner { flex-wrap: nowrap; }
@media (max-width: 1240px) {
.nav { display: none; }
.header-cta { display: none; }
.hamburger { display: block; }
}
/* ---------- Home quick-search: working selects in the design bar ---------- */
.searchbar__field .val select {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
padding: 0;
margin: 0;
cursor: pointer;
outline: none;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.searchbar__field .val select:focus-visible { outline: 1px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
/* The native dropdown list opens on a light panel. */
.searchbar__field .val select option { color: var(--ink); background: #fff; }
/* ---------- Rezerwacja: watermark z logo nad zdjęciem pojazdu ---------- */
.vcard__media,
.vlist__media,
.vd-gallery > div { position: relative; }
.vres {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-items: center;
background: rgba(14, 14, 18, 0.55);
pointer-events: none;
overflow: hidden;
}
.vres__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
transform: rotate(-7deg);
}
.vres svg {
width: min(58%, 230px);
height: auto;
opacity: 0.95;
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
}
.vres__label {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.34em;
text-indent: 0.34em; /* optically centres the letter-spaced caps */
text-transform: uppercase;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 3px;
padding: 7px 14px;
background: rgba(14, 14, 18, 0.35);
white-space: nowrap;
}
.vlist__media .vres__inner { gap: 8px; }
.vlist__media .vres svg { width: 68%; }
.vlist__media .vres__label { font-size: 9px; padding: 4px 8px; letter-spacing: 0.22em; text-indent: 0.22em; }
.vd-gallery > div:first-child .vres svg { width: min(42%, 300px); }
.vd-gallery > div:first-child .vres__label { font-size: 14px; }
.vd-head__tag--reserved {
background: #b42318;
border-color: #b42318;
color: #fff;
}
/* ---------- Language switch: real Polylang links (design styled