/* =========================
   HOME EXPANDED HEADER
========================= */
body.home header.wp-block-template-part {
  position: fixed;
  left: 0 !important;
  right: 0 !important;
  --ext-header-height: 20px !important;
  height: var(--ext-header-height) !important;
  transition: height 0.2s ease, padding 0.2s ease;
  z-index: 999;
}


/* Expanded state (before scroll) */
body.home header.wp-block-template-part.is-expanded {
  --ext-header-height: 20vh !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
/* Mess with this
  background-color: rgba(255, 255, 255, 0.295);
  color: rgba(255, 73, 225, 0.774); 
*/

  padding: 40px 20px;
  transition: all 0.2s ease;
  
}

/* Site title */
body.home header.wp-block-template-part.is-expanded .wp-block-site-title {
  font-size: 4rem !important;
  margin: 0;
  text-align: center;
}

/* Navigation under title */
body.home header.wp-block-template-part.is-expanded .header-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
}

/* Site Title Fade in 
body.home header.wp-block-template-part.is-expanded .wp-block-site-title {
  opacity: 0;
}

body.home header.wp-block-template-part.is-expanded .wp-block-site-title.is-visible {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* Injection Targetting Check */
/* body.home header.wp-block-template-part.is-expanded nav {
  background:red;
} */

/* IMPORTANT: make nav items center horizontally --- Might be useless */
/* body.home header.wp-block-template-part.is-expanded nav ul {
  display: flex;
  justify-content: center;
  gap: 50px;
} */

/* =========================
   COLLAPSED STATE (after scroll)
   revert to theme default
========================= */

/* body.home header.wp-block-template-part.is-collapsed {
  height: auto !important;
  padding: var(--wp--preset--spacing--40, 20px);
  transition: all 0.4s ease;
}

/* optional: remove centering when collapsed 
body.home header.wp-block-template-part.is-collapsed {
  display: block;
}