/************************************************
 * 1. HEADER + LOGO – STABILISE HEIGHT
 ************************************************/

/* Desktop header bar */
.main-header-bar,
.ast-primary-header-bar {
    min-height: 80px;       /* adjust if your header is visibly taller/shorter */
    box-sizing: border-box;
}

/* Mobile header (burger + logo row) */
.ast-header-break-point .main-header-bar,
.ast-header-break-point .ast-primary-header-bar {
    min-height: 70px;
}

/* Logo: prevent unexpected growth when image loads */
.site-logo-img img,
.custom-logo-link img {
    display: block;
    max-height: 220px;       /* adjust to your real logo size */
    height: auto;
}

/* Navigation area: reserve space so menu text doesn’t push content later */
.main-header-bar-navigation {
    min-height: 40px;
}


/************************************************
 * 2. BLOG FEATURED IMAGES – NO FORCED CROPPING
 ************************************************/

/* Keep images full-height, just make them behave nicely in the layout */
.ast-blog-featured-section,
.ast-blog-featured-section .post-thumb,
.ast-blog-featured-section .post-thumb img {
    width: 110%;
    display: block;
}

/* IMPORTANT: do NOT force aspect ratio or height – let the image decide */
.ast-blog-featured-section .post-thumb {
    overflow: hidden;   /* optional: hides tiny overlaps, but no fixed height */
}

.ast-blog-featured-section .post-thumb img {
    height: auto;
    object-fit: initial; /* or remove this line entirely if you prefer */
}


/************************************************
 * 3. GENERAL IMAGES – SAFE DEFAULTS
 ************************************************/

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


/************************************************
 * 4. AD / CODE BLOCKS – RESERVE VERTICAL SPACE
 ************************************************/

/* Mobile (<= 767px) */
@media (max-width: 767px) {
    .code-block.code-block-1,
    .code-block.code-block-2,
    .code-block.code-block-4,
    .code-block.code-block-5,
    .code-block.code-block-6,
    .code-block.code-block-9,
    .code-block.code-block-10 {
        min-height: 300px;  /* for 300x250 / 336x280 style units */
    }
}

/* Tablet + Desktop (>= 768px) */
@media (min-width: 768px) {
    .code-block.code-block-1,
    .code-block.code-block-2,
    .code-block.code-block-4,
    .code-block.code-block-5,
    .code-block.code-block-6,
    .code-block.code-block-9,
    .code-block.code-block-10 {
        min-height: 280px;
    }
}


/************************************************
 * 5. OPTIONAL – HERO IMAGE (ONLY IF YOU USE IT)
 * Commented out: enable only if you have .ast-hero-section.
 ************************************************/

/*
.ast-hero-section {
    width: 100%;
    overflow: hidden;
}

.ast-hero-section img {
    width: 100%;
    height: auto;
    display: block;
}
*/

/* Stabilise AdSense responsive ads */
.adsbygoogle {
    display: block !important;
    width: 100% !important;
}

/* Prevent collapsed ads from shrinking the space */
.adsbygoogle[data-ad-status="unfilled"] {
    min-height: inherit;
}

.code-block {
    width: 100%;
    display: block;
}

/* Example: if some ads often render 320x480 */
.code-block.code-block-6 {
    min-height: 480px !important;
}

/* Globally shrink typography inside the Astra Related Posts block */
.cb-related-recipes {
    font-size: 0.95rem !important;   /* try 0.9rem if you want it smaller */
    line-height: 1.35;
}