/* ==========================================================================
   MODERN 2026 RE-SKIN — Institute of Psychometric Coaching
   --------------------------------------------------------------------------
   Loaded AFTER default.css + cms.css. It never renames or removes the legacy
   markup contract (#header, #menu, .box, .button, #content, CMS classes…),
   it only re-themes it — so CMS-editor content and page-specific bodies
   keep working untouched.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
	--brand-950: #071f3a;
	--brand-900: #0a2e52;
	--brand-800: #0f3d6b;
	--brand-700: #114577;            /* heritage navy */
	--accent:    #2563eb;
	--accent-strong: #1d4ed8;
	--accent-soft: #eaf1fe;
	--cta:       #059669;
	--cta-strong:#047857;
	--amber:     #d97706;
	--bg:        #f5f7fb;
	--surface:   #ffffff;
	--text:      #0f172a;
	--text-soft: #46536b;
	--muted:     #64748b;
	--border:    #e3e8f0;
	--border-soft:#edf1f7;
	--radius:    8px;                        /* squarer, institutional feel */
	--radius-sm: 6px;
	--radius-xs: 4px;
	--page-pad:  clamp(20px, 4.5vw, 80px);   /* fluid page gutter — full-screen layout */
	--shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 6px rgba(15,23,42,.05);
	--shadow-md: 0 4px 14px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.06);
	--shadow-lg: 0 16px 40px rgba(15,23,42,.14);
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	        "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------ global reset */
html { -webkit-text-size-adjust: 100%; }

body {
	font-family: var(--font);
	background: var(--surface);
	color: var(--text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
img[src=""] { display: none; }

::selection { background: var(--accent-soft); color: var(--brand-800); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}
::placeholder { color: var(--muted); opacity: 1; }

/* ------------------------------------------------------------- typography */
h1, h1 a {
	font-family: var(--font);
	font-size: clamp(30px, 2.6vw, 42px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--brand-900);
	letter-spacing: -0.02em;
	padding: 0 0 20px 0;
}
h2, h2 a {
	font-family: var(--font);
	font-size: clamp(21px, 1.7vw, 26px);
	font-weight: 650;
	line-height: 1.3;
	color: var(--brand-900);
	letter-spacing: -0.01em;
	padding: 0 0 12px 0;
}
h3, h3 a {
	font-family: var(--font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--brand-800);
	padding: 0 0 10px 0;
}
h4, h4 a {
	font-family: var(--font);
	font-size: 16px;
	font-weight: 650;
	color: var(--text);
	padding: 0 0 8px 0;
}
p {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--text-soft);
	padding: 0 0 14px 0;
}
p span { font-size: inherit !important; }
li { font-size: 15.5px; line-height: 1.7; color: var(--text-soft); }

li a, p a, span a, a {
	color: var(--accent);
	text-decoration: none;
	transition: color .15s ease;
}
li a:hover, p a:hover, a:hover { color: var(--accent-strong); text-decoration: underline; }
li a:visited, p a:visited { color: var(--accent); }
li a:active, p a:active { color: var(--accent-strong); }
a:hover img { opacity: 1; filter: none; }

/* CMS editor content niceties (keeps cms.css classes working, restyled) */
.cmsBlock ul { list-style: none; }
.cmsBlock ul li {
	background: none;
	position: relative;
	padding: 3px 0 6px 24px;
	color: var(--text-soft);
}
.cmsBlock ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.72em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}
blockquote {
	margin: 8px 0 18px;
	padding: 14px 20px;
	border-left: 4px solid var(--accent);
	background: var(--accent-soft);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* legacy tick lists from the editor get a crisp SVG check */
ul.listTypeTick { list-style: none; padding-left: 4px; }
.listTypeTick li {
	list-style: none;
	list-style-image: none;
	position: relative;
	padding-left: 26px;
}
.listTypeTick li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23d1fae5'/%3E%3Cpath fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 8.4l2.4 2.4 4.6-5'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* ------------------------- editor-authored content hardening ------------- */
#content { overflow-wrap: break-word; }
#content::after { content: ""; display: table; clear: both; }   /* floated editor images can't overflow the card */
#content table { border-collapse: collapse; max-width: 100%; }
#content table td, #content table th { padding: 8px 12px; }
/* tables the editor drew with visible borders get a modern grid */
#content table[border]:not([border="0"]) th,
#content table[border]:not([border="0"]) td {
	border: 1px solid var(--border);
}
#content table[border]:not([border="0"]) th {
	background: var(--bg);
	color: var(--brand-900);
	font-weight: 600;
	text-align: left;
}
#content table[border]:not([border="0"]) tr:nth-child(even) td { background: #fafbfe; }
#content iframe, #content video, #content embed, #content object { max-width: 100%; }
#content img.floatLeft { margin: 4px 20px 12px 0; border-radius: var(--radius-xs); }
#content img.floatRight { margin: 4px 0 12px 20px; border-radius: var(--radius-xs); }
#content hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 22px 0;
}
#content p a, #content li a {
	text-decoration: underline;
	text-decoration-color: rgba(37, 99, 235, .35);
	text-underline-offset: 2px;
}
#content p a:hover, #content li a:hover { text-decoration-color: var(--accent-strong); }

/* ----------------------------------------------- layout: full-bleed 2026 */
.container {
	width: auto !important;
	max-width: none;
	margin: 0;
	padding-left: var(--page-pad);
	padding-right: var(--page-pad);
}
#main { background: var(--surface); }
#main-content {
	max-width: none;
	background: transparent;
	padding: 0 0 60px;
	display: flex;
	flex-direction: column;
}
#main-content > * { min-width: 0; }
#content {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 30px 0 44px !important;
	min-height: 380px;
	max-width: 1240px;          /* comfortable reading measure inside the full-bleed frame */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
/* content is always full width — the old right rail is re-flowed below it
   (legacy rightLeftCol caps max-width at 486px; clear it too) */
#main-content.rightCol #content,
#main-content.rightLeftCol #content,
#main-content.leftCol #content,
#main-content.noCol #content { width: 100%; max-width: 1240px; }
/* the strip is repositioned by JS to sit after the page intro (inside #content),
   so full-bleed uses the 100vw technique which works from any container */
#sidebar, #sidebar-lower {
	order: -1;                               /* pre-JS fallback position: above content */
	float: none;
	clear: both;
	width: 100vw !important;
	background: var(--bg);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 420px));
	justify-content: center;
	gap: 16px;
	align-items: stretch;
	border-top: 1px solid var(--border-soft);
	border-bottom: 1px solid var(--border-soft);
	margin: 26px calc(50% - 50vw) 30px;
	padding: 30px max(var(--page-pad), calc(50vw - 620px)) 34px;
}
#sidebar-lower { order: 0; margin-top: 34px; }
body { overflow-x: clip; }                  /* 100vw includes the scrollbar width */

