/* === Base Layout, Typography & Background === */
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
  background-image: url("../assets/images/graph.png");
  background-repeat: repeat;
  background-size: auto;
  color: #333;
  text-align: center;

  /* Layout foundation */
  min-height: 100vh;            /* body always at least viewport height */
  display: flex;
  flex-direction: column;
}

/* Landing page uses same flex rules */
body.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* === Header (Red Banner) === */
.site-header {
  background-color: #a62639;
  color: white;
  text-align: center;
  padding: 1rem 0;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* STATIC 40% HEADER — predictable, stable */
.site-header.hero {
  height: 40vh;                 /* static 40% header */
  flex-shrink: 0;               /* do NOT allow shrinking */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;    /* logo sits at bottom of red area */
}

/* === Logo Sizing === */
.site-logo {
  width: auto;
  height: auto;                 /* natural scaling */
  max-height: 34vh;             /* never exceed header */
  object-fit: contain;
}

/* === Logo Block === */
.logo-block {
  text-align: center;
}

.logo-text {
  font-size: 1.2rem;
  margin-top: 0.5rem;
  color: #fff;
}

/* === Content Wrapper === */
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1;                      /* fills remaining space */
  padding: 2rem;
}

/* Landing page spacing */
.landing .content-wrapper {
  margin-top: 0;
}

/* === Footer (Anchored) === */
.landing-footer {
  margin-top: auto;             /* anchors footer */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;                 /* clean spacing */
  padding-bottom: 1rem;
  text-align: center;
}

/* === Workshop Grid === */
.workshop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.workshop-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

.workshop-item h2 {
  margin-top: 0.5rem;
  text-align: center;
}

/* === Tagline === */
.tagline {
  font-style: italic;
  margin: 0.5rem 0;
  font-size: 1.2rem;
}

/* === Entry Link ("Come On In") === */
.entry-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  color: #a62639;
  text-decoration: none;
  border: 2px solid #a62639;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.entry-link:hover {
  background-color: #a62639;
  color: white;
  box-shadow: 0 0 10px #a62639;
}

/* === Featured Image === */
.featured-image {
  display: block;
  margin: 0 auto;
}

/* REMOVE absolute bottom-group — breaks layout */
.bottom-group {
  /* removed */
}

/* === Footer === */
footer {
  margin-top: 0.75rem;
  padding: .5rem;
  font-size: 0.9rem;
  color: #777;
}

footer .vob-badge {
  width: 120px;
}