/**
 * Avløserkortet — brand styleguide (structural layer)
 *
 * Cascade lag 3, loaded after tokens.css.
 *
 * NOTE (TSK-18630): brand COLORS live in Astra Customizer (global palette +
 * Additional CSS), migrated to Terjes styleguide via the idempotent script
 * scripts/migrate-styleguide-colors.php. This stylesheet therefore holds only
 * the NON-brand, plugin-markup-specific structural overrides extracted from the
 * old inline wp_add_inline_style() hacks in fonts.php — no color values.
 */

/* Progress-card actions row layout (plugin markup). */
.progress-card .progress-card-actions {
	display: flex;
	gap: var(--sp-sm);
	flex-wrap: wrap;
	margin-top: .75rem;
}

/* "Min profil" dropdown: compress vertical spacing (plugin markup). */
.mk-user-menu__dropdown-item {
	padding: .4rem .9rem !important;
	line-height: 1.3 !important;
}
.mk-user-menu__dropdown-header {
	padding: .6rem .9rem !important;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.mk-user-menu__dropdown-name,
.mk-user-menu__dropdown-email {
	margin: 0 !important;
	line-height: 1.3 !important;
}
.mk-user-menu__dropdown-divider {
	margin: .15rem 0 !important;
}

/* ──────────────────────────────────────────────────────────────
 * Kurs singulær — kanonisk kursmodul-omslag (Avløserkortet-only)
 *
 * Nye .avlk-cover-/.avlk-cbtn-/.avlk-cpill-klasser i template-markupen
 * (single-scorm_package.php). De er IKKE styrt av Customizer Additional
 * CSS — derfor ingen spesifisitetskrig. Kun token-referanser; fleet-
 * pluginen (mentorkit-lms) røres ikke.
 * ────────────────────────────────────────────────────────────── */

/* Nøytraliser fleet single-course.css .course-header{display:flex} +
   hold breadcrumb-raden på lys side over det grønne båndet. */
.avlk-single .course-header {
	display: block;
	background: transparent;
	margin: 0;
	gap: 0;
}

.avlk-single .avlk-cover {
	background: var(--color-brand-deep);
	color: var(--color-paper);
	border-radius: var(--r-card);
	padding: var(--sp-xl);
	margin: var(--sp-lg) 0 var(--sp-xl);
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: var(--sp-xl);
	align-items: center;
}
@media (max-width: 900px) {
	.avlk-single .avlk-cover { grid-template-columns: 1fr; gap: var(--sp-lg); }
}
/* Featured image (utvalgt bilde) i omslaget */
.avlk-single .avlk-cover__media {
	position: relative;
	margin: 0;
	border-radius: var(--r-card);
	overflow: hidden;
	background: #16442f;
	aspect-ratio: 4 / 3;
	min-height: 200px;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35);
}
.avlk-single .avlk-cover__media svg,
.avlk-single .avlk-cover__media .avlk-cover__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.avlk-single .avlk-cover__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .55rem .85rem;
	font-size: .66rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
	background: linear-gradient(transparent, rgba(0, 0, 0, .45));
}
.avlk-single .avlk-cover__hint {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .85rem;
	color: rgba(255, 255, 255, .82);
	margin-bottom: var(--sp-md);
}
.avlk-single .avlk-cover__hint svg { width: 16px; height: 16px; }
.avlk-single .avlk-cover__eyebrow {
	display: block;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}
.avlk-single .avlk-cover__title {
	color: var(--color-paper);
	font-weight: 700;
	font-size: clamp(1.7rem, 3.2vw, 2.6rem);
	line-height: 1.12;
	margin: var(--sp-md) 0 0;
	max-width: 22ch;
}
.avlk-single .avlk-cover__lede {
	color: rgba(255, 255, 255, .82);
	margin-top: var(--sp-md);
	max-width: 56ch;
}
.avlk-single .avlk-cover__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	margin-top: var(--sp-lg);
}
.avlk-single .avlk-cpill {
	display: inline-flex;
	align-items: center;
	padding: .25rem .8rem;
	border-radius: var(--r-pill);
	font-size: .8rem;
	font-weight: 500;
	color: var(--color-paper);
	border: 1px solid rgba(255, 255, 255, .45);
}
.avlk-single .avlk-cover__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
	margin-top: var(--sp-lg);
}
.avlk-single .avlk-cbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	white-space: nowrap;
	min-height: 48px;
	padding: 0 var(--sp-lg);
	border-radius: var(--r-pill);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.avlk-single .avlk-cbtn--cta {
	background: var(--color-cta);
	color: var(--color-ink);
}
.avlk-single .avlk-cbtn--cta:hover {
	background: var(--color-cta-hover);
}
.avlk-single .avlk-cbtn--cta.is-disabled {
	opacity: .55;
	pointer-events: none;
}
.avlk-single .avlk-cbtn--ghost {
	background: transparent;
	color: var(--color-paper);
	border-color: rgba(255, 255, 255, .5);
}
.avlk-single .avlk-cbtn--ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .08);
}

