/* ============================================================
   Elangeni Farm - bws.scss
   Single source of truth for the site's look & feel.
   Tweak the variables below and recompile to bws.css.

   Colours and fonts are carried over from the 2026 WordPress
   theme (hunter green / farmstead cream / mulberry purple,
   Bree Serif + Inria Sans) so the rebuild looks the same.

   Class names deliberately avoid Bulma's own (.container,
   .column, .section, .footer, .title, .tile, .card, .button,
   .field, .label, .input ...). Bulma's rules outrank ours when
   the names collide - check css/bulma.css before adding one.
   ============================================================ */
@import url(css/bulma.css);
/* ---------- Palette ---------- */
/* ---------- Type ---------- */
/* ---------- Metrics ---------- */
/* ---------- Links ---------- */
/* ---------- Headings ---------- */
/* ---------- Navigation ---------- */
/* ---------- Buttons ---------- */
/* ---------- Tiles ---------- */
/* ---------- Breakpoints (max-width) ---------- */
/* ============================================================
   Global
   ============================================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  background: #F7F3E9; }

html.is-locked {
  overflow: hidden; }

html, body {
  font-family: "Inria Sans", Arial, Helvetica, sans-serif;
  color: #1F1F1F;
  font-size: 18px;
  line-height: 1.6;
  background: #F7F3E9; }

body {
  padding-top: 56px; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Bree Serif", Georgia, serif;
  font-weight: 400;
  line-height: 1.15;
  color: #1F1F1F;
  letter-spacing: 1px;
  margin-bottom: 20px; }

h1 {
  font-size: 64px; }

h2 {
  font-size: 48px; }

h3 {
  font-size: 32px; }

h4 {
  font-size: 23.04px; }

p {
  margin-bottom: 20px; }

p:last-child {
  margin-bottom: 0; }

.lead {
  font-size: 19.8px; }

a {
  color: #2D4F36;
  font-weight: 700;
  text-decoration: none;
  transition: color .25s; }

a:hover {
  color: #4B2C46; }

strong {
  color: inherit; }

img {
  display: block;
  max-width: 100%;
  height: auto; }

:focus-visible {
  outline: 2px solid #4B2C46;
  outline-offset: 2px; }

.text-center {
  text-align: center; }

/* ============================================================
   Sections
   ============================================================ */
.band {
  padding: 64px 32px; }

.band-cream {
  background: #F7F3E9; }

.band-green {
  background: #2D4F36;
  color: #FFFFFF; }

.band-green h1, .band-green h2, .band-green h3, .band-green p {
  color: #FFFFFF; }

.band-green a {
  color: #FFFFFF;
  text-decoration: underline; }

.band-green a:hover {
  color: #F7F3E9; }

.wrap {
  max-width: 1512px;
  margin: 0 auto; }

.wrap.narrow {
  max-width: 900px; }

/* ============================================================
   Navigation
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #2D4F36;
  box-shadow: 4px 4px 6px 2px rgba(0, 0, 0, 0.1); }

.site-nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 24px; }

.nav-logo img {
  width: 150px;
  height: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 56px; }

.nav-links a {
  position: relative;
  font-family: "Inria Sans", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #F7F3E9; }

.nav-links a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #FFFFFF;
  transition: width .4s; }

.nav-links a:hover {
  color: #FFFFFF; }

.nav-links a:hover::before {
  width: 100%; }

/* CSS-only burger. The checkbox is visually hidden but still focusable,
   so the menu can be opened from the keyboard. */
.menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none; }

.menu-burger {
  display: none;
  padding: 8px 4px;
  cursor: pointer; }

.menu-burger span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px 0;
  background: #F7F3E9;
  transition: transform .3s, opacity .3s; }

.menu-toggle:focus-visible + .menu-burger {
  outline: 2px solid #F7F3E9;
  outline-offset: 2px; }

.menu-toggle:checked + .menu-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg); }

.menu-toggle:checked + .menu-burger span:nth-child(2) {
  opacity: 0; }

.menu-toggle:checked + .menu-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block;
  font-family: "Inria Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  padding: 10px 22px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background .25s; }