/* --------------------------- header: slim single-row sticky bar (2026) */
#header {
	height: auto !important;
	background: var(--surface) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	box-shadow: none;
	margin: 0 calc(-1 * var(--page-pad)) 0;
	padding: 0 var(--page-pad) 0 !important;
}
.top-bar-menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px 20px;
	padding: 10px 0;
}
#logo2.logo { display: flex; align-items: center; }
/* dark-text logo sits directly on the white header */
#logo2.logo a {
	display: inline-block;
	background: none;
	border-radius: 0;
	padding: 0;
	line-height: 0;
}
img.header_logo.header-logo { max-width: 265px !important; width: auto; height: auto; display: block; }
.maintopbarright {
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;              /* search + member login stay on one line */
	gap: 26px;
	min-width: 0;
	float: none !important;
}
/* legacy margins/heights knock these out of line — normalise to one 40px row */
.maintopbarright .searchbox { margin: 0; }
.maintopbarright .searchbox form { height: 40px; margin: 0; }
#member-login, .member-area {
	float: none;
	margin: 0;
	padding: 0;
	height: auto;
	border: none;
}
.member-area a, #member-logout h3 { height: 40px; box-sizing: border-box; }

/* search */
.searchbox { width: auto; min-width: 0; flex: 0 1 auto; }
.searchbox form {
	display: flex;
	align-items: center;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 2px 4px 2px 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.searchbox form:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.searchbox .typetext {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	font-family: var(--font);
	font-size: 14px;
	color: var(--text);
	width: 150px;
	min-width: 0;
	height: 34px;
	padding: 0;
}
.searchbox .typetext:focus { outline: none; }
.searchbox .typesubmit {
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: var(--radius-xs);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease;
}
.searchbox .typesubmit:hover { background: var(--accent-strong); }

/* member login / logout */
.member-area a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-800);
	background: var(--accent-soft);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	padding: 8px 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.member-area a:hover { background: var(--accent); color: #fff; text-decoration: none; }
#member-logout { position: relative; cursor: pointer; }
#member-logout h3 {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-800);
	background: var(--accent-soft);
	border-radius: var(--radius-sm);
	padding: 8px 16px;
	margin: 0;
	white-space: nowrap;
}
.toolbar-member-option {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	min-width: 190px;
	z-index: 300;
}
.toolbar-member-option a {
	display: block;
	padding: 10px 16px;
	font-size: 14px;
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid var(--border-soft);
}
.toolbar-member-option a:hover { background: var(--accent-soft); color: var(--accent-strong); }
.toolbar-member-option a.logout { color: #b91c1c; }

/* ------------------- menu: second header row under logo/search/login */
#header #menu {
	height: auto;                 /* legacy pins it to 27px */
	z-index: auto;
	margin: 0 calc(-1 * var(--page-pad));
	padding: 0 var(--page-pad);
	border-top: 1px solid var(--border-soft);
}
#header #menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 2px;
	margin: 0;
	padding: 6px 0;
	background: transparent;
	border: none;
	border-radius: 0;
}
#header #menu li { float: none; display: block; line-height: normal; background: none; }
#header #menu li a {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text-soft);
	border-radius: var(--radius-sm);
	background: none;
	transition: background .15s ease, color .15s ease;
}
#header #menu li a span { padding: 9px 15px; margin: 0; background: none; }
#header #menu li:hover { text-decoration: none; }
/* legacy sets color:#fff !important on hover/active — match its weight */
#header #menu li a:hover { background: var(--accent-soft); color: var(--brand-800) !important; box-shadow: none; }
#header #menu li a:hover span { color: var(--brand-800); }
#header #menu li.active a { background: var(--brand-800); color: #fff !important; }
#header #menu li.active a:hover { background: var(--brand-700); color: #fff !important; }
#header #menu li.active a:hover span { color: #fff; }

/* header quick-action buttons row → hero band with headline */
#header .button-menu {
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start !important;   /* inline style centres it */
	gap: 8px;
	margin: 16px calc(-1 * var(--page-pad)) 0 !important;
	padding: 46px max(var(--page-pad), calc(50vw - 620px)) 50px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 360'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07'%3E%3Ccircle cx='430' cy='180' r='150' stroke-width='34'/%3E%3Ccircle cx='430' cy='180' r='86' stroke-width='22'/%3E%3C/g%3E%3Cpath d='M330 190 L410 268 L560 60' fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='46' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 4vw center / auto 125% no-repeat,
		linear-gradient(180deg, var(--brand-950) 0%, var(--brand-900) 100%);
	border-bottom: 4px solid var(--accent);
}
body.home #header .button-menu { padding-top: 52px; padding-bottom: 56px; }
#header .button-menu .hero-copy {
	flex: 0 0 100%;               /* full row — buttons always drop below */
	width: 100%;
	text-align: left;
	padding: 0 0 14px;
}
#header .button-menu .hero-copy .hero-title,
#header .button-menu .hero-copy .hero-sub { max-width: 840px; }
#header .button-menu .hero-copy .hero-title {
	color: #fff;
	font-size: clamp(28px, 2.6vw, 46px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	padding: 0 0 10px;
}
#header .button-menu .hero-copy .hero-sub {
	color: #ffffff;
	font-size: clamp(15px, 1.15vw, 18px);
	padding: 0;
}
/* identical size and shade for every band button, regardless of extra classes */
#header .button-menu .button {
	margin: 4px !important;
	font-size: 16px !important;
	padding: 13px 26px !important;
	transform: none !important;
}
#header .button-menu .button.basic,
#header .button-menu a.button.basic:link,
#header .button-menu a.button.basic:visited,
#header .button-menu .button.basic.mid {
	background: transparent;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.5);
	box-shadow: none;
}
#header .button-menu .button.basic:hover, #header .button-menu a.button.basic:hover {
	background: #fff;
	color: var(--brand-900) !important;
	border-color: #fff;
}
#header .button-menu .btn-buy-preparation-now { box-shadow: none; }

/* ------------------------------------------------------------ breadcrumb */
#breadcrumb {
	font-size: 13px;
	color: var(--muted);
	padding: 0 0 18px 0;
}
#breadcrumb a { color: var(--muted); text-decoration: none; }
#breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
#breadcrumb span { color: var(--brand-800); font-weight: 600; }

/* ------------------------------------------------- content page hero feel */
#content > h1:first-of-type::after,
#content h1:first-child::after {
	content: "";
	display: block;
	width: 68px;
	height: 4px;
	border-radius: 2px;
	margin-top: 16px;
	background: var(--accent);
}
#content h1 + p {
	font-size: 18px;
	line-height: 1.75;
	color: var(--text-soft);
}
/* the banner carries the headline; the homepage's own H1 reads as a lead-in */
body.home #content > h1 {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--muted);
	max-width: 980px;
	letter-spacing: 0;
}
body.home #content > h1::after { display: none; }

/* homepage topic sections (h2 + paragraph pairs) re-flow into a card grid —
   the pairs are wrapped client-side; if the script finds nothing, the page
   simply keeps its normal single-column flow */
.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	gap: 18px;
	margin: 10px 0 30px;
}
.info-card {
	background: var(--bg);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	padding: 24px 26px 20px;
}
.info-card h2 {
	font-size: 19px;
	padding-bottom: 10px;
	border-left: 4px solid var(--accent);
	padding-left: 12px;
	margin-left: -16px;
}
.info-card p { font-size: 14.5px; line-height: 1.7; padding-bottom: 0; }