/* ──────────────────────────────────────────────────────────────
 * Hero — kompetansebevis-kort (avlk/stamp block → .avlk-cred)
 *
 * Nye klasser, ikke styrt av Customizer. `aside.avlk-cred` (0,1,1) for
 * å slå evt. auto `.wp-block-avlk-stamp` (0,1,0). Kun token-referanser.
 * ────────────────────────────────────────────────────────────── */
aside.avlk-cred {
	position: relative;
	width: 100%;
	max-width: 460px;
	margin: 0;
	padding: 0;
	background: var(--color-paper);
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	overflow: hidden;
	transform: rotate(1.4deg);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset,
		0 10px 30px -10px rgba(15, 35, 25, .18),
		0 30px 60px -30px rgba(15, 35, 25, .22);
}
.avlk-cred__head {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	align-items: center;
	gap: var(--sp-md);
	padding: var(--sp-md) var(--sp-lg);
	background: var(--color-brand-deep);
	color: var(--color-paper);
}
.avlk-cred__logo { position: relative; width: 34px; height: 34px; display: block; }
.avlk-cred__logo .b { position: absolute; left: 3px; top: 5px; width: 26px; height: 28px; background: rgba(217, 217, 217, .6); }
.avlk-cred__logo .f { position: absolute; left: 0; top: 0; width: 26px; height: 32px; background: var(--color-brand-logo); }
.avlk-cred__id { display: flex; flex-direction: column; line-height: 1.1; }
.avlk-cred__wm { font-weight: 700; font-size: .9rem; letter-spacing: .05em; }
.avlk-cred__tag { margin-top: 2px; font-size: .66rem; font-style: italic; color: rgba(255, 255, 255, .78); }
.avlk-cred__stamp {
	position: relative;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: var(--color-cta);
	color: var(--color-ink);
	display: grid;
	place-items: center;
	outline: 1.5px solid rgba(255, 255, 255, .5);
	outline-offset: 3px;
	transform: rotate(-8deg);
}
.avlk-cred__stamp::after { content: ""; position: absolute; inset: 5px; border: 1px dotted rgba(10, 10, 10, .3); border-radius: 50%; }
.avlk-cred__stamp span { font-size: .5rem; font-weight: 700; letter-spacing: .04em; text-align: center; line-height: 1.05; white-space: nowrap; }
.avlk-cred__scene { aspect-ratio: 16 / 7; background: #edf3ee; }
.avlk-cred__scene svg { display: block; width: 100%; height: 100%; }
.avlk-cred__body { padding: var(--sp-md) var(--sp-lg) var(--sp-lg); background: var(--color-paper); }
.avlk-cred__rows { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md) var(--sp-lg); margin: 0; }
.avlk-cred__rows dt { font-size: .62rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--color-ink-mute); }
.avlk-cred__rows dd { margin: 1px 0 0; font-size: .95rem; font-weight: 500; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.avlk-cred__foot {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: var(--sp-md) 0 0;
	padding-top: var(--sp-md);
	border-top: 1px solid var(--color-line);
	font-size: .875rem;
	color: var(--color-ink-mute);
}
.avlk-cred__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-cta); box-shadow: 0 0 0 3px rgba(9, 192, 102, .15); flex-shrink: 0; }
@media (max-width: 900px) {
	aside.avlk-cred { transform: none; margin: 0 auto; }
}

/* ──────────────────────────────────────────────────────────────
 * Hero (forside) — lys tekst på det grønne cover-båndet.
 *
 * Cover-blokken er feil-flagget `is-light` over en mørk grønn overlay,
 * så globale h1/p-regler (color: ink) gjorde hero-teksten mørk og
 * lavkontrast. Tving lys tekst på venstre side. Kort-dataene er ikke
 * <p> (untatt footer, som ekskluderes), så credential-kortet er trygt.
 * ────────────────────────────────────────────────────────────── */
body.home .wp-block-cover.is-light .wp-block-cover__inner-container h1.wp-block-heading {
	color: var(--color-paper);
}
body.home .wp-block-cover.is-light .wp-block-cover__inner-container p:not(.avlk-cred__foot) {
	color: rgba(255, 255, 255, .85);
}