/* ==========================================================================
   site.css — Zwaan Inc. at Lightfields Meadow Farm
   --------------------------------------------------------------------------
   This is the ONLY stylesheet on the site. Every page loads it. If you want to
   change a colour, a font, or the spacing anywhere, change it here once and it
   changes everywhere.

   The colour and font choices all live in the ":root" block right below. Those
   are called "custom properties" — plain English: they are named settings. The
   rest of the file refers to them by name, so editing the name in one place
   updates every spot that uses it.

   Layout approach: black bar across the top on every page (as requested), a
   full-width photo band under it, then normal page content in a centred column.
   ========================================================================== */

/* ==========================================================================
   Fonts
   --------------------------------------------------------------------------
   The two typefaces are stored in this site's own assets/fonts folder rather
   than loaded from Google. Three reasons: the site keeps working if Google is
   blocked or slow, no visitor data is sent to a third party (which matters for
   privacy notices), and it removes a connection to a second server on every
   page load, which Google's own page-speed scoring rewards.

   Fraunces  — headings. A variable font, meaning one file covers every weight
               and optical size, which is why it is a single 66 KB download.
   Karla     — body text and navigation.

   Both are licensed under the SIL Open Font License; the licence text sits
   alongside the font files.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;   /* show fallback text immediately, swap when ready */
}

@font-face {
  font-family: "Karla";
  src: url("../assets/fonts/karla-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("../assets/fonts/karla-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}


:root {
  /* ---- Colour ----
     Every colour below is taken from the Zwaan, Inc. logo rather than chosen
     independently, so the site and the logo read as one thing. The three
     source colours, sampled straight out of the logo file, are the navy
     background, the silver horse, and the sage-green wreath.

     Each pairing used on the site was checked against the WCAG contrast
     standard for readable text. Do not darken --paper or lighten --moss
     without re-checking them. */
  --ink:        #0e0e0e;   /* black — the top bar and footer, as requested */
  --ink-soft:   #32363a;   /* body text; softer than pure black over long bios */
  --navy:       #021e46;   /* the logo's navy — section fields and buttons */
  --navy-lift:  #0b3168;   /* a step lighter, for button hover */
  --sage:       #98b8a0;   /* the logo's wreath green — accents on dark fields */
  --moss:       #3f6146;   /* the wreath green darkened until it is readable as
                              text on white; links and small marks */
  --silver:     #ababab;   /* the logo's horse */
  --paper:      #fbfbfa;   /* page background */
  --mist:       #e3e9e4;   /* pale sage — panel and nameplate fields */
  --mist-deep:  #c3cec6;   /* borders on those panels */
  --white:      #ffffff;

  /* ---- Type ---- */
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- Layout ---- */
  --measure: 68ch;   /* max line length for readable paragraphs */
  --wide:    1180px; /* max width of the overall content column */
  --gap:     clamp(2.5rem, 6vw, 5.5rem); /* vertical space between sections */
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

/* Anyone who has asked their device to reduce animation gets no smooth scroll
   and no transitions. Accessibility requirement, not a nicety. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 1.0625rem;      /* 17px — comfortable for the long team bios */
  line-height: 1.7;
  font-weight: 400;
}

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

/* Skip link: keyboard and screen-reader users can jump past the nav.
   Off-screen until focused. */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--white);
  padding: 0.75rem 1.25rem; z-index: 200;
}
.skip:focus { left: 0; }

/* Every focusable thing gets a clearly visible outline when tabbed to. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--moss);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-variation-settings: "opsz" 40;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.15em; max-width: var(--measure); }

a { color: var(--moss); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* A short line of text that sits under a page heading and sets it up. */
.lede {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }

main { display: block; }

section { padding-block: var(--gap); }

/* A section painted in the sand tone, edge to edge. */
.band-mist  { background: var(--mist); }
.band-navy { background: var(--navy); color: #dfe5e0; }
.band-navy h2, .band-navy h3 { color: var(--white); }
.band-navy a { color: #98b8a0; }
.band-navy a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   Top bar — black, on every page, per the brief
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--ink);
  position: sticky; top: 0; z-index: 100;
}

