/* ===========================================================
   Philippine Flag Header (Final – Clear and Elegant)
   =========================================================== */

header.sticky-header {
  position: fixed;
  top: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  z-index: 1000;
  border-bottom: 3px solid #CE1126;
  background-color: #0038A8; /* fallback color */
  background-image: url("philippine-flag.png");
  background-size: 120% auto; /* ensures triangle & sun stay visible */
  background-position: left center; /* always aligns sun on left */
  background-repeat: no-repeat;
  background-attachment: scroll;
  opacity: 0.85; /* slightly stronger visibility */
  filter: brightness(1.05) contrast(1.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Overlay tint (so text still readable but flag remains visible) */
header.sticky-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 56, 168, 0.15); /* light transparency */
  z-index: 1;
}

/* Header content sits above overlay */
.header-content {
  position: relative;
  z-index: 2;
  padding: 24px 20px 32px;
}


/* Text styling */
.header-content h1 {
  color: #ffffff;
  font-weight: 700;
  font-size: 2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.6px;
}

.header-content .tagline {
  color: #f8f8f8;
  font-size: 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  margin-top: 6px;
}

/* Soft "flag fabric" motion */
@keyframes silkMotion {
  0% { background-position: left center; }
  100% { background-position: left 5%; }
}

header.sticky-header {
  background-size: 120% auto;
  animation: silkMotion 90s linear infinite;
}