/*
  Site custom styles
  - Generic custom CSS for local design/testing work.
  - Synced to LocalWP by watch-local-css.ps1.
*/

/* Forms */

/*
  Gravity Forms card sections
  Setup:
  1) In Form Settings, add form CSS class: artist-profile-form
  2) Use an HTML field as each card header with class: apf-card-header
  3) Header HTML example:
     <span class="__number-red-circle">1</span><h2>The Basics</h2>
  4) For each card body field, use ONE class per field:
     apf-start (first field in card)
     apf       (middle fields)
     apf-end   (last field in card)

  Wrapper class note: depending on Gravity Forms version/theme, the custom
  CSS Class Name can end up on the .gform_wrapper div as-is, on the
  .gform_wrapper div with a "_wrapper" suffix (Orbital/2.5 theme), or only
  on the <form> tag. Rather than assume one, every field-level selector
  below is scoped with :where(...) listing all three possibilities, so it
  matches whichever one your live markup actually uses.
*/

/* Card color/spacing tokens - edit these to retheme the whole card form. */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) {
  --apf-card-bg: #ffffff;
  --apf-card-border: #ddd2c3;
  --apf-page-bg: #f6f1e8;
  --apf-text: #2b241f;
  --apf-muted: #8c8175;
  --apf-accent: #d8642f;
  --apf-field-border: #ded6cc;
  --apf-field-radius: 6px;
  --apf-card-radius: 12px;
  --apf-card-padding-x: 20px;
  --apf-card-padding-y: 18px;
}

/*
  Outer page background + padding around the whole card stack.
  Targets the wrapper div only (not <form>) so this doesn't get applied
  twice if both the wrapper and the form end up carrying a matching class.
*/
.gform_wrapper.artist-profile-form_wrapper,
.gform_wrapper.artist-profile-form {
  background: var(--apf-page-bg);
  padding: 24px;
}

/*
  Card header box. Apply class "apf-card-header" to the HTML field that
  starts a new card. Hides that field's own label/description so only
  your custom header HTML (number circle + heading) shows.
*/
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-card-header {
  position: relative;
  background: var(--apf-card-bg);
  border: 1px solid var(--apf-card-border);
  border-bottom: 0;
  border-radius: var(--apf-card-radius) var(--apf-card-radius) 0 0;
  margin: 0;
  padding: 22px var(--apf-card-padding-x) 14px 56px;
  display: flex;
  align-items: center;
  gap: 14px;
}

:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-card-header .gfield_label,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-card-header .gfield_description {
  display: none;
}

/* Numbered red circle. Wrap the number in <span class="__number-red-circle"> inside the header HTML field. */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-card-header .__number-red-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--apf-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* Card title text. Put the card's heading in an <h2> inside the header HTML field. */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-card-header h2 {
  margin: 0;
  color: var(--apf-text);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
}

/*
  Card body fields. Apply exactly one of these classes to each field
  inside a card: "apf-start" on the first field, "apf" on middle fields,
  "apf-end" on the last field. This rule draws the left/right card walls
  shared by all of them.
*/
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end {
  background: var(--apf-card-bg);
  border-left: 1px solid var(--apf-card-border);
  border-right: 1px solid var(--apf-card-border);
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 var(--apf-card-padding-x) var(--apf-card-padding-y);
}

/* First field in a card: extra top padding right under the header. */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start {
  padding-top: 10px;
}

/* Last field in a card: closes the card with a bottom border/radius and gap before the next card. */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end {
  border-bottom: 1px solid var(--apf-card-border);
  border-radius: 0 0 var(--apf-card-radius) var(--apf-card-radius);
  padding-bottom: 22px;
  margin-bottom: 20px;
}

/* Field labels inside any card field (apf / apf-start / apf-end). */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf .gfield_label,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start .gfield_label,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end .gfield_label {
  color: var(--apf-text);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Required-field asterisk color, form-wide. */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield_required {
  color: #c34d19;
}

/* Base input/select/textarea look for any card field. */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf input,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf select,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf textarea,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start input,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start select,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start textarea,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end input,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end select,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end textarea {
  background: #fff;
  border: 1px solid var(--apf-field-border);
  border-radius: var(--apf-field-radius);
  min-height: 46px;
  padding: 12px 14px;
  color: var(--apf-text);
  box-shadow: none;
}

/* Taller textarea variant for any card field. */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf textarea,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start textarea,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end textarea {
  min-height: 140px;
  resize: vertical;
}

/* Placeholder text color for any card field. */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf ::placeholder,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start ::placeholder,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end ::placeholder {
  color: var(--apf-muted);
  opacity: 1;
}

/* Focus ring for any card field. */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf input:focus,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf select:focus,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf textarea:focus,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start input:focus,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start select:focus,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start textarea:focus,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end input:focus,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end select:focus,
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end textarea:focus {
  border-color: #c8b9a7;
  box-shadow: 0 0 0 2px rgba(200, 185, 167, 0.2);
}

/* Removes Gravity Forms' default row gap so stacked card fields sit flush against each other. */
:where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gform_fields {
  row-gap: 0;
}

@media (max-width: 767px) {
  .gform_wrapper.artist-profile-form_wrapper,
  .gform_wrapper.artist-profile-form {
    padding: 14px;
  }

  :where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-card-header {
    padding-left: 50px;
    padding-right: 16px;
  }

  :where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-card-header h2 {
    font-size: 24px;
  }

  :where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf,
  :where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-start,
  :where(.gform_wrapper.artist-profile-form_wrapper, .gform_wrapper.artist-profile-form, form.artist-profile-form) .gfield.apf-end {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/*
  Add Artist form (GF form 12) section headers, per the Figma
  "SectionHeader" spec. Apply CSS class "__form-section-add-artist-title"
  to each HTML field and use this markup:
    <h2><span class="__number-red-circle">1</span><span>The Basics</span></h2>
  Inter is enqueued for this form in inc/gravity-forms-customizations.php.
*/
.gform_wrapper .gfield.__form-section-add-artist-title h2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: normal;
  text-transform: none;
  color: #1a1a1a;
}

.gform_wrapper .gfield.__form-section-add-artist-title .__number-red-circle {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d4532b;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: #ffffff;
}


/* Artist Directory */

/* [bzc_artist_availability] on the single Artist template */
ul.artist-availability {
  margin: 0;
  padding-left: 1.25em;
  list-style: disc;
}

ul.artist-availability li {
  margin: 0 0 0.35em;
  padding: 0;
}

ul.artist-availability li:last-child {
  margin-bottom: 0;
}


/* Events */


/* Utilities */