/* ── InterviewReady: Frontend Styles ─────────────────────────────────────────
   Uses CSS custom properties throughout.
   Defaults fall back to BB theme values (inherit) wherever possible.
   Override any variable via Interview Setup → Style Settings in WP Admin.

   Variable reference:
     --ir-primary          buttons, competency bar, accent colours
     --ir-task-bg          task card background
     --ir-task-border      task card border colour
     --ir-coaching-bg      coaching box background
     --ir-coaching-label   coaching box label colour
     --ir-instructions-bg  instructions block background
     --ir-font-family      all text inside .ir-wrap
     --ir-font-size        base body text size
     --ir-heading-size     competency name heading size
   ──────────────────────────────────────────────────────────────────────────── */

.ir-wrap {
	max-width: 860px;
	margin: 0 auto;
	padding: 24px 0 40px;
	font-family: var( --ir-font-family, inherit );
	font-size: var( --ir-font-size, inherit );
	color: inherit;
}

.ir-step { display: none; }
.ir-step--active { display: block; }
.ir-step-header { margin-bottom: 28px; }
.ir-step-header h2 { margin-top: 0; margin-bottom: 10px; }
.ir-step-title { font-size: 24px; }

.ir-field-group { margin-bottom: 20px; }
.ir-label { display: block; font-weight: 600; margin-bottom: 6px; }
.ir-required { color: #c0392b; }

.ir-input,
.ir-select {
	width: 100%;
	max-width: 480px;
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: var( --ir-font-size, inherit );
	font-family: var( --ir-font-family, inherit );
	line-height: 1.4;
	transition: border-color 0.15s;
}
.ir-input:focus,
.ir-select:focus {
	outline: none;
	border-color: var( --ir-primary, #1a3a5c );
}

.ir-tier-badge { color: #555; margin-bottom: 16px; }

/* Buttons */
.ir-btn {
	display: inline-block;
	padding: 11px 26px;
	border-radius: 4px;
	font-size: var( --ir-font-size, 15px );
	font-family: var( --ir-font-family, inherit );
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border: 2px solid transparent;
	transition: opacity 0.15s;
	line-height: 1;
}
.ir-btn:hover   { opacity: 0.88; }
.ir-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ir-btn--primary  { background: var( --ir-primary, #1a3a5c ); color: #fff; border-color: var( --ir-primary, #1a3a5c ); }
.ir-btn--secondary { background: #f0f0f0; color: #333; border-color: #ccc; }
.ir-btn--outline  { background: transparent; color: var( --ir-primary, #1a3a5c ); border-color: var( --ir-primary, #1a3a5c ); }

.ir-step-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.ir-error-msg { color: #c0392b; font-size: 14px; margin: 10px 0 0; display: none; }
.ir-notice    { color: #555; font-style: italic; padding: 8px 0; }
.ir-loading   { color: #666; font-style: italic; padding: 12px 0; }

.ir-membership-required { padding: 32px 24px; text-align: center; }
.ir-membership-required p { font-size: 16px; margin-bottom: 16px; }

/* Competency list */
.ir-competency-list { list-style: none; padding: 0; margin: 0 0 8px; }
.ir-comp-item {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 10px;
	transition: border-color 0.15s, background 0.15s;
}
.ir-comp-item:has( .ir-comp-chk:checked ) {
	border-color: var( --ir-primary, #1a3a5c );
	background: #f0f4f8;
}
.ir-comp-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-weight: 600;
	margin: 0;
}
.ir-comp-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }
.ir-comp-desc { margin: 6px 0 0 26px; font-size: 14px; color: #555; }

/* Task selection */
.ir-task-block-wrap {
	border-left: 3px solid var( --ir-primary, #1a3a5c );
	padding-left: 16px;
	margin-bottom: 28px;
}
.ir-task-comp-name  { margin: 0 0 6px; font-size: 17px; }
.ir-task-comp-desc  { font-size: 14px; color: #555; margin: 0 0 12px; }
.ir-task-checklist  { list-style: none; padding: 0; margin: 0; }
.ir-task-row        { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.ir-task-row:last-child { border-bottom: none; }
.ir-task-label      { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin: 0; }
.ir-task-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }

/* Result page */
.ir-result-header   { margin-bottom: 28px; }
.ir-result-position { font-size: 26px; margin: 0 0 10px; }
.ir-result-meta {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 14px;
	color: #555;
	margin-bottom: 20px;
}

.ir-instructions {
	background: var( --ir-instructions-bg, #f8f9fa );
	border-radius: 6px;
	padding: 20px 24px;
	margin-bottom: 32px;
}
.ir-instructions h3 { font-size: 16px; margin: 0 0 6px; }
.ir-instructions h3:not( :first-child ) { margin-top: 16px; }
.ir-instructions p  { margin: 0; }

.ir-competency-block { margin-bottom: 40px; }

.ir-competency-name {
	font-size: var( --ir-heading-size, 18px );
	font-family: var( --ir-font-family, inherit );
	background: var( --ir-primary, #1a3a5c );
	color: #fff;
	padding: 10px 16px;
	border-radius: 4px;
	margin: 0 0 16px;
}

.ir-task-block {
	border: 1px solid var( --ir-task-border, #e0e0e0 );
	border-radius: 6px;
	padding: 20px 22px;
	margin-bottom: 14px;
	background: var( --ir-task-bg, #fff );
}

.ir-interview-question          { margin-bottom: 14px; }
.ir-interview-question h4 {
	font-size: 13px;
	color: var( --ir-primary, #1a3a5c );
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ir-interview-question p        { margin: 0; }

.ir-followups                   { margin-bottom: 14px; }
.ir-followups h5 {
	font-size: 13px;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
}
.ir-followups ul                { margin: 0; padding-left: 20px; }
.ir-followups li                { margin-bottom: 4px; }

.ir-coaching {
	background: var( --ir-coaching-bg, #f8f9fa );
	border-radius: 4px;
	padding: 12px 16px;
	margin-bottom: 10px;
}
.ir-coaching h5 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --ir-coaching-label, #888 );
	margin: 0 0 6px;
}
.ir-coaching p { margin: 0; font-size: 14px; }

.ir-result-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
}

/* Dashboard */
.ir-dashboard-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}
.ir-dashboard-header h2 { margin: 0; }

.ir-upgrade-notice {
	background: color-mix( in srgb, var( --ir-primary, #1a3a5c ) 8%, white );
	border-left: 3px solid var( --ir-primary, #1a3a5c );
	border-radius: 0 4px 4px 0;
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #444;
}
.ir-upgrade-notice p { margin: 0; }
.ir-interview-list { list-style: none; padding: 0; margin: 0; }
.ir-interview-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	border: 1px solid var( --ir-task-border, #e0e0e0 );
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 10px;
	background: var( --ir-task-bg, #fff );
	transition: border-color 0.15s;
}
.ir-interview-item:hover { border-color: #aaa; }
.ir-interview-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	color: inherit;
	flex: 1;
}
.ir-interview-title { font-weight: 600; color: var( --ir-primary, #1a3a5c ); }
.ir-interview-meta  { font-size: 13px; color: #777; }

.ir-btn-delete {
	flex-shrink: 0;
	background: none;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 12px;
	color: #999;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}
.ir-btn-delete:hover { border-color: #c0392b; color: #c0392b; }

.ir-empty-state { text-align: center; padding: 56px 24px; color: #666; }
.ir-empty-state p { font-size: 16px; margin-bottom: 20px; }
.ir-login-prompt  { color: #555; }

/* Freemium gate */
.ir-task-locked {
	position: relative;
	min-height: 80px;
	border: 1px dashed var( --ir-task-border, #e0e0e0 );
	border-radius: 6px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --ir-task-bg, #fafafa );
}

.ir-locked-overlay {
	text-align: center;
	padding: 20px;
	color: #999;
}

.ir-lock-icon {
	display: block;
	font-size: 24px;
	margin-bottom: 6px;
}

.ir-locked-overlay p {
	margin: 0;
	font-size: 14px;
}

/* Upgrade CTA block */
.ir-upgrade-cta {
	margin: 32px 0 16px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid var( --ir-primary, #1a3a5c );
}

.ir-upgrade-cta-inner {
	padding: 32px 28px;
	text-align: center;
	background: var( --ir-task-bg, #fff );
}

.ir-upgrade-cta h3 {
	font-size: 22px;
	margin: 0 0 10px;
	color: var( --ir-primary, #1a3a5c );
}

.ir-upgrade-cta p {
	font-size: 16px;
	color: #555;
	margin: 0 0 20px;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

.ir-btn--large {
	padding: 14px 36px;
	font-size: 17px;
}

.ir-upgrade-tier {
	margin: 12px 0 0 !important;
	font-size: 13px !important;
	color: #888 !important;
}

.ir-field-note {
	font-size: 13px;
	color: #777;
	margin: 6px 0 0;
	font-style: italic;
}

/* Print */
@media print {
	.no-print,
	.ir-result-actions,
	.ir-print-actions { display: none !important; }

	.ir-wrap { padding: 0; }

	.ir-competency-name {
		background: var( --ir-primary, #1a3a5c ) !important;
		color: #fff !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.ir-task-block { break-inside: avoid; }

	.ir-coaching {
		background: var( --ir-coaching-bg, #f5f5f5 ) !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* Responsive */
@media ( max-width: 600px ) {
	.ir-step-nav         { flex-direction: column; }
	.ir-btn              { text-align: center; }
	.ir-dashboard-header { flex-direction: column; align-items: flex-start; }
	.ir-interview-item   { flex-direction: column; align-items: flex-start; }
	.ir-btn-delete       { align-self: flex-end; }
	.ir-result-meta      { flex-direction: column; gap: 4px; }
	.ir-result-actions   { flex-direction: column; }
}

/* ── Paywall, revised 2026-09-02 ─────────────────────────────────────────────
   Full breadth, gated depth: every question stem shows, the coaching layer is
   held back. The locked strip names what is behind it without leaking any of
   it — the server never writes the gated text into the page.
   Colours come from the plugin's own variables, set in Interview Setup →
   Style Settings, so this stays on one visual system with the theme.
   ───────────────────────────────────────────────────────────────────────── */

.ir-result-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 20px 0 28px;
	padding: 18px 22px;
	border-radius: 6px;
	background: var( --ir-primary, #1a3a5c );
	color: #fff;
}
.ir-result-banner__text { flex: 1 1 24rem; line-height: 1.45; }
.ir-result-banner__text strong { font-weight: 700; }

.ir-btn--onbrand {
	background: #fff;
	color: var( --ir-primary, #1a3a5c );
	border-color: #fff;
	white-space: nowrap;
}
.ir-btn--onbrand:hover,
.ir-btn--onbrand:focus { background: #f0f4fa; color: var( --ir-primary, #1a3a5c ); }

.ir-question-number {
	display: inline-block;
	margin-right: 8px;
	font-variant-numeric: tabular-nums;
	color: #98a1ad;
}

.ir-free-tag {
	display: inline-block;
	margin-top: 10px;
	padding: 4px 9px;
	border-radius: 4px;
	background: #e4f6ec;
	color: #0a7a46;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.ir-task-block--gated { padding-bottom: 0; }

.ir-locked-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 11px;
	margin-top: 16px;
	padding: 14px 18px;
	border-top: 1px solid var( --ir-task-border, #e0e0e0 );
	background: var( --ir-coaching-bg, #f8f9fa );
	border-radius: 0 0 4px 4px;
}
.ir-locked-strip__icon { display: inline-flex; flex-shrink: 0; color: #98a1ad; }
.ir-locked-strip__text { flex: 1 1 16rem; color: #737c88; line-height: 1.45; }
.ir-locked-strip__link {
	color: var( --ir-primary, #1a3a5c );
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.ir-locked-strip__link:hover { text-decoration: underline; }

@media print {
	.ir-result-banner,
	.ir-locked-strip,
	.ir-upgrade-cta { display: none; }
}

/* ── Resume bar (draft persistence) ──────────────────────────────────────── */

.ir-resume-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	padding: 14px 18px;
	border: 1px solid var( --ir-task-border, #e0e0e0 );
	border-radius: 6px;
	background: var( --ir-instructions-bg, #f8f9fa );
}
.ir-resume-bar__text { flex: 1 1 18rem; line-height: 1.45; }
.ir-btn--sm { padding: 7px 14px; font-size: 14px; }