/* AutomotiveZone — Core Web Vitals & Accessibility hardening */

/* Reserve icon space before the deferred Phosphor web component upgrades.
   This prevents icon replacement from changing line width/height and causing CLS. */
.ph,
[class^="ph-"],
[class*=" ph-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    min-width: 1em;
    height: 1em;
    min-height: 1em;
    line-height: 1;
    flex: 0 0 1em;
    vertical-align: middle;
}

/* Media boxes reserve their geometry before images finish loading. */
.az-fp-news-img,
.az-arch-img,
.az-side-post-thumb,
.news-card-thumb,
.sidebar-post-thumb,
.post-featured-image {
    overflow: hidden;
}

.az-fp-news-img,
.az-arch-img,
.news-card-thumb,
.sidebar-post-thumb {
    aspect-ratio: 16 / 10;
}

.az-fp-news-img img,
.az-arch-img img,
.news-card-thumb img,
.sidebar-post-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Meta rows always have a stable line box, including before icon hydration. */
.az-fp-news-meta,
.az-arch-meta,
.card-meta,
.post-meta {
    min-height: 1.25rem;
    line-height: 1.25rem;
}

/* WCAG AA-friendly metadata colors on light backgrounds. */
.az-fp-news-meta,
.az-fp-news-meta span,
.az-arch-meta,
.az-arch-meta span,
.card-meta,
.card-meta span {
    color: #475569 !important;
}

/* Keep metadata comfortably readable in dark mode. */
body.dark-mode .az-fp-news-meta,
body.dark-mode .az-fp-news-meta span,
body.dark-mode .az-arch-meta,
body.dark-mode .az-arch-meta span,
body.dark-mode .card-meta,
body.dark-mode .card-meta span {
    color: #cbd5e1 !important;
}

/* Avoid layout movement from hover effects; transforms don't affect document flow. */
.az-fp-news-card,
.az-arch-card,
.news-card,
.post-card {
    backface-visibility: hidden;
}

/* Stable logo box prevents header movement when dark-mode logo switching occurs. */
.custom-logo-link,
.ab-logo {
    min-height: 50px;
}
.custom-logo-link img,
.site-logo {
    display: block;
}

/* Accessibility: visible keyboard focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

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

/* CLS hardening v4: no layout-dependent viewport sizing or icon hydration on homepage. */
.ab-header { min-height: 80px; }
.header-brand { min-height: 50px; }
.site-logo { width: 180px; height: 50px; object-fit: contain; object-position: left center; }
.az-fp-hero-slider-wrap { contain: layout paint; }
.az-fp-hero-slide, .az-fp-hero-bg, .az-fp-hero-bg img { contain: layout paint; }
@media (max-width:768px) { .az-fp-hero-slider-wrap { height:720px !important; min-height:720px !important; } }