.btn-purple {
  background: #4B2C46;
  color: #FFFFFF; }

.btn-purple:hover, .btn-purple:focus {
  background: #6B4263;
  color: #FFFFFF; }

.band-green .btn-purple {
  text-decoration: none; }

/* ============================================================
   Home - masthead
   ============================================================ */
.masthead {
  position: relative;
  height: calc(100vh - 56px);
  min-height: 460px;
  max-height: 860px;
  overflow: hidden;
  background: #2D4F36; }

.masthead-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover; }

.masthead-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 32px;
  text-align: center; }

.masthead-title {
  margin: auto 0; }

.masthead-title p {
  font-family: "Inria Sans", Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 48px;
  line-height: 1.2;
  color: #FFFFFF;
  margin-bottom: 16px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }

.masthead-title h1 {
  margin: 0; }

.masthead-title h1 img {
  width: 400px;
  max-width: 100%;
  margin: 0 auto; }

.masthead-sheep {
  width: 250px;
  max-width: 60%; }

/* ============================================================
   Produce tiles (elements/produce-tiles.php)
   ============================================================ */
.ptiles {
  display: grid; }

.ptiles-2 {
  grid-template-columns: 1fr 1fr; }

.ptiles-3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px; }

.ptile {
  position: relative;
  display: block;
  height: 360px;
  overflow: hidden;
  background: #4B2C46; }

.ptile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s; }

.ptile:hover img {
  transform: scale(1.04); }

.ptile-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 64px 32px;
  background: rgba(0, 0, 0, 0.6);
  transition: background .3s; }

.ptiles-3 .ptile-label {
  justify-content: center; }

.ptile:hover .ptile-label {
  background: rgba(0, 0, 0, 0.25); }

.ptile-title {
  font-family: "Bree Serif", Georgia, serif;
  font-size: 23.04px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #FFFFFF; }

/* ============================================================
   Two-column text / photo rows (about, produce)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch; }

.split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 40px; }

.split-media img {
  width: 100%; }

.split-fill img {
  height: 100%;
  min-height: 360px;
  object-fit: cover; }

.split-flip .split-media {
  order: -1; }

.story-logo {
  width: 600px;
  max-width: 100%;
  margin: 40px auto 0; }

/* ============================================================
   Gallery grid + slideshow (elements/gallery.php, js/lightbox.js)
   ============================================================ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; }

.photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(0, 0, 0, 0.15); }

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s, opacity .3s; }

.photo:hover img {
  transform: scale(1.05);
  opacity: .9; }

#lightbox {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden; }

/* Open/close: the photo scales 0.8 -> 1 while the backdrop fades.
   Driven by .is-opening / .is-closing from js/lightbox.js. The settled
   state is the default, so a script failure leaves it visible. */
#lightbox::backdrop {
  background: rgba(0, 0, 0, 0.9);
  transition: background .3s ease-out; }

#lightbox.is-opening::backdrop, #lightbox.is-closing::backdrop {
  background: rgba(0, 0, 0, 0); }

#lightbox figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 70px 30px;
  box-sizing: border-box;
  opacity: 1;
  transform: scale(1);
  transition: opacity .2s ease-in-out, transform .2s ease-in-out; }

#lightbox.is-opening figure, #lightbox.is-closing figure {
  opacity: 0;
  transform: scale(0.8); }

#lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  opacity: 0;
  transition: opacity .25s; }

#lightbox img.is-ready {
  opacity: 1; }

#lightbox figcaption {
  color: #FFFFFF;
  font-family: "Inria Sans", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  margin-top: 12px;
  min-height: 21px; }

.lb-count {
  opacity: .65;
  margin-left: 8px; }

/* The scaled figure is a stacking context that covers the whole dialog,
   so the buttons need z-index to stay clickable above it. */
#lightbox button {
  position: absolute;
  z-index: 2;
  background: none;
  border: 0;
  color: #FFFFFF;
  font-family: "Inria Sans", Arial, Helvetica, sans-serif;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
  transition: opacity .2s; }

#lightbox button:hover, #lightbox button:focus-visible {
  opacity: 1; }

#lightbox button[hidden] {
  display: none; }

.lb-close {
  top: 8px;
  right: 14px;
  font-size: 44px;
  padding: 4px 10px; }

.lb-prev, .lb-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 70px;
  padding: 20px 14px; }

.lb-prev {
  left: 6px; }

.lb-next {
  right: 6px; }

@media (prefers-reduced-motion: reduce) {
  #lightbox figure, #lightbox::backdrop, .photo img, .ptile img {
    transition: none; } }
/* ============================================================
   Contact form (elements/contact-form.php)
   ============================================================ */
.form-box {
  max-width: 600px;
  margin: 32px auto 0;
  text-align: left; }

.contact-form {
  position: relative; }

