/*
 * Basaltic Farms Garlic Zone Finder Widget
 * All styles namespaced under .bf-zone-finder so the widget never collides
 * with WordPress theme rules. Background is transparent so the widget
 * inherits whatever page it's embedded on. Mobile-responsive at >=320px.
 *
 * Brand palette taken from basalticfarms.com (verified 2026-05-05 against
 * the live CSS — the BF theme defines --primary-blue, --primary-orange,
 * --secondary-blue, --text-gray, etc. as :root custom properties).
 *
 *  Site role             | Site color | Widget variable
 *  ----------------------+------------+------------------------
 *  primary brand (navy)  | #1C406E    | --bf-primary
 *  primary hover         | #193a63    | --bf-primary-hover
 *  CTA / submit          | #9A660C    | --bf-cta
 *  CTA text              | #000       | --bf-cta-text
 *  headings (h1..h6)     | #9A660C    | --bf-heading-color
 *  links / borders       | #1C406E    | --bf-link
 *  body text             | #333       | --bf-text
 *  secondary text        | #666       | --bf-muted
 *  border-gray           | #d3d3d3    | --bf-border
 *  Open Sans is the site font-family; we list it first and fall back to
 *  system stack so the widget is consistent on the BF site and readable
 *  anywhere else without an extra HTTP request.
 */

.bf-zone-finder {
  --bf-primary:        #1C406E;            /* primary navy */
  --bf-primary-hover:  #193a63;            /* lighter navy used by site hovers */
  --bf-primary-dark:   #001a3b;            /* darker navy for emphasis */
  --bf-cta:            #9A660C;            /* orange CTA */
  --bf-cta-hover:      #e08e0a;            /* darker orange for hover */
  --bf-cta-text:       #ffffff;            /* white text on gold CTA - ADA AA 4.91:1 */
  --bf-heading-color:  #1C406E;            /* navy per Zack 2026-05-05 — site has both orange (global) and navy (Divi section) conventions; widget uses navy */
  --bf-link:           #1C406E;            /* navy links per site */
  --bf-text:           #333333;            /* site --text-gray */
  --bf-muted:          #666666;            /* secondary text */
  --bf-border:         #d3d3d3;            /* site --border-gray */
  --bf-soft:           #e5e9f0;            /* soft navy tint (spinner track) */
  --bf-result-bg:      rgba(0, 36, 84, 0.04);  /* faint navy result panel */
  --bf-error:          #cf2e2e;            /* error red */
  --bf-radius:         4px;
  --bf-font:           "Open Sans", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  font-family: var(--bf-font);
  color: var(--bf-text);
  font-size: 15px;                /* 2026-05-06 polish: was 16px — tightened for compact layout */
  line-height: 1.45;              /* was 1.5 */
  background: transparent;
  /* Honor the parent container's width — never push past it. The 720px cap
   * still applies on wide pages. */
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: .75rem 0;              /* was 1rem 0 */
  box-sizing: border-box;
  overflow-wrap: break-word;      /* long URLs / unbroken strings stay inside */
  word-wrap: break-word;
}
.bf-zone-finder *,
.bf-zone-finder *::before,
.bf-zone-finder *::after { box-sizing: inherit; }
/* Defensive: any image/embed inside the widget shrinks to fit, never
 * pushes the container wider. */
.bf-zone-finder img,
.bf-zone-finder svg,
.bf-zone-finder iframe { max-width: 100%; height: auto; }

/* H2 styled like a heading (no h1 in widget per spec section 9). Color
 * follows BF's site convention: navy. 2026-05-06 polish: tightened from
 * 1.5rem → 1.35rem so the widget fits in narrower BF-site columns
 * without dominating the page. */
.bf-zone-finder .bf-heading {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 .35rem 0;
  color: var(--bf-heading-color);
  font-weight: 700;
}
.bf-zone-finder .bf-subhead {
  margin: 0 0 .85rem 0;
  color: var(--bf-muted);
  font-size: .95rem;
}

/* --- Idle form -------------------------------------------------------- */
/* The form is a single column-flex container holding (in DOM order):
 *   1. .bf-zip-row        — label + ZIP input on one inline line
 *   2. .bf-error          — validation message slot
 *   3. .bf-advanced-toggle
 *   4. .bf-advanced       — collapsible advanced section (hidden when collapsed)
 *   5. .bf-submit         — "Find my garlic" button, ALWAYS the last child
 *
 * The submit button sits naturally at the bottom of whatever's currently
 * visible: under the ZIP row + toggle when collapsed, under the address
 * fields when advanced is expanded. No JS-driven repositioning needed.
 * (Layout fix 2026-05-06.) */
