/* ==========================================================================
   Everest Forms → ASPB design system
   --------------------------------------------------------------------------
   Loaded only on pages that actually render a form (see inc/enqueue.php), and
   AFTER `everest-forms-general` so these rules cascade last.

   The target is the theme's own reservation form (`.booking-field` in
   aspb.css): mono uppercase labels, serif inputs, square corners, hairline
   borders, --mark on focus, and a .btn.mk submit. Values are copied from
   there on purpose — a visitor should not be able to tell that one form is
   the theme's and the other a plugin's.

   Specificity note: the plugin's own validation rules run to (0,6,1)
   (`.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid
   .evf-field.everest-forms-invalid input.evf-error`), so the two state blocks
   at the bottom match that depth deliberately. Everything else needs far less.
   ========================================================================== */

/* ---- the form as a whole: a panel, so it reads as a distinct object
        inside an article rather than as more prose ---- */
.everest-forms .evf-container{
  background:var(--wash);
  border:1px solid var(--hair);
  padding:clamp(18px,3vw,30px) clamp(6px,1.5vw,16px);
  margin-bottom:0}

/* the plugin's grid uses ±15px gutters; keep them, just add vertical rhythm */
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field{margin-bottom:18px}

/* ---- labels ---- */
.everest-forms label.evf-field-label{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1.4;
  color:var(--grey);
  margin-bottom:7px}
.everest-forms label.evf-field-label .evf-label{font-weight:500}
.everest-forms label.evf-field-label abbr.required{
  color:var(--mark);border:none;text-decoration:none;margin-left:3px}

/* sub-labels and help text under a field */
.everest-forms .everest-forms-field-sublabel,
.everest-forms .evf-field-description,
.everest-forms .everest-forms-field-description{
  font-size:.86rem;line-height:1.5;color:var(--faint);margin-top:6px}

/* ---- text inputs, selects, textareas ---- */
.everest-forms .evf-field input[type=text],
.everest-forms .evf-field input[type=email],
.everest-forms .evf-field input[type=tel],
.everest-forms .evf-field input[type=url],
.everest-forms .evf-field input[type=number],
.everest-forms .evf-field input[type=date],
.everest-forms .evf-field input[type=time],
.everest-forms .evf-field input[type=password],
.everest-forms .evf-field select,
.everest-forms .evf-field textarea{
  width:100%;
  font-family:'Newsreader',Georgia,serif;
  font-size:1.02rem;
  line-height:1.4;
  padding:11px 14px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:0;
  box-shadow:none;
  transition:border-color .15s}

.everest-forms .evf-field input:focus,
.everest-forms .evf-field select:focus,
.everest-forms .evf-field textarea:focus{
  outline:none;border-color:var(--mark);box-shadow:none}

.everest-forms .evf-field textarea{resize:vertical;min-height:110px}

.everest-forms .evf-field input::placeholder,
.everest-forms .evf-field textarea::placeholder{color:var(--faint);opacity:1}

/* number fields are usually a count: no reason to be as wide as an address */
.everest-forms .evf-field-number input[type=number]{max-width:160px}

/* ---- checkboxes and radios ---- */
.everest-forms .evf-field ul{list-style:none;margin:0;padding:0}
.everest-forms .evf-field ul li{margin:0 0 8px;padding:0;display:flex;align-items:flex-start;gap:9px}
.everest-forms .evf-field ul li:last-child{margin-bottom:0}
.everest-forms .evf-field ul li input[type=checkbox],
.everest-forms .evf-field ul li input[type=radio]{
  flex:none;width:auto;margin:3px 0 0;accent-color:var(--mark)}
.everest-forms .evf-field label.everest-forms-field-label-inline{
  font-family:'Newsreader',Georgia,serif;
  font-size:.98rem;line-height:1.45;color:var(--ink);
  text-transform:none;letter-spacing:0;font-weight:400;margin:0}

/* a lone consent tick reads better without its own uppercase heading above it */
.everest-forms .evf-field-checkbox label.evf-field-label{margin-bottom:9px}

