/* ==========================================================================
   NovaCMS Pet Knowledge Theme — Main Stylesheet
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.site-body {
    font-family: var(--font-family-base);
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/*
 * iOS Safari / 微信内置浏览器会给 button 加上 -webkit-appearance: button，
 * 自定义 background-color 会被系统控件样式盖掉，表现为白底、圆底不显示。
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
}

body.site-body.is-page-loading {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Page loader
   -------------------------------------------------------------------------- */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color, #f9fafb);
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.page-loader__spinner {
    width: 2.75rem;
    height: 2.75rem;
    border: 3px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: page-loader-spin 0.8s linear infinite;
}

.page-loader__dots {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.page-loader__dots span {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    animation: page-loader-bounce 1.2s ease-in-out infinite;
}

.page-loader__dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.page-loader__dots span:nth-child(3) {
    animation-delay: 0.3s;
}

.page-loader__pulse {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    animation: page-loader-pulse 1.2s ease-in-out infinite;
}

.page-loader--progress {
    align-items: flex-start;
    justify-content: flex-start;
    background-color: transparent;
    pointer-events: none;
}

.page-loader--progress .page-loader__inner {
    width: 100%;
    align-items: stretch;
}

.page-loader__progress {
    display: block;
    width: 100%;
    height: 3px;
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
    overflow: hidden;
}

.page-loader__progress-bar {
    display: block;
    width: 35%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color, var(--primary-color)));
    animation: page-loader-progress 1.1s ease-in-out infinite;
}

.page-loader__logo {
    max-width: 10rem;
    max-height: 4rem;
    object-fit: contain;
    animation: page-loader-logo 1.4s ease-in-out infinite;
}

.page-loader__logo-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    letter-spacing: 0.02em;
    animation: page-loader-logo 1.4s ease-in-out infinite;
}

@keyframes page-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes page-loader-bounce {
    0%, 80%, 100% {
        transform: scale(0.55);
        opacity: 0.45;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes page-loader-pulse {
    0%, 100% {
        transform: scale(0.75);
        opacity: 0.55;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes page-loader-progress {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(320%);
    }
}

@keyframes page-loader-logo {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.96);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.35;
    color: var(--gray-900);
}

/* Fluid typography — headings scale smoothly across viewports */
h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
}

h2 {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
}

h3 {
    font-size: clamp(1.125rem, 3vw, 1.375rem);
}

h4 {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
}

h5, h6 {
    font-size: 1.0625rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--secondary-color);
}

/* --------------------------------------------------------------------------
   Interactive elements — pointer cursor
   -------------------------------------------------------------------------- */

a[href]:not([href=""]):not([aria-disabled="true"]),
button:not(:disabled):not(.disabled),
[role="button"]:not([aria-disabled="true"]),
[role="link"],
label[for],
select:not(:disabled),
summary,
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
input[type="reset"]:not(:disabled),
input[type="checkbox"],
input[type="radio"],
.home-card--link,
.cover-card:not(.cover-card--static),
.category-showcase-card--link,
.cs-side-card--link,
.cs-slide-link,
.carousel-slider .cs-btn,
.carousel-slider .cs-arrow,
.carousel-slider .cs-dot,
.pet-tool-card[role="button"],
[data-cursor="pointer"] {
    cursor: pointer;
}

