/**
 * ==================================================
 * Indonesia Kerja Tools
 * Single Job Listing
 * ==================================================
 */

/**
 * ==================================================
 * 01. CSS VARIABLES
 * ==================================================
 */

:root {

	/* ==================================================
	 * Colors
	 * ================================================== */

	--ik-color-primary: #e11d48;
	--ik-color-heading: #0f172a;
	--ik-color-text: #334155;
	--ik-color-muted: #64748b;

	--ik-color-border: #e2e8f0;
	--ik-color-background: #ffffff;

	/* ==================================================
	 * Typography
	 * ================================================== */

	--ik-font-size-xs: 14px;
	--ik-font-size-sm: 16px;
	--ik-font-size-md: 18px;
	--ik-font-size-lg: 24px;
	--ik-font-size-xl: 36px;

	/* ==================================================
	 * Font Weight
	 * ================================================== */

	--ik-font-weight-normal: 400;
	--ik-font-weight-medium: 500;
	--ik-font-weight-semibold: 600;
	--ik-font-weight-bold: 700;

	/* ==================================================
	 * Spacing
	 * ================================================== */

	--ik-space-xs: 4px;
	--ik-space-sm: 8px;
	--ik-space-md: 16px;
	--ik-space-lg: 24px;
	--ik-space-xl: 32px;
	--ik-space-2xl: 48px;
	--ik-space-3xl: 64px;
	--ik-space-section: 15px;

	/* ==================================================
	 * Border Radius
	 * ================================================== */

	--ik-radius-sm: 6px;
	--ik-radius-md: 10px;
	--ik-radius-lg: 16px;

	/* ==================================================
	 * Shadow
	 * ================================================== */

	--ik-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
	--ik-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);

	/* ==================================================
	 * Transition
	 * ================================================== */

	--ik-transition: 0.2s ease;

}

/**
 * ==================================================
 * 02. TYPOGRAPHY
 * ==================================================
 */

.single-job_listing h1,
.single-job_listing h2,
.single-job_listing h3 {

	color: var(--ik-color-heading);
	font-weight: var(--ik-font-weight-bold);
	line-height: 1.3;

}

.single-job_listing p {

	color: var(--ik-color-text);
	font-size: var(--ik-font-size-sm);
	line-height: 1.7;
	margin-bottom: var(--ik-space-md);

}

.single-job_listing ul,
.single-job_listing ol {

	margin-bottom: var(--ik-space-lg);
	padding-left: var(--ik-space-lg);

}

.single-job_listing li {

	margin-bottom: var(--ik-space-sm);
	line-height: 1.7;

}

.single-job_listing strong {

	font-weight: var(--ik-font-weight-semibold);

}

/**
 * ==================================================
 * 03. LAYOUT
 * ==================================================
 */

.single_job_listing {
    padding-top: var(--ik-space-2xl);
}

.single_job_listing > section {
	margin-bottom: var(--ik-space-section);
}

.single_job_listing > section:last-child {
	margin-bottom: 0;
}

.single-job_listing h1 {

	margin-bottom: var(--ik-space-xl);

}

.single-job_listing h2 {

	margin-bottom: var(--ik-space-lg);

}

.single-job_listing p:last-child {

	margin-bottom: 0;

}

.ik-card {

	padding: var(--ik-space-xl);

	background: var(--ik-color-background);

	border: 1px solid var(--ik-color-border);
	border-radius: var(--ik-radius-md);

	box-shadow: var(--ik-shadow-sm);

	transition: var(--ik-transition);

}

/**
 * ==================================================
 * 04. CARD
 * ==================================================
 */

.ik-card {

	padding: var(--ik-space-xl);

	background: var(--ik-color-background);

	border: 1px solid var(--ik-color-border);
	border-radius: var(--ik-radius-md);

	box-shadow: var(--ik-shadow-sm);

	transition: var(--ik-transition);

}

.ik-card-header {

	margin-bottom: var(--ik-space-lg);

}