/* The plugin lays each choice out at (0,6,1) with `flex-wrap:wrap` and gives
   the label `width:calc(100% - 28px)`. Add a gap to that and the label no
   longer fits on the line, so the text drops under its own tick. Matched at
   the same depth: no wrapping, and the label simply takes the space left. */
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-checkbox ul li,
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-radio ul li,
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-payment-checkbox ul li{
  display:flex;flex-wrap:nowrap;align-items:flex-start;gap:9px;margin-bottom:8px}
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-checkbox ul li .everest-forms-field-label-inline,
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-radio ul li .everest-forms-field-label-inline,
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-payment-checkbox ul li .everest-forms-field-label-inline{
  width:auto;flex:1 1 auto}

/* ---- submit ----
   The plugin paints its own button grey through
   `.everest-forms button.button:not(.button-large)` — specificity (0,3,1).
   The submit carries BOTH `everest-forms-submit-button` and `button`, so
   naming the two classes plus :not() gets us to (0,4,1) and wins outright,
   rather than by load order or by !important. The :hover and :disabled blocks
   climb one step each for the same reason. */
.everest-forms .evf-submit-container{margin-top:22px}
.everest-forms button.everest-forms-submit-button.button:not(.button-large),
.everest-forms input.everest-forms-submit-button.button:not(.button-large),
.everest-forms button.everest-forms-submit-button,
.everest-forms input.everest-forms-submit-button,
.everest-forms .evf-submit{
  font-family:'IBM Plex Mono',monospace;
  font-size:.76rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:500;
  padding:13px 26px;
  color:#fff;
  background:var(--mark);
  border:1px solid var(--mark);
  border-radius:0;
  cursor:pointer;
  width:auto;
  transition:all .18s}
.everest-forms button.everest-forms-submit-button.button:not(.button-large):hover,
.everest-forms input.everest-forms-submit-button.button:not(.button-large):hover,
.everest-forms button.everest-forms-submit-button:hover,
.everest-forms input.everest-forms-submit-button:hover,
.everest-forms .evf-submit:hover{background:#8f2c14;border-color:#8f2c14;color:#fff}
.everest-forms button.everest-forms-submit-button.button:not(.button-large):disabled,
.everest-forms button.everest-forms-submit-button.button:not(.button-large):disabled:hover,
.everest-forms button.everest-forms-submit-button:disabled,
.everest-forms .evf-submit:disabled{opacity:.55;cursor:default;background:var(--mark);border-color:var(--mark);color:#fff}

/* ---- notices (sent / failed) ---- */
.everest-forms .everest-forms-notice{
  font-family:'Newsreader',Georgia,serif;
  font-size:1rem;line-height:1.55;
  padding:13px 16px;margin:0 0 18px;
  border:none;border-left:3px solid var(--grey);
  border-radius:0;background:var(--wash);color:var(--ink)}
.everest-forms .everest-forms-notice--success{border-left-color:var(--quarry);background:var(--wash-blue)}
.everest-forms .everest-forms-notice--error{border-left-color:var(--mark);background:#FBF0EC}
.everest-forms .everest-forms-notice-list{margin:0;padding-left:18px;list-style:disc}

/* ---- validation states ----
   Matched to the plugin's own depth (0,6,1) so the red/green are ours. */
.everest-forms label.evf-error{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;letter-spacing:.04em;
  color:var(--mark);margin-top:6px}

.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.everest-forms-invalid input.evf-error,
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.everest-forms-invalid select.evf-error,
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.everest-forms-invalid textarea{
  border-color:var(--mark)}

/* the plugin paints a validated field bright green; keep it quiet */
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.everest-forms-validated input.input-text,
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.everest-forms-validated select,
.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.everest-forms-validated textarea{
  border-color:var(--quarry)}

/* ---- the form sits inside .post-body, which styles prose ---- */
.post-body .everest-forms .evf-field-label,
.post-body .everest-forms li{margin-bottom:0}
.post-body .everest-forms ul{padding-left:0}

/* ---- small screens: the plugin keeps two columns at every width ---- */
@media(max-width:600px){
  .everest-forms .evf-field-container .evf-frontend-row .evf-grid-2,
  .everest-forms .evf-field-container .evf-frontend-row .evf-grid-3{flex:0 0 100%;max-width:100%}
  /* same (0,4,1) as the base rule, or the plugin's width:auto wins back */
  .everest-forms button.everest-forms-submit-button.button:not(.button-large),
  .everest-forms input.everest-forms-submit-button.button:not(.button-large),
  .everest-forms button.everest-forms-submit-button,
  .everest-forms .evf-submit{width:100%}
}