/* =============================================================================
 * BASELINE — admin-people.css
 * =============================================================================
 *
 * File: /css/admin-people.css
 * Module: PEOPLE (ADMIN) — front-end Person editor
 * Version: 1.0
 * Last Updated: 2026-03-22
 *
 * PURPOSE
 * -------
 * - Consistent “card” UI for selecting and editing Person posts
 * - ACF form styling to match site aesthetics
 * - Featured image preview with overlay “Change photo…” button
 *
 * NOTES
 * -----
 * - Baselined verbatim from user-supplied source.
 * - No logic changes made.
 * - Original comments, duplication, order, and rule structure preserved.
 *
 * =============================================================================
 */


/* =============================================================================
   01) DESIGN TOKENS (scoped to this feature)
   - Tokens are scoped to .km-people-admin so they don’t “leak” to other modules.
   - Change here once; the whole module updates.
============================================================================= */

.km-people-admin{
  /* Layout */
  --km-people-layout-max-width: 980px;
  --km-people-layout-padding-x: 16px;

  /* Spacing */
  --km-people-space-1: 6px;
  --km-people-space-2: 10px;
  --km-people-space-3: 14px;
  --km-people-space-4: 18px;
  --km-people-space-5: 24px;
  --km-people-space-6: 28px;
  --km-people-space-7: 40px;

  /* Typography */
  --km-people-type-title-size: 44px;
  --km-people-type-title-size-mobile: 34px;

  /* UI radii */
  --km-people-radius-sm: 10px;
  --km-people-radius-md: 12px;
  --km-people-radius-lg: 18px;

  /* Borders / shadow */
  --km-people-border-soft: rgba(0,0,0,.08);
  --km-people-border-field: rgba(0,0,0,.18);
  --km-people-shadow-card: 0 10px 28px rgba(0,0,0,.08);

  /* Messaging */
  --km-people-msg-ok-border: #2a7;
  --km-people-msg-ok-bg: #f3fbf6;
  --km-people-msg-bad-border: #b33;
  --km-people-msg-bad-bg: #fff0f0;

  /* Photo */
  --km-people-photo-width: 140px;
  --km-people-photo-btn-font-size: 10px;
  --km-people-photo-btn-padding-y: 3px;
  --km-people-photo-btn-padding-x: 20px;
  --km-people-photo-btn-bottom: 8px;
  --km-people-photo-btn-bg: rgba(255,255,255,.95);
  --km-people-photo-btn-fg: #000;

  /* Responsive breakpoint (named decision)
     Meaning: “Mobile layout starts at <= 768px for this module.” */
  --km-people-bp-mobile: 768px;
}


/* =============================================================================
   02) OUTER WRAPPER (centering + page spacing)
============================================================================= */

.km-people-admin{
  max-width: var(--km-people-layout-max-width);
  margin: var(--km-people-space-7) auto;
  padding: 0 var(--km-people-layout-padding-x);
}


/* =============================================================================
   03) MESSAGE BARS (saved / error)
============================================================================= */

.km-people-msg{
  margin: 0 0 var(--km-people-space-3);
  padding: 12px 14px;
  border-left: 4px solid var(--km-people-msg-ok-border);
  background: var(--km-people-msg-ok-bg);
  border-radius: var(--km-people-radius-sm);
}

.km-people-msg--bad{
  border-left-color: var(--km-people-msg-bad-border);
  background: var(--km-people-msg-bad-bg);
}


/* =============================================================================
   04) CARD CONTAINER + HEADER
============================================================================= */

.km-people-card{
  background: #fff;
  border: 1px solid var(--km-people-border-soft);
  border-radius: var(--km-people-radius-lg);
  box-shadow: var(--km-people-shadow-card);
  padding: var(--km-people-space-6) var(--km-people-space-6) var(--km-people-space-5);
}

.km-people-title{
  margin: 0 0 var(--km-people-space-4);
  font-size: var(--km-people-type-title-size);
  line-height: 1.05;
  letter-spacing: -0.02em;
}


/* =============================================================================
   05) SELECTOR ROW (label + select + load button)
============================================================================= */

.km-people-label{
  display: block;
  font-weight: 700;
  margin: 0 0 var(--km-people-space-1);
}

.km-people-row{
  display: flex;
  align-items: center;
  gap: var(--km-people-space-3);
  max-width: 860px;
}

.km-people-select{
  flex: 1 1 auto;
  min-width: 280px;
  height: 44px;
  padding: 8px 12px;
  border-radius: var(--km-people-radius-sm);
  border: 1px solid var(--km-people-border-field);
  background: #fff;
}

