/* Vet2Hire Certifications — frontend.css v1.0.0 */

.v2hcert-app {
	--navy: #0B1D3A;
	--blue: #1258C2;
	--gold: #E8A838;
	--green: #1E8449;        /* darkened for AAA on white */
	--ink: #11181C;
	--muted: #4A5560;
	--line: #D5DBE2;
	--bg: #F5F7FA;
	--card: #FFFFFF;
	--radius: 12px;
	font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--ink);
	max-width: 1100px;
	margin: 0 auto;
	padding: 8px 16px 48px;
	line-height: 1.55;
}

.v2hcert-app *,
.v2hcert-app *::before,
.v2hcert-app *::after { box-sizing: border-box; }

.v2hcert-loading { padding: 48px 0; text-align: center; color: var(--muted); }

.v2hcert-app h1 { font-size: 1.9rem; margin: 0 0 4px; color: var(--navy); }
.v2hcert-app h2 { font-size: 1.35rem; color: var(--navy); }
.v2hcert-app h3 { color: var(--navy); }
.v2hcert-lead { color: var(--muted); margin: 0 0 24px; max-width: 70ch; }

/* ---------- Cards / grid ---------- */
.v2hcert-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
}
.v2hcert-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.v2hcert-card h3 { margin: 0; font-size: 1.15rem; }
.v2hcert-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.v2hcert-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--muted); margin-top: auto; }
.v2hcert-meta span { display: inline-flex; align-items: center; gap: 5px; }
.v2hcert-meta svg { width: 15px; height: 15px; }

/* ---------- Badge medallion ---------- */
.v2hcert-medallion {
	width: 56px; height: 56px;
	border-radius: 50%;
	display: grid; place-items: center;
	color: #fff;
	background: var(--navy);
	flex: none;
}
.v2hcert-medallion svg { width: 30px; height: 30px; }
.v2hcert-card-head { display: flex; gap: 14px; align-items: center; }

/* ---------- Buttons (bg + text in EVERY state) ---------- */
.v2hcert-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font: inherit; font-weight: 600;
	padding: 11px 20px;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.v2hcert-btn svg { width: 18px; height: 18px; }