.ik-card-title {

	margin: 0;

	color: var(--ik-color-heading);

	font-size: var(--ik-font-size-lg);
	font-weight: var(--ik-font-weight-bold);
	line-height: 1.3;

}

.ik-card-body {

	display: flex;
	flex-direction: column;
	gap: var(--ik-space-lg);

}



/**
 * ==================================================
 * 05. COMPANY
 * ==================================================
 */

.ik-company .ik-card-body {

	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--ik-space-xl);

}

.ik-company__logo {

	flex: 0 0 88px;

}

.ik-company__logo img {

	display: block;

	width: 88px;
	height: 88px;

	object-fit: contain;

}

.ik-company__content {

	flex: 1;

}

.ik-company__job-title {

	margin: 0 0 var(--ik-space-sm);

	font-size: var(--ik-font-size-lg);
	font-weight: var(--ik-font-weight-bold);
	line-height: 1.3;

	color: var(--ik-color-heading);

}

.ik-company__name {

	margin: 0 0 var(--ik-space-xs);

	font-size: var(--ik-font-size-md);
	font-weight: var(--ik-font-weight-semibold);

	color: var(--ik-color-heading);

}

.ik-company__tagline {

	margin: 0;

	color: var(--ik-color-muted);

	font-size: var(--ik-font-size-sm);
	line-height: 1.6;

}

@media (max-width: 768px) {

	.ik-company .ik-card-body {

		flex-direction: column;
		text-align: center;

	}

}



/**
 * ==================================================
 * 06. JOB SUMMARY
 * ==================================================
 */

.ik-summary-list {

	display: flex;
	flex-direction: column;
	gap: var(--ik-space-sm);

}

.ik-summary__item {

	padding: 2px 0;

	display: grid;
	grid-template-columns: 32px 160px 1fr;

	gap: 12px;

}

.ik-summary__icon {

	font-size: var(--ik-font-size-md);
	text-align: center;

}

.ik-summary__label {
    font-weight: var(--ik-font-weight-normal);
    color: var(--ik-color-muted);
}

.ik-summary__value {
    font-weight: var(--ik-font-weight-semibold);
    color: var(--ik-color-heading);
}

/**
 * ==================================================
 * 07. CONTENT
 * Description & Requirements
 * ==================================================
 */

.ik-description-content,
.ik-requirements-content {

	color: var(--ik-color-text);

}

.ik-description-content > *:first-child,
.ik-requirements-content > *:first-child {

	margin-top: 0;

}

.ik-description-content > *:last-child,
.ik-requirements-content > *:last-child {

	margin-bottom: 0;

}

.ik-description-content h3,
.ik-requirements-content h3 {

	margin-top: var(--ik-space-xl);
	margin-bottom: var(--ik-space-md);

}

.ik-description-content a,
.ik-requirements-content a {

	color: var(--ik-color-primary);
	text-decoration: none;

}

.ik-description-content a:hover,
.ik-requirements-content a:hover {

	text-decoration: underline;

}

/**
 * ==================================================
 * 08. Informasi Kontak Perusahaan
 * atau cara melamar melalui wa, email, dan website
 * ==================================================
 */

.ik-contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ik-contact-item {
    display: grid;
    grid-template-columns: 32px 110px 1fr auto;
    align-items: center;
    gap: 16px;

    padding: 14px 0;

    border-bottom: 1px solid #e5e7eb;
}

.ik-contact-item:last-child {
    border-bottom: none;
}

.ik-contact__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
}

.ik-contact__label {
    font-weight: 600;
    color: #374151;
}

.ik-contact__value {
    color: #4b5563;

    overflow-wrap: anywhere;
}

.ik-contact__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 90px;
    padding: 8px 16px;

    border: 1px solid #d1d5db;
    border-radius: 8px;

    background: #ffffff;

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

    color: #374151;

    text-decoration: none;
    cursor: pointer;

    transition: all .2s ease;
}

.ik-contact__button:hover {
    background: #f3f4f6;
}

.ik-contact__description {
    margin-bottom: 20px;

    color: #6b7280;
    line-height: 1.6;
}