/* ==========================================================================
   Agrifarm PLC — Shared Stylesheet
   Design tokens live here as CSS custom properties AND are mirrored into the
   Tailwind config (inline, per page) so both utility classes and bespoke
   CSS can reference the same palette.
   ========================================================================== */

:root {
  /* --- Color tokens ------------------------------------------------------ */
  --color-forest: #1E4635;   /* primary — deep field green */
  --color-forest-dark: #14332A;
  --color-leaf: #6FA85E;     /* accent — new-growth green */
  --color-sky: #1C5D8C;      /* secondary — irrigation blue */
  --color-sky-dark: #164A70;
  --color-coffee: #6B3F2A;   /* tertiary — roasted coffee, used sparingly */
  --color-coffee-dark: #4E2C1C;
  --color-paper: #F8F6F0;    /* background — warm parchment, not stark white */
  --color-sand: #EFE8D8;     /* secondary surface */
  --color-mist: #E4ECE5;     /* pale green surface */
  --color-ink: #17231D;      /* primary text */
  --color-ink-soft: #45524A; /* secondary text */
  --color-line: #DCD5C4;     /* hairline borders on paper */

  /* --- Type scale (fluid) -------------------------------------------------*/
  --step-display: clamp(2.5rem, 1.7rem + 3.4vw, 4.75rem);
  --step-h2: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --step-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
}

/* --- Font families -------------------------------------------------------*/
.font-display { font-family: "Fraunces", "Noto Serif Ethiopic", serif; }
.font-body    { font-family: "Inter", "Noto Sans Ethiopic", sans-serif; }
.font-mono    { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* Amharic script: swap to fonts with real Ethiopic glyph coverage and drop
   italic / heavy tracking, which were tuned for the Latin alphabet only. */
[lang="am"] { font-family: "Noto Sans Ethiopic", "Inter", sans-serif; }
[lang="am"] .font-display { font-family: "Noto Serif Ethiopic", "Fraunces", serif; }
.lang-am em,
.lang-am .tracked { letter-spacing: 0 !important; font-style: normal !important; }

html { scroll-behavior: smooth; }
body { background: var(--color-paper); color: var(--color-ink); }

/* ==========================================================================
   Mobile & touch upgrades
   Phones get their own pass here: no accidental horizontal scroll, real tap
   feedback where :hover never fires, generous touch targets, and safe-area
   padding so the floating order tray and sticky header respect notches.
   ========================================================================== */
html, body { overflow-x: hidden; }
body {
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}
a, button, input, select, textarea, label { touch-action: manipulation; }

/* :active feedback stands in for :hover on touchscreens */
@media (hover: none) {
  .btn:active { transform: scale(0.97); }
  .pillar-card:active { transform: translateY(-1px); box-shadow: 0 12px 24px -16px rgba(20, 51, 42, 0.35); }
  .order-card:active { transform: scale(0.99); }
}

/* Safe-area padding for notched phones (iPhone etc.) */
header.sticky {
  padding-top: env(safe-area-inset-top);
}
#order-tray {
  margin-bottom: env(safe-area-inset-bottom);
}

/* Responsive Google Maps embed — replaces a fixed pixel height so the map
   scales with the viewport instead of dominating a small phone screen. */
