/**
 * Home Helper Finder - Public Helper Profile
 *
 * File:
 * assets/css/hhf-helper-public-profile.css
 *
 * Trang này dùng markup tự viết tay, không thừa hưởng
 * style từ theme Astra hay từ hhf-helper-search.css, nên
 * toàn bộ file là độc lập — vẫn dùng chung hệ token màu/
 * font "Mái ấm" để đồng nhất với trang tìm kiếm.
 *
 * Không cần sửa file PHP: mọi icon/nội dung trang trí
 * (☎, ✓ xác thực...) được thêm bằng CSS ::before/::after
 * trên các phần tử aria-hidden sẵn có.
 *
 * @package Home_Helper_Finder
 */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Lora:ital,wght@0,600;0,700;1,600&display=swap');


/* =========================================================
   Design Tokens (scoped to this page only)
   ========================================================= */

.hhf-helper-public-profile-page {

	--hhf-font-display: 'Lora', 'Georgia', serif;
	--hhf-font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--hhf-color-bg: #FBF6EC;
	--hhf-color-surface: #FFFFFF;
	--hhf-color-surface-soft: #F6F0E3;

	--hhf-color-ink: #23302A;
	--hhf-color-ink-soft: #5C6B62;
	--hhf-color-ink-faint: #8B9690;

	--hhf-color-primary: #1E6F53;
	--hhf-color-primary-dark: #124F3A;
	--hhf-color-primary-soft: #E4F0EA;

	--hhf-color-accent: #DE8A3B;
	--hhf-color-accent-dark: #B96C24;
	--hhf-color-accent-soft: #FBEAD2;

	--hhf-color-cta: #BE4F2C;
	--hhf-color-cta-dark: #9B3D20;

	--hhf-color-border: #E8DFCB;
	--hhf-color-border-soft: #F0E9D8;

	--hhf-radius-sm: 8px;
	--hhf-radius-md: 12px;
	--hhf-radius-lg: 18px;
	--hhf-radius-xl: 26px;

	--hhf-shadow-sm: 0 2px 10px rgba(35, 48, 42, 0.06);
	--hhf-shadow-md: 0 10px 28px rgba(35, 48, 42, 0.09);

	display: block;

	background: var(--hhf-color-bg);
	color: var(--hhf-color-ink);

	font-family: var(--hhf-font-body);
}

.hhf-helper-public-profile-page,
.hhf-helper-public-profile-page * {
	box-sizing: border-box;
}

.hhf-helper-public-profile-page :focus-visible {
	outline: 2px solid var(--hhf-color-primary);
	outline-offset: 2px;
}


/* =========================================================
   Page Wrapper
   ========================================================= */

.hhf-helper-public-profile {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px 64px;
}


/* =========================================================
   Hero — thẻ giới thiệu chính, giống một tấm thẻ
   giới thiệu / danh thiếp trang trọng
   ========================================================= */

.hhf-helper-profile-hero {
	position: relative;

	display: flex;
	align-items: center;
	gap: 26px;

	margin: 0 0 22px;
	padding: 34px 36px;

	background: linear-gradient(135deg, var(--hhf-color-primary) 0%, var(--hhf-color-primary-dark) 100%);

	border-radius: var(--hhf-radius-xl);

	box-shadow: var(--hhf-shadow-md);

	overflow: hidden;
}

/* Sọc trang trí góc trên, cùng ngôn ngữ với viền form tìm kiếm */
.hhf-helper-profile-hero::before {
	content: '';

	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	height: 5px;

	background: repeating-linear-gradient(
		90deg,
		var(--hhf-color-accent) 0,
		var(--hhf-color-accent) 22px,
		rgba(255, 255, 255, 0.65) 22px,
		rgba(255, 255, 255, 0.65) 30px
	);
}


/* =========================================================
   Avatar — vòng nét đứt + huy hiệu xác thực,
   chi tiết đặc trưng lặp lại từ trang tìm kiếm
   ========================================================= */

.hhf-helper-profile-avatar {
	position: relative;

	flex: 0 0 128px;

	width: 128px;
	height: 128px;

	border-radius: 50%;
}

.hhf-helper-profile-avatar::before {
	content: '';

	position: absolute;
	inset: -7px;

	border: 2px dashed var(--hhf-color-accent);
	border-radius: 50%;

	opacity: 0.9;
}

.hhf-helper-profile-avatar img {
	display: block;

	width: 100%;
	height: 100%;

	border-radius: 50%;

	object-fit: cover;

	border: 3px solid rgba(255, 255, 255, 0.9);
	background: var(--hhf-color-surface-soft);
}

/* Huy hiệu xác thực — thay thế cho ảnh khi không có avatar cũng không sao,
   vì badge nằm độc lập trên vòng tròn */
.hhf-helper-profile-avatar::after {
	content: '\2713';

	position: absolute;
	right: -4px;
	bottom: -4px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	border-radius: 50%;
	border: 3px solid var(--hhf-color-primary-dark);

	background: var(--hhf-color-accent);
	color: #FFFFFF;

	font-size: 14px;
	font-weight: 700;
}


