/*loading fonts locally to keep the low load time*/
@font-face {
  font-family: "Inter";
  src:
    url("../fonts/Inter18pt-Regular.woff2") format("woff2"),
    url("../fonts/Inter18pt-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src:
    url("../fonts/Inter18pt-Medium.woff2") format("woff2"),
    url("../fonts/Inter18pt-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src:
    url("../fonts/Inter18pt-Bold.woff2") format("woff2"),
    url("../fonts/Inter18pt-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bree Serif";
  src:
    url("../fonts/BreeSerif-Regular.woff2") format("woff2"),
    url("../fonts/BreeSerif-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* 
root tokens — colours, typography, spacing, radii etc
*/
:root {
  /*typography

create semantic tokens (--font-heading , --font-body )
components will use these tokens, to change fonts etc later they only get updated here

*/
  --font-heading: "Bree Serif", serif;
  --font-body: "Inter", sans-serif;

  /* typography scale 
consistent scale and a predictable spacing between text
single source for all typography
*/

  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px (base) */
  --font-size-lg: 1.25rem; /* 20px */
  --font-size-xl: 1.5rem; /* 24px */
  --font-size-2xl: 2rem; /* 32px */
  --font-size-3xl: 3rem; /* 48px */
  /*a unitless line-height means it multiplies the element’s font size so font size x value */
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  /* weight = 100 > thin 700 > bold*/
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  /* heading tokens */
  --heading-line-height: var(--line-height-tight);
  --heading-weight: var(--font-weight-regular);
  --heading-font: var(--font-heading);

  /* body text tokens
fix text sizing here 
*/
  --body-font: var(--font-body);
  --body-line-height: var(--line-height-normal);
  --body-weight: var(--font-weight-regular);
  --body-size-small: var(--font-size-sm);
  --body-size-large: var(--font-size-lg);

  /* responsive typography 
the CSS clamp() function is used to set a value that will adjust responsively between a minimum value and a maximum value depending on the size of the viewport
reference www.w3schools.com if stuck
*/
  --heading-1-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-3xl));
  --heading-2-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl));
  --heading-3-size: clamp(var(--font-size-lg), 3vw, var(--font-size-xl));
  --heading-4-size: clamp(var(--font-size-md), 2.5vw, var(--font-size-lg));
  --body-size: clamp(var(--font-size-sm), 1.5vw, var(--font-size-md));
  /* spacing scale eliminate random spacing everything has a consistent scale*/
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-7: 3rem; /* 48px */
  --space-8: 4rem; /* 64px */

  /* windows standard width of a scrollbar*/
  --scrollbar-width: 17px;

  /*variable to set header height and body padding will keep both in sync
even when the site adjusts for nav dropdown*/
  --nav1-height: 40px;
  --nav2-height: 70px;
  --header-height: calc(var(--nav1-height) + var(--nav2-height));
  /*border radius keep a consistent radius across the sight*/
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1.5rem; /* 24px */
  --radius-xl: 3.75rem; /* 40px */
  /*responsive rounded corners to suit activity cards*/
  --radius-xl-responsive: clamp(
    var(--radius-xl),
    2vw,
    calc(var(--radius-xl) * 1.4)
  );
  --radius-md-responsive: clamp(
    var(--radius-md),
    1.5vw,
    calc(var(--radius-md) * 1.4)
  );

  /* brand colours (shared across themes) */
  --brand-barn-red: #5a0f0f;
  --brand-sun-gold: #e8c9a1;
  --brand-grass-green: #c7d7a4;
  --brand-sky-blue: #d8e4f0;
  --brand-earth-brown: #3a2a1e;
  /* light theme (default) */
  --color-bg: #f9f3e6;
  --color-surface: #f4e9d2;
  --color-text: #3a2a1e;
  --color-heading: #5a0f0f;
  --color-border: #e8c9a1;
  --color-accent: #c7d7a4;
  --color-accent-hover: #afc48b;
  --color-surface-hover: #ede1c8;
}
/*end of root section*/
/*global utilities these belong at the top*/
/*conditional scopes
these activate only when the selector matches dark theme
use @media (prefers-color-scheme: dark) to follow OS theme
the site will also include a toggle switch
*/
/*
--test-variable
*/
:root[data-theme="dark"] {
  --color-bg: #1f2e1a;
  --color-surface: #2d3f52;
  --color-text: #f4e9d2;
  --color-heading: #e8c9a1;
  --color-border: #3a2a1e;
  --color-accent: #c7d7a4;
  --color-accent-hover: #8fa86a;
  --color-surface-hover: #3a4a5c;

  /***debug may be surplus***/
  --color-button-dark: #34465a;
  --color-button-hover-dark: #526479;
}

/*layout container 
keep all containers looking clean and centered
*/
.container {
  max-width: 70rem; /* ~1120px */
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/*spacing 
simple consistent size across the site 
*/
.m-0 {
  margin: 0;
}
.mt-4 {
  margin-top: var(--space-4);
}
.mb-4 {
  margin-bottom: var(--space-4);
}
.pt-4 {
  padding-top: var(--space-4);
}
.pb-4 {
  padding-bottom: var(--space-4);
}

/*text alignment */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
/*defaults headings
this will ensure all heading always look the same
*/
h1 {
  font-family: var(--heading-font);
  font-size: var(--heading-1-size);
  line-height: var(--heading-line-height);
  font-weight: var(--heading-weight);
  color: var(--color-heading);
}
h2 {
  font-family: var(--heading-font);
  font-size: var(--heading-2-size);
  line-height: var(--heading-line-height);
  font-weight: var(--heading-weight);
  color: var(--color-heading);
}
h3 {
  font-family: var(--heading-font);
  font-size: var(--heading-3-size);
  line-height: var(--heading-line-height);
  font-weight: var(--heading-weight);
  color: var(--color-heading);
}
h4 {
  font-family: var(--heading-font);
  font-size: var(--heading-4-size);
  line-height: var(--heading-line-height);
  font-weight: var(--heading-weight);
  color: var(--color-heading);
}
/* defaults paragraphs */
p {
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);
  color: var(--color-text);
}
/* Give this <p> h2 presence without violating heading order */
#farm {
  font-family: var(--heading-font);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: var(--heading-line-height);
  font-weight: var(--heading-weight);
  color: var(--color-heading);
}

