/**
 * Help Center — page-specific styles
 * ------------------------------------------------------------------
 * Loaded only on the Help Center template (see inc/help-center-enqueue.php).
 * All selectors are prefixed hc- to avoid colliding with global Jobify /
 * child theme classes.
 *
 * NOTE ON !important: Jobify's global.css sets
 *   h1-h6 { color: var(--clr-heading) !important; }
 * so heading colors here must also use !important to win — this is a
 * known project quirk (see engineering notes), not sloppy CSS.
 *
 * NOTE ON --hc-header-height: set this to match the theme's actual
 * sticky header height so anchor-jumps (from the self-select cards)
 * don't land underneath it. Confirm against the live nav before launch.
 *
 * NOTE ON COLOR TOKENS: colors are defined once as custom properties
 * below instead of hardcoded per-rule. The site currently forces light
 * mode everywhere (color-scheme: light, set globally — see prior
 * decision after the "dark hero" mix-up) and that should stay true here
 * too. These tokens exist so that IF a deliberate dark mode is ever
 * introduced as a product decision, it's a values swap in one place
 * instead of a rewrite of every rule below.
 *
 * NOTE ON RTL: Curaçao Jobs is LTR-only today (English/Dutch/Papiamentu
 * are all LTR). Directional spacing below uses logical properties
 * (margin-inline-end, inset-inline-start, etc.) instead of left/right so
 * this file doesn't need touching if an RTL locale is ever added —
 * `dir="rtl"` on <html> would flip it automatically.
 * ------------------------------------------------------------------
 */

:root {
	--hc-header-height: 64px; /* TODO: confirm against live sticky nav height */

	/* Color tokens — values match the locked CuracaoJobs.co design system */
	--hc-bg:            #F4F8F6;
	--hc-surface:       #fff;
	--hc-border:        #D8E8E4;
	--hc-border-hover:  #B8DDD5;
	--hc-heading:       #174035;
	--hc-body-text:     #5a6a7a;
	--hc-muted-text:    #8a9aaa;
	--hc-secondary-text:#6B7280;
	--hc-accent:        #2E8B72;
	--hc-accent-hover:  #207A61;
	--hc-accent-tint:   #E6F3EF;
	--hc-neutral-tint:  #F4F8F6;
	--hc-chevron-idle:  #C4CDCA;
	--hc-focus-ring:    #2E8B72;
}

.help-center {
	background: var(--hc-bg);
	color: var(--hc-heading);
	font-family: 'Plus Jakarta Sans', sans-serif;
	line-height: 1.5;
}

.hc-skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	background: var(--hc-heading);
	color: var(--hc-surface);
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 0 0 8px 0;
	z-index: 9999;
	text-decoration: none;
}
.hc-skip-link:focus {
	inset-inline-start: 0;
}

/* HERO — light, no dark block, matches the utility-page family */
.hc-hero {
	position: relative;
	padding: 2.75rem 2rem 1.5rem;
	text-align: center;
	overflow: hidden;
}
.hc-hero-decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.hc-hero-decor i {
	position: absolute;
	color: var(--hc-accent);
	opacity: 0.06;
}
.hc-hero-decor i:nth-child(1) { font-size: 64px; top: -6px; inset-inline-start: 8%; transform: rotate(-8deg); }
.hc-hero-decor i:nth-child(2) { font-size: 42px; top: 30px; inset-inline-end: 12%; transform: rotate(10deg); }
.hc-hero-decor i:nth-child(3) { font-size: 30px; bottom: -4px; inset-inline-start: 30%; transform: rotate(6deg); }
.hc-hero-inner {
	position: relative;
	z-index: 1;
}
.hc-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hc-muted-text);
	margin-bottom: 0.6rem;
}
.hc-hero h1 {
	font-size: 27px;
	font-weight: 700;
	color: var(--hc-heading) !important;
	letter-spacing: -0.4px;
	margin: 0 0 0.5rem;
}
.hc-hero p {
	font-size: 14px;
	color: var(--hc-secondary-text);
	max-width: 440px;
	margin: 0 auto;
}

/* WRAP */
.hc-wrap {
	max-width: 920px;
	margin: 0 auto;
	padding: 0 2rem 1rem;
}