/* =========================================================
   Hero Content
   ========================================================= */

.hhf-helper-profile-hero-content {
	min-width: 0;
	flex: 1;

	color: #FFFFFF;
}

.hhf-helper-profile-eyebrow {
	margin: 0 0 8px;

	color: var(--hhf-color-accent-soft);

	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;

	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.hhf-helper-profile-name {
	margin: 0 0 12px;
	padding: 0;

	color: #FFFFFF;

	font-family: var(--hhf-font-display);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.hhf-helper-profile-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;

	color: rgba(255, 255, 255, 0.88);

	font-size: 14.5px;
	line-height: 1.5;
}

.hhf-profile-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.hhf-profile-meta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	color: var(--hhf-color-accent-soft);

	font-size: 13px;
	line-height: 1;
}

.hhf-profile-meta-divider {
	color: rgba(255, 255, 255, 0.45);

	font-size: 13px;
	line-height: 1;
}


/* =========================================================
   Call To Action (top, under hero)
   ========================================================= */

.hhf-helper-profile-actions {
	display: flex;
	justify-content: center;

	margin: 0 0 30px;
}

.hhf-helper-profile-actions .hhf-profile-call-button {
	width: auto;
	min-width: 240px;
}


/* =========================================================
   Call Button (dùng chung ở đầu và cuối trang)
   ========================================================= */

.hhf-helper-call-button {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-height: 52px;

	margin: 0;
	padding: 12px 26px;

	border: 1px solid var(--hhf-color-cta);
	border-radius: var(--hhf-radius-sm);

	background: var(--hhf-color-cta);
	color: #FFFFFF;

	font-family: var(--hhf-font-body);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.4;

	text-align: center;
	text-decoration: none;

	cursor: pointer;

	box-shadow: 0 6px 16px rgba(190, 79, 44, 0.24);

	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.hhf-helper-call-button:hover {
	background: var(--hhf-color-cta-dark);
	border-color: var(--hhf-color-cta-dark);
	color: #FFFFFF;

	text-decoration: none;

	box-shadow: 0 8px 20px rgba(155, 61, 32, 0.28);

	transform: translateY(-1px);
}

.hhf-helper-call-button:focus-visible {
	box-shadow:
		0 0 0 3px rgba(190, 79, 44, 0.2),
		0 8px 20px rgba(155, 61, 32, 0.24);
}

.hhf-helper-call-button:active {
	transform: translateY(0);
}

/* Icon điện thoại — span rỗng trong markup, vẽ bằng ::before */
.hhf-helper-call-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;

	flex: 0 0 18px;

	line-height: 1;
}

.hhf-helper-call-icon::before {
	content: '\260E';

	font-size: 15px;
}


/* =========================================================
   Profile Content Grid
   ========================================================= */

.hhf-helper-profile-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}


/* =========================================================
   Card
   ========================================================= */

.hhf-helper-profile-card {
	min-width: 0;

	margin: 0;
	padding: 24px 26px;

	background: var(--hhf-color-surface);

	border: 1px solid var(--hhf-color-border);
	border-radius: var(--hhf-radius-lg);

	box-shadow: var(--hhf-shadow-sm);
}

/* Location, Salary và About là các mục quan trọng nhất
   nên chiếm trọn chiều ngang; Services / Work Type /
   Work Area đi thành cặp 2 cột */
.hhf-profile-location-card,
.hhf-profile-salary-card,
.hhf-profile-about-card {
	grid-column: 1 / -1;
}


/* =========================================================
   Section Heading (icon chip + title)
   ========================================================= */

.hhf-profile-section-heading {
	display: flex;
	align-items: flex-start;
	gap: 14px;

	margin: 0 0 18px;
}

.hhf-profile-section-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 42px;

	width: 42px;
	height: 42px;

	border-radius: 50%;

	background: var(--hhf-color-primary-soft);
	color: var(--hhf-color-primary-dark);

	font-size: 17px;
	font-weight: 600;
	line-height: 1;
}