/*buttons section
consistent buttons using design tokens
padding uses site spacing scale, colours use site semantic tokens, font uses site typography tokens
*/
button {
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--body-line-height);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-accent);
  color: var(--color-heading);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
button:hover {
  background-color: var(--light-accent-hover);
}
.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-heading);
}
.btn-secondary {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-secondary:hover {
  background-color: var(--color-surface-hover);
}

:root[data-theme="dark"] button,
:root[data-theme="dark"] .btn-primary {
  background-color: var(--color-button);
  color: var(--color-heading);
  border-color: var(--color-border);

  border: 1px solid var(--color-text);
}
:root[data-theme="dark"] .btn-secondary {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text);

  border: 1px solid var(--color-text);
}

:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .btn-primary:hover {
  background-color: var(--color-button-hover-dark);

  border: 1px solid var(--color-text);
}
:root[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--color-surface-hover);

  border: 1px solid var(--color-text);
}

/*feedback button contrast clash*/
:root[data-theme="dark"] .button-special-border {
  border: 1px solid var(--color-text);
}
.button-special-border:hover {
  border: 1px solid var(--color-heading);
}

/* make <button> visually match nav <a> links */
.link-button {
  background: none;
  border: none;
  padding: var(--space-2) var(--space-3); /* match nav a */
  margin: 0;
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-md); /* match nav a */
  transition:
    background-color 0.2s ease,
    color 0.2s ease; /* match nav a */
}

.link-button:hover,
.link-button:focus {
  background-color: var(--color-surface-hover);
  color: var(--color-accent);
}

.link-button:focus-visible {
  outline: 2px solid var(--focus-color, #005fcc);
  outline-offset: 2px;
}

/*end of button section*/

/*form inputs section
forms designed to look like they are part of the same design using predefined tokens
*/
input,
textarea,
select {
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  font-weight: var(--body-weight);

  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);

  background-color: var(--color-surface);
  color: var(--color-text);

  width: 100%;
  box-sizing: border-box;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 40%, transparent);
  outline: none;
}

