/* ============================================================
   VAGtech — UI contrast & readability overrides
   ============================================================ */

/* ── Portfolio and blog post text contrast ──────────────────
   Blog posts (body.single-post) share the portfolio rules.
   Global dynamic CSS sets bg #232323 and link color #d71818.
   That red gives only ~2.9:1 on dark — below WCAG AA.
   Headings are #848484 → ~4.2:1, borderline for small text.
   Fix: use a lighter red for links, bump headings to #b8b8b8. */

body.single-portfolio #page-content h1,
body.single-post #page-content h1,
body.single-portfolio #page-content h2,
body.single-post #page-content h2,
body.single-portfolio #page-content h3,
body.single-post #page-content h3,
body.single-portfolio #page-content h4,
body.single-post #page-content h4,
body.single-portfolio #page-content h5,
body.single-post #page-content h5,
body.single-portfolio #page-content h6,
body.single-post #page-content h6 {
    color: #c8c8c8;
}

/* Links in portfolio content: lighter red passes ~4.8:1 on #232323 */
body.single-portfolio #page-content a,
body.single-post #page-content a {
    color: #e87070;
}

body.single-portfolio #page-content a:hover,
body.single-post #page-content a:hover {
    color: #ff8c8c;
}

/* Keep the project title heading bold white for emphasis */
body.single-portfolio #page-content .p-head.font-secondary {
    color: #ffffff;
    font-size: 11px;
    letter-spacing: 3px;
}

/* Table contrast: ensure table cells are readable */
body.single-portfolio #page-content table th,
body.single-post #page-content table th,
body.single-portfolio #page-content table td,
body.single-post #page-content table td {
    color: #d0d0d0;
    border-color: rgba(255, 255, 255, 0.1);
}

body.single-portfolio #page-content table th,
body.single-post #page-content table th {
    background: rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
}

/* Strong text: already inherits body #cecece, but ensure it stays legible */
body.single-portfolio #page-content strong,
body.single-post #page-content strong {
    color: #e4e4e4;
}

/* List items inherit body text — fine, but markers can be too faint */
body.single-portfolio #page-content ul li::marker,
body.single-post #page-content ul li::marker,
body.single-portfolio #page-content ol li::marker,
body.single-post #page-content ol li::marker {
    color: #cc0000;
}

/* Blog listings (category archive, posts page, search) use the same
   link color as the posts themselves, instead of the theme's grey.
   Post titles over the featured image (.blog-head-right) keep the theme color. */
body.archive #page-content a:not(.blog-head-right),
body.blog #page-content a:not(.blog-head-right),
body.search #page-content a:not(.blog-head-right) {
    color: #e87070;
}

body.archive #page-content a:not(.blog-head-right):hover,
body.blog #page-content a:not(.blog-head-right):hover,
body.search #page-content a:not(.blog-head-right):hover {
    color: #ff8c8c;
}

/* Blog listing header: date on the left, title in its own column on the right.
   The theme floats both and lets the title box grow to its text width, so a
   long title no longer fits next to the date and drops below it. Flex keeps
   the title beside the date and wraps it inside its column; words break only
   at spaces (the theme used break-all, which split e.g. "HA-CKOVANIE"). */
.blog-head {
    display: flex;
    align-items: flex-start;
}
.blog-head .blog-head-left {
    flex: 0 0 auto;
    float: none;
}
.blog-head .blog-head-right {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    float: none;
}
.blog-head .blog-head-right h1,
.blog-head .blog-head-right .blog-post-heading {
    word-break: normal;
    overflow-wrap: break-word;
}

/* Blog posts: contact form at the end of the article */
body.single-post #page-content .contact {
    margin-top: 24px;
}

/* ── Portfolio grid — full responsive column stack ───────────
   The theme sets portfolio-items to 100.4% as a float-rounding
   hack (33.3%×3=99.9%). Reset to 100% globally so narrow sections
   don't overflow. Bootstrap's col-xs-4 (33.3%, always) can beat
   the theme's responsive rules, so reinforce them with higher
   specificity selectors here (our CSS loads after Bootstrap). */

.portfolio .portfolio-items { width: 100%; }

/* Wide screens: more columns */
@media only screen and (min-width: 1440px) {
    .portfolio .portfolio-items div.boxed-item { width: 25%; }      /* 4 cols */
}

