/* =========================================================================
   APA Tools Page — Stylesheet (v4, custom palette)
   ========================================================================= */

/* @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap'); */

:root {
	/* ---- Your palette ---- */
	--apa-green:      #0a5c36;
	--apa-navy:       #1a3a6b;
	--apa-gray:       #858585;
	--apa-gold:       #d4af37;
	--apa-gold-alt:   #c9a227;
	--apa-charcoal:   #3a3a3a;
	--apa-light-gray: #f5f5f5;
	--apa-white:      #ffffff;

	/* ---- Semantic aliases used throughout ---- */
	--apa-ink:         var(--apa-charcoal);
	--apa-ink-soft:    var(--apa-gray);
	--apa-paper:       var(--apa-white);
	--apa-sage:        var(--apa-light-gray);
	--apa-line:        #e2e2e2;

	/* --apa-font-display: 'Fraunces', Georgia, serif; */
	/* --apa-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif; */
	--apa-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

	--apa-radius: 6px;
	--apa-max-width: 1180px;
}

.apa-tools-page {
	background: var(--apa-paper);
	color: var(--apa-ink);
	/* font-family: var(--apa-font-body); */
	line-height: 1.55;
	margin: auto;
}

.apa-tools-page *   { box-sizing: border-box; }
.apa-tools-page a   { color: inherit; }

.apa-tools-page > section {
	max-width: var(--apa-max-width);
	margin-inline: auto;
	padding: 0 1.5rem;
	margin: 28px 0px;
}

/* shared rounded number badge (gold square) */
.apa-badge-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--apa-font-mono);
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--apa-charcoal);
	background: var(--apa-gold);
	border-radius: 5px;
	padding: 0.25rem 0.55rem;
	line-height: 1.2;
}

/* ============ PAGE INTRO (plain background) ============ */
.apa-page-intro {
	padding-top: 2.5rem;
	padding-bottom: 1.5rem;
}

.apa-page-intro-heading {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.9rem;
	padding-bottom: 1.1rem;
	border-bottom: 2px solid var(--apa-gold);
}

.apa-page-intro-heading .apa-badge-number { font-size: 1.5rem; padding: 0.35rem 0.7rem; font-weight: 800; color: var(--apa-charcoal);}

.apa-page-intro h1 {
	/* font-family: var(--apa-font-display); */
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	color: var(--apa-green);
	margin: 0;
}

.apa-page-intro-sub {
	color: var(--apa-ink-soft);
	font-size: 0.95rem;
	/* max-width: 100ch; */
	margin: 0 0 0.85rem;
}

/* ---- Flow line: "Business challenge" green, rest grey (per spec) ---- */
.apa-flow {
	font-family: var(--apa-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--apa-gray);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

.apa-flow-highlight { color: var(--apa-green) !important; }
.apa-flow span { color: var(--apa-gray); font-weight: 600; text-transform: none; }

/* ============ APA NAVIGATOR (dark green→navy gradient panel) ============ */
.apa-navigator-wrap { padding-top: 1rem; padding-bottom: 1.5rem; }

.apa-navigator-panel {
	background: linear-gradient(155deg, var(--apa-green), var(--apa-navy));
	border-radius: var(--apa-radius);
	padding: 2rem 2.25rem;
	color: var(--apa-white);
}

.apa-navigator-label {
	display: inline-block;
	font-family: var(--apa-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--apa-gold);
	border: 1px solid var(--apa-gold);
	border-radius: 5px;
	padding: 0.3rem 0.7rem;
	margin-bottom: 1.25rem;
}

.apa-navigator-sub {
	/* font-family: var(--apa-font-display); */
	font-style: italic;
	font-size: 1.15rem;
	color: var(--apa-white);
	max-width: 60ch;
	margin: 0 0 1.5rem;
}

.apa-navigator-question-label {
	font-family: var(--apa-font-mono);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--apa-gold);
	margin: 0 0 1rem;
}

