/* ==========================================================================
   Business Directory Plugin - Freelance Finder brand layer

   Loaded automatically by WPBDP_Assets::enqueue_css_override(), which scans
   the child theme root for wpbdp.css. Nothing needs enqueuing by hand.

   GenerateBlocks cannot reach BDP output, because BDP renders through its own
   PHP templates. This file is the supported way to brand those screens.
   Tokens come from style.css. Do not hardcode hex values here.

   Selectors verified against wpbdp.min.css class inventory 2026-08-16.
   Anything marked NEEDS-QA should be confirmed against a live render.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography and rhythm inside directory pages
   -------------------------------------------------------------------------- */

.wpbdp-page {
  color: var(--ff-ink-2);
}

.wpbdp-page h1,
.wpbdp-page h2,
.wpbdp-page h3,
.wpbdp-page h4 {
  color: var(--ff-ink);
}

/* --------------------------------------------------------------------------
   2. Buttons - match the site, meet target size
      WCAG 2.2 SC 2.5.8 requires 24px minimum. 44px is the comfortable target.
   -------------------------------------------------------------------------- */

.wpbdp-button,
.wpbdp-page .wpbdp-button,
.wpbdp-page input[type="submit"],
.wpbdp-page button {
  background: var(--ff-clay);
  color: #fff;
  border: 2px solid transparent;
  border-radius: var(--ff-r);
  min-height: var(--ff-tap);
  padding: 0 var(--ff-s5);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.wpbdp-button:hover,
.wpbdp-button:focus,
.wpbdp-page input[type="submit"]:hover,
.wpbdp-page button:hover {
  background: var(--ff-clay-dark);
  color: #fff;
}

.wpbdp-button-secondary,
.wpbdp-page .wpbdp-button-secondary {
  background: transparent;
  color: var(--ff-sage-dark);
  border-color: var(--ff-sage);
}

.wpbdp-button-secondary:hover,
.wpbdp-page .wpbdp-button-secondary:hover {
  background: var(--ff-sage-tint);
  color: var(--ff-sage-dark);
}

.wpbdp-page a:focus-visible,
.wpbdp-page button:focus-visible,
.wpbdp-page input:focus-visible,
.wpbdp-page select:focus-visible,
.wpbdp-page textarea:focus-visible {
  outline: 3px solid var(--ff-clay-dark);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Form fields - submission and search
      Border must clear 3:1 per WCAG SC 1.4.11. The decorative hairline does
      not qualify, so --ff-border is used here deliberately.
   -------------------------------------------------------------------------- */

.wpbdp-page input[type="text"],
.wpbdp-page input[type="email"],
.wpbdp-page input[type="url"],
.wpbdp-page input[type="tel"],
.wpbdp-page input[type="search"],
.wpbdp-page input[type="number"],
.wpbdp-page select,
.wpbdp-page textarea,
.wpbdp-search-form input,
.wpbdp-search-form select {
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-r);
  background: var(--ff-paper);
  color: var(--ff-ink);
  font-size: 1rem; /* 16px stops iOS zoom-on-focus */
  min-height: var(--ff-tap);
  padding: var(--ff-s2) var(--ff-s3);
  width: 100%;
  max-width: 100%;
}

.wpbdp-page textarea {
  min-height: calc(var(--ff-tap) * 3);
  line-height: 1.6;
}

.wpbdp-form-field {
  margin-bottom: var(--ff-s5);
}

/* Labels above fields, always visible. A placeholder disappears exactly when
   someone needs it to review what they typed. */
.wpbdp-form-field-label,
.wpbdp-form-field label {
  display: block;
  font-weight: 600;
  color: var(--ff-ink);
  margin-bottom: var(--ff-s2);
  font-size: 0.92rem;
}

.wpbdp-form-field-validation-errors,
.wpbdp-form-field-validation-error-wrapper {
  color: var(--ff-alert);
  font-size: 0.88rem;
  margin-top: var(--ff-s2);
}

/* --------------------------------------------------------------------------
   4. Listing cards on the browse index
      FF-02: the index prints each listing's full long description. Clamping
      is the CSS half of the fix. A template override is the durable fix.
   -------------------------------------------------------------------------- */

.wpbdp-listing-excerpt,
.wpbdp-excerpt {
  background: var(--ff-paper);
  border: 1px solid var(--ff-hair);
  border-radius: var(--ff-r-lg);
  padding: var(--ff-s5);
  margin-bottom: var(--ff-s4);
  box-shadow: 0 1px 2px rgba(36, 28, 26, 0.05);
}

.wpbdp-listing-excerpt:hover,
.wpbdp-excerpt:hover {
  border-color: var(--ff-border);
  box-shadow: 0 4px 12px rgba(36, 28, 26, 0.08);
}

.wpbdp-listing-excerpt .listing-title,
.wpbdp-excerpt .listing-title,
.wpbdp-listing-excerpt h2,
.wpbdp-listing-excerpt h3 {
  margin-top: 0;
  margin-bottom: var(--ff-s2);
}

/* FF-02 - cap the long description on the index only, never on the single. */
.wpbdp-listing-excerpt .wpbdp-field-value,
.wpbdp-excerpt .wpbdp-field-value {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ff-muted);
  max-width: var(--ff-measure);
}

