/*
 * Care Learner Dashboard – Hub Template
 * Loaded alongside dashboard.css only when the Hub template is active.
 * Uses and extends the --cldi-* variables already defined in dashboard.css.
 * All hub-specific layout is scoped under .cldi-hub.
 */

/* ============================================================
   HUB WRAPPER
   .cldi-hub is added alongside .cldi-dashboard so all existing
   widget card / section styles from dashboard.css still apply.
   We reset the outer box-model here.
============================================================ */
.cldi-hub.cldi-dashboard {
	max-width: 100%;
	padding: 0;
	background: #f4f7fa;
}

/* Pull the hub flush to the top of the content area — removes any
   vertical padding Kadence or the theme adds above the shortcode. */
.entry-content > .cldi-hub,
.wp-block-post-content > .cldi-hub,
.content-area .cldi-hub,
main > .cldi-hub {
	margin-top: -28px;
}

/* ============================================================
   HERO STRIP
============================================================ */
.cldi-hub__hero {
	background: linear-gradient(135deg, var(--cldi-accent) 0%, var(--cldi-accent-bright) 100%);
	padding: 22px 28px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.cldi-hub__hero-left {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1;
	min-width: 220px;
}

.cldi-hub__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	border: 2px solid rgba(255, 255, 255, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Poppins", "DM Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #fff;
	flex-shrink: 0;
	text-transform: uppercase;
}

.cldi-hub__greeting {
	color: #fff;
}

.cldi-hub__greeting-time {
	font-size: 12px;
	opacity: 0.82;
	margin-bottom: 2px;
}

.cldi-hub__greeting h2 {
	font-family: "Poppins", "DM Sans", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 3px;
	line-height: 1.2;
}

.cldi-hub__greeting p {
	font-size: 13px;
	opacity: 0.82;
	margin: 0;
}

.cldi-hub__hero-stats {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cldi-hub__hero-stat {
	background: rgba(255, 255, 255, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 8px;
	padding: 10px 18px;
	text-align: center;
	min-width: 80px;
}

.cldi-hub__hero-stat-num {
	display: block;
	font-family: "Poppins", "DM Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: #fff;
	line-height: 1;
}

.cldi-hub__hero-stat-lbl {
	display: block;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.88);
	margin-top: 3px;
	letter-spacing: 0.1px;
}

.cldi-hub__hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--cldi-pink);
	color: #fff;
	border-radius: 8px;
	padding: 11px 20px;
	font-family: "Poppins", "DM Sans", system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	margin-left: auto;
}

.cldi-hub__hero-cta:hover,
.cldi-hub__hero-cta:focus {
	background: #c10f60;
	color: #fff;
	text-decoration: none;
}

.cldi-hub__hero-cta svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* ============================================================
   BODY: SIDEBAR + MAIN
============================================================ */
.cldi-hub__body {
	display: flex;
	align-items: flex-start;
	min-height: 400px;
	background: #f4f7fa;
}

/* ============================================================
   SIDEBAR
============================================================ */
.cldi-hub__sidebar {
	width: 300px;
	flex-shrink: 0;
	background: #fff;
	border-right: 1px solid var(--cldi-line);
	position: sticky;
	top: 0;
	max-height: 100vh;
	overflow-y: auto;
	padding: 10px 0 20px;
}

.cldi-hub__sidebar-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--cldi-accent);
	padding: 8px 18px 4px;
	opacity: 0.8;
}

.cldi-hub__sidebar-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--cldi-ink);
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background 0.12s ease, border-color 0.12s ease;
}

.cldi-hub__sidebar-link:hover {
	background: #f0f8fa;
	color: var(--cldi-accent);
	text-decoration: none;
}

.cldi-hub__sidebar-link.is-active {
	background: rgba(0, 175, 185, 0.09);
	border-left-color: var(--cldi-accent-bright);
	color: var(--cldi-accent);
	font-weight: 600;
}

.cldi-hub__sidebar-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	opacity: 0.75;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cldi-hub__sidebar-link.is-active .cldi-hub__sidebar-icon {
	opacity: 1;
}

.cldi-hub__sidebar .cldi-hub__sidebar-divider {
	border: none;
	border-top: 1px solid var(--cldi-line);
	margin: 4px 14px 2px;
}

.cldi-hub__sidebar-divider + .cldi-hub__sidebar-label {
	padding-top: 5px;
}

.cldi-hub__signup {
	background: #f8fcfd;
	border: 1px solid var(--cldi-line);
	border-left: 3px solid var(--cldi-accent);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(0, 125, 163, 0.06);
	color: var(--cldi-ink);
	overflow: hidden;
}

.cldi-hub__signup--sidebar {
	margin: 14px 14px 0;
	padding: 12px;
}

.cldi-hub__signup--mobile {
	display: none;
	margin: 0 0 14px;
	padding: 14px;
}

.cldi-hub__signup-kicker {
	color: var(--cldi-accent);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2;
	margin: 0 0 5px;
	text-transform: uppercase;
}

.cldi-hub__signup h2 {
	font-family: "Poppins", "DM Sans", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 6px;
	color: var(--cldi-ink);
}

.cldi-hub__signup-summary {
	color: var(--cldi-muted);
	font-size: 12.5px;
	line-height: 1.45;
	margin: 0 0 10px;
}

.cldi-hub__signup-embed {
	margin-top: 0;
	max-width: 100%;
	width: 100%;
}

