/* ==========================================================================
   KG Goat Farm — enquiry page (enquire.html)
   Loaded after kg-home.css and reuses its tokens wholesale; only the page
   header, the form controls and the contact aside live here.
   ========================================================================== */

/* Same rule as kg-home.css: every literal this page adds lives here and the
   rules below reference tokens only. Document additions in DESIGN.md →
   "Night Theme". */
:root{
  /* the one hue the night palette did not need until there were form errors */
  --err:#e8825f;
  --err-line:rgba(232,130,95,.42);
  --err-tint:rgba(232,130,95,.12);

  /* the composed WhatsApp message is a transcript to be read and copied, so it
     is set in the reader's monospace face rather than the brand body font */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* phone numbers in the aside: one step below --fs-stat, a size the shared
     ramp had no need for on the home page */
  --fs-tel:18px;
}

/* ─────────────────────────────────────────── page header ───────────── */

.ehead{
  min-height:clamp(280px,42vh,420px);
  display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + clamp(40px,5vw,72px)) var(--gutter) clamp(28px,3.4vw,44px);
  background:#0a0b06;
}
.ehead__bg{position:absolute;inset:-6%;z-index:-3;}
.ehead__bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%;}
.ehead__grade{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(5,7,3,.86) 0%,rgba(5,7,3,.46) 40%,rgba(5,7,3,.92) 100%),
    linear-gradient(90deg,rgba(5,7,3,.78) 0%,rgba(5,7,3,.14) 60%,rgba(5,7,3,.42) 100%);
}
.ehead__inner{position:relative;z-index:2;max-width:640px;}
.ehead__title{
  font-size:var(--fs-display-cta);
  color:var(--on-photo-strong);
  margin:14px 0 16px;
}
.ehead__lede{
  font-size:14.5px;line-height:1.7;color:var(--on-photo);max-width:46ch;
}

/* ───────────────────────────────────────────── layout ──────────────── */

.enq{
  padding:clamp(40px,4.6vw,64px) var(--gutter) clamp(36px,4vw,56px);
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,44px);
  align-items:start;
  background:linear-gradient(180deg,#0d0e09 0%,var(--panel-1b) 100%);
}

/* ──────────────────────────────────────────────── form ─────────────── */

.form{display:grid;gap:clamp(16px,1.9vw,24px);}
/* a display declaration on the element itself outranks the UA's [hidden] rule,
   so every box here that gets toggled has to opt back out explicitly */
.form[hidden]{display:none;}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px);}
.field{display:grid;gap:8px;min-width:0;}

.label{
  font-size:var(--fs-label);font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-2);
}
.label__opt{
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-4);
}

.input{
  width:100%;
  font-family:var(--body);font-size:14.5px;line-height:1.5;
  color:var(--ink);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:13px 15px;
  transition:border-color .28s ease,background-color .28s ease,box-shadow .28s ease;
  appearance:none;
}
.input::placeholder{color:var(--ink-4);}
.input:hover{border-color:var(--line-photo);}
.input:focus{
  outline:none;
  border-color:var(--accent-line);
  background:var(--panel-3);
  box-shadow:0 0 0 3px var(--accent-tint);
}
/* the browser's own bubble is suppressed (novalidate) — this is the only
   error signal, so it has to survive :hover and :focus */
.input[aria-invalid="true"],
.input[aria-invalid="true"]:hover,
.input[aria-invalid="true"]:focus{border-color:var(--err);}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--err-tint);}

textarea.input{min-height:118px;resize:vertical;}

/* the caret is drawn here rather than left to the UA, which paints a light
   system triangle that is invisible on this ground */
select.input{
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239d9e8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:16px 16px;
}
select.input option{background:var(--panel-2);color:var(--ink);}

.err{
  font-size:12px;line-height:1.45;color:var(--err);
  min-height:0;
}
.err:empty{display:none;}

.form__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.form__hint{font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:30ch;}

.form__alert{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid var(--err-line);
  background:var(--err-tint);
  font-size:13px;line-height:1.55;color:var(--ink);
}
.form__alert[hidden]{display:none;}
.form__alert svg{flex:none;color:var(--err);margin-top:2px;}

/* ─────────────────────────────────────────────── sent ──────────────── */

.sent{
  display:grid;gap:18px;justify-items:start;
  padding:clamp(22px,2.6vw,34px);
  border-radius:var(--radius);
  background:var(--panel-2);
  border:1px solid var(--line);
}
.sent[hidden]{display:none;}
.sent__tick{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:var(--ink-on-accent);
}
.sent__title{font-size:clamp(21px,2.4vw,30px);}
.sent__body{font-size:14px;line-height:1.7;color:var(--ink-2);}
.sent__msg{
  width:100%;margin:0;
  font-family:var(--mono);
  font-size:12.5px;line-height:1.75;color:var(--ink-2);
  background:var(--black);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  padding:16px;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.sent__actions{display:flex;gap:11px;flex-wrap:wrap;}
.btn--ghost{
  border-color:var(--line-photo);color:var(--ink);
}
.btn--ghost:hover{border-color:var(--accent-line);color:var(--accent);transform:translateY(-2px);}
.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:13px;color:var(--accent);
}

/* ────────────────────────────────────────────── aside ──────────────── */

.reach{
  display:grid;gap:clamp(18px,2vw,26px);
  padding:clamp(22px,2.6vw,32px);
  border-radius:var(--radius);
  background:var(--panel-2);
  border:1px solid var(--line-2);
  position:sticky;top:calc(var(--nav-h) + var(--pad) + 8px);
}
.reach__block{display:grid;gap:9px;}
.reach__block + .reach__block{border-top:1px solid var(--line-2);padding-top:clamp(18px,2vw,26px);}
.reach__tel{
  font-family:var(--display);font-weight:800;font-size:var(--fs-tel);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  transition:color .25s ease;
}
.reach__tel:hover{color:var(--accent);}
.reach__mail{font-size:14px;overflow-wrap:anywhere;transition:color .25s ease;}
.reach__mail:hover{color:var(--accent);}
.reach__body{font-size:13px;line-height:1.7;color:var(--ink-2);}
.reach__note{font-size:12.5px;line-height:1.6;color:var(--ink-3);}

/* ────────────────────────────────────────────── responsive ─────────── */

@media (max-width:1040px){
  .enq{grid-template-columns:1fr;}
  .reach{position:static;}
}

/* Keyed off the pointer rather than the width, for the same reason as the
   matching block in kg-home.css: a tablet is wide and still gets tapped. */
@media (pointer:coarse){
  /* The phone number and the email address are the two things a trader on a
     phone is most likely to tap, and both were shipping as ~24px-tall lines.
     They are `inline` links inside a grid, so a min-height alone would do
     nothing — `inline-flex` is what gives them a box tall enough to hit
     without moving the text or changing how the block reads.
     `align-items:center` keeps the glyphs where they were inside that box. */
  .reach__tel,.reach__mail{display:inline-flex;align-items:center;min-height:44px;}
}

@media (max-width:620px){
  .form__row{grid-template-columns:1fr;}
}