/**
 * Front-end styles for HAeX Expert Network. Deliberately restrained and
 * override-friendly — these CSS custom properties are the only things
 * you should need to touch to match final brand colors; everything else
 * inherits your theme's font stack and body color.
 */
:root {
	--haex-accent: #1c4ed8;
	--haex-accent-dark: #12327f;
	--haex-accent-soft: #eef2ff;
	--haex-ink: #1a1d24;
	--haex-muted: #6b7280;
	--haex-border: #e2e4e9;
	--haex-bg-subtle: #f7f8fa;
	--haex-success-bg: #e9f8ef;
	--haex-success-ink: #146c2e;
	--haex-error-bg: #fdecec;
	--haex-error-ink: #a3231b;
	--haex-radius: 10px;
	--haex-radius-lg: 16px;
	--haex-shadow-sm: 0 1px 2px rgba( 16, 24, 40, 0.06 );
	--haex-shadow-md: 0 4px 16px rgba( 16, 24, 40, 0.08 );
	--haex-shadow-lg: 0 12px 32px rgba( 16, 24, 40, 0.12 );
}

.haex-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 32px 20px 56px;
}

.haex-button,
.haex-opportunity-card button,
.haex-event-rsvp button,
.haex-community button,
.haex-dashboard button,
.haex-apply-form button {
	display: inline-block;
	background: var( --haex-accent );
	color: #fff;
	border: none;
	padding: 11px 20px;
	border-radius: var( --haex-radius );
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	font-size: 14px;
	transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
	box-shadow: var( --haex-shadow-sm );
}
.haex-button:hover,
.haex-opportunity-card button:hover,
.haex-event-rsvp button:hover,
.haex-community button:hover,
.haex-dashboard button:hover,
.haex-apply-form button:hover {
	background: var( --haex-accent-dark );
	color: #fff;
	box-shadow: var( --haex-shadow-md );
}
.haex-button:active { transform: translateY( 1px ); }
.haex-button-secondary {
	background: #fff !important;
	color: var( --haex-ink ) !important;
	border: 1px solid var( --haex-border ) !important;
	box-shadow: none !important;
}
.haex-button-secondary:hover { background: var( --haex-bg-subtle ) !important; }

.haex-form-success {
	background: var( --haex-success-bg );
	color: var( --haex-success-ink );
	padding: 12px 16px;
	border-radius: var( --haex-radius );
	border: 1px solid rgba( 20, 108, 46, 0.15 );
}
.haex-form-error {
	background: var( --haex-error-bg );
	color: var( --haex-error-ink );
	padding: 12px 16px;
	border-radius: var( --haex-radius );
	border: 1px solid rgba( 163, 35, 27, 0.15 );
}
.haex-form-hint,
.haex-privacy-note,
.haex-form-consent-note {
	color: var( --haex-muted );
	font-size: 13px;
}

/* Visually hidden but still announced by screen readers — used for
   filter labels that would be visually redundant next to a placeholder. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* Tags */
.haex-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.haex-tag {
	display: inline-block;
	background: var( --haex-bg-subtle );
	border: 1px solid var( --haex-border );
	color: var( --haex-ink );
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
}
.haex-tag-service { border-color: var( --haex-accent ); color: var( --haex-accent ); background: var( --haex-accent-soft ); }
.haex-tag-badge { background: #fff7e0; border-color: #f0c53c; }
.haex-tag-members-only { background: var( --haex-accent-soft ); border-color: var( --haex-accent ); color: var( --haex-accent ); }

/* Directory */
.haex-directory-title { font-size: 22px; margin: 0 0 18px; }
.haex-directory-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	padding: 14px;
	background: var( --haex-bg-subtle );
	border: 1px solid var( --haex-border );
	border-radius: var( --haex-radius-lg );
}
.haex-directory-filters select,
.haex-directory-filters input {
	padding: 9px 12px;
	border: 1px solid var( --haex-border );
	border-radius: var( --haex-radius );
	background: #fff;
	font-size: 13.5px;
	min-height: 38px;
}
.haex-directory-filters select:focus,
.haex-directory-filters input:focus {
	outline: none;
	border-color: var( --haex-accent );
	box-shadow: 0 0 0 3px var( --haex-accent-soft );
}
.haex-directory-filters .haex-filter-search { flex: 1 1 180px; min-width: 160px; }
.haex-directory-filters .haex-filter-reset {
	margin-left: auto;
	padding: 9px 14px;
	font-size: 13px;
}
.haex-directory-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 32px;
}
.haex-directory-page-info { font-size: 13px; color: var( --haex-muted ); }
.haex-directory-pagination button:disabled { opacity: 0.4; cursor: default; }
.haex-cards-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 230px, 1fr ) );
	gap: 22px;
}
.haex-cards-carousel {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 10px;
}
.haex-cards-carousel .haex-card { min-width: 230px; }
.haex-cards-list { display: flex; flex-direction: column; gap: 12px; }