.cldi-hub__signup .cldi-card__embed,
.cldi-hub__signup .cldi-card__embed--lazy {
	align-items: stretch;
	display: block;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

.cldi-hub__signup *,
.cldi-hub__signup *::before,
.cldi-hub__signup *::after {
	box-sizing: border-box;
}

.cldi-hub__signup-button {
	justify-content: center;
	min-height: 40px;
	width: 100%;
}

.cldi-hub__signup :where(.frm_forms, .frm_form_fields, .frm_form_field, .frm_submit, .frm_fields_container, fieldset) {
	border: 0;
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

.cldi-hub__signup :where(.frm_form_field) {
	margin-bottom: 9px;
}

.cldi-hub__signup :where(label) {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.cldi-hub__signup :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea) {
	box-sizing: border-box;
	font-size: 13px;
	max-width: 100%;
	min-height: 38px;
	width: 100%;
}

.cldi-hub__signup :where(.frm_description, .frm_error, .frm_error_style, .frm_message) {
	font-size: 12px;
	line-height: 1.35;
	margin: 6px 0;
	overflow-wrap: anywhere;
}

.cldi-hub__signup :where(.frm_submit) {
	padding-top: 2px;
}

.cldi-hub__signup :where(.frm_button_submit, button[type="submit"], input[type="submit"]) {
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	min-height: 40px;
	padding: 10px 14px;
	width: 100%;
}

.cldi-hub__signup .frm_forms.with_frm_style,
.cldi-hub__signup form.frm-show-form,
.cldi-hub__signup .frm_form_fields,
.cldi-hub__signup .frm_fields_container,
.cldi-hub__signup fieldset {
	max-width: 100% !important;
	width: 100% !important;
}

.cldi-hub__signup .frm_form_field input[type="text"],
.cldi-hub__signup .frm_form_field input[type="email"],
.cldi-hub__signup .frm_form_field input[type="tel"],
.cldi-hub__signup .frm_form_field input[type="url"],
.cldi-hub__signup .frm_form_field select,
.cldi-hub__signup .frm_form_field textarea {
	max-width: 100% !important;
	width: 100% !important;
}

.cldi-hub__signup .frm_submit .frm_button_submit,
.cldi-hub__signup .frm_submit button[type="submit"],
.cldi-hub__signup .frm_submit input[type="submit"] {
	display: flex;
	justify-content: center;
	max-width: 100% !important;
	width: 100% !important;
}

.cldi-hub__signup .frm_checkbox label,
.cldi-hub__signup .frm_opt_container label {
	align-items: flex-start;
	display: flex;
	gap: 8px;
}

.cldi-hub__signup .frm_checkbox input[type="checkbox"],
.cldi-hub__signup .frm_opt_container input[type="checkbox"],
.cldi-hub__signup .frm_opt_container input[type="radio"] {
	flex: 0 0 auto;
	margin-top: 0.15em;
	min-height: 0;
	width: auto;
}

.cldi-hub__shortcode-area {
	background: #fff;
	border: 1px solid var(--cldi-line);
	border-left: 4px solid var(--cldi-accent);
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(0, 125, 163, 0.07);
	color: var(--cldi-ink);
	overflow: hidden;
}

.cldi-hub__shortcode-area *,
.cldi-hub__shortcode-area *::before,
.cldi-hub__shortcode-area *::after {
	box-sizing: border-box;
}

.cldi-hub__shortcode-area--sidebar {
	margin: 14px 14px 0;
	padding: 14px;
}

.cldi-hub__shortcode-area--main {
	align-items: start;
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(170px, 220px) minmax(0, 320px);
	justify-content: start;
	margin: 0 0 14px;
	max-width: 100%;
	padding: 16px 18px;
	width: fit-content;
}

.cldi-hub__shortcode-area-kicker {
	color: var(--cldi-accent);
	font-size: var(--cldi-hub-shortcode-kicker-size, 10px);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.cldi-hub__shortcode-area h2 {
	color: var(--cldi-ink);
	font-family: "Poppins", "DM Sans", system-ui, sans-serif;
	font-size: var(--cldi-hub-shortcode-title-size, 15px);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 7px;
}

.cldi-hub__shortcode-area-copy p:last-child {
	color: var(--cldi-muted);
	font-size: var(--cldi-hub-shortcode-description-size, 13px);
	line-height: 1.45;
	margin: 0;
}

.cldi-hub__shortcode-area-embed {
	min-width: 0;
	width: 100%;
}

.cldi-hub__shortcode-area--main .cldi-hub__shortcode-area-copy,
.cldi-hub__shortcode-area--main .cldi-hub__shortcode-area-embed {
	align-self: start;
}

.cldi-hub__shortcode-area-status {
	background: #f4f7fa;
	border: 1px solid var(--cldi-line);
	border-radius: 8px;
	color: var(--cldi-muted);
	font-size: var(--cldi-hub-shortcode-description-size, 13px);
	line-height: 1.45;
	padding: 12px;
}

.cldi-hub__shortcode-area-status strong {
	color: var(--cldi-ink);
	display: block;
	font-size: var(--cldi-hub-shortcode-title-size, 15px);
	line-height: 1.25;
	margin: 0 0 5px;
}

.cldi-hub__shortcode-area-status p {
	margin: 0;
}

.cldi-hub__shortcode-area .frm_forms.with_frm_style,
.cldi-hub__shortcode-area form.frm-show-form,
.cldi-hub__shortcode-area .frm_form_fields,
.cldi-hub__shortcode-area .frm_fields_container,
.cldi-hub__shortcode-area fieldset {
	border: 0;
	margin-left: 0;
	margin-right: 0;
	max-width: 100% !important;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
	width: 100% !important;
}

.cldi-hub__shortcode-area .frm_form_field {
	margin-bottom: 10px;
	max-width: 100%;
}

.cldi-hub__shortcode-area--main .frm_form_field {
	margin-bottom: 8px;
}

.cldi-hub__shortcode-area label {
	display: block;
	font-size: var(--cldi-hub-shortcode-label-size, 12px);
	line-height: 1.35;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.cldi-dashboard.cldi-hub .cldi-hub__shortcode-area .frm_forms.with_frm_style label,
.cldi-dashboard.cldi-hub .cldi-hub__shortcode-area .frm_forms.with_frm_style .frm_primary_label,
.cldi-dashboard.cldi-hub .cldi-hub__shortcode-area .frm_forms.with_frm_style .frm_checkbox label,
.cldi-dashboard.cldi-hub .cldi-hub__shortcode-area .frm_forms.with_frm_style .frm_opt_container label {
	font-size: var(--cldi-hub-shortcode-label-size, 12px) !important;
	line-height: 1.35 !important;
}

.cldi-hub__shortcode-area input[type="text"],
.cldi-hub__shortcode-area input[type="email"],
.cldi-hub__shortcode-area input[type="tel"],
.cldi-hub__shortcode-area input[type="url"],
.cldi-hub__shortcode-area select,
.cldi-hub__shortcode-area textarea {
	box-sizing: border-box;
	font-size: var(--cldi-hub-shortcode-field-size, 13px);
	max-width: 100% !important;
	min-height: 40px;
	width: 100% !important;
}

.cldi-hub__shortcode-area .frm_description,
.cldi-hub__shortcode-area .frm_error,
.cldi-hub__shortcode-area .frm_error_style,
.cldi-hub__shortcode-area .frm_message {
	font-size: 12px;
	line-height: 1.35;
	margin: 6px 0;
	overflow-wrap: anywhere;
}

.cldi-hub__shortcode-area .frm_submit .frm_button_submit,
.cldi-hub__shortcode-area .frm_submit button[type="submit"],
.cldi-hub__shortcode-area .frm_submit input[type="submit"] {
	border-radius: 999px;
	display: inline-flex;
	font-size: var(--cldi-hub-shortcode-button-size, 13px);
	font-weight: 700;
	justify-content: center;
	min-height: 38px;
	max-width: 100% !important;
	padding: 9px 16px;
	width: auto;
}

.cldi-hub__shortcode-area--main .frm_submit {
	margin-top: 8px;
}

.cldi-hub__shortcode-area .frm_checkbox label,
.cldi-hub__shortcode-area .frm_opt_container label {
	align-items: flex-start;
	display: flex;
	gap: 8px;
}

.cldi-hub__shortcode-area .frm_checkbox input[type="checkbox"],
.cldi-hub__shortcode-area .frm_opt_container input[type="checkbox"],
.cldi-hub__shortcode-area .frm_opt_container input[type="radio"] {
	flex: 0 0 auto;
	margin-top: 0.15em;
	min-height: 0;
	width: auto !important;
}

.cldi-hub__shortcode-area--sidebar .frm_form_field,
.cldi-hub__shortcode-area--sidebar .frm_first,
.cldi-hub__shortcode-area--sidebar .frm_last,
.cldi-hub__shortcode-area--sidebar .frm_half {
	clear: both !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

.cldi-dashboard.cldi-hub .cldi-hub__shortcode-area--sidebar .frm_forms .frm_form_field.frm_half,
.cldi-dashboard.cldi-hub .cldi-hub__shortcode-area--sidebar .frm_forms .frm_form_field.frm_first,
.cldi-dashboard.cldi-hub .cldi-hub__shortcode-area--sidebar .frm_forms .frm_form_field.frm_last {
	clear: both !important;
	float: none !important;
	grid-column: 1 / -1 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

.cldi-hub__shortcode-area--sidebar input[type="text"],
.cldi-hub__shortcode-area--sidebar input[type="email"],
.cldi-hub__shortcode-area--sidebar input[type="tel"],
.cldi-hub__shortcode-area--sidebar input[type="url"],
.cldi-hub__shortcode-area--sidebar select,
.cldi-hub__shortcode-area--sidebar textarea {
	min-height: 36px;
}

/* ============================================================
   MAIN CONTENT
============================================================ */
.cldi-hub__main {
	flex: 1;
	padding: 14px 22px 32px;
	min-width: 0;
}

/* ============================================================
   ANNOUNCEMENT (compact hub style)
============================================================ */
.cldi-hub .cldi-announcement {
	background: #fffaed;
	border: 1px solid #f6c842;
	border-left: 3px solid #f6c842;
	border-radius: 8px;
	margin-bottom: 20px;
	padding: 10px 14px;
	gap: 10px;
}

/* ============================================================
   ANNOUNCEMENT DISMISS BUTTON
============================================================ */
.cldi-hub__announcement-banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.cldi-hub__announcement-body {
	flex: 1;
}

.cldi-hub__announcement-dismiss {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: var(--cldi-muted);
	padding: 0 2px;
	flex-shrink: 0;
	margin-top: -2px;
	opacity: 0.6;
}

.cldi-hub__announcement-dismiss:hover {
	opacity: 1;
	color: var(--cldi-ink);
}

/* ============================================================
   CONTINUE LEARNING CARD
============================================================ */
.cldi-hub__continue {
	background: #fff;
	border-radius: 10px;
	border: 1px solid var(--cldi-line);
	border-left: 4px solid var(--cldi-accent-bright);
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 18px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.cldi-hub__continue-icon {
	width: 52px;
	height: 42px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--cldi-accent) 0%, var(--cldi-accent-bright) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cldi-hub__continue-icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: rgba(255, 255, 255, 0.9);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cldi-hub__continue-info {
	flex: 1;
	min-width: 160px;
}

.cldi-hub__continue-kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--cldi-accent-bright);
	display: block;
	margin-bottom: 3px;
}

.cldi-hub__continue-title {
	font-family: "Poppins", "DM Sans", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--cldi-ink);
	margin: 0 0 6px;
}

.cldi-hub__continue-meta {
	font-size: 12px;
	color: var(--cldi-muted);
}

.cldi-hub__continue-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--cldi-accent);
	color: #fff;
	border-radius: 8px;
	padding: 9px 16px;
	font-family: "Poppins", "DM Sans", system-ui, sans-serif;
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.cldi-hub__continue-btn:hover,
.cldi-hub__continue-btn:focus {
	background: var(--cldi-accent-dark);
	color: #fff;
	text-decoration: none;
}

.cldi-hub__continue-btn svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ============================================================
   STATS GRID
============================================================ */
.cldi-hub__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 24px;
}

.cldi-hub__stat-card {
	background: #fff;
	border-radius: 10px;
	border: 1px solid var(--cldi-line);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

a.cldi-hub__stat-card:hover {
	border-color: var(--cldi-accent-bright);
	background: #f5fdfe;
	text-decoration: none;
}

.cldi-hub__stat-icon {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cldi-hub__stat-icon svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cldi-hub__stat-icon--enrolled {
	background: rgba(0, 125, 163, 0.1);
}

.cldi-hub__stat-icon--enrolled svg {
	stroke: var(--cldi-accent);
}

.cldi-hub__stat-icon--started {
	background: rgba(0, 175, 185, 0.1);
}

.cldi-hub__stat-icon--started svg {
	stroke: var(--cldi-accent-bright);
}

.cldi-hub__stat-icon--certs {
	background: rgba(226, 18, 112, 0.08);
}

.cldi-hub__stat-icon--certs svg {
	stroke: var(--cldi-pink);
}

.cldi-hub__stat-num {
	font-family: "Poppins", "DM Sans", system-ui, sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--cldi-ink);
	line-height: 1;
	display: block;
}

.cldi-hub__stat-lbl {
	font-size: 12px;
	color: var(--cldi-muted);
	margin-top: 2px;
	display: block;
}

/* ============================================================
   WIDGET SECTIONS (inside hub – resets the details style)
============================================================ */
.cldi-hub__main .cldi-widget-section {
	background: #fff;
	border-radius: 10px;
	border: 1px solid var(--cldi-line);
	margin-bottom: 16px;
	overflow: hidden;
}

/* Hide the browser default disclosure triangle */
.cldi-hub__main .cldi-widget-section > summary {
	list-style: none;
}

.cldi-hub__main .cldi-widget-section > summary::-webkit-details-marker,
.cldi-hub__main .cldi-widget-section > summary::marker {
	display: none;
	content: '';
}

/* Clean, compact section header */
.cldi-hub__main .cldi-widget-section summary.cldi-widget-section__header {
	padding: 13px 18px;
	border-bottom: 1px solid var(--cldi-line);
	cursor: default;
}

/* Hide section description text – keeps header compact */
.cldi-hub__main .cldi-widget-section summary.cldi-widget-section__header p {
	display: none;
}

/* Hide the section summary pills (active/not-started counts) – sidebar already shows this */
.cldi-hub__main .cldi-widget-section__summary {
	display: none;
}

/* Section icon sizing */
.cldi-hub__main .cldi-widget-section__icon {
	width: 18px;
	height: 18px;
}

/* Section title size */
.cldi-hub__main .cldi-widget-section__header h2 {
	font-size: 15px;
}

.cldi-hub__main .cldi-dashboard__grid {
	padding: 14px 18px;
}

/* Section empty-state prompt */
.cldi-hub__main .cldi-section-empty {
	padding: 14px 18px;
}

/* ============================================================
   MOBILE BOTTOM NAV
============================================================ */
.cldi-hub__mobile-nav {
	display: none;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media ( max-width: 860px ) {
	.cldi-hub__sidebar {
		background: #f4f7fa;
		border-right: 0;
		display: block;
		max-height: none;
		overflow: visible;
		padding: 0 14px;
		position: static;
		width: 100%;
	}

	.cldi-hub__sidebar-nav {
		display: none;
	}

	.cldi-hub__body {
		flex-direction: column;
	}

	.cldi-hub__hero {
		padding: 16px 18px 14px;
		gap: 12px;
	}

	.cldi-hub__hero-stats {
		gap: 8px;
	}

	.cldi-hub__hero-stat {
		padding: 7px 10px;
		min-width: 60px;
	}

	.cldi-hub__hero-stat-num {
		font-size: 17px;
	}

	.cldi-hub__hero-cta {
		width: 100%;
		justify-content: center;
		margin-left: 0;
	}

	.cldi-hub__main {
		padding: 14px 14px 80px;
		width: 100%;
	}

	.cldi-hub__shortcode-area--sidebar {
		margin: 14px 0 0;
	}

	.cldi-hub__shortcode-area--main {
		grid-template-columns: 1fr;
		gap: 12px;
		max-width: none;
		padding: 14px;
		width: 100%;
	}

	.cldi-hub__shortcode-area h2 {
		font-size: 18px;
	}

	.cldi-hub__stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.cldi-hub__continue {
		padding: 12px 14px;
		gap: 12px;
	}

	.cldi-hub__mobile-nav {
		display: flex;
		position: sticky;
		bottom: 0;
		background: #fff;
		border-top: 1px solid var(--cldi-line);
		z-index: 40;
		padding: 4px 0 8px;
	}
}

@media ( max-width: 480px ) {
	.cldi-hub__greeting h2 {
		font-size: 17px;
	}

	.cldi-hub__hero-stat {
		min-width: 56px;
		padding: 6px 8px;
	}

	.cldi-hub__stats {
		grid-template-columns: 1fr 1fr;
	}
}

/* ============================================================
   MOBILE BOTTOM NAV ITEMS
============================================================ */
.cldi-hub__mobile-nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 5px 4px 0;
	font-size: 10px;
	color: var(--cldi-muted);
	text-decoration: none;
	border-top: 3px solid transparent;
	transition: color 0.12s ease;
}

.cldi-hub__mobile-nav-item:hover,
.cldi-hub__mobile-nav-item.is-active {
	color: var(--cldi-accent);
	text-decoration: none;
}

.cldi-hub__mobile-nav-item.is-active {
	border-top-color: var(--cldi-accent);
}

.cldi-hub__mobile-nav-item svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	margin-bottom: 1px;
}

.cldi-hub__mobile-nav-more-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 5px 4px 0;
	font-size: 10px;
	color: var(--cldi-muted);
	cursor: pointer;
	background: none;
	border: none;
	border-top: 3px solid transparent;
}

.cldi-hub__mobile-nav-more-item svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	margin-bottom: 1px;
}

