/**
 * Default front-end styling for the [credential-block] shortcode output.
 * Only loaded on pages/posts whose content actually contains the
 * shortcode (see Credpl_Shortcode::maybe_enqueue_styles()).
 *
 * The look is a light panel holding one white, rounded card per
 * credential: round badge on the left, title + pill in the middle, and a
 * divided "Earned on / Expires on" column on the right, under a heading
 * with a short blue accent bar.
 *
 * Every colour is a custom property on .credpl-credential-block, and every
 * rule is low-specificity, so a theme can restyle it — e.g.
 * `.credpl-credential-block { --credpl-accent: #c00; --credpl-panel-bg: transparent; }`.
 */

.credpl-credential-block {
	--credpl-accent: #2f8cff;
	--credpl-accent-strong: #1a6fe0;
	--credpl-tag-bg: #dbeafe;
	--credpl-disc-bg: #dcebfc;
	--credpl-card-bg: #fff;
	--credpl-card-border: #e4e8f0;
	--credpl-text: #14163a;
	--credpl-muted: #6b7280;
	--credpl-icon: #5b6478;
	--credpl-panel-bg: #f7f8fc;
	--credpl-hover-shadow: 0 10px 24px rgba(20, 22, 58, 0.1);
	--credpl-heading-size: 20px;
	--credpl-title-size: 20px;
	--credpl-text-size: 18px;
	/* The pill and the "Earned on" / "Expires on" labels are small print.
	   Set this to var(--credpl-text-size) to make them the same size as the
	   rest of the text. */
	--credpl-small-size: 13px;

	box-sizing: border-box;
	/* Anchors every em-based measurement below (padding, gaps, icon and
	   date-column sizes) to the block's own size rather than to whatever the
	   theme's body text happens to be. */
	font-size: var(--credpl-text-size);
	padding: 1.5em;
	background: var(--credpl-panel-bg);
	border-radius: 16px;
	color: var(--credpl-text);
}

.credpl-credential-block *,
.credpl-credential-block *::before,
.credpl-credential-block *::after {
	box-sizing: border-box;
}

/* The heading and the credential title are `<h3>`s, which themes very often
   size with their own tag-based rules (`.site-main .entry-content h3 { … }`) —
   more specific than a single class here, so a plain declaration would lose.
   Their `font-size` is therefore `!important`; a theme that wants another
   size sets `--credpl-heading-size` / `--credpl-title-size` instead. */
.credpl-credential-block .credpl-credential-block-heading {
	margin: 0 0 0.9em;
	font-size: var(--credpl-heading-size) !important;
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}

/* The short blue bar above the heading. */
.credpl-credential-block .credpl-credential-block-heading::before {
	content: "";
	display: block;
	width: 40px;
	height: 4px;
	margin-bottom: 0.6em;
	border-radius: 2px;
	background: var(--credpl-accent);
}

.credpl-credential-block .credpl-credential-list {
	display: flex;
	flex-direction: column;
	gap: 1em;
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.credpl-credential-block .credpl-credential-item {
	display: flex;
	align-items: center;
	gap: 1.25em;
	margin: 0;
	padding: 1.1em 1.5em 1.1em 1.25em;
	background: var(--credpl-card-bg);
	border: 1px solid var(--credpl-card-border);
	border-radius: 16px;
	list-style: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Hover / keyboard focus: the card lifts a little, gains a soft shadow, and
   its border turns the accent colour. `:focus-within` gives keyboard users
   (tabbing to the title or badge link) the same cue as a mouse hover. */
.credpl-credential-block .credpl-credential-item:hover,
.credpl-credential-block .credpl-credential-item:focus-within {
	transform: translateY(-3px);
	border-color: var(--credpl-accent);
	box-shadow: var(--credpl-hover-shadow);
}

.credpl-credential-block .credpl-credential-item::marker {
	content: none;
}

/* Some themes draw their own list bullet with `li::before`. The item is a
   flex row, so that pseudo-element would become one more flex child and
   show up as a stray dot beside the badge. */
.credpl-credential-block .credpl-credential-item::before,
.credpl-credential-block .credpl-credential-item::after {
	content: none;
	display: none;
}

/* Round, pale-blue disc holding the badge image (or the fallback star). */
.credpl-credential-block .credpl-credential-badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--credpl-disc-bg);
	color: var(--credpl-accent-strong);
}