.map-embed {
  width: 100%;
  height: 260px;
  display: block;
}
@media (min-width: 640px) {
  .map-embed { height: 340px; }
}
@media (min-width: 768px) {
  .map-embed { height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Bilingual toggle
   Every translatable node exists twice, tagged data-lang="en" / "am".
   English shows by default; body.lang-am flips which set is visible.
   display:revert restores each tag's natural display (block, inline, flex…)
   ========================================================================== */
[data-lang="am"] { display: none; }
body.lang-am [data-lang="am"] { display: revert; }
body.lang-am [data-lang="en"] { display: none; }

/* ==========================================================================
   Motif: the "furrow" line — a single continuous stroke that reappears as
   the logotype mark, section dividers and the hero graphic. It reads as a
   plough furrow, a coffee-branch, and a signal trace all at once — the
   throughline between "agricultural" and "tech".
   ========================================================================== */
.furrow-divider {
  height: 2px;
  background: linear-gradient(90deg, var(--color-leaf) 0%, var(--color-sky) 55%, transparent 100%);
  border: 0;
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 2px; background: var(--color-leaf);
  transition: right 0.25s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after { right: 0; }
.nav-link.is-active { color: var(--color-forest); font-weight: 600; }

/* Focus visibility (WCAG) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-sky);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Language toggle pill */
.lang-toggle { display: inline-flex; border: 1px solid var(--color-line); border-radius: 999px; padding: 2px; background: #fff; }
.lang-toggle button { border-radius: 999px; padding: 0.45rem 0.85rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; transition: background 0.2s ease, color 0.2s ease; min-height: 32px; }
.lang-toggle button[aria-pressed="true"] { background: var(--color-forest); color: #fff; }
.lang-toggle button[aria-pressed="false"] { color: var(--color-ink-soft); }

/* Mobile menu */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, box-shadow 0.35s ease; }
#mobile-menu.is-open { max-height: 32rem; box-shadow: 0 16px 32px -20px rgba(20, 51, 42, 0.35); }

/* ==========================================================================
   Cards & components
   ========================================================================== */
.pillar-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.pillar-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(20, 51, 42, 0.35); border-color: var(--color-leaf); }

.chip { font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Process / value-chain connector (About + Home) — a real 3-step sequence,
   so numbering here communicates actual order, not decoration. */
.chain-step { position: relative; }
.chain-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.75rem;
  left: 100%;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-line) 0 8px, transparent 8px 14px);
}
@media (max-width: 767px) {
  .chain-step:not(:last-child)::after { display: none; }
}

/* Product / gallery image fallback: if a hotlinked photo fails, collapse
   gracefully into a tinted placeholder instead of showing a broken icon. */
img.photo { background: var(--color-mist); }
img.photo.img-fallback { object-fit: none; padding: 2rem; opacity: 0.35; }

/* ==========================================================================
   Order cards (Products page) — the whole card is a <label> for its
   checkbox, so tapping the photo, title or description all select it.
   Visual state is driven purely by :has(), so it works even before JS runs.
   ========================================================================== */
.order-card { transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; }
.order-card:hover { transform: translateY(-3px); }
.order-card:has(.order-checkbox:checked) {
  border-color: var(--color-forest);
  box-shadow: 0 16px 32px -18px rgba(20, 51, 42, 0.45);
}
.order-badge { display: none; }
.order-card:has(.order-checkbox:checked) .order-badge { display: inline-flex; }
.order-cta-added { display: none; }
.order-card:has(.order-checkbox:checked) .order-cta-add { display: none; }
.order-card:has(.order-checkbox:checked) .order-cta-added { display: inline-flex; }
.order-checkbox { accent-color: var(--color-forest); }

/* ==========================================================================
   Product quick-view modal — tapping a card opens this instead of toggling
   directly. Kept subtle: a short zoom/fade on the panel, a blurred backdrop
   behind it. Respects prefers-reduced-motion via the global rule above.
   ========================================================================== */
#product-modal { position: fixed; inset: 0; z-index: 60; display: none; }
#product-modal.is-visible { display: flex; }

#product-modal-backdrop {
  background: rgba(23, 35, 29, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
#product-modal.is-open #product-modal-backdrop { opacity: 1; }

#product-modal-panel {
  transform: scale(0.94) translateY(8px);
  opacity: 0;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
#product-modal.is-open #product-modal-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Quantity stepper inside the modal */
#product-modal-qty-minus:hover,
#product-modal-qty-plus:hover { background: var(--color-mist); }
#product-modal-qty::-webkit-inner-spin-button,
#product-modal-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#product-modal-qty {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Body scroll lock while the modal is open */
body.modal-open { overflow: hidden; }

/* Floating "Done" tray — appears once at least one item is selected */
#order-tray {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 40;
  max-width: calc(100vw - 2rem);
  box-shadow: 0 16px 40px -12px rgba(20, 51, 42, 0.5);
}
#order-tray.hidden { display: none; }
@media (max-width: 380px) {
  #order-tray { font-size: 0.8rem; }
  #order-tray-done { padding-left: 0.85rem; padding-right: 0.85rem; }
}
@media (prefers-reduced-motion: no-preference) {
  #order-tray { animation: order-tray-in 0.25s ease; }
}
@keyframes order-tray-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.btn:hover { transform: translateY(-2px); }

/* Primary buttons: a slow-moving metallic sheen sweeps across on hover —
   the "liquid metal" idea, rebuilt as pure CSS (no WebGL/shader dependency)
   and tinted to the site's own forest/leaf palette instead of chrome. */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(
    115deg,
    var(--color-forest) 0%,
    var(--color-forest) 38%,
    var(--color-leaf) 50%,
    var(--color-forest) 62%,
    var(--color-forest) 100%
  );
  background-size: 260% 100%;
  background-position: 0% 0%;
  transition: background-position 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-position: 100% 0%;
  box-shadow: 0 12px 24px -10px rgba(30, 70, 53, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary { transition: transform 0.2s ease, box-shadow 0.2s ease; }
}

/* Click ripple (added dynamically by main.js) */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: btn-ripple-out 0.6s ease-out forwards;
}
@keyframes btn-ripple-out {
  to { transform: translate(-50%, -50%) scale(8); opacity: 0; }
}

.btn-outline { border: 1.5px solid var(--color-forest); color: var(--color-forest); }
.btn-outline:hover { background: var(--color-forest); color: #fff; }

/* ==========================================================================
   Flowing background paths — a restrained, brand-tinted nod to the
   animated line motif requested. Pure CSS/SVG, no JS or external
   libraries; sits behind hero content at low opacity so text stays crisp.
   ========================================================================== */
.flow-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.flow-bg svg { position: absolute; top: -25%; left: -20%; width: 145%; height: 150%; }
.flow-bg path { fill: none; stroke-linecap: round; }
.flow-bg .flow-path-a { animation: flow-drift-a 28s ease-in-out infinite; transform-origin: center; }
.flow-bg .flow-path-b { animation: flow-drift-b 34s ease-in-out infinite; transform-origin: center; }
.flow-bg .flow-path-c { animation: flow-drift-a 24s ease-in-out infinite reverse; transform-origin: center; }
@keyframes flow-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50% { transform: translate(1.5%, -1%) scale(1.015); opacity: 0.75; }
}
@keyframes flow-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
  50% { transform: translate(-1.5%, 1%) scale(1.02); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-bg .flow-path-a, .flow-bg .flow-path-b, .flow-bg .flow-path-c { animation: none; }
}

/* Timeline dots (About page) */
.timeline-dot { box-shadow: 0 0 0 5px var(--color-paper), 0 0 0 6px var(--color-line); }

/* Form */
.field-error { color: #B3261E; font-size: 0.8rem; margin-top: 0.25rem; display: none; }
.field-invalid .field-error { display: block; }
.field-invalid input, .field-invalid textarea { border-color: #B3261E !important; }

/* Skip link */
.skip-link { position: absolute; left: -999px; top: auto; background: var(--color-forest); color: #fff; padding: 0.6rem 1rem; z-index: 100; border-radius: 0 0 0.5rem 0; }
.skip-link:focus { left: 0; top: 0; }