/* -------------------------------------------------------------- buttons */
.button {
	font-family: var(--font);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	text-decoration: none !important;
	background: var(--accent);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	padding: 11px 20px;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: background .15s ease, transform .1s ease, box-shadow .15s ease,
	            color .15s ease, border-color .15s ease;
}
.button:hover {
	background: var(--accent-strong);
	color: #fff;
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
	text-decoration: none;
}
.button:active { transform: translateY(0); }
.button span, .button i { background: none !important; padding: 0; }

.button.basic,
a.button.basic:link,
a.button.basic:visited {
	background: var(--surface);
	color: var(--brand-800) !important;   /* legacy a.button.basic:visited paints it white */
	border-color: var(--border);
	box-shadow: var(--shadow-sm);
}
.button.basic:hover, a.button.basic:hover {
	background: var(--accent-soft);
	color: var(--accent-strong) !important;
	border-color: var(--accent);
}
a.button:visited { color: #fff; }         /* filled buttons stay white-on-color */
.button.alt,
.btn-buy-preparation-now {
	background: linear-gradient(180deg, #34d399 0%, #10b981 100%) !important;
	color: #06281a !important;              /* dark text on green — softer contrast */
	border: none;
	font-weight: 650;
	padding: 11px 20px;                     /* legacy .button.alt pins 5px 10px */
	font-size: 15px;
}
.button.alt span, .btn-buy-preparation-now span,
.button.alt i, .btn-buy-preparation-now i { color: #06281a !important; }
.button.alt:hover,
.btn-buy-preparation-now:hover {
	background: linear-gradient(180deg, #10b981 0%, var(--cta) 100%) !important;
	color: #06281a !important;
}
.button.alt-2 { background: var(--brand-800); }
.button.alt-2:hover { background: var(--brand-700); }
.button.sm { font-size: 13px; padding: 7px 14px; }
.button.mid { font-size: 15px; padding: 11px 22px; }
.button.big { font-size: 17px; padding: 15px 30px; border-radius: var(--radius); }
.button.disabled, .button.disabled:hover {
	background: var(--border) !important;
	color: var(--muted) !important;
	box-shadow: none;
	transform: none;
	cursor: default;
}
.button.with-icon i { position: static; }

/* editor-authored image tiles wrapped in .button links — render as plain
   images (the old design had no button chrome; the new card look broke them) */
.button:has(img) {
	background: #ffffff !important;
	border: 1px solid var(--border) !important;
	box-shadow: var(--shadow-sm) !important;
	padding: 8px !important;
	min-width: 0 !important;
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	vertical-align: top;
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin: 5px !important;
	transform: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
/* image-only tiles: uniform squares */
.button:has(img):not(:has(p)) {
	width: 190px !important;
	height: 190px !important;
}
/* image + caption tiles (e.g. free tests): natural height, readable text —
   editor content hard-codes white text from the old navy buttons */
.button:has(img):has(p) {
	width: 100% !important;
	max-width: 280px;
	height: auto !important;
	flex-direction: column;
	align-items: stretch;
	padding: 8px 8px 12px !important;
}
.button:has(img), .button:has(img) a, .button:has(img) p, .button:has(img) span {
	color: var(--brand-900) !important;
}
.button:has(img):has(p) p {
	font-size: 14.5px !important;
	font-weight: 600;
	line-height: 1.45 !important;
	min-height: 0 !important;
	padding: 10px 4px 0 !important;
	text-align: center;
}
.button:has(img):has(p) img { width: 100% !important; min-height: 0 !important; height: auto !important; }
.button:has(img) img {
	border-radius: var(--radius-xs);
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* containers holding image tiles: flex rows of fixed-size tiles — stray
   text nodes can't create empty cells the way grid tracks do */
:is(h1, h2, h3, p):has(.button img) {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 0;
	line-height: 0;
	padding: 0 0 14px;
}
:is(h1, h2, h3, p):has(.button img) > .button {
	width: 190px !important;
	height: 190px !important;
	margin: 0 !important;
	flex: 0 0 auto;
}
@media screen and (max-width: 600px) {
	:is(h1, h2, h3, p):has(.button img) { gap: 10px; }
	:is(h1, h2, h3, p):has(.button img) > .button {
		width: calc(50% - 5px) !important;
		height: 150px !important;
	}
	.button:has(img) {
		width: calc(50% - 12px) !important;
		height: 150px !important;
	}
}
.button:has(img):hover {
	background: #ffffff !important;
	border-color: var(--accent) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md) !important;
}

/* --------------------------------------------------------------- forms */
input[type="text"], input[type="email"], input[type="password"],
textarea, select {
	font-family: var(--font);
	font-size: 15px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xs);
	padding: 10px 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
label { font-weight: 600; color: var(--text); }

.ErrorMsg {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	margin-bottom: 18px;
}
.ErrorMsg p, .ErrorMsg li { color: #b91c1c; }

/* ------------------------------------------------------------- side menu */
.pagemenu {
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 10px;
}
.pagemenu ul { list-style: none; margin: 0; padding: 0; }
.pagemenu li { background: none; }
.pagemenu a {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-soft);
	text-decoration: none;
	border-radius: var(--radius-xs);
	padding: 8px 12px;
	transition: background .15s ease, color .15s ease;
}
.pagemenu a:hover { background: var(--accent-soft); color: var(--accent-strong); }
.pagemenu li.active > a,
.pagemenu a.active { background: var(--brand-800); color: #fff; }
.pagemenu .subpagemenu { margin-left: 12px; border-left: 2px solid var(--border-soft); }
.pagemenu-base { display: none; }
/* a page menu with no items renders as an empty white bar — hide it,
   along with its mobile "show sub menu" toggle */
.pagemenu:not(:has(li)) { display: none; }
#main-content:has(.pagemenu:not(:has(li))) .interior-menu-toggle { display: none !important; }

/* ---------------------- former sidebar boxes → modern feature-strip cards */
#sidebar .box, .box {
	background: var(--bg);
	border: none;
	border-radius: var(--radius);
	box-shadow: none;
	margin: 0 0 16px 0;
	padding: 22px 20px;
	overflow: hidden;
}
#sidebar .box, #sidebar-lower .box {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	box-shadow: var(--shadow-sm);
	padding: 20px 18px 22px;
	transition: transform .15s ease, box-shadow .15s ease;
}
#sidebar .box:hover, #sidebar-lower .box:hover { transform: none; box-shadow: var(--shadow-md); }
#sidebar .box .boxtop, #sidebar-lower .box .boxtop { text-align: center; margin-bottom: 8px; }
#sidebar .box .boxtop h2, #sidebar-lower .box .boxtop h2 { text-align: center; }
#sidebar .box .boxmid, #sidebar-lower .box .boxmid { flex: 1 1 auto; width: 100%; }

/* legacy rule hides #boxFreeTests when inside #content (it was meant for the
   mobile-JS duplicate); the strip now legitimately lives there — restore it
   while it is still inside the strip */
#content #sidebar #boxFreeTests { display: flex; }

/* strip polish: no tooltip icon in cards; clean link separators */
#sidebar .box .help-popup, #sidebar-lower .box .help-popup { display: none; }
#sidebar .box .boxlist li, #sidebar-lower .box .boxlist li {
	border-bottom: 1px solid var(--border-soft) !important;
	background: none;
}
#sidebar .box .boxlist li:last-child, #sidebar-lower .box .boxlist li:last-child { border-bottom: none !important; }

/* icon chips on the identifiable cards */
#boxFreeTests::before, #boxCoursePreviews::before, #boxGuarante::before {
	content: "";
	width: 44px;
	height: 44px;
	border-radius: 12px;
	margin-bottom: 12px;
	background-color: var(--accent-soft);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px;
}
#boxFreeTests::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='m9 13 2 2 4-4'/%3E%3C/svg%3E");
}
#boxCoursePreviews::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5'/%3E%3C/svg%3E");
}
#boxGuarante::before {
	background-color: #d1fae5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
