/* ==================================================
   GLOBAL RESET & BACKGROUND
   ================================================== */
html, body {
  width: 100%;
  max-width: 100%;
	margin: 0;
  padding: 0;
}

body {
    background-color: #F5F1E8;
}

/* ==================================================
   HEADER
   ================================================== */
.site-header {
    margin-bottom: 0;
    padding-bottom: 0;
	  position: sticky;
    top: 0;
    z-index: 1000;
}
/* ==================================================
   FULL-WIDTH GUTENBERG COVER BLOCKS
   ================================================== */
.wp-block-cover.alignfull {
    width: 100%;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
	  overflow-x: hidden;
}
/* ==================================================
   FADE-IN ANIMATIONS
   ================================================== */
@keyframes fadeInCover {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-cover,
.fade-home-cover {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInCover 1.5s ease-out forwards;
}

.fade-home-cover {
    background-size: cover;
    background-position: center;
}

.fade-home-cover .wp-block-cover__inner-container {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInCover 1.5s ease-out forwards;
    animation-delay: 0.3s;
}

/* ==================================================
   RESPONSIVE HELPERS
   ================================================== */
@media (max-width: 768px) { 
    .hide-mobile { display: none; } 
}

@media (min-width: 769px) { 
    .hide-desktop { display: none; } 
}


			/* ensures no vertical gap *//* ==================================================
   HOMEPAGE COVER WITH FADE-IN
   ================================================== */
.home .wp-block-cover.alignfull {
    background-attachment: fixed; /* keeps background fixed while scrolling */
    background-size: cover;        /* cover entire block */
    background-position: center;   /* center the image */
    opacity: 0;                    /* start invisible */
    transform: translateY(20px);   /* optional slide-up effect */
    animation: fadeInCover 1.5s ease-out forwards; /* fade-in animation */
}

/* Fade-in animation keyframes */
@keyframes fadeInCover {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optional: fade-in the content inside the cover */
.home .wp-block-cover.alignfull .wp-block-cover__inner-container {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInText 1.5s ease-out forwards;
    animation-delay: 0.3s; /* small delay after background fades in */
}

@keyframes fadeInText {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -------------------------
  Scroll Fade & Slide Effects
------------------------- */
.scroll-fade,
.scroll-left,
.scroll-right {
  opacity: 0;
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  transition-delay: var(--delay, 0s);
}

/* Fade-in from bottom */
.scroll-fade.visible {
  opacity: 1;
  transform: translateY(0);
}
.scroll-fade {
  transform: translateY(30px);
}

/* Slide-in from left */
.scroll-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.scroll-left {
  transform: translateX(-50px);
}

/* Slide-in from right */
.scroll-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.scroll-right {
  transform: translateX(50px);
}

/* -------------------------
  Parallax Background
------------------------- */
.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* Optional: smoother text appearance */
.scroll-text {
  transition: opacity 2s ease-out, transform 2s ease-out;
}

.welcome-panel {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 3rem 3rem;
    max-width: 1200px;
    margin: -80px auto 4rem;
    box-shadow: 0 20px 50px rgba(15, 39, 71, 0.12);
    position: relative;
    z-index: 2;
}
.news-panel {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 3rem 3rem;
    max-width: 800px;
    margin: -80px auto 4rem;
    box-shadow: 0 20px 50px rgba(15, 39, 71, 0.12);
    position: relative;
    z-index: 2;
}
/* Base state */
.stagger-fade > .wp-block-column {
  opacity: 0;
  transform: translateY(40px);
  transition: 
    opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When visible */
.stagger-fade.animate > .wp-block-column {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.stagger-fade.animate > .wp-block-column:nth-child(1) {
  transition-delay: 0s;
}
.stagger-fade.animate > .wp-block-column:nth-child(2) {
  transition-delay: 0.3s;
}
.stagger-fade.animate > .wp-block-column:nth-child(3) {
  transition-delay: 0.6s;
}
.stagger-fade.animate > .wp-block-column:nth-child(4) {
  transition-delay: 0.9s;
  transition: opacity 2s ease-out, transform 2s ease-out;
}