/* Section Line Ag — everything this repo adds on top of the handoff's stylesheet.
   ------------------------------------------------------------------------------------------
   Three things live here, and they have one thing in common: css/site.css has no markup for
   any of them.

     1. THE GATE — the locked state of the estimate card.
     2. FORM AFFORDANCES — the email-typo hint, validation errors, invalid-field styling.
     3. THE MOBILE NAV — the hamburger the handoff's README says to add.

   Kept OUT of css/site.css on purpose. That file is a client deliverable from the 2026-09-08
   handoff and the next revision of the design arrives as a whole-file replacement; anything
   added to it is lost at that moment, silently. Everything here belongs to this repo's
   behavior, not to the design, so it survives the swap. Loaded after site.css. */

/* --- THE GATE ---------------------------------------------------------------------------
   While `.locked` is on, every figure on screen is a fixed placeholder written by
   renderPlaceholders() in index.html, and the blur is what tells the visitor so.

   The blur is NOT the boundary — not rendering the real number is. Removing `.locked` in
   devtools reveals "$000,000", because the computed figures live in `lastCalc` and never reach
   the DOM until /api/lead returns 200. This paragraph used to say it revealed "jitter, not an
   estimate", and that was wrong twice over: the jitter was derived from the real figures, and
   for 1 acreage in 29 it was a multiplier of exactly 1.00.

   It also used to imply the figures were unobtainable, which overstates what any of this can do.
   The per-acre tiers, the 13% cap and the range multipliers are all plaintext in index.html, so
   the range is recomputable from source without submitting. See the note on renderPlaceholders()
   in index.html: this is a lead-capture gate, not a confidentiality boundary. */
.result.locked .stat .v,
.result.locked .stat .s{
  filter:blur(7px);
  -webkit-user-select:none;user-select:none;
  pointer-events:none;
}
.result.locked .stat .k{opacity:.75}

/* The lock note. Real DOM text (#lockNote), NOT a ::after — it used to be generated content, and
   generated content is announced inconsistently across assistive tech, which meant the one
   sentence explaining that the figures are placeholders was the one thing a screen-reader user
   did not get. Hidden once unlocked rather than removed, so the unlock is a class change. */
.locknote{
  margin:0 0 .2rem;
  font-size:.82rem;font-weight:700;line-height:1.35;letter-spacing:.02em;
  color:var(--wheat);
}
.result:not(.locked) .locknote{display:none}

/* Hidden readouts. `.stat` sets display:flex, which beats the UA sheet's [hidden] rule, so the
   attribute does nothing without this. A stat that is meant to be off and is merely mislaid is
   the kind of thing that ships. */
.result .stat[hidden]{display:none}

/* --- Form affordances -------------------------------------------------------------------- */

/* The email typo suggestion. Rendered on blur, so it has to read as advice rather than as an
   error the visitor has already made. */
.field-hint{
  font-size:.82rem;color:var(--on-soil-2);
  margin-top:-.4rem;
}
.field-hint button{
  background:none;border:none;padding:0;
  font:inherit;font-weight:700;color:var(--wheat);
  text-decoration:underline;cursor:pointer;
}

/* Server and validation errors. role="alert" is on the element in the markup; this only makes
   it visible. display is toggled inline by the script, so the default must be none. */
.lead-error,
#miniError{
  display:none;
  font-size:.86rem;line-height:1.4;font-weight:700;
  padding:.6rem .8rem;
  background:rgba(244,217,140,.14);
  border-left:3px solid var(--wheat);
  color:var(--on-soil);
}
.final .lead-error,
.final #miniError{color:var(--on-soil)}

/* The field the visitor has to fix. aria-invalid is what the script sets and what a screen
   reader announces; this is the sighted half of the same signal. */
[aria-invalid="true"]{outline:2px solid #D9534F;outline-offset:1px}

/* The footer form's consent line sits on the dark band, where Patrick's .consent color is
   already correct — but its checkbox needs the same hit area as the calculator's. */
.final .consent{margin-top:.2rem}
.final .thanks{margin:0}


/* --- MOBILE NAV AND THE PHONE NUMBER -----------------------------------------------------
   Two overrides of css/site.css, both about the same 68px bar.

   `@media(max-width:960px){.top nav{display:none}}` hides the primary nav below 960px and puts
   nothing in its place — the handoff's README calls this out and leaves the hamburger to us.

   `@media(max-width:560px){.top .phone{display:none}}` hides the PHONE NUMBER on small screens.
   That one is not a style preference, it is a conversion decision, and it is the wrong one for
   this site: 957 mailed letters carry that number and a phone is the only inbound path any of
   those recipients has. So the phone stays at every width, and the header CTA is what gives way
   instead — the hero repeats it about one scroll-unit below, so nothing is actually lost.

   Above 960px this whole block is inert and the header renders exactly as delivered. */

.navtoggle{display:none}
/* Icon swap declared OUTSIDE the breakpoint below. Inside it, the button is self-consistent only
   at widths where it happens to be visible — correct in practice, but it means the rule depends
   on a second rule to not be wrong, which is the kind of coupling that survives until someone
   shows the button at another width. */
.navtoggle .ico-close{display:none}
.navtoggle[aria-expanded="true"] .ico-open{display:none}
.navtoggle[aria-expanded="true"] .ico-close{display:inline}

@media(max-width:960px){
  /* Re-shown as a dropdown panel under the bar rather than as inline links: at this width there
     is no room for four links beside a logo, a phone number and a button, which is why the
     handoff hid them in the first place. */
  .top nav#primaryNav{
    display:none;
    /* top:100%, not the bar's 68px. The panel has to sit under the bar whatever height the bar
       ends up — and it does grow: at 360px the wordmark is one CSS tweak away from wrapping to
       two lines, at which point a hardcoded 68px puts the panel through the middle of it. */
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--soil);
    border-top:1px solid rgba(242,238,230,.14);
    box-shadow:0 14px 28px rgba(0,0,0,.35);
    padding:.4rem 0;
  }
  .top nav#primaryNav.open{display:flex}
  .top nav#primaryNav a{
    padding:.9rem 24px;
    color:var(--on-soil);
    border-bottom:1px solid rgba(242,238,230,.08);
  }
  .top nav#primaryNav a:last-child{border-bottom:0}

  /* The panel is positioned against the bar, so the bar has to be the containing block. */
  .top .wrap{position:relative}

  .navtoggle{
    display:inline-flex;align-items:center;justify-content:center;
    /* 44px is the minimum comfortable touch target; the 22px icon alone is not one. */
    width:44px;height:44px;
    background:none;border:1.5px solid rgba(242,238,230,.5);border-radius:2px;
    color:var(--on-soil);cursor:pointer;padding:0;
  }
}

@media(max-width:560px){
  /* Undoes the handoff's hide. See the note above: this number is the campaign. */
  .top .phone{display:inline-block;padding:.5rem .7rem;font-size:.95rem}
  /* The header CTA yields the space instead. The hero's copy of it is immediately below. */
  .navcta{display:none}
}

@media(max-width:380px){
  /* At the narrow end even the logo and the phone compete. Shrink the wordmark rather than
     dropping either — a masthead with no brand and a phone with no context are both worse.
     nowrap because the bar is a fixed 68px: left to wrap, "Section Line Ag" becomes two lines
     that overflow it, and the overflow is not clipped, it just sits on top of the hero. */
  .logo{font-size:1.25rem;white-space:nowrap}
  .top .phone{padding:.45rem .55rem;font-size:.88rem}
  .top .wrap{gap:.5rem}
}