/* ============================================================
   PrimeAI — SEO & Performance CSS
   /assets/css/seo.css
   ============================================================ */

/* ---- Critical above-fold styles ---- */
/* Prevent layout shift on images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Explicit dimensions prevent CLS */
.tool-logo,
.tool-logo-placeholder {
    width: 52px;
    height: 52px;
    aspect-ratio: 1 / 1;
    contain: strict;
}

.tool-hero-logo,
.tool-hero-logo-placeholder {
    width: 80px;
    height: 80px;
    aspect-ratio: 1 / 1;
    contain: strict;
}

/* Skeleton loading to prevent CLS */
.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-input) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: skeleton-load 1.5s infinite;
    border-radius: 6px;
}

@keyframes skeleton-load {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Prevent FOUT (Flash of Unstyled Text) */
@font-face {
    font-family: 'Inter';
    font-display: swap;
}

/* LCP optimization — largest contentful paint element */
.hero-title,
.tool-hero-name,
.pseo-hero h1 {
    font-display: swap;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
}

/* Reduce layout shift from ads */
.ad-zone {
    min-height: 90px;
    contain: layout;
}

/* Smooth scrolling without causing layout shift */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

/* Focus styles for accessibility (also a ranking signal) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Print styles */
@media print {
    .site-header,
    .site-footer,
    .ad-zone,
    .btn-bookmark,
    .btn-upvote { display: none !important; }
    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
}