.topbar__inner {
  width: min(100% - 2.5rem, 1320px);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  min-height: 78px;
}

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand img { height: 58px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--display); font-size: 1.2rem; color: var(--white);
  font-variation-settings: "opsz" 20;
}
.brand__sub { font-size: 0.68rem; color: #a3a8a4; letter-spacing: 0.08em; }

/* Navigation links. On phones this list turns into a drop-down panel; the
   toggle button below controls it. */
.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
  color: #d5dad6; text-decoration: none;
  font-size: 0.92rem; padding: 0.55rem 0.7rem; border-radius: 2px;
  white-space: nowrap;
}
.nav a:hover { color: var(--white); background: #1c1e20; }

/* The page you are currently on gets a small mark under it so visitors always
   know where they are. */
.nav a[aria-current="page"] {
  color: var(--white);
  box-shadow: inset 0 -2px 0 var(--sage);
}

.nav .nav__cta {
  background: var(--white); color: var(--ink);
  margin-left: 0.5rem; padding: 0.6rem 1.1rem;
}
.nav .nav__cta:hover { background: var(--mist); color: var(--ink); }

.navtoggle {
  display: none;
  background: none; border: 1px solid #3d4145; color: var(--white);
  font-family: var(--body); font-size: 0.9rem;
  padding: 0.55rem 0.9rem; border-radius: 2px; cursor: pointer;
}

@media (max-width: 940px) {
  .navtoggle { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink);
    flex-direction: column; align-items: stretch;
    padding: 0.5rem 1.25rem 1.25rem;
    border-top: 1px solid #26282a;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 0.85rem 0.25rem; font-size: 1.05rem; border-bottom: 1px solid #1c1e20; }
  /* On a phone the menu is a vertical list, so the underline that marks the
     current page on desktop reads as a divider or an error line. Move the mark
     to the left edge, where it reads as "you are here". */
  .nav a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--sage);
    padding-left: 0.85rem;
  }
  .nav .nav__cta { margin: 0.75rem 0 0; text-align: center; border-bottom: none; }
  .brand__sub { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; background: var(--navy); }
.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  height: clamp(360px, 62vh, 620px);
  object-fit: cover;
}
/* Dark wash over the photo so white text stays readable no matter which photo
   gets dropped in later. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,10,0.30) 0%, rgba(10,12,10,0.62) 100%);
}
.hero__copy {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.hero__copy .wrap { color: var(--white); }
.hero h1 { color: var(--white); max-width: 16ch; margin-bottom: 0.35em; }
.hero p {
  color: #ece8df; max-width: 46ch; font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  margin-bottom: 1.4rem;
}

/* Interior pages use a shorter version of the same band. */
.hero--page .hero__media img { height: clamp(240px, 34vh, 340px); }
.hero--page h1 { max-width: 22ch; }

/* --------------------------------------------------------------------------
   Services strip — sits directly under the hero, as requested
   -------------------------------------------------------------------------- */

