/*
 Theme Name: Twenty Twenty-Two Child
 Template: twentytwentytwo
*/

/* Target TT2 header template-part and give it height */
body > .wp-site-blocks > header,
header.wp-block-template-part,
header.wp-block-template-part > .wp-block-group,
header.wp-block-template-part .wp-block-group.alignfull {
  min-height: 220px;                 /* makes banner visible */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  animation: banner-rotate 60s infinite;
  transition: background-image 1.5s ease-in-out;
}
@keyframes banner-rotate {
  0%, 18%   { background-image: url('./images/banner1.jpeg'); }
  20%, 38%  { background-image: url('./images/banner2.jpeg'); }
  40%, 58%  { background-image: url('./images/banner3.jpeg'); }
  60%, 78%  { background-image: url('./images/banner4.jpeg'); }
  80%, 98%  { background-image: url('./images/banner5.jpeg'); }
  100%      { background-image: url('./images/banner1.jpeg'); }
}

/* Dark overlay over banner for readability */
body > .wp-site-blocks > header,
header.wp-block-template-part {
  position: relative;
}

body > .wp-site-blocks > header::before,
header.wp-block-template-part::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);  /* adjust 0.3–0.6 */
  pointer-events: none;
  z-index: 0;
}

/* Ensure header content stays above overlay */
body > .wp-site-blocks > header > *,
header.wp-block-template-part > * {
  position: relative;
  z-index: 1;
}


/* Background behind the menu container */
.wp-block-navigation,
.wp-block-navigation__container {
  background: rgba(255,255,255,0.15);  /* white glass */
  border-radius: 999px;
  backdrop-filter: blur(4px)
  padding: 6px 14px;
  backdrop-filter: blur(4px);
}

/* Optional: make menu text darker */
.wp-block-navigation a {
  color: #111 !important;
  font-weight: 600;
}

/* Remove excess white space under header */
.wp-site-blocks > header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

header.wp-block-template-part {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove gap on first group after header */
.wp-site-blocks > header + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}