/* =============================================
   STYLES.CSS — site-wide stylesheet for highlinnfarms.com
   =============================================
   This is the main stylesheet — every page except the two legal
   pages (privacy.html, terms.html) loads this file, and the legal
   pages load it too but layer policy.css on top.

   ROUGH LAYOUT OF THIS FILE (top to bottom):
     1.  :root  — brand color variables used everywhere
     2.  Global link style
     3.  Top bar       (date / clock / weather dropdown)
     4.  Site header   (logo + nav)
     5.  Contact page  (grid + form styling)
     6.  Responsive blocks — 768px tablet, 600px phone
     7.  Mission fade-up animation (home page)
     8.  Hero + Mission sections (home page)
     9.  Site footer
    10.  Floating back-to-top button
    11.  Page banners (the green band with the H1)
    12.  Mission statement detail bits
    13.  ABOUT page — ancestor cards + media viewer (images/PDFs/video)
    14.  PROPERTIES page — seasonal tab viewer + photo gallery + lightbox
    15.  FARM TALK page — article cards, filter pills, expand-in-place,
                         before/after pairs, PDF blocks, "Have a Question" box
    16.  PROPERTIES lightbox (full-screen overlay for gallery photos)
    17.  STAY WITH US page — two-column layout + option cards
    18.  Print styles (Farm Talk article print/PDF)

   Everything shares the green-and-cream palette defined in :root
   below. The idea was to keep the site feeling like the farm —
   deep field green for structure, cream for text, and a small
   splash of gold on hover/accents.
   ============================================= */


/* =============================================
   :ROOT — site-wide color variables
   Every green / gold / cream on the site references one of these
   names, so if we ever want to shift the whole palette it can be
   done in one place. Anywhere you see var(--hlf-something) further
   down in the file, this is where it's defined.
   ============================================= */
:root {
  /* BRAND COLORS — the main palette */
  --hlf-green: #6BAE56;         /* primary farm green */
  --hlf-gold: #F9D923;          /* warm accent (hover color in nav) */
  --hlf-blue: #7DAFC3;          /* softer, natural sky blue */
  --hlf-mauve: #F5EFE0;         /* cream — used for header text */

  /* Neutrals */
  --hlf-white: #ffffff;
  --hlf-black: #000000;

  /* Deep accent — the darker green behind the header, footer,
     page banner, etc. Gives the site its "chrome" color. */
 --hlf-field-green: #3A8A1F;


   /* OPTIONAL ALTERNATIVE GREENS — kept here because I was still
     trying out shades when the site went live. Leaving them
     in case a section needs a different green later. */
--hlf-green-olive: #5F8F4F;   /* muted olive green */
--hlf-green-field: #4E7C3A;   /* earthy field green */
--hlf-green-deep: #3D6630;    /* deep crop green */

}
/* Smooth scrolling when anchor links are clicked (the "↑ Top"
   buttons jump to body id="top"). Without this the page
   jumps instantly instead of gliding. */
html {
  scroll-behavior: smooth;
}

/* =============================================
   GLOBAL LINK STYLE
   Default look for any <a> in page content — farm-green text,
   no underline, a slightly brighter green + underline on hover.
   Individual sections (nav, footer, etc.) override these with
   their own colors where needed.
   ============================================= */

a {
  color: #2f4f2f;              /* farm green */
  text-decoration: none;
  font-weight: 500;
}