.credpl-credential-block .credpl-credential-badge img,
.credpl-credential-block .credpl-credential-badge svg {
	display: block;
	width: 52px;
	height: 52px;
	object-fit: contain;
}

/* `flex-basis: 0`, not `auto`: a long title must shrink to fit beside the
   badge (wrapping its own lines), not push itself onto a new row. */
.credpl-credential-block .credpl-credential-info {
	flex: 1 1 0;
	min-width: 0;
}

.credpl-credential-block .credpl-credential-title {
	margin: 0 0 0.5em;
	font-size: var(--credpl-title-size) !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--credpl-text);
}

.credpl-credential-block .credpl-credential-title a {
	color: inherit;
	text-decoration: none;
}

.credpl-credential-block .credpl-credential-title a:hover,
.credpl-credential-block .credpl-credential-title a:focus {
	text-decoration: underline;
}

/* "MICROSOFT APPLIED SKILLS" pill. The text is stored as typed; the
   uppercasing is done here. */
.credpl-credential-block .credpl-credential-tag {
	display: inline-block;
	padding: 0.3em 0.85em;
	border-radius: 999px;
	background: var(--credpl-tag-bg);
	color: var(--credpl-accent-strong);
	font-size: var(--credpl-small-size);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Award Category / Technology Area lines (Awards credentials only). */
.credpl-credential-block .credpl-credential-meta {
	margin: 0.5em 0 0;
	font-size: var(--credpl-text-size);
	color: var(--credpl-muted);
}

/* The right-hand "Earned on / Expires on" column, set off by a divider.
   Fixed width, so the dividers line up from one card to the next instead
   of sitting wherever each card's own date text happens to end. */
.credpl-credential-block .credpl-credential-dates {
	flex: 0 0 14.5em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75em;
	align-self: stretch;
	padding-left: 1.75em;
	border-left: 1px solid var(--credpl-card-border);
}

.credpl-credential-block .credpl-credential-date {
	display: flex;
	align-items: center;
	gap: 0.85em;
}

.credpl-credential-block .credpl-credential-date-icon {
	flex: 0 0 auto;
	display: block;
	width: 1.75em;
	height: 1.75em;
	color: var(--credpl-icon);
}

.credpl-credential-block .credpl-credential-date-label {
	display: block;
	font-size: var(--credpl-small-size);
	color: var(--credpl-muted);
}

.credpl-credential-block .credpl-credential-date-value {
	display: block;
	font-size: var(--credpl-text-size);
	font-weight: 600;
	color: var(--credpl-text);
}

/* Narrow screens: the dates drop below the title, under a top border. */
@media (max-width: 640px) {
	.credpl-credential-block {
		padding: 1em;
	}

	.credpl-credential-block .credpl-credential-item {
		flex-wrap: wrap;
		padding: 1em;
	}

	.credpl-credential-block .credpl-credential-badge {
		width: 56px;
		height: 56px;
	}

	.credpl-credential-block .credpl-credential-badge img,
	.credpl-credential-block .credpl-credential-badge svg {
		width: 36px;
		height: 36px;
	}

	.credpl-credential-block .credpl-credential-dates {
		flex: 1 1 100%;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 0.75em 2em;
		align-self: auto;
		padding: 0.9em 0 0;
		border-left: 0;
		border-top: 1px solid var(--credpl-card-border);
	}
}

/* No lift or animation for visitors who ask for reduced motion; the border
   and shadow change still shows the hover. */
@media (prefers-reduced-motion: reduce) {
	.credpl-credential-block .credpl-credential-item {
		transition: none;
	}

	.credpl-credential-block .credpl-credential-item:hover,
	.credpl-credential-block .credpl-credential-item:focus-within {
		transform: none;
	}
}