/* ============================================================
   CONTINUE CARD — PROGRESS BAR
============================================================ */
.cldi-hub__continue-progress-bar {
	background: var(--cldi-line);
	border-radius: 4px;
	height: 6px;
	overflow: hidden;
	margin-bottom: 5px;
}

.cldi-hub__continue-progress-fill {
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--cldi-accent), var(--cldi-accent-bright));
	transition: width 0.4s ease;
}

/* ============================================================
   STATS — PLAY ICON COLOUR + SUB-LABEL
============================================================ */
.cldi-hub__stat-icon--started {
	background: rgba(0, 175, 185, 0.1);
}

.cldi-hub__stat-icon--started svg {
	stroke: var(--cldi-accent-bright);
}

.cldi-hub__stat-sub {
	font-size: 11px;
	color: var(--cldi-accent-bright);
	font-weight: 600;
	margin-top: 2px;
	display: block;
}

/* ============================================================
   WIDGET CARD ACCENT BORDERS — SOFTEN IN HUB CONTEXT
   The coloured left-borders on individual cards are strong in the
   classic template but feel noisy inside the hub's white section
   cards. Reduce to a neutral border at the same 1px weight.
============================================================ */
.cldi-hub__main .cldi-dashboard__grid .cldi-card {
	border-color: var(--cldi-line);
	border-left-width: 1px;
}

