/* DCJ Kul Farm & Foods — hand-authored layer on top of Tailwind utilities.
   Everything Tailwind can't express: grain texture, hairline rules,
   marquee, custom underline/marker shapes, focus states. */

:root{
  --forest:#1b3b2b;
  --forest-dark:#0f221a;
  --terracotta:#c2410c;
  --ochre:#d97706;
  --cream:#fdfbf7;
  --charcoal:#111827;
}

html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--charcoal);
  font-feature-settings:"ss01" 1;
  overflow-x:hidden; /* safety net: no inner element can force a horizontal scrollbar */
}

/* subtle paper grain so the cream canvas doesn't read as flat digital white */
.grain{
  position:relative;
}
.grain::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
  mix-blend-mode:multiply;
}

/* tracked-out eyebrow labels, like a magazine kicker */
.kicker{
  font-family:"Space Mono", ui-monospace, monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.72rem;
}

/* hand-drawn-feeling underline under headings, not a generic border */
.underline-harvest{
  position:relative;
  display:inline-block;
}
.underline-harvest::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-.15em;
  height:.32em;
  background:var(--terracotta);
  opacity:.22;
  z-index:-1;
}

/* diagonal hairline divider used between magazine-style sections */
.rule{
  border-top:1px solid rgba(27,59,43,.18);
}

/* marquee ticker for trust strip */
.marquee{ width:100%; max-width:100vw; }
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 32s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* progress bar for cost-share batches — hard edge, no rounded pill */
.batch-progress{
  height:10px;
  background:rgba(27,59,43,.12);
  position:relative;
  overflow:hidden;
}
.batch-progress > span{
  position:absolute; inset:0 auto 0 0;
  background:var(--terracotta);
  width:var(--pct, 40%);
}

/* number badge used on category tiles instead of a generic icon-in-circle */
.tile-index{
  font-variant-numeric:tabular-nums;
}

/* custom scrollbar for horizontal product rails */
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-thumb{ background:rgba(27,59,43,.25); }
.rail::-webkit-scrollbar-track{ background:transparent; }

/* select/inputs: square, structural, no default browser chrome */
.field{
  border:1px solid rgba(17,24,39,.18);
  background:#fff;
  border-radius:2px;
}
.field:focus{
  outline:2px solid var(--forest);
  outline-offset:-1px;
}
.field:hover{
  border-color:rgba(17,24,39,.32);
}

/* replace the native <select> chevron with one drawn in brand ink, and
   strip all other browser select chrome (the default arrow is the single
   biggest "generic form" tell on a filter panel) */
select.field{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%231b3b2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:12px 8px;
  padding-right:2.25rem;
  cursor:pointer;
}
select.field.field-inverse{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23fdfbf7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* segmented / pill toggle group built from hidden radios + styled labels —
   no JS required, used for deal-type and similar either/or filters */
.segmented{
  display:grid;
  border:1px solid rgba(27,59,43,.2);
}
.segmented input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.segmented label{
  cursor:pointer;
  text-align:center;
  padding:.6rem .5rem;
  transition:background-color .15s ease, color .15s ease;
}
.segmented label:not(:last-child){
  border-right:1px solid rgba(27,59,43,.2);
}
.segmented input:checked + label{
  background:var(--forest);
  color:var(--cream);
}
.segmented input:focus-visible + label{
  outline:2px solid var(--forest);
  outline-offset:-2px;
}

::selection{ background:var(--ochre); color:#fff; }