/* ==========================================================================
   Ceres Farm – site stylesheet  (/assets/css/style.css)

   One file for the whole site; every page links it. Mobile-first: the base
   rules are for phones, "@media (min-width: 768px)" adds the desktop layout
   and "@media (min-width: 1024px)" a few wide-screen tweaks.

   Contents
     1.  Design tokens (colours, fonts, spacing)
     2.  Reset and base elements
     3.  Typography: headings, paragraphs, lists, tables, links
     4.  Utilities: .container, .section gaps, .sr-only, .skip-link, .text-center
     5.  Header: logo, navigation, dropdown, mobile Menu button
     6.  Hero slider (home page)
     7.  Buttons
     8.  Page banner strip
     9.  Column rows (.cols)
     10. Image tiles (home page, Our Products crop tiles)
     11. Parallax call-to-action band
     12. Video
     13. Accordion (Employment FAQ)
     14. Galleries: three-up grid, masonry grid, lightbox
     15. Media list cards
     16. Logo rows
     17. Crop sections, spec tables, availability table
     18. Forms
     19. Social buttons and "Follow us" block
     20. Footer
     21. Back-to-top button
     22. Simple pages (thank-you, 404), print, reduced motion
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens
   All colours were measured from the live WordPress theme. Change a value
   here and it changes everywhere.
   -------------------------------------------------------------------------- */
:root {
  /* Colours */
  --c-bg: #ffffff;              /* page and header background */
  --c-text: #444444;            /* body copy */
  --c-heading: #262626;         /* headings and nav links */
  --c-input-text: #43454b;      /* text inside form fields */
  --c-green: #017f01;           /* brand green: links, focus rings */
  --c-green-media: #307a38;     /* "Read Article" links on the Media page */
  --c-khaki: #c6c5b3;           /* outlined buttons, submit buttons, round social buttons */
  --c-khaki-dark: #adac9a;      /* khaki hover */
  --c-khaki-text: #6f6e5c;      /* darker khaki for the text and border of outlined buttons (5.2:1 on white) */
  --c-offwhite: #f8f8f8;        /* footer background */
  --c-footer-link: #666666;
  --c-nav-hover: #5d5d5d;
  --c-nav-current: #676767;     /* nav text of the current page */
  --c-nav-underline: #444444;   /* 3px underline under the current nav item (live site renders grey) */
  --c-rule: rgba(0, 0, 0, .05); /* hairlines */
  --c-input-border: #949494;    /* form field borders (3:1 on white, WCAG 1.4.11) */
  --c-card-bg: #fcfcfc;         /* Media page cards */
  --c-card-border: #d3d3d3;
  --c-accordion: #767676;       /* FAQ question bars: white text needs 4.5:1 */
  --c-accordion-hover: #6d6d6d;
  --c-accordion-body: #f9f9f9;
  --c-tile-base: #333333;       /* colour under the home tiles and hero while loading */
  --c-tile-overlay: rgba(51, 51, 51, .5);
  --c-table-th: #f1f1f1;
  --c-table-td: #f6f6f6;
  --c-table-td-alt: #f4f4f4;
  --c-season-full: #017f01;     /* availability table: in season */
  --c-season-limited: #9bcd5b;  /* availability table: limited */

  /* Type */
  --font: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lh: 1.618;
  --h1: 2.617924em;  --h1-m: 1.617924em;   /* desktop / phone */
  --h2: 2em;         --h2-m: 1.517924em;
  --h3: 1.618em;     --h3-m: 1.417924em;
  --h4: 1.41575em;   --h4-m: 1.31575em;

  /* Spacing */
  --space-p: 1.41575em;      /* paragraph bottom margin (22.65px) */
  --space-h: .5407911em;     /* heading bottom margin */
  --space-h-top: 2.2906835em;/* heading top margin when it follows text */
  --container: 1064px;
  --gutter: 42px;
  --gutter-sm: 22px;
  --col-gap: 30px;           /* gap between columns and between rows */
}