#sidebar #boxGuarante .button, #sidebar-lower #boxGuarante .button { width: auto; min-width: 210px; }
#sidebar #boxGuarante img, #sidebar-lower #boxGuarante img { max-width: 110px; }

/* ---------------- testimonial + payment strip: after the content ---------- */
#testimonial-strip {
	clear: both;
	text-align: center;
	border-top: 1px solid var(--border-soft);
	margin: 6px 0 0;
	padding: 34px 0 8px;
}
#testimonial-strip .box {
	background: transparent;
	border: none;
	box-shadow: none;
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
}
#testimonial-strip .boxtop { text-align: center; }
#testimonial-strip .boxtop h2 { display: inline-block; padding-right: 6px; }
#testimonial-strip .boxPaypal { margin: 16px 0 0; padding: 0; }
.box .boxtop {
	background: none;
	box-shadow: none;
	margin-bottom: 12px;
	text-align: left;
}
.box .boxtop:empty { display: none; }
.box .boxtop h2 {
	font-size: 16px;
	font-weight: 650;
	color: var(--brand-900);
	text-align: left;
	padding: 0;
	background: none;
}
.box .boxmid { background: none; padding: 0; }
.box .boxbot { display: none; }
.box .boxmid .button { width: 100%; margin-bottom: 10px; }

.boxlist { list-style: none; margin: 0; padding: 0; }
.boxlist li { background: none; padding: 0; border-bottom: 1px solid var(--border-soft); }
.boxlist li:last-child { border-bottom: none; }
.boxlist li a {
	display: block;
	font-size: 14px;
	color: var(--text-soft);
	text-decoration: none;
	padding: 8px 2px;
}
.boxlist li a:hover { color: var(--accent-strong); }

/* testimonials */
#testimonials { margin: 0; }
#testimonials .testimonial:first-child { display: block; }
#testimonials .boxmid_testimonial {
	background: var(--accent-soft);
	border-radius: var(--radius-sm);
	padding: 16px;
}
#testimonials .boxmid_testimonial p,
#testimonials .boxmid_name p { width: auto; min-height: 0; }
#testimonials .boxmid_testimonial p em { color: var(--brand-800); font-size: 14px; }
#testimonials .open-quot, #testimonials .close-quot { display: none; }
#testimonials .boxmid_name p { font-size: 13px; color: var(--muted); padding: 10px 4px 0; }
.boxPaypal {
	position: static;
	text-align: center;
	margin: 0 0 18px;
	padding: 6px 0 0;
}
#boxFreeTests .button { width: 100%; margin: 0 0 10px; }

/* ----------------------------------------------------------- collapsible */
.block.bg-1 {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 8px 0;
	margin: 30px 0;
}
.block.bg-1 > h2 {
	font-size: clamp(22px, 1.9vw, 30px);
	padding-bottom: 18px;
}
.collapsible .subHeading.panel-head {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	padding: 15px 46px 15px 18px;
	margin-bottom: 10px;
}
.collapsible .subHeading.panel-head:hover {
	border-color: var(--accent);
	background: var(--surface);
	box-shadow: var(--shadow-md);
}
.collapsible .panel-cnt {
	padding: 6px 18px 14px;
	border-left: 3px solid var(--accent-soft);
	margin: 0 0 12px 4px;
}
.collapsible .subHeading.panel-head {
	position: relative;
	font-size: 16px;
	font-weight: 600;
	color: var(--brand-800);
	background: var(--bg);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
	padding: 12px 42px 12px 16px;
	margin-bottom: 8px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.collapsible .panel-head .arrow-right,
.collapsible .panel-head .arrow-right-white {
	position: absolute;
	right: 14px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M7 4.5L13 10l-6 5.5'/%3E%3C/svg%3E") center/14px no-repeat;
	float: none;
	transition: transform .18s ease;
}
.collapsible .panel-head.active { border-color: var(--accent); }
.collapsible .panel-head.active .arrow-right,
.collapsible .panel-head.active .arrow-right-white { transform: rotate(90deg); }
.collapsible .subHeading.panel-head:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
}
.collapsible .panel-cnt { padding: 4px 16px 10px; }

/* ------------------------------------------------- get-prepared selector */
/* ---- the centrepiece: two-stage preparation selector, government-form style */
#getprepared-box {
	--gpb-pad: 32px;                /* title bar negative margin tracks this */
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: 0 var(--gpb-pad) 36px;
	overflow: hidden;
}
#getprepared-box .divider1 { background: transparent; }
#getprepared-box .class-list li a::before { border-color: #b9c8e2; }
#getprepared-box #gpb-title h2 {
	background: var(--brand-900);
	color: #fff !important;
	font-size: clamp(20px, 1.7vw, 27px);
	margin: 0 calc(-1 * var(--gpb-pad)) 22px;
	padding: 20px var(--gpb-pad);
}
/* legacy floats every .divider and its h4 — restore normal block flow */
#getprepared-box .divider {
	float: none;
	clear: both;
	width: 100%;
	background: transparent;
	margin: 20px 0 0;
	padding: 6px 0 0;
}
#getprepared-box .divider h4 {
	float: none;
	color: var(--brand-900);
	font-size: 17px;
	font-weight: 650;
	border-left: 4px solid var(--accent);
	padding: 2px 0 2px 12px;
	display: inline-block;
}
#getprepared-box .divider.divider2 {
	width: 100%;
	clear: both;
	background: transparent;
	margin-top: 20px;
	padding-top: 22px;
	border-top: 1px solid var(--border-soft);
}
#getprepared-box .gpb-select {
	display: block;
	width: min(100%, 420px);
	font-family: var(--font);
	font-size: 15px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	margin: 14px 0 4px;
}
#getprepared-box .gpb-select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
/* level select + Go side by side on desktop; trust badges close the panel */
#getprepared-box .gpb-select {
	display: inline-block;
	float: none;                      /* legacy floats it left, tangling the Go button */
	vertical-align: middle;
	width: min(100%, 420px);
	margin: 14px 0 4px;
}
#getprepared-box #bph {
	display: inline-flex;
	vertical-align: middle;
	min-width: 220px;
	font-size: 18px;
	padding: 14px 34px;
	margin: 14px 0 4px 14px;
}
/* divider2 already clears the floated lists; the leftover spacer divs only
   force line breaks between the level select and the Go button */