/* labels */
label {
  font-family: var(--body-font);
  font-size: var(--body-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  margin-bottom: var(--space-1);
  display: block;
}
/*end of form section*/
/*booking form section*/
/*floating button for the booking form*/
.floating-button {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  /* optional styling: make it feel more tappable */
  padding: var(--space-3) var(--space-5);
  /* optional styling: subtle box shadow so it lifts off the page */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  /* keep it above cards, nav, etc. */
  z-index: 999;
}

/*hidden booking form for floating button*/

/* overlay */
.booking-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

/*visible state */
.booking-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/*form container */
.booking-form {
  max-height: 80vh;
  background: var(--color-surface);
  width: 100%;
  max-width: 480px;
  padding: var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  /* allow scrolling */
  max-height: 90vh;
  overflow-y: auto;
}

.booking-form h3 {
  margin-bottom: var(--space-3);
}

/*slide up when active */
.booking-overlay.active .booking-form {
  transform: translateY(0);
}
body.booking-open {
  overflow: hidden;
  height: 100%;
  padding-right: var(--scrollbar-width);
}

/* close button (visual styling only) */
.close-button {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  font-size: var(--font-size-2xl);
  cursor: pointer;
}

/*form fields */
.booking-form label {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-medium);
}

.booking-form input,
.booking-form select,
.booking-form textarea {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--body-font);
}

/*submit button */
.submit-btn {
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
}

.booking-form-wrapper {
  max-width: 600px;
  margin: 1rem auto; /* lifts it off the floor + centers it */
  padding: 1rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

/* end of booking form section*/

/*drop down menu pointer*/
.chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 0.4rem;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg); /* ▼ */
}

.dropdown.open .chevron {
  transform: rotate(-135deg); /* ▲ */
}
/*end drop down menu pointer section*/

/* content card / panel section 
consistent content cards to mach design forms & cards should
now blend into pages and not look detached several pages will
use the same card system so there will be more then one group
of classes using this section
*/
.card,
.activity-card {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  padding: var(--space-5);
  margin-bottom: var(--space-6);

  box-shadow: 0 2px 4px color-mix(in srgb, var(--color-border) 20%, transparent);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.card:hover,
.activity-card:hover,
.about-card:hover {
  box-shadow: 0 6px 16px
    color-mix(in srgb, var(--color-border) 30%, transparent);
  transform: translateY(-4px);
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*image fade over card text on hover*/
.overlay-card {
  position: relative;
  overflow: hidden; /* keeps the image clipped to the card */
}

.overlay-card .overlay-image {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none; /* so hover still triggers on the card */
}

.overlay-card:hover .overlay-image {
  opacity: 1;
}
/*end of normal cards*/

/* the activity cards are meant to be visually exciting so I have create a whole set of 
   wrappers just for them but still using the existing tokens */
.activity-card__image-wrapper {
  position: absolute;
  top: -99px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--color-surface);
  /* soft bottom shadow */
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
}

.activity-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl-responsive) var(--radius-xl-responsive)
    var(--radius-md-responsive) var(--radius-md-responsive);
  position: relative;
  text-align: center;
  padding: 0;
  margin: 110px 0 30px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.08);
}

.activity-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-card__content {
  padding-top: 130px;
  padding-right: var(--space-6);
  padding-bottom: var(--space-6);
  padding-left: var(--space-6);
}
/*end of activities cards*/

/*about us card */
.about-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md-responsive) var(--radius-md-responsive)
    var(--radius-md-responsive) var(--radius-md-responsive);
  position: relative;
  text-align: center;
  padding: 0 0 var(--space-4);
  margin: 110px 0 30px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.08);
}

/*image wrapper — rectangular circle */
.about-card__image-wrapper {
  position: absolute;
  top: -135px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px; /* slightly wider for rectangle */
  height: 210px; /* rectangular shape */
  border-radius: var(--radius-xl-responsive);
  overflow: hidden;
  /*cutout effect */
  border: 6px solid var(--color-surface);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25); /* same lift */
  margin-top: 30px;
}

/*image */
.about-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*content */
.about-card__content {
  padding-top: 100px; /* same spacing as activity cards */
  padding-right: var(--space-6);
  padding-bottom: var(--space-6);
  padding-left: var(--space-6);
}
/*end of about card*/

/*sliding image card left and right*/
* {
  box-sizing: border-box;
}

/*slideshow container */
.slideshow-container {
  position: relative;
  height: auto;
  max-width: 500px;
  width: 100%;
}
.slideshow-container img {
  width: 100%;
  height: auto;
}