.hhf-profile-section-heading h2 {
	margin: 0 0 3px;
	padding: 0;

	color: var(--hhf-color-ink);

	font-family: var(--hhf-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.hhf-profile-section-subtitle {
	margin: 0;
	padding: 0;

	color: var(--hhf-color-ink-faint);

	font-size: 13px;
	line-height: 1.5;
}

/* Đổi màu icon chip riêng cho mục Lương và Giới thiệu để tạo điểm nhấn */
.hhf-profile-salary-card .hhf-profile-section-icon {
	background: var(--hhf-color-accent-soft);
	color: var(--hhf-color-cta-dark);
}

.hhf-profile-about-card .hhf-profile-section-icon {
	background: var(--hhf-color-accent-soft);
	color: var(--hhf-color-accent-dark);

	font-family: var(--hhf-font-display);
	font-size: 22px;
}


/* =========================================================
   Location Card Body
   ========================================================= */

.hhf-profile-location {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;

	color: var(--hhf-color-ink);

	font-size: 16px;
	line-height: 1.5;
}

.hhf-profile-location strong {
	font-weight: 700;
}

.hhf-profile-location-separator {
	color: var(--hhf-color-ink-faint);

	font-size: 15px;
}


/* =========================================================
   Tags (Services / Work Type / Work Area)
   ========================================================= */

.hhf-profile-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hhf-profile-tag {
	display: inline-flex;
	align-items: center;

	margin: 0;
	padding: 7px 13px;

	border: 1px dashed #E3C79C;
	border-radius: 999px;

	background: var(--hhf-color-accent-soft);
	color: var(--hhf-color-accent-dark);

	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.hhf-profile-tag-service {
	border: 1px solid transparent;
	border-radius: 999px;

	background: var(--hhf-color-primary-soft);
	color: var(--hhf-color-primary-dark);
}


/* =========================================================
   Salary Card Body
   ========================================================= */

.hhf-profile-salary {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.hhf-profile-salary-number {
	color: var(--hhf-color-cta-dark);

	font-family: var(--hhf-font-display);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
}

.hhf-profile-salary-unit {
	color: var(--hhf-color-ink-soft);

	font-size: 14px;
	font-weight: 600;
}


/* =========================================================
   About Card Body
   ========================================================= */

.hhf-helper-description {
	margin: 0;
	padding: 16px 18px;

	border-left: 3px solid var(--hhf-color-accent);

	background: var(--hhf-color-surface-soft);

	border-radius: 0 var(--hhf-radius-sm) var(--hhf-radius-sm) 0;

	color: var(--hhf-color-ink-soft);

	font-family: var(--hhf-font-display);
	font-style: italic;
	font-size: 15.5px;
	line-height: 1.75;
}


/* =========================================================
   Bottom CTA Banner
   ========================================================= */

.hhf-helper-profile-bottom-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;

	grid-column: 1 / -1;

	margin: 6px 0 0;
	padding: 26px 30px;

	background: var(--hhf-color-primary-dark);

	border-radius: var(--hhf-radius-lg);
}

.hhf-helper-profile-bottom-cta-content {
	display: flex;
	flex-direction: column;
	gap: 4px;

	color: #FFFFFF;
}

.hhf-helper-profile-bottom-cta-content strong {
	font-family: var(--hhf-font-display);
	font-size: 18px;
	font-weight: 700;
}

.hhf-helper-profile-bottom-cta-content span {
	color: rgba(255, 255, 255, 0.8);

	font-size: 14px;
}

.hhf-helper-profile-bottom-cta .hhf-helper-call-button {
	flex: 0 0 auto;

	background: var(--hhf-color-accent);
	border-color: var(--hhf-color-accent);

	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.hhf-helper-profile-bottom-cta .hhf-helper-call-button:hover {
	background: var(--hhf-color-accent-dark);
	border-color: var(--hhf-color-accent-dark);
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 782px) {

	.hhf-helper-public-profile {
		padding: 30px 16px 50px;
	}

	.hhf-helper-profile-hero {
		gap: 20px;

		padding: 28px 26px;
	}

	.hhf-helper-profile-avatar {
		flex-basis: 104px;

		width: 104px;
		height: 104px;
	}

	.hhf-helper-profile-name {
		font-size: 27px;
	}

	.hhf-helper-profile-content {
		gap: 16px;
	}
	.hhf-profile-meta-icon
	{margin-top: 0px;}

}

@media (max-width: 782px) {
hhf-profile-meta-icon
	{
		margin-top: -10px;
	}

}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

	.hhf-helper-public-profile {
		padding: 22px 12px 44px;
	}

	.hhf-helper-profile-hero {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;

		gap: 16px;

		padding: 26px 20px;

		border-radius: var(--hhf-radius-lg);
	}

	.hhf-helper-profile-avatar {
		align-self: center;
	}

	.hhf-helper-profile-hero-content {
		width: 100%;

		text-align: center;
	}

	.hhf-helper-profile-meta {
		justify-content: center;
	}

	.hhf-helper-profile-name {
		font-size: 24px;
	}

	.hhf-helper-profile-actions .hhf-profile-call-button {
		width: 100%;
	}

	.hhf-helper-profile-content {
		grid-template-columns: 1fr;
	}

	.hhf-profile-location-card,
	.hhf-profile-salary-card,
	.hhf-profile-about-card {
		grid-column: auto;
	}

	.hhf-helper-profile-card {
		padding: 20px;
	}

	.hhf-profile-section-icon {
		flex-basis: 36px;

		width: 36px;
		height: 36px;

		font-size: 15px;
	}

	.hhf-profile-salary-number {
		font-size: 28px;
	}

	.hhf-helper-profile-bottom-cta {
		flex-direction: column;
		align-items: stretch;
		text-align: center;

		padding: 22px 20px;
	}

	.hhf-helper-profile-bottom-cta-content {
		align-items: center;
	}

	.hhf-helper-profile-bottom-cta .hhf-helper-call-button {
		width: 100%;
	}

}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.hhf-helper-public-profile-page *,
	.hhf-helper-public-profile-page *::before,
	.hhf-helper-public-profile-page *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

}