@media only screen and (min-width: 1920px) {
    .portfolio .portfolio-items div.boxed-item { width: 20%; }      /* 5 cols */
}

/* Narrow screens: fewer columns — reinforce theme rules */
@media only screen and (max-width: 800px) {
    .portfolio .portfolio-items .item.boxed-item.col-xs-4,
    .portfolio .portfolio-items div.boxed-item { width: 50%; }      /* 2 cols */
}

@media only screen and (max-width: 480px) {
    .portfolio .portfolio-items .item.boxed-item.col-xs-4,
    .portfolio .portfolio-items div.boxed-item {
        width: 100%;
        float: none;
    }
}

/* ── Touch/mobile grid items — always-visible card style ─────
   Devices with (hover: none) can't trigger the overlay reveal.
   Switch to a card: fixed-height image on top, title + category
   always visible below. Pure CSS — no JS, no HTML changes.     */

@media (hover: none) and (pointer: coarse) {

    /* Flex column so details flow below the image */
    .portfolio:not(.portfolio-list-layout) .portfolio-items .item a.work-image {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    /* Image: fixed height, cropped to fill, no hover animation */
    .portfolio:not(.portfolio-list-layout) .portfolio-items .item a.work-image img {
        width: 100%;
        max-width: 100%;
        height: 150px;
        object-fit: cover;
        object-position: center;
        opacity: 1 !important;
        transform: none !important;
        transition: none;
    }

    /* Pull overlay out of absolute position into a static centered block */
    .portfolio:not(.portfolio-list-layout) .portfolio-items .item a.work-image div.item-details {
        position: static;
        opacity: 1 !important;
        transform: none !important;
        background: #1a1a1a;
        padding: 12px 14px 14px;
        text-align: center;
        transition: none;
    }

    /* Reset title slide-in transform */
    .portfolio:not(.portfolio-list-layout) .portfolio-items .item a.work-image .portfolio-grid-title,
    .portfolio:not(.portfolio-list-layout) .portfolio-items .item a.work-image h1 {
        transform: none !important;
        font-size: 11px !important;
        letter-spacing: 1.5px;
        color: #e0e0e0 !important;
        line-height: 1.4;
        margin: 0 0 6px;
        transition: none;
    }

    /* Reset category slide-in transform */
    .portfolio:not(.portfolio-list-layout) .portfolio-items .item a.work-image p {
        transform: none !important;
        font-size: 10px !important;
        color: #777;
        margin: 0;
        transition: none;
    }

    /* Hide the decorative strip — doesn't suit compact card */
    .portfolio:not(.portfolio-list-layout) .portfolio-items .item a.work-image span.portfolio-strips {
        display: none;
    }

}

/* ── Portfolio list layout ───────────────────────────────────
   Items render as full-width rows: fixed-width thumbnail on the
   left, title + categories on the right.                       */

.portfolio-list-layout .portfolio-items {
    margin-top: 20px;
}

.portfolio-list-item {
    width: 100% !important;
    float: none !important;
    margin-bottom: 3px;
}

.portfolio-list-link {
    display: flex;
    align-items: stretch;
    background: #1a1a1a;
    text-decoration: none;
    transition: background 0.25s;
    overflow: hidden;
}

.portfolio-list-link:hover {
    background: #232323;
}

.portfolio-list-thumb {
    flex: 0 0 260px;
    width: 260px;
    overflow: hidden;
}

.portfolio-list-thumb img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.portfolio-list-link:hover .portfolio-list-thumb img {
    transform: scale(1.05);
}

.portfolio-list-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 32px;
}

.portfolio-list-title {
    color: #e0e0e0;
    font-size: 13px;
    letter-spacing: 2px;
    margin: 0 0 10px;
    line-height: 1.4;
    transition: color 0.2s;
}

.portfolio-list-link:hover .portfolio-list-title {
    color: #ffffff;
}

.portfolio-list-cats {
    color: #666;
    font-size: 10px;
    letter-spacing: 1.5px;
    margin: 0;
}

