/*
 * Nivåtest (/nivatest/) — page helpers. The classes are set in Advanced → CSS Classes by build_nivatest.py.
 *
 * Page states: the Nivåtest widget (tv-level-test) puts tv-lt-view-start | tv-lt-view-questions |
 * tv-lt-view-result on <body> (and tv-lt-band-<code> with the result). Sections with tv-lt-start-only /
 * tv-lt-result-only / tv-lt-for-<code> follow that state; in the Elementor editor every section stays
 * visible so it can be edited.
 */
body:not(.elementor-editor-active):not(.tv-lt-view-result) .tv-lt-result-only,
body.tv-lt-view-questions:not(.elementor-editor-active) .tv-lt-start-only,
body.tv-lt-view-result:not(.elementor-editor-active) .tv-lt-start-only { display: none !important; }

/* tv-lt-for-A1 … tv-lt-for-C1: content for one result level only (e.g. a recommended chapter per level). */
body:not(.elementor-editor-active):not(.tv-lt-band-A1) .tv-lt-for-A1,
body:not(.elementor-editor-active):not(.tv-lt-band-A2) .tv-lt-for-A2,
body:not(.elementor-editor-active):not(.tv-lt-band-B1) .tv-lt-for-B1,
body:not(.elementor-editor-active):not(.tv-lt-band-B2) .tv-lt-for-B2,
body:not(.elementor-editor-active):not(.tv-lt-band-C1) .tv-lt-for-C1 { display: none !important; }

/* While the questions are shown the widget's short legal line replaces the site footer. */
body.tv-lt-view-questions:not(.elementor-editor-active) .elementor-location-footer { display: none !important; }

/* tv-lt-bleed: a column that runs out towards the right edge of the screen on wide screens, like the
   start photo in the design (width + max(2.5rem, (100vw - 80rem) / 2)). Uses the column's own width. */
@media (min-width: 1024px) {
	.tv-lt-bleed {
		--tv-bleed: max(2.5rem, (100vw - 80rem) / 2);
		width: calc(var(--width) + var(--tv-bleed)) !important;
		max-width: none !important;
		margin-right: calc(-1 * var(--tv-bleed)) !important;
	}
}

/* tv-lt-bullets (Icon List): three short points with a small steel square, in three columns from 640px. */
.tv-lt-bullets .elementor-icon-list-items { display: grid; gap: .75rem; }
.tv-lt-bullets .elementor-icon-list-items .elementor-icon-list-item { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: 0; }
.tv-lt-bullets .elementor-icon-list-item::before {
	content: "";
	flex: 0 0 auto;
	width: .5rem;
	height: .5rem;
	margin-top: .5rem;
	border-radius: 2px;
	background: var(--e-global-color-secondary, #2d6ca9);
}
@media (min-width: 640px) {
	.tv-lt-bullets .elementor-icon-list-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* tv-lt-points (Icon List): the soft-gold strip under the start screen, three columns from 768px. */
.tv-lt-points .elementor-icon-list-items { display: grid; gap: 1rem; }
.tv-lt-points .elementor-icon-list-items .elementor-icon-list-item { display: flex; align-items: center; gap: .75rem; margin: 0; padding: 0; }
.tv-lt-points .elementor-icon-list-item::before {
	content: "";
	flex: 0 0 auto;
	width: .625rem;
	height: .625rem;
	border-radius: 3px;
	background: var(--e-global-color-secondary, #2d6ca9);
}
@media (min-width: 768px) {
	.tv-lt-points .elementor-icon-list-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

/* tv-lt-underline (Heading with a link): underlined text link with a bright 2px line. */
.tv-lt-underline .elementor-heading-title a {
	text-decoration: underline;
	text-decoration-color: var(--e-global-color-b1a8e7f, #44a8e7);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* tv-lt-start-photo (Image): the design's layered photo shadow (the Box Shadow control has one layer). */
.tv-lt-start-photo img { box-shadow: 0 20px 58px rgba(5, 22, 68, .1), 0 3px 10px rgba(5, 22, 68, .05); }

/* tv-lt-cover (Image): the photo fills its column and never gets shorter than --tv-lt-min. On phones,
   where the photo sits above the text, its height follows the photo's 4:3 shape like the design. */
.tv-lt-cover { flex-grow: 1; align-self: stretch; }
.tv-lt-cover .elementor-widget-container { height: 100%; }
.tv-lt-cover img { display: block; width: 100%; height: 100% !important; min-height: var(--tv-lt-min, 20rem); object-fit: cover; }
.tv-lt-cover-18 { --tv-lt-min: 18rem; }
@media (max-width: 767px) {
	.tv-lt-cover img { height: auto !important; aspect-ratio: 4 / 3; }
}

/*
 * Breakpoints. Elementor's tablet values apply up to and including 1024px and its mobile values up to
 * 767px; the design switches at 1024px (lg) and 640px (sm). The rules below restore the design at the
 * edges. They repeat the desktop/tablet values set in the panel: change both if you change those.
 */

/* Exactly 1024px wide (e.g. iPad landscape): the design already uses its wide layout. */
@media (min-width: 1024px) and (max-width: 1024px) {
	.tv-lt-hero.e-con { --padding-top: 144px !important; --padding-right: 40px !important; --padding-bottom: 80px !important; --padding-left: 40px !important; }
	.tv-lt-hero-row.e-con { --flex-direction: row !important; --align-items: center !important; }
	.tv-lt-hero-text.e-con { --width: 48.62% !important; }
	.tv-lt-hero-visual.e-con { --width: 46.71% !important; }
	.tv-lt-hero-title .elementor-heading-title { font-size: 72px !important; }
	.tv-lt-strip.e-con,
	.tv-lt-rec.e-con,
	.tv-lt-save.e-con { --padding-right: 40px !important; --padding-left: 40px !important; }
	.tv-lt-prem-body.e-con { --padding-right: 56px !important; --padding-left: 56px !important; }
}

/* 640–767px (large phones in landscape, small tablets): the design already uses its sm values. */
@media (min-width: 640px) and (max-width: 767px) {
	.tv-lt-hero-title .elementor-heading-title { font-size: 60px !important; }
	.tv-lt-rec.e-con { --padding-top: 72px !important; --padding-bottom: 72px !important; }
	.tv-lt-rec-body.e-con { --padding-top: 40px !important; --padding-right: 40px !important; --padding-bottom: 40px !important; --padding-left: 40px !important; }
	.tv-lt-prem-body.e-con { --padding-right: 40px !important; --padding-left: 40px !important; }
	.tv-lt-prem-title .elementor-heading-title { font-size: 36px !important; }
	.tv-lt-save-row.e-con { --flex-direction: row !important; --align-items: center !important; --flex-wrap: nowrap !important; }
	.tv-lt-save-text.e-con { --width: auto !important; }
}
/* The start photo keeps its full height above 640px (the design's small photo is for 640px and below). */
@media (min-width: 641px) and (max-width: 767px) {
	.tv-lt-hero-visual.e-con { --min-height: 544px !important; }
	.tv-lt-start-photo img { height: 520px !important; }
	.tv-lt-gold-shape.e-con { --width: calc(100% - 64px) !important; --min-height: calc(100% - 48px) !important; top: 48px !important; left: 48px !important; }
}