@font-face {
    font-family: 'Gill Sans';
    src: url('fonts/GillSans.woff2') format('woff2'),
        url('fonts/GillSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('fonts/GillSans-Bold.woff2') format('woff2'),
        url('fonts/GillSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Gill Sans';
    src: url('fonts/GillSans-Light.woff2') format('woff2'),
        url('fonts/GillSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

* {
    box-sizing: border-box;
}
body {
    padding: 0px;
    margin: 0px;
    font-family: 'Gill Sans', sans-serif;
}

.header-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 677px;
    background-image: url('fairfax-meadow-header.webp');
    background-position: bottom right;
    background-size: cover; /* optional, ensures the image fills the area */
    border-bottom: 10px solid #4b721d;
}
.header-yellow-bar {
    width: 100%;
    display: flex;
    height: 10px;
    background-color: rgba(234, 207, 0, 0.75); /* 75% opacity */
}
.conent-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.main-cont {
    width: 100%;
    display: flex;
    flex-direction: column;
    max-width: 1024px;
    padding: 90px 20px;
}
.main-cont > h1 {
    font-size: 50px;
    font-weight: bold;
    font-family: 'Gill Sans', sans-serif;
    color: #003020;
    margin: 0px;
}
.date-wrapper {
    display: flex;
    justify-content: left;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}
.date-box {
    display: flex;
    width: auto;
    background-color: #EACF00;
    padding: 10px 20px;
    border-radius: 0px 15px 15px 0px;
    font-family: 'Gill Sans', sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: #003020;
}
.two-column {
  display: flex;
  width: 100%;
  column-gap: 40px;
  row-gap: 20px;
  padding-bottom: 20px;
}

.column {
  flex: 1; /* makes both columns equal width */
  font-family: 'Gill Sans', sans-serif;
  font-weight: 300;
  font-size: 22px;
  color: #003020;
}

:root{
  --pad: 40px;
  --green: #003020;
  --yellow: #EACF00;
  --radius: 15px;
  --maxw: 620px;
}

.announcement{
  background: var(--green);
  color: #fff;
  border-radius: 0px 0px 15px 15px;
  overflow: hidden;              /* ensures rounded top corners are clean */
  width: 100%;
  border-top: 10px solid #EACF00;
}

/* Yellow 10px bar that respects the rounded corners */


.announcement__inner{
  padding: var(--pad);
  font-family: 'Gill Sans', sans-serif;
}

/* Title pill: white, green text, flush left, right corners rounded */
.announcement__title{
  display: inline-block;
  margin: 0 0 20px;
  margin-left: calc(-1 * var(--pad)); /* push to the container's left edge */
  padding: 14px 22px 12px var(--pad); /* keep left text aligned with body */
  background: #ffffff;
  color: var(--green);
  font-family: 'Gill Sans', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  margin-top: 20px;
  width: 100%;
  max-width: 675px;
  border-radius: 0 var(--radius) var(--radius) 0; /* round right side only */
}

.announcement__body{
  font-family: 'Gill Sans', sans-serif;
  font-weight: 300;   /* Light */
  font-size: 22px;
  line-height: 1.6;
}

.announcement__body p{
  margin: 0 0 18px;
}

/* Centered container, with 40px space from content above */
.contact-box{
  width: 100%;
  max-width: var(--maxw);
  margin: 40px auto 0;   /* centers horizontally */
  padding: 0;
}

/* Intro: Gill Sans Light 28px */
.contact-box__intro{
  margin: 0 0 16px;
  font-family: 'Gill Sans', sans-serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.3;
  color: var(--green);
}

/* Two columns */
.contact-box__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* force 2 columns */
  gap: 16px 24px;
  align-items: center;
}

/* Contact rows */
.contact-item{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Use the icon image directly (no extra yellow background) */
.contact-icon{
  width: 36px;
  height: 36px;
  display: block;
}

/* Link text: Gill Sans Regular 26px, green */
.contact-text{
  font-family: 'Gill Sans', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--green);
}

@media(max-width: 1024px){
    .header-wrapper {
    height: 350px;
    }
    .main-cont {
    max-width: 100%;
    }
}
@media(max-width: 767px){
    .two-column {
    display: flex;
    width: 100%;
    column-gap: 40px;
    row-gap: 0px;
    padding-bottom: 20px;
    flex-direction: column;
    }
    .contact-box__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px 24px;
    align-items: center;
    }
    .main-cont > h1 {
    font-size: 30px;
    font-weight: bold;
    font-family: 'Gill Sans', sans-serif;
    color: #003020;
    margin: 0px;
    }
    .announcement__title {
    display: inline-block;
    margin: 0 0 20px;
    margin-left: calc(-1 * var(--pad));
    padding: 14px 22px 12px var(--pad);
    background: #ffffff;
    color: var(--green);
    font-family: 'Gill Sans', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    margin-top: 20px;
    width: 100%;
    max-width: 675px;
    border-radius: 0 var(--radius) var(--radius) 0;
    }
    .column {
    flex: 1;
    font-family: 'Gill Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #003020;
    }
    .announcement__body {
    font-family: 'Gill Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.6;
    }
    .contact-box__intro {
    margin: 0 0 16px;
    font-family: 'Gill Sans', sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.3;
    color: var(--green);
    }
    .contact-text {
    font-family: 'Gill Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: var(--green);
    }
}
@media(max-width: 500px){
    .announcement__inner {
    padding: 20px;
    font-family: 'Gill Sans', sans-serif;
    }
    .header-wrapper {
    height: 300px;
    }
}