/*hide the images by default */
.mySlides {
  display: none;
}

/*next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  /* prevent text selection across all major browsers */
  -webkit-user-select: none; /* Safari, iOS Safari */
  user-select: none; /* modern browsers */
}

/*position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* on hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/*the dots indicators */
.slideshow-container .dots {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #bbb;
  border: none;
  padding: 0;
  margin: 10px 4px;
  cursor: pointer;
  display: inline-block;
}

.dot.active {
  background: #717171;
}
.slideshow-container .dot {
  padding: 0 !important;
}
.slideshow-container .prev,
.slideshow-container .next {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 2rem;
  color: inherit;
  line-height: 1;
}

.slideshow-container .prev:focus,
.slideshow-container .next:focus {
  outline: 2px solid #333;
  outline-offset: 4px;
}
.slideshow-container .prev:hover,
.slideshow-container .next:hover {
  background-color: black;
}

/*fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 1110px) {
  [data-page="shopandcafe"] .grid-2 {
    grid-template-columns: 1fr;
  }

  /*make slideshow expand like the card to remove right hand white space when responsive*/
  .slideshow-container {
    /*width: 100% is too much width x height so use max-width*/
    max-width: 700px;
  }
}
/*end of slide show and content cards*/

/*slideshow gallery on historical*/
.slideshow {
  position: relative;
  max-width: 600px;
  width: 100%;
  margin: 0 auto var(--space-5);
}

.slideshow .main-image img {
  max-width: 600px;
  height: auto;
  width: 100%;
  display: block;
  border-radius: 4px;
}

.slideshow .thumbnails {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.slideshow .thumbnails img {
  width: 16.66%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  border-radius: 3px;
  transition:
    opacity 0.3s ease,
    transform 0.2s ease;
}

.slideshow .thumbnails img.active {
  opacity: 1;
  transform: scale(1.05);
  outline: 2px solid var(--accent, #666);
}

.slideshow .nav {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 16px;
  color: white;
  font-size: 22px;
  font-weight: bold;
  /* prevent text selection across all major browsers */
  -webkit-user-select: none; /* Safari, iOS Safari */
  user-select: none;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  transition: background 0.3s ease;
}

.slideshow .nav:hover {
  background: rgba(0, 0, 0, 0.7);
}

.slideshow .prev {
  left: 0;
}
.slideshow .next {
  right: 0;
}
/*end of slideshow gallery section*/

/*feedback form */
.feedback-toggle {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md-responsive);
  background: var(--color-accent);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.feedback-panel {
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md-responsive);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease;
}

.feedback-panel.open {
  /* enough for the form */
  max-height: 500px;
  opacity: 1;
}

.feedback-form label {
  display: block;
  margin-bottom: var(--space-4);
  text-align: left;
}

.feedback-form input,
.feedback-form textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm-responsive);
  background: var(--color-surface-alt);
}

.feedback-submit {
  margin-right: var(--space-3);
}

.feedback-cancel {
  margin-left: var(--space-3);
}
.feedback-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text);
  line-height: 1;
  padding: var(--space-1);
  transition: opacity 0.2s ease;
}

.feedback-close:hover {
  opacity: 0.6;
}

.feedback-panel {
  position: relative; /* required for absolute close button */
}

/*end feedback form section*/

/* header, navbar, dropdown section */
/* historical-link for:DRY */
header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-3);
  /*fix header to top of page to keep navbar at top*/
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}
/* nav bar section code */
nav a,
.historical-link {
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
nav a:hover,
.historical-link:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-accent);
}
/*additional styling to the link on about.html*/
.historical-link {
  margin-bottom: var(--space-3);
  text-decoration: underline;
}

.nav {
  padding: 1rem 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  height: var(--nav1-height);
}

/*mobile first — hidden menu */
.nav-links {
  display: none;
  flex-direction: column;
  gap: 1rem;
  width: auto;
  padding: 1rem 0;
  background: var(--color-bg);
  position: absolute;
  left: 0;
  padding: var(--space-1) var(--space-5);
  gap: var(--space-4);
  top: 100%;
  z-index: 10;
  border-bottom-right-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-top: none; /* so it visually connects to the header */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
}
/*hamburger section*/
/*show links when hamburger is clicked */
.nav-links.nav-open {
  display: flex;
}