/* Bleed edge-to-edge on mobile.
   The theme's responsive.css adds padding:0 15px to .page-holder>.inner at ≤1185px.
   section.container / container-fluid also adds 15px. .vc_row cancels one layer with
   margin:-15px, but section-default-width sections keep .vc_column-inner padding:15px
   (only section-fullwidth zeroes it). So the portfolio inside #cf-portfolio has 30px
   total horizontal inset — one from the outer .inner, one from .vc_column-inner.
   We zero the column-inner padding, then a single -15px margin covers the rest. */
#cf-portfolio .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 1185px) {
    /* Offset the .page-holder > .inner padding for edge-to-edge items.
       Scoped to portfolio-items so the search input above is not pulled
       outside the parent and clipped on mobile. */
    .portfolio .portfolio-items,
    .portfolio .vntd-grid-before,
    .portfolio #options.filter-menu {
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* Mobile: stack thumbnail above body */
@media (max-width: 600px) {
    .portfolio-list-link {
        flex-direction: column;
    }
    .portfolio-list-thumb {
        flex: none;
        width: 100%;
    }
    .portfolio-list-thumb img {
        height: 200px;
    }
    .portfolio-list-body {
        padding: 16px 20px;
    }
}

/* ── Icon boxes (What We Do / Services section) ─────────────
   Base theme uses color:#444 + border:#8b8b8b which disappears
   on the dark background. Force legible values unconditionally. */

.vntd-icon-box a.about-icon {
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 0.75);
    font-size: 32px;
}

.vntd-icon-box a.about-icon:after {
    border: 2px solid transparent;
}

.vntd-icon-box:hover a.about-icon {
    background: #cc0000;
    border-color: #cc0000;
    color: #ffffff;
}

.vntd-icon-box:hover a.about-icon:after {
    border-color: rgba(204, 0, 0, 0.35);
    transform: scale(1.12);
}

/* Service name headings */
.vntd-icon-box h3 {
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 2px;
}

/* Description text */
.vntd-icon-box p,
.icon-box-centered p {
    color: #c0c0c0;
    font-size: 14px;
    line-height: 1.7;
}

/* ── Section intro paragraph ─────────────────────────────────
   Wide centered text blocks are hard to read at full width. */

#what-we-do .wpb_text_column p,
#what-we-do .wpb_wrapper p {
    color: #d0d0d0;
    font-size: 15px;
    line-height: 1.8;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Section headings ────────────────────────────────────────*/

#what-we-do .wpb_heading,
#what-we-do h1,
#what-we-do h2,
#what-we-do h3 {
    color: #ffffff;
}

/* ── General dark-section text contrast ─────────────────────
   Any p-section with a dark/black background colour. */

.p-section p,
.vntd-section-dark p {
    color: #c8c8c8;
}

/* ── Contact form — dark automotive style ───────────────────
   Global style for all .contact / wpcf7 forms sitewide.
   Blog posts also match on CF7's own .wpcf7 wrapper, so the style
   does not depend on the <div class="contact"> in the post content. */

#write-us .contact {
    margin-top: 48px;
}

/* Inputs + textarea */
:is(.contact, body.single-post .wpcf7) form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]),
:is(.contact, body.single-post .wpcf7) form textarea {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #e0e0e0;
    font-size: 14px !important;
    padding: 14px 18px !important;
    margin-bottom: 14px !important;
    text-transform: none;
    letter-spacing: 0.3px;
    transition: border-color 0.25s, box-shadow 0.25s;
}

:is(.contact, body.single-post .wpcf7) form textarea {
    resize: none;
}

/* Placeholder */
:is(.contact, body.single-post .wpcf7) form input::placeholder,
:is(.contact, body.single-post .wpcf7) form textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
    text-transform: none;
}

/* Hover */
:is(.contact, body.single-post .wpcf7) form input:not([type="submit"]):hover,
:is(.contact, body.single-post .wpcf7) form textarea:hover {
    border-color: rgba(255, 255, 255, 0.22);
}

/* Focus — red accent glow */
:is(.contact, body.single-post .wpcf7) form input:not([type="submit"]):focus,
:is(.contact, body.single-post .wpcf7) form textarea:focus {
    border-color: #cc0000;
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.12);
    outline: none;
    color: #ffffff;
}

/* Validation error state */
:is(.contact, body.single-post .wpcf7) form .wpcf7-not-valid {
    border-color: #cc0000 !important;
}

