/* ------------------ Fonts ------------------ */
@font-face {
  font-family: "Amsterdam One";
  src: url("/static/fonts/AmsterdamThreeSlant-axaym.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


/* ------------------ Colors ------------------ */
:root {
  --brand-primary: #afc08f;    /* header green */
  --brand-secondary: #fce7a3;  /* categories & footer yellow */
  --brand-bg: #f3eff9;         /* page background */
}

/* ------------------ Global Styles ------------------ */
body {
  overflow-x: hidden;
  background-color: var(--brand-bg);
  margin: 0;
  padding: 0;
}

h2 {
  margin: 20px 0;
  padding: 10px 0;
}

/* ------------------ Header ------------------ */
.navbar-bg-header {
  background-color: var(--brand-primary);
  padding: 0.5rem 0;
}

/* ------------------ Categories & Footer ------------------ */
.categories-bg-header,
.simple-bg-footer {
  background-color: var(--brand-secondary);
}

/* ------------------ Utility ------------------ */
img {
  max-width: 100%;
  height: auto;
}

/* ------------------ Animation ------------------ */
.logo {
  width: 200px;
  height: 200px;
  background: url("/static/images/logo_sprite.png") no-repeat;
  background-size: 3000px 200px; /* 14 frames × 200px wide each */
}

/* center the logo animation inside this specific link */
.logo-link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* match logo height */
  width: 100%;   /* optional to fill parent column */
}

.logo-link .logo {
  display: block;   /* ensures it respects centering */
}

/* animate only if the class "animate" is present */
.logo.animate {
  animation: logo-frames 3s steps(14) forwards;
}

@keyframes logo-frames {
  from { background-position: 0 0; }
  to   { background-position: -2800px 0; }
}

/* ------------------ Hero images ------------------ */
.hero-full {
    width: 100vw;
    max-width: none;        /* <--- ADD THIS to override the utility style */
    height: 400px;          /* Changed from max-height to height for consistency */
    object-fit: cover;
    display: block;


    /* The Breakout Logic */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* A cleaner way to center 100vw */

    margin-top: -16px;
}

/* Hide hero below 650px width */
@media (max-width: 650px) {
    .hero-full {
        display: none;
    }
}

.full-bleed-left {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -30vw;
  margin-right: auto;
  width: 40vw;
  max-width: none;
}