#getprepared-box .clearFloat { display: none; }
.gpb-trust {
	list-style: none;
	clear: both;
	margin: 18px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--border-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
}
.gpb-trust li {
	background: none;
	position: relative;
	padding: 0 0 0 24px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-soft);
}
.gpb-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23d1fae5'/%3E%3Cpath fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 8.4l2.4 2.4 4.6-5'/%3E%3C/svg%3E") center/16px no-repeat;
}
@media screen and (max-width: 600px) {
	#getprepared-box #bph { margin: 12px 0 4px; width: 100%; }
}
#getprepared-box .divider.divider4 { background: transparent; margin-top: 18px; }
#getprepared-box .divider.divider4 h4 {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--muted) !important;
	border-left: none;
	padding-left: 0;
	line-height: 1.6;
}
#getprepared-box .class-list { list-style: none; }
#getprepared-box .class-list li { background: none; padding-left: 5px; }
#getprepared-box .class-list li a {
	position: relative;
	font-size: 14px;
	color: var(--text-soft);
	text-decoration: none;
	border-radius: var(--radius-xs);
	padding: 6px 8px 6px 36px !important;   /* text clear of the checkbox */
	display: inline-block;
	background: none !important;
	transition: background-color .15s ease, color .15s ease;
}
/* touch devices: legacy html.touch rule shrinks the link padding — restore
   geometry there (user-verified fix) */
html.touch #getprepared-box .class-list li a {
	max-width: 80%;
	float: left;
	margin: 4px;
}
#getprepared-box .class-list li a::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	border: 2px solid var(--border);
	border-radius: 5px;
	background: var(--surface);
	transition: border-color .15s ease, background .15s ease;
}
#getprepared-box .class-list li a:hover {
	background-color: var(--accent-soft) !important;
	color: var(--accent-strong);
}
#getprepared-box .class-list li a:hover::before { border-color: var(--accent); }
#getprepared-box .class-list li a.catSelected {
	background-color: var(--brand-800) !important;
	color: #fff;
}
#getprepared-box .class-list li a.catSelected::before {
	border-color: #fff;
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/12px no-repeat;
}
#chelp, #chelpbp {
	background: linear-gradient(180deg, #34d399 0%, #10b981 100%) !important;
	border-radius: var(--radius-sm) !important;
}

/* organisations strip */
#test-organisations {
	background: transparent;
	border: none;
	border-top: 1px solid var(--border-soft);
	border-bottom: 1px solid var(--border-soft);
	border-radius: 0;
	padding: 26px 0 16px;
	margin: 18px 0 30px;
	text-align: center;
}
#test-organisations h3 {
	font-size: 12.5px;
	color: var(--muted);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	padding-bottom: 14px;
}
/* logo wall: full colour */
#test-organisations img,
#organisations img { filter: none; opacity: 1; }
#organisations {
	background: transparent;
	border: none;
	box-shadow: none;
}
/* white-background logos blend into tinted modules (light backgrounds only) */
#sidebar .box img, #sidebar-lower .box img,
.boxPaypal img,
#organisations img { mix-blend-mode: multiply; }
/* on the dark footer, white-background images read as cards — round them instead */
#footer .footer-block img { border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------- popup */
.popup {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	padding: 12px 14px;
}
.popup p { font-size: 13px; color: var(--text-soft); padding-bottom: 0; }

/* --------------------------------------------------------------- footer */
#footer {
	background: var(--brand-950);
	border-radius: 0;
	margin-top: 20px;
}
#footer .container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 26px;
	background: transparent;
	padding-top: 40px;
	padding-bottom: 28px;
}
.footer-block {
	flex: 1 1 200px;
	width: auto;
	min-height: 0;
	float: none;
	border-right: none;
	margin-bottom: 0;
}
.footer-block img { border-radius: var(--radius-sm); }
#footer p, #footer .container.clearfix p,
div#footer_quot1 strong, .footer-block.menu p, .footer-block.menu a {
	color: #cbd7ea;
}
#footer a { color: #ffffff; text-decoration: none; }
#footer a:hover { color: #ffffff; text-decoration: underline; }
div#footer_quot1 {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--radius-sm);
	padding: 6px 10px;
}
div#footer_quot1 p:first-child { padding: 12px; font-size: 13.5px; }
#footer .container > div:last-child { flex-basis: 100%; }
#footer .container > div:last-child p {
	color: #8fa3c4;
	font-size: 13px;
	border-top: 1px solid rgba(255,255,255,.1);
	padding-top: 18px;
	margin-top: 4px;
}
#footer-mobile { background: var(--brand-950); }
#footer-mobile p { color: #8fa3c4; font-size: 13px; padding: 16px; }
#footer-mobile a { color: #cbd7ea; }

/* ---------------------------------------------------------- help widget */
.helpModule { left: auto; right: 18px; bottom: 18px; width: 340px; }
.helpModule .helpModuleCollapsed {
	background: var(--brand-800);
	border-radius: 999px;
	box-shadow: var(--shadow-md);
	padding: 4px 16px;
	line-height: 34px;
	width: auto;
	margin-left: auto;
	transition: background .15s ease, transform .12s ease;
}
.helpModule .helpModuleCollapsed:hover { background: var(--brand-700); transform: translateY(-2px); }
.helpModule .helpModuleCollapsed .helpModuleCollapsedTitle {
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}
.helpModule .helpModuleCollapsed:hover .helpModuleCollapsedTitle { text-decoration: none; }
.helpModule .helpModuleCollapsed .helpQuestionImage { height: 17px; filter: brightness(0) invert(1); }
.helpModule { width: auto; max-width: 340px; }
.helpModule .helpModuleOpen {
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
.helpModule .helpModuleOpen .helpModuleHeader {
	background: var(--brand-900);
	color: #fff;
	padding: 22px 20px 16px;
}
.helpModule .helpModuleOpen .helpModuleHeader .helpModuleTitle {
	font-size: 20px;
	font-weight: 650;
	color: #fff;
}
.helpModule .helpModuleOpen .helpModuleHeader .helpModuleTitle .helpQuestionImage { filter: brightness(0) invert(1); height: 22px; }
.helpModule .helpModuleOpen .helpModuleHeader .helpModuleSubtitle { color: #cbd7ea; font-size: 13.5px; }
.helpModule .helpModuleOpen .helpCloseBtn img,
.helpModule .helpModuleOpen .helpCollapseBtn img { filter: brightness(0) invert(1); }
.helpModule .contactForm input[type="text"],
.helpModule .contactForm input[type="email"],
.helpModule .contactForm textarea {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-xs);
	width: 100%;
	margin-bottom: 12px;
	padding: 10px 14px;
}
.contactSubmitButton {
	font-family: var(--font);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--accent);
	border: none;
	border-radius: var(--radius-sm);
	padding: 11px 22px;
	width: 100%;
	cursor: pointer;
	transition: background .15s ease;
}
.contactSubmitButton:hover { background: var(--accent-strong); }