/* Submit button */
:is(.contact, body.single-post .wpcf7) form input[type="submit"] {
    background: #cc0000;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 16px 40px !important;
    cursor: pointer;
    transition: background 0.25s, transform 0.15s;
    width: auto;
    margin-bottom: 0 !important;
}

:is(.contact, body.single-post .wpcf7) form input[type="submit"]:hover {
    background: #a80000;
    transform: translateY(-1px);
    color: #ffffff;
}

:is(.contact, body.single-post .wpcf7) form input[type="submit"]:active {
    transform: translateY(0);
}

/* Center submit button */
:is(.contact, body.single-post .wpcf7) form .col-xs-12 {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

/* CF7 injects <br> between fields — collapse them so spacing is
   only from margin-bottom on inputs. */
:is(.contact, body.single-post .wpcf7) form br {
    display: block;
    height: 0;
    line-height: 0;
}

/* Flex layout so the textarea auto-fills to the same height as the
   three-input left column — no fixed pixel height needed. */
:is(.contact, body.single-post .wpcf7) form {
    display: flex;
    flex-wrap: wrap;
}
:is(.contact, body.single-post .wpcf7) form > .col-xs-6 {
    display: flex;
    flex-direction: column;
}
:is(.contact, body.single-post .wpcf7) form > .col-xs-6 > p {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
}
:is(.contact, body.single-post .wpcf7) form > .col-xs-6.right > p > .wpcf7-form-control-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}
:is(.contact, body.single-post .wpcf7) form textarea {
    flex: 1 !important;
    height: auto !important;
    max-height: none !important;
}
:is(.contact, body.single-post .wpcf7) form > .col-xs-12,
:is(.contact, body.single-post .wpcf7) form > .wpcf7-response-output {
    width: 100%;
}

/* Response message */
:is(.contact, body.single-post .wpcf7) .wpcf7-response-output {
    border-radius: 4px;
    font-size: 13px;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ccc;
}

/* Personal-data consent checkbox (CF7 acceptance) */
:is(.contact, body.single-post .wpcf7) form > .vt-consent {
    justify-content: flex-start;
    padding-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #b0b0b0;
}
:is(.contact, body.single-post .wpcf7) form .vt-consent .wpcf7-list-item {
    margin: 0;
}
:is(.contact, body.single-post .wpcf7) form .vt-consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: 400;
}
:is(.contact, body.single-post .wpcf7) form .vt-consent input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0 !important;
    accent-color: #cc0000;
}
:is(.contact, body.single-post .wpcf7) form .vt-consent a {
    color: #d71818;
    text-decoration: underline;
    text-underline-offset: 2px;
}
:is(.contact, body.single-post .wpcf7) form .vt-consent a:hover,
:is(.contact, body.single-post .wpcf7) form .vt-consent a:focus {
    color: #ff4d4d;
}

/* Consent not ticked on submit (acceptance_as_validation, see functions.php): red outline
   around the checkbox, a short shake, and CF7's message underneath. Cleared once ticked. */
:is(.contact, body.single-post .wpcf7) form .vt-consent .wpcf7-not-valid input[type="checkbox"] {
    outline: 2px solid #d71818;
    outline-offset: 2px;
    animation: vt-consent-shake 0.4s ease-in-out;
}
:is(.contact, body.single-post .wpcf7) form .vt-consent .wpcf7-not-valid-tip {
    display: block;
    margin: 8px 0 0 28px;
    color: #ff4d4d;
    font-size: 13px;
    font-weight: 600;
}
@keyframes vt-consent-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    :is(.contact, body.single-post .wpcf7) form .vt-consent .wpcf7-not-valid input[type="checkbox"] {
        animation: none;
    }
}

/* Anti-spam honeypot: off-screen, never visible to people */
.wpcf7 form .vt-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Modern footer ───────────────────────────────────────────
   Replaces the theme's minimal centered strip with a proper
   3-column layout: brand | navigation | contact            */

footer.vt-footer {
    padding: 0;
    text-align: left;
    background: #0f0f0f;
    border-top: 3px solid #cc0000;
}

.vt-footer-top .container,
.vt-footer-bottom .container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 30px;
}

