/* Header, footer and placeholder styles for the published site.
   The page bodies keep their inline styles from the canvas; only the parts that
   the design runtime used to compute in JS live here as real CSS. */

.ape-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(242, 239, 228, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 2px solid rgba(32, 48, 27, 0.18);
  color: #20301b; font-family: Archivo, system-ui, sans-serif;
}
.ape-header-bar {
  max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 96px; transition: height .28s cubic-bezier(.4, 0, .2, 1);
}
.ape-header.is-scrolled .ape-header-bar { height: 64px; }

.ape-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #20301b; }
.ape-mark { height: 74px; width: auto; flex: none; display: block; transition: height .28s cubic-bezier(.4, 0, .2, 1); }
.ape-header.is-scrolled .ape-mark { height: 48px; }
.ape-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.ape-wordmark-name { font-weight: 800; font-size: 14px; letter-spacing: .02em; }

.ape-nav { display: flex; align-items: stretch; align-self: stretch; gap: clamp(14px, 1.8vw, 24px); }
.ape-navitem { position: relative; display: flex; align-items: center; }
.ape-navlink {
  text-decoration: none; font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; padding: 6px 0; border-bottom: 2px solid transparent;
  color: rgba(32, 48, 27, .8); white-space: nowrap;
}
.ape-navlink:hover { color: #316420; }
.ape-navlink.is-active { color: #20301b; border-bottom-color: #316420; }

/* About Us keeps its own page and gains a submenu. The parent is a real link,
   the panel opens on :hover and :focus-within, and nothing here needs JS: tab
   to the parent and the panel opens, tab again and you are inside it. On a
   touch screen the tap follows the link — which is fine, because below 950px
   there is no bar at all, only the panel, where the children are always
   visible. */
.ape-navitem.has-sub > .ape-navlink { display: inline-flex; align-items: center; gap: 7px; }
.ape-caret {
  width: 6px; height: 6px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.ape-navitem.has-sub:hover .ape-caret,
.ape-navitem.has-sub:focus-within .ape-caret { transform: translateY(1px) rotate(-135deg); }
/* The branch reads as current when one of its children is the page you are on,
   so the bar still tells you where you are once the panel has closed. */
.ape-navitem.is-branch > .ape-navlink { color: #20301b; border-bottom-color: #316420; }

.ape-submenu {
  position: absolute; top: 100%; left: -14px; min-width: 232px;
  display: flex; flex-direction: column; padding: 6px 0;
  background: rgba(242, 239, 228, .97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(32, 48, 27, .18); border-top: 2px solid #3f7d2c;
  box-shadow: 0 18px 34px -18px rgba(32, 48, 27, .45);
  opacity: 0; visibility: hidden; transform: translateY(-7px);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .7, .2, 1), visibility .2s;
}
.ape-navitem.has-sub:hover > .ape-submenu,
.ape-navitem.has-sub:focus-within > .ape-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.ape-subitem {
  display: block; padding: 11px 20px; text-decoration: none; white-space: nowrap;
  font-size: 12px; letter-spacing: .11em; text-transform: uppercase; font-weight: 600;
  color: rgba(32, 48, 27, .82); box-shadow: inset 3px 0 0 transparent;
}
.ape-subitem:hover { background: rgba(63, 125, 44, .1); color: #20301b; }
.ape-subitem.is-active { color: #20301b; box-shadow: inset 3px 0 0 #316420; }

@media (prefers-reduced-motion: reduce) {
  .ape-submenu, .ape-caret { transition: none; }
}

.ape-header-actions { display: flex; align-items: center; gap: 14px; }
/* Each half is a link to this page in the other language, not a button — the
   switch has to work before (and without) site.js. */
.ape-lang { display: flex; border: 1px solid rgba(32, 48, 27, .22); }
.ape-lang-btn {
  display: inline-flex; align-items: center; background: transparent; color: rgba(32, 48, 27, .85);
  border: 0; font-family: inherit; font-weight: 800; font-size: 11px; letter-spacing: .1em;
  line-height: 1; padding: 8px 9px; cursor: pointer; text-decoration: none;
}
.ape-lang-btn:hover { color: #20301b; background: rgba(32, 48, 27, .08); }
.ape-lang-btn + .ape-lang-btn { border-left: 1px solid rgba(32, 48, 27, .22); }
.ape-lang-btn.is-on, .ape-lang-btn.is-on:hover { background: #20301b; color: #f7f5ee; }

.ape-cta {
  background: #3f7d2c; color: #f7f5ee; text-decoration: none; font-weight: 800; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; padding: 11px 18px; display: inline-flex;
  white-space: nowrap;
}
.ape-cta:hover { background: #2a5a1c; color: #f7f5ee; }

.ape-burger {
  display: none; background: transparent; border: 1px solid rgba(32, 48, 27, .22); color: #20301b;
  width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer;
  flex-direction: column; gap: 4px; flex: none;
}
.ape-burger span { width: 16px; height: 2px; background: #20301b; display: block; }

.ape-panel { border-top: 2px solid rgba(32, 48, 27, .18); padding: 8px clamp(20px, 5vw, 56px) 22px; }
.ape-panel[hidden] { display: none; }
.ape-panellink {
  display: block; text-decoration: none; color: rgba(32, 48, 27, .8); font-weight: 800;
  font-size: 19px; letter-spacing: -.01em; padding: 11px 0; border-bottom: 1px solid rgba(32, 48, 27, .16);
}
.ape-panellink.is-active { color: #20301b; }
.ape-panellink.is-sub {
  font-size: 16px; font-weight: 600; padding-left: 18px;
  color: rgba(32, 48, 27, .72); box-shadow: inset 2px 0 0 rgba(63, 125, 44, .45);
}
.ape-panellink.is-sub.is-active { color: #20301b; box-shadow: inset 2px 0 0 #316420; }
.ape-panel-cta {
  display: block; margin-top: 16px; background: #3f7d2c; color: #f7f5ee; text-decoration: none;
  font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 16px;
}

/* Between the burger breakpoint and ~1240px the five nav items, the language
   toggle and the CTA leave the lockup barely 200px, which wraps the wordmark
   and pushes it into the nav. Step the mark down there so the two-line lockup
   holds. This threshold tracks the width of the row: it came down to 1180 when
   About Us absorbed three of the items, and back up to 1240 when What We Grow
   returned to the bar as a fifth. Measure it again if the row changes — the
   longer of the two languages decides, and that is not always the same one. */
@media (max-width: 1240px) and (min-width: 951px) {
  .ape-mark { height: 64px; }
  .ape-header-bar { height: 88px; }
  .ape-nav { gap: clamp(12px, 1.6vw, 24px); }
  /* Five nav items plus the toggle and the CTA squeeze the lockup until its
     text collides with the nav. The CTA yields here — it is repeated in the
     hero and the footer, while the nav has nowhere else to go. */
  .ape-cta { display: none; }
}

/* The canvas swapped nav for a burger at 1080px; even five items hold to 951,
   on two lockup lines and the shorter mark. */
@media (max-width: 950px) {
  .ape-nav { display: none; }
  .ape-cta { display: none; }
  .ape-burger { display: flex; }
}

/* Phones: the full lockup wraps to three lines and crowds the bar, so the
   locality line drops and the mark shrinks. */
@media (max-width: 640px) {
  .ape-mark { height: 56px; }
  .ape-header.is-scrolled .ape-mark { height: 44px; }
  .ape-wordmark-name { font-size: 12px; }
  .ape-header-actions { gap: 10px; }
}

/* Unfilled image slots: a panel in the site palette rather than an empty hole.
   Drop a file into photos/<slot-id>.jpg and the build emits a real <img>. */
.ape-photo {
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(63, 125, 44, .34), transparent 62%),
    radial-gradient(110% 80% at 85% 80%, rgba(184, 130, 63, .28), transparent 60%),
    repeating-linear-gradient(135deg, rgba(32, 48, 27, .05) 0 2px, transparent 2px 9px),
    #e6e2d3;
}

/* A zoomed phone can be as narrow as ~260 CSS px, where an unbreakable token
   like info@agriproductseurope.com is wider than the page. `anywhere` breaks
   only when a word cannot fit, and unlike break-word it also lets grid and
   flex items shrink past a long word's width. */
body { overflow-wrap: anywhere; }
/* …but not in the header, where `anywhere` breaks the wordmark mid-word
   ("PRODUCT / S EUROPE"). Everything in the bar is short and wraps at spaces;
   the phone media block below already handles the tight cases. */
.ape-header { overflow-wrap: normal; }

/* The canvas gives a few paragraphs `grid-column:span 2` inside auto-fit
   grids. When the viewport is narrow enough that the grid collapses to one
   column — a zoomed phone gets down to ~260 CSS px — the span still forces a
   second, implicit track, and the paragraph's box grows wider than the page
   and is clipped by the wrapper's overflow-x:hidden. Below the width where
   the widest of those grids still fits two 300px tracks, drop the span; the
   !important is needed to beat the inline style. The second selector is not
   redundant: when a script touches el.style (the reveal animation does), the
   browser reserializes the attribute with a space after the colon. */
@media (max-width: 719px) {
  [style*="grid-column:span 2"],
  [style*="grid-column: span 2"] { grid-column: auto !important; }
}

/* The photo panels pair `aspect-ratio` with a `min-height` that keeps them
   substantial on desktop. With aspect-ratio set and width auto, the browser
   transfers that min-height through the ratio into a minimum *width* — 320px
   tall at 5/4 is a 400px-wide floor, wider than a zoomed phone — and
   min-width:0 does not defeat a transferred constraint. Below the width where
   the widest floor (400px plus page padding) last fits, drop the floor and
   let the ratio size the panel from its container-capped width instead. */
@media (max-width: 719px) {
  [style*="aspect-ratio"][style*="min-height"] { min-height: 0 !important; }
}

:focus-visible { outline: 2px solid #3f7d2c; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ape-header-bar, .ape-mark { transition: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* generated hover/focus states */
.h0:hover{background:#3f7d2c !important;color:#f7f5ee !important}
.h1:hover{background:rgba(242,239,228,0.16) !important}
.h2:hover{background:rgba(32,48,27,0.03) !important}
.h3:hover{color:#20301b !important}
.h4:hover{color:#b8823f !important}
.h5:hover{background:#2a5a1c !important}
.h6:hover{background:rgba(32,48,27,0.08) !important}
.h7:hover{color:#316420 !important}
.h8:hover{color:#316420 !important;border-bottom-color:#316420 !important}
.h9:hover{color:#8a5c22 !important}
.h10:hover{background:#eee9dc !important}
.h11:hover{background:rgba(242,239,228,0.12) !important}
.h12:hover{border-color:#316420 !important;color:#316420 !important}
.h13:hover{color:#20301b !important;border-bottom-color:#20301b !important}
.h14:hover{background:#b8823f !important;color:#f7f5ee !important}
.f15:focus{border-color:#316420 !important;outline:2px solid #3f7d2c !important;outline-offset:0 !important}
.f16:focus{outline:2px solid #3f7d2c !important;outline-offset:2px !important}