/*
 Theme Name: twentytwentyfour-child
 Theme URI: https://checkout.withoutsanctuary.com
 Description: Child theme for Twenty Twenty-Four (Without Sanctuary)
 Author: John Littlefield
 Template: twentytwentyfour
 Version: 1.0.0
*/
/* --- THE NEW RED HEADER (Natural Flow) --- */
/* --- 1. THE RED HEADER (Sticky Globally) --- */
.ws-sticky-header {
    position: fixed !important; /* Pinned to the top while scrolling */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background-color: rgba(112, 0, 0, 0.95) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 0; /* Slightly tighter for better mobile space */
    display: flex !important;
}

/* --- 2. GLOBAL PAGE ADJUSTMENTS --- */
/* Kill the desktop gap by resetting the html/body */
html, body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Push regular pages down so they don't hide UNDER the fixed header */
body:not(.page-id-3229) .wp-site-blocks,
body:not(.page-id-3229) .entry-content {
    padding-top: 80px !important; /* Changed from margin to padding to fix gaps */
}

/* Extra push for WooCommerce Breadcrumbs */
.woocommerce-breadcrumb {
    padding-top: 20px !important;
    margin-bottom: 20px !important;
}
/* Specific WooCommerce Breadcrumb spacing */
.woocommerce-breadcrumb {
    padding-top: 10px !important;
    margin-bottom: 20px !important;
}

/* --- 3. STORY PAGE (85vh Logic) --- */
/* No margin here because the 85vh Cover handles the space */
body.page-id-3229 .wp-site-blocks,
body.page-id-3229 .ws-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Section Targeting for the 85vh effect */
.wp-block-cover, .wp-block-group.is-full-height {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 85vh !important;
    min-height: 85dvh !important; /* Crucial for real mobile viewport */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: center !important;    
}

/* ========== NAV BUTTONS: BASE (ALL VIEWPORTS) ========== */
/* Let WP decide overall placement; just stack nav buttons by default. */

 .wp-accordion .wp-block-button__link:not([href]) {
  display: none;
  } 

  /* ======================================================= */
/* ========== LOCAL GRID AROUND PAGE CONTENT ============= */
/* Wrap ONLY the main page content in .ws-wrapper (header/footer stay in theme).
   Desktop: 3 areas → nav | image | caption/body
   Portrait ≤500px: 2 columns → narrow nav | right column with image & caption stacked
   ======================================================= */

.ws-wrapper {
  max-width: 980px;
  margin: 0 auto;

  display: grid;
  /* nav | image | caption/body */
  grid-template-columns: 150px repeat(2, 1fr);  
  column-gap: 1rem;

  /* 3 grid cells total, set in wordpress */
  grid-template-areas:
    "ws-left ws-cap ws-img"
    "ws-left ws-cap ws-img";
}

/* 1. Reset the layout to allow full-screen sections */
.wp-site-blocks, .entry-content {
    max-width: none !important;
    padding: 0 !important;
}

.ws-custom-title {
    text-transform: uppercase !important;
    letter-spacing: 5px !important;
    font-weight: bold !important;
    margin-right: 10px; 
    display: inline-block; /* Keeps the spacing consistent */
}

/* 2. The Navigation Buttons (The "Floating" Layer) */
.ws-sticky-nav-buttons {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    width: 90% !important;
    max-width: 1000px !important;
    /* This ensures they don't scroll away */
    pointer-events: all !important; 
}

/* 3. The Continuous Scroll Snap */
html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

/* 4. Targeting your sections (Groups/Covers) */
.wp-block-cover, .wp-block-group.is-full-height {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Vertically Centers Content */
    align-items: center !important;    /* Horizontally Centers Content */
}
/* Left column: nav buttons */
.ws-grid-left {
  grid-area: ws-left;
}

/* Right-top: main image */
.ws-grid-image {
  grid-area: ws-img;
    .wp-block-buttons .wp-block-button__link {
      width: 5rem;              /* make image button fill the main content column */
      height: 3rem;            /* maintain aspect ratio */
    }
    .ws-nav-buttons {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      column-gap: 0.5rem;
    }
    /* Hide any Button block whose link has no href attribute */
    .wp-block-button__link:not([href]) {
      display: none;
    }
    /* Hide BOOK AVAILABLE button on last section-99 */
    .wp-block-button__link[href="https://checkout.withoutsanctuary.com/#section-99"] {
      display: none;
}

}

/* Right-bottom: caption/body text */
.ws-grid-caption {
  grid-area: ws-cap;
}

/* PORTRAIT MOBILE (≤ 500px) */
/* Two columns: narrow nav + right column with image & caption stacked */

@media only screen and (max-width: 500px) {
  .ws-wrapper {
    display: grid;
    grid-template-columns: 30px repeat(2, 1fr);   /* narrow nav | main content */
    column-gap: 0.5rem;

    grid-template-areas:
      "ws-left ws-img ws-img"
      "ws-left ws-cap ws-cap";
  }

  .ws-grid-left {
    grid-area: ws-left;
  }

  .ws-grid-image {
    grid-area: ws-img;
  
    .wp-block-buttons .wp-block-button__link {
      width: 5rem;              /* make image button fill the main content column */
      height: 3rem;            /* maintain aspect ratio */
    }
  }
  .ws-grid-caption {
    grid-area: ws-cap;
  }
  /* Only affect the nav Group’s button block, not all buttons site‑wide */
  .ws-nav-buttons .wp-block-buttons {
    display: flex;
    flex-direction: column;     /* stack buttons vertically */
    align-items: flex-start;    /* align to left edge of nav column */
    column-gap: 0.5rem;                /* spacing between buttons */
  }

  .ws-nav-buttons .wp-block-buttons .wp-block-button {
    margin: 0;                  /* remove random margins between buttons */
  }
  
  .ws-nav-buttons.wp-block-buttons .wp-block-button__link {
    display: inline-flex;
    justify-content: center;
    align-items: left;

    width: 8rem;               /* “square-ish”: equal width and height */
    height: 8rem;
    padding: 0;                 /* keep the square shape tight */

    transform-origin: center center;
    transform: rotate(-90deg);  /* rotate text -90deg */
  }
}