.cldi-hub__main .cldi-dashboard__grid .cldi-card::before {
	background: var(--cldi-line);
}

/* Admin preview notice for hub template */
.cldi-hub__admin-notice {
	background: var(--cldi-panel);
	border: 1px solid var(--cldi-line);
	border-radius: 8px;
	padding: 10px 16px;
	font-size: 13px;
	color: var(--cldi-muted);
	margin-bottom: 16px;
	text-align: center;
}

/* ============================================================
   HUB UI IMPROVEMENTS — v0.3.35
   Added during UI review session. Retain when adding new features.
   These improvements are CSS-only and do not affect PHP logic.
============================================================ */

/* 1. SECTION-AWARE CARD ACCENT BORDERS
   Card top bars pick up --cldi-section-accent (set by PHP inline
   on the <details> element and inherited down). Opacity is softened
   so it complements rather than competes with section headers.
   Provides consistent visual wayfinding inside each section.
============================================================ */
.cldi-hub__main .cldi-dashboard__grid .cldi-card::before {
	background: var( --cldi-section-accent, var( --cldi-accent ) );
	opacity: 0.45;
}

/* 2. STAT CARD HOVER LIFT
   Interactive stat cards lift with a shadow on hover.
============================================================ */
.cldi-hub__stat-card {
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}

