/* Reload Roles — Find a Role list + single-role page.
   Uses the same brand tokens as reload-child (--reload-ink etc). */

.reload-roles{
	--card-radius: 22px;
	--card-border: 1px solid rgba(24,24,32,.08);
	--pattern-tint: color-mix(in srgb, var(--reload-melon, #ff8f6b) 20%, transparent);

	max-width: 1180px;
	margin: 0 auto;
	padding: 40px clamp(16px, 3vw, 40px);
	font-family: var(--reload-font-ui, "Work Sans", system-ui, sans-serif);
	color: var(--reload-ink, #14141a);
}

/* --- Filter bar --- */
.reload-roles-controls{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 14px 22px;
	padding: 18px 20px;
	background: #fff;
	border: var(--card-border);
	border-radius: 18px;
	margin: 0 0 28px;
}
.reload-roles-filter{ display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 1 1 220px; }
.reload-roles-filter label{ font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #565664; }
.reload-roles-filter select{
	height: 44px; padding: 0 12px;
	border: 1px solid #dcdce4; border-radius: 10px;
	background: #fff; font: inherit; color: inherit;
}
.reload-roles-reset{
	height: 44px; padding: 0 22px;
	border: 1px solid #dcdce4; background: #fff; border-radius: 100px;
	font: inherit; color: var(--reload-ink, #2E405B); cursor: pointer;
	font-weight: 500;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.reload-roles-reset:hover,
.reload-roles-reset:focus-visible{
	background: var(--reload-melon-2, #FFB08C) !important;
	border-color: var(--reload-melon-2, #FFB08C) !important;
	color: var(--reload-ink, #2E405B) !important;
	outline: none;
}
.reload-roles-count{ margin: 0 0 0 auto; color: #565664; font-size: 14px; }
.reload-roles-count [data-role="count"]{ color: var(--reload-ink, #14141a); font-weight: 600; }

/* --- List --- */
.reload-roles-list{
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: 1fr; gap: 16px;
}
.reload-roles-item{ margin: 0; }

/* --- Card / accordion --- */
.reload-role-card{
	background: #fff;
	border: var(--card-border);
	border-radius: var(--card-radius);
	overflow: hidden;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.reload-role-card[open]{
	border-color: rgba(24,24,32,.14);
	box-shadow: 0 24px 48px -32px rgba(24,24,32,.35);
}
.reload-role-summary{
	list-style: none;
	cursor: pointer;
	padding: 22px 26px;
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"head    toggle"
		"title   toggle"
		"firm    toggle"
		"snap    toggle";
	gap: 6px 22px;
	align-items: center;
}
.reload-role-summary::-webkit-details-marker{ display: none; }
.reload-role-summary::marker{ content: ""; }

.reload-role-summary-head{
	grid-area: head;
	display: flex; align-items: center; gap: 12px;
	font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #565664;
}
.reload-role-city{ font-weight: 600; color: var(--reload-ink, #14141a); }
.reload-role-status{
	display: inline-flex; align-items: center;
	padding: 4px 10px; border-radius: 100px;
	background: color-mix(in srgb, var(--reload-melon, #ff8f6b) 18%, white);
	color: var(--reload-ink, #14141a);
	font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
}
.reload-role-status.is-pattern{
	background: color-mix(in srgb, var(--reload-mauve, #b8a4c9) 22%, white);
}
.reload-role-title{
	grid-area: title; margin: 4px 0 0;
	font-family: var(--reload-font-display, "Erstoria", serif);
	font-weight: 400;
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.15; letter-spacing: -.01em;
	color: var(--reload-ink, #14141a);
}
.reload-role-firm{ grid-area: firm; margin: 2px 0 0; color: #454550; font-size: 14px; }
.reload-role-snap{ grid-area: snap; margin: 8px 0 0; font-size: 15px; color: #2a2a33; max-width: 74ch; }

.reload-role-toggle{
	grid-area: toggle;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--reload-ink, #14141a); border-radius: 100px;
	background: transparent; color: var(--reload-ink, #14141a);
	font-size: 13px; font-weight: 500;
	white-space: nowrap;
}
.reload-role-toggle::after{
	content: ""; width: 8px; height: 8px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); transition: transform .2s ease;
	margin-top: -3px;
}
.reload-role-card[open] .reload-role-toggle::after{ transform: rotate(-135deg); margin-top: 3px; }
.reload-role-toggle-close{ display: none; }
.reload-role-card[open] .reload-role-toggle-open{ display: none; }
.reload-role-card[open] .reload-role-toggle-close{ display: inline; }

.reload-role-body{
	padding: 6px 26px 28px;
	border-top: 1px solid rgba(24,24,32,.06);
	background: #fbfbfd;
	animation: reload-role-fade .25s ease;
}
@keyframes reload-role-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.reload-role-qa{ margin: 20px 0 0; max-width: 74ch; }
.reload-role-qa h4{
	margin: 0 0 8px;
	font-family: var(--reload-font-display, "Erstoria", serif);
	font-weight: 400;
	font-size: 20px; line-height: 1.2; letter-spacing: -.01em;
	color: var(--reload-ink, #14141a);
}
.reload-role-qa p{ margin: 0; font-size: 16px; line-height: 1.55; color: #24242c; }

.reload-role-cta{ margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Deep-link target: open the card and scroll to it. --- */
.reload-role-card:target{
	border-color: var(--reload-ink, #14141a);
	box-shadow: 0 24px 48px -32px rgba(24,24,32,.45);
	scroll-margin-top: 100px;
}

.reload-roles-noresults{
	margin-top: 24px; padding: 32px; text-align: center;
	background: #fff; border: var(--card-border); border-radius: 18px;
	color: #454550;
}

/* --- Hide theme's default page/post title on single-role pages ---
   Our template renders its own <h1> inside the article, so the theme's
   default title (Hello Elementor + a few common Elementor Theme Builder
   selectors) would double it up above the eyebrow.  Scope everything to
   body.single-reload_role so nothing else on the site is affected. */
body.single-reload_role .entry-header,
body.single-reload_role .page-header,
body.single-reload_role header.entry-header,
body.single-reload_role h1.entry-title,
body.single-reload_role .entry-title,
body.single-reload_role .page-title,
body.single-reload_role .elementor-page-title,
body.single-reload_role .elementor-widget-theme-post-title,
body.single-reload_role .elementor-widget-post-title,
body.single-reload_role .site-main > article > header,
body.single-reload_role .hello-elementor-default .entry-header,
body.single-reload_role .page-title-wrapper{
	display: none !important;
}

/* --- Single-role canonical page --- */
.reload-role-single{
	max-width: 800px; margin: 0 auto; padding: 40px clamp(16px, 3vw, 40px);
	font-family: var(--reload-font-ui, "Work Sans", system-ui, sans-serif);
	color: var(--reload-ink, #14141a);
}
.reload-role-single-eyebrow{
	display: flex; gap: 12px; align-items: center;
	font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
	color: #565664; margin: 0 0 14px;
}
.reload-role-single-city{ color: var(--reload-ink, #14141a); font-weight: 600; }
.reload-role-single-status{
	padding: 4px 10px; border-radius: 100px;
	background: color-mix(in srgb, var(--reload-melon, #ff8f6b) 18%, white);
	color: var(--reload-ink, #14141a);
	font-size: 11px; letter-spacing: .05em;
}
.reload-role-single-status.is-pattern{ background: color-mix(in srgb, var(--reload-mauve, #b8a4c9) 22%, white); }
.reload-role-single-title{ margin: 0 0 6px; }
.reload-role-single-firm{ margin: 0 0 10px; color: #454550; font-size: 16px; }
.reload-role-single-snap{ font-size: 18px; color: #2a2a33; max-width: 68ch; }
.reload-role-single-body .reload-role-qa{ margin-top: 32px; }
.reload-role-single-body .reload-role-qa h2{
	font-family: var(--reload-font-display, "Erstoria", serif);
	font-weight: 400;
	font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -.01em;
	margin: 0 0 10px; color: var(--reload-ink, #14141a);
}
.reload-role-single-body .reload-role-qa p{ margin: 0; font-size: 17px; line-height: 1.6; color: #24242c; }
.reload-role-single-actions{ margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================
   [reload_roles_by_city] — homepage "Where the rare get placed"
   ========================================================== */
.reload-roles-map{
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 96px) clamp(16px, 3vw, 40px);
	font-family: var(--reload-font-ui, "Work Sans", system-ui, sans-serif);
	color: var(--reload-ink, #14141a);
}
.reload-roles-map-head{ max-width: 780px; margin: 0 0 40px; }
.reload-roles-map-head h2{ margin: 0 0 14px; }
.reload-roles-map-head p{ margin: 0; font-size: 17px; line-height: 1.55; color: #454550; }

.reload-roles-map-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}
.reload-roles-map-city{
	background: #fff;
	border: 1px solid rgba(24,24,32,.08);
	border-radius: 18px;
	overflow: hidden;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.reload-roles-map-city[open]{
	border-color: rgba(24,24,32,.16);
	box-shadow: 0 20px 40px -30px rgba(24,24,32,.35);
	grid-column: span 2;
}
@media (max-width: 720px) { .reload-roles-map-city[open]{ grid-column: auto; } }

.reload-roles-map-city summary{
	list-style: none;
	cursor: pointer;
	padding: 20px 22px;
	display: flex; align-items: center; gap: 12px;
}
.reload-roles-map-city summary::-webkit-details-marker{ display: none; }
.reload-roles-map-city summary::marker{ content: ""; }

.reload-roles-map-city-name{
	flex: 1 1 auto;
	font-family: var(--reload-font-display, "Erstoria", serif);
	font-weight: 400;
	font-size: clamp(22px, 2vw, 26px);
	line-height: 1.1; letter-spacing: -.01em;
	color: var(--reload-ink, #14141a);
}
.reload-roles-map-city-count{
	font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
	color: var(--reload-ink, #14141a);
	background: color-mix(in srgb, var(--reload-melon, #ff8f6b) 18%, white);
	padding: 4px 10px; border-radius: 100px;
}
.reload-roles-map-city-toggle{
	width: 10px; height: 10px;
	border-right: 1.5px solid var(--reload-ink, #14141a);
	border-bottom: 1.5px solid var(--reload-ink, #14141a);
	transform: rotate(45deg); transition: transform .2s ease;
	margin-top: -3px;
}
.reload-roles-map-city[open] .reload-roles-map-city-toggle{ transform: rotate(-135deg); margin-top: 3px; }

.reload-roles-map-list{
	list-style: none; margin: 0; padding: 4px 12px 16px;
	display: grid; gap: 6px;
}
.reload-roles-map-city[open] .reload-roles-map-list{
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.reload-roles-map-role{
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title cta"
		"firm  cta";
	gap: 2px 12px; align-items: center;
	padding: 12px 14px;
	border: 1px solid transparent; border-radius: 12px;
	color: var(--reload-ink, #14141a);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.reload-roles-map-role:hover, .reload-roles-map-role:focus-visible{
	border-color: rgba(24,24,32,.12);
	background: #fbfbfd;
	outline: none;
}
.reload-roles-map-role-title{ grid-area: title; font-weight: 600; font-size: 15px; }
.reload-roles-map-role-firm{ grid-area: firm;  font-size: 13px; color: #565664; }
.reload-roles-map-role-cta{
	grid-area: cta;
	font-size: 13px; color: var(--reload-melon, #ff8f6b); opacity: 0;
	transition: opacity .15s ease, transform .15s ease;
	transform: translateX(-4px);
}
.reload-roles-map-role:hover .reload-roles-map-role-cta,
.reload-roles-map-role:focus-visible .reload-roles-map-role-cta{
	opacity: 1; transform: none;
}

.reload-roles-map-footer{ margin: 32px 0 0; text-align: center; }

/* ==========================================================
   Apply-for-role modal
   ========================================================== */
.reload-role-apply-lock{ overflow: hidden; }
.reload-role-apply-modal[hidden]{ display: none !important; }
.reload-role-apply-modal{
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(12px, 3vw, 40px);
	font-family: var(--reload-font-ui, "Work Sans", system-ui, sans-serif);
	color: var(--reload-ink, #2E405B);
	animation: reload-apply-fade .2s ease;
}
@keyframes reload-apply-fade { from { opacity: 0; } to { opacity: 1; } }
.reload-role-apply-backdrop{
	position: absolute; inset: 0;
	background: rgba(46,64,91,.55);
	backdrop-filter: blur(2px);
}
.reload-role-apply-dialog{
	position: relative; z-index: 1;
	background: #fff;
	border-radius: 22px;
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	box-shadow: 0 40px 80px -40px rgba(20,20,26,.55);
	animation: reload-apply-rise .25s cubic-bezier(.2,.7,.2,1);
}
@keyframes reload-apply-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.reload-role-apply-close{
	position: absolute; top: 14px; right: 14px;
	width: 36px; height: 36px; border: 0; border-radius: 100px;
	background: rgba(46,64,91,.06); color: var(--reload-ink, #2E405B);
	font-size: 22px; line-height: 1; cursor: pointer;
	transition: background .15s ease;
}
.reload-role-apply-close:hover{ background: rgba(46,64,91,.12); }

.reload-role-apply-body{ padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px); }
.reload-role-apply-eyebrow{
	margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--reload-melon-2, #FFB08C);
	font-weight: 600;
}
.reload-role-apply-title{
	margin: 0 0 6px;
	font-family: var(--reload-font-display, "Erstoria", serif);
	font-weight: 400;
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.15; letter-spacing: -.01em;
	color: var(--reload-ink, #2E405B);
}
.reload-role-apply-context{
	margin: 0 0 22px;
	font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
	color: rgba(46,64,91,.65);
}
.reload-role-apply-form{ display: grid; gap: 16px; }
.reload-role-apply-grid{
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 520px) { .reload-role-apply-grid{ grid-template-columns: 1fr; } }

.reload-role-apply-field{ display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.reload-role-apply-field > span{
	font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
	color: var(--reload-ink-soft, rgba(46,64,91,.65));
	font-weight: 600;
}
.reload-role-apply-field > span em{ color: var(--reload-melon-2, #FFB08C); font-style: normal; margin-left: 4px; }
.reload-role-apply-field input[type=text],
.reload-role-apply-field input[type=email],
.reload-role-apply-field input[type=tel],
.reload-role-apply-field input[type=url],
.reload-role-apply-field textarea{
	padding: 12px 14px;
	border: 1px solid rgba(46,64,91,.16);
	border-radius: 10px;
	background: #fff;
	font: inherit; color: var(--reload-ink, #2E405B);
	transition: border-color .15s ease;
}
.reload-role-apply-field input:focus,
.reload-role-apply-field textarea:focus{
	outline: none; border-color: var(--reload-ink, #2E405B);
	box-shadow: 0 0 0 3px rgba(46,64,91,.08);
}
.reload-role-apply-field textarea{ resize: vertical; min-height: 96px; }
.reload-role-apply-field-file input[type=file]{
	padding: 10px 12px;
	border: 1px dashed rgba(46,64,91,.28);
	border-radius: 10px;
	background: #fbfbfd;
	font: inherit;
}

.reload-role-apply-consent{
	display: grid; grid-template-columns: 20px 1fr; gap: 10px;
	align-items: start;
	font-size: 13px; color: var(--reload-ink-soft, rgba(46,64,91,.75));
	line-height: 1.5;
	padding: 12px 0 0;
	border-top: 1px solid rgba(46,64,91,.08);
	margin-top: 4px;
}
.reload-role-apply-consent input[type=checkbox]{ width: 18px; height: 18px; margin-top: 2px; }
.reload-role-apply-consent a{ color: var(--reload-ink, #2E405B); }

.reload-role-apply-status{
	padding: 10px 14px;
	background: rgba(46,64,91,.06);
	border-radius: 10px;
	color: var(--reload-ink, #2E405B);
	font-size: 13px;
}
.reload-role-apply-status.is-error{
	background: #fff0ec;
	color: #8a2015;
}

.reload-role-apply-actions{
	display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px;
}
.reload-role-apply-cancel{
	background: transparent; border: 0;
	color: var(--reload-ink-soft, rgba(46,64,91,.75));
	padding: 12px 18px; border-radius: 100px; cursor: pointer;
	font: inherit; font-weight: 500;
}
.reload-role-apply-cancel:hover{ color: var(--reload-ink, #2E405B); }
.reload-role-apply-submit{
	background: var(--reload-ink, #2E405B); color: #fff;
	border: 0; padding: 12px 24px; border-radius: 100px;
	font: inherit; font-weight: 600; cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.reload-role-apply-submit:hover{ background: #1e2c42; transform: translateY(-1px); }
.reload-role-apply-submit[disabled]{ opacity: .6; cursor: default; transform: none; }

.reload-role-apply-body-thanks{ text-align: center; }
.reload-role-apply-tick{
	width: 56px; height: 56px; margin: 0 auto 14px;
	border-radius: 100px;
	background: color-mix(in srgb, var(--reload-melon-2, #FFB08C) 20%, white);
	color: var(--reload-melon-2, #FFB08C);
	display: flex; align-items: center; justify-content: center;
	font-size: 32px; font-weight: 700;
}
.reload-role-apply-body-thanks .reload-role-apply-title{ margin-bottom: 10px; }
.reload-role-apply-thanks-body{
	margin: 0 auto 22px; max-width: 44ch;
	font-size: 15px; line-height: 1.5;
	color: var(--reload-ink-soft, rgba(46,64,91,.75));
}
.reload-role-apply-body-thanks .reload-role-apply-submit{ margin: 0 auto; }

/* --- Responsive --- */
@media (max-width: 640px) {
	.reload-role-summary{
		grid-template-columns: 1fr;
		grid-template-areas: "head" "title" "firm" "snap" "toggle";
	}
	.reload-role-toggle{ justify-self: start; margin-top: 8px; }
	.reload-roles-count{ margin-left: 0; width: 100%; }
}