/*
 Theme Name:   Twenty Twenty-Five Child
 Template:     twentytwentyfive
 Author:       Your Name
 Description:  A child theme for Twenty Twenty-Five
 Version:      1.0.0
*/

.my-background-group {
    position: relative;
    z-index: 10;
    
    /* 1. Ensure the container has the background image */
    /* (You likely already have this set via WP, but this ensures the gradient sits on top) */
    background: linear-gradient(to bottom, transparent 95%, #000000 100%), 
                url('YOUR-IMAGE-URL-HERE');
    background-size: cover;
    background-position: center;
}

/* If you set the image via the WordPress UI, use this pseudo-element version instead: */
.my-background-group::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* This creates the black fade in the last 5% */
    background: linear-gradient(to bottom, transparent 92%, #000000 100%);
    pointer-events: none; /* Allows you to still click buttons underneath */
    z-index: 1; /* Sits above the image but below the text */
}


.my-background-group .content-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;

    /* Setup Flexbox */
    display: flex;
    flex-direction: column;   /* Stacks items vertically */
    align-items: center;      /* Centers items HORIZONTALLY */
    justify-content: center;  /* Centers items VERTICALLY */
    
    padding: 40px;            /* Keeps text away from image edges */
    box-sizing: border-box;
}

/* Push the heading to the top without losing horizontal center */
.my-background-group .content-container h1, 
.my-background-group .content-container h2 {
    margin-top: 0;            /* Remove top gap */
    margin-bottom: auto;      /* Pushes everything else to the middle/bottom */
    text-align: center;       /* Ensures the text lines themselves are centered */
    width: 100%;              /* Allows text-align to work */
}

.overlap-behind {
    position: relative;
    z-index: 1;          /* Lower than 10, so it goes behind */
    
    /* Optional: Add padding to the top of this group so 
       the content inside isn't hidden by the image above */
    padding-top: 120px; 
}

@media (min-width: 769px) and (max-width: 1024px) {
    .my-background-group .content-container h2 {
        padding-top: 100px !important;    /* Specific tablet padding */
        /* Font size is NOT defined here, so it will inherit from your desktop style */
    }
}

/* Mobile scaling (Applied to screens 768px and smaller) */
@media (max-width: 768px) {
    .my-background-group .content-container h2 {
        font-size: 30px !important;      /* Forced size */
        padding-top: 50px !important;    /* Added top padding */
        line-height: 1.1 !important;     /* Prevents overlap at large sizes */
        display: block !important;       /* Ensures padding applies correctly */
        text-align: center !important;   /* Keeps it centered */
    }
}

.shadow-drop {
    text-shadow: 2px 2px 8px #000000;
}

footer {
  margin-block-start: 0!important; /* Or margin-top: 0!important; */
}