/* --------------------------------------------------------------------------
   2. Reset and base elements
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: var(--lh);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

main { display: block; }

img, video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

svg { overflow: hidden; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; }

hr {
  height: 1px;
  margin: 0 0 var(--space-p);
  border: 0;
  background: var(--c-rule);
}


/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-h);
  font-weight: 400;
  line-height: 1.214;
  letter-spacing: -1px;
  color: var(--c-heading);
}
h1 { font-size: var(--h1-m); }
h2 { font-size: var(--h2-m); }
h3 { font-size: var(--h3-m); }
h4 { font-size: var(--h4-m); }
h5, h6 { font-size: 1em; }

@media (min-width: 768px) {
  h1 { font-size: var(--h1); }
  h2 { font-size: var(--h2); }
  h3 { font-size: var(--h3); }
  h4 { font-size: var(--h4); }
}

/* A heading that follows text gets extra room above it */
p + h2, p + h3, p + h4,
ul + h2, ul + h3, ul + h4,
ol + h2, ol + h3, ol + h4,
table + h2, table + h3,
form + h2, form + h3,
.video + h2, .video + h3 { margin-top: var(--space-h-top); }

/* Terms page: an h3 straight after an h2 (or after the h1.as-h2 page title) sits under a hairline */
h2 + h3,
.as-h2 + h3 {
  padding-top: var(--space-h);
  border-top: 1px solid var(--c-rule);
}

/* Utility: render a page title at the h2 size (Terms of Service) */
.as-h2 { font-size: var(--h2-m); }
@media (min-width: 768px) { .as-h2 { font-size: var(--h2); } }

p { margin: 0 0 var(--space-p); }

b, strong { font-weight: 600; }
em, cite, i { font-style: italic; }
small { font-size: .875em; }

blockquote {
  margin: 0 0 var(--space-p);
  padding: 0 1em;
  border-left: 3px solid var(--c-rule);
  font-style: italic;
}

/* Content lists (nav, dots and other UI lists reset themselves) */
main ul, main ol {
  margin: 0 0 var(--space-p) 3em;
  padding: 0;
}
main ul { margin-left: 20px; list-style: disc; }
main ol { list-style: decimal; }
main li > ul, main li > ol { margin: 0 0 0 1em; }
/* Terms page sub-clauses: <ol type="a"> and <ol type="i"> keep their letters / roman numerals */
main ol[type="a"] { list-style-type: lower-alpha; }
main ol[type="i"] { list-style-type: lower-roman; }

/* Links: brand green, no underline (live look), underline on hover (our addition) */
a {
  color: var(--c-green);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}
/* Links inside running text are underlined so they do not rely on colour alone
   (green on grey text is under 3:1). Nav, buttons, tiles and the footer keep no underline. */
main p a,
main li a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Tables */
table {
  width: 100%;
  margin: 0 0 var(--space-p);
  border-collapse: separate;
  border-spacing: 0;
}
td, th {
  padding: 1em var(--space-p);
  text-align: left;
  vertical-align: top;
}
th {
  font-weight: 600;
  background: var(--c-table-th);
}
tbody td { background: var(--c-table-td); }
tbody tr:nth-child(2n) td { background: var(--c-table-td-alt); }


/* --------------------------------------------------------------------------
   4. Utilities
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter-sm);
}
@media (min-width: 568px) {
  .container { padding: 0 var(--gutter); }
}

/* Vertical rhythm between page rows. Default 30px; modifiers for the rest. */
.section { margin-bottom: var(--col-gap); }
.section--gap-100 { margin-bottom: 100px; }
.section--gap-68 { margin-bottom: 68px; }
.section--gap-40 { margin-bottom: 40px; }
.section--gap-20 { margin-bottom: 20px; }
.section--gap-0 { margin-bottom: 0; }
.section--pad-top { padding-top: var(--col-gap); }

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

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content" link: hidden until it receives keyboard focus */
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 1em 1.618em;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--c-bg);
  color: var(--c-heading);
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
}


/* --------------------------------------------------------------------------
   5. Header
   Phone: logo left, "Menu" button right, nav drops down as a panel.
   Desktop (>= 768px): logo centred on top, nav row centred underneath.
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 100;
  background: var(--c-bg);
  color: var(--c-text);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-header__logo {
  display: block;
  flex: 0 1 auto;
  line-height: 0;
}
.site-header__logo img {
  width: 190px;
  max-width: 100%;
  height: auto;
}

/* Mobile "Menu" button with a three-bar icon drawn in CSS */
.nav-toggle {
  position: relative;
  max-width: 120px;
  padding: 9.9px 14px 9.9px 42px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--c-khaki);
  color: var(--c-heading);           /* dark text on khaki: 8.7:1 (off-white was 1.6:1) */
  font-size: .7em;
  letter-spacing: -.5px;
  line-height: var(--lh);
  text-transform: none;
}
.nav-toggle:hover,
.nav-toggle:focus-visible { background: var(--c-khaki-dark); }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 14px;
  width: 14px;
  height: 2px;
  background: var(--c-heading);
  transition: transform .2s, background .2s;
}
.nav-toggle__bars {
  top: 50%;
  margin-top: -1px;
}
.nav-toggle__bars::before { left: 0; top: -5px; }
.nav-toggle__bars::after  { left: 0; top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5px) rotate(-45deg); }