.v2hcert-btn-primary:link,
.v2hcert-btn-primary:visited,
button.v2hcert-btn-primary { background: var(--navy) !important; color: #FFFFFF !important; border-color: var(--navy) !important; }
.v2hcert-btn-primary:hover,
button.v2hcert-btn-primary:hover { background: #06122A !important; color: #FFFFFF !important; border-color: #06122A !important; }
.v2hcert-btn-primary:active,
button.v2hcert-btn-primary:active { background: #030B1C !important; color: #FFFFFF !important; border-color: #030B1C !important; }

.v2hcert-btn-ghost:link,
.v2hcert-btn-ghost:visited,
button.v2hcert-btn-ghost { background: #FFFFFF !important; color: var(--navy) !important; border-color: var(--navy) !important; }
.v2hcert-btn-ghost:hover,
.v2hcert-btn-ghost:focus-visible,
button.v2hcert-btn-ghost:hover,
button.v2hcert-btn-ghost:focus-visible { background: var(--navy) !important; color: #FFFFFF !important; border-color: var(--navy) !important; }
.v2hcert-btn-ghost:active,
button.v2hcert-btn-ghost:active { background: #06122A !important; color: #FFFFFF !important; border-color: #06122A !important; }

.v2hcert-btn-danger,
button.v2hcert-btn-danger { background: #FFFFFF !important; color: #8E1B1B !important; border-color: #8E1B1B !important; }
.v2hcert-btn-danger:hover,
button.v2hcert-btn-danger:hover { background: #8E1B1B !important; color: #FFFFFF !important; border-color: #8E1B1B !important; }
.v2hcert-btn-danger:active,
button.v2hcert-btn-danger:active { background: #6E1414 !important; color: #FFFFFF !important; border-color: #6E1414 !important; }

.v2hcert-btn[disabled] { background: #E3E7EC !important; color: #6B7680 !important; border-color: #E3E7EC !important; cursor: not-allowed; }

/* ---------- Course player ---------- */
.v2hcert-player { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.v2hcert-sidebar { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 16px; }
.v2hcert-modnav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.v2hcert-modnav button {
	width: 100%; text-align: left; font: inherit;
	padding: 10px 12px; border-radius: 8px; border: 1px solid transparent;
	background: #FFFFFF; color: var(--ink); cursor: pointer;
	display: flex; align-items: center; gap: 9px;
}
.v2hcert-modnav button:hover { background: #EEF2F8; color: var(--navy); }
.v2hcert-modnav button[aria-current="true"] { background: var(--navy); color: #FFFFFF; }
.v2hcert-modnav .v2hcert-check { width: 18px; height: 18px; flex: none; color: var(--green); }
.v2hcert-modnav button[aria-current="true"] .v2hcert-check { color: #7BE8A4; }

.v2hcert-content { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.v2hcert-content h3 { margin-top: 0; }
.v2hcert-content ul { padding-left: 20px; }
.v2hcert-content li { margin-bottom: 6px; }

/* ---------- Video ---------- */
.v2hcert-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 20px; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.v2hcert-video iframe, .v2hcert-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Interactive lesson blocks ---------- */
.v2hcert-ix-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.v2hcert-btn-sm { padding: 5px 10px; font-size: .82rem; }

/* Flip card */
.v2hcert-flip { perspective: 1200px; margin: 18px 0; cursor: pointer; min-height: 132px; }
.v2hcert-flip-inner { position: relative; width: 100%; min-height: 132px; transition: transform .5s; transform-style: preserve-3d; }
.v2hcert-flip.is-flipped .v2hcert-flip-inner { transform: rotateY(180deg); }
.v2hcert-flip-face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; border-radius: 12px; border: 1px solid var(--line); overflow: auto; }
.v2hcert-flip-front { background: var(--navy); color: #FFFFFF; font-weight: 600; }
.v2hcert-flip-front::after { content: "Tap to flip"; position: absolute; bottom: 8px; right: 12px; font-size: .7rem; font-weight: 400; color: var(--gold); }
.v2hcert-flip-back { background: #FFFFFF; color: var(--ink); transform: rotateY(180deg); }
.v2hcert-flip:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Accordion (native details) */
.v2hcert-acc { border: 1px solid var(--line); border-radius: 10px; margin: 14px 0; background: #FFFFFF; }
.v2hcert-acc > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; color: var(--navy); list-style: none; display: flex; align-items: center; gap: 10px; }
.v2hcert-acc > summary::-webkit-details-marker { display: none; }
.v2hcert-acc > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); transition: transform .2s; flex: none; }
.v2hcert-acc[open] > summary::before { transform: rotate(45deg); }
.v2hcert-acc > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.v2hcert-acc > *:not(summary) { padding: 0 16px 14px; margin: 0; color: var(--ink); }

/* Knowledge check, scenario, reflection shells */
.v2hcert-check, .v2hcert-scenario, .v2hcert-reflect { border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 10px; background: #FFFFFF; padding: 16px 18px; margin: 18px 0; }
.v2hcert-ix-q { font-weight: 600; color: var(--navy); margin: 0 0 12px; display: block; }
.v2hcert-ix-opts, .v2hcert-scn-opts { display: flex; flex-direction: column; gap: 8px; }
.v2hcert-ix-opt, .v2hcert-scn-opt { text-align: left; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; color: var(--ink); cursor: pointer; font: inherit; }
.v2hcert-ix-opt:hover, .v2hcert-scn-opt:hover { border-color: var(--blue); background: #F2F6FD; color: var(--ink); }
.v2hcert-ix-opt:disabled { cursor: default; }
.v2hcert-ix-opt.is-correct, .v2hcert-scn-opt.is-best { border-color: var(--green); background: #E7F5EC; color: #0B3D24; font-weight: 600; }
.v2hcert-ix-opt.is-wrong { border-color: #B42318; background: #FCEBEA; color: #7A1A12; }
.v2hcert-scn-opt.is-other { border-color: var(--line); background: var(--bg); color: var(--muted); }
.v2hcert-ix-fb { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: .95rem; display: flex; gap: 8px; align-items: flex-start; }
.v2hcert-ix-fb svg { width: 18px; height: 18px; flex: none; }
.v2hcert-ix-fb.is-correct { background: #E7F5EC; color: #0B3D24; }
.v2hcert-ix-fb.is-wrong { background: #FCEBEA; color: #7A1A12; }
.v2hcert-ix-fb.is-note { background: #FBF1DC; color: #6B4E12; }

/* Reflection */
.v2hcert-reflect-ta { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: inherit; color: var(--ink); resize: vertical; }
.v2hcert-reflect-ta:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--blue); }
.v2hcert-reflect-status { font-size: .8rem; color: var(--green); margin-top: 6px; min-height: 1em; }

/* ---------- Quiz ---------- */
.v2hcert-q { border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.v2hcert-q-prompt { font-weight: 600; margin: 0 0 12px; }
.v2hcert-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
.v2hcert-opt:hover { border-color: var(--blue); background: #F0F5FF; }
.v2hcert-opt input { margin-top: 3px; }
.v2hcert-opt.is-correct { border-color: var(--green); background: #EAF6EF; }
.v2hcert-opt.is-wrong { border-color: #8E1B1B; background: #FBECEC; }
.v2hcert-explain { font-size: .9rem; color: var(--muted); margin: 6px 0 0; padding-left: 2px; }

.v2hcert-result { border-radius: 10px; padding: 18px; margin-bottom: 18px; border: 1px solid var(--line); }
.v2hcert-result.pass { background: #EAF6EF; border-color: var(--green); }
.v2hcert-result.fail { background: #FBECEC; border-color: #8E1B1B; }
.v2hcert-result strong { font-size: 1.2rem; }

/* ---------- Progress bar ---------- */
.v2hcert-progress { background: #E3E7EC; border-radius: 999px; height: 10px; overflow: hidden; }
.v2hcert-progress > span { display: block; height: 100%; background: var(--green); }

/* ---------- Certificate ---------- */
.v2hcert-certificate {
	border: 3px solid var(--gold);
	border-radius: var(--radius);
	background: linear-gradient(180deg, #FFFFFF, #FBFAF5);
	padding: 36px;
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}
.v2hcert-certificate .v2hcert-medallion { margin: 0 auto 14px; width: 72px; height: 72px; background: var(--gold); color: var(--navy); }
.v2hcert-certificate .v2hcert-medallion svg { width: 40px; height: 40px; }
.v2hcert-certificate h2 { margin: 0 0 4px; }
.v2hcert-cert-name { font-family: 'DM Serif Display', Georgia, serif; font-size: 2rem; color: var(--navy); margin: 14px 0; }
.v2hcert-cert-no { font-family: monospace; color: var(--muted); letter-spacing: .04em; }

/* ---------- Pills / chips ---------- */
.v2hcert-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.v2hcert-pill.done { background: #EAF6EF; color: #155D33; }
.v2hcert-pill.prog { background: #FEF6E6; color: #8A5A00; }

.v2hcert-profile-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.v2hcert-badge-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--chip, var(--navy)); color: var(--navy); font-size: .8rem; font-weight: 600; }
.v2hcert-badge-chip svg { width: 16px; height: 16px; color: var(--chip, var(--navy)); }

/* ---------- Modal ---------- */
.v2hcert-modal-overlay { position: fixed !important; inset: 0; background: rgba(11,29,58,.55); display: grid !important; place-items: center; padding: 20px; z-index: 99999; }
.v2hcert-modal { background: #FFFFFF !important; border-radius: var(--radius); width: min(680px, 100%); max-height: 88vh; overflow: hidden; display: flex !important; flex-direction: column !important; }
.v2hcert-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.v2hcert-modal-head h2 { margin: 0; font-size: 1.2rem; }
.v2hcert-modal-body { padding: 22px; overflow-y: auto; }
.v2hcert-modal-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.v2hcert-modal-foot .v2hcert-btn { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
.v2hcert-close { background: #FFFFFF; color: var(--navy); border: 1px solid var(--line); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; display: grid; place-items: center; }
.v2hcert-close:hover { background: var(--navy); color: #FFFFFF; }

/* Insert-block buttons: high contrast in every state, no color inversion */
.v2hcert-ix-tools .v2hcert-btn { background: #EEF2F8 !important; color: var(--navy) !important; border-color: var(--navy) !important; }
.v2hcert-ix-tools .v2hcert-btn:hover,
.v2hcert-ix-tools .v2hcert-btn:focus-visible { background: #DCE4F0 !important; color: var(--navy) !important; border-color: #06122A !important; }

.v2hcert-field { margin-bottom: 16px; }
.v2hcert-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.v2hcert-field input[type="text"],
.v2hcert-field input[type="url"],
.v2hcert-field input[type="number"],
.v2hcert-field select,
.v2hcert-field textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink);
}
.v2hcert-field textarea { min-height: 120px; resize: vertical; }

/* ---------- Admin table ---------- */
.v2hcert-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.v2hcert-table th, .v2hcert-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.v2hcert-table th { background: var(--navy); color: #FFFFFF; font-size: .85rem; }
.v2hcert-table tr:last-child td { border-bottom: 0; }

.v2hcert-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 26px; }
.v2hcert-stat { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius); padding: 18px; }
.v2hcert-stat .num { font-size: 2rem; font-weight: 700; color: var(--navy); }
.v2hcert-stat .lbl { color: var(--muted); font-size: .85rem; }

.v2hcert-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0; flex-wrap: wrap; }
.v2hcert-empty { text-align: center; color: var(--muted); padding: 40px 0; }
.v2hcert-row-actions { display: flex; gap: 8px; }
.v2hcert-row-actions .v2hcert-btn { padding: 6px 12px; font-size: .85rem; }

.v2hcert-back { background: none; border: 0; color: var(--blue); font: inherit; cursor: pointer; padding: 0; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 6px; }
.v2hcert-back:hover { color: var(--navy); text-decoration: underline; }

@media (max-width: 780px) {
	.v2hcert-player { grid-template-columns: 1fr; }
	.v2hcert-sidebar { position: static; }
}

/* ---------- Visual editor (admin) ---------- */
.v2hcert-rte { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #FFFFFF; }
.v2hcert-rte-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px; background: var(--bg); border-bottom: 1px solid var(--line); }
.v2hcert-rte-btn { font: inherit; font-size: .82rem; font-weight: 600; line-height: 1; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: #FFFFFF !important; color: var(--navy) !important; cursor: pointer; }
.v2hcert-rte-btn:hover, .v2hcert-rte-btn:focus-visible { background: var(--navy) !important; color: #FFFFFF !important; border-color: var(--navy) !important; }
.v2hcert-rte-btn.is-insert { background: #EEF2F8 !important; color: var(--navy) !important; border-color: var(--navy) !important; }
.v2hcert-rte-btn.is-insert:hover, .v2hcert-rte-btn.is-insert:focus-visible { background: #DCE4F0 !important; color: var(--navy) !important; }
.v2hcert-rte-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.v2hcert-rte-area { min-height: 180px; max-height: 360px; overflow-y: auto; padding: 14px 16px; color: var(--ink); line-height: 1.55; }
.v2hcert-rte-area:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.v2hcert-rte-area h3 { margin: .6em 0 .3em; color: var(--navy); }
.v2hcert-rte-area p { margin: .5em 0; }
.v2hcert-rte-area ul, .v2hcert-rte-area ol { padding-left: 1.4em; margin: .5em 0; }
.v2hcert-rte-area:empty::before { content: "Type your lesson here. Use the buttons above to format text or insert interactive blocks."; color: var(--muted); }

.v2hcert-blockchip { display: flex; align-items: center; gap: 8px; background: #EEF2F8; border: 1px solid var(--navy); border-left: 4px solid var(--blue); border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: .85rem; color: var(--navy); user-select: none; }
.v2hcert-blockchip-tag { font-weight: 700; white-space: nowrap; }
.v2hcert-blockchip-prev { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.v2hcert-blockchip-x { margin-left: auto; background: #FFFFFF !important; color: var(--navy) !important; border: 1px solid var(--navy); border-radius: 6px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.v2hcert-blockchip-x:hover { background: #8E1B1B !important; color: #FFFFFF !important; border-color: #8E1B1B; }
.v2hcert-blockchip-x svg { width: 14px; height: 14px; }