.services-strip { background: var(--ink); color: var(--white); }
.services-strip ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.services-strip li { border-left: 1px solid #26282a; }
.services-strip li:first-child { border-left: none; }
.services-strip a {
  display: block; padding: 1.4rem 1.25rem;
  color: var(--white); text-decoration: none;
  font-family: var(--display); font-size: 1.1rem;
  font-variation-settings: "opsz" 20;
}
.services-strip a span {
  display: block; font-family: var(--body); font-size: 0.82rem;
  color: #a3a8a4; margin-top: 0.25rem; line-height: 1.4;
}
.services-strip a:hover { background: var(--navy); }
.services-strip a:hover span { color: #c7cfc9; }

@media (max-width: 780px) {
  .services-strip ul { grid-template-columns: repeat(2, 1fr); }
  .services-strip li:nth-child(3) { border-left: none; }
  .services-strip li:nth-child(n+3) { border-top: 1px solid #26282a; }
}
@media (max-width: 420px) {
  .services-strip ul { grid-template-columns: 1fr; }
  .services-strip li { border-left: none; border-top: 1px solid #26282a; }
  .services-strip li:first-child { border-top: none; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--navy); color: var(--white);
  font-family: var(--body); font-size: 1rem; font-weight: 700;
  padding: 0.85rem 1.7rem; border: none; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: background 160ms ease;
}
.btn:hover { background: var(--navy-lift); color: var(--white); }

.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--mist); color: var(--ink); }

.btn--outline {
  background: transparent; color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}
.btn--outline:hover { background: rgba(255,255,255,0.12); color: var(--white); }

/* --------------------------------------------------------------------------
   Two-column blocks (text beside a photo)
   -------------------------------------------------------------------------- */

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.split--flip .split__media { order: -1; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
}

/* --------------------------------------------------------------------------
   The stall plate — this site's one signature element
   --------------------------------------------------------------------------
   Real barns hang an engraved plate on each stall door with the horse's name.
   That is where this shape comes from: a sand-coloured plate with an inset
   line, used for the team members and the horses. It is deliberately the only
   decorative motif on the site so it stays memorable instead of noisy.
   -------------------------------------------------------------------------- */

.plates {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none; margin: 0; padding: 0;
}

.plate { background: var(--white); }
.plate img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.plate__nameplate {
  background: var(--mist);
  border: 1px solid var(--mist-deep);
  box-shadow: inset 0 0 0 3px var(--mist), inset 0 0 0 4px var(--mist-deep);
  padding: 1.1rem 1.25rem;
  text-align: center;
}
.plate__nameplate h3 { margin: 0 0 0.15rem; font-size: 1.3rem; }
.plate__nameplate p {
  margin: 0; max-width: none;
  font-size: 0.85rem; color: #5a6060; letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Team page — full bios
   -------------------------------------------------------------------------- */

.bio { padding-block: clamp(2rem, 4vw, 3.25rem); border-top: 1px solid var(--mist-deep); }
.bio:first-of-type { border-top: none; }
.bio__grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); }
.bio__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.bio__role {
  font-family: var(--body); font-size: 0.9rem; color: var(--moss);
  margin: 0 0 0.9rem; letter-spacing: 0.05em;
}
.bio h2 { margin-bottom: 0.2em; }

@media (max-width: 780px) {
  .bio__grid { grid-template-columns: 1fr; }
  .bio__photo img { max-width: 320px; aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Facility figures
   -------------------------------------------------------------------------- */

.figures {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--mist-deep);
  border: 1px solid var(--mist-deep);
}
.figures li { background: var(--paper); padding: 1.5rem 1.25rem; }
.figures b {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy); line-height: 1.1;
  font-variation-settings: "opsz" 30;
}
.figures span { display: block; font-size: 0.88rem; color: #5a6060; margin-top: 0.35rem; }

/* --------------------------------------------------------------------------
   Feature list used on the Stables and Services pages
   -------------------------------------------------------------------------- */

.facts { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: var(--measure); }
.facts li {
  padding: 0.7rem 0 0.7rem 1.5rem; border-bottom: 1px solid var(--mist-deep);
  position: relative;
}
.facts li::before {
  content: ""; position: absolute; left: 0; top: 1.25rem;
  width: 7px; height: 7px; background: var(--moss);
}

/* --------------------------------------------------------------------------
   Photo gallery
   -------------------------------------------------------------------------- */

.gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem; list-style: none; margin: 0; padding: 0;
}
.gallery li { margin: 0; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--mist); }
.gallery figcaption { font-size: 0.85rem; color: #5a6060; padding-top: 0.4rem; }

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.contact-list li { padding: 1rem 0; border-bottom: 1px solid var(--mist-deep); }
.contact-list strong { display: block; font-size: 0.85rem; color: #5a6060; margin-bottom: 0.15rem; letter-spacing: 0.04em; }
.contact-list a, .contact-list span { font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.contact-list a:hover { color: var(--moss); text-decoration: underline; }

.map-embed {
  width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--mist-deep);
  background: var(--mist);
}

/* Enquiry form */
.form label { display: block; font-size: 0.9rem; color: var(--ink); margin-bottom: 0.3rem; font-weight: 700; }
.form .field { margin-bottom: 1.1rem; }
.form input, .form select, .form textarea {
  width: 100%; font-family: var(--body); font-size: 1rem;
  padding: 0.7rem 0.8rem; border: 1px solid var(--mist-deep);
  background: var(--white); color: var(--ink-soft); border-radius: 2px;
}
.form textarea { min-height: 150px; resize: vertical; }
.form .hint { font-size: 0.85rem; color: #5a6060; }

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.cta-band { background: var(--navy); color: var(--white); text-align: center; }
.cta-band h2 { color: var(--white); }
.cta-band p { margin-inline: auto; color: #d3dad5; }
.cta-band .btn { margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot { background: var(--ink); color: #a3a8a4; padding-block: clamp(2.5rem, 5vw, 4rem); font-size: 0.92rem; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.foot h3 { color: var(--white); font-size: 1rem; font-family: var(--body); font-weight: 700; letter-spacing: 0.04em; }
.foot a { color: #d5dad6; text-decoration: none; }
.foot a:hover { color: var(--white); text-decoration: underline; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: 0.28rem 0; }
.foot img.foot__logo { height: 58px; width: auto; margin-bottom: 1rem; }
.foot address { font-style: normal; line-height: 1.8; }
.foot__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #26282a; font-size: 0.85rem; color: #787d7a; }
.foot__legal p { max-width: none; margin: 0; }

@media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* --------------------------------------------------------------------------
   Small helpers
   -------------------------------------------------------------------------- */

.center { text-align: center; }
.center p { margin-inline: auto; }
.stack > * + * { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.narrow { max-width: 70ch; }

/* Visible only to screen readers — used for headings that are needed for
   document structure but would look redundant on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Print: drop the nav and dark fields so a printed page is legible. */
@media print {
  .topbar, .services-strip, .cta-band, .foot { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}