/**
 * Core Web Vitals - Minimal CLS Prevention
 *
 * Targets ONLY the critical CLS issues:
 * 1. Ad space reservation (prevents ads from pushing content)
 * 2. Image aspect-ratio locks (prevents image reflow)
 * 3. Font optimization (prevents text reflow)
 * 4. Scrollbar gutter (prevents shift when scrollbar appears)
 *
 * Does NOT aggressively restrict container sizing.
 */

/* ═══════════════════════════════════════════════════════════════
   1. SCROLLBAR GUTTER - Prevent shift when scrollbar appears
   ═══════════════════════════════════════════════════════════════ */

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable; /* CRITICAL: prevents layout shift */
}

/* ═══════════════════════════════════════════════════════════════
   2. FONT OPTIMIZATION - Prevent text reflow during loading
   ═══════════════════════════════════════════════════════════════ */

body {
    font-display: swap; /* Show fallback immediately */
}

/* ═══════════════════════════════════════════════════════════════
   3. IMAGE ASPECT-RATIO LOCKS - Prevent image reflow
   ═══════════════════════════════════════════════════════════════ */

/* Featured images */
.post-thumbnail,
.featured-image,
img.attachment-large,
img[class*="featured"] {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Job card images/logos */
.job-logo,
.company-logo,
.card-image,
img[class*="logo"] {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Thumbnail images */
img.attachment-medium,
img[class*="thumbnail"],
.thumb {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* All images responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   4. AD SPACE RESERVATION - Prevent ads from pushing content
   ═══════════════════════════════════════════════════════════════ */

/*
   Reserve space for ads ONLY - don't constrain other elements.
   Ads are the PRIMARY CLS culprit on this site.
*/

/* Leaderboard/Top ads (728x90, 970x90, mobile 320x50) */
.jvi-ad-leaderboard,
.ad-slot-leaderboard,
[class*="ad-leaderboard"],
ins.adsbygoogle[data-ad-format="horizontal"] {
    min-height: 90px;
    width: 100%;
    display: block;
    overflow: hidden;
}

/* Hero/Large ads (300x250, 336x280) */
.jvi-ad-hero,
.ad-slot-hero,
[class*="ad-hero"],
ins.adsbygoogle[data-ad-slot*="hero"] {
    min-height: 250px;
    width: 100%;
    display: block;
    overflow: hidden;
}

/* Sidebar ads (300x250, 300x600) */
.jvi-ad-sidebar,
.ad-slot-sidebar,
[class*="ad-sidebar"],
.sidebar ins.adsbygoogle {
    min-height: 600px;
    width: 100%;
    display: block;
    overflow: hidden;
}

/* Infeed ads (300x250) */
.jvi-ad-infeed,
.ad-slot-infeed,
[class*="ad-infeed"],
ins.adsbygoogle[data-ad-format="rectangle"] {
    min-height: 250px;
    width: 100%;
    display: block;
    overflow: hidden;
}

/* Generic ad containers */
.ad-container,
.ad-slot,
.advertisement {
    min-height: 100px;
    width: 100%;
    display: block;
    overflow: hidden;
}

/* Mobile ads */
@media (max-width: 768px) {
    .jvi-ad-leaderboard,
    .ad-slot-leaderboard,
    [class*="ad-leaderboard"],
    ins.adsbygoogle[data-ad-format="horizontal"] {
        min-height: 60px;
    }

    .jvi-ad-sidebar,
    .ad-slot-sidebar,
    [class*="ad-sidebar"],
    .sidebar ins.adsbygoogle {
        min-height: 250px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   5. BUTTON CONSISTENCY - Reasonable sizing only
   ═══════════════════════════════════════════════════════════════ */

button,
.button,
a.button,
input[type="button"],
input[type="submit"] {
    min-height: 44px;
    padding: 10px 16px;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   6. FORM INPUTS - Standard touch target sizing
   ═══════════════════════════════════════════════════════════════ */

input,
textarea,
select {
    min-height: 40px;
}

/* ═══════════════════════════════════════════════════════════════
   7. MODALS - Prevent layout shift when opening
   ═══════════════════════════════════════════════════════════════ */

body.modal-open {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   END MINIMAL CLS PREVENTION CSS

   This focused approach prevents the major CLS issues (ads, images)
   while NOT constraining normal content flow.
   ═══════════════════════════════════════════════════════════════ */