.km-people-load.button{
  height: 44px;
  padding: 0 18px;
  border-radius: var(--km-people-radius-sm);
  font-weight: 700;
}

.km-people-hint{
  margin-top: var(--km-people-space-2);
  opacity: .8;
}


/* =============================================================================
   06) “EDITING:” ROW + VIEW LINK
============================================================================= */

.km-people-editing{
  margin: var(--km-people-space-4) 0 var(--km-people-space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--km-people-space-2) 16px;
  align-items: baseline;
}

.km-people-editing-title{
  font-size: 18px;
  font-weight: 800;
}

.km-people-view{
  display: inline-block;
  font-weight: 600;
  text-decoration: underline;
}


/* =============================================================================
   07) ACF FORM (general spacing + “native” field look)
============================================================================= */

.km-people-form{
  margin-top: var(--km-people-space-3);
}

/* Labels: tighter + bolder */
.km-people-form .acf-label{
  margin-bottom: 4px;
}
.km-people-form .acf-label label{
  font-weight: 800;
  margin-bottom: 6px;
}

/* Inputs */
.km-people-form .acf-input input[type="text"],
.km-people-form .acf-input input[type="email"],
.km-people-form .acf-input input[type="url"],
.km-people-form .acf-input input[type="number"],
.km-people-form .acf-input select,
.km-people-form .acf-input textarea{
  width: 100% !important;       /* ACF sometimes sets widths inline */
  max-width: 100%;
  border-radius: var(--km-people-radius-sm);
  border: 1px solid var(--km-people-border-field);
  padding: 10px 12px;
  background: #fff;
}

/* Submit area */
.km-people-form .acf-form-submit{
  margin-top: var(--km-people-space-4);
}
.km-people-form .acf-form-submit input[type="submit"]{
  border-radius: var(--km-people-radius-md);
  font-weight: 800;
  padding: 12px 18px;
}


/* =============================================================================
   08) ACF DIVIDER REMOVAL (simplified)
   What this does:
   - ACF renders “field rows” with top borders / separators.
   - We explicitly remove those borders and any pseudo-divider effects.
============================================================================= */

.km-people-form .acf-fields{
  border: 0 !important;
}

.km-people-form .acf-fields > .acf-field{
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 !important; /* tightened now that dividers are gone */
}

/* Some themes/ACF layouts draw extra divider lines using pseudo-elements */
.km-people-form .acf-fields > .acf-field::before,
.km-people-form .acf-fields > .acf-field::after{
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove Status field from the front-end edit form */
.km-people-form .acf-field[data-name="status"]{
  display: none !important;
}


/* =============================================================================
   09) IMAGE AND CHANGE PHOTO BUTTON (centered block under Editing row)
============================================================================= */

/* Center the photo block as its own row */
.km-people-photo{
  display: block;
  width: fit-content;                 /* shrink-wrap to image width */
  margin: 12px auto 6px;              /* centers under the Editing row */
}

/* Positioning context for overlay button */
.km-people-photo-preview{
  position: relative;
  display: block;
}

/* Photo */
.km-people-photo-img{
  display: block;
  width: var(--km-people-photo-width);
  height: auto;
  border-radius: var(--km-people-radius-md);
}

/* Overlay button */
.km-people-photo-btn{
  position: absolute;
  left: 50%;
  bottom: var(--km-people-photo-btn-bottom);
  transform: translateX(-50%);

  background: var(--km-people-photo-btn-bg);
  color: var(--km-people-photo-btn-fg);

  border: none !important;		/* important required as it is overridden by Elementor button styles */
  box-shadow: none !important;  /* important required as it is overridden by Elementor button styles */
  outline: none !important;     /* important required as it is overridden by Elementor button styles */

  font-size: var(--km-people-photo-btn-font-size);
  padding: var(--km-people-photo-btn-padding-y) var(--km-people-photo-btn-padding-x) !important;
  line-height: 1.2;
  cursor: pointer;
}

/* =============================================================================
   10) RESPONSIVE (named breakpoint decision)
   Note: CSS variables can’t be used in media queries in standard CSS yet,
   so the breakpoint value is duplicated here intentionally.
============================================================================= */

@media (max-width: 768px){
  .km-people-card{
    padding: 18px 16px 16px;
  }

  .km-people-title{
    font-size: var(--km-people-type-title-size-mobile);
  }

  .km-people-row{
    flex-direction: column;
    align-items: stretch;
  }

  .km-people-load.button{
    width: 100%;
  }
}

/* Force Bio label to align to top */
.elementor-element.elementor-element-49fa89f {
    align-self: flex-start !important;
}