/* ===== Base ===== */
:root{
  --green:#2e8b57;
  --green-dark:#257248;
  --text:#333;
  --bg:#f7f7f8;
  --footer:#1f1f1f;
  --ring:#2e8b57;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

/* ===== Header ===== */
.site-header{
  display:grid;
  grid-template-columns: 140px 1fr auto;
  align-items:center;
  gap:1rem;
  background:var(--green);
  color:#fff;
  padding:18px clamp(16px, 4vw, 32px);
}

.logo{
  width:120px;
  height:auto;
  display:block;
  border-radius:10px;          /* subtle rounding */
  object-fit:contain;
  background:transparent;
}

.head-center{
  text-align:center;
  padding:0 .5rem;
}

.head-center h1{
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  margin:0 0 .25rem 0;
  font-weight:800;
}

.tagline{
  margin:0;
  font-weight:500;
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  opacity:.95;
}

.head-right{
  text-align:right;
  font-style:normal;
  font-size:.95rem;
  line-height:1.3;
}
.head-right a{
  color:#fff;
  text-decoration:none;
}
.head-right a:hover{ text-decoration:underline; }

/* Stack on small screens */
@media (max-width: 820px){
  .site-header{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .head-left{ justify-self:center; }
  .head-right{ text-align:center; margin-top:.25rem; }
}

/* ===== Flyers section ===== */
.flyers{
  text-align:center;
  padding:48px 16px 28px;
}
.flyers h2{
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  margin:0 0 18px;
}
.flyer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
  justify-content:center;
}
.button{
  display:inline-block;
  padding:12px 22px;
  border:2px solid var(--ring);
  color:var(--ring);
  text-decoration:none;
  font-weight:700;
  border-radius:999px;
  min-width:220px;
  transition:.2s ease;
}
.button:hover{
  background:var(--green);
  color:#fff;
  transform: translateY(-1px);
}

/* ===== Flyer pages (flyer1.html, etc.) ===== */
.top-nav{
  background:var(--green);
  color:#fff;
  padding:12px 10px;
  text-align:center;
}
.top-nav a{
  color:#fff;
  text-decoration:none;
  margin:0 .6rem;
  font-weight:700;
}
.top-nav a:hover{ text-decoration:underline; }

.flyer-page{
  text-align:center;
  padding:32px 16px 48px;
}
.flyer-page h2{
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  margin:0 0 18px;
}
.flyer-img{
  max-width: 100%;
  width: min(1000px, 92vw);
  height:auto;
  border:2px solid #ddd;
  border-radius:12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* ===== Footer ===== */
.site-footer{
  background:var(--footer);
  color:#e9e9e9;
  padding:22px 16px;
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:16px;
  align-items:center;
}
.social h3{
  font-size:1rem;
  margin:.1rem 0 .4rem 0;
  color:#fff;
}
.social ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.social a{
  color:#aee7c6;
  text-decoration:none;
}
.social a:hover{ text-decoration:underline; }

@media (max-width:700px){
  .footer-inner{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .social{ justify-self:center; }
}