/* SEARCH */
.hc-search {
	max-width: 680px;
	margin: 1.75rem auto 0;
}
.hc-search-box {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--hc-surface);
	border: 0.5px solid var(--hc-border);
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(23, 64, 53, 0.06);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hc-search-box::before {
	content: "";
	position: absolute;
	inset-inline-start: 16px;
	width: 17px;
	height: 17px;
	background-color: var(--hc-muted-text);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
.hc-search-box:hover {
	border-color: var(--hc-border-hover);
	box-shadow: 0 12px 30px rgba(23, 64, 53, 0.08);
}
.hc-search-input {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 52px;
	border: 0;
	background: transparent;
	color: var(--hc-heading);
	font-size: 14px;
	line-height: 1.4;
	padding-block: 0;
	padding-inline: 48px 18px;
	outline: 0;
}
.hc-search-input::-webkit-search-decoration,
.hc-search-input::-webkit-search-cancel-button,
.hc-search-input::-webkit-search-results-button,
.hc-search-input::-webkit-search-results-decoration {
	display: none;
}
.hc-search-input::placeholder {
	color: var(--hc-muted-text);
	opacity: 1;
}
.hc-search-box:focus-within {
	border-color: var(--hc-accent);
	box-shadow: 0 0 0 3px rgba(46, 139, 114, 0.16), 0 12px 30px rgba(23, 64, 53, 0.08);
}
.hc-search-box:focus-within::before {
	background-color: var(--hc-accent);
}
.hc-search-status {
	margin: 8px 0 0;
	color: var(--hc-muted-text);
	font-size: 12px;
	text-align: center;
}

/* SELF-SELECT CARDS */
.hc-pick-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 1.35rem 0 2.5rem;
}
.hc-pick-card {
	box-sizing: border-box;
	background: var(--hc-surface);
	border: 0.5px solid var(--hc-border);
	border-radius: 12px;
	padding: 1.1rem 1.15rem;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: border-color 0.15s;
	min-height: 44px; /* comfortable tap target */
	min-width: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.hc-pick-card:hover {
	border-color: var(--hc-border-hover);
	box-shadow: 0 8px 20px rgba(23, 64, 53, 0.05);
}
.hc-pick-card:focus-visible {
	outline: 2px solid var(--hc-focus-ring);
	outline-offset: 2px;
}
.hc-pick-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--hc-neutral-tint);
	color: var(--hc-body-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.hc-pick-card.accent .hc-pick-icon {
	background: var(--hc-accent-tint);
	color: var(--hc-accent);
}
.hc-pick-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--hc-heading);
	overflow-wrap: break-word;
}
.hc-pick-sub {
	font-size: 11.5px;
	color: var(--hc-muted-text);
	line-height: 1.4;
	overflow-wrap: break-word;
}

/* CATEGORY SECTIONS */
.hc-category {
	margin-bottom: 2.45rem;
	scroll-margin-top: calc(var(--hc-header-height) + 18px);
}
.hc-category-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0.85rem;
}
.hc-category-head i {
	font-size: 15px;
	color: var(--hc-accent);
	opacity: 0.8;
	flex-shrink: 0;
}
.hc-category-head h2 {
	font-size: 14px;
	font-weight: 700;
	color: var(--hc-heading) !important;
	margin: 0;
}

.hc-faq-card {
	background: var(--hc-surface);
	border: 0.5px solid var(--hc-border);
	border-radius: 12px;
	overflow: hidden;
}

.hc-faq-item {
	border-bottom: 0.5px solid var(--hc-neutral-tint);
}
.hc-faq-item:last-child {
	border-bottom: none;
}

/* Long-question handling: the question text is its own flex child so it
   can wrap to 2–3 lines without squeezing or displacing the chevron.
   align-items is flex-start (not center) so the chevron sits level with
   the first line of a wrapped, multi-line question rather than centering
   against the whole wrapped block. */