/* ---- Priority pills: hover changes ONLY background colour, per spec ---- */
.apa-priority-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.apa-priority-list li {
	font-size: 0.88rem;
	font-weight: 600;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.25);
	color: var(--apa-white);
	border-radius: 100px;
	padding: 0.6rem 1.3rem;
	transition: background-color 0.15s ease;
	cursor: default;
}

.apa-priority-list li:hover {
	background: none; /* gold tint, background-only change */
}

/* ============ SECTION JUMP (plain background, pill buttons) ============ */
.apa-below-nav { padding-top: 0.25rem; padding-bottom: 2rem; }

.apa-section-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

/* Distinct hover treatment #1: jump nav -> gold fill */
.apa-section-jump a {
	/* font-family: var(--apa-font-body); */
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--apa-navy);
	background: var(--apa-paper);
	border: 1px solid var(--apa-line);
	border-radius: 100px;
	padding: 0.55rem 1rem;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.apa-section-jump a:hover,
.apa-section-jump a:focus-visible {
	/* background: var(--apa-gold); */
	border-color: var(--apa-green);
	color: var(--apa-green);
}

/* ============ CATEGORY SECTIONS ============ */
.apa-tool-category { padding-top: 0.5rem; padding-bottom: 2.5rem; scroll-margin-top: 1.5rem; }

.apa-category-header {
	background: var(--apa-sage);
	border-radius: var(--apa-radius);
	padding: 1.75rem 2rem;
	margin-bottom: 1.75rem;
}

.apa-category-header-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}

.apa-category-title {
	/* font-family: var(--apa-font-display); */
	font-size: clamp(1.15rem, 2.2vw, 1.3rem);
	font-weight: 700;
	color: var(--apa-green);
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.apa-tool-count {
	/* font-family: var(--apa-font-body); */
	font-size: 0.82rem;
	color: var(--apa-ink-soft);
	white-space: nowrap;
}

.apa-category-question {
	/* font-family: var(--apa-font-display); */
	font-style: italic;
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--apa-navy);
	margin: 0 0 1.5rem;
}

.apa-category-meta-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem 2rem;
	margin-bottom: 1.5rem;
}

.apa-category-meta-grid span {
	display: block;
	font-family: var(--apa-font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--apa-ink-soft);
	margin-bottom: 0.3rem;
}

.apa-category-meta-grid p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--apa-ink);
}

.apa-category-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin: 0;
}

/* Distinct hover treatment #2: category (Journey/Certification) links -> navy fill */
.apa-category-links a {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--apa-green);
	background: var(--apa-paper);
	border: 1px solid var(--apa-line);
	border-radius: 100px;
	padding: 0.45rem 1.1rem;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.apa-category-links a:hover,
.apa-category-links a:focus-visible {
	/* background: var(--apa-navy); */
	border-color: var(--apa-navy);
	color: var(--apa-navy);
}

/* ============ TOOL CARDS ============ */
.apa-tool-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}

@media (min-width: 900px) {
	.apa-tool-grid { grid-template-columns: repeat(3, 1fr); }
}

.apa-tool-card {
	background: var(--apa-paper);
	border: 1px solid var(--apa-line);
	border-radius: var(--apa-radius);
	padding: 1.35rem;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.apa-tool-card:hover {
	/* border-color: var(--apa-gold); */
	transform: translateY(-2px);
}

.apa-tool-eyebrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.apa-tool-number {
	font-family: var(--apa-font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--apa-ink-soft);
}

.apa-tool-type {
	/* font-family: var(--apa-font-body); */
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--apa-white);
	border-radius: 4px;
	padding: 0.2rem 0.55rem;
}

