html, body { height: 100%; }

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

/* Main grows to fill the space between header and footer */
main#main { flex: 1 0 auto; }

/* Footer is pushed to the bottom by the flex layout */
footer#footer {
  margin-top: auto;
  position: static !important;   /* override any global fixed/absolute */
  width: 100%;
}

/* --- Make the footer more compact (height smaller) --- */
#footer .footer-top {            /* trims the tall top area */
  padding-top: 16px !important;  /* was ~50–60px in many templates */
  padding-bottom: 16px !important;
}
#footer .footer-bottom {         /* trims the bottom bar */
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
#footer .footer-newsletter input[type="email"] {
  height: 38px;
  line-height: 38px;
}
#footer .footer-newsletter input[type="submit"] {
  height: 40px;
  line-height: 40px;
}

/* --- Ensure page content starts below the fixed header --- */
/* Adjust this to match your header height */
.header-spacer { height: 92px; } /* tweak if your header is taller/shorter */

#header { background: #f8f9fa; border-bottom: 1px solid rgba(0,0,0,.06); }
#header .container { padding-top: 16px; padding-bottom: 16px; }


/* Navbar floating animation */
@keyframes navbarFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(8px); }   /* how far it swings down */
  100% { transform: translateY(0); }
}

/* Apply the animation to your header or navbar */
#header {
  animation: navbarFloat 3s ease-in-out infinite;
}

/* Add space between navbar and first section (image or heading) */
.soccer-page main img:first-of-type {
  margin-top: 3rem;  /* adjust to 2rem or 4rem if you want */
}