/*
 * Proximal theme for Ashby-hosted job postings and application forms.
 *
 * Upload this file in:
 * Ashby Admin > Job Boards > Theme (Job Board) > Job Board Options
 *
 * The font stack intentionally uses system fonts until Proximal has webfont
 * licenses that cover the Ashby-hosted page.
 */

:root {
	/* Typography */
	--fontFamily: "Helvetica Neue", "Helvetica", "Arial", sans-serif;

	/* Layout */
	--widthMaxContent: 1000px;
	--widthMaxJobBoard: 800px;
	--widthMaxSubscriptionPreferences: 640px;

	/* Shape */
	--borderRadiusContainer: 8px;
	--borderRadiusControl: 6px;
	--borderRadiusButton: 6px;
	--borderWidthBold: 1px;

	/* Proximal palette */
	--colorAppBackground: #161616;
	--colorPrimary200: #253528;
	--colorPrimary600: #b6dcb8;
	--colorPrimary800: #6f9d75;
	--colorPrimary900: #426c49;
	--colorSecondary900: #e6e6de;

	/* Dark neutral scale */
	--colorNeutral000: #161616;
	--colorNeutral100: #1d1d1c;
	--colorNeutral200: #242422;
	--colorNeutral300: #302f2d;
	--colorNeutral400: #4a4946;
	--colorNeutral500: #787878;
	--colorNeutral600: #9a9a94;
	--colorNeutral700: #b8b8b1;
	--colorNeutral800: #dbdbdb;
	--colorNeutral900: #e6e6de;

	color-scheme: dark;
}

html,
body {
	background: #161616;
	color: #e6e6de;
}

body {
	font-family: var(--fontFamily);
	font-weight: 400;
	letter-spacing: 0.01em;
}

a {
	color: #b6dcb8;
	text-underline-offset: 0.2em;
}

a:hover {
	color: #e6e6de;
}

::selection {
	background: #238636;
	color: #ffffff;
}

/* Posting */
.ashby-job-posting-header {
	border-bottom: 1px solid #302f2d;
	padding-bottom: 32px;
}

.ashby-job-posting-heading {
	color: #e6e6de;
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.1;
}

.ashby-job-posting-left-pane {
	color: #787878;
}

.ashby-job-posting-right-pane,
.ashby-job-posting-description-container {
	background: transparent;
	box-shadow: none;
}

.ashby-job-posting-description {
	color: #dbdbdb;
	font-size: 18px;
	line-height: 1.6;
}

.ashby-job-posting-description p {
	margin-bottom: 24px;
}

.ashby-job-posting-description p:empty {
	display: none;
}

.ashby-job-posting-description p:has(> strong:only-child) {
	margin-top: 32px;
	margin-bottom: 12px;
}

.ashby-job-posting-description strong,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3 {
	color: #e6e6de;
	font-weight: 500;
}

.ashby-job-posting-description li::marker {
	color: #dbdbdb;
}

.ashby-job-posting-description ul,
.ashby-job-posting-description ol {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
	padding-left: 20px;
}

.ashby-job-posting-description li p {
	margin: 0;
}

.ashby-job-board-back-to-all-jobs-button {
	color: #b6dcb8;
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Tabs */
.ashby-job-posting-right-pane-application-tab,
.ashby-job-posting-right-pane-overview-tab {
	color: #9a9a94;
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ashby-job-posting-right-pane-tab-slider {
	background: #b6dcb8;
}

/* Application form */
.ashby-application-form-container {
	background: transparent;
	border-top: 1px solid #302f2d;
	box-shadow: none;
}

.ashby-application-form-section-container {
	border-color: #302f2d;
}

.ashby-application-form-section-header-title {
	color: #e6e6de;
	font-weight: 500;
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description {
	color: #9a9a94;
}

.ashby-application-form-question-title {
	color: #dbdbdb;
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-dropdown,
.ashby-application-form-input-file-dropzone,
.ashby-application-form-input-autocomplete,
.ashby-application-form-input-date {
	background: #1d1d1c;
	border-color: #4a4946;
	color: #e6e6de;
	box-shadow: none;
}

.ashby-application-form-input-text:hover,
.ashby-application-form-input-textarea:hover,
.ashby-application-form-input-dropdown:hover,
.ashby-application-form-input-file-dropzone:hover,
.ashby-application-form-input-autocomplete:hover,
.ashby-application-form-input-date:hover {
	border-color: #787878;
}

.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus,
.ashby-application-form-input-dropdown:focus-within,
.ashby-application-form-input-autocomplete:focus-within,
.ashby-application-form-input-date:focus-within {
	border-color: #b6dcb8;
	outline: 1px solid #b6dcb8;
	outline-offset: 2px;
}

.ashby-application-form-input-text::placeholder,
.ashby-application-form-input-textarea::placeholder {
	color: #787878;
}

.ashby-application-form-input-file-dropzone {
	min-height: 144px;
	padding: 32px;
	background: #161616;
	border: 1px dashed #4a4946;
	border-radius: 8px;
	box-shadow: none;
}

.ashby-application-form-input-file-dropzone:hover {
	background: #1d1d1c;
	border-color: #787878;
}

.ashby-application-form-input-file-dropzone-instructions {
	color: #9a9a94;
	font-size: 18px;
	line-height: 1.4;
}

.ashby-application-form-input-file-dropzone-upload {
	padding: 14px 24px;
	background: #e6e6de;
	border: 1px solid #e6e6de;
	border-radius: 999px;
	box-shadow: none;
	color: #161616;
	font-family: var(--fontFamily);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.ashby-application-form-input-file-dropzone-upload:hover {
	background: #dbdbdb;
	border-color: #dbdbdb;
}

.ashby-application-form-input-file-dropzone-upload:focus-visible {
	outline: 2px solid #b6dcb8;
	outline-offset: 3px;
}

.ashby-application-form-input-file-dropzone-upload svg {
	color: #161616;
	fill: currentColor;
	stroke: currentColor;
}

.ashby-application-form-input-file-item,
.ashby-application-form-input-radio-group-option,
.ashby-application-form-input-checkbox-group-option,
.ashby-application-form-input-yesno-option,
.ashby-application-form-autofill-input-root {
	background: #1d1d1c;
	border-color: #4a4946;
	color: #dbdbdb;
}

.ashby-application-form-submit-button {
	background: #e6e6de;
	border: 1px solid #e6e6de;
	color: #161616;
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition:
		background-color 180ms ease,
		border-color 180ms ease;
}

.ashby-application-form-submit-button:hover {
	background: #dbdbdb;
	border-color: #dbdbdb;
}

.ashby-application-form-submit-button:focus-visible {
	outline: 2px solid #b6dcb8;
	outline-offset: 3px;
}

/* Status messages */
.ashby-application-form-success-container {
	background: #253528;
	border-color: #426c49;
	color: #e6e6de;
}

.ashby-application-form-failure-container {
	background: #2b1a1a;
	border-color: #8b4545;
	color: #e6e6de;
}

@media (max-width: 720px) {
	.ashby-job-posting-header {
		padding-bottom: 24px;
	}

	.ashby-job-posting-heading {
		font-size: 28px;
	}

	.ashby-job-posting-description {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto;
		transition-duration: 0.01ms;
	}
}