/* --------------------------------------------------------------------------
   5. Field labels exposed as UI
      FF-03: "Business Genre", "Short Business Description" and friends are
      admin field names shown to visitors. Demote them hard rather than
      deleting, so the value keeps its accessible association.
      NEEDS-QA: confirm the label class on a live single listing.
   -------------------------------------------------------------------------- */

/* Verified markup 2026-08-16:
     <div class="wpbdp-field-display ... wpbdp-field-business_genre">
       <span class="field-label">Business Genre</span>
       <div class="value">...</div>
     </div>
   The class is .field-label, NOT .wpbdp-field-label. */

/* Admin field names are not user interface. Hide the ones whose value speaks
   for itself. The listing name is already the card heading, the genre is
   already a linked category, and the descriptions are self-evident prose. */
.wpbdp-field-business_name .field-label,
.wpbdp-field-business_genre .field-label,
.wpbdp-field-short_business_description .field-label,
.wpbdp-field-long_business_description .field-label,
.wpbdp-field-business_website_address .field-label,
.wpbdp-field-title .field-label,
.wpbdp-field-excerpt .field-label,
.wpbdp-field-content .field-label,
.wpbdp-field-category .field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Anything still labelled becomes small meta rather than a bold shout. */
.wpbdp-field-display .field-label {
  display: block;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ff-muted);
  margin-bottom: var(--ff-s1);
}

.wpbdp-field-display {
  margin-bottom: var(--ff-s3);
}

.wpbdp-field-display .value {
  color: var(--ff-ink-2);
  max-width: var(--ff-measure);
}

/* The listing name is the card heading. */
.wpbdp-field-business_name .value,
.wpbdp-field-title .value {
  font-size: clamp(1.25rem, 1.16rem + 0.39vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
}

.wpbdp-field-business_name .value a,
.wpbdp-field-title .value a {
  color: var(--ff-ink);
  text-decoration: none;
}

.wpbdp-field-business_name .value a:hover,
.wpbdp-field-title .value a:hover {
  color: var(--ff-clay-dark);
}

/* Genre reads as a tag, not a sentence. */
.wpbdp-field-business_genre .value a,
.wpbdp-field-category .value a {
  display: inline-block;
  background: var(--ff-sage-tint);
  color: var(--ff-sage-dark);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--ff-r-pill);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Category list
      FF-04: renders as an unstyled two-column bulleted list that misaligns
      below roughly 500px. Grid with a sensible min width removes the break
      entirely rather than patching it at a breakpoint.
      NEEDS-QA with Playwright, Chrome will not resize below about 500px.
   -------------------------------------------------------------------------- */

.wpbdp-categories ul,
.wpbdp-page .wpbdp-categories ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ff-s2) var(--ff-s5);
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: initial; /* kill any legacy multi-column */
}

/* Verified markup 2026-08-16:
     <li class="cat-item"><a class="category-label">Name</a> (4)</li>
   The count is a bare text node AFTER the anchor, which is why it dropped to
   its own line. The LI has to be the flex container, not the anchor. */