.bf-zone-finder .bf-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-start;
  margin: 0 0 .5rem 0;
}
.bf-zone-finder .bf-zip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.bf-zone-finder .bf-form label {
  font-weight: 600;
  margin-right: .25rem;
  color: var(--bf-primary);
}
.bf-zone-finder .bf-zip-input {
  font: inherit;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  padding: .55rem .75rem;
  width: 8rem;
  background: #fff;
  color: var(--bf-text);
}
.bf-zone-finder .bf-zip-input:focus {
  /* Match the site's focus pattern: orange 2px outline */
  outline: 2px solid var(--bf-cta);
  outline-offset: 2px;
  border-color: var(--bf-primary);
}
.bf-zone-finder .bf-submit {
  /* Site CTA pattern: orange background, black text, no border */
  font: inherit;
  font-weight: 600;
  background: var(--bf-cta);
  color: var(--bf-cta-text);
  border: 0;
  border-radius: var(--bf-radius);
  padding: .6rem 1.1rem;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.bf-zone-finder .bf-submit:hover {
  background: var(--bf-cta-hover);
}
.bf-zone-finder .bf-submit:focus {
  outline: 2px solid var(--bf-primary);
  outline-offset: 2px;
}
.bf-zone-finder .bf-submit:disabled { opacity: .55; cursor: not-allowed; }

.bf-zone-finder .bf-error {
  color: var(--bf-error);
  margin: .5rem 0 0 0;
  min-height: 1.25rem;
}

/* --- Advanced address section (Phase 3) ------------------------------- */
.bf-zone-finder .bf-advanced-toggle {
  display: inline-block;
  margin: .25rem 0 0 0;
  padding: .25rem 0;
  background: none;
  border: 0;
  color: var(--bf-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font: inherit;
}
.bf-zone-finder .bf-advanced-toggle:hover { color: var(--bf-primary-hover); }
.bf-zone-finder .bf-advanced-toggle:focus {
  outline: 2px solid var(--bf-cta);
  outline-offset: 2px;
}

.bf-zone-finder .bf-advanced {
  /* 2026-05-06: progressive-disclosure styling. The advanced section was
   * originally a "panel" (navy left stripe + soft tint + rounded corners +
   * 1rem padding) — but that visual containment was redundant with the
   * toggle's expand/collapse semantics. Now the address inputs flow inline
   * with the rest of the form. The toggle itself does the work of
   * indicating what's part of advanced; no chrome around the fields needed.
   * The result panel keeps its left-border treatment because it's
   * customer-facing OUTPUT; this is INPUT and stays unstyled. */
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  align-self: stretch;   /* span the full form column width */
}
.bf-zone-finder .bf-advanced[hidden] { display: none; }
.bf-zone-finder .bf-advanced-why {
  margin: 0 0 .75rem 0;
  font-size: .95rem;
  color: var(--bf-text);
}
.bf-zone-finder .bf-advanced-fields {
  display: grid;
  grid-template-columns: 1fr 7rem;
  gap: .5rem .75rem;
}
.bf-zone-finder .bf-advanced-field {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.bf-zone-finder .bf-advanced-field.bf-field-street { grid-column: 1 / span 2; }
.bf-zone-finder .bf-advanced-field label {
  font-weight: 600;
  font-size: .92rem;
  color: var(--bf-primary);
}
.bf-zone-finder .bf-advanced input[type="text"],
.bf-zone-finder .bf-advanced select {
  font: inherit;
  padding: .5rem .65rem;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  background: #fff;
  color: var(--bf-text);
  width: 100%;
}
.bf-zone-finder .bf-advanced input:focus,
.bf-zone-finder .bf-advanced select:focus {
  outline: 2px solid var(--bf-cta);
  outline-offset: 2px;
  border-color: var(--bf-primary);
}
.bf-zone-finder .bf-advanced-validation {
  color: var(--bf-error);
  margin: .5rem 0 0 0;
  font-size: .92rem;
  min-height: 1rem;
}

@media (max-width: 480px) {
  .bf-zone-finder .bf-advanced-fields {
    grid-template-columns: 1fr;
  }
  .bf-zone-finder .bf-advanced-field.bf-field-street { grid-column: 1; }
}

/* --- Result extras for advanced flow ---------------------------------- */
.bf-zone-finder .bf-elevation-line {
  margin: -.25rem 0 .35rem 0;
  font-size: 1rem;
  color: var(--bf-primary);
  font-weight: 600;
}

/* 2026-05-07 Phase 5.0 close — Task 1: elevation context blurb + privacy
 * reaffirmation. Body-text-sized blurb, regular weight, normal text color
 * but slightly smaller than the section headers above. Some breathing
 * room before the result sections that follow. Mobile-friendly wrapping
 * inherits from the panel's overflow-wrap rule. */
.bf-zone-finder .bf-elevation-blurb {
  margin: .25rem 0 .25rem 0;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--bf-text);
  max-width: 100%;
}
.bf-zone-finder .bf-elevation-privacy {
  /* Caption-sized + muted, similar muted treatment to the non-BF subgroup
   * rows in Section 1. Sits directly under the blurb. */
  margin: 0 0 .85rem 0;
  font-size: .82rem;
  color: var(--bf-muted);
  line-height: 1.4;
  max-width: 100%;
}

.bf-zone-finder .bf-geocode-fallback {
  margin: .75rem 0 0 0;
  font-size: .92rem;
  color: var(--bf-muted);
  font-style: italic;
}

/* --- Loading ---------------------------------------------------------- */
.bf-zone-finder .bf-loading {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 0;
  color: var(--bf-muted);
}
.bf-zone-finder .bf-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--bf-soft);
  border-top-color: var(--bf-primary);
  border-radius: 50%;
  animation: bf-spin .9s linear infinite;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }

