/* ==========================================================================
   3D Print Expert — theme patch: hover states for all interactive elements
   + request-form status. Design accent: #FF1C01. Base transition: .3s.
   Uses only transform / color / opacity / border / shadow — never layout.
   ========================================================================== */

:root { --t3d-accent: #FF1C01; }

/* --- Universal smooth transitions on interactive elements --------------- */
a,
button,
.header-wrap__nav-item,
.header-wrap__lang,
.header-wrap__icon,
.services__card,
.materials__card,
.park-card,
.trust-card,
.benefits-card,
.clients__row,
.matlist__card,
.work-card,
.advantages__item,
.perks-wrap__list .item,
.usage-wrap__list .item,
.technology__row,
.matlist__tag,
.work-card__tag,
.featured__item,
.featured__img,
.contact-file__drop,
.contact-row,
.footer-wrap__link,
.footer-wrap__social-list .item,
.contact-wrap__social-item,
.modal-close,
.row {
    transition: transform .3s ease, color .3s ease, background-color .3s ease,
                border-color .3s ease, box-shadow .3s ease, opacity .3s ease;
}

/* --- Primary / pill buttons -------------------------------------------- */
.header-wrap__cta:hover,
.hero__submit:hover,
.services__btn:hover,
.cta__btn:hover,
.hero-about__submit-btn:hover,
.hero-material__cta-btn:hover,
.hero-tech__cta-btn:hover,
.hero-model__submit:hover,
.technology__more:hover,
.notfound-btn:hover,
.contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(254, 28, 1, .22);
    opacity: .95;
}
.contact-submit { cursor: pointer; }
.contact-submit:active,
.header-wrap__cta:active,
.cta__btn:active { transform: translateY(0); }

/* --- Round arrow buttons ----------------------------------------------- */
.hero__submit-arrow:hover,
.services__btn-arrow:hover,
.cta__arrow:hover,
.hero-about__submit-arrow:hover,
.hero-material__cta-arrow:hover,
.hero-tech__cta-arrow:hover,
.hero-model__submit-arrow:hover,
.technology__more-arrow:hover,
.contact-submit:hover .contact-submit__arrow,
.notfound-btn:hover .notfound-btn__arrow {
    transform: rotate(-45deg) scale(1.06);
}
.hero__submit-arrow, .services__btn-arrow, .cta__arrow,
.hero-about__submit-arrow, .hero-material__cta-arrow, .hero-tech__cta-arrow,
.hero-model__submit-arrow, .technology__more-arrow,
.contact-submit__arrow, .notfound-btn__arrow { transition: transform .3s ease; }

/* --- Consistent side padding on inner-page sections (design lacked it on
       desktop, so content touched the edges on 1280–1680px screens) ------- */
@media (min-width: 769px) {
    .steps-wrap, .perks-wrap, .usage-wrap, .park-wrap, .trust-wrap,
    .matlist__inner, .work-wrap, .benefits-wrap {
        width: 100%;
        box-sizing: border-box;
        padding-left: clamp(16px, 6.25vw, 120px);
        padding-right: clamp(16px, 6.25vw, 120px);
    }
}

/* --- "Dlaczego" banner had no top margin, so it butted against Services -- */
.expert { margin-top: clamp(60px, 7vw, 121px); }
/* the bottom title is only the destination marker — the top title travels to it */
.expert__title--btm { opacity: 0; }

/* --- Sticky header on scroll ------------------------------------------- */
.header { position: sticky; top: 0; z-index: 100; transition: transform .35s ease, box-shadow .3s ease; }
.header.is-stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
/* hide while scrolling down, bring back on scroll up — otherwise the sticky bar
   permanently clips the top of every section heading (Usługi, Dlaczego, hero) */
.header.is-hidden { transform: translateY(-100%); }