a.cldi-hub__stat-card:hover {
	border-color: var( --cldi-accent-bright );
	background: #f5fdfe;
	text-decoration: none;
	transform: translateY( -2px );
	box-shadow: 0 6px 16px rgba( 0, 125, 163, 0.14 );
}

/* 3. FOCUS-VISIBLE RINGS ON HUB INTERACTIVE ELEMENTS
   Hub buttons were missing the double-ring focus indicator used
   throughout dashboard.css. Added to match the established pattern.
============================================================ */
.cldi-hub__hero-cta:focus-visible,
.cldi-hub__continue-btn:focus-visible,
.cldi-hub__signup-button:focus-visible {
	box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var( --cldi-pink );
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.cldi-hub__sidebar-link:focus-visible,
.cldi-hub__mobile-nav-item:focus-visible {
	box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var( --cldi-accent );
	outline: 2px solid transparent;
	outline-offset: 1px;
}

/* 4. SECTION HEADER COLLAPSE CHEVRON
   Restores pointer cursor on <details> summaries and adds a
   rotatable chevron to indicate expand/collapse state.
============================================================ */
.cldi-hub__main .cldi-widget-section summary.cldi-widget-section__header {
	cursor: pointer;
}

.cldi-hub__main .cldi-widget-section summary.cldi-widget-section__header .cldi-widget-section__intro {
	padding-right: 30px;
}

.cldi-hub__main .cldi-widget-section summary.cldi-widget-section__header .cldi-widget-section__intro::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY( -50% ) rotate( 0deg );
	width: 16px;
	height: 16px;
	background-image: url( "data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23526373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" );
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s ease;
}