/* --- Result ----------------------------------------------------------- */
/* 2026-05-06 polish: tightened padding from 1rem 1.25rem → .75rem 1rem so
 * the panel uses less screen real estate inside narrow page columns. */
.bf-zone-finder .bf-result {
  background: var(--bf-result-bg);
  border-left: 4px solid var(--bf-primary);
  padding: .75rem 1rem;
  border-radius: var(--bf-radius);
  margin-top: .5rem;
}
.bf-zone-finder .bf-summary {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bf-primary);
  margin: 0 0 .55rem 0;
}
.bf-zone-finder .bf-result-section { margin: .55rem 0; }
.bf-zone-finder .bf-result-section:last-child { margin-bottom: 0; }
/* Legacy inline label (still used in a few places — extended-disclaimer etc.). */
.bf-zone-finder .bf-result-label {
  font-weight: 600;
  margin-right: .25rem;
  color: var(--bf-primary);
}
.bf-zone-finder .bf-result-section p { margin: 0 0 .25rem 0; }

/* 2026-05-06 polish: bucket header (h3) sits above each grouped variety
 * list. Visually distinct from the navy summary line — slightly smaller
 * and uppercase-ish weight rather than full caps. */
.bf-zone-finder .bf-result-bucket-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bf-primary);
  margin: 0 0 .35rem 0;
  line-height: 1.3;
}

/* Grouped subgroup list — one <li> per subgroup. Format depends on row
 * type:
 *   BF rows (.bf-row-bf):       "{Subgroup} · variety, variety" with
 *                                links + middle-dot separator
 *   Non-BF rows (.bf-row-nonbf): "{Subgroup}" alone, slightly muted to
 *                                recede visually from BF rows whose
 *                                links draw the eye. NO separator dot,
 *                                NO trailing varieties.
 */
.bf-zone-finder .bf-bucket-subgroup-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bf-zone-finder .bf-bucket-subgroup-row {
  margin: 0 0 .2rem 0;
  padding: 0;
  line-height: 1.4;
}
.bf-zone-finder .bf-bucket-subgroup-row:last-child { margin-bottom: 0; }
.bf-zone-finder .bf-bucket-subgroup-name {
  font-weight: 600;
  color: var(--bf-text);
}
/* Non-BF subgroup name: slightly muted — readable but recedes compared
 * to BF rows. Uses the standard text color at reduced weight + a touch
 * of the muted color to pull contrast down without making it look
 * broken. */
.bf-zone-finder .bf-bucket-subgroup-name-nonbf {
  font-weight: 500;
  color: var(--bf-muted);
}
.bf-zone-finder .bf-row-nonbf {
  /* small left indent so non-BF rows visually nest under the BF rows
   * above them without needing a heavier divider */
  /* keep flush — no indent — the muting alone provides separation */
}
/* Middle dot separator between subgroup name and variety list — only on
 * BF rows. Color matches the muted text so the dot doesn't compete with
 * the variety links. */