/* Mobile nav panel (hidden until the Menu button adds .is-open) */
.nav {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 999;
  width: 100%;
  padding: 0 var(--gutter-sm);
  background: var(--c-bg);
  box-shadow: 0 15px 20px rgba(0, 0, 0, .1);
}
.nav.is-open { display: block; }
@media (min-width: 568px) {
  .nav { padding: 0 var(--gutter); }
}

.nav__list,
.nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
  border-top: 1px solid var(--c-rule);
}
.nav__item:first-child { border-top: 0; }

.nav__item > a,
.nav__sub a {
  display: block;
  padding: 14px 0;
  color: var(--c-heading);
  text-decoration: none;
}
.nav__item > a:hover,
.nav__sub a:hover { color: var(--c-nav-hover); text-decoration: none; }

/* Current page: builders add class="active" aria-current="page" to the current item's <a> */
.nav__item > a.active,
.nav__item > a[aria-current="page"] { color: var(--c-nav-current); }
/* Crop sub-pages: the current page inside the "Our Products" dropdown
   ("Our Products" itself carries class="active" as the parent) */
.nav__sub a.active,
.nav__sub a[aria-current="page"] { color: var(--c-nav-current); }

/* "Our Products" row: room on the right for the chevron button */
.nav__item--has-sub > a { padding-right: 50px; }
.nav__caret { display: none; }                 /* desktop-only "▼" */

.nav__sub-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 54px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-heading);
}
.nav__sub-toggle svg { transition: transform .2s; }
.nav__sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__sub {
  display: none;
  margin-left: 22.65px;
}
.nav__item--has-sub.is-open > .nav__sub { display: block; }
.nav__sub li { border-top: 1px solid var(--c-rule); }

/* Facebook / Instagram rows: icon + word on phones */
.nav__item--icon > a {
  display: flex;
  align-items: center;
  gap: .6em;
}
.nav__item--icon .icon { flex: none; }

@media (min-width: 768px) {
  .site-header__inner {
    display: block;
    padding-top: 17px;
    padding-bottom: 14px;
    text-align: center;
  }
  .site-header__logo {
    width: 210px;
    margin: 0 auto 11px;
  }
  .site-header__logo img { width: 210px; }

  .nav-toggle { display: none; }

  .nav {
    display: block;
    position: static;
    width: auto;
    padding: 0;
    box-shadow: none;
  }
  .nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
  }
  .nav__item {
    margin: 3px 3px -1px;
    border-top: 0;
  }
  .nav__item > a,
  .nav__sub a {
    padding: .875em;                 /* 12.25px */
    font-size: .875rem;              /* 14px */
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .nav__item > a.active,
  .nav__item > a[aria-current="page"] { border-bottom: 3px solid var(--c-nav-underline); }
  .nav__item--has-sub > a { padding-right: .875em; }
  .nav__caret {
    display: inline-block;
    margin-left: 1em;
    transform: scale(.5);
  }
  .nav__sub-toggle { display: none; }

  /* Dropdown: opens on hover, keyboard focus, or the .is-open class */
  .nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999;
    margin: 0;
    padding-top: 3px;
    background: var(--c-bg);
    text-align: left;
  }
  .nav__item--has-sub:hover > .nav__sub,
  .nav__item--has-sub:focus-within > .nav__sub,
  .nav__item--has-sub.is-open > .nav__sub { display: block; }
  .nav__sub li { border-top: 0; }
  .nav__sub a {
    width: 200px;
    padding: .875em 1.414em;         /* 12.25px 19.8px */
    background: rgba(0, 0, 0, .05);
  }
  .nav__sub li:first-child a { padding-top: 16px; }
  .nav__sub li:last-child a { padding-bottom: 16px; }

  .nav__item--icon > a { display: block; }
  .nav__item--icon .icon { vertical-align: -2px; }
  .nav__icon-text {                 /* word hidden on desktop, icon only */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}