/*hamburger visible on mobile */
.nav-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-heading);
  flex-shrink: 0;
  margin-left: auto;
}
/*dark theme section*/
/*theme toggle button */
#theme-toggle {
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: var(--space-4);
}
/* icon */
#theme-toggle img {
  width: 35px;
  height: 35px;
  transition: opacity 0.2s ease;
}
/* hover */
#theme-toggle:hover {
  background-color: var(--color-surface-hover);
}
/*the site needs a drop down menu because there is to much going on the navbar*/
/*the dropdown menu */
.dropdown {
  position: relative; /* anchor point */
  z-index: 1;
  display: inline-block; /* or block, but must not stretch with content */
}
.dropdown-trigger:hover {
  background: var(--color-surface-hover);
}

/* 
  dropdown trigger behaviour:
  - remove default focus styling so the button doesn't stay highlighted after click.
  - keep hover highlight active even after the button has been focused.
  - order matters: focus reset comes first, hover override comes after.
  - Do NOT re-order these rules — it breaks hover after click.
*/
.dropdown-trigger:focus {
  outline: none;
  color: inherit;
  background: transparent;
}
.dropdown-trigger:hover {
  background: var(--color-surface-hover);
}

#active {
  border-bottom: 4px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
  padding: 0 0 2px 4px;
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-menu {
  position: absolute; /* remove from flex layout */
  z-index: 10; /* ensures menus stack above their triggers */
  inset: auto auto auto 0; /* ensures it stays anchored */
  top: 100%;
  left: 0;
  /* remove the hover gap */
  margin-top: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 160px;
  padding: var(--space-2) 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.dropdown-menu a {
  display: block;
  white-space: nowrap;
  padding: var(--space-2) var(--space-4);
}

/*dark mode = sun */
:root[data-theme="dark"] #theme-icon {
  content: url("../svg/lightmode.svg");
}

.logo {
  width: 50px;
  height: auto;
  display: block;
  color: black;
}
[data-theme="dark"] .logo {
  color: #fff;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space between logo + title */
}
/*end of header navbar and utils section*/

/*hero section
reminder use of tokens to follow/create site design
*/
.hero-gen {
  position: relative;
  padding: var(--space-8) 0;
  background-color: var(--color-surface);
  color: var(--color-heading);
  text-align: center;
  background-size: cover;
  background-position: center;
  min-height: 55vh;
}

.hero-historical {
  background-image: url("../images/ach.webp");
}
.hero {
  background-image: url("../images/hero.webp");
}
.hero-about {
  background-image: url("../images/about.webp");
}
.hero-shop {
  background-image: url("../images/sc19.webp");
}
.hero-activities {
  background-image: url("../images/hero-activities2.webp");
}
.hero-seasonal {
  background-image: url("../images/hero-seasonal1.webp");
}
.hero-gallery {
  background-image: url("../images/hero-gallery2.webp");
}

.hero h1 {
  margin-bottom: var(--space-4);
  font-size: clamp(1.8rem, 4vw, var(--heading-1-size));
}

.hero-overlay h1 {
  margin-bottom: var(--space-4);
  font-size: clamp(1.8rem, 4vw, var(--heading-1-size));
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  margin: var(--space-1) var(--space-0);
}

.hero p {
  margin-bottom: var(--space-6);
  font-size: var(--body-size-large);
}

.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4); /* adjust transparency */
  pointer-events: none;
}

.hero-overlay .text-wrap {
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  /*WebKit implementations, improving the user experience and compatibility for individuals on older devices.*/
  -webkit-backdrop-filter: blur(var(--space-1));
  backdrop-filter: blur(var(--space-1));
  background: rgba(0, 0, 0, 0.1); /* tweak as needed */
  border-radius: var(--radius-md);
}

:root[data-theme="dark"] h1 {
  color: var(--brand-barn-red);
}

/*end hero section*/

/*home page introduction */

#intro img {
  height: 300px;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
  position: relative;
  top: -6px;
}

/*grid layout
this is what is going to hold all of the content together 
*/
.grid {
  display: grid;
  gap: var(--space-6);
}
.grid-1 {
  grid-template-columns: 1fr;
}

.grid-2 {
  justify-items: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  justify-items: center;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/*end of grid section*/

/*footer section*/
footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text);
  font-size: var(--body-size-small);
}

footer a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-2);
}

footer a:hover {
  text-decoration: underline;
}

