/* ExpatKit City Guide sidebar — score card + lead capture module.
   Loaded only on posts that actually use it. Extends the tokens already
   defined in blog.css (this file is always enqueued alongside it). */

:root {
	--ek-score-low: #B5543F;
}

/* ---------- Hero additions ---------- */

.ek-location-line {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	color: var(--ek-muted);
	margin: -8px 0 16px;
}

.ek-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--ek-navy);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius-pill);
	padding: 5px 12px;
	margin-inline-start: 10px;
	vertical-align: middle;
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- Score card ---------- */

.ek-score-card {
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius-md);
	background: #fff;
	padding: 24px;
}

.ek-score-card__head {
	margin-block-end: 18px;
}
.ek-score-card__overall {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--ek-font-heading);
	color: var(--ek-ink);
}
.ek-score-card__num { font-size: 2.5rem; font-weight: 600; line-height: 1; }
.ek-score-card__denom { font-size: 1.1rem; color: var(--ek-muted); }
.ek-score-card__basis {
	font-size: 0.85rem;
	color: var(--ek-muted);
	margin: 6px 0 0;
}

.ek-score-card__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-block-start: 18px;
	border-top: 1px solid var(--ek-line);
}
.ek-score-card__list--gated {
	border-top: 0;
	padding-block-start: 0;
	margin-block-start: 16px;
}

.ek-score-row__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 6px;
}
.ek-score-row__label {
	font-size: 0.86rem;
	color: var(--ek-ink);
	font-weight: 500;
}
.ek-score-row__value {
	font-size: 0.82rem;
	color: var(--ek-muted);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
.ek-score-row__bar {
	height: 6px;
	border-radius: var(--ek-radius-pill);
	background: var(--ek-surface);
	overflow: hidden;
}
.ek-score-row__fill {
	height: 100%;
	border-radius: var(--ek-radius-pill);
}
.ek-score-row__fill--low { background: var(--ek-score-low); }
.ek-score-row__fill--mid { background: var(--ek-accent); }
.ek-score-row__fill--high { background: var(--ek-support); }

/* Email-gate CTA: gold accent (functional, matches the site's "restrained
   gold accent" rule), full pill radius matching every other button in the
   design system, dark ink-on-accent text for contrast — no pill-less/loud
   treatment, no shadow. :not([hidden]) for the same reason as the modal
   itself: a bare class selector ties in specificity with the UA stylesheet's
   [hidden] { display: none } and, loading later, wins the tie — confirmed
   live (the CTA stayed visible after being hidden post-unlock). */
.ek-score-card__unlock[hidden] {
	/* A site-wide reset ("[type=button], [type=submit], button { display:
	   inline-block }") ties in specificity with the native [hidden] rule and
	   wins by source order, independent of anything in this file — confirmed
	   live (the CTA stayed visible after being hidden post-unlock). !important
	   at high specificity is the only reliable way to win against a reset
	   stylesheet outside this project's control. */
	display: none !important;
}
.ek-score-card__unlock {
	display: block;
	width: 100%;
	margin-block-start: 18px;
	background: var(--ek-accent);
	color: var(--ek-ink-on-accent);
	border: 0;
	border-radius: var(--ek-radius-pill);
	padding: 13px 16px;
	font-family: var(--ek-font-body);
	font-weight: 600;
	font-size: 0.88rem;
	cursor: pointer;
	text-align: center;
}
.ek-score-card__unlock:hover { background: var(--ek-accent-light); }
.ek-score-card__unlock:focus-visible { outline: 2px solid var(--ek-navy); outline-offset: 2px; }

.ek-score-card__unlocked-msg {
	margin: 16px 0 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ek-support);
	text-align: center;
}

/* ---------- Score unlock modal ----------
   Centered dialog on desktop; a bottom sheet on narrow viewports. No modal
   library — open/close/focus-trap logic lives in city-score.js. */

/* :not([hidden]) rather than a bare display:flex — a plain class selector
   ties in specificity with the UA stylesheet's [hidden] { display: none },
   and mine would win the tie (author CSS loads after the UA sheet), making
   the modal render regardless of its hidden attribute. Same class of bug
   as the earlier TOC !important issue, just via a specificity tie instead
   of !important — confirmed live before shipping this fix. */
.ek-score-unlock:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.ek-score-unlock__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 27, 51, 0.55);
}
.ek-score-unlock__dialog {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--ek-radius-lg);
	border: 1px solid var(--ek-line);
	box-shadow: 0 24px 60px rgba(10, 27, 51, 0.25);
	padding: 32px 28px 28px;
}
/* Double-scoped (.ek-score-unlock .ek-score-unlock__close) for the same
   reason as .ek-sapo .ek-sapo__toggle and .ek-toc-sticky .ek-toc-sticky__toggle
   before it: a plain class selector on a <button> loses a specificity fight
   to Elementor's global kit button reset (".elementor-kit-XXXX button"),
   which otherwise repaints it into a solid pill — confirmed live again here. */
