/**
 * YFJ Design System — shared tokens and base typography.
 * Loaded on every page where any YFJ component renders.
 *
 * Font: Roboto (enqueued from yfj-custom.php)
 */

:root {
	/* Brand */
	--yfj-navy:        #1B2E5E;
	--yfj-navy-700:    #24396F;
	--yfj-orange:      #E8521A;
	--yfj-orange-600:  #D14614;
	--yfj-orange-50:   #FFF4EE;

	/* Neutrals */
	--yfj-ink:         #1E293B;
	--yfj-body:        #334155;
	--yfj-muted:       #64748B;
	--yfj-line:        #E2E8F0;
	--yfj-line-soft:   #EDF1F7;
	--yfj-surface:     #FFFFFF;
	--yfj-surface-alt: #F8FAFC;

	/* Killarney band colours — match the approved report design */
	--yfj-band-a:      #1D5F7F;
	--yfj-band-a-bg:   #E8EFF2;
	--yfj-band-b:      #E8752F;
	--yfj-band-b-bg:   #FDF0E9;
	--yfj-band-c:      #4CA32C;
	--yfj-band-c-bg:   #EDF7EA;
	--yfj-band-d:      #D96FD1;
	--yfj-band-d-bg:   #FBF0FB;
	--yfj-band-e:      #1D5F7F;
	--yfj-band-e-bg:   #E8EFF2;

	/* Feedback */
	--yfj-success:     #1A7A3C;
	--yfj-success-bg:  #F0FFF4;
	--yfj-warn:        #B45309;
	--yfj-warn-bg:     #FFFBEB;
	--yfj-danger:      #DC2626;
	--yfj-danger-bg:   #FEF2F2;

	/* Shape */
	--yfj-radius-sm:   8px;
	--yfj-radius:      12px;
	--yfj-radius-lg:   16px;
	--yfj-shadow:      0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
	--yfj-shadow-md:   0 4px 12px rgba(15, 23, 42, .08);

	/* Rhythm */
	--yfj-gap-xs:      8px;
	--yfj-gap-sm:      12px;
	--yfj-gap:         20px;
	--yfj-gap-lg:      32px;
	--yfj-gap-xl:      48px;
}

/* ── Global typography ──────────────────────────────────────────────────
   Scoped to YFJ components so we never fight the Elementor theme globally,
   but applied to every element inside so nothing inherits a stray font.    */

[class^="yfj-"],
[class*=" yfj-"],
[class^="yfj-"] *,
[class*=" yfj-"] * {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

[class^="yfj-"],
[class*=" yfj-"] {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--yfj-body);
	box-sizing: border-box;
}

[class^="yfj-"] *,
[class*=" yfj-"] * {
	box-sizing: border-box;
}

/* Headings inside YFJ components */
.yfj-h1, .yfj-h2, .yfj-h3, .yfj-h4 {
	color: var(--yfj-navy);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 var(--yfj-gap-sm);
	letter-spacing: -0.01em;
}

.yfj-h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.yfj-h2 { font-size: clamp(22px, 3vw, 30px); }
.yfj-h3 { font-size: clamp(18px, 2.4vw, 22px); }
.yfj-h4 { font-size: 16px; }

.yfj-lede {
	font-size: clamp(15px, 1.8vw, 18px);
	line-height: 1.65;
	color: var(--yfj-muted);
	margin: 0 0 var(--yfj-gap);
}

.yfj-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--yfj-orange);
	margin: 0 0 var(--yfj-gap-xs);
}

.yfj-hint {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: var(--yfj-muted);
	margin-top: 5px;
}

/* ── Buttons — one consistent system everywhere ─────────────────────────── */

.yfj-btn,
button.yfj-btn,
a.yfj-btn,
input[type="submit"].yfj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	min-height: 48px;
	background: var(--yfj-orange);
	color: #fff !important;
	border: 1px solid var(--yfj-orange);
	border-radius: var(--yfj-radius-sm);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.yfj-btn:hover:not(:disabled) {
	background: var(--yfj-orange-600);
	border-color: var(--yfj-orange-600);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: var(--yfj-shadow-md);
}

.yfj-btn:active:not(:disabled) { transform: translateY(0); }

.yfj-btn:focus-visible {
	outline: 3px solid rgba(232, 82, 26, .35);
	outline-offset: 2px;
}

