/*
Theme Name: junj
Theme URI: https://example.com/junj
Author: Your Name
Author URI: https://example.com
Description: junj主题 - 一个简洁的WordPress基础模板
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: junj
*/






/* 基础样式重置 */

@font-face {
    font-family: "OutfitBold";
    src: url("/wp-content/themes/junj/assets/fonts/Outfit-Bold.ttf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global link click reset. :where() keeps component state styles authoritative. */
:where(a:any-link) {
    -webkit-tap-highlight-color: transparent;
}

:where(a:visited),
:where(a:active) {
    color: inherit;
}

:where(a:focus),
:where(a:focus-visible) {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Global CTA hover motion. Keep page-owned colors, borders and dimensions intact. */
.about-cta__icon {
    display: block;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: contain;
}

:where(
    .pill-action,
    .pc-action,
    .hero-action,
    .contact-action,
    .contact-submit,
    .support-hero__cta,
    .support-hero__contact,
    .support-page__contact,
    .about-standard-hero__contact,
    .lab-hero__contact,
    .oem-hero__contact,
    .oem-why__contact,
    .application-cta__action,
    .application-card__action,
    .featured-article__action,
    .article-entry__action,
    .oy-404-action,
    .oy-search-action
) {
    transition-property: transform, box-shadow;
    transition-duration: 220ms;
    transition-timing-function: ease-out;
}

:where(
    .pill-action,
    .pc-action,
    .hero-action,
    .contact-action,
    .contact-submit,
    .support-hero__cta,
    .support-hero__contact,
    .support-page__contact,
    .about-standard-hero__contact,
    .lab-hero__contact,
    .oem-hero__contact,
    .oem-why__contact,
    .application-cta__action,
    .application-card__action,
    .featured-article__action,
    .article-entry__action,
    .oy-404-action,
    .oy-search-action
) :where(.iconfont, .about-cta__icon, [class$="__icon"], [class$="__action-icon"]) {
    transition: transform 220ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    :where(
        .pill-action,
        .pc-action,
        .hero-action,
        .contact-action,
        .contact-submit,
        .support-hero__cta,
        .support-hero__contact,
        .support-page__contact,
        .about-standard-hero__contact,
        .lab-hero__contact,
        .oem-hero__contact,
        .oem-why__contact,
        .application-cta__action,
        .application-card__action,
        .featured-article__action,
        .article-entry__action,
        .oy-404-action,
        .oy-search-action
    ):hover {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
        transform: translateY(-3px);
    }

    :where(
        .pill-action,
        .pc-action,
        .hero-action,
        .contact-action,
        .contact-submit,
        .support-hero__cta,
        .support-hero__contact,
        .support-page__contact,
        .about-standard-hero__contact,
        .lab-hero__contact,
        .oem-hero__contact,
        .oem-why__contact,
        .application-cta__action,
        .application-card__action,
        .featured-article__action,
        .article-entry__action,
        .oy-404-action,
        .oy-search-action
    ):hover :where(.iconfont, .about-cta__icon, [class$="__icon"], [class$="__action-icon"]) {
        transform: translateX(3px);
    }

    body :is(
        .about-standard-hero__contact,
        .support-hero__cta,
        .support-hero__contact,
        .support-page__contact,
        .contact-action,
        .lab-hero__contact,
        .oem-hero__contact,
        .oem-why__contact
    ):hover {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
        transform: translateY(-3px);
    }

    body :is(
        .about-standard-hero__contact,
        .support-hero__cta,
        .support-hero__contact,
        .support-page__contact,
        .contact-action,
        .lab-hero__contact,
        .oem-hero__contact,
        .oem-why__contact
    ):hover .about-cta__icon {
        transform: translateX(3px);
    }
}

:where(
    .pill-action,
    .pc-action,
    .hero-action,
    .contact-action,
    .contact-submit,
    .support-hero__cta,
    .support-hero__contact,
    .support-page__contact,
    .about-standard-hero__contact,
    .lab-hero__contact,
    .oem-hero__contact,
    .oem-why__contact,
    .application-cta__action,
    .application-card__action,
    .featured-article__action,
    .article-entry__action,
    .oy-404-action,
    .oy-search-action
):focus-visible {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    transform: translateY(-3px);
}

:where(
    .pill-action,
    .pc-action,
    .hero-action,
    .contact-action,
    .contact-submit,
    .support-hero__cta,
    .support-hero__contact,
    .support-page__contact,
    .about-standard-hero__contact,
    .lab-hero__contact,
    .oem-hero__contact,
    .oem-why__contact,
    .application-cta__action,
    .application-card__action,
    .featured-article__action,
    .article-entry__action,
    .oy-404-action,
    .oy-search-action
):focus-visible :where(.iconfont, .about-cta__icon, [class$="__icon"], [class$="__action-icon"]) {
    transform: translateX(3px);
}

body :is(
    .about-standard-hero__contact,
    .support-hero__cta,
    .support-hero__contact,
    .support-page__contact,
    .contact-action,
    .lab-hero__contact,
    .oem-hero__contact,
    .oem-why__contact
):focus-visible {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    transform: translateY(-3px);
}

body :is(
    .about-standard-hero__contact,
    .support-hero__cta,
    .support-hero__contact,
    .support-page__contact,
    .contact-action,
    .lab-hero__contact,
    .oem-hero__contact,
    .oem-why__contact
):focus-visible .about-cta__icon {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    body :is(
        .about-standard-hero__contact,
        .support-hero__cta,
        .support-hero__contact,
        .support-page__contact,
        .contact-action,
        .lab-hero__contact,
        .oem-hero__contact,
        .oem-why__contact
    ):is(:hover, :focus-visible),
    body :is(
        .about-standard-hero__contact,
        .support-hero__cta,
        .support-hero__contact,
        .support-page__contact,
        .contact-action,
        .lab-hero__contact,
        .oem-hero__contact,
        .oem-why__contact
    ):is(:hover, :focus-visible) .about-cta__icon {
        transform: none;
    }

    :where(
        .pill-action,
        .pc-action,
        .hero-action,
        .contact-action,
        .contact-submit,
        .support-hero__cta,
        .support-hero__contact,
        .support-page__contact,
        .about-standard-hero__contact,
        .lab-hero__contact,
        .oem-hero__contact,
        .oem-why__contact,
        .application-cta__action,
        .application-card__action,
        .featured-article__action,
        .article-entry__action,
        .oy-404-action,
        .oy-search-action
    ),
    :where(
        .pill-action,
        .pc-action,
        .hero-action,
        .contact-action,
        .contact-submit,
        .support-hero__cta,
        .support-hero__contact,
        .support-page__contact,
        .about-standard-hero__contact,
        .lab-hero__contact,
        .oem-hero__contact,
        .oem-why__contact,
        .application-cta__action,
        .application-card__action,
        .featured-article__action,
        .article-entry__action,
        .oy-404-action,
        .oy-search-action
    ) :where(.iconfont, .about-cta__icon, [class$="__icon"], [class$="__action-icon"]) {
        transition-duration: 0.01ms;
    }
}