/**
 * Public seller profile — the sidebar card.
 *
 * Everything else on this page is already covered: the service grid wears the
 * dashboard's card design (npf-dashboard.css) and the review section is shared
 * with the service page (npf-reviews.css). This file is only the white sidebar
 * that runs down the left of a profile — the facts and the two actions.
 *
 * WHY THE ACTIONS NEEDED THIS
 * ---------------------------
 * The theme prints "Contact Me" as `.ui.primary.button` and "Request Custom
 * Offer" as a bare `<a>` with no button class at all (see
 * wpj_display_custom_offer_button(): the `user_profile` branch sets `$class`
 * to an empty string). So the page offered a solid blue button and, below it,
 * grey text at the same weight as the field labels above — the second of the
 * two things a buyer comes here to do read as a caption.
 *
 * It is given the outline treatment the rest of the site uses for a secondary
 * action (npf-home.css `.btn--outline`): the same box, the same height, a
 * primary border and primary text instead of a fill. Both actions are then
 * visibly actions, and which one is primary is still obvious.
 *
 * The rows themselves are `.user-<field>-wrapper`, named from the `$f_name`
 * the theme passes into wpj_show_user_field_content().
 */

/* ------------------------------------------------------------------
 * Removed rows
 *
 * Recent Delivery, Last Seen and Completed Jobs are cut at the ACF value in
 * NPF_Profile::trim_sidebar(), which is what stops their queries running.
 * This is the net for an install where that filter does not land — a row
 * saying "No delivery" is worse than no row.
 * ------------------------------------------------------------------ */
body.npf-profile .user-recent_delivery-wrapper,
body.npf-profile .user-last_seen-wrapper,
body.npf-profile .user-completed_jobs-wrapper {
  display: none !important;
}

/* ------------------------------------------------------------------
 * Actions
 * ------------------------------------------------------------------ */

/* Both action rows lose the empty label cell the field renderer prints for
   them — wpj_show_user_field_content() always emits `<p></p>` for the label,
   even when it was passed ''. Left alone it holds a line of dead space above
   each button. */
body.npf-profile .user-contact_me-wrapper > p:empty,
body.npf-profile .user-request_custom_offer-wrapper > p:empty {
  display: none;
}

body.npf-profile .user-contact_me-wrapper,
body.npf-profile .user-request_custom_offer-wrapper {
  border: 0;
}

body.npf-profile .user-contact_me-wrapper > span,
body.npf-profile .user-request_custom_offer-wrapper > span,
body.npf-profile .user-contact_me-wrapper .bottom-content,
body.npf-profile .user-request_custom_offer-wrapper .bottom-content {
  display: block;
  width: 100%;
  text-align: left;
}

/* Contact Me sits directly above Request Custom Offer, so the gap between them
   is this row's bottom margin rather than a rule. */
body.npf-profile .user-contact_me-wrapper {
  padding-bottom: 0;
  margin-bottom: 10px;
}

/* The shared button box. `a` in the selector because both are anchors and the
   theme's Semantic rules are anchor-scoped; without it the fill and the
   padding here lose to them. */
body.npf-profile .user-contact_me-wrapper a.ui.button,
body.npf-profile .user-request_custom_offer-wrapper a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 20px;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  border-radius: var(--npf-radius-btn);
  box-shadow: none;
  cursor: pointer;
  transition: background var(--npf-t), color var(--npf-t), border-color var(--npf-t), transform var(--npf-t);
}

/* Primary — Contact Me. !important because the theme injects an inline
   `.ui.primary.button { background: #c0c0c0 !important }` rule that no amount
   of selector weight can beat; npf-skin.css answers it the same way. */
body.npf-profile .user-contact_me-wrapper a.ui.button {
  background: var(--npf-primary) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1.5px solid var(--npf-primary) !important;
}

body.npf-profile .user-contact_me-wrapper a.ui.button:hover {
  background: var(--npf-primary-dark) !important;
  border-color: var(--npf-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--npf-shadow-primary);
}

/* Secondary — Request Custom Offer.

   A size of its own, below the 1rem the box above sets. "Request Custom Offer"
   is three words in a sidebar barely wider than the button's own padding, and
   at 16px/600 it did not fit on one line — it broke after "Custom" and the
   ghost button stood a line taller than the filled one directly above it. */
body.npf-profile .user-request_custom_offer-wrapper a {
  background: transparent;
  color: var(--npf-primary);
  border: 1.5px solid var(--npf-primary);
  font-size: 0.875rem;
}

/* `!important`, and the inner `<p>` named alongside the anchor: the label is
   not a text node of the link but a paragraph inside it (see the rule at the
   bottom of this file), and the theme's sidebar colours paragraphs at a weight
   that a plain `color` on the hovered anchor does not reach through. Without
   both, the fill turned primary on hover and the text stayed primary with it —
   the label disappeared into the button. */
body.npf-profile .user-request_custom_offer-wrapper a:hover,
body.npf-profile .user-request_custom_offer-wrapper a:hover > p,
body.npf-profile .user-request_custom_offer-wrapper a:focus,
body.npf-profile .user-request_custom_offer-wrapper a:focus > p {
  color: #fff !important;
}

body.npf-profile .user-request_custom_offer-wrapper a:hover {
  background: var(--npf-primary) !important;
  border-color: var(--npf-primary) !important;
  transform: translateY(-2px);
}

/* The theme wraps the label in a `<p>` inside the anchor — see
   wpj_up_show_user_custom_offer(), which passes '<p>Request Custom
   Offer</p>' as the button title. It arrives with the stylesheet's paragraph
   margins and the field-label colour, both of which have to come back off for
   the text to sit centred in the box. */
body.npf-profile .user-request_custom_offer-wrapper a > p {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: center;
}

/* ------------------------------------------------------------------
 * Vacation Mode modal
 *
 * The sidebar's Vacation Mode toggle opens the theme's modal
 * (wpj_vacation_mode_modal(), printed by wpj_up_show_user_vacation_mode()).
 * npf-account.css styles that same modal thoroughly, but it is only loaded on
 * the account screens — from a profile the dialog arrives in the theme's own
 * presentation. Only the two things that were actually wrong are corrected
 * here rather than the account treatment being duplicated onto a page that
 * does not load its tokens.
 *
 * Semantic detaches the modal to `<body>` when it opens, so it leaves the
 * profile's own wrappers; `body.npf-profile` is what keeps these in scope, and
 * the id is what keeps them off every other modal on the site.
 * ------------------------------------------------------------------ */

/* The footer. Semantic right-aligns modal actions; on a dialog this narrow,
   with one affirmative and one dismissive button, the pair reads as centred
   under the form it confirms. */
body.npf-profile #vacation_mode_modal_ui > .actions {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center !important;
}

body.npf-profile #vacation_mode_modal_ui > .actions .ui.button {
  margin: 0 !important;
}

/* The date picker opens as a Semantic popup anchored to its input. Nothing
   here positions it — that is npf-vacation.js, which flips it below the field
   it belongs to — but the modal must not clip it once it opens downward and
   runs past the dialog's own bottom edge. */
body.npf-profile #vacation_mode_modal_ui {
  overflow: visible !important;
}