/* Additions made during the PyroCMS -> 11ty port. theme.css stays untouched. */

.o-contactmap { position: relative; overflow: hidden; }

.c-farmmap { display: block; width: 100%; height: auto; }

/* The map's own type. It cannot live in the SVG: Vue compiles the page as an
   in-DOM template and strips <style> elements out of it. */
.c-farmmap text { font-family: "Moderat", system-ui, sans-serif; }
.c-farmmap .m-script { font-family: "Northwell", cursive; fill: #f9664d; }
.c-farmmap .m-name { font-family: "Recoleta W05 Regular", Georgia, serif; fill: #9b6f4e; }
.c-farmmap .m-farm { font-family: "Recoleta W05 Regular", Georgia, serif; fill: #f9664d; }
.c-farmmap .m-water-label {
  font-family: "Recoleta W05 Light", Georgia, serif;
  fill: #7d8a62;
  letter-spacing: .22em;
}

.c-farmcard {
  position: absolute;
  right: 3%;
  bottom: 10%;
  max-width: 320px;
  padding: 28px 32px;
  background: #ede8e4;
  box-shadow: 0 18px 40px rgba(58, 58, 58, .13);
}

.c-farmcard__label {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9b6f4e;
}

.c-farmcard__address {
  margin: 0 0 20px;
  font-family: "Recoleta W05 Regular", Georgia, serif;
  font-size: 22px;
  line-height: 1.35;
  color: #3a3a3a;
}

.c-farmcard__link {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 40px;
  background: #ecb6ac;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  transition: background 200ms ease-in-out;
}

.c-farmcard__link:hover,
.c-farmcard__link:focus-visible { background: #e39283; color: #fff; }

@media (max-width: 767px) {
  .o-contactmap { display: flex; flex-direction: column; }
  .c-farmcard { position: static; max-width: none; text-align: center; }
}

/* ── Facebook feed in the calendar section ─────────────────────────────── */

.c-fbfeed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 26px;
  padding-bottom: 24px;
}

@media (max-width: 575px) { .c-fbfeed { grid-template-columns: 1fr; } }

.c-fbfeed__item { display: flex; flex-direction: column; }


.c-fbfeed__media {
  display: block;
  border-bottom: 0;   /* see .c-fbhero — the theme underlines every anchor */
  overflow: hidden;
  border-radius: 4px;
  background: #e0d9d1;
}

.c-fbfeed__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 400ms ease-in-out;
}

.c-fbfeed__media:hover img,
.c-fbfeed__media:focus-visible img { transform: scale(1.03); }

.c-fbfeed__body { padding-top: 14px; }

.c-fbfeed__date {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9b6f4e;
}

.c-fbfeed__text {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.5;
  color: #3a3a3a;
  white-space: pre-line;   /* the posts are written with line breaks */
  /* Posts vary from one line to ten; clamp so the cards stay on a grid. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-fbfeed__link {
  font-size: 15px;
  color: #9b6f4e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-fbfeed__link:hover, .c-fbfeed__link:focus-visible { color: #f9664d; }

/* The latest post, shown large. The caption sits under the drawing rather than
   over it: a scrim strong enough for white text muddied the illustration. */

.c-fbhero {
  display: block;
  margin-bottom: 38px;
  color: inherit;
  text-decoration: none;
  /* theme.css puts a coral border-bottom on every <a>. This one wraps the whole
     card, so that border ran the full width under the caption. */
  border-bottom: 0;
}

.c-fbhero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  background: #f2ece0;
}

.c-fbhero__banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
}

.c-fbhero__date {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9b6f4e;
}

.c-fbhero__text {
  font-family: "Recoleta W05 Regular", Georgia, serif;
  font-size: 24px;
  line-height: 1.4;
  color: #3a3a3a;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-fbhero__link {
  align-self: flex-start;
  font-size: 15px;
  color: #9b6f4e;
  border-bottom: 1px solid #f9664d;
}

.c-fbhero:hover .c-fbhero__link,
.c-fbhero:focus-visible .c-fbhero__link { color: #f9664d; }

@media (max-width: 767px) {
  /* Stacked in one column, a 16:9 hero looks stunted beside the 4:3 cards. */
  .c-fbhero__image { aspect-ratio: 4 / 3; }
  .c-fbhero__text { font-size: 19px; }
}

/* Illustrations stand in where a post has no unused photo. They are square, so
   they are cropped to the same ratio as the photographs to keep the grid even. */
.c-fbhero__image--drawn,
.c-fbfeed__drawn { background: #f2ece0; }

/* The theme parks the goat right under the list, where it collided with the
   last card's link. Push it clear. */
.o-homecalendar .c-homecalendar__goat { margin-top: 70px; }

@media (max-width: 767px) {
  .o-homecalendar .c-homecalendar__goat { margin-top: 40px; }
}