.vt-footer-top {
    padding: 60px 0 52px;
}

.vt-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Brand column */
footer.vt-footer img {
    width: 130px;
    height: auto;
    margin: 0 0 20px;
    display: block;
    opacity: 0.9;
}

.vt-footer-brand p {
    font-size: 13px !important;
    line-height: 1.85 !important;
    color: #777 !important;
    margin: 0 !important;
    max-width: 280px;
    text-transform: none;
}

/* Column headings */
.vt-footer-col h4 {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #cc0000;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Column link lists */
.vt-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vt-footer-col ul li {
    margin-bottom: 11px;
    line-height: 1.4;
}

.vt-footer-col ul li,
.vt-footer-col ul li a {
    font-size: 13px !important;
    color: #888 !important;
    text-transform: none;
    margin: 0;
    transition: color 0.2s;
}

.vt-footer-col ul li a:hover {
    color: #ffffff !important;
}

/* Social icons */
.vt-footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 26px;
}

.vt-footer-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1e1e1e;
    border: 1px solid rgba(255,255,255,0.08);
    color: #aaa !important;
    font-size: 15px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    margin: 0 !important;
    text-decoration: none;
}

.vt-footer-socials a:hover {
    background: #cc0000;
    border-color: #cc0000;
    color: #fff !important;
}

/* Bottom copyright strip */
.vt-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 20px 0;
    text-align: center;
}

.vt-footer-bottom p,
.vt-footer-bottom a {
    font-size: 11px !important;
    color: #444 !important;
    margin: 0 !important;
    text-transform: none;
    transition: color 0.2s;
}

.vt-footer-bottom a:hover {
    color: #999 !important;
}

/* Responsive: 2-col on tablet, 1-col on mobile */
@media (max-width: 900px) {
    .vt-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
    .vt-footer-brand {
        grid-column: 1 / -1;
    }
    .vt-footer-brand p {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .vt-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .vt-footer-brand {
        grid-column: auto;
    }
    .vt-footer-top {
        padding: 44px 0 36px;
    }
}


/* ── Car Filter page ────────────────────────────────────────
   3-layer animated Brand → Model → Generation picker with
   AJAX portfolio results.                                   */

.car-filter-wrap {
    padding: 8px 0 16px;
}

/* Page header */
.cf-page-header {
    text-align: center;
    margin-bottom: 52px;
}

.cf-page-intro {
    color: #888;
    font-size: 14px;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

/* ── Breadcrumb ─────────────────────────────────────────────*/

.cf-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 36px;
    min-height: 28px;
}

.cf-bc-btn {
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #cc0000;
    transition: color 0.2s;
    font-family: inherit;
    line-height: 1;
}

.cf-bc-btn:hover {
    color: #ff2020;
}

.cf-bc-btn.cf-bc-inactive {
    color: #444;
    cursor: default;
    pointer-events: none;
}

.cf-bc-sep {
    color: #444;
    font-size: 13px;
    user-select: none;
}

.cf-bc-sep-2,
.cf-bc-sep-3 {
    display: none;
}

/* ── Animated layers ────────────────────────────────────────*/

.cf-layer {
    display: none;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.cf-layer.cf-in {
    opacity: 1;
    transform: translateY(0);
}

.cf-layer.cf-out {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

/* Brand layer starts visible (JS adds .cf-in immediately) */
.cf-layer-brands {
    display: block;
}

/* ── Card grid ──────────────────────────────────────────────*/

.cf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

/* ── Individual card ────────────────────────────────────────*/

.cf-card {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
    user-select: none;
}

.cf-card:hover,
.cf-card:focus,
.cf-card.is-active {
    border-color: #cc0000;
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    outline: none;
}

.cf-card:active {
    transform: translateY(-1px);
}

/* Image area: 16:9 wide, background-cover, with placeholder letter */
.cf-card-img {
    width: 100%;
    padding-top: 56.25%;   /* 16:9 aspect */
    position: relative;
    background-color: #111;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Logos on brand layer: show full logo with padding, not cropped */
#cf-layer-brands .cf-card-img {
    background-size: 72%;
    background-color: #1c1c1c;
}

.cf-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -1px;
    color: rgba(255,255,255,0.08);
    text-transform: uppercase;
    font-family: 'Arial Black', Arial, sans-serif;
    pointer-events: none;
}

.cf-card-label {
    padding: 12px 14px 13px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ccc;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.cf-card:hover .cf-card-label,
.cf-card:focus .cf-card-label {
    color: #fff;
}

/* Generation cards: slightly taller label since names are longer */
#cf-gens-grid .cf-card-label {
    white-space: normal;
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 1.45;
    padding: 10px 12px 11px;
}

/* ── Portfolio section (below car filter nav) ────────────────*/

#cf-portfolio {
    display: none;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.32s ease, transform 0.32s ease;
}

#cf-portfolio.cf-in {
    opacity: 1;
    transform: translateY(0);
}