/* --------------------------------------------------------------------------
   6. Hero slider (home page)
   Full-bleed, image-only slides stacked on top of each other; main.js
   cross-fades them. Only .hero__slide.is-active is visible.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  height: 60vw;
  min-height: 200px;
  background: var(--c-tile-base);
}
@media (min-width: 768px) {
  .hero {
    height: 80vh;
    min-height: 420px;
  }
}

.hero__slides {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.hero__slide {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pagination dots, bottom right */
.hero__dots {
  position: absolute;
  right: 30px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  opacity: .45;
}
.hero__dot.is-active,
.hero__dot[aria-current="true"] { opacity: .85; }
.hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }

/* Prev / next arrows: appear while hovering the slider (or on focus) */
.hero__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  padding: 15px;
  border: 0;
  background: none;
  color: #fff;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .3s;
}
.hero__nav--prev { left: 5px; }
.hero__nav--next { right: 5px; }
.hero:hover .hero__nav,
.hero__nav:focus-visible { opacity: .75; }
.hero__nav:focus-visible { outline: 2px solid #fff; }

/* Small "scroll down" hint, bottom right (part of the live look) */
.hero__hint {
  position: absolute;
  right: 5vw;
  bottom: 10vh;
  z-index: 2;
  padding: 6px 10px 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: 14px;
  line-height: 1;
}


/* --------------------------------------------------------------------------
   7. Buttons
   .btn        outlined khaki "wire" button (Our Story, Get in Touch, Follow).
               Text and border use the darker --c-khaki-text so they pass 4.5:1 on
               white; the hover fill is still the pale brand khaki with dark text.
   .btn--light white outline for use on photos (Get in Touch)
   .btn-submit solid khaki form button
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 1.4em 2.8em;             /* 25.76px 51.5px */
  border: 2px solid var(--c-khaki-text);
  border-radius: .25em;
  background: transparent;
  color: var(--c-khaki-text);
  font-size: 1.15em;                /* 18.4px */
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .05);
  transition: background .2s, color .2s;
}
.btn:hover,
.btn:focus-visible {
  border-color: var(--c-khaki);
  background: var(--c-khaki);
  color: var(--c-heading);
  text-decoration: none;
}
.btn--light {
  border-color: #fff;
  color: #fff;
  text-shadow: none;
}
.btn--light:hover,
.btn--light:focus-visible {
  background: #fff;
  color: var(--c-heading);
}

.btn-submit,
.form button[type="submit"],
.form input[type="submit"] {
  display: inline-block;
  padding: .618em 1.41575em;        /* 9.9px 22.65px */
  border: 0;
  border-radius: 3px;
  background: var(--c-khaki);
  color: var(--c-heading);           /* dark text on khaki: 8.7:1 */
  font-size: 1rem;
  font-weight: 600;
  line-height: var(--lh);
  cursor: pointer;
  transition: background .2s;
}
.btn-submit:hover,
.btn-submit:focus-visible,
.form button[type="submit"]:hover,
.form button[type="submit"]:focus-visible,
.form input[type="submit"]:hover,
.form input[type="submit"]:focus-visible { background: var(--c-khaki-dark); }


/* --------------------------------------------------------------------------
   8. Page banner strip (inner pages): full container width, no crop
   -------------------------------------------------------------------------- */