.contact-form label {
  display: block;
  font-family: "Inria Sans", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #1F1F1F;
  margin-bottom: 4px; }

.contact-form.on-green label {
  color: #FFFFFF; }

.contact-form .optional {
  font-weight: 300;
  opacity: .75; }

.contact-form input, .contact-form select, .contact-form textarea {
  display: block;
  width: 100%;
  padding: 10px;
  font-family: "Inria Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #1F1F1F;
  background: #FFFFFF;
  border: 1px solid #222222;
  border-radius: 5px;
  box-shadow: none; }

.contact-form textarea {
  resize: vertical;
  min-height: 160px; }

.contact-form [aria-invalid="true"] {
  border-color: #A3261B;
  box-shadow: 0 0 0 1px #A3261B; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px; }

.form-field {
  margin-bottom: 16px; }

.field-error {
  display: block;
  font-size: 14px;
  color: #A3261B;
  margin-top: 4px; }

.contact-form.on-green .field-error {
  color: #FFD4CF; }

.form-alert {
  background: #FFFFFF;
  color: #A3261B;
  border-left: 4px solid #A3261B;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 16px; }

.form-submit {
  text-align: right; }

.form-notice {
  background: #FFFFFF;
  color: #1F1F1F;
  border-left: 4px solid #2D4F36;
  padding: 16px 20px;
  text-align: left; }

.band-green .form-notice {
  color: #1F1F1F; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.form-trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px; }

.contact-main .contact-form {
  max-width: 800px;
  margin-top: 32px; }

.contact-side {
  padding-top: 120px; }

.contact-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0; }

.contact-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px; }

.contact-list img {
  width: 26px;
  height: 26px;
  flex-shrink: 0; }

.contact-list a {
  font-size: 19.8px;
  font-weight: 400;
  color: #1F1F1F; }

.contact-list a:hover {
  color: #2D4F36; }

.map-band {
  padding: 0 32px 64px; }

.map {
  display: block;
  width: 100%;
  height: 450px;
  border: 0; }

/* ============================================================
   Social icons (elements/social.php)
   ============================================================ */
.social-list {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0; }

.social-list a {
  display: block;
  padding: 5px;
  opacity: .8;
  transition: opacity .3s; }

.social-list a:hover {
  opacity: 1; }

.social-list img {
  width: 25px;
  height: 25px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: #2D4F36;
  color: #F7F3E9;
  padding: 24px 32px;
  font-size: 14px;
  font-weight: 300; }

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px; }

.footer-item {
  display: flex;
  align-items: center;
  gap: 40px; }

.footer-logo {
  width: 180px; }

.footer-member {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400; }

.footer-member img {
  width: 60px; }

.site-footer a {
  color: #FFFFFF;
  font-weight: 700; }

.site-footer a:hover {
  color: #F7F3E9; }

.footer-end {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px; }

/* ============================================================
   Events page
   ============================================================ */
/* Photo banner with the page title */
.page-hero {
  position: relative;
  height: 62vh;
  min-height: 380px;
  max-height: 680px;
  overflow: hidden;
  background: #2D4F36; }

.page-hero-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover; }

.page-hero-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.4)); }

.page-hero h1 {
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); }

.eyebrow {
  font-family: "Inria Sans", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #F7F3E9;
  margin-bottom: 12px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }

/* Three quick facts under the intro */
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  list-style: none;
  margin: 48px auto 0;
  padding: 32px 0 0;
  border-top: 1px solid rgba(45, 79, 54, 0.18);
  text-align: center;
  font-size: 15px;
  letter-spacing: .04em;
  color: #6B6B6B; }

.fact-figure {
  display: block;
  font-family: "Bree Serif", Georgia, serif;
  font-size: 30px;
  letter-spacing: 1px;
  color: #2D4F36;
  margin-bottom: 4px; }

/* Price tables */
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  font-variant-numeric: tabular-nums; }

.price-table caption {
  caption-side: top;
  text-align: left;
  font-family: "Bree Serif", Georgia, serif;
  font-size: 26px;
  letter-spacing: 1px;
  color: #2D4F36;
  padding-bottom: 12px; }