.haex-card {
	border: 1px solid var( --haex-border );
	border-radius: var( --haex-radius-lg );
	overflow: hidden;
	background: #fff;
	box-shadow: var( --haex-shadow-sm );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.haex-card:hover { transform: translateY( -3px ); box-shadow: var( --haex-shadow-md ); }
.haex-card-photo img { width: 100%; height: 190px; object-fit: cover; display: block; }
.haex-card-photo-placeholder {
	width: 100%; height: 190px;
	background: linear-gradient( 135deg, var( --haex-accent-soft ), var( --haex-bg-subtle ) );
	display: flex; align-items: center; justify-content: center;
	font-size: 46px; font-weight: 600; color: var( --haex-accent );
}
.haex-card-body { padding: 16px; }
.haex-card-name { margin: 0 0 4px; font-size: 16.5px; }
.haex-card-name a { color: var( --haex-ink ); text-decoration: none; }
.haex-card-name a:hover { color: var( --haex-accent ); }
.haex-card-headline { color: var( --haex-muted ); font-size: 13px; margin: 0 0 10px; }
.haex-card-tags { font-size: 12px; color: var( --haex-muted ); margin: 0 0 10px; }
.haex-card-link { font-size: 13px; font-weight: 600; color: var( --haex-accent ); text-decoration: none; }
.haex-card-link:hover { text-decoration: underline; }
.haex-no-results { color: var( --haex-muted ); padding: 24px; text-align: center; background: var( --haex-bg-subtle ); border-radius: var( --haex-radius ); }

/* Single expert profile */
.haex-breadcrumbs { font-size: 12.5px; color: var( --haex-muted ); margin-bottom: 16px; }
.haex-breadcrumbs a { color: var( --haex-muted ); text-decoration: none; }
.haex-breadcrumbs a:hover { color: var( --haex-accent ); text-decoration: underline; }
.haex-breadcrumb-sep { margin: 0 2px; opacity: 0.6; }

.haex-profile-header {
	display: flex;
	gap: 24px;
	align-items: center;
	margin-bottom: 20px;
	padding: 28px;
	background: linear-gradient( 160deg, var( --haex-accent-soft ) 0%, #ffffff 65% );
	border: 1px solid var( --haex-border );
	border-radius: var( --haex-radius-lg );
}
.haex-profile-photo img {
	width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
	border: 4px solid #fff; box-shadow: var( --haex-shadow-md );
}
.haex-profile-photo-placeholder {
	width: 132px; height: 132px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #fff; color: var( --haex-accent ); font-size: 48px; font-weight: 700;
	border: 4px solid #fff; box-shadow: var( --haex-shadow-md ); flex-shrink: 0;
}
.haex-profile-heading h1 { margin: 0 0 6px; font-size: 28px; }
.haex-profile-headline { color: var( --haex-muted ); margin: 0 0 10px; font-size: 15.5px; }
.haex-profile-meta { margin: 0 0 8px; }
.haex-profile-meta span {
	margin-right: 8px; font-size: 12.5px; color: var( --haex-ink );
	background: #fff; border: 1px solid var( --haex-border ); border-radius: 999px; padding: 3px 12px;
	display: inline-block; margin-bottom: 4px;
}
.haex-linkedin-link { font-size: 13.5px; font-weight: 600; }

.haex-profile-tldr {
	font-size: 15px;
	line-height: 1.6;
	color: var( --haex-ink );
	padding: 14px 18px;
	background: var( --haex-bg-subtle );
	border-left: 3px solid var( --haex-accent );
	border-radius: 0 var( --haex-radius ) var( --haex-radius ) 0;
	margin: 0 0 12px;
}
.haex-trust-line {
	font-size: 13px;
	color: var( --haex-success-ink );
	margin: 0 0 28px;
}

.haex-profile-section {
	margin-bottom: 20px;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid var( --haex-border );
	border-radius: var( --haex-radius );
}
.haex-profile-section h3 {
	margin: 0 0 12px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --haex-muted );
}
.haex-profile-bio { line-height: 1.7; color: var( --haex-ink ); }
.haex-profile-list { margin: 0; padding-left: 20px; line-height: 1.8; color: var( --haex-ink ); }

.haex-related-experts ul,
.haex-related-experts-list { list-style: none; margin: 0; padding: 0; }
.haex-related-experts-list li { padding: 8px 0; border-bottom: 1px solid var( --haex-border ); }
.haex-related-experts-list li:last-child { border-bottom: none; }
.haex-related-experts-list a { font-weight: 600; color: var( --haex-ink ); text-decoration: none; }
.haex-related-experts-list a:hover { color: var( --haex-accent ); }
.haex-related-headline { color: var( --haex-muted ); font-size: 13px; }

.haex-profile-cta {
	border: 1px solid var( --haex-border );
	background: var( --haex-bg-subtle );
	border-radius: var( --haex-radius );
	padding: 22px 24px;
	margin: 24px 0;
	text-align: center;
}
.haex-profile-cta .haex-privacy-note { margin: 10px 0 0; }

/* Community insights teaser (public, anonymized) */
.haex-insight-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var( --haex-accent );
	background: var( --haex-accent-soft );
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.haex-community-cta {
	margin-top: 24px;
	padding: 20px;
	background: var( --haex-bg-subtle );
	border-radius: var( --haex-radius );
	text-align: center;
}

/* Dashboard */
.haex-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media ( max-width: 720px ) { .haex-dashboard-grid { grid-template-columns: 1fr; } }
.haex-dashboard-list { list-style: none; margin: 0; padding: 0; }
.haex-dashboard-list li { padding: 8px 0; border-bottom: 1px solid var( --haex-border ); }

/* Community */
.haex-community-new,
.haex-event-propose {
	background: var( --haex-bg-subtle );
	border-radius: var( --haex-radius );
	padding: 18px;
	margin-bottom: 24px;
}
.haex-discussion-list { list-style: none; margin: 0; padding: 0; }
.haex-discussion-row {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 12px 0; border-bottom: 1px solid var( --haex-border );
	gap: 12px; flex-wrap: wrap;
}
.haex-discussion-title { font-weight: 600; color: var( --haex-ink ); text-decoration: none; }
.haex-discussion-meta { font-size: 12px; color: var( --haex-muted ); white-space: nowrap; }
.haex-discussion-byline { color: var( --haex-muted ); font-size: 13px; margin-top: -8px; }
.haex-discussion-body { margin: 20px 0; line-height: 1.6; }
.haex-reply-list { list-style: none; margin: 0 0 20px; padding: 0; }
.haex-reply { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var( --haex-border ); }
.haex-reply img { border-radius: 50%; }
.haex-reply-meta { font-size: 12px; color: var( --haex-muted ); margin: 0 0 4px; }
.haex-reply-content p { margin: 0; }
.haex-community-gate,
.haex-opportunities-gate { text-align: center; padding: 40px 20px; }
.haex-pagination a, .haex-pagination span { margin-right: 6px; }

/* Events */
.haex-events-list { display: grid; grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); gap: 16px; }
.haex-event-card { border: 1px solid var( --haex-border ); border-radius: var( --haex-radius ); padding: 16px; background: #fff; box-shadow: var( --haex-shadow-sm ); }
.haex-event-meta { color: var( --haex-muted ); font-size: 13px; }
.haex-event-count { font-size: 13px; color: var( --haex-muted ); }

/* Opportunities */
.haex-opportunities-board { display: flex; flex-direction: column; gap: 16px; }
.haex-opportunity-card { border: 1px solid var( --haex-border ); border-radius: var( --haex-radius ); padding: 16px; background: #fff; }
.haex-opportunity-body { color: var( --haex-ink ); }

/* Leaderboard */
.haex-leaderboard { list-style: decimal; padding-left: 20px; }
.haex-leaderboard-row { display: flex; justify-content: space-between; max-width: 320px; padding: 4px 0; }
.haex-leaderboard-points { color: var( --haex-muted ); }

/* Member blog */
.haex-blog-list { display: grid; grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); gap: 20px; }
.haex-blog-card { border: 1px solid var( --haex-border ); border-radius: var( --haex-radius ); overflow: hidden; background: #fff; box-shadow: var( --haex-shadow-sm ); }
.haex-blog-card-photo img { width: 100%; height: 140px; object-fit: cover; display: block; }
.haex-blog-card h4, .haex-blog-card p, .haex-blog-card a.haex-card-link { margin: 8px 12px; }

/* Dashboard footer bits */
.haex-dashboard-privacy { margin-top: 32px; padding-top: 20px; border-top: 1px solid var( --haex-border ); }
.haex-dashboard-logout { margin-top: 16px; }

/* Apply form */
.haex-apply-form input[type="text"],
.haex-apply-form input[type="email"],
.haex-apply-form input[type="url"],
.haex-apply-form textarea,
.haex-dashboard input[type="text"],
.haex-dashboard input[type="url"],
.haex-dashboard textarea,
.haex-dashboard select {
	padding: 9px 12px;
	border: 1px solid var( --haex-border );
	border-radius: var( --haex-radius );
	font-family: inherit;
}
.haex-apply-form input:focus,
.haex-dashboard input:focus,
.haex-dashboard textarea:focus,
.haex-dashboard select:focus {
	outline: none;
	border-color: var( --haex-accent );
	box-shadow: 0 0 0 3px var( --haex-accent-soft );
}