.banner img {
  display: block;
  width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   9. Column rows
   .cols stacks on phones and sits side by side from 768px with a 30px gap.
   .cols--2        50 / 50
   .cols--3        33 / 33 / 33
   .cols--crop     20 / 60 / 20  (fruit & veg)
   .cols--crop-wide 20 / 80      (grain)
   .cols--media    38.2 / 61.8   (media cards)
   -------------------------------------------------------------------------- */
.cols {
  display: flex;
  flex-direction: column;
  gap: var(--col-gap);
}
.cols > * { min-width: 0; }

@media (min-width: 768px) {
  .cols {
    flex-direction: row;
    align-items: flex-start;
  }
  .cols > * { flex: 1 1 0; }
  .cols--2 > *,
  .cols--3 > * { flex: 1 1 0; }      /* equal columns (the default, named so the modifiers exist) */
  .cols--crop > :nth-child(1),
  .cols--crop > :nth-child(3) { flex: 0 0 calc(20% - 20px); }
  .cols--crop > :nth-child(2) { flex: 0 0 calc(60% - 20px); }
  .cols--crop-wide > :nth-child(1) { flex: 0 0 calc(20% - 15px); }
  .cols--crop-wide > :nth-child(2) { flex: 0 0 calc(80% - 15px); }
  .cols--media > :nth-child(1) { flex: 0 0 calc(38.1966% - 18.54px); }
  .cols--media > :nth-child(2) { flex: 0 0 calc(61.8034% - 11.46px); }
}

/* Two-column text/image rows: images fill their column */
.cols img { max-width: 100%; height: auto; }
.cols > * > :last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   10. Image tiles: home page (Family / Produce / Sustainability) and the four
       crop tiles on Our Products (.tiles--4)
   Each tile is one link with a photo, a dark overlay and a centred label.
   -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--col-gap);
}
@media (min-width: 768px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
/* Our Products: four tiles sit two per row from 568px. Keep this block AFTER the
   three-column rule above: same specificity, so the later rule wins at >= 768px. */
@media (min-width: 568px) {
  .tiles--4 { grid-template-columns: repeat(2, 1fr); }
}

.tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  overflow: hidden;
  background: var(--c-tile-base);
  color: #fff;
  text-decoration: none;
}
@media (min-width: 768px) {
  .tile { min-height: 244px; }
}
.tile:hover { text-decoration: none; }
.tile__img {                       /* photo: bottom layer */
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile::before {                    /* the 50% dark overlay: middle layer */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  background: var(--c-tile-overlay);
  transition: background .2s;
}
.tile:hover::before,
.tile:focus-visible::before { background: rgba(51, 51, 51, .35); }
.tile__label {                     /* label: top layer */
  position: relative;
  z-index: 2;
  padding: 0 1em;
  font-size: var(--h2-m);
  font-weight: 400;
  line-height: 1.375;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .5);
}
@media (min-width: 768px) {
  .tile__label { font-size: 2.02em; }  /* 32.3px */
}


/* --------------------------------------------------------------------------
   11. Parallax call-to-action band ("We'd love to hear from you!")
   The maize-crop photo is set here (900px file for phones, 1800px from 768px).
   Fixed background (parallax feel) on desktop only; phones scroll normally.
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding: 80px 20px;
  background: var(--c-tile-base) center / cover no-repeat;
  background-image: url('/images/parallax-900.jpg');
  color: #fff;
  text-align: center;
}
@media (min-width: 768px) {
  .cta-band {
    padding: 180px 20px;
    background-image: url('/images/parallax-1800.jpg');
    background-attachment: fixed;
  }
}
.cta-band__title {
  margin: 0 0 52px;
  color: #fff;
  font-size: var(--h2-m);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--lh);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
@media (min-width: 768px) {
  .cta-band__title { font-size: 2em; }
}


/* --------------------------------------------------------------------------
   12. Video (home page)
   -------------------------------------------------------------------------- */
.video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}


/* --------------------------------------------------------------------------
   13. Accordion (Employment FAQ)
   Works with native <details class="accordion__item"><summary class="accordion__q">
   or with <button class="accordion__q" aria-expanded aria-controls> + a
   .accordion__a panel (main.js toggles the button version).
   -------------------------------------------------------------------------- */
.accordion__item { margin-bottom: 10px; }

.accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  padding: 15px 30px;
  border: 0;
  background: var(--c-accordion);
  color: #fff;
  font-size: 1rem;
  line-height: var(--lh);
  text-align: left;
  list-style: none;
  cursor: pointer;
  transition: background .2s;
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q::after {               /* + / – indicator */
  content: "+";
  flex: none;
  font-size: 20px;
  line-height: 1;
}
details[open] > .accordion__q::after,
.accordion__q[aria-expanded="true"]::after { content: "\2013"; }
.accordion__q:hover,
.accordion__q:focus-visible { background: var(--c-accordion-hover); }
.accordion__q:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }

.accordion__a {
  padding: 15px 30px;
  background: var(--c-accordion-body);
}
.accordion__a > :last-child { margin-bottom: 0; }
.accordion__a[hidden] { display: none; }


/* --------------------------------------------------------------------------
   14. Galleries
   .gallery3  three square photos in a row (Cotton, Halloween pages)
   .masonry   the Gallery page grid; set data-span="2x2" / "2x1" on items
   .lightbox  full-size overlay built by main.js
   -------------------------------------------------------------------------- */
.gallery3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--col-gap);
  justify-items: center;
}
@media (min-width: 568px) {
  .gallery3 { grid-template-columns: repeat(3, 1fr); }
}
.gallery3 img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}