.price-table thead th {
  font-family: "Inria Sans", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6B6B6B;
  text-align: left;
  padding: 0 0 8px;
  border-bottom: 2px solid #2D4F36; }

.price-table td, .price-table tbody th {
  padding: 9px 0;
  border-bottom: 1px solid rgba(45, 79, 54, 0.18);
  text-align: left;
  font-weight: 400;
  vertical-align: baseline; }

.price-table .unit {
  padding-left: 16px; }

.price-table td.unit {
  font-size: 14px;
  color: #6B6B6B;
  white-space: nowrap; }

.price-table .price {
  padding-left: 16px;
  text-align: right;
  white-space: nowrap; }

.price-table td.price {
  font-weight: 700;
  color: #1F1F1F; }

.price-table .subhead th {
  padding: 20px 0 6px;
  font-family: "Bree Serif", Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .5px;
  color: #4B2C46; }

.price-table tbody .subhead:first-child th {
  padding-top: 12px; }

.venue-table {
  margin-top: 8px;
  font-size: 18px; }

.venue-table td, .venue-table tbody th {
  padding: 16px 0; }

.venue-table tbody th {
  font-family: "Bree Serif", Georgia, serif;
  font-size: 20px;
  color: #2D4F36; }

.venue-table td.price {
  font-family: "Bree Serif", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: #1F1F1F; }

/* For captions that are there for screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; }

/* Three photos edge to edge */
.photo-strip {
  display: grid;
  grid-template-columns: 1.35fr 1fr .75fr;
  grid-template-rows: 380px; }

.photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

/* Rental price cards */
.narrow-block {
  max-width: 900px;
  margin: 0 auto 48px; }

.rental-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px; }

.rental-card {
  background: #FFFFFF;
  padding: 32px 36px 28px;
  border-top: 4px solid #2D4F36;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }

/* Setup fee */
.setup-price {
  font-family: "Bree Serif", Georgia, serif;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 24px; }

.setup-price span {
  display: block;
  margin-top: 10px;
  font-family: "Inria Sans", Arial, Helvetica, sans-serif;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F7F3E9; }

/* ============================================================
   Responsive
   ============================================================ */
/* Tablet and below: collapse the nav, stack the two-column rows */
@media screen and (max-width: 1023px) {
  .menu-burger {
    display: block; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(45, 79, 54, 0.97);
    box-shadow: 4px 4px 6px 2px rgba(0, 0, 0, 0.1); }

  .menu-toggle:checked ~ .nav-links {
    display: flex; }

  .split {
    grid-template-columns: 1fr; }

  .split-text {
    padding: 40px 16px; }

  .split-flip .split-media {
    order: 0; }

  .split-reverse-mobile .split-media {
    order: -1; }

  .split-fill img {
    min-height: 0;
    height: 320px; }

  .ptiles-3 {
    grid-template-columns: 1fr;
    gap: 16px; }

  .ptiles-3 .ptile {
    height: 260px; }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 24px; }

  .contact-side {
    padding-top: 0; }

  .footer-inner, .footer-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px; }

  .footer-end {
    align-items: flex-start; }

  .rental-grid {
    grid-template-columns: 1fr;
    gap: 24px; }

  .facts {
    margin-top: 36px; } }
/* Phones */
@media screen and (max-width: 767px) {
  html, body {
    font-size: 16px; }

  h1 {
    font-size: 40px; }

  h2 {
    font-size: 32px; }

  h3 {
    font-size: 24px; }

  .band {
    padding: 36px 16px; }

  .map-band {
    padding: 0 16px 36px; }

  .site-nav-inner {
    padding: 0 16px; }

  .masthead {
    height: calc(100svh - 56px); }

  .masthead-inner {
    padding: 40px 16px; }

  .masthead-title p {
    font-size: 32px; }

  .ptiles-2 {
    grid-template-columns: 1fr; }

  .ptile {
    height: 260px; }

  .ptile-label {
    padding: 32px 16px; }

  .form-row {
    grid-template-columns: 1fr; }

  .form-submit {
    text-align: left; }

  .form-submit .btn {
    width: 100%; }

  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px; }

  .lb-prev, .lb-next {
    font-size: 48px;
    padding: 16px 6px; }

  #lightbox figure {
    padding: 50px 12px 24px; }

  .map {
    height: 320px; }

  .page-hero {
    height: 50svh;
    min-height: 300px; }

  .facts {
    gap: 12px;
    font-size: 13px; }

  .fact-figure {
    font-size: 20px; }

  .photo-strip {
    grid-template-rows: 180px; }

  .rental-card {
    padding: 24px 18px 20px; }

  .price-table caption {
    font-size: 22px; }

  .venue-table td.price {
    font-size: 19px; }

  .setup-price {
    font-size: 44px; } }