/* ------------------------------------------------ inner pages: forms */
fieldset {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	padding: 24px 26px;
	margin: 0 0 20px;
	max-width: 640px;
}
legend {
	font-weight: 650;
	font-size: 17px;
	color: var(--brand-900);
	padding: 0 10px;
}
fieldset.imbedded2, fieldset.imbedded {
	background: var(--bg);
	border-color: var(--border-soft);
	margin-top: 22px;
	float: none;
	clear: both;
	width: auto;
}
/* legacy floats the login list at 48% — stack it inside the form card */
#loginForm ul.login-form { width: 100%; float: none; }
#loginForm fieldset { max-width: 560px; }
ul.login-form, fieldset ul { list-style: none; margin: 0; padding: 0; }
ul.login-form li, fieldset ul li { background: none; padding: 6px 0; }
fieldset label { display: block; font-size: 14px; margin-bottom: 4px; }
fieldset label.checkLabel { display: inline; font-weight: 400; margin-left: 6px; }
fieldset input.textBox { width: 100%; max-width: 380px; }
.SuccessMsg {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	margin-bottom: 18px;
}
.SuccessMsg p { color: var(--cta-strong); padding-bottom: 0; }
.ErrorMsg.MsgOnly p, .SuccessMsg.MsgOnly p { padding-bottom: 0; }

/* ------------------------------------- inner pages: cart + checkout */
#content table.product, table.product { width: 100%; border-collapse: collapse; }
table.product th {
	background: var(--brand-900);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-align: left;
	padding: 12px 14px;
}
table.product td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--border-soft);
	font-size: 14.5px;
	color: var(--text-soft);
}
table.product tr.total td { font-weight: 650; color: var(--brand-900); background: var(--bg); }
.remove-item, .remove-all { color: #b91c1c; font-size: 13px; }
.checkout-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 18px; }

/* ------------------------- inner pages: select-preparation product cards */
.columns-selectp {
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 16px !important;
	margin: 0 .6% 14px;
	width: 23.3%;
}
.columns-selectp:hover { box-shadow: var(--shadow-md); }
.grey-selectp { background: var(--bg); border-radius: var(--radius-sm); }
.price-selectp { font-weight: 700; color: var(--brand-900); }
.productCost-strike { color: var(--muted); text-decoration: line-through; }
.productCost-red { color: var(--cta-strong); font-weight: 700; }
.gray-box {
	background: var(--bg);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	padding: 20px 22px;
}
.sub-heading { color: var(--brand-800); font-weight: 650; }
.readmorelink { color: var(--accent); font-size: 13.5px; }

/* --------------------------- inner pages: purchase progress bar steps */
#purchaseBar .number, .purchaseBar .number {
	background: var(--border);
	color: var(--text-soft);
	border-radius: 50%;
	font-weight: 650;
}
#purchaseBar .active .number, .purchaseBar .active .number,
#purchaseBar .number.active { background: var(--accent); color: #fff; }

/* -------------------------------------------------------------- banners */
#mobile-uni-banner { border-radius: var(--radius-sm); margin: 14px auto; }
.addToAny { opacity: .85; }

/* ------------------------------------------------------------ tablet/mobile */
@media screen and (max-width: 962px) {
	body { background: var(--surface); }
	#main { background: var(--surface); }

	/* header becomes a compact white app bar */
	#header {
		background: var(--surface) !important;
		background-image: none !important;
		height: auto !important;
		border-radius: 0;
		margin: 0 calc(-1 * var(--page-pad)) 12px;
		padding: 0 var(--page-pad) 10px !important;
		position: static;
		box-shadow: none;
	}
	.top-bar-menu {
		padding: 10px 0;
		flex-wrap: nowrap;
		gap: 8px;
		align-items: center;
	}
	#logo2.logo { flex: 1 1 auto; justify-content: center; min-width: 0; }
	.maintopbarright { margin-left: 0; gap: 8px; }
	/* the site JS relocates the search box into the drawer menu on mobile —
	   keep it out of the top bar so logo and Login have room */
	.top-bar-menu .searchbox { display: none; }
	.toggle-nav { flex: 0 0 30px; display: block; }
	img.header_logo.header-logo { max-width: 190px !important; }
	#logo2.logo a { padding: 0; background: none; }

	/* hamburger — dark lines on white header */
	.toggle-nav { margin-top: 4px; }
	.toggle-nav span { background-color: var(--brand-900); height: 3px; }

	/* drawer */
	#mobile-nav {
		background: var(--brand-950);
		box-shadow: var(--shadow-lg);
	}
	#mobile-nav header {
		background: var(--brand-900);
		color: #fff;
		font-family: var(--font);
		padding: 14px 20px;
	}
	#mobile-nav ul li { border-bottom: 1px solid rgba(255,255,255,.08); font-size: 15px; }
	#mobile-nav a { color: #e6edf8; padding: 12px 20px; }
	#mobile-nav ul li.active > a,
	#mobile-nav ul li.expand > a { background: var(--brand-800); }
	#mobile-nav ul li ul { background: rgba(255,255,255,.05); }
	#mobile-nav .searchbox form { margin: 10px 16px; background: rgba(255,255,255,.1); border-color: transparent; }
	#mobile-nav .searchbox .typetext { color: #fff; width: 100%; }

	/* flat full-width content on mobile */
	#content { padding: 8px 0 30px !important; border-radius: 0; }
	#main-content.rightCol #content,
	#main-content.rightLeftCol #content { width: 100% !important; }
	#sidebar, #sidebar-lower {
		width: 100vw !important;
		margin: 18px calc(50% - 50vw) 22px;
		padding: 24px var(--page-pad) 28px;
		border-left: none;
		gap: 14px;
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	}

	/* a .panel-cnt with no clickable .panel-head has no way to open on mobile
	   (legacy CSS hides them all) — keep headerless panels always visible */
	.collapsible > .panel-cnt:not(.panel-head + .panel-cnt) { display: block; }

	/* the rotating-quote plugin stamps a desktop pixel width/height inline —
	   neutralise it so the testimonial wraps inside its card on mobile */
	#testimonial-strip #testimonials { height: auto !important; }
	#testimonial-strip #testimonials .testimonial {
		position: static !important;
		width: auto !important;
		max-width: 100%;
	}
	.block, .block.bg-1 { margin: 18px 0; padding: 20px 18px; }
	.bg-1 { background-color: var(--bg); }

	#header .button-menu {
		margin: 10px calc(-1 * var(--page-pad)) 0 !important;
		padding: 18px var(--page-pad) 22px;
	}
	#header .button-menu .button, #header .button-menu a.button {
		flex: 1 1 100%;
		width: 100%;
		box-sizing: border-box;
		font-size: 15px !important;
		padding: 13px 18px !important;
		margin: 5px 0 !important;
	}
	#header .button-menu > div {
		width: 100%;
		flex: 1 1 100%;
		margin: 0 !important;
	}
	#header .button-menu > div .button { width: 100%; }

	#footer { border-radius: 0; }

	/* Mobile help widget: #main.slide-cnt gets a transform here, which breaks
	   position:fixed for descendants — so, like the legacy CSS, use sticky,
	   but anchored bottom-RIGHT and compact instead of a full-width left bar */
	.helpModule {
		position: -webkit-sticky;
		position: sticky;
		bottom: 12px;
		left: auto;
		width: fit-content;
		max-width: min(92vw, 340px);
		margin-left: auto;
		margin-right: 12px;
	}
	.helpModule .helpModuleCollapsed {
		margin: 0 0 0 auto;
		height: auto;
		max-width: none;
		width: fit-content;
		padding: 8px 20px;
	}
	.helpModule .helpModuleCollapsed .helpModuleCollapsedTitle {
		font-size: 15px;
		line-height: 22px;
		white-space: nowrap;
	}
	.helpModule .helpModuleOpen {
		position: relative;
		left: 0;
		width: min(92vw, 340px);
		margin-top: 0;
	}
}