.masonry {
  --masonry-row: calc(100vw - 44px);
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: var(--masonry-row);
  grid-auto-flow: dense;
  gap: 15px;
}
.masonry__item { margin: 0; }
.masonry__item > a {                 /* the link around each photo fills the cell so the img can object-fit */
  display: block;
  height: 100%;
}
.masonry__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .2s;
}
.masonry__item img:hover { opacity: .9; }
@media (min-width: 481px) {
  .masonry {
    --masonry-row: calc((100vw - 44px - 25px) / 2);   /* container gutter is 22px a side below 568px */
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}
@media (min-width: 568px) {
  .masonry { --masonry-row: calc((100vw - 84px - 25px) / 2); }
}
@media (min-width: 769px) {
  .masonry {
    --masonry-row: calc((min(100vw, 1064px) - 84px - 100px) / 3);   /* = column width, so cells are square */
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
  }
  .masonry__item[data-span="2x2"] { grid-column: span 2; grid-row: span 2; }
  .masonry__item[data-span="2x1"] { grid-column: span 2; }
}

/* Lightbox */
.masonry img,
.gallery3 img,
[data-lightbox] img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .9);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
.lightbox__close {
  position: absolute;
  top: 8px;
  right: 14px;
  padding: 4px 10px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 40px;
  line-height: 1;
}
.lightbox__close:focus-visible { outline: 2px solid #fff; }
body.has-lightbox { overflow: hidden; }


/* --------------------------------------------------------------------------
   15. Media list cards (Media page)
   -------------------------------------------------------------------------- */
.media-item {
  margin-bottom: 40px;
  padding: 20px 20px 10px;
  border: 1px solid var(--c-card-border);
  background: var(--c-card-bg);
}
.media-item img {
  display: block;
  width: 100%;
  height: auto;
}
.media-item__link {
  color: var(--c-green-media);
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   16. Logo rows (Our Processes, Fruit & Veg)
   -------------------------------------------------------------------------- */
.logo-row img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
@media (min-width: 768px) {
  .logo-row img { max-width: 300px; }
}
.logo-row--center {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--col-gap);
}
.logo-row__offset { margin-top: 15px; }   /* Fruit & Veg: the AUSVEG logo sits 15px lower so the pair looks centred */

/* Legacy widget title above the Produce enquiry form */
.widget-title {
  margin-bottom: 1em;
  padding: 0 0 1em;
  border-bottom: 1px solid var(--c-rule);
  font-size: var(--h4-m);
}
@media (min-width: 768px) {
  .widget-title { font-size: var(--h4); }
}


/* --------------------------------------------------------------------------
   17. Crop sections, spec tables, availability table
   -------------------------------------------------------------------------- */
.crop__img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}
@media (min-width: 768px) {
  .crop__img { max-width: 100%; }
}

/* Small two-column size/weight tables in the narrow right-hand column */
.spec-table td,
.spec-table th {
  padding: .5em .75em;
  font-weight: 400;
  background: var(--c-table-td);
}
.spec-table tr:nth-child(2n) td,
.spec-table tr:nth-child(2n) th { background: var(--c-table-td-alt); }

/* Product availability chart rebuilt as a table */
.avail-table { font-size: .875em; }
.avail-table th,
.avail-table td {
  padding: .5em .4em;
  text-align: center;
}
.avail-table thead th {
  background: #6d6d6d;             /* white text needs 4.5:1 */
  color: #fff;
}
.avail-table tbody th {
  text-align: left;
  white-space: nowrap;
}
.avail-table .season--full { background: var(--c-season-full); color: #fff; }
.avail-table .season--limited { background: var(--c-season-limited); color: var(--c-heading); }
.avail-table__legend span {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .4em;
  vertical-align: -.15em;
}
.avail-table__legend .season--full { background: var(--c-season-full); }
.avail-table__legend .season--limited { background: var(--c-season-limited); }
.avail-wrap { overflow-x: auto; }     /* lets the 13-column table scroll on phones */


/* --------------------------------------------------------------------------
   18. Forms (Netlify Forms)
   -------------------------------------------------------------------------- */
.form__row {
  margin: 0 0 15px;
}
.form label {
  display: block;
  font-weight: 400;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form select,
.form textarea {
  display: block;
  width: 100%;
  margin: 5px 0 0;
  padding: 15px;
  border: 1px solid var(--c-input-border);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: var(--c-input-text);
  font-size: 1rem;
  line-height: 17px;
}
.form textarea {
  min-height: 190px;
  resize: vertical;
}
.form input[type="file"] {
  display: block;
  margin: 5px 0 0;
  max-width: 100%;
}
.form ::placeholder { color: var(--c-input-text); opacity: 1; }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}
.form .form__note { font-size: .875em; }


/* --------------------------------------------------------------------------
   19. Social buttons (footer, Contact) and "Follow us on Instagram" block
   -------------------------------------------------------------------------- */
.social { line-height: 0; }
.social__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: .1em 0 .1em .1em;
  border-radius: 50%;
  background: var(--c-khaki);
  color: var(--c-heading);           /* dark icon on khaki: 8.7:1 */
  text-decoration: none;
  transition: background .2s;
}
.social__btn:hover,
.social__btn:focus-visible {
  background: var(--c-khaki-dark);
  color: var(--c-heading);
  text-decoration: none;
}
.social__btn + .social__btn { margin-left: 8px; }