a:hover,
a:focus-visible {
  color: #3d7f2a;              /* lighter green on hover */
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* =============================================
   TOP BAR — date / clock / weather pill
   =============================================
   The thin dark-green strip at the very top of every main page
   (not on the legal pages). Shows the date and clock on the left
   and a weather pill on the right. Clicking the weather pill opens
   a dropdown panel that slides down with wind / humidity / feels
   like / 5-day forecast, and a text box where the visitor can
   type in their own city or ZIP.

   The CLOCK AND WEATHER are driven by scripts.js — this file just
   handles the look. The dropdown panel starts hidden
   (opacity 0 + visibility hidden) and the script toggles a
   ".show" class to reveal it.
   ============================================= */

.top-bar {
  background: linear-gradient(to right, var(--hlf-field-green), #2f5e2f);
  color: var(--hlf-mauve);
  padding: 0.25rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 
}
 

/* Main row: date/time + weather */
.top-bar-info {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 2rem; /* adjust spacing between date/time and weather */
  width: 100%;
}

/* Date + time */
.top-left-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Weather block */
.top-right-info {
  display: flex;
  align-items: center;
}

.weather-container {
  position: relative; /* anchors dropdown */
  display: inline-flex;
  align-items: center;
}

.weather-link {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.weather-icon {
  font-size: 0.8rem;
}

.weather-text {
  font-weight: 500;
}

.weather-caret {
  font-size: 0.8rem;        /* new size */
  color: var(--hlf-gold);   /* subtle brand highlight */
  opacity: 0.9;             /* more visible but not loud */
  transition: transform 0.3s ease, opacity 0.3s ease;
}


.weather-caret.rotate {
  transform: rotate(180deg);
}

/* The weather dropdown panel itself.
   Starts hidden (opacity 0, visibility hidden, pointer-events
   none) and is revealed when scripts.js adds the .show class.
   position: absolute pins it directly under the weather pill;
   the .weather-container around it is position: relative so
   "absolute" anchors to that container, not the whole page. */
.weather-panel {
  background-color: var(--hlf-field-green);
  color: var(--hlf-mauve);
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  position: absolute;
  top: calc(100% - 0.1rem); /* fine-tuned upward nudge */
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 10;
}


.weather-panel.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The "change city" section at the bottom of the weather panel —
   visitors can type in their own city/ZIP and the script fetches
   a fresh forecast for that location. */
/* Input + button */
.weather-city-select {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.25);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.weather-input {
  flex: 1 1 auto;
  min-width: 160px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.weather-button {
  padding: 6px 12px;
  background-color: #2f5e2f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.weather-hint {
    font-size: 0.75rem;
    color: #ddd; /* slightly lighter for dark green background */
    margin-top: -4px; /* pulls it closer to the input */
    margin-left: 2px;
    display: block;
}


.weather-button:hover {
  background-color: #3c7a3c;
}
/* Leftover styling for an older "distance tool" that used
   to live in the top bar. The HTML is gone but I'm keeping
   these rules in case I bring it back. */
/* Distance tool (top bar) */
.distance-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.distance-tool input {
  padding: 4px 6px;
  font-size: 0.7rem;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.distance-tool button {
  padding: 4px 8px;
  font-size: 0.7rem;
  background: #2f5e2f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* =============================================
   SITE HEADER — logo bar + nav menu
   =============================================
   The dark-green strip right below the top bar. Has the farm
   logo and site title on the left and the main nav links on
   the right. On narrow screens (see the 768px responsive block
   further down) it stacks into a column.

   flex-wrap: wrap lets the logo block and nav block sit on the
   same row when there's space, but wrap to two rows when the
   window is narrow. justify-content: space-between pushes them
   to opposite ends when both fit on one line.
   ============================================= */


.site-header {
  background-color: var(--hlf-field-green);
  color: var(--hlf-mauve);
  padding: 1rem 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}


.logo-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-logo {
  height: 30px;
  width: auto;
}

.site-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
  max-width: 100%;
}

.nav-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

.nav-menu li {
  display: flex;
  align-items: center;
}

.nav-menu a {
  color: var(--hlf-mauve);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  font-weight: 500;
  font-size: 1rem;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
/* NAV HOVER: the transparent underline color (set above) fades
   in to gold, and the link text itself shifts to gold at the
   same time. The transition on .nav-menu a handles the ease. */
.nav-menu a:hover {
  color: var(--hlf-gold);
  text-decoration-color: var(--hlf-gold);
}

/* =============================================
   CONTACT & DIRECTIONS PAGE
   =============================================
   Two cards side by side at the top (directions + contact info),
   then a message form below. The grid collapses to a single
   column on narrow screens (see the responsive block below).
   ============================================= */


.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 18px;
  align-items: stretch;
}

.contact-card{
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  padding: 18px;
  height: 100%;
  box-sizing: border-box;
}

.contact-card h2{
  margin-top: 0;
  color: #2f4f2f;
}

.contact-line{
  margin: 12px 0;
}

.contact-small{
  margin: 10px 0 0;
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Map */
.map-embed{
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  background: #fff;
}

.map-embed iframe{
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}

.map-note{
  margin-top: 10px;
}

.directions-actions {
  margin-top: 12px;
}

.directions-btn {
  display: inline-block;
  padding: 10px 16px;
  background-color: #3f6f2c;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.directions-btn:hover,
.directions-btn:focus-visible {
  background-color: #2f541f;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}


/* Form */
.contact-form-wrap{
  margin-top: 22px;
}

.contact-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 700px;
}

.contact-form label{
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: #2f4f2f;
}

.contact-form input,
.contact-form textarea{
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}

.contact-form textarea{
  resize: vertical;
}

.contact-form button{
  background-color: #2f4f2f;
  color: #ffffff;
  border: none;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  width: fit-content;
}

.contact-form button:hover{
  background-color: #3d7f2a;
}

/* Responsive */
@media (max-width: 768px){
  .contact-grid{
    grid-template-columns: 1fr;
  }

  .map-embed iframe{
    height: 300px;
  }
}

/* =============================================
   RESPONSIVE DESIGN — TABLET + MOBILE (≤768px)
   =============================================
   When the screen is 768 pixels wide or less, the rules inside
   this @media block kick in and override the desktop layout.
   This is where the header stacks into a column, the mission
   section becomes a single column with centered text, and the
   footer rearranges itself.

   There's a TIGHTER block below at 600px for phone-specific
   tweaks on top of these.
   ============================================= */

@media (max-width: 768px) {

  /* === HEADER === */
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.9rem 1.25rem;
    gap: 0.75rem;
  }

  .logo-bar {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .nav-menu {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: -0.25rem;
  }

  .nav-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 0.5rem 0;
    margin: 0;
  }

  .nav-menu a {
    font-size: 0.95rem;
    padding: 6px 8px;
    text-decoration: none;
  }

  /* === HERO SECTION === */
  .hero-overlay {
    width: 85%;
    padding: 14px 16px;
  }

  .hero-overlay h2 {
    font-size: 1.9rem;
    line-height: 1.15;
  }

  .hero-overlay p {
    font-size: 1rem;
  }

  /* === MISSION SECTION (768px and down) === */
.mission-split{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;

  background-color: #f5f5f5;
  padding: 1.25rem 1rem 1.25rem;
  gap: 1rem;
}

/* IMPORTANT: override any desktop flex-basis like 400px */
.mission-text,
.mission-photo{
  flex: 0 1 auto;
  max-width: 90%;
  padding: 0;
  margin: 0 auto;
}

.mission-text h2{
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  color: #2f4f2f;
}

.mission-text p{
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.mission-photo img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


  /* === FOOTER === */
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .footer-item {
    flex-direction: column;
    gap: 4px;
  }

  .footer-label {
    min-width: auto;
  }

    /* === FOOTER bottom: keep Top to the right on small screens === */
  .footer-bottom-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
    text-align: center;
  }

  .footer-legal-links{
    flex: 1;
    text-align: center;
  }

  a.back-to-top{
    margin-left: auto;
    white-space: nowrap;
  }


  /* === WEATHER/TOP BAR MINOR TWEAKS === */
  .top-bar-info {
    gap: 0.75rem;
    font-size: 0.7rem;
    flex-wrap: wrap;
  }

  .weather-text {
    font-size: 0.8rem;
  }

  #date, #clock {
    white-space: nowrap;
  }
}

/* =============================================
   PHONE-SPECIFIC TUNING (≤600px)
   =============================================
   Extra tweaks that stack on top of the 768px block for
   smaller phones — slightly tighter padding, slightly smaller
   fonts. Anything not listed here inherits from the 768px
   block above.
   ============================================= */

@media (max-width: 600px) {

  /* Even tighter layout for small phones */
  .site-header {
    padding: 0.75rem 1rem 0.5rem;
  }

  .hero-overlay {
    width: 92%;
    padding: 12px 14px;
  }

  .hero-overlay h2 {
    font-size: 1.7rem;
    line-height: 1.15;
  }

  .hero-overlay p {
    font-size: 0.95rem;
  }

  /* Mission section spacing slightly reduced again */
  .mission-split {
    padding: 1.25rem 1rem 1.25rem;
    gap: 0.75rem;
  }

  .mission-text h2 {
    font-size: 1.45rem;
  }

  .mission-text p {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  /* Footer text a touch smaller */
  .footer-bottom p,
  .footer-legal-links a {
    font-size: 0.9rem;
  }
}

/* =============================================
   FADE-UP ANIMATION (home page mission section)
   =============================================
   The mission text and photo on the home page slide up from
   25px below their final position while fading in over 0.8s.
   The @keyframes here defines the "from" and "to" states; the
   .mission-text and .mission-photo rules below apply it. The
   photo gets a small extra delay so it lands just after the
   text, which feels nicer than both moving at once.
   ============================================= */

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animate mission items */
.mission-text,
.mission-photo {
  opacity: 0;
  animation: fadeUp 0.8s ease-out forwards;
}

/* Slight delay for image */
.mission-photo {
  animation-delay: 0.15s;
}
/* =============================================
   HERO SECTION (home page top photo)
   =============================================
   The big photo strip at the top of index.html with the dark
   overlay box over it. 50vh = half the browser window's height.
   background-size: cover crops the image to fill the box; the
   overlay darkens it so the white text is readable on any photo.
   ============================================= */
/* HERO SECTION */
.hero {
    height: 50vh;
    background-image: url('../images/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-overlay {
    background-color: rgba(0, 0, 0, 0.45);
    padding: 2rem 3rem;
    border-radius: 8px;
    text-align: center;
    color: #ffffff;
}

.hero-overlay h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.hero-overlay p {
    font-size: 1.2rem;
    margin: 0;
}
/* =============================================
   MISSION STATEMENT (older single-column version)
   The home page originally had a plain centered mission
   block; we later moved to the two-column "mission-split"
   layout below. Keeping these rules in case I want to fall
   back to the simpler look on a smaller page.
   ============================================= */
/* MISSION STATEMENT */
.mission {
    background-color: #f5f5f5;
    padding: 4rem 2rem;
    text-align: center;
}

.mission-content {
    max-width: 800px;
    margin: 0 auto;
    color: #333;
}

.mission-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #2f4f2f;
}

.mission-content p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* =============================================
   MISSION SPLIT (the two-column mission block)
   =============================================
   On the home page — text on the left, photo on the right.
   flex: 1 1 400px means each column wants to be 400px wide but
   can grow or shrink. When the window narrows below ~800px the
   columns wrap so the photo ends up under the text (the 768px
   responsive block further up handles the finer stacking).
   ============================================= */
.mission-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background-color: #f5f5f5;
}

.mission-text {
    flex: 1 1 400px;
    max-width: 600px;
    padding: 1rem 2rem;
    color: #333;
}

.mission-text h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #2f4f2f;
}

.mission-text p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.mission-photo {
    flex: 1 1 400px;
    max-width: 600px;
    padding: 1rem 2rem;
}

.mission-photo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}   

 /* === Refining Mission vertical spacing === */
.mission-split {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.mission-text h2 {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}

.mission-text p {
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}
   
/* === Mission Section Spacing — stable === */
.hero {
  margin-bottom: 0;       /* prevent big gap after hero */
}

.mission-split {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 0;
  margin-bottom: 0;
}

.mission-text h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.mission-text p {
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

/* keep footer styles intact (don’t reset anything there) */

/* =============================================
   SITE FOOTER (main pages — unified block)
   =============================================
   The footer appears at the bottom of every main page (not the
   legal pages — those use the slim footer in policy.css).
   Layout:
      .footer-content        — top row (two flex columns)
         .footer-left        — logo, name, "Site by" credit
         .footer-right       — contact info (mailing / email / phone)
      .footer-divider        — thin white line
      .footer-bottom         — bottom row
         .footer-bottom-row  — legal links on the left,
                               "↑ Top" on the right
         copyright paragraph

   The !important in the background-color isn't here — we're just
   using a solid green tone. The rounded bottom corners
   (border-radius: 0 0 14px 14px) make it look like a tidy card
   tucked under the page content.
   ============================================= */

.site-footer{
  background: var(--hlf-field-green);
  color: #ffffff;
  padding: 2.5rem 2rem 1.5rem;
  border-radius: 0 0 14px 14px;
}

/* Top part of footer: left brand + right contact */
.footer-content{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-left{
  flex: 1;
  min-width: 220px;
}

.footer-logo{
  width: 54px;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.footer-name{
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.footer-credit{
  margin: 0;
  opacity: 0.9;
  font-size: 0.95rem;
}

/* Right contact column */
.footer-right{
  flex: 1.4;
  min-width: 280px;
}

.footer-section-title{
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.footer-item{
  display: flex;
  gap: 10px;
  margin: 0.6rem 0;
}

.footer-label{
  min-width: 130px;
  font-weight: 700;
}

.footer-value{
  opacity: 0.95;
}

/* Links in the contact column */
.footer-value a{
  color: #d4f5d4;
  text-decoration: none;
  font-weight: 600;
}

.footer-value a:hover,
.footer-value a:focus-visible{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Divider line between top footer and bottom footer */
.site-footer .footer-divider{
  border: none;
  border-top: 1px solid rgba(255,255,255,0.25);
  margin: 1.25rem auto 1rem;
  max-width: 1100px;
}

/* Bottom footer: legal left + top right + copyright centered */
.footer-bottom{
  max-width: 1100px;
  margin: 0 auto;
}

.footer-bottom-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

/* Legal links (classy by default) */
.footer-legal-links a{
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  font-weight: 600;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Back to top (subtle utility) */
a.back-to-top{
  color: #ffffff;
  text-decoration: none;
  font-size: 0.85rem;
  opacity: 0.75;
  white-space: nowrap;
}

a.back-to-top:hover,
a.back-to-top:focus-visible{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Copyright */
.footer-bottom p{
  margin: 0;
  text-align: center;
  opacity: 0.9;
  font-size: 0.95rem;
}

/* Responsive footer */
@media (max-width: 768px){
  .footer-content{
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-item{
    flex-direction: column;
    gap: 4px;
  }

  .footer-label{
    min-width: auto;
  }

}

/* =============================================
   FLOATING BACK-TO-TOP BUTTON (main pages)
   This is the small floating green pill that appears in
   the corner once you scroll. position: fixed pins it to
   the viewport so it stays put while the page scrolls.
   The legal pages use a slightly different version
   (.to-top-fab in policy.css) — same idea, different class.
   ============================================= */
.back-to-top-btn{
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 6px 10px;
  background: rgba(63,127,42,0.85); /* your green */
  color: #ffffff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  opacity: 0.85;
  z-index: 999;
  transition: all 0.25s ease;
}

.back-to-top-btn:hover{
  opacity: 1;
  transform: translateY(-2px);
}

/* ============================
   FINAL: Mission spacing mobile
   paste at VERY END of styles.css
   ============================ */

@media (max-width: 768px){

  /* If a separate mission intro section above the split */
  .mission{
    padding-bottom: 0.75rem !important;
    margin-bottom: 0 !important;
  }

  .mission-content p{
    margin-bottom: 0.75rem !important; /* controls the gap under the text */
  }

  /* The gray image section */
  .mission-split{
    padding-top: 0.75rem !important;
    padding-bottom: 1.25rem !important;
    margin-top: 0 !important;
    gap: 0.75rem !important;
    justify-content: flex-start !important;
  }

  /* The earlier “400px flex-basis” fix — keep it bulletproof */
  .mission-text,
  .mission-photo{
    flex: 0 1 auto !important;
  }

  /* Remove any extra margins that can create phantom space */
  .mission-text h2,
  .mission-text p{
    margin-top: 0 !important;
  }

  .mission-text p{
    margin-bottom: 0.5rem !important;
  }
}

@media (max-width: 600px){
  .mission{
    padding-bottom: 0.5rem !important;
  }

  .mission-split{
    padding-top: 0.6rem !important;
    padding-bottom: 1rem !important;
    gap: 0.6rem !important;
  }
}

/* =============================================
   PAGE BANNER (the green photo strip at the top of every
   non-home page — Properties, About, Contact, etc.)
   =============================================
   A single .page-banner rule sets the default banner photo,
   then each page gets its own image override further down
   (About → cemetery, Stay → fall cabin, Contact → red road,
   Properties → wide properties photo). The body class
   (.page-about, .page-stay, etc.) set on each page's <body>
   is what triggers the per-page override.

   The ::before pseudo-element lays a semi-transparent black
   box over the photo so the white H1 stays readable no matter
   how bright the photo is.
   ============================================= */

.page-banner {
    position: relative;
    width: 100%;
    height: 260px;
    background: url("../images/page-banner.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark overlay for text readability */
.page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
}

/* About page banner override (Sutherland cemetery, wide shot) */
body.page-about .page-banner {
  background-image: url("../images/about-banner.jpg");
  background-position: center 40%;
}

/* Stay With Us page banner (Pleasanton cabin in fall color) */
body.page-stay .page-banner {
  background-image: url("../images/properties/pleasanton/pleasanton-fall-01-cabin-foliage.jpg");
  background-position: center 72%;
  height: 160px;
}

/* Contact page banner override (vertical road image) */
body.page-contact .page-banner{
    background-image: url("../images/RedRoadSide.jpeg");
    background-position: center 55%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 320px;
}

body.page-properties .page-banner {
    background-image: url("../images/properties-banner.jpg");
    background-position: center 55%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 320px;
}

/* Banner title */
.page-banner h1 {
    position: relative;
    color: #ffffff;
    font-size: 2.4rem;
    letter-spacing: 1px;
    text-align: center;
    margin: 0;
}

/* =============================================
   HOME PAGE — "Our Story" section
   The short prose block under the mission photo on the
   home page. max-width: 75ch on the paragraphs caps the
   line length to about 75 characters which reads nicely.
   ============================================= */

.home-story {
  padding: 60px 20px;
}

.home-story .story-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.home-story h2 {
  margin-bottom: 12px;
}

.home-story p {
  max-width: 75ch;   /* readable line length */
  line-height: 1.7;
  margin-bottom: 18px;
}

/* ============================= */
/* Mobile spacing adjustments    */
/* ============================= */

@media (max-width: 768px) {

  .mission-split {
    padding-bottom: 30px;
  }

  .home-story {
    padding: 24px 16px;
  }

  .story-container {
    max-width: 100%;
  }

  .story-container p {
    margin-bottom: 12px;
    line-height: 1.6;
  }

}
@media (max-width: 600px) {
  .home-story {
    padding-bottom: 20px;
  }
}

/* Contact page: responsive banner height */
.page-contact .page-banner { height: 320px; }

@media (max-width: 768px) {
  .page-contact .page-banner { height: 240px; }
}

@media (max-width: 480px) {
  .page-contact .page-banner { height: 200px; }
}

@media (min-width: 1100px){
  body.page-contact .page-banner{
    background-position: center 57%;
  }
}


/* =============================================
   ABOUT PAGE — Ancestor card + media viewer
   =============================================
   Each generation of ancestors (grandparents, great-grandparents,
   etc.) gets its own .ancestor.card block. Inside the card:

     .ancestor-layout   — 2-column grid, text on the left,
                          portrait photo on the right
     .viewer-toggle     — "📂 View Archives" button
     .media-viewer      — the expandable panel that appears
                          below the card when the button is
                          clicked. Starts hidden (display:none in
                          the HTML) and scripts.js flips it on.

   The media viewer itself has three parts:
     .viewer-toolbar   — the "× Close" + "◀ ▶" buttons
     .viewer-stage     — the big image or PDF currently shown
     .viewer-thumbs    — the scrolling row of small thumbnails
                         at the bottom. Active thumb gets the
                         .is-active class (darker border).

   Scripts.js populates the stage and thumbs from the folder
   images/archives/<id>/ — this CSS just handles the look.
   ============================================= */

.ancestor.card {
  max-width: 1100px;
  margin: 24px auto;
  padding: 28px 22px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

/* Heading spacing */
.section-kicker {
  margin: 0 0 8px;
}

.ancestor-title {
  margin: 0 0 16px;
}

/* Two-column layout */
.ancestor-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 28px;
  align-items: start;
}

/* Text area */
.ancestor-text p {
  margin: 0 0 14px;
  line-height: 1.7;
}

/* Portrait styling */
.ancestor-portrait {
  margin: 0;
}

.ancestor-portrait img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

.ancestor-portrait figcaption {
  margin-top: 10px;
  font-weight: 600;
}

/* Button */
.viewer-toggle {
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #f3f3f3;
  cursor: pointer;
  font-weight: 600;
}

/* Embedded viewer */
.media-viewer {
  margin-top: 20px;
  padding: 16px;
  border-radius: 16px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,0.08);
}

.viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.viewer-close {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}

.viewer-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.viewer-prev,
.viewer-next {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}

.viewer-stage {
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  overflow: hidden;
}

/* Main displayed image */
.viewer-stage img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70vh;
  object-fit: contain;
}

/* PDF display */
.viewer-stage iframe {
  width: 100%;
  height: 70vh;
  border: 0;
  display: block;
  background: #fff;
}

/* Thumbnail strip */
.viewer-thumbs {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.viewer-thumb {
  flex: 0 0 auto;
  width: 90px;
  height: 60px;
  border-radius: 10px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
}

.viewer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viewer-thumb.is-active {
  border-color: rgba(0,0,0,0.35);
}

.viewer-caption {
  margin: 10px 16px 14px;
  font-size: 0.9rem;
  color: #555;
  font-style: italic;
  text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .ancestor-layout {
    grid-template-columns: 1fr;
  }

  .ancestor-portrait img {
    max-width: 520px;
    margin: 0 auto;
  }

  .ancestor-portrait figcaption {
    text-align: center;
  }
}


/* =============================================
   PROPERTIES PAGE — Property sections + seasonal tab viewer
   =============================================
   Each property (Prescott, Pleasanton, etc.) gets its own
   .property-section block. The "+" sibling selector below
   draws a thin cream divider between consecutive sections.

   Inside each section:
     .property-intro       — 2-column grid: text left, aerial
                             photo right. Stacks on phones.
     .property-home-badge  — the small green pill that says
                             "OUR HOME" next to the heading
     .seasons-tabs         — the four season buttons (spring/
                             summer/fall/winter)
     .season-panel         — the photo gallery for that season,
                             toggled by JS via the .is-active
                             class. Only one panel is visible
                             at a time.
     .photo-gallery        — the photo grid + main viewer + the
                             prev/next controls. Click any
                             thumbnail to swap it into the main
                             stage.
   ============================================= */


.property-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.property-section + .property-section {
  border-top: 2px solid var(--hlf-mauve);
}

.property-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 48px;
}

.property-intro-text h2 {
  font-size: 2rem;
  color: var(--hlf-field-green);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.property-home-badge {
  display: inline-block;
  background: var(--hlf-field-green);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  vertical-align: middle;
  white-space: nowrap;
}

.property-intro-text .property-tagline {
  font-size: 1.05rem;
  color: #555;
  font-style: italic;
  margin-bottom: 16px;
}

.property-intro-text p {
  line-height: 1.75;
  color: #333;
  margin-bottom: 12px;
}

.property-aerial-wrap {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}

.property-aerial-wrap img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

/* =============================================
   SEASONAL TAB VIEWER (Properties page)
   The cream-colored card that holds the four season tabs +
   main photo stage + thumbnails + prev/next controls for a
   single property. Clicking a tab swaps which .season-panel
   is visible; clicking a thumb (or the prev/next button)
   swaps which photo is shown in the main stage.
   ============================================= */

.seasonal-viewer {
  background: #f8f6f1;
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.seasonal-viewer h3 {
  font-size: 1.4rem;
  color: var(--hlf-field-green);
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 0.5px;
}

/* The four season tab buttons sit on top of a thin grey line
   (the border-bottom on .season-tabs). The active tab's
   bottom border is a colored strip that blends INTO that
   grey line — the margin-bottom: -2px on the buttons pushes
   them down 2px so their own bottom border covers the grey.
   Each season gets its own color via .season-tab.active[data-season="..."]. */
.season-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 0;
}

.season-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 22px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: #666;
  border-radius: 6px 6px 0 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
}

.season-tab:hover {
  color: var(--hlf-field-green);
  background: rgba(107,174,86,0.07);
}

.season-tab.active[data-season="winter"] {
  color: #3a7ab0;
  border-bottom-color: #3a7ab0;
  background: rgba(58,122,176,0.07);
}

.season-tab.active[data-season="spring"] {
  color: var(--hlf-field-green);
  border-bottom-color: var(--hlf-field-green);
  background: rgba(107,174,86,0.09);
}

.season-tab.active[data-season="summer"] {
  color: #c08800;
  border-bottom-color: #c08800;
  background: rgba(249,217,35,0.1);
}

.season-tab.active[data-season="fall"] {
  color: #b05020;
  border-bottom-color: #b05020;
  background: rgba(176,80,32,0.08);
}
/* Each season's content sits in its own .season-panel div.
   They start hidden (display:none) and scripts.js adds the
   .active class to whichever panel matches the clicked tab. */
/* Season panels */
.season-panel {
  display: none;
}

.season-panel.active {
  display: block;
}

/* Coming soon panel */
.season-coming-soon {
  text-align: center;
  padding: 60px 20px;
  color: #888;
}

.season-coming-soon .season-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
}

.season-coming-soon p {
  font-size: 1.05rem;
  font-style: italic;
}

/* Photo gallery */
.season-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* The big photo for the currently selected season. Fixed
   16:9 aspect ratio keeps the layout from jumping when the
   image loads. Dark background shows through briefly while
   the image is still downloading. */
/* Main photo stage */
.season-stage {
  position: relative;
  background: #111;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 480px;
}

.season-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.season-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
  padding: 24px 16px 12px;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.4;
}

/* Prev/Next nav */
.season-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.season-nav-btn {
  background: var(--hlf-field-green);
  color: #fff;
  border: none;
  border-radius: 6px;
  width: 42px;
  height: 42px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}

.season-nav-btn:hover {
  background: #2d6e18;
}

.season-counter {
  font-size: 0.85rem;
  color: #666;
  flex: 1;
  text-align: center;
}

/* Thumbnail strip */
.season-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.season-thumb {
  width: 80px;
  height: 60px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s, opacity 0.2s;
  opacity: 0.65;
}

.season-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.season-thumb.active,
.season-thumb:hover {
  opacity: 1;
}

.season-thumb.active {
  border-color: var(--hlf-field-green);
}


/* ---- Responsive ---- */

@media (max-width: 768px) {
  .property-intro {
    grid-template-columns: 1fr;
  }

  .property-aerial-wrap img {
    height: 220px;
  }

  .seasonal-viewer {
    padding: 20px 14px;
  }

  .season-tabs {
    gap: 2px;
  }

  .season-tab {
    padding: 9px 12px;
    font-size: 0.88rem;
  }

  .season-thumb {
    width: 64px;
    height: 48px;
  }
}


/* =============================================
   FARM TALK PAGE
   =============================================
   A simple blog-style page. Each article is a card
   (.article-card) with a photo, title, summary, and a
   "Read article" button. Clicking the button reveals the
   full article in place (scripts.js toggles the .expanded
   class). Across the top is a row of category filter pills
   that scripts.js uses to show/hide cards based on their
   data-category attribute.

   Inside an expanded article we reuse several plug-and-play
   patterns:
     - .article-inline-photo    (a single figure inline)
     - .before-after             (a side-by-side before/after pair)
     - .article-resources       (a box of related links)
     - .article-pdf-block       (a download button for a PDF)
     - .farm-talk-question      (the sitewide "Have a question?" callout)

   The @media print block near the end of the file is what
   makes "Print Article" produce a clean page with just the
   article text — it hides everything else on the page.
   ============================================= */

/* Banner */
body.page-farm-talk .page-banner {
  background-image: url("../images/farm-talk-banner.jpg");
  background-size: cover;
  background-position: center 60%;
}

/* Main content area */
.farm-talk-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.farm-talk-intro {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 2.5rem;
  max-width: 720px;
}
/* The row of filter pills above the articles — "All",
   "Land & Soil", "Water", "Ancestors", etc. Scripts.js
   tags each card with a data-category attribute and adds
   .active to the clicked pill. */
/* Category filter bar */
.category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.category-pill {
  background: #f0ede6;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.category-pill:hover,
.category-pill.active {
  background: var(--hlf-field-green);
  color: #fff;
  border-color: var(--hlf-field-green);
}

/* Article grid */
.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Article card photo */
.article-card-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Single inline photo inside expanded article */
.article-inline-photo {
  margin: 20px 0 24px;
}

.article-inline-photo img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.article-inline-photo figcaption {
  text-align: center;
  font-size: 0.82rem;
  color: #777;
  font-style: italic;
  margin-top: 6px;
}

/* Before / After photo pair inside expanded article */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.2rem 0 1.4rem;
}

.before-after figure {
  margin: 0;
}

.before-after img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.before-after figcaption {
  text-align: center;
  font-size: 0.82rem;
  color: #666;
  margin-top: 0.4rem;
  font-style: italic;
}

@media (max-width: 560px) {
  .before-after {
    grid-template-columns: 1fr;
  }
}

/* Individual article card */
.article-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
}

.article-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.article-card-inner {
  padding: 1.6rem 1.8rem 1.4rem;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.article-category {
  background: var(--hlf-field-green);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 12px;
}

.article-date {
  font-size: 0.8rem;
  color: #888;
}

.article-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2a2a2a;
  margin: 0.3rem 0 0.6rem;
  line-height: 1.3;
}

.article-summary {
  font-size: 0.97rem;
  color: #555;
  line-height: 1.65;
  margin-bottom: 1.2rem;
}

/* Action buttons row */
.article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.btn-read-article {
  background: var(--hlf-field-green);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-read-article:hover {
  background: #2f6d17;
}

.btn-read-article.open {
  background: #555;
}

.btn-download-pdf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0ede6;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-download-pdf:hover {
  background: #e2ddd4;
  text-decoration: none;
}
/* The full-article panel inside each card — hidden by default
   (display: none) and revealed when scripts.js adds the .open
   class. A soft cream background sets it apart from the card's
   summary above so readers can tell "this is the rest of the
   article". */
/* Full article expandable area */
.article-full {
  display: none;
  border-top: 1px solid #e8e4dc;
  padding: 1.6rem 1.8rem 1.8rem;
  background: #faf9f6;
  font-size: 0.96rem;
  line-height: 1.75;
  color: #3a3a3a;
}

.article-full.open {
  display: block;
}

.article-full h3 {
  font-size: 1.05rem;
  color: var(--hlf-field-green);
  margin: 1.4rem 0 0.4rem;
}

.article-full h3:first-child {
  margin-top: 0;
}

.article-full p {
  margin-bottom: 0.9rem;
}

.article-full ul {
  margin: 0.4rem 0 0.9rem 1.4rem;
}

.article-full ul li {
  margin-bottom: 0.35rem;
}
/* The little green "Related Resources" box that drops into the
   bottom of some articles. The left-edge strip of brand green
   (border-left: 4px solid ...) makes it pop out from the cream
   background without needing a heavy outline. */
/* Resource links box */
.article-resources {
  margin-top: 1.6rem;
  background: #eef4e8;
  border-left: 4px solid var(--hlf-field-green);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
}

.article-resources h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--hlf-field-green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
}

.article-resources ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-resources ul li {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.article-resources ul li a {
  color: #2f5e2f;
}

.article-resources ul li a:hover {
  color: var(--hlf-field-green);
}

/* Responsive */
@media (max-width: 600px) {
  .farm-talk-main {
    padding: 2rem 1rem 3rem;
  }

  .article-card-inner {
    padding: 1.2rem 1.2rem 1rem;
  }

  .article-full {
    padding: 1.2rem;
  }

  .article-title {
    font-size: 1.15rem;
  }
}
/* Small cream block above a PDF download button — explains
   what the linked PDF contains before the reader clicks it. */
/* ---- PDF description block ---- */
.article-pdf-block {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0.8rem 1.8rem 0;
  padding: 0.9rem 1rem;
  background: #f5f2ea;
  border-left: 3px solid var(--hlf-field-green);
  border-radius: 0 6px 6px 0;
}

.pdf-description {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.5;
}

/* ---- Photo credit ---- */
.photo-credit {
  font-size: 0.78rem;
  color: #888;
  font-style: italic;
  margin: -0.6rem 0 1.2rem;
  text-align: right;
}

/* ---- Print button ---- */
.btn-print-article {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.85rem;
  color: #666;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-print-article:hover {
  background: #f0ede6;
  color: #333;
}

/* ---- Seasonal note ---- */
.farm-talk-seasonal-note {
  text-align: center;
  color: #888;
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e8e4dc;
}
/* "Have a Question?" panel at the bottom of Farm Talk. A
   gentle green-to-cream gradient with a rounded border gives
   it a warmer feel than the plain article cards. The button
   sends the visitor to the Contact page. */
/* ---- Have a Question callout ---- */
.farm-talk-question {
  margin-top: 2.5rem;
  background: linear-gradient(135deg, #eef4e8, #f5f2ea);
  border: 1px solid #c8dbb8;
  border-radius: 12px;
  padding: 2rem 2rem;
  text-align: center;
}

.farm-talk-question h3 {
  font-size: 1.2rem;
  color: var(--hlf-field-green);
  margin-bottom: 0.5rem;
}

.farm-talk-question p {
  color: #555;
  font-size: 0.97rem;
  margin-bottom: 1.2rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.btn-ask-question {
  display: inline-block;
  background: var(--hlf-field-green);
  color: #fff;
  border-radius: 7px;
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-ask-question:hover {
  background: #2f6d17;
  color: #fff;
  text-decoration: none;
}

/* =============================================
   PRESCOTT PROPERTY — PHOTO GALLERY + LIGHTBOX
   =============================================
   The photo grid on the Properties page — 3 photos per row
   on desktop, 2 on tablet, 1 on phone. Clicking a photo
   opens the .gallery-lightbox — a full-screen dark overlay
   with the big image in the middle, prev/next arrows, and
   a counter at the bottom. Scripts.js handles the click and
   populates #lightbox-img / #lightbox-caption / #lightbox-counter.

   To change photos per row, edit grid-template-columns on
   .gallery-grid (desktop) and the @media blocks at the end.
   ============================================= */

.prescott-gallery {
  margin-top: 8px;
}

.gallery-section-header {
  margin: 40px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--hlf-mauve);
}

.gallery-section-header:first-child {
  margin-top: 16px;
}

.gallery-section-header h3 {
  font-size: 1.25rem;
  color: var(--hlf-field-green);
  margin-bottom: 6px;
}

.gallery-section-header p {
  font-size: 0.93rem;
  color: #555;
  line-height: 1.65;
  margin: 0;
  max-width: 720px;
}

/* Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}

/* Individual item */
.gallery-item {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #f0ede6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item:hover,
.gallery-item:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  outline: none;
}

.gallery-item img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-item figcaption {
  padding: 8px 10px;
  font-size: 0.8rem;
  color: #555;
  background: #fff;
  line-height: 1.4;
}
/* The full-screen dark overlay that appears when a photo
   is clicked. position: fixed + inset:0 makes it cover the
   entire viewport. The "[hidden]" attribute selector lets
   us toggle visibility just by adding/removing the "hidden"
   attribute in JS — cleaner than juggling display: styles. */
/* ---- Lightbox overlay ---- */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gallery-lightbox[hidden] {
  display: none;
}

.lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
}

.lightbox-inner img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.lightbox-caption {
  color: #ddd;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 14px;
  max-width: 620px;
  line-height: 1.5;
}

.lightbox-close {
  position: fixed;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 12px;
  opacity: 0.75;
  transition: opacity 0.15s;
}

.lightbox-close:hover {
  opacity: 1;
}

.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 2.4rem;
  cursor: pointer;
  padding: 16px 18px;
  border-radius: 5px;
  line-height: 1;
  transition: background 0.2s;
}

.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-counter {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lightbox-prev { left: 4px; padding: 12px 12px; }
  .lightbox-next { right: 4px; padding: 12px 12px; }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item img {
    height: 240px;
  }
}



/* =============================================
   STAY WITH US PAGE
   =============================================
   Controls layout + look of the Stay page. The basic layout
   for each property is:

     .stay-section
        .stay-section-header  (h2 title + italic tagline)
        .stay-body            (two-column: description / highlights)
        .stay-options         (row of option cards with auto-wrap)
        .stay-cta             (centered inquiry button)

   The .stay-feature-list li::before pseudo-element draws a
   green checkmark in front of each highlight — saves having
   to drop an actual ✓ character into the HTML.

   auto-fit + minmax(220px, 1fr) on .stay-options makes the row
   self-organize: as many cards per row as fit with a minimum
   width of 220px each, wrapping to the next row when needed.
   ============================================= */

.stay-intro {
  max-width: 820px;
  margin: 0 auto 8px;
  padding: 20px 24px 0;
  font-size: 1rem;
  color: #444;
  line-height: 1.7;
}

.stay-jump-links {
  display: flex;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.stay-jump-links a {
  display: inline-block;
  background: var(--hlf-field-green);
  color: #fff;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.stay-jump-links a:hover {
  background: #2f6d17;
  color: #fff;
  text-decoration: none;
}

.stay-divider {
  border: none;
  border-top: 2px solid var(--hlf-mauve);
  margin: 28px 0;
}

.stay-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.stay-section-header {
  margin-bottom: 28px;
}

.stay-section-header h2 {
  font-size: 2rem;
  color: var(--hlf-field-green);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.stay-tagline {
  font-size: 1.05rem;
  color: #666;
  font-style: italic;
  margin: 0;
}

/* Two-column: description + highlights */
.stay-body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 36px;
  margin-bottom: 28px;
  align-items: start;
}

.stay-description p {
  line-height: 1.78;
  color: #333;
  margin-bottom: 14px;
}

.stay-highlights h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--hlf-field-green);
  margin-bottom: 12px;
}

.stay-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stay-feature-list li {
  padding: 6px 0 6px 22px;
  position: relative;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.5;
  border-bottom: 1px solid #f0ede6;
}

.stay-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--hlf-field-green);
  font-weight: 700;
}

/* Option cards */
.stay-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stay-option-card {
  background: #f8f6f1;
  border: 1px solid #e8e4dc;
  border-radius: 10px;
  padding: 24px 20px;
  text-align: center;
}

.stay-option-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.stay-option-card h3 {
  font-size: 1rem;
  color: var(--hlf-field-green);
  margin-bottom: 10px;
}

.stay-option-card p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

/* CTA button */
.stay-cta {
  text-align: center;
  margin-top: 8px;
}

.btn-stay-inquire {
  display: inline-block;
  background: var(--hlf-field-green);
  color: #fff;
  border-radius: 7px;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-stay-inquire:hover {
  background: #2f6d17;
  color: #fff;
  text-decoration: none;
}

/* Bottom note */
.stay-note {
  max-width: 720px;
  margin: 0 auto 48px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #eef4e8, #f5f2ea);
  border: 1px solid #c8dbb8;
  border-radius: 12px;
  text-align: center;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 768px) {
  .stay-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .stay-section-header h2 {
    font-size: 1.6rem;
  }
}

/* =============================================
   PRINT STYLES — Farm Talk articles
   =============================================
   When someone clicks "Print Article" (or their browser's
   File → Print), the @media print block takes over. It:

     1. HIDES all site chrome — nav, banner, category bar,
        seasonal note, Have a Question box, footer, the
        action buttons.
     2. HIDES every article card that ISN'T expanded — so
        only the open article prints, even if there are
        other cards on the page.
     3. REBUILDS the header — instead of the site's usual
        nav, we use a ::before pseudo-element on the title
        that reads "High Linn Farms · highlinnfarms.com" so
        the printout has a clean title line.
     4. ADDS a footer line — ::after on .article-full that
        reads "Printed from highlinnfarms.com · …" so the
        page has a citation at the bottom.
     5. APPENDS the URL after each Related Resources link
        (content: " (" attr(href) ")") — since you can't
        click on paper, the URL has to be printed out.
     6. FORCES page-break rules so paragraphs and figures
        don't get cut in half across pages.

   This block is what makes the "Print / Save as PDF" button
   produce a clean, shareable copy of a single article.
   ============================================= */
@media print {

  /* Hide all site chrome */
  header,
  nav,
  .page-banner,
  .category-bar,
  .farm-talk-question,
  .farm-talk-seasonal-note,
  .article-actions,
  .article-pdf-block,
  .btn-print-article,
  .btn-read-article,
  footer {
    display: none !important;
  }

  /* Hide all article cards that are NOT expanded */
  .article-card {
    display: none !important;
  }

  /* Show only the expanded article */
  .article-card.expanded {
    display: block !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide the card thumbnail photo and summary — article-full has the content */
  .article-card.expanded .article-card-photo {
    display: none !important;
  }

  .article-card.expanded .article-card-inner {
    padding: 0 !important;
  }

  /* Print header — site name + article title */
  .article-card.expanded .article-title::before {
    content: "High Linn Farms  ·  highlinnfarms.com";
    display: block;
    font-size: 0.8rem;
    font-weight: normal;
    color: #888;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ccc;
  }

  .article-card.expanded .article-title {
    font-size: 1.6rem;
    line-height: 1.3;
    margin-bottom: 0.3rem;
    page-break-after: avoid;
  }

  .article-card.expanded .article-meta {
    margin-bottom: 1.2rem;
    font-size: 0.85rem;
    color: #666;
  }

  /* Make sure the full article content is visible */
  .article-card.expanded .article-full {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
  }

  /* Clean body text for print */
  body {
    font-family: Georgia, serif;
    font-size: 11pt;
    color: #000;
    background: #fff;
    line-height: 1.7;
  }

  /* Photos */
  .article-card.expanded .article-inline-photo img,
  .article-card.expanded .before-after img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  .article-card.expanded figcaption {
    font-size: 0.8rem;
    color: #555;
    font-style: italic;
    margin-top: 0.3rem;
  }

  /* Resource links — print the URL after link text */
  .article-resources a::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
    color: #666;
  }

  .article-resources h4 {
    margin-top: 1.5rem;
    font-size: 1rem;
  }

  /* Page break control */
  h2, h3 {
    page-break-after: avoid;
  }

  p, figure {
    page-break-inside: avoid;
  }

  /* Footer credit line at bottom of print */
  .article-card.expanded .article-full::after {
    content: "Printed from highlinnfarms.com  ·  High Linn Farms, Prescott & Pleasanton, Kansas";
    display: block;
    margin-top: 2rem;
    padding-top: 0.8rem;
    border-top: 1px solid #ccc;
    font-size: 0.75rem;
    color: #888;
    text-align: center;
  }
}