.wpbdp-categories li.cat-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ff-s3);
  margin: 0;
  padding: var(--ff-s2) 0;
  min-height: var(--ff-tap-min);
  border-bottom: 1px solid var(--ff-hair);
  color: var(--ff-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.wpbdp-categories li.cat-item a,
.wpbdp-categories a.category-label {
  color: var(--ff-sage-dark);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}

.wpbdp-categories li.cat-item a:hover {
  color: var(--ff-clay-dark);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Submission flow
   -------------------------------------------------------------------------- */

/* Do NOT override the rootline's own layout. BDP builds the stepper with its
   own flex rules, and adding display/flex-wrap/gap here collapses it into a
   narrow vertical column. Color only. */
.wpbdp-submit-page .wpbdp-submit-rootline {
  margin-bottom: var(--ff-s6);
}

.wpbdp-rootline-section {
  color: var(--ff-muted);
  font-size: 0.9rem;
}

.wpbdp-rootline-circle {
  background: var(--ff-sunken);
  color: var(--ff-ink);
  border-radius: var(--ff-r-pill);
}

.wpbdp-submit-section-current .wpbdp-rootline-circle,
.wpbdp-submit-checked .wpbdp-rootline-circle {
  background: var(--ff-clay);
  color: #fff;
}

.wpbdp-submit-section-current {
  color: var(--ff-ink);
  font-weight: 600;
}

.wpbdp-plan-info-box,
.wpbdp-plan-selection-list li {
  background: var(--ff-ground);
  border: 1px solid var(--ff-hair);
  border-radius: var(--ff-r);
  padding: var(--ff-s4);
}

/* --------------------------------------------------------------------------
   8. Messages
   -------------------------------------------------------------------------- */

/* Neutral by default. BDP uses .wpbdp-msg for submission instructions as well
   as for confirmations, and a green panel on instructions reads as "success"
   when nothing has succeeded yet. */
.wpbdp-msg {
  background: var(--ff-sunken);
  border: 1px solid var(--ff-hair);
  border-left: 3px solid var(--ff-clay);
  border-radius: 0 var(--ff-r) var(--ff-r) 0;
  color: var(--ff-ink-2);
  padding: var(--ff-s4) var(--ff-s5);
  max-width: var(--ff-measure);
}

.wpbdp-msg strong { color: var(--ff-ink); }

.wpbdp-msg.wpbdp-success,
.wpbdp-msg.updated {
  background: var(--ff-sage-tint);
  border-color: var(--ff-sage);
  border-left-color: var(--ff-sage);
}

.wpbdp-msg.wpbdp-error,
.wpbdp-msg.error {
  background: var(--ff-clay-tint);
  border-color: var(--ff-clay);
}

/* --------------------------------------------------------------------------
   9. Search bar and main links
   -------------------------------------------------------------------------- */

.wpbdp-bar,
.wpbdp-main-links-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ff-s3);
  align-items: center;
  margin-bottom: var(--ff-s5);
}

.wpbdp-main-links a {
  min-height: var(--ff-tap);
  display: inline-flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   10. Outbound listing links
       FF-09: the website field links out using the full listing title as
       anchor text, so visitors cannot see the destination. The real fix is a
       template override. This at least marks it as leaving the site.
   -------------------------------------------------------------------------- */

.wpbdp-listing-single a[target="_blank"]::after,
.wpbdp-single a[target="_blank"]::after {
  content: " \2197";
  font-size: 0.85em;
  color: var(--ff-muted);
}

/* --------------------------------------------------------------------------
   11. Listing tags
       Found by responsive QA: tag links rendered 20px tall against the 24px
       minimum, and they sit close enough together that SC 2.5.8's Spacing
       exception does not rescue them. Pills fix the target and read better.
   -------------------------------------------------------------------------- */

/* Verified selector 2026-08-16: the tags field carries
   .wpbdp-field-association-tags, not the shortname class I first guessed. */
.wpbdp-field-association-tags .value,
.wpbdp-field-business_tags .value,
.wpbdp-field-tags .value {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ff-s2);
}

.wpbdp-field-association-tags .value a,
.wpbdp-field-business_tags .value a,
.wpbdp-field-tags .value a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ff-tap-min);
  padding: 2px 10px;
  background: var(--ff-sunken);
  color: var(--ff-ink-2);
  border: 1px solid var(--ff-hair);
  border-radius: var(--ff-r-pill);
  font-size: 0.8rem;
  text-decoration: none;
}

.wpbdp-field-business_tags .value a:hover,
.wpbdp-field-tags .value a:hover {
  background: var(--ff-clay-tint);
  border-color: var(--ff-clay);
  color: var(--ff-clay-dark);
}

/* --------------------------------------------------------------------------
   12. Search inputs
       Found by responsive QA: the directory search field rendered at 15.2px,
       which makes mobile Safari zoom the viewport on focus. 16px is the floor.
       Specificity here has to beat BDP's own rule, hence the doubled class.
   -------------------------------------------------------------------------- */

.wpbdp-page .wpbdp-search-form input[type="text"],
.wpbdp-page input.wpbdp-search-term,
#wpbdp-bar-search-form input,
.wpbdp-bar input[type="text"],
.wpbdp-page input[type="search"],
form[role="search"] input[type="search"],
.wp-block-search__input {
  font-size: 1rem !important; /* 16px, stops iOS zoom-on-focus */
  min-height: var(--ff-tap);
}

/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wpbdp-listing-excerpt,
  .wpbdp-excerpt,
  .wpbdp-button {
    transition: none;
  }
}