/*
Theme Name: Astra Child
Template: astra
Version: 1.0
Description: Custom child theme for Astra with download button, ad space, and Core Web Vitals optimization
Author: DevToolDepot
*/

/* ========================
   Custom Download Button
======================== */
.custom-download-btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background-color: #0073e6;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.custom-download-btn:hover {
  background-color: #005bb5;
  transform: translateY(-2px);
}

/* ========================
   CLS Prevention for Images
======================== */
/* All images except site logo */
img:not(.custom-logo):not(.site-logo) {
  display: block;
  height: auto;
  max-width: 100%;
}

/* Lock aspect ratio if width & height attributes exist */
img[width][height]:not(.custom-logo):not(.site-logo) {
  aspect-ratio: attr(width) / attr(height);
}

/* Default ratio if dimensions missing */
img:not([width]):not([height]):not(.custom-logo):not(.site-logo) {
  aspect-ratio: 16/9;
}

/* Post featured images */
.ast-post-featured-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* Adjust for your actual image style */
}

/* ========================
   Layout Stability Helpers
======================== */
/* Reserve footer space */
#footer-copyright {
  min-height: 50px;
}

/* Reserve space for hero/banner section */
.hero-section {
  min-height: 60vh;
}

/* Reserve space for ads */
.ad-slot {
  display: block;
  width: 300px;
  height: 250px;
  margin: auto;
}

/* Delay floating buttons until page fully loads */
.jetpack-subscribe-floating-button {
  visibility: hidden;
}
body.page-loaded .jetpack-subscribe-floating-button {
  visibility: visible;
}

/* Hero section image fix */
.hero-section {
    background-position: top center !important; /* Move image down so head shows */
    background-size: contain !important; /* Prevent cropping */
    background-repeat: no-repeat !important;
}

/* Optional: Add padding if image height is smaller than section */
.hero-section-inner {
    padding-top: 40px;
    padding-bottom: 40px;
}

.blogspot-embed img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: inline-block;
}