#cf-portfolio.cf-out {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

/* ── Responsive ─────────────────────────────────────────────*/

@media (max-width: 768px) {
    .car-filter-wrap {
        padding: 20px 0 12px;
    }
    .cf-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .cf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .cf-card-label {
        font-size: 9px;
        letter-spacing: 0.8px;
        padding: 9px 8px 10px;
    }
}

/* ── Portfolio text search ───────────────────────────────── */

.vp-search-wrap {
    position: relative;
    z-index: 10;
    padding: 16px 0 4px;
}

.vp-search-inner {
    position: relative;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.vp-search-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #d8d8d8;
    padding: 10px 28px 10px 4px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    outline: none;
    transition: border-color 0.2s;
}

.vp-search-input:focus {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.vp-search-input::placeholder {
    color: #444;
}

.vp-search-input::-webkit-search-cancel-button,
.vp-search-input::-webkit-search-decoration {
    display: none;
}

.vp-search-clear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #555;
    font-size: 16px;
    line-height: 1;
    padding: 4px 2px;
    cursor: pointer;
    display: none;
    transition: color 0.2s;
}

.vp-search-clear:hover {
    color: #d8d8d8;
}

.vp-search-clear.visible {
    display: block;
}

.vp-search-empty {
    text-align: center;
    padding: 60px 20px;
    color: #555;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: "Oswald", sans-serif;
}


/* ── Portfolio dependency (requires) section ─────────────── */

.portfolio-requires {
    max-width: 1160px;
    margin-top: 48px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    clear: both;
}

.portfolio-requires + .portfolio-requires {
    border-top: none;
    margin-top: 32px;
}

.portfolio-requires:last-of-type {
    margin-bottom: 80px;
}

.portfolio-requires-heading {
    font-size: 10px;
    letter-spacing: 3px;
    color: #666;
    margin: 0 0 16px;
}

/* Two-column list grid — mirrors portfolio list row style */
.portfolio-requires-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

@media (max-width: 560px) {
    .portfolio-requires-grid {
        grid-template-columns: 1fr;
    }
}

/* Each card is a horizontal flex row: thumb left, text right */
.prd-card {
    display: flex;
    align-items: stretch;
    background: #1a1a1a;
    text-decoration: none;
    overflow: hidden;
    transition: background 0.25s;
}

.prd-card:hover {
    background: #222;
}

.prd-thumb {
    flex: 0 0 110px;
    width: 110px;
    background-size: cover;
    background-position: center;
    background-color: #111;
    min-height: 72px;
    transition: transform 0.4s ease;
}

.prd-card:hover .prd-thumb {
    transform: scale(1.05);
}

.prd-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 16px;
    min-width: 0;
}

