/*
 Theme Name: astra-child
 Template: astra
 Version: 1.0
*/

/* Ensure the post thumbnail image is responsive */
.post-thumbnail .wp-post-image {
    width: 100% !important; /* Responsive width */
    max-width: 800px !important; /* Maximum width */
    height: auto !important; /* Maintain aspect ratio */
    display: block !important; /* Ensure no extra space below the image */
    margin: 0 auto !important; /* Center the image */
}

/* Media Queries for Smaller Screens */
@media screen and (max-width: 768px) {
    .post-thumbnail .wp-post-image {
        max-width: 100% !important; /* Adjust for smaller screens */
        height: auto !important; /* Maintain aspect ratio */
    }
}




/* Ensure each container can hold a positioned overlay */
.menu1, .menu2, .menu3, .menu4, .menu5 {
  position: relative !important;
  overflow: hidden !important;
}

/* Overlay covering bottom third, with a semi-transparent background and text */
.menu1::after,
.menu2::after,
.menu3::after,
.menu4::after,
.menu5::after {
  content: "" !important; /* Fallback content, see below for unique text */
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 33% !important; /* one-third of container */
  background: rgba(0, 0, 0, 0.6) !important; /* dark transparent */
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  font-size: 1rem !important;
  z-index: 9999 !important;
}

/* Add unique descriptions for each menu container */
.menu1::after { content: "Description for Menu 1" !important; }
.menu2::after { content: "Description for Menu 2" !important; }
.menu3::after { content: "Description for Menu 3" !important; }
.menu4::after { content: "Description for Menu 4" !important; }
.menu5::after { content: "Description for Menu 5" !important; }





/* Apply consistent styling to image1, image2, image3, and image4 */
.image1 a img,
.image2 a img,
.image3 a img,
.image4 a img {
    display: block;            /* Remove inline spacing */
    width: 100%;               /* Make images fill their container */
    height: auto;              /* Maintain aspect ratio */
    margin: 0;                 /* No extra margin */
    padding: 0;                /* No padding */
    border: none;              /* Remove borders */
    box-sizing: border-box;    /* Prevent overflow from padding or borders */
}

.image1 a,
.image2 a,
.image3 a,
.image4 a {
    display: block;            /* Ensure links behave like block elements */
    margin: 0;                 /* No extra margin around links */
    padding: 0;                /* No padding */
    line-height: 0;            /* Eliminate line spacing that could cause gaps */
    box-sizing: border-box;    /* Prevent padding/borders from causing gaps */
}

/* Ensure the containers holding the images have no gaps */
.image1,
.image2,
.image3,
.image4 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Mobile-specific adjustments to ensure no white space */
@media (max-width: 768px) {
    .image1 a img,
    .image2 a img,
    .image3 a img,
    .image4 a img {
        width: 100%;           /* Ensure full width on smaller screens */
        height: auto;          /* Keep aspect ratio intact */
    }

    .image1,
    .image2,
    .image3,
    .image4 {
        margin: 0;
        padding: 0;
    }
}

header .logo a,
header .logo img {
    display: inline-block !important;
    margin: 0 auto !important;
}

header .logo {
    text-align: center;
}

/* Blog pages specific styles */
body.blog .image1 a img,
body.blog .image2 a img,
body.blog .image3 a img,
body.blog .image4 a img {
    display: block !important; /* Remove inline spacing */
    width: 100% !important;    /* Make images fill their container */
    height: auto !important;   /* Maintain aspect ratio */
    margin: 0 !important;      /* No extra margin */
    padding: 0 !important;     /* No padding */
    border: none !important;   /* Remove borders */
    box-sizing: border-box !important; /* Prevent overflow from padding or borders */
}

body.blog .image1 a,
body.blog .image2 a,
body.blog .image3 a,
body.blog .image4 a {
    display: block !important; /* Ensure links behave like block elements */
    margin: 0 !important;      /* No extra margin around links */
    padding: 0 !important;     /* No padding */
    line-height: 0 !important; /* Eliminate line spacing that could cause gaps */
    box-sizing: border-box !important; /* Prevent padding/borders from causing gaps */
}

body.blog .image1,
body.blog .image2,
body.blog .image3,
body.blog .image4 {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}