/*
Theme Name:   Twenty Twenty-Five Child
Template:     twentytwentyfive
Description:  A custom child theme
Author:       Andrew Stratton
Version:      1.0.1
*/
/* Your custom CSS starts after this line */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@490&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/* gets rid of space between header and title */
main {
    margin-top: 0 !important;
}

.main-title-style {
    font-family: "Caveat", cursive;
  font-weight: 500;
  font-style: normal;
  /* animation: fade-in-title 2.5s ease-in; */
}

.main-text-style {
    font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  /* animation: fade-in-text 5.5s ease-in; */
  margin-top: 8px;
}

@media (min-width: 1024px) {
  .home-images {
    display: flex !important; 
    max-width: 1000px !important;
    width: 60% !important;
    margin-left: auto !important;  /* Centers it */
    margin-right: auto !important;
    padding: 6% !important;
    box-sizing: border-box !important;
  }
  .home-image-title {
      margin: -10% 9% 10% 0 !important; 
  }
  .home-image1 {
       margin: 0 9% 18% 0 !important; 
  }
  .home-image2 {
      margin: 0 25% 18% 0 !important; 
  }
  .home-image3 {
      margin: 0 12% 0 0 !important; 
  }
  .home-image4 {
      margin: -5% 0 18% 0 !important; 
  }
  .home-image5 {
      margin: 0 0 18% -18% !important; 
  }
  .home-image6 {
       margin: 0 0 0 0 !important; 
  }
}
  



/* Force exactly 2 columns on mobile screens */
@media screen and (max-width: 782px) {
    .wp-block-gallery.mobile-2-columns {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
    }

    .wp-block-gallery.mobile-2-columns.wp-block-image {
        width: calc(50% - 16px) !important; /* 50% width minus half of the gap */
        flex-grow: 1;
        margin-right: 16px !important;
    }

   /* Remove margin from every second image to keep the grid even */
    .wp-block-gallery.mobile-2-columns.wp-block-image:nth-child(2n) {
        margin-right: 0 !important;
    }
}


/* Forcefully hide the locked, duplicate default theme header layout */
header.wp-block-template-part:first-of-type {
    display: none !important;
}





/* ==========================================================================
   1. MAIN CAROUSEL CORE WRAPPER
   ========================================================================== */
.wp-block-gallery.pure-css-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0 !important;
    margin: 0 auto !important;
    grid-template-columns: none !important;
    gap: 0 !important; 
    position: relative;
}

/* Hide Scrollbars globally */
.wp-block-gallery.pure-css-carousel::-webkit-scrollbar { display: none !important; }
.wp-block-gallery.pure-css-carousel { -ms-overflow-style: none !important; scrollbar-width: none !important; }

/* ==========================================================================
   2. MOBILE CONFIGURATION (Arrows Hidden, Peeking Slides, Strict Stops)
   ========================================================================== */
@media (max-width: 767px) {
    /* Hide arrows on mobile completely */
    .carousel-arrows-container {
        display: none !important;
    }

    .wp-block-gallery.pure-css-carousel .wp-block-image,
    .wp-block-gallery.pure-css-carousel figure.wp-block-image,
    .wp-block-gallery.pure-css-carousel li.blocks-gallery-item {
        display: block !important;
        flex: 0 0 75% !important; /* Main image takes up 75% of screen width */
        width: 75% !important;
        max-width: 75% !important;
        min-width: 75% !important;
        padding-right: 15px !important; /* Gap between images */
        margin: 0 !important;
        
        /* Enforce strict snapping layout */
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important; /* Forces the swipe to stop on the next image */
        box-sizing: border-box !important;
    }

    .wp-block-gallery.pure-css-carousel .wp-block-image img {
        width: 100% !important;
        height: 60vh !important; /* Locks image to 60% of the mobile screen height */
        object-fit: contain !important; /* Displays full portrait image without cropping */
        border-radius: 8px;
        display: block !important;
    }
}

/* ==========================================================================
   3. DESKTOP CONFIGURATION (1 Image view, Overlay Left/Right Arrows)
   ========================================================================== */
@media (min-width: 768px) {
    /* Container wrapper to pull arrows over the gallery layer */
    .carousel-arrows-container {
        position: relative;
        width: 100%;
        max-width: 550px; /* Locks arrow track boundary to the desktop image width */
        margin: 0 auto;
        pointer-events: none; /* Allows scrolling underneath invisible spaces */
        z-index: 10;
    }

    /* Base styles for Arrow Buttons */
    .carousel-arrow {
        position: absolute;
        top: calc(35vh + 20px); /* Centers vertically based on the 70vh image height */
        transform: translateY(-50%);
        pointer-events: auto; /* Re-enables clicking on the actual buttons */
        background: rgba(255, 255, 255, 0.9) !important;
        color: #333333 !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        font-size: 32px !important;
        line-height: 1 !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
        padding: 0 0 6px 0 !important; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    }

    /* Pulls the buttons to hug the borders of the max-width image area */
    .prev-arrow { left: 10px; }
    .next-arrow { right: 10px; }

    .carousel-arrow:hover {
        background: #333333 !important;
        color: #ffffff !important;
        border-color: #333333 !important;
    }

    /* Force exactly ONE image frame visible on desktop */
    .wp-block-gallery.pure-css-carousel .wp-block-image,
    .wp-block-gallery.pure-css-carousel figure.wp-block-image,
    .wp-block-gallery.pure-css-carousel li.blocks-gallery-item {
        display: block !important;
        flex: 0 0 100% !important; 
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding-right: 0 !important; 
        margin: 0 !important;
        scroll-snap-align: start !important;
        box-sizing: border-box !important;
    }

    .wp-block-gallery.pure-css-carousel .wp-block-image img {
        width: 100% !important;
        max-width: 550px !important; /* Locks image to the exact same width boundary as the arrows */
        height: 70vh !important; /* Limits image height to 70% of monitor height */
        object-fit: contain !important; 
        border-radius: 8px;
        display: block !important;
        margin: 0 auto !important; 
    }
}