.bf-zone-finder .bf-bucket-sep {
  color: var(--bf-muted);
  margin: 0 .15rem;
}
/* Inline italic caveat for reduced-bulb-size BF rows. Sits right after
 * the variety list, same line. */
.bf-zone-finder .bf-row-reduced-tag {
  color: var(--bf-muted);
  font-style: italic;
  font-size: .88rem;
}

/* Trailing note for the "reduced bulb size" bucket. Italic + muted so it
 * reads as a caveat to the subgroup list above. */
.bf-zone-finder .bf-reduced-trail {
  margin: .25rem 0 0 0;
  font-size: .9rem;
  color: var(--bf-muted);
  font-style: italic;
}

.bf-zone-finder .bf-variety-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline;
}
.bf-zone-finder .bf-variety-list li {
  display: inline;
  margin: 0;
}
.bf-zone-finder .bf-variety-list li + li::before {
  content: ", ";
  color: var(--bf-muted);
  margin: 0;
}
.bf-zone-finder .bf-variety-list a {
  color: var(--bf-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bf-zone-finder .bf-variety-list a:hover { color: var(--bf-primary-hover); }

.bf-zone-finder .bf-prechill-note {
  margin: .35rem 0 0 0;
  font-size: .88rem;
  color: var(--bf-muted);
  font-style: italic;
}

.bf-zone-finder .bf-disclaimer {
  margin-top: .75rem;
  padding-top: .5rem;
  border-top: 1px solid var(--bf-border);
  font-size: .88rem;
  color: var(--bf-muted);
}

/* Extended-range disclaimer (change-list #8). Same muted styling as
 * pre-chill / microclimate notes, but no top border because it's an inline
 * caveat, not a closing footer. */
.bf-zone-finder .bf-extended-disclaimer {
  margin: .5rem 0;
  font-size: .88rem;
  color: var(--bf-muted);
  font-style: italic;
}

/* Tropical (Z11+) caveat — sits between summary and gap suggestions. */
.bf-zone-finder .bf-tropical-caveat {
  margin: .25rem 0 .75rem 0;
  color: var(--bf-text);
}

.bf-zone-finder .bf-message {
  background: var(--bf-result-bg);
  border-left: 4px solid var(--bf-primary);
  padding: 1rem 1.25rem;
  border-radius: var(--bf-radius);
  margin-top: .75rem;
}

.bf-zone-finder .bf-restart {
  background: none;
  border: 0;
  color: var(--bf-link);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 1rem;
  font: inherit;
}
.bf-zone-finder .bf-restart:hover { color: var(--bf-primary-hover); }
.bf-zone-finder .bf-restart:focus {
  outline: 2px solid var(--bf-cta);
  outline-offset: 2px;
}

/* --- Mobile ----------------------------------------------------------- */
@media (max-width: 480px) {
  .bf-zone-finder { font-size: 15px; }
  .bf-zone-finder .bf-heading { font-size: 1.25rem; }
  .bf-zone-finder .bf-form { flex-direction: column; align-items: stretch; }
  .bf-zone-finder .bf-zip-input { width: 100%; }
  .bf-zone-finder .bf-submit { width: 100%; }
}

/* --- Variety cards (Patch 2 affordance fix 2026-06) -------------------- */
/* One card per variety; the whole card is the link (larger tap target).
 * The subgroup is demoted to a small uppercase metadata tag. Replaces the
 * subgroup-header-with-nested-links layout that produced dead-clicks
 * (confirmed via Microsoft Clarity). */
.bf-zone-finder .bf-variety-card {
  display: block;
  padding: 12px 14px;
  border-radius: 6px;
  text-decoration: none;
}
.bf-zone-finder .bf-variety-card:hover {
  background: var(--bf-result-bg);
}
.bf-zone-finder .bf-variety-name {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--bf-primary);
}
.bf-zone-finder .bf-variety-card:hover .bf-variety-name {
  text-decoration: underline;
}
.bf-zone-finder .bf-variety-meta {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--bf-muted);
  font-weight: 500;
  margin-top: 2px;
}
@media (max-width: 480px) {
  .bf-zone-finder .bf-variety-name { font-size: 18px; }
}