.cldi-hub__main .cldi-widget-section[open] summary.cldi-widget-section__header .cldi-widget-section__intro::after {
	transform: translateY( -50% ) rotate( 180deg );
}

/* 5. PROGRESS BAR ENTRY ANIMATION
   The Continue Learning progress fill scales in from 0 via
   transform:scaleX so it works with inline width styles.
============================================================ */
@keyframes cldi-progress-scale-in {
	from {
		transform: scaleX( 0 );
	}

	to {
		transform: scaleX( 1 );
	}
}

.cldi-hub__continue-progress-fill {
	transform-origin: left;
	animation: cldi-progress-scale-in 0.65s cubic-bezier( 0.2, 0.8, 0.2, 1 ) 0.3s both;
}

/* 6. CONTINUE CARD — ROUND ICON + LARGER RESUME BUTTON
   Icon container is now fully circular; Resume button is slightly
   wider and taller for a more confident tap/click target.
============================================================ */
.cldi-hub__continue-icon {
	border-radius: 50%;
	width: 46px;
	height: 46px;
}

.cldi-hub__continue-btn {
	min-width: 96px;
	padding: 10px 20px;
}

/* 7. ANNOUNCEMENT BANNER — USE BRAND TEAL PALETTE
   Replaces the default gold/amber colours with the Care Learning
   teal so the announcement feels native to the dashboard.
============================================================ */
.cldi-hub .cldi-announcement {
	background: var( --cldi-panel );
	border: 1px solid #c7edf1;
	border-left: 3px solid var( --cldi-accent-bright );
}

/* 8. HERO STATS — PREVENT AWKWARD CHIP WRAPPING
   Forces all three stat chips to stay on one row by removing flex
   wrap and letting each chip flex-grow equally.
============================================================ */
.cldi-hub__hero-stats {
	flex-wrap: nowrap;
}

.cldi-hub__hero-stat {
	flex: 1;
	min-width: 0;
}

/* 9. CARD MIN-HEIGHT IN HUB — LET CONTENT DICTATE HEIGHT
   Removes the 188px minimum so cards in the hub sit flush with
   their content without large empty footers.
============================================================ */
.cldi-hub__main .cldi-card {
	min-height: 0;
}

.cldi-hub__main .cldi-card__summary {
	margin-bottom: 18px;
}

.cldi-hub__main .cldi-card__footer {
	padding-top: 12px;
}

/* 10. SIDEBAR GROUP LABELS — IMPROVE CONTRAST
   Switches from accent-colour-at-80% to muted-colour-at-100%
   for clearer readability at the small label size.
============================================================ */
.cldi-hub__sidebar-label {
	color: var( --cldi-muted );
	opacity: 1;
	font-size: 10.5px;
}

/* 11. HERO AVATAR — SLIGHTLY LARGER ON WIDE SCREENS
============================================================ */
@media ( min-width: 1040px ) {
	.cldi-hub__avatar {
		width: 56px;
		height: 56px;
		font-size: 22px;
	}
}

/* 12. MOBILE — KEEP HERO STATS IN ONE ROW ON SMALL PHONES
   At narrow widths each chip is allowed to be as small as 50px
   so all three stay on the same line.
============================================================ */
@media ( max-width: 480px ) {
	.cldi-hub__hero-stat {
		min-width: 50px;
		padding: 6px 6px;
	}

	.cldi-hub__hero-stat-num {
		font-size: 15px;
	}

	.cldi-hub__hero-stat-lbl {
		font-size: 10px;
	}
}

/* ============================================================
   HUB UX IMPROVEMENTS — v0.3.53
   Added during the June 2026 UX review. Retain when adding new
   features. CSS-only except for the matching template reorder
   (signup area moved below the stats grid) and the mobile
   "More" menu handler in dashboard.js.
============================================================ */

/* 13. MAIN SHORTCODE AREA — FULL-WIDTH SLIM BANNER
   The email signup card now sits below the Continue card and
   stats grid, so it spans the full content width with copy on
   the left and the form on the right. Previously it was a
   half-width card floating at the very top of the main column
   with dead space beside it.
============================================================ */
.cldi-hub__shortcode-area--main {
	gap: 48px;
	grid-template-columns: minmax( 200px, 300px ) minmax( 280px, 520px );
	justify-content: start;
	margin: 0 0 22px;
	width: 100%;
}