.hc-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 1.25rem;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hc-heading);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px; /* comfortable tap target */
}
.hc-faq-item summary::-webkit-details-marker {
	display: none;
}
.hc-faq-item summary:hover {
	color: var(--hc-accent);
}
.hc-faq-item summary:focus-visible {
	outline: 2px solid var(--hc-focus-ring);
	outline-offset: -2px;
}
.hc-faq-q {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
	padding-top: 1px; /* optical alignment with the chevron's first line */
}
.hc-faq-chevron {
	font-size: 15px;
	color: var(--hc-chevron-idle);
	flex-shrink: 0;
	margin-top: 1px;
	transition: transform 0.18s ease;
}
.hc-faq-item[open] .hc-faq-chevron {
	transform: rotate(180deg);
	color: var(--hc-accent);
}
.hc-faq-answer {
	padding: 0 1.25rem 16px;
	font-size: 13px;
	color: var(--hc-body-text);
	line-height: 1.6;
}
.hc-faq-answer p {
	margin: 0 0 8px;
	overflow-wrap: break-word;
}
.hc-faq-answer p:last-child {
	margin-bottom: 0;
}
.hc-faq-related {
	font-size: 12px;
}
.hc-faq-related a {
	color: var(--hc-accent);
	font-weight: 600;
	text-decoration: none;
	margin-inline-end: 14px;
	display: inline-block;
}
.hc-faq-related a:hover {
	text-decoration: underline;
}

/* COMING SOON */
.hc-coming-soon {
	margin: 2.25rem 0 0;
}
.hc-coming-soon h2 {
	font-size: 14px;
	font-weight: 700;
	color: var(--hc-heading) !important;
	margin: 0 0 0.85rem;
}
.hc-coming-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.hc-coming-card {
	background: var(--hc-surface);
	border: 0.5px solid var(--hc-border);
	border-radius: 12px;
	padding: 1.15rem 1.25rem;
}
.hc-coming-card h3 {
	color: var(--hc-heading) !important;
	font-size: 13.5px;
	font-weight: 700;
	margin: 0 0 6px;
}
.hc-coming-card p {
	color: var(--hc-secondary-text);
	font-size: 12.5px;
	line-height: 1.55;
	margin: 0;
}

/* CTA */
.hc-cta {
	background: var(--hc-surface);
	border: 0.5px solid var(--hc-border);
	border-radius: 14px;
	padding: 2.1rem 1.75rem;
	text-align: center;
	margin: 2.25rem 0 3.5rem;
	scroll-margin-top: calc(var(--hc-header-height) + 10px);
}
.hc-cta h2 {
	font-size: 18px;
	font-weight: 700;
	color: var(--hc-heading) !important;
	margin: 0 0 8px;
}
.hc-cta p {
	font-size: 13px;
	color: var(--hc-secondary-text);
	max-width: 420px;
	margin: 0 auto 1.4rem;
}
.hc-cta-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}
.hc-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 9px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: none;
	min-height: 44px; /* comfortable tap target */
}
.hc-cta-btn.primary {
	background: var(--hc-accent);
	color: #fff !important;
}
.hc-cta-btn.primary:hover {
	background: var(--hc-accent-hover);
}
.hc-cta-btn.outline {
	background: var(--hc-surface);
	color: var(--hc-heading);
	border: 0.5px solid var(--hc-border);
}
.hc-cta-btn.outline:hover {
	border-color: var(--hc-border-hover);
}
.hc-cta-btn:focus-visible {
	outline: 2px solid var(--hc-focus-ring);
	outline-offset: 2px;
}
.hc-cta-secondary {
	display: block;
	margin-top: 12px;
	font-size: 12px;
	color: var(--hc-muted-text);
	text-decoration: none;
}
.hc-cta-secondary:hover {
	color: var(--hc-accent);
}

/* MOBILE */
@media (max-width: 900px) {
	.hc-pick-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.hc-hero {
		padding: 2rem 1.25rem 1.25rem;
	}
	.hc-hero h1 {
		font-size: 22px;
	}
	.hc-wrap {
		padding: 0 1.25rem 1rem;
	}
	.hc-pick-grid {
		grid-template-columns: 1fr;
	}
	.hc-search {
		margin-top: 1.25rem;
	}
	.hc-search-input {
		min-height: 50px;
		font-size: 13px;
	}
	.hc-coming-grid {
		grid-template-columns: 1fr;
	}
	.hc-cta-btns {
		flex-direction: column;
	}
	.hc-cta-btn {
		width: 100%;
		justify-content: center;
	}
	.hc-faq-related a {
		margin-inline-end: 14px;
		margin-block-end: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hc-faq-chevron {
		transition: none;
	}
	html {
		scroll-behavior: auto;
	}
}