/* --- Desktop dropdown for the "Usługi" submenu (design had none) -------- */
@media (min-width: 769px) {
    .header-wrap__nav-item--sub { position: relative; }
    .header-wrap__nav-item--sub .header-wrap__subnav {
        display: flex; flex-direction: column; position: absolute; top: calc(100% + 22px); left: 50%;
        transform: translateX(-50%) translateY(8px);
        background: #fff; padding: 22px 26px; border-radius: 16px;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
        min-width: 230px; align-items: flex-start; gap: 16px;
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .25s ease, transform .25s ease; z-index: 120;
    }
    .header-wrap__subnav a { color: #000; }
    .header-wrap__nav-item--sub::after {
        content: ""; position: absolute; top: 100%; left: -14px; right: -14px; height: 30px;
    }
    .header-wrap__nav-item--sub:hover .header-wrap__subnav {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
    .header-wrap__nav-item--sub:hover .header-wrap__arrow { transform: rotate(180deg); }
    .header-wrap__subnav a { white-space: nowrap; width: 100%; }
    .header-wrap__subnav a:hover { color: var(--t3d-accent); }
}

/* --- Breadcrumb: make the muted (Home) crumb actually visible ----------- */
.hero-about__crumb--muted,
.hero-material__crumb--muted,
.hero-model__crumb--muted,
.hero-tech__crumb--muted,
.hero-contacts__crumb--muted { color: #9a9a9a; }
.hero-about__crumb--muted:hover,
.hero-material__crumb--muted:hover,
.hero-model__crumb--muted:hover,
.hero-tech__crumb--muted:hover,
.hero-contacts__crumb--muted:hover { color: var(--t3d-accent); }

/* --- Header navigation -------------------------------------------------- */
.header-wrap__nav-item { cursor: pointer; }
.header-wrap__nav-item:hover > span,
.header-wrap__nav-item:hover > .header-wrap__arrow { color: var(--t3d-accent); }
.header-wrap__nav-item:hover .header-wrap__arrow { transform: translateY(1px); }
.header-wrap__subnav a { transition: color .3s ease, padding-left .3s ease; }
.header-wrap__subnav a:hover { color: var(--t3d-accent); padding-left: 4px; }

.header-wrap__lang { cursor: pointer; }
.header-wrap__lang:hover span,
.header-wrap__lang:hover .header-wrap__lang-eng { color: var(--t3d-accent); }

.header-wrap__phone-num:hover span { color: var(--t3d-accent); }
.header-wrap__phone-icon:hover { transform: scale(1.1); }
.header-wrap__icon:hover { opacity: .7; }

/* --- Footer / contacts -------------------------------------------------- */
.footer-wrap__link:hover span { color: var(--t3d-accent); }
.footer-wrap__link:hover { transform: translateX(3px); }
.row:hover .row__text span,
.contact-row:hover .contact-row__text { color: var(--t3d-accent); }
.row:hover .row__icon,
.contact-row:hover .contact-row__icon { transform: scale(1.08); }
.footer-wrap__social-list .item:hover,
.contact-wrap__social-item:hover { transform: translateY(-3px); opacity: .85; }

/* --- Cards -------------------------------------------------------------- */
.materials__card:hover,
.park-card:hover,
.trust-card:hover,
.benefits-card:not(.benefits-card--image):hover,
.clients__row:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .10);
}

/* Services cards have no inner padding in the design, so a tight shadow would
   hug the text. Draw the hover card as a padded backdrop behind the content. */
.services__card { position: relative; }
.services__card::before {
    content: ""; position: absolute; inset: -26px -22px; z-index: -1;
    background: #fff; border-radius: 22px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .10);
    opacity: 0; transition: opacity .3s ease, transform .3s ease;
    transform: translateY(6px);
}
.services__card:hover { transform: translateY(-4px); }
.services__card:hover::before { opacity: 1; transform: translateY(0); }
.benefits-card--image:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }

/* clickable/tabbed lists — cursor + subtle emphasis */
.advantages__item,
.perks-wrap__list .item,
.work-card { cursor: pointer; }
.advantages__item:not(.advantages__item--active):hover .advantages__item-title,
.perks-wrap__list .item:not(.item--active):hover .item__title { color: var(--t3d-accent); }
.work-card.work-card--collapsed:hover { transform: translateY(-3px); }

