/* =============================================================
   1. VERTICAL HEADER LAYOUT, NAVIGATION & BUTTONS (<= 767px)
   ============================================================= */
@media (max-width: 767px) {
  /* Tighten header padding and strip bottom margin */
  .wp-block-navigation,
  header,
  .site-header,
  .wp-block-template-part,
  .wp-site-blocks > header,
  .wp-block-group.has-background {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding-top: 10px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 5px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    position: relative !important; /* Reference for absolute scroll icon */
  }

  /* FORCE LOGO & TOP IMAGE TO CENTER REGARDLESS OF CONTAINER */
  header img,
  .site-header img,
  .wp-site-blocks > header img,
  .wp-block-site-logo,
  .wp-block-site-logo img,
  .custom-logo-link,
  .custom-logo-link img,
  .wp-block-image:first-of-type,
  .wp-block-image:first-of-type img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    float: none !important;
    text-align: center !important;
    margin-bottom: 0px !important;
  }

  /* HIDE THE HAMBURGER MENU TOGGLE BUTTON ENTIRELY */
  .wp-block-navigation-toggle,
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  /* Ensure Navigation Links (ABOUT, CONTACT) show clearly on mobile */
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: flex !important;
    position: static !important;
    background: transparent !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: -30px !important;
  }

  .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  /* Navigation Links (ABOUT, CONTACT) Font Size */
  .wp-block-navigation-item,
  .wp-block-navigation-item__content,
  .wp-block-navigation-link,
  .wp-block-navigation-link a,
  .wp-block-navigation-item a span {
    font-size: 1.25rem !important;
    font-weight: bold !important;
    line-height: 1.25 !important;
  }

  /* Stack buttons vertically */
  .wp-block-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  /* Button Text Size & Padding */
  .wp-block-buttons .wp-block-button,
  .wp-block-buttons .wp-block-button__link,
  .wp-block-button a,
  .wp-block-button__link span {
    font-size: 1.05rem !important;
    font-weight: bold !important;
    padding: 8px 16px !important;
    min-width: 145px !important;
    text-align: center !important;
    display: inline-block !important;
  }

  /* POSITION SCROLL GRAPHIC IN THE RIGHT-HAND GAP */
  .scroll-icon-mobile,
  .wp-block-image.scroll-icon-mobile,
  .scroll-icon-mobile img {
    position: absolute !important;
    right: 0% !important;
    bottom: 5px !important;
    max-width: 320px !important;
    width: 66% !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
  }
}

/* =============================================================
   2. RE-CENTER & STRETCH GALLERY FULL-WIDTH ON MOBILE (<= 767px)
   ============================================================= */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  main,
  .wp-site-blocks,
  .entry-content,
  .wp-block-post-content,
  .wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }

  .tiled-gallery,
  .wp-block-jetpack-tiled-gallery,
  .wp-block-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
  }

  .tiled-gallery-row,
  .tiled-gallery-item,
  .wp-block-jetpack-tiled-gallery .tiled-gallery-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 10px auto !important;
  }

  .tiled-gallery-item img,
  .wp-block-jetpack-tiled-gallery img,
  .wp-block-gallery img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* =============================================================
   3. DESKTOP & TABLET / IPAD DISPLAY TOGGLES
   ============================================================= */

/* TABLET & DESKTOP (>= 768px): Show actual splashboard, hide mobile image */
@media screen and (min-width: 768px) {
  .splash-mobile-only,
  div.splash-mobile-only,
  .wp-block-image.splash-mobile-only {
    display: none !important;
  }
  .splash-desktop-only,
  div.splash-desktop-only,
  .wp-block-columns.splash-desktop-only,
  .wp-block-group.splash-desktop-only {
    display: flex !important; /* Preserves flex/column layout on desktop */
  }
}

/* MOBILE PHONES ONLY (<= 767px): Show mobile image, hide actual splashboard */
@media screen and (max-width: 767px) {
  .splash-mobile-only,
  div.splash-mobile-only,
  .wp-block-image.splash-mobile-only,
  .wp-block-image.splash-mobile-only img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-top: -15px !important; /* Pulls splash image up flush with header */
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }

  /* Comprehensive override to force hide desktop splash and all child elements on mobile */
  .splash-desktop-only,
  div.splash-desktop-only,
  .wp-block-columns.splash-desktop-only,
  .wp-block-column.splash-desktop-only,
  .wp-block-group.splash-desktop-only,
  .splash-desktop-only * {
    display: none !important;
  }

  /* PUSH THE HEADING DOWN AWAY FROM THE SPLASH IMAGE ON MOBILE */
  main h1,
  main h2,
  main h3,
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .wp-block-heading {
    margin-top: 45px !important;
    margin-bottom: 20px !important;
    padding-top: 10px !important;
    clear: both !important;
  }

  /* Force Parent Row Container to stack children on mobile */
  .wp-block-row,
  .wp-block-group.is-layout-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }
}

/* =============================================================
   4. BUTTON STYLING & MEDIA BORDERS
   ============================================================= */

/* COMPACT GRADIENT BUTTON OVERRIDE */
.compact-gradient-btn {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  padding-left: 36px !important;
  padding-right: 36px !important;
  font-size: 1.35rem !important;
  width: fit-content !important;
  min-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* THICK BLACK BORDER FOR VIMEO EMBEDS ONLY */
.wp-block-embed-vimeo iframe,
.wp-block-embed-vimeo .wp-block-embed__wrapper {
  border: 4px solid #000000 !important;
  border-radius: 8px;
  box-sizing: border-box;
}