@media screen and (max-width: 767px) {
	/* wide editor-authored tables scroll inside the card instead of breaking layout */
	#content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	#content img.floatLeft, #content img.floatRight {
		float: none;
		display: block;
		margin: 10px auto;
	}
}

@media screen and (max-width: 600px) {
	h1, h1 a { font-size: 25px; }
	/* topic cards use the full screen width — no double margins */
	.info-grid { gap: 12px; margin: 6px 0 22px; }
	.info-card {
		margin: 0 calc(-1 * var(--page-pad) + 3px);   /* small 3px inset from the screen edge */
		border-radius: var(--radius-sm);
		border-left: 1px solid var(--border-soft);
		border-right: 1px solid var(--border-soft);
		padding: 18px 16px 14px;
	}
	.info-card h2 { margin-left: -16px; }
	h2, h2 a { font-size: 20px; }
	#menu ul { border-radius: var(--radius); }
	#header .button-menu .button { flex: 1 1 100%; }
	#getprepared-box { --gpb-pad: 14px; padding: 0 var(--gpb-pad) 22px; }
	#getprepared-box .class-list li { width: 100%; }
	.footer-block { flex-basis: 100%; }
}


/* --------------------- laptop widths: keep the header on one row -------- */
@media screen and (min-width: 963px) and (max-width: 1500px) {
	img.header_logo.header-logo { max-width: 210px !important; }
	.searchbox .typetext { width: 120px; }
}


/* ---------- Buy-Preparation industry/job-level panel (#selectPreperation) */
#selectPreperation {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	background: var(--bg) !important;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px 20px !important;
}
#selectPreperation #menu {
	flex: 1 1 auto;
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	border: none;
}
#selectPreperation ul.selCat { display: flex; gap: 16px; width: 100%; }
#selectPreperation ul.selCat > li {
	float: none;
	width: auto;
	flex: 1 1 0;
	display: block;
}
#selectPreperation ul li.first { margin-right: 0; }
#selectPreperation h2 {
	font-size: 14px;
	font-weight: 650;
	color: var(--brand-900);
	padding-bottom: 4px;
	text-align: left;
}
#selectPreperation ul li a, #selectPreperation ul li a:hover {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: #fff;
}
#selectPreperation #go {
	margin-left: auto;
	align-self: flex-end;
	min-width: 150px;
	font-size: 16px;
	padding: 12px 30px;
}
@media screen and (max-width: 962px) {
	#selectPreperation { flex-wrap: wrap; padding: 16px 14px !important; }
	#selectPreperation #menu { width: 100%; }
	#selectPreperation ul.selCat { flex-wrap: wrap; }
	#selectPreperation ul.selCat > li { flex: 1 1 100%; width: 100%; }
	#selectPreperation #go { width: 100%; margin-left: 0; }
}


/* ---------------- sub menu (.pagemenu): modern chip bar ------------------ */
.pagemenu {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 4px 0 0;
	margin: 0 0 6px;
}
.pagemenu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 0 !important;      /* legacy JS stamps a row-based min-height */
	margin: 0;
	padding: 0;
}
.pagemenu > ul > li { position: relative; background: none; }
.pagemenu ul li a, .pagemenu ul li a:hover {
	background: var(--bg) !important;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text-soft);
	padding: 8px 18px;
	width: auto;
	height: auto;
	line-height: 1.4;
	font-size: 13.5px;
	font-weight: 600;
	display: inline-block;
	text-decoration: none;
}
.pagemenu ul li a:hover {
	background: var(--accent-soft) !important;
	border-color: var(--accent);
	color: var(--accent-strong);
}
.pagemenu ul li.active > a, .pagemenu a.active {
	background: var(--brand-800) !important;
	border-color: var(--brand-800);
	color: #fff;
}
@media screen and (min-width: 963px) {
	/* desktop: no toggle — the chips are always visible */
	.interior-menu-toggle { display: none !important; }
	.pagemenu > ul { display: flex !important; }
}
@media screen and (max-width: 962px) {
	.interior-menu-toggle {
		background: var(--brand-900) !important;
		color: #fff;
		border: none;
		border-radius: var(--radius-sm);
		padding: 11px 16px;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		cursor: pointer;
		margin: 0 0 10px;
		width: auto;
	}
	.interior-menu-toggle span { color: #fff; }
	.pagemenu ul li { width: auto; }
}


/* chip sizing: legacy forces li width 25% / min-height 85px and gradient hovers */
.pagemenu li, .pagemenu > ul > li {
	width: auto;
	float: none;
	min-height: 0;
	margin: 0;
}
.pagemenu > ul > li > a {
	background: var(--bg) !important;
	border: 1px solid var(--border) !important;
	border-radius: 999px !important;
	color: var(--text-soft) !important;
	padding: 8px 18px !important;
	font-size: 13.5px !important;
	font-weight: 600;
	line-height: 1.4 !important;
	height: auto !important;
	min-height: 0 !important;      /* legacy min-height: 55px */
	width: auto !important;
	display: inline-block !important;
	text-decoration: none !important;
}
html.no-touch .pagemenu > ul > li > a:hover,
html.no-touch .pagemenu > ul > li:hover > a {
	background: var(--accent-soft) !important;
	border-color: var(--accent) !important;
	color: var(--accent-strong) !important;
}
.pagemenu > ul > li.expanded > a,
.pagemenu > ul > li.active > a {
	background: var(--brand-800) !important;
	border-color: var(--brand-800) !important;
	color: #fff !important;
}


/* sub-menu aligns with the content column, no stray box */
#main-content > .pagemenu, .pagemenu {
	width: 100% !important;
	max-width: 1240px;
	margin: 0 auto !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 16px 0 0 !important;
}


/* ------------- sub-menu open state: floating dropdown under the chip ----- */
.pagemenu > ul > li { position: relative; }
.pagemenu ul.subpagemenu {
	display: none;                       /* opened by the existing JS */
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 600;
	min-width: 280px;
	max-width: 360px;
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: var(--shadow-lg) !important;
	margin: 0 !important;
	padding: 6px !important;
	gap: 0;
}
.pagemenu ul.subpagemenu li {
	width: 100% !important;
	float: none;
	min-height: 0;
	border: none;
}
.pagemenu ul.subpagemenu li a, .pagemenu ul.subpagemenu li a:hover {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: var(--radius-xs) !important;
	padding: 9px 12px !important;
	font-size: 13.5px !important;
	font-weight: 500;
	line-height: 1.5 !important;
	color: var(--text-soft) !important;
	text-decoration: none !important;
}
.pagemenu ul.subpagemenu li a:hover {
	background: var(--accent-soft) !important;
	color: var(--accent-strong) !important;
}
.pagemenu ul.subpagemenu li.active > a {
	background: var(--brand-800) !important;
	color: #fff !important;
}
/* chips that have a dropdown get a small caret */
.pagemenu > ul > li:has(ul.subpagemenu) > a { padding-right: 34px !important; }
.pagemenu > ul > li:has(ul.subpagemenu) > a::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
@media screen and (max-width: 962px) {
	/* on phones the dropdown expands in place, full width */
	.pagemenu ul.subpagemenu {
		position: static;
		min-width: 0;
		max-width: none;
		width: 100%;
		box-shadow: none !important;
		margin: 6px 0 !important;
	}
}