.prd-title {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d8d8d8;
    line-height: 1.4;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prd-card:hover .prd-title {
    color: #ffffff;
}

.prd-cats {
    display: block;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #555;
    margin-top: 5px;
}

/* ── Portfolio details — supported models by brand ─────────── */
.vp-car-models {
    margin: 10px 0 4px;
}
.vp-brand-group {
    margin-bottom: 14px;
    line-height: 1;
}
.vp-brand-name {
    display: block;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 6px;
    font-family: 'Oswald', sans-serif;
}
.vp-gen-links {
    display: block;
    line-height: 1.6;
}
.vp-show-more {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    color: #555;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-bottom: 1px solid #333;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
}
.vp-show-more:hover { color: #aaa; border-color: #555; }
.vp-gen-link {
    font-size: 12px;
    color: #aaa;
    text-decoration: none;
    transition: color 0.15s;
}
.vp-gen-link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.vp-gen-link::after {
    content: ',\00a0';
    color: #444;
}
.vp-gen-link:last-child::after {
    content: '';
}
.vp-models-inquiry {
    margin-top: 10px;
}
.vp-inquiry-link {
    font-size: 11px;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #333;
    transition: color 0.15s, border-color 0.15s;
}
.vp-inquiry-link:hover {
    color: #aaa;
    border-color: #555;
}

/* Clickable service boxes on the homepage */
.vntd-icon-box.service-clickable {
    cursor: pointer;
    transition: opacity 0.2s;
}
.vntd-icon-box.service-clickable:hover {
    opacity: 0.75;
}

/* Homepage hero: the north-core shortcode prints style="height:600px" and jquery.custom.js
   then resizes it to the window height after load, which shifted the whole hero (CLS 0.17-0.21).
   Give it the final viewport height from the start; the JS height is the same value. */
.vntd-fullscreen-slider {
    height: 100vh !important;
    height: 100svh !important;
}

/* The image filter (includes/vagtech-images.php) adds width/height to images that had none,
   marked data-vt-dims, so the browser knows their aspect ratio. Size them by CSS exactly as
   before (zero specificity, so every existing rule still wins). */
:where(img[data-vt-dims]) {
    width: auto;
    height: auto;
}

/* Single posts: the post title over the featured image is now the page h1 (the title band
   above it is gone). responsive.css shrinks .blog-head h1 on phones; keep it looking exactly
   like the h3 it replaced. */
.blog-head .blog-head-right h1.blog-post-heading {
    font-size: 31px;
    line-height: 1.1;
}
.blog-head.inner-head .blog-head-right h1.blog-post-heading {
    margin-top: 5px;
}

/* Mobile menu button: style.css turns it #1f1f1f on :hover/:active. On phones :hover sticks
   after a tap, so after opening/closing the menu the icon stayed dark grey on the dark header.
   Keep the red accent (same as .colored) in every state. */
.mobile-nav-button.colored,
.mobile-nav-button.colored:hover,
.mobile-nav-button.colored:active,
.mobile-nav-button.colored:focus {
    color: #d71818;
}

/* Phones: responsive.css gives .page_inner and the sidebar 15 px side padding inside the
   container that already has 15 px, so blog listings, posts and sidebar pages had 30 px
   gutters. Keep one 15 px gutter, like the other pages. */
@media only screen and (max-width: 800px) {
    .page-holder .page_inner,
    #page-content .page_sidebar,
    #blog .blog_inner + .blog_sidebar,
    #blog .blog_sidebar,
    #blog .blog_inner {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Blog posts, phones: the contact form has no .contact wrapper, so the theme's responsive
   rule that stacks .contact .left/.right never applied. The two bootstrap col-xs-6 columns
   stayed at 50% while the inputs keep their size="40" width, and the message box ran off
   the right edge. Stack everything in one column on the article's text edge. */
@media only screen and (max-width: 767px) {
    body.single-post .wpcf7 form > .col-xs-6,
    body.single-post .wpcf7 form > .col-xs-12 {
        width: 100%;
        float: none;
        padding-left: 0;
        padding-right: 0;
    }
    body.single-post .wpcf7 form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]),
    body.single-post .wpcf7 form textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    body.single-post .wpcf7 form textarea {
        min-height: 160px;
    }
}

/* CF7 puts a hidden .wpcf7-spinner (24 px + margins) next to the submit button, which pushed
   the centered button to the left. Take it out of the flow; it still shows beside the button
   while sending. */
:is(.contact, body.single-post .wpcf7) form .col-xs-12 > p {
    position: relative;
}
:is(.contact, body.single-post .wpcf7) form .wpcf7-spinner {
    position: absolute;
    left: 100%;
    top: 50%;
    margin: -12px 0 0 12px;
}

/* Font Awesome 5 icons rendered as inline SVG (includes/vagtech-icons.php): sized and
   aligned like the icon font glyph they replace (1em tall, FA's 0.125em descent). */
.vt-icon {
    display: inline-block;
    height: 1em;
    overflow: visible;
    fill: currentColor;
    vertical-align: -0.125em;
}