/* Account masthead - darker version of primary green */
.account-masthead {
    background: #224213; /* darkened from #2A5315 */
    color: #fff; /* keep white text for contrast */
}

/* Masthead - use primary green */
.masthead {
    background: #2B5516; /* darkened from #34681A */
    color: #fff;
}

.masthead .navigation .nav-pills li.active a {
    background-color: rgb(74, 74, 74);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

.main {
    flex: 1;
    background: linear-gradient(
        135deg,
        #ffffff 0%,   /* bright white highlight */
        #b5b5b5 25%,  /* medium-dark grey */
        #fdfdfd 50%,  /* near-white */
        #9e9e9e 75%,  /* dark grey */
        #ffffff 100%  /* bright white again */
    );
    background-size: 500% 500%;
    animation: metallicShimmer 25s ease-in-out infinite;
    color: #222;
    padding: 20px 0;
}
/* Animated metallic gradient - high contrast */
.homepage .hero {
    background: linear-gradient(
        135deg,
        #ffffff 0%,   /* bright white highlight */
        #b5b5b5 25%,  /* medium-dark grey */
        #fdfdfd 50%,  /* near-white */
        #9e9e9e 75%,  /* dark grey */
        #ffffff 100%  /* bright white again */
    );
    background-size: 500% 500%;
    animation: metallicShimmer 25s ease-in-out infinite;
    color: #222;
    padding: 20px 0;

    min-height: 52vh;
    max-height: 70vh; /* This prevents footer from being pushed off-screen */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@keyframes metallicShimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.homepage .module-promotion {
    background: #fff;
    padding: 15px;
    color: #224213;
}

.masthead .main-navbar ul li:hover a, .masthead .main-navbar ul li:focus a, .masthead .main-navbar ul li.active a {
    border-radius: 0.3rem;
    background-color: #426670;
}
  
  

/* Site footer - same primary green as masthead */
.site-footer {
    background: #2B5516; /* darkened from #34681A */
    color: #fff;
}

/* Media grid & module grid - light background without the image */
.media-grid, .module-grid {
    background-color: #fbfbfb;
    background-image: none;
    border: 1px solid #ddd;
    border-width: 1px 0;
}

.homepage .module-feeds {
    background-color: #f4f4f4; /* light grey base */
    background-image: linear-gradient(135deg, #f4f4f4 0%, #e6e6e6 100%); /* slight gradient for metallic feel */
    color: #222; /* darker text for readability */
}

.homepage .module-search .module-content {
    border-radius: 0.25rem;
    background-color: #2B5516; /* darkened from #34681A */
    padding: 30px 20px;
}

.homepage .module-search .tags {
    border-radius: 0.25rem;
    background-color: #2B5516; /* darkened from #34681A */
}

/* Option 2: Subtle pulsing - like data breathing */
.logo-picto-pulse {
    animation: dataPulse 3s ease-in-out infinite;
  }
  
  @keyframes dataPulse {
    0%, 100% { 
      transform: scale(1); 
      opacity: 1; 
    }
    50% { 
      transform: scale(1.05); 
      opacity: 0.9; 
    }
  }
  
  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .logo-picto-squash,
    .logo-picto-shred-intense,
    .logo-picto-squash-subtle,
    .logo-picto-data-glitch {
      animation: none;
    }
  }