a.cover-card:not(.cover-card--static) .nova-image-guard::after,
a.cs-side-card--link .nova-image-guard::after,
a.cs-slide-link .nova-image-guard::after,
.carousel-slider .cs-slide-link .nova-image-guard::after {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Skip to content (a11y)
   -------------------------------------------------------------------------- */

.skip-to-content {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10060;
    padding: 0.75rem 1.25rem;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 0 0 var(--border-radius) 0;
    transform: translateY(-100%);
    transition: transform 0.2s ease;
    text-decoration: none;
}

.skip-to-content:focus {
    transform: translateY(0);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --------------------------------------------------------------------------
   Focus visible (a11y)
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* --------------------------------------------------------------------------
   Skeleton loading
   -------------------------------------------------------------------------- */

.skeleton {
    background: linear-gradient(90deg, var(--gray-100, #f0f0f0) 25%, var(--gray-200, #e0e0e0) 37%, var(--gray-100, #f0f0f0) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
    border-radius: var(--border-radius);
    pointer-events: none;
    user-select: none;
}

.skeleton--text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton--title {
    height: 1.5em;
    width: 60%;
    margin-bottom: 0.75em;
}

.skeleton--avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.skeleton--card {
    height: 200px;
}

.skeleton--thumb {
    aspect-ratio: 16 / 9;
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

img {
    max-width: 100%;
    height: auto;
}

/*
 * Cover / thumbnail images: fill media box (override global height:auto).
 * aspect-ratio / fixed-height containers use in-flow 100% sizing (flex-safe).
 * post-card__cover-frame uses ::before padding — images stay absolute.
 */
.cover-card__media > .nova-image-guard,
.article-list-card__media > .nova-image-guard,
.recent-post-item__media > .nova-image-guard,
.hot-post-item__media > .nova-image-guard,
.hot-ranking-item__cover-link > .nova-image-guard,
.article-mini-item__cover-link > .nova-image-guard,
.article-post-card__cover-link > .nova-image-guard,
.taxonomy-article-item__media > .nova-image-guard,
.product-card__image > .nova-image-guard,
.collection-card__image > .nova-image-guard,
.breed-card__media > .nova-image-guard,
.scroll-card__media > .nova-image-guard,
.pet-showcase-card__media > .nova-image-guard,
.pet-showcase-card__cover > .nova-image-guard,
.pet-search-modal__article-cover > .nova-image-guard,
.search-preview__item-cover > .nova-image-guard,
.search-suggest-card__cover > .nova-image-guard,
.carousel-slider .cs-slide-link > .nova-image-guard,
.carousel-slider .cs-slide > .nova-image-guard,
.cs-side-card__media > .nova-image-guard {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    line-height: 0;
}

.cover-card__media > img,
.cover-card__media > .nova-image-guard > img,
.article-list-card__media > img,
.article-list-card__media > .nova-image-guard > img,
.recent-post-item__media > img,
.recent-post-item__media > .nova-image-guard > img,
.hot-post-item__media > img,
.hot-post-item__media > .nova-image-guard > img,
.hot-ranking-item__cover-link > img,
.hot-ranking-item__cover-link > .nova-image-guard > img,
.article-mini-item__cover-link > img,
.article-mini-item__cover-link > .nova-image-guard > img,
.article-post-card__cover-link > img,
.article-post-card__cover-link > .nova-image-guard > img,
.taxonomy-article-item__media > img,
.taxonomy-article-item__media > .nova-image-guard > img,
.product-card__image > img,
.product-card__image > .nova-image-guard > img,
.collection-card__image > img,
.collection-card__image > .nova-image-guard > img,
.breed-card__media > img,
.breed-card__media > .nova-image-guard > img,
.breed-card__image,
.scroll-card__media > img,
.scroll-card__media > .nova-image-guard > img,
.scroll-card__image,
.category-showcase-card__media > img,
.category-showcase-card__image,
.category-showcase-card__media > .nova-image-guard > img,
.pet-showcase-card__media > img,
.pet-showcase-card__media > .nova-image-guard > img,
.pet-showcase-card__cover > img,
.pet-showcase-card__cover > .nova-image-guard > img,
.pet-search-modal__article-cover > img,
.pet-search-modal__article-cover > .nova-image-guard > img,
.search-preview__item-cover > img,
.search-preview__item-cover > .nova-image-guard > img,
.search-suggest-card__cover > img,
.search-suggest-card__cover > .nova-image-guard > img,
.carousel-slider .cs-slide-link > img,
.carousel-slider .cs-slide-link > .nova-image-guard > img,
.carousel-slider .cs-slide > img,
.carousel-slider .cs-slide > .nova-image-guard > img,
.cs-side-card__media > img,
.cs-side-card__media > .nova-image-guard > img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
}

.post-card__cover-frame > .nova-image-guard {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    line-height: 0;
}

.post-card__cover-frame > img,
.post-card__cover-frame > .nova-image-guard > img,
img.post-card__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
}