.ek-score-unlock .ek-score-unlock__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: 50%;
	padding: 0;
	color: var(--ek-muted);
	cursor: pointer;
}
.ek-score-unlock .ek-score-unlock__close:hover { background: var(--ek-surface); color: var(--ek-navy); }
.ek-score-unlock .ek-score-unlock__close:focus-visible { outline: 2px solid var(--ek-accent); outline-offset: 2px; }

.ek-score-unlock__eyebrow {
	font-family: var(--ek-font-body);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9A7A12;
	margin: 0 0 10px;
}
.ek-score-unlock__title {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1.2;
	color: var(--ek-ink);
	margin: 0 0 10px;
	padding-right: 24px;
}
.ek-score-unlock__desc {
	font-size: 0.92rem;
	color: var(--ek-muted);
	line-height: 1.5;
	margin: 0 0 20px;
}

@media (max-width: 640px) {
	.ek-score-unlock { padding: 0; align-items: flex-end; }
	.ek-score-unlock__dialog {
		max-width: none;
		max-height: 85vh;
		border-radius: var(--ek-radius-lg) var(--ek-radius-lg) 0 0;
		padding: 28px 20px 24px;
	}
}

/* Applied to <body> while the modal is open, to lock background scroll. */
body.ek-score-unlock-open {
	overflow: hidden;
}

/* ---------- Lead capture card ---------- */

.ek-lead-card {
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius-md);
	background: var(--ek-surface);
	padding: 24px;
}
.ek-lead-card__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ek-navy);
	color: #fff;
	margin-block-end: 14px;
}
.ek-lead-card__heading {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--ek-ink);
	margin: 0 0 6px;
}
.ek-lead-card__desc {
	font-size: 0.88rem;
	color: var(--ek-muted);
	line-height: 1.55;
	margin: 0 0 16px;
}
.ek-lead-card__note {
	font-size: 0.76rem;
	color: var(--ek-muted);
	margin: 10px 0 0;
}

/* Minimal, brand-consistent WPForms styling. Dual-scoped to both
   .ek-lead-card__form and .ek-score-unlock__form-slot: the score-unlock
   modal can reuse this exact same live form instance (relocated by
   city-score.js, not cloned), so wherever it currently lives needs
   identical styling. */
.ek-lead-card__form .wpforms-container,
.ek-score-unlock__form-slot .wpforms-container { margin: 0; }
.ek-lead-card__form .wpforms-field,
.ek-score-unlock__form-slot .wpforms-field { padding: 0 0 10px; }
.ek-lead-card__form .wpforms-field-label,
.ek-score-unlock__form-slot .wpforms-field-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ek-ink);
	margin-bottom: 4px;
}
.ek-lead-card__form input[type="text"],
.ek-lead-card__form input[type="email"],
.ek-score-unlock__form-slot input[type="text"],
.ek-score-unlock__form-slot input[type="email"] {
	width: 100%;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius-sm);
	padding: 11px 14px;
	font-family: var(--ek-font-body);
	font-size: 0.9rem;
	color: var(--ek-ink);
	background: #fff;
}
.ek-lead-card__form input:focus,
.ek-score-unlock__form-slot input:focus {
	outline: none;
	border-color: var(--ek-accent);
	box-shadow: 0 0 0 3px rgba(201,162,39,0.16);
}
.ek-lead-card__form .wpforms-submit-container,
.ek-score-unlock__form-slot .wpforms-submit-container { margin: 4px 0 0; }
.ek-lead-card__form button[type="submit"],
.ek-lead-card__form .wpforms-submit,
.ek-score-unlock__form-slot button[type="submit"],
.ek-score-unlock__form-slot .wpforms-submit {
	width: 100%;
	background: var(--ek-accent);
	color: var(--ek-ink-on-accent);
	border: 0;
	border-radius: var(--ek-radius-pill);
	padding: 13px 20px;
	font-family: var(--ek-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	cursor: pointer;
}
.ek-lead-card__form button[type="submit"]:hover,
.ek-lead-card__form .wpforms-submit:hover,
.ek-score-unlock__form-slot button[type="submit"]:hover,
.ek-score-unlock__form-slot .wpforms-submit:hover { background: var(--ek-accent-light); }
.ek-lead-card__form .wpforms-error,
.ek-score-unlock__form-slot .wpforms-error { color: var(--ek-score-low); font-size: 0.78rem; }
.ek-lead-card__form .wpforms-confirmation-container,
.ek-score-unlock__form-slot .wpforms-confirmation-container {
	font-size: 0.9rem;
	color: var(--ek-ink);
	background: #fff;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius-sm);
	padding: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.ek-score-row__fill { transition: none; }
}