.follow { text-align: center; }
.follow .btn { margin-top: .5em; }


/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 25.9px 0;
  background: var(--c-offwhite);
  color: var(--c-text);
}
.site-footer a { color: var(--c-footer-link); }
.site-footer a:hover { text-decoration: underline; }

.footer__cols {
  padding-top: 67.8px;
  border-bottom: 1px solid var(--c-rule);
}
.footer__col { margin-bottom: 59.3px; }
.footer__col p { margin: 0; }
.footer__col strong { font-weight: 600; }
.nowrap { white-space: nowrap; }  /* keeps "Ceres Farm © year" and "Terms of Service" each on one line */

/* Tablets (768-1023px): two columns, so "info@ceresfarm.com.au" has room and does not
   break mid-word. Desktop (>= 1024px): the live site's four columns. */
@media (min-width: 768px) {
  .footer__cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4.348%;
  }
}
@media (min-width: 1024px) {
  .footer__cols { grid-template-columns: repeat(4, 1fr); }
  .footer__col--social,
  .footer__col--copy { text-align: right; }
}

.footer__logo {
  padding: 41.9px 0;
  text-align: center;
}
.footer__logo a { display: inline-block; line-height: 0; }
.footer__logo img {
  width: 150px;
  height: auto;
  margin: 15px auto;
}


/* --------------------------------------------------------------------------
   21. Back-to-top button (shown by main.js after scrolling 100px)
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-khaki);
  color: var(--c-heading);           /* dark arrow on khaki: 8.7:1 */
  box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s, background .2s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover,
.back-to-top:focus-visible { background: var(--c-khaki-dark); }
@media (min-width: 1024px) {
  .back-to-top {
    right: 30px;
    bottom: 30px;
    width: 42px;
    height: 42px;
  }
}


/* --------------------------------------------------------------------------
   22. Simple pages, print, reduced motion
   -------------------------------------------------------------------------- */
.page-simple {
  padding: 100px 0;
  text-align: center;
}
.page-simple .btn { margin-top: 1em; }

/* Contact page title */
.contact__title {
  font-size: clamp(44px, 10vw, 85px);
  text-align: center;
}

@media print {
  .nav-toggle, .hero__nav, .hero__dots, .hero__hint, .back-to-top, .skip-link { display: none; }
  .site-footer { background: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slide, .hero__nav, .btn, .tile::before, .nav__sub-toggle svg, .back-to-top { transition: none; }
  .cta-band { background-attachment: scroll; }
}


/* --------------------------------------------------------------------------
   23. Job vacancies (Employment page)
   Each advert is an <article class="job"> inside <div class="jobs">.
   -------------------------------------------------------------------------- */
.jobs__empty {
  padding: 1.25em 1.5em;
  background: var(--c-card-bg);
  border: 1px solid var(--c-card-border);
  border-radius: 3px;
}
.job {
  padding: 1.5em 1.75em 1.25em;
  margin-bottom: 1.5em;
  background: var(--c-card-bg);
  border: 1px solid var(--c-card-border);
  border-left: 4px solid var(--c-green);
  border-radius: 3px;
}
.job__title { margin-top: 0; margin-bottom: .25em; }
.job__meta {
  margin-top: 0;
  font-size: .9375em;
  color: var(--c-footer-link);
}
.job ul { margin: .75em 0 1em 1.25em; }
.job .btn { margin-top: .25em; }