/* AVIDE Mentor: showcase cards and forms. Theme-agnostic, navy/gold accents. */

.avide-mentor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 1rem 0; }
.avide-mentor-card { padding: 1.1rem 1.2rem; border-radius: 12px; background: #fff; border: 1px solid rgba(27, 42, 74, 0.12); border-top: 4px solid var(--brand-highlight, #c9a227); }
.avide-mentor-card__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.avide-mentor-card__head img { border-radius: 50%; }
.avide-mentor-card__name { display: block; font-weight: 700; color: var(--navy-900, #131f3a); }
.avide-mentor-card__state { display: inline-block; margin-top: 0.15rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.78rem; }
.avide-mentor-card__state.is-open { background: #e6f4e6; color: #1e5c1e; }
.avide-mentor-card__state.is-full { background: #eef1f6; color: #4a5568; }
.avide-mentor-card__areas { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0; }
.avide-mentor-card__areas a { padding: 0.1rem 0.55rem; border-radius: 999px; background: #e8edf6; color: var(--navy-900, #1b2a4a); font-size: 0.8rem; text-decoration: none; }
.avide-mentor-card__areas a:hover { background: #d9e2f2; color: var(--navy-900, #1b2a4a); }
/* Static (non-link) chips: the mentor detail view and the anonymized mentee
   queue reuse the same chip look without the showcase's tag-filter link. */
.avide-mentor-card__areas span { padding: 0.1rem 0.55rem; border-radius: 999px; background: #e8edf6; color: var(--navy-900, #1b2a4a); font-size: 0.8rem; }
.avide-mentor-card__blurb { margin: 0.5rem 0 0; font-size: 0.92rem; line-height: 1.55; color: #33415e; }
.avide-mentor-card__count { margin: 0.5rem 0 0; font-size: 0.85rem; color: #6b7280; }
.avide-mentor-card__head a { display: inline-flex; }
.avide-mentor-card__name { text-decoration: none; }
.avide-mentor-card__name:hover { text-decoration: underline; }

.avide-mentor-form { margin: 1.5rem 0; padding: 1.25rem 1.5rem; border: 1px solid #d9dee8; border-radius: 8px; background: #f7f9fc; }
.avide-mentor-form input[type="text"],
.avide-mentor-form input[type="email"],
.avide-mentor-form input[type="tel"],
.avide-mentor-form input[type="number"],
.avide-mentor-form textarea { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid #b9c2d4; border-radius: 4px; }
.avide-mentor-form p { margin: 0.6rem 0; }
.avide-mentor-btn { display: inline-block; padding: 0.55rem 1.4rem; border: 0; border-radius: 4px; background: #1b2a4a; color: #fff; cursor: pointer; text-decoration: none; }
.avide-mentor-btn:hover { background: #27407a; color: #fff; }
.avide-mentor-notice { padding: 0.6rem 0.9rem; border-radius: 4px; background: #e6f4e6; border: 1px solid #9ec89e; }
.avide-mentor-notice.is-err { background: #fbeaea; border-color: #d6a0a0; }
.avide-mentor-empty { color: #4a5568; }
.avide-mentor-search { display: flex; gap: 0.5rem; margin: 1rem 0; }
.avide-mentor-search input[type="search"] { flex: 1 1 auto; max-width: 24rem; padding: 0.45rem 0.6rem; border: 1px solid #b9c2d4; border-radius: 4px; }

/* Filter panel (FABI-people style): search on top, labeled chip row below,
   uniform chips with counts, active chip filled. */
.avide-mentor-filter { margin: 1rem 0 0.75rem; padding: 1rem 1.2rem 1.1rem; border-radius: 10px; background: #f2f5fa; border: 1px solid #dfe5ef; }
.avide-mentor-filter .avide-mentor-search { margin: 0 0 0.75rem; }
.avide-mentor-filter__label { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4a5568; }
.avide-mentor-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.avide-mentor-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.85rem; border-radius: 999px; background: #fff; border: 1px solid #c7d0e0; color: var(--navy-900, #1b2a4a); font-size: 0.86rem; text-decoration: none; }
.avide-mentor-tag span { font-size: 0.78em; color: #6b7280; }
.avide-mentor-tag:hover { border-color: var(--navy-900, #1b2a4a); color: var(--navy-900, #1b2a4a); }
.avide-mentor-tag.is-active { background: #1b2a4a; border-color: #1b2a4a; color: #fff; }
.avide-mentor-tag.is-active span { color: #c9d3e8; }
.avide-mentor-showing { margin: 0.75rem 0; font-size: 0.92rem; color: #33415e; }

/* Pagination */
.avide-mentor-pages { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1.25rem 0; }
.avide-mentor-page { display: inline-block; min-width: 2.1rem; padding: 0.3rem 0.6rem; border: 1px solid #d9dee8; border-radius: 4px; background: #fff; color: var(--navy-900, #1b2a4a); text-align: center; text-decoration: none; }
.avide-mentor-page:hover { background: #e8edf6; color: var(--navy-900, #1b2a4a); }
.avide-mentor-page.is-current { background: #1b2a4a; border-color: #1b2a4a; color: #fff; }

/* Compact paired inputs (weekly time, mentee period): the generic 100%-wide
   input rule breaks label+input pairs onto separate lines. */
.avide-mentor-form .avide-mentor-time { margin: 0.9rem 0; }
.avide-mentor-form .avide-mentor-time label { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.4rem 1.5rem 0.2rem 0; }
.avide-mentor-form .avide-mentor-time input[type="number"] { width: 5.5em; }
.avide-mentor-form .avide-mentor-time input[type="date"] { width: auto; }
.avide-mentor-form .avide-mentor-time .avide-mentor-note { display: block; margin-top: 0.3rem; }

/* AI assistant + completeness */
.avide-mentor-ai { margin: 0.75rem 0; border: 1px dashed #b9c2d4; border-radius: 6px; padding: 0.3rem 0.9rem; background: #fff; }
.avide-mentor-ai summary { font-weight: 600; cursor: pointer; padding: 0.4rem 0; color: var(--navy-900, #1b2a4a); }
.avide-mentor-gaps { padding: 0.5rem 0.9rem; border-radius: 4px; background: #fdf6e3; border: 1px solid #e3d9b8; font-size: 0.95em; }

/* Program executive board grid ([avide_mentor_director]): one card per
   member, same look as the original single director card. */
.avide-mentor-board-under { margin: 0 0 0.6rem; font-size: 0.92rem; color: #4a5568; }
.avide-mentor-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1rem 0; }
.avide-mentor-director { display: flex; align-items: center; gap: 1.1rem; margin: 1rem 0; padding: 1.1rem 1.3rem; border-radius: 12px; background: #fff; border: 1px solid rgba(27,42,74,0.12); border-left: 4px solid var(--brand-highlight, #c9a227); }
/* Inside the grid, the grid gap spaces cards; the card's own margin would
   double up with it and skew the layout. */
.avide-mentor-board .avide-mentor-director { margin: 0; height: 100%; }
.avide-mentor-director img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; }
.avide-mentor-director__initials { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; flex: 0 0 84px; border-radius: 50%; background: #e8edf6; color: var(--navy-900, #1b2a4a); font-weight: 700; font-size: 1.6rem; }
.avide-mentor-director__name { font-weight: 700; color: var(--navy-900, #131f3a); }
.avide-mentor-director__name a { color: inherit; text-decoration: none; }
.avide-mentor-director__name a:hover { text-decoration: underline; }
.avide-mentor-director__role { font-size: 0.9em; color: #4a5568; }
.avide-mentor-director__viewlink { margin-top: 0.2rem; font-size: 0.85em; }
.avide-mentor-director__viewlink a { color: var(--navy-900, #1b2a4a); }
.avide-mentor-director__note { margin-top: 0.35rem; font-size: 0.95em; line-height: 1.55; color: #33415e; }

/* FAQ blocks on the program page */
.avide-mentor-faq details { border: 1px solid #d9dee8; border-radius: 6px; background: #fff; margin: 0.5rem 0; padding: 0.2rem 0.9rem; }
.avide-mentor-faq summary { font-weight: 600; cursor: pointer; padding: 0.5rem 0; color: var(--navy-900, #1b2a4a); }
.avide-mentor-faq details[open] { background: #f7f9fc; }

/* Tab nav (mentor-tabs.js): switches between the mentee-intake and
   mentor-signup form blocks when both shortcodes are on the same page. */
.avide-mn-tabhidden { display: none; }
.avide-mentor-tabs { display: flex; gap: 0.5rem; margin: 1.5rem 0 0; scroll-margin-top: 110px; }
.avide-mentor-tabs button { padding: 0.55rem 1.4rem; border: 1px solid #b9c2d4; border-radius: 8px 8px 0 0; background: #fff; cursor: pointer; font-weight: 600; color: var(--navy-900, #1b2a4a); }
.avide-mentor-tabs button.is-active { background: #1b2a4a; border-color: #1b2a4a; color: #fff; }
.avide-mentor-tabs + .avide-mentor-form,
.avide-mentor-tabs ~ .avide-mentor-form { margin-top: 0; border-top-left-radius: 0; }

html:focus-within { scroll-behavior: smooth; }

/* My mentoring pairs (logged-in only) */
.avide-mentor-my { margin: 1.5rem 0; padding: 1.1rem 1.3rem; border: 1px solid #d9dee8; border-left: 4px solid var(--brand-highlight, #c9a227); border-radius: 8px; background: #fffdf5; }
.avide-mentor-my h3 { margin: 0 0 0.3rem; }
.avide-mentor-my h4 { margin: 0.9rem 0 0.4rem; }
.avide-mentor-my__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; }
.avide-mentor-my__card { padding: 0.7rem 0.9rem; background: #fff; border: 1px solid #e4e8f0; border-radius: 8px; font-size: 0.95em; }
.avide-mentor-my__card strong { display: block; color: var(--navy-900, #1b2a4a); }
.avide-mentor-my__meta { color: #6b7280; font-size: 0.85em; margin: 0.15rem 0; }
.avide-mentor-my__badge { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; background: #eef1f6; color: #4a5568; font-size: 0.78em; margin-left: 0.4rem; }
.avide-mentor-my__pulse { margin-top: 0.5rem; padding: 0.3rem 0.8rem; font-size: 0.85em; }
.avide-mentor-my__agree { margin-top: 0.5rem; padding: 0.3rem 0.8rem; font-size: 0.85em; background: var(--brand-highlight, #c9a227); color: #131f3a; }
.avide-mentor-my__agree:hover { background: #b28f1f; color: #131f3a; }
.avide-mentor-my__meta.is-muted { color: #6b7280; }

/* Self-service end request (traceable pair closure): collapsed like the AI
   assistant block, full-width controls inside. */
.avide-mentor-endreq { margin: 0.75rem 0; border: 1px dashed #b9c2d4; border-radius: 6px; padding: 0.3rem 0.9rem; background: #fff; }
.avide-mentor-endreq summary { font-weight: 600; cursor: pointer; padding: 0.4rem 0; color: var(--navy-900, #1b2a4a); }
.avide-mentor-endreq select,
.avide-mentor-endreq textarea { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid #b9c2d4; border-radius: 4px; }

/* Public mentor detail view ([avide_mentors] with ?mentor=ID): same card
   look as .avide-mentor-card, wider, photo left of the name on desktop. */
.avide-mentor-profilefull { max-width: 760px; margin: 1.25rem 0; padding: 1.4rem 1.6rem; border-radius: 12px; background: #fff; border: 1px solid rgba(27, 42, 74, 0.12); border-top: 4px solid var(--brand-highlight, #c9a227); }
.avide-mentor-profilefull__back { display: inline-block; margin-bottom: 1rem; font-size: 0.9rem; color: var(--navy-900, #1b2a4a); }
.avide-mentor-profilefull__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; margin-bottom: 0.5rem; }
.avide-mentor-profilefull__photo { border-radius: 50%; }
.avide-mentor-profilefull__name { font-weight: 700; font-size: 1.25rem; color: var(--navy-900, #131f3a); margin-bottom: 0.25rem; }
.avide-mentor-profilefull__blurb { margin: 0.9rem 0; font-size: 0.98rem; line-height: 1.6; color: #33415e; white-space: pre-line; }
.avide-mentor-profilefull__meta { margin: 0.4rem 0; font-size: 0.92rem; color: #4a5568; }
.avide-mentor-profilefull .avide-mentor-btn { margin-top: 0.6rem; }
@media (min-width: 640px) {
    .avide-mentor-profilefull__head { flex-direction: row; align-items: center; }
}

/* Anonymized waiting-mentee queue for approved mentors ([avide_mentee_queue]):
   grid/card pattern mirrors .avide-mentor-my__grid / __card. */
.avide-mentor-queue { margin: 1.5rem 0; padding: 1.1rem 1.3rem; border: 1px solid #d9dee8; border-left: 4px solid var(--brand-highlight, #c9a227); border-radius: 8px; background: #fffdf5; }
.avide-mentor-queue h3 { margin: 0 0 0.3rem; }
.avide-mentor-queue__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.avide-mentor-queue__card { padding: 0.7rem 0.9rem; background: #fff; border: 1px solid #e4e8f0; border-radius: 8px; font-size: 0.95em; }
.avide-mentor-queue__card form { margin-top: 0.6rem; }

/* Dismissible "requesting this mentor" note (mentee intake): CSS-only
   checkbox toggle, no JS. */
.avide-mentor-dismiss-toggle { position: absolute; opacity: 0; pointer-events: none; }
.avide-mentor-requested { position: relative; padding-right: 2.2rem; }
.avide-mentor-requested .avide-mentor-dismiss-btn { position: absolute; top: 0.4rem; right: 0.7rem; cursor: pointer; font-size: 1.1rem; line-height: 1; color: #4a5568; }
.avide-mentor-dismiss-toggle:checked + .avide-mentor-requested { display: none; }

/* Board grouped by role (founder 2026-09-06): one heading per position,
   every member of the group listed; a person may appear in several groups. */
.avide-mentor-board__role { margin: 1.1rem 0 0.4rem; font-size: 1.02rem; color: var(--navy-900, #1b2a4a); }

/* Two-column layout for the short contact fields, same pattern as
   avide-services, avide-donate and avide-events: mobile-first one column so a
   320px screen never gains a horizontal scroll, a second column above 40em,
   and a fixed count of two rather than auto-fit, which would reach three on a
   wide screen. */
.avide-mentor-grid { display: grid; grid-template-columns: 1fr; gap: 0.4rem 1.25rem; }
@media (min-width: 40em) { .avide-mentor-grid { grid-template-columns: 1fr 1fr; } }
.avide-mentor-grid p { margin: 0.35rem 0; }
.avide-mentor-grid input { max-width: 100%; }

/* Phone: reclaim the card padding and give the controls a 44px touch target
   (WCAG 2.5.8; the 16px font also stops iOS zooming in on focus). */
@media (max-width: 480px) {
  .avide-mentor-form { padding: 1rem 0.9rem; }
  .avide-mentor-form input[type="text"],
  .avide-mentor-form input[type="email"],
  .avide-mentor-form input[type="tel"],
  .avide-mentor-form input[type="url"],
  .avide-mentor-form select,
  .avide-mentor-form textarea { font-size: 1rem; min-height: 44px; }
  .avide-mentor-form textarea { min-height: 6rem; }
  .avide-mentor-form .avide-mentor-time input[type="number"] { min-height: 44px; }
}