/* ---- Tool type badge colours, per spec ----*/
.apa-tool-type[data-type="guide"]            { background: #1c3d5a; }
.apa-tool-type[data-type="form"]            { background: #0b5c3e; }
.apa-tool-type[data-type="matrix"]          { background: #0b5c3e; }
.apa-tool-type[data-type="legal-instrument"]{ background: #a9822f; }
.apa-type-default          { background: var(--apa-gray); }

.apa-tool-card h3 {
	/* font-family: var(--apa-font-display); */
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.6rem;
	line-height: 1.3;
}

/* Distinct hover treatment #3: tool title link -> gold text */
.apa-tool-card h3 a {
	color: var(--apa-navy);
	text-decoration: none;
	transition: color 0.15s ease;
}

/* .apa-tool-card h3 a:hover,
.apa-tool-card h3 a:focus-visible { color: var(--apa-gold-alt); } */

.apa-ai-badge {
	align-self: flex-start;
	/* font-family: var(--apa-font-body); */
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--apa-charcoal);
	background: var(--apa-gold);
	border: 1px solid var(--apa-gold);
	border-radius: 100px;
	padding: 0.2rem 0.65rem;
	margin-bottom: 0.85rem;
}

.apa-tool-description {
	font-size: 0.85rem;
	color: var(--apa-ink-soft);
	margin-bottom: 1rem;
}

.apa-tool-description p { margin: 0; }

.apa-tool-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1rem;
	font-size: 0.78rem;
	color: var(--apa-ink);
	margin: 0 0 1.1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--apa-line);
}

.apa-tool-details dt {
	display: inline;
	font-weight: 600;
	color: var(--apa-ink-soft);
	margin: 0;
}

/* Distinct hover treatment #4: Launch tool button -> darker green fill */
.apa-tool-launch {
	margin-top: auto;
	display: block;
	text-align: center;
	background: var(--apa-green);
	color: var(--apa-white) !important;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--apa-radius);
	padding: 0.65rem 1rem;
	transition: background-color 0.15s ease;
}

.apa-tool-launch:hover,
.apa-tool-launch:focus-visible { background: #61ce70; } /* darker shade of --apa-green */

/* ============ SIGN-IN MODAL ============ */
.apa-modal[hidden] { display: none; }

.apa-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.apa-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 92, 54, 0.55);
}

.apa-modal-content {
	position: relative;
	background: var(--apa-paper);
	border-radius: var(--apa-radius);
	padding: 2rem 2.25rem;
	max-width: 380px;
	width: calc(100% - 2rem);
	text-align: center;
	box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.apa-modal-content h3 {
	/* font-family: var(--apa-font-display); */
	font-size: 1.25rem;
	color: var(--apa-green);
	margin: 0 0 0.6rem;
}

.apa-modal-content p {
	font-size: 0.9rem;
	color: var(--apa-ink-soft);
	margin: 0 0 1.5rem;
}

/* Distinct hover treatment #5: modal sign-in button -> darker green fill */
.apa-modal-signin {
	display: inline-block;
	background: var(--apa-green);
	color: var(--apa-white) !important;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	border-radius: var(--apa-radius);
	padding: 0.7rem 1.75rem;
	transition: background-color 0.15s ease;
}

.apa-modal-signin:hover,
.apa-modal-signin:focus-visible { background: #073f26; }

.apa-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.9rem;
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--apa-ink-soft);
	cursor: pointer;
	padding: 0.25rem;
	transition: color 0.15s ease;
}

.apa-modal-close:hover { color: var(--apa-ink); }

/* ============ RESPONSIVE ============ */
@media (max-width: 640px) {
	.apa-navigator-panel { padding: 1.5rem 1.25rem; }
	.apa-category-header { padding: 1.25rem 1.25rem; }
	.apa-category-meta-grid { grid-template-columns: 1fr; }
	.apa-tool-grid { grid-template-columns: 1fr; }
	.apa-category-header-top { flex-direction: column; align-items: flex-start; }
}

/* ============ ACCESSIBILITY ============ */
.apa-tools-page a:focus-visible,
.apa-tools-page button:focus-visible {
	outline: 2px solid var(--apa-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.apa-tools-page * { transition: none !important; }
}