footer p {
  margin: var(--space-2) 0; /* or 0 if you want it tight */
}

#socialmedia,
.socialmedia {
  margin-top: var(--space-2);
}

#socialmedia a,
.socialmedia a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  padding-right: var(--space-2);
}

#socialmedia a:hover,
.socialmedia a:hover {
  color: var(--light-accent-hover);
}

:root[data-theme="dark"] #socialmedia a:hover {
  background-color: var(--dark-accent-hover);
}

.icon {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

/*nice round icons for a clean look*/
#icon-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  image-rendering: auto;
  background-color: black;
}
.footer-styling {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
/*end of footer section*/

/*body styling*/
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  padding-top: var(--header-height);
}

/*modal for newsletter */
/*backdrop */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  z-index: 999;
}
/*modal container */
.modal {
  background: var(--color-surface);
  color: var(--color-text);
  width: min(500px, 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: modal-in 0.2s ease-out;
}
/*header */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-hover);
}

.modal-header h2 {
  margin: 0;
  color: var(--color-heading);
}

/*close button */
.modal-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-heading);
}

/*body */
.modal-body {
  padding: var(--space-5);
}

/*footer */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}
/*end of modal section*/

/*gallery grid system */
.masonry {
  column-count: 4;
  column-gap: 1rem;
  padding: 1rem;

  max-width: none;
  width: 100%;

  grid-column: 1 / -1;
}
.masonry img {
  width: 100%;
  margin-bottom: 1rem;
  display: block;
  break-inside: avoid;
  border-radius: 6px;

  height: auto !important;
  object-fit: contain !important;
}
/*responsive breakpoints for gallery*/
@media (max-width: 1200px) {
  .masonry {
    column-count: 3;
  }
}
@media (max-width: 800px) {
  .masonry {
    column-count: 2;
  }
}
@media (max-width: 500px) {
  .masonry {
    column-count: 1;
  }
}
@media (max-width: 600px) {
  .logo {
    width: 45px;
  }
}
@media (min-width: 768px) {
  /*hide hamburger */
  .nav-toggle {
    display: none;
  }
}
/*end gallery section*/

/* desktop */
@media (min-width: 768px) {
  /*show links in a row */
  .nav-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex: 1;
    min-width: 0;
    width: 100%;
    top: 100%;
    z-index: 10;
  }

  /*hide hamburger */
  .nav-toggle {
    display: none;
  }
}

@media (max-width: 768px) {
  .dropdown {
    position: static;
  }

  .dropdown-menu {
    position: absolute;
    top: 55%; /* sits directly below parent */
    left: 138px; /* aligns left edge */
    margin: 0;
  }
}
@media (max-width: 768px) {
  :root {
    --header-height: var(--nav1-height);
  }
}

body {
  padding-top: var(--header-height);
}

@media (max-width: 400px) {
  header {
    padding: 1.5rem var(--space-3);
  }

  .nav-header {
    height: auto;
  }

  body {
    padding-top: calc(var(--nav1-height) + 3.5rem);
  }

  .about-card__image-wrapper {
    position: absolute;
    top: -105px;
    left: 50%;
    width: 220px;
    height: auto;
  }

  #farm {
    line-height: 1.15;
  }
}
@media (max-width: 400px) {
  .hero {
    background-image: url("../images/hero-mobile.webp");
    .hero-gen {
      /*reduce height so the phone isn't zooming into the middle */
      /*min-height: 40vh;*/

      /*keep cover, but shift the crop upward for better composition */
      background-position: center top;

      /*slightly reduce vertical padding so text fits comfortably */
      padding: var(--space-6) 0;
    }

    /*all hero variants to follow the same rule */
    .hero,
    .hero-about,
    .hero-shop,
    .hero-historical,
    .hero-activities,
    .hero-seasonal,
    .hero-gallery {
      /*min-height: 40vh;*/
      background-position: center top;
    }

    /* typography tuning for small screens */
    .hero h1,
    .hero-overlay h1 {
      font-size: 1.6rem;
      line-height: 1.2;
      margin-bottom: var(--space-3);
    }

    .hero p {
      font-size: var(--body-size);
      margin-bottom: var(--space-4);
    }

    /* overlay text box refinement */
    .hero-overlay .text-wrap {
      padding: var(--space-2) var(--space-3);
    }
  }
}