@media ( max-width: 860px ) {
	.cldi-hub__shortcode-area--main {
		grid-template-columns: 1fr;
		width: 100%;
	}
}

/* 14. STATS GRID — NO ORPHANED THIRD CARD ON MOBILE
   When stats wrap to two columns, an odd final card spans the
   full row instead of leaving an empty cell beside it.
============================================================ */
@media ( max-width: 860px ) {
	.cldi-hub__stats .cldi-hub__stat-card:last-child:nth-child( odd ) {
		grid-column: 1 / -1;
	}
}

/* 15. MOBILE BOTTOM NAV — SAFE-AREA PADDING + STRONGER TAP TARGETS
   Respects the iPhone home indicator and gives each item a
   minimum 44px touch target.
============================================================ */
@media ( max-width: 860px ) {
	.cldi-hub__mobile-nav {
		padding: 4px 0 calc( 8px + env( safe-area-inset-bottom, 0px ) );
	}

	.cldi-hub__mobile-nav-item,
	.cldi-hub__mobile-nav-more-item {
		min-height: 44px;
	}
}

/* 16. MOBILE "MORE" MENU
   Pop-over sheet listing the remaining dashboard sections,
   opened by the bottom-nav More button (see dashboard.js).
============================================================ */
.cldi-hub__more-menu {
	background: #fff;
	border: 1px solid var( --cldi-line );
	border-radius: 12px;
	bottom: calc( 64px + env( safe-area-inset-bottom, 0px ) );
	box-shadow: 0 14px 34px rgba( 31, 41, 55, 0.18 );
	display: none;
	max-width: calc( 100vw - 24px );
	min-width: 210px;
	overflow: hidden;
	padding: 6px;
	position: fixed;
	right: 12px;
	z-index: 60;
}

.cldi-hub__more-menu.is-open {
	display: block;
}

.cldi-hub__more-menu a {
	align-items: center;
	border-radius: 8px;
	color: var( --cldi-ink );
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 10px;
	min-height: 44px;
	padding: 10px 12px;
	text-decoration: none;
}

.cldi-hub__more-menu a:hover,
.cldi-hub__more-menu a:focus-visible {
	background: rgba( 0, 175, 185, 0.09 );
	color: var( --cldi-accent );
	text-decoration: none;
}

.cldi-hub__more-menu svg {
	fill: none;
	flex-shrink: 0;
	height: 18px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.75;
	width: 18px;
}

.cldi-hub__mobile-nav-more-item[aria-expanded="true"] {
	color: var( --cldi-accent );
}

/* ============================================================
   HUB UX IMPROVEMENTS — v0.3.54
   Balance and interaction pass. Retain when adding new features.
============================================================ */

/* 17. BALANCED CARD ROWS
   Cards stretch to fill each section row instead of leaving dead
   space: one card spans the full width, two cards split it evenly,
   three or more share it. Collapses to a single column on phones.
============================================================ */
.cldi-hub__main .cldi-dashboard__grid {
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
}

@media ( max-width: 860px ) {
	.cldi-hub__main .cldi-dashboard__grid {
		grid-template-columns: 1fr;
	}
}

/* 18. EMAIL BANNER — BALANCED TWO-COLUMN LAYOUT
   Copy and form share the full banner width with no dead space on
   the right. Form column is the wider of the two.
============================================================ */
.cldi-hub__shortcode-area--main {
	gap: 48px;
	grid-template-columns: minmax( 220px, 1fr ) minmax( 320px, 1.6fr );
	justify-content: stretch;
}