.yfj-btn:disabled,
.yfj-btn[disabled] {
	background: #CBD5E1;
	border-color: #CBD5E1;
	color: #fff !important;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Variants */
.yfj-btn-secondary {
	background: var(--yfj-navy);
	border-color: var(--yfj-navy);
}
.yfj-btn-secondary:hover:not(:disabled) {
	background: var(--yfj-navy-700);
	border-color: var(--yfj-navy-700);
}

.yfj-btn-ghost {
	background: transparent;
	color: var(--yfj-orange) !important;
	border-color: var(--yfj-orange);
}
.yfj-btn-ghost:hover:not(:disabled) {
	background: var(--yfj-orange-50);
	color: var(--yfj-orange-600) !important;
	box-shadow: none;
}

.yfj-btn-quiet {
	background: transparent;
	color: var(--yfj-muted) !important;
	border-color: var(--yfj-line);
}
.yfj-btn-quiet:hover:not(:disabled) {
	background: var(--yfj-surface-alt);
	color: var(--yfj-navy) !important;
	border-color: #CBD5E1;
	box-shadow: none;
}

.yfj-btn-sm  { padding: 10px 20px; min-height: 40px; font-size: 14px; }
.yfj-btn-lg  { padding: 17px 40px; min-height: 56px; font-size: 17px; }
.yfj-btn-block { width: 100%; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.yfj-card {
	background: var(--yfj-surface);
	border: 1px solid var(--yfj-line);
	border-radius: var(--yfj-radius);
	box-shadow: var(--yfj-shadow);
}

.yfj-card-pad { padding: clamp(20px, 3vw, 28px); }

/* ── Notices ────────────────────────────────────────────────────────────── */

.yfj-notice {
	padding: 18px 22px;
	background: var(--yfj-orange-50);
	border-left: 4px solid var(--yfj-orange);
	border-radius: 0 var(--yfj-radius-sm) var(--yfj-radius-sm) 0;
	font-size: 15px;
	line-height: 1.6;
	color: #7C2D12;
	margin: 0 0 var(--yfj-gap);
}

.yfj-notice-success { background: var(--yfj-success-bg); border-left-color: var(--yfj-success); color: #0A3D1F; }
.yfj-notice-warn    { background: var(--yfj-warn-bg);    border-left-color: var(--yfj-warn);    color: #78350F; }
.yfj-notice-info    { background: #EEF2FF;               border-left-color: var(--yfj-navy);    color: var(--yfj-navy); }

/* ── Badges ─────────────────────────────────────────────────────────────── */

.yfj-badge {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.4;
}

.yfj-badge-amber   { background: #FEF3C7; color: #92400E; }
.yfj-badge-green   { background: #D1FAE5; color: #065F46; }
.yfj-badge-grey    { background: #F1F5F9; color: #475569; }
.yfj-badge-blue    { background: #DBEAFE; color: #1E40AF; }
.yfj-badge-orange  { background: var(--yfj-orange-50); color: var(--yfj-orange-600); }

/* ── Form controls ──────────────────────────────────────────────────────── */

.yfj-field { margin-bottom: var(--yfj-gap); }

.yfj-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--yfj-navy);
	margin-bottom: 7px;
}

.yfj-input,
.yfj-select,
.yfj-textarea {
	width: 100%;
	padding: 12px 14px;
	min-height: 46px;
	border: 1px solid var(--yfj-line);
	border-radius: var(--yfj-radius-sm);
	font-size: 15px;
	font-family: inherit;
	color: var(--yfj-ink);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.yfj-input:focus,
.yfj-select:focus,
.yfj-textarea:focus {
	outline: none;
	border-color: var(--yfj-orange);
	box-shadow: 0 0 0 3px rgba(232, 82, 26, .12);
}

/* ── Utilities ──────────────────────────────────────────────────────────── */

.yfj-wrap      { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.yfj-wrap-md   { max-width: 900px;  margin: 0 auto; padding: 0 20px; }
.yfj-wrap-sm   { max-width: 680px;  margin: 0 auto; padding: 0 20px; }
.yfj-center    { text-align: center; }
.yfj-mono      { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; font-weight: 600; }
.yfj-sr-only   { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	[class^="yfj-"], [class*=" yfj-"],
	[class^="yfj-"] *, [class*=" yfj-"] * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}