/* Buy-Preparation + free-test pages: the card strip shows only Partnering */
.strip-partner-only #sidebar > .box { display: none !important; }
.strip-partner-only #sidebar > #boxPartner { display: flex !important; }
.strip-partner-only #sidebar { grid-template-columns: minmax(0, 430px); }


/* -------- free-test cards: one flowing grid (columns merged by JS) ------- */
.freeTestButton {
	float: none !important;
	width: 100% !important;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: stretch;
	padding: 6px 0 14px;
}
.freeTestButton .button:has(img) {
	width: 300px !important;
	height: 330px !important;        /* identical card size for every test */
	max-width: 100%;
	margin: 0 !important;
	flex: 0 0 auto;
}
.freeTestButton .button:has(img) a {
	display: flex !important;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.freeTestButton .button:has(img) img {
	width: 100% !important;
	height: 180px !important;
	object-fit: cover;
	padding: 0 !important;
	min-height: 0 !important;
}
.freeTestButton .button:has(img) p {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
@media screen and (max-width: 700px) {
	.freeTestButton .button:has(img) { width: 100% !important; }
}
/* sections that follow floated columns/banners must drop below them */
.faq-header, .faq-content, .faq-question { clear: both; }
.title-banner { margin-bottom: 14px; }

/* editor "title banner" strips: modernise the inline-styled grey banners */
.title-banner[style*="float: left"] {
	background: var(--bg) !important;
	border-radius: var(--radius) 0 0 var(--radius);
}


/* editor content that reuses the button-menu class: plain inline button row */
#content .button-menu {
	background: none !important;
	border: none !important;
	margin: 6px 0 18px !important;
	padding: 0 !important;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-start !important;   /* left-aligned, not centred */
}
#content .button-menu .button {
	margin: 0 !important;
	font-size: 15.5px !important;
	font-weight: 600;
	padding: 13px 26px !important;
}

/* title banners: force readable text (some carry inline white colour) */
.title-banner, .title-banner * { color: var(--brand-900) !important; }
.title-banner { border-radius: var(--radius); }


/* ============ Select-Preparation page (.leftContent / package cards) ===== */
/* legacy pins .leftContent to a 270px box — its content overflows and
   overlaps everything below (the real cause of the broken layout) */
.leftContent {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
	overflow: visible;
}
@media screen and (min-width: 963px) {
	.leftContent { max-width: calc(100% - 280px); }   /* clear of .rightContent */
}
.testimoni { margin: 18px 0 0 !important; }
.testimoni p { width: auto !important; max-width: 640px; }
.testimoni .testiText { font-size: 14.5px; color: var(--text-soft); }
.rightContent {
	width: 250px !important;
	background: var(--bg);
	border-radius: var(--radius);
	padding: 12px;
	text-align: center;
}
@media screen and (max-width: 962px) {
	.rightContent {
		position: static !important;
		width: 100% !important;
		margin: 0 0 18px;
	}
}

/* package columns → equal-height grid (wrapper added by template JS) */
.selectp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	clear: both;
	margin: 10px 0 26px;
}
.selectp-grid .columns-selectp {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
	display: flex;
}
.price-selectp {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid var(--border-soft) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow-sm) !important;
	overflow: hidden;
}
.price-selectp:hover { box-shadow: var(--shadow-md) !important; }
.price-selectp .header-selectp {
	background: var(--brand-900) !important;
	font-size: 19px !important;
	font-weight: 650;
	/* equal header height across all cards, text vertically centred */
	min-height: 108px !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 14px !important;
	line-height: 1.3 !important;
	border-radius: 0 !important;
	box-sizing: border-box;
}
@media screen and (max-width: 962px) {
	.price-selectp .header-selectp { min-height: 88px !important; }
}
.price-selectp li {
	min-height: 0 !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	border-bottom: 1px solid var(--border-soft) !important;
	color: var(--text-soft);
}
.price-selectp li.empty { display: none; }
.price-selectp .grey-selectp {
	margin-top: auto;                 /* buttons align across all cards */
	background: var(--bg) !important;
	padding: 18px 14px !important;
	border-radius: 0 !important;
	text-align: center;
}
.button-selectp {
	background: linear-gradient(180deg, #34d399 0%, #10b981 100%) !important;
	color: #06281a !important;
	border-radius: var(--radius-sm) !important;
	font-size: 16px !important;
	font-weight: 650;
	display: inline-block;
	padding: 11px 24px !important;
}
.productCost, .price-selectp .productCost-red { font-weight: 700; color: var(--cta-strong); }

/* the "Emotional Intelligence tutoring" notice bar */
#content > div[style*="background-color: #e0dfdf"] {
	background: var(--accent-soft) !important;
	border: 1px solid #c7dcfb;
	border-radius: var(--radius-sm);
	clear: both;
	padding: 14px 18px !important;
	color: var(--brand-900);
	font-size: 15px;
}


/* ---------------- shopping cart: matching action buttons ---------------- */
.checkout-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
}
.checkout-buttons .button {
	float: none !important;
	min-width: 240px;
	justify-content: center;
	padding: 13px 24px !important;
	font-size: 15px !important;
	margin: 0 !important;
	border: 1px solid transparent !important;   /* identical height for both */
	box-sizing: border-box;
}
.checkout-buttons .button.basic { border-color: var(--border) !important; }
@media screen and (max-width: 600px) {
	.checkout-buttons .button { width: 100%; min-width: 0; }
}


/* ---------------- purchase progress bar (steps 1-4) --------------------- */
.purchaseBar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	height: auto !important;
	overflow: visible !important;
	margin: 0 0 26px !important;
	color: var(--muted);
}
.purchaseBar div {
	display: flex !important;
	align-items: center;
	gap: 9px;
	flex: 1 1 0;
	min-width: 150px;
	background: var(--bg) !important;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
	padding: 11px 14px !important;
	font-size: 14px;
	line-height: 1.3;
}
.purchaseBar .number, .purchaseBar .number.first {
	position: static !important;
	flex: 0 0 24px;
	width: 24px !important;
	height: 24px;
	line-height: 24px !important;
	left: auto !important;
	top: auto !important;
	border-radius: 50%;
	background: var(--border) !important;
	color: var(--text-soft);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}
.purchaseBar div span { font-weight: 600; }
.purchaseBar div span a { color: var(--accent) !important; text-decoration: none; }
.purchaseBar div span a:hover { text-decoration: underline; }
.purchaseBar .arrow, .purchaseBar .arrowlast { display: none !important; }
.purchaseBar div.barSelected {
	background: var(--accent-soft) !important;
	border-color: var(--accent);
	color: var(--brand-900);
	text-decoration: none !important;
}
.purchaseBar div.barSelected .number { background: var(--accent) !important; color: #fff; }
.purchaseBar div.barSelected span { color: var(--brand-900); }
@media screen and (max-width: 700px) {
	.purchaseBar div { flex: 1 1 100%; }
}
/* the bar sits above the package grid on Select-Preparation — full width */
.selectp-grid + .purchaseBar, .purchaseBar + .selectp-grid { margin-top: 0; }