/* 19. WHOLE-CARD CLICK TARGETS
   Cards with a single action link are clickable across their full
   surface (set up in dashboard.js). Hover states keep the cue
   subtle and professional.
============================================================ */
.cldi-hub__main .cldi-card--clickable {
	cursor: pointer;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.cldi-hub__main .cldi-card--clickable:hover {
	border-color: var( --cldi-accent-bright );
	box-shadow: 0 6px 16px rgba( 0, 125, 163, 0.12 );
}

.cldi-hub__main .cldi-card--clickable:hover .cldi-card__action {
	background: var( --cldi-cta-hover );
}

@media ( prefers-reduced-motion: reduce ) {
	.cldi-hub__main .cldi-card--clickable {
		transition: none;
	}
}

/* 20. EMAIL BANNER — COMPACT FORM SPACING
   Formidable's stylesheet applies 35px bottom margins to every
   field, which made the banner very tall with dead space around
   the Submit button. Higher-specificity overrides bring the form
   to a compact rhythm and vertically centre the copy column.
============================================================ */
.cldi-hub__shortcode-area--main .frm_forms .frm_form_field {
	margin-bottom: 14px !important;
}

.cldi-hub__shortcode-area--main .frm_forms .frm_fields_container > .frm_form_field:last-of-type {
	margin-bottom: 6px !important;
}

.cldi-hub__shortcode-area--main .frm_forms .frm_submit {
	margin-top: 0;
	padding-top: 0;
}

.cldi-hub__shortcode-area--main .cldi-hub__shortcode-area-copy {
	align-self: center;
}

/* 21. HERO STRIP — SLIMMER VERTICAL RHYTHM
============================================================ */
.cldi-hub__hero {
	padding: 16px 28px 15px;
}

@media ( max-width: 860px ) {
	.cldi-hub__hero {
		padding: 14px 18px 13px;
	}
}

/* ============================================================
   HUB UX IMPROVEMENTS — v0.3.56
   Typography hierarchy + widget alignment pass.
============================================================ */

/* 22. WIDGET SECTION ALIGNMENT
   The classic template draws section headers as nested outlined
   boxes inside an 18px-padded section, while the hub adds its own
   grid padding — leaving headers and cards on different left/right
   edges. Flatten the header into a full-width divider row so the
   header text, cards, and empty states all align at 18px.
============================================================ */
.cldi-hub__main .cldi-widget-section {
	padding: 0;
}

.cldi-hub__main .cldi-widget-section summary.cldi-widget-section__header {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var( --cldi-line );
	border-radius: 0;
	margin-bottom: 0;
	padding: 14px 18px;
}

/* 23. TYPE SCALE — CLEAR TOP-DOWN HIERARCHY
   Greeting 22 > section titles 17 > card headings 16 > body 14
   > meta 12.5–13 > kickers/labels 11. Lifts the smallest text and
   stops card headings out-shouting their section titles.
============================================================ */
.cldi-hub__greeting h2 {
	font-size: 22px;
}

.cldi-hub__greeting-time,
.cldi-hub__greeting p {
	font-size: 13px;
}

.cldi-hub__main .cldi-widget-section__header h2 {
	font-size: 17px;
	font-weight: 700;
}

.cldi-hub__main .cldi-card__heading,
.cldi-hub__main .cldi-card h3 {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.cldi-hub__main .cldi-card__summary {
	font-size: 14px;
	line-height: 1.5;
}

.cldi-hub__continue-title {
	font-size: 16px;
}

.cldi-hub__continue-kicker {
	font-size: 11px;
}

.cldi-hub__continue-meta {
	font-size: 12.5px;
}

.cldi-hub__stat-lbl {
	font-size: 13px;
}

.cldi-hub__stat-sub {
	font-size: 12px;
}

.cldi-hub__sidebar-label {
	font-size: 11px;
}

.cldi-hub__sidebar-link {
	font-size: 14px;
}

.cldi-hub__shortcode-area-kicker {
	font-size: var( --cldi-hub-shortcode-kicker-size, 11px );
}

.cldi-hub__shortcode-area h2 {
	font-size: var( --cldi-hub-shortcode-title-size, 17px );
}

.cldi-hub__shortcode-area-copy p:last-child {
	font-size: var( --cldi-hub-shortcode-description-size, 14px );
}

@media ( max-width: 860px ) {
	.cldi-hub__mobile-nav-item,
	.cldi-hub__mobile-nav-more-item {
		font-size: 11px;
	}
}

@media ( max-width: 480px ) {
	.cldi-hub__greeting h2 {
		font-size: 18px;
	}
}

/* 24a. FORM TEXT — READABLE MINIMUMS (v0.3.57)
   Form labels, field text, and helper copy never render below
   13px. Backs up the raised admin font-size defaults/minimums in
   CLDI_Settings::hub_shortcode_area_font_size_fields().
============================================================ */
.cldi-hub__shortcode-area label,
.cldi-dashboard.cldi-hub .cldi-hub__shortcode-area .frm_forms.with_frm_style label,
.cldi-dashboard.cldi-hub .cldi-hub__shortcode-area .frm_forms.with_frm_style .frm_primary_label,
.cldi-dashboard.cldi-hub .cldi-hub__shortcode-area .frm_forms.with_frm_style .frm_checkbox label,
.cldi-dashboard.cldi-hub .cldi-hub__shortcode-area .frm_forms.with_frm_style .frm_opt_container label {
	font-size: max( 13px, var( --cldi-hub-shortcode-label-size, 14px ) ) !important;
}

.cldi-hub__shortcode-area input[type="text"],
.cldi-hub__shortcode-area input[type="email"],
.cldi-hub__shortcode-area input[type="tel"],
.cldi-hub__shortcode-area input[type="url"],
.cldi-hub__shortcode-area select,
.cldi-hub__shortcode-area textarea {
	font-size: max( 13px, var( --cldi-hub-shortcode-field-size, 14px ) );
}

.cldi-hub__shortcode-area .frm_description,
.cldi-hub__shortcode-area .frm_error,
.cldi-hub__shortcode-area .frm_error_style,
.cldi-hub__shortcode-area .frm_message {
	font-size: 13px;
}

.cldi-hub__shortcode-area .frm_submit .frm_button_submit,
.cldi-hub__shortcode-area .frm_submit button[type="submit"],
.cldi-hub__shortcode-area .frm_submit input[type="submit"] {
	font-size: max( 13px, var( --cldi-hub-shortcode-button-size, 14px ) );
}

.cldi-hub__signup :where(label) {
	font-size: 13px;
}

.cldi-hub__signup :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea) {
	font-size: 14px;
}

.cldi-hub__signup-summary,
.cldi-hub__signup :where(.frm_description, .frm_error, .frm_error_style, .frm_message) {
	font-size: 13px;
}

/* 24. HERO CTA — ELLIPSIS FOR LONG COURSE TITLES
   The contextual "Resume: {course}" label truncates rather than
   wrapping or stretching the pink button.
============================================================ */
.cldi-hub__hero-cta-text {
	display: inline-block;
	max-width: 340px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media ( max-width: 860px ) {
	.cldi-hub__hero-cta-text {
		max-width: calc( 100vw - 110px );
	}
}