/* --- Tags --------------------------------------------------------------- */
.matlist__tag:hover,
.work-card__tag:hover {
    background-color: var(--t3d-accent);
    border-color: var(--t3d-accent);
    color: #fff;
}
.matlist__tag:hover span { color: #fff; }

/* --- Featured slider ---------------------------------------------------- */
.featured__item { cursor: grab; }
.featured__item:hover .featured__img { transform: scale(1.03); }

/* --- File drop + modal close ------------------------------------------- */
.contact-file__drop { cursor: pointer; }
.contact-file__drop:hover { border-color: var(--t3d-accent); }
.contact-file__drop:hover .contact-file__icon { transform: translateY(-2px); }
.modal-close { cursor: pointer; }
.modal-close:hover { transform: rotate(90deg); }

/* --- Technology / usage rows ------------------------------------------- */
.technology__row:hover .technology__row-text,
.usage-wrap__list .item:hover .item__name { color: var(--t3d-accent); }
.usage-wrap__list .item:hover .item__dot { transform: scale(1.4); }

/* generic links inside content */
.notfound-wrap__desc a:hover { color: var(--t3d-accent); text-decoration: underline; }

/* --- Lock background scroll when modal is open (kills the 2nd scrollbar) - */
html:has(.modal.modal-active) { overflow: hidden; }

/* --- Contact Form 7 integration (keep design markup 1:1) --------------- */
/* CF7 wraps each control in a span — make it fill the field like the raw input did */
.contact-field .wpcf7-form-control-wrap { flex: 1 1 auto; width: 100%; height: 100%; display: flex; }
.contact-field .wpcf7-form-control-wrap .contact-field__input { width: 100%; height: 100%; }
/* Hide CF7 file input; the custom drop label stays clickable */
.contact-file__drop .wpcf7-form-control-wrap {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); opacity: 0;
}
/* CF7 spinner + response output */
.wpcf7-spinner { margin: 0 0 0 12px; }
.wpcf7-response-output { margin: 12px 0 0 !important; border: none !important; padding: 0 !important;
    font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.4; }
.wpcf7-response-output:empty { display: none; }
.wpcf7-not-valid-tip { color: var(--t3d-accent); font-size: 13px; margin-top: 4px; }
.contact-field:has(.wpcf7-not-valid) { border-color: var(--t3d-accent); }
.wpcf7 form.sent .wpcf7-response-output { color: #157a3d; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { color: var(--t3d-accent); }

/* --- Model page: show the hero mascot on desktop too (design hid it) ---- */
@media (min-width: 769px) {
    .hero-model__mascot {
        display: block; align-self: center; width: min(640px, 58%);
        aspect-ratio: auto; height: auto; object-fit: contain;
        margin: 18px auto 0;
    }
}

/* --- Advantages: image swaps when a tab is selected -------------------- */
.advantages__visual { transition: opacity .18s ease; }

/* --- Scroll reveal: "Jak to działa" steps appear one by one -------------
       Desktop only, like the services reveal below: under 1301px .how__steps
       becomes a horizontal scroller, so steps 2-4 sit outside the viewport and
       can never intersect it — they would stay at opacity:0 forever. */
@media (min-width: 1301px) {
    .how__step { opacity: 0; transform: translateY(34px); transition: opacity .6s ease, transform .6s ease; }
    .how__step.is-in { opacity: 1; transform: none; }
    .how__step--1 { transition-delay: 0s; }
    .how__step--2 { transition-delay: .15s; }
    .how__step--3 { transition-delay: .3s; }
    .how__step--4 { transition-delay: .45s; }
    .how__arrow { opacity: 0; transition: opacity .6s ease .4s; }
    .how__steps.is-in .how__arrow { opacity: 1; }
}

/* --- Scroll reveal: services card images slide in from different edges
       (desktop 3-column layout only; mobile stacks, no horizontal slide) -- */
@media (min-width: 1301px) {
    .services__card .services__img {
        opacity: 0; transform: translateX(-52px);
        transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
    }
    .services__card--2 .services__img { transform: translateY(-52px); }
    .services__card--3 .services__img { transform: translateX(52px); }
    /* .is-in (0,3,0) must outrank every per-card transform rule (0,2,0) above */
    .services__card.is-in .services__img { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .how__step, .how__arrow, .services__card .services__img, .services__card .services__img-mobile {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* --- Request form status ----------------------------------------------- */
.t3d-form-status { margin: 12px 0 0; font-size: 15px; min-height: 1em; }
.t3d-form-status.is-ok { color: #157a3d; }
.t3d-form-status.is-error { color: var(--t3d-accent); }
.contact-submit.is-loading { opacity: .6; pointer-events: none; }

/* --- WP admin bar offset guard (keeps fixed header correct) ------------ */
@media screen and (max-width: 782px) {
    body.admin-bar .header { top: 0; }
}

/* 2.5.4 — поточна сторінка в меню без циклічного посилання */
.header-wrap__subnav .is-current,
.header-wrap__subnav a { font-family: "DM Sans", sans-serif; font-weight: 300; font-size: 16px; color: #000; }
.header-wrap__subnav .is-current,
span.header-wrap__nav-item--current,
span.footer-wrap__link--current { cursor: default; }
.header-wrap__subnav .is-current:hover,
span.header-wrap__nav-item--current:hover,
span.footer-wrap__link--current:hover { color: inherit; opacity: 1; }