/*
Theme Name: ExaMission
Theme URI: https://examission.com
Author: ExaMission
Author URI: https://examission.com
Description: Full Site Editing theme for ExaMission, a Pakistani competitive-exam MCQ preparation platform (PPSC, FPSC, NTS, CSS, PMS, entry tests, and more). Pairs with the ExaMission Core plugin.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.0.88-milestone11
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: examission
Tags: education, block-theme, full-site-editing

This stylesheet intentionally holds only what theme.json cannot express
(structural/behavioral CSS — sticky header, focus outlines, the sun/moon
dark-mode toggle, skip link). All color, type, and spacing DESIGN TOKENS
live in theme.json so the Site Editor stays the single source of truth.
*/

/* ---------- Accessibility: skip link ---------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.skip-link {
	position: absolute;
	top: -100px;
	left: 0.5rem;
	background: var(--wp--preset--color--ink);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 6px 6px;
	z-index: 100000;
	transition: top 0.15s ease;
}
.skip-link:focus {
	top: 0;
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
}

/* ---------- Header site title (logomark + two-tone wordmark) ----------
   Custom HTML rather than the core/site-title block — that block only
   outputs the site's title as one plain string with no way to color
   "Exa" and "Mission" differently, or place a mark beside it. This
   hardcodes the two-tone split, which does mean it won't auto-update
   if the Site Title in Settings is ever changed (a real trade-off, not
   an accident) — reasonable here since this is a deliberate wordmark
   treatment, not a generic dynamic title.

   The mark itself: an open book — per explicit user preference,
   replacing an earlier checkmark-in-a-circle. A clear, immediately
   recognizable study/exam-prep symbol. Same navy/gold language as the
   rest of the header — the spine is the one gold line, keeping the
   mark from competing with the wordmark it sits beside. Redesigned
   with gradient-shaded pages (depth, a more premium feel than the
   original flat fill), subtle page-line detail, and a small gold
   achievement star with its own gentle continuous shimmer — "alive"
   even before it's touched, not just reacting on hover. */
.examission-site-title {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	line-height: 1;
}
.examission-site-title__mark {
	display: inline-flex;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	filter: drop-shadow(0 2px 4px rgba(27, 58, 107, 0.25));
	transition: transform 0.25s ease, filter 0.25s ease;
}
.examission-site-title:hover .examission-site-title__mark {
	transform: rotate(-8deg) scale(1.08);
	filter: drop-shadow(0 4px 10px rgba(232, 160, 32, 0.35)) drop-shadow(0 2px 4px rgba(27, 58, 107, 0.2));
}
.examission-site-title__mark svg {
	width: 100%;
	height: 100%;
}
/* A gentle continuous shimmer on the star gives the mark a subtle
   "alive" quality even before it's touched, not just on hover. */
.examission-site-title__star {
	transform-origin: 25px 8px;
	animation: examission-star-shimmer 2.4s ease-in-out infinite;
}
@keyframes examission-star-shimmer {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
	.examission-site-title__star {
		animation: none;
	}
}
.examission-site-title__wordmark {
	position: relative;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	text-shadow: 0 1px 3px rgba(27, 58, 107, 0.1);
}
.examission-site-title__wordmark::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--gold));
	transition: width 0.3s ease;
}
.examission-site-title:hover .examission-site-title__wordmark::after {
	width: 100%;
}
.examission-site-title__exa {
	color: var(--wp--preset--color--primary);
}
.examission-site-title__mission {
	color: var(--wp--preset--color--gold);
}

/* ---------- Header search bar ----------
   Replaces an earlier icon-only search link — that choice was made
   when the header row was still cramped (flexWrap: nowrap, since
   fixed). Now a proper expanding bar: flex-grow fills the space
   between the site title and the action icons naturally, rather than
   needing the old absolute-positioning trick that only worked for a
   small fixed-size icon. Reference: user-shared screenshot of a
   competitor's header search bar — colors, shape, and icon placement
   are ours, not copied. */
.examission-header-search {
	display: flex;
	align-items: center;
	position: relative;
	flex: 1 1 260px;
	max-width: 420px;
}
.examission-header-search input {
	width: 100%;
	padding: 0.65rem 2.75rem 0.65rem 1.1rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 0.9rem;
	box-shadow: var(--examission-shadow-sm);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.examission-header-search input:focus {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--paper);
	box-shadow: var(--examission-shadow-md);
	outline: none;
}
.examission-header-search button {
	position: absolute;
	right: 0.4rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.examission-header-search button:hover {
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--border);
}
.examission-header-search button svg {
	width: 1.05rem;
	height: 1.05rem;
}
/* Explicit order on every interactive header item, applied at ALL
   widths — necessary because these are now independent flex children
   (not nested in a sub-group) so mobile and desktop can each have a
   completely different arrangement via order alone, without one
   layout's requirements fighting the other's. These BASE values
   restore the exact original desktop sequence: site title, search,
   dark/light toggle, Study/Quiz toggle, Login — regardless of the
   underlying HTML order. The mobile media query below overrides every
   one of these for its own, different arrangement. */
.examission-account-link,
.examission-account-menu {
	order: 4;
}
.examission-mobile-break {
	display: none;
}
.examission-header-search {
	order: 1;
}
.examission-theme-toggle {
	order: 2;
}
.examission-quiz-mode-toggle {
	order: 3;
}
.examission-subjects-toggle {
	order: 5;
}

@media screen and (max-width: 600px) {
	/* Row 1: site title (left) + Login (right). Row 2: search icon,
	   dark/light toggle, Study/Quiz toggle, and the Subjects hamburger,
	   all together. The break spacer (flex-basis: 100%, zero height)
	   is what forces row 2 to start fresh rather than search/toggles
	   trying to fit alongside Login on row 1. */
	.examission-account-link,
	.examission-account-menu {
		order: 1;
	}
	.examission-mobile-break {
		display: block;
		flex-basis: 100%;
		height: 0;
		order: 2;
	}
	.examission-header-search {
		flex-basis: auto;
		max-width: none;
		flex-grow: 0;
		width: auto;
		order: 3;
	}
	.examission-header-search input {
		display: none;
	}
	.examission-header-search button {
		position: static;
		transform: none;
		width: 2.25rem;
		height: 2.25rem;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 999px;
	}
	.examission-header-search.is-expanded {
		flex-basis: 100%;
		width: 100%;
	}
	.examission-header-search.is-expanded input {
		display: block;
	}
	.examission-header-search.is-expanded button {
		position: absolute;
		right: 0.4rem;
		top: 50%;
		transform: translateY(-50%);
		border: none;
		width: 2rem;
		height: 2rem;
	}
	.examission-theme-toggle {
		order: 4;
	}
	.examission-quiz-mode-toggle {
		order: 5;
	}
	.examission-subjects-toggle {
		order: 6;
	}
}

/* ---------- Visible keyboard focus everywhere ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---------- Elevation scale ----------
   Soft, navy-tinted shadows rather than generic black ones — reinforces
   the "official document/seal" feel the palette is going for. Used
   sparingly: sticky header gets the smallest step, interactive hover
   states get one step up. Not exposed via theme.json because box-shadow
   isn't a theme.json style property for elements/blocks.
*/
:root {
	--examission-shadow-sm: 0 1px 3px rgba(27, 58, 107, 0.08), 0 1px 2px rgba(27, 58, 107, 0.06);
	--examission-shadow-md: 0 4px 16px rgba(27, 58, 107, 0.10), 0 2px 6px rgba(27, 58, 107, 0.07);
}
html[data-theme="dark"] {
	--examission-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
	--examission-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ---------- Fixed header ----------
   position:fixed instead of position:sticky. Sticky has a
   well-documented failure mode: ANY ancestor element with
   overflow:hidden/auto/scroll — even several levels up, even one added
   by something else entirely — silently breaks it with no error, no
   warning, nothing in the inspector to point at. Fixed has no such
   dependency: it always works. The trade-off is that a fixed element
   is taken out of normal document flow entirely, so content need not
   render underneath it — that's what --examission-header-height and
   the body padding-top below are for.

   The value below (5.5rem) is ONLY a fallback for the brief moment
   before JS runs on first paint — assets/js/header-offset.js measures
   the header's REAL rendered height and overwrites this variable
   continuously (on load, on any header size change, on viewport
   resize). An earlier version relied on this static number alone with
   no JS correction, which is exactly what caused the Subject page
   title to render underneath the header — a guessed constant can't
   account for the WP admin bar, font-loading reflow, or how the
   header's own content wraps at different widths. Don't remove the JS
   file and expect this fallback number alone to stay correct.
*/
:root {
	/* Only ever consumed by body's padding-top below — NEVER by anything
	   inside .site-header itself. Feeding this value back into the
	   header's own layout (an earlier version set it as min-height on
	   .site-header__inner) creates a feedback loop: measure the header's
	   height -> apply that height back to a descendant of the header ->
	   the header's rendered size shifts by a fraction of a pixel ->
	   ResizeObserver sees it changed -> measure again, now larger ->
	   repeat, forever. That's exactly what "the header keeps expanding
	   down and down" was. The header's height must be determined ONLY
	   by its own natural content, with nothing reading this variable
	   back into that subtree. Bumped from 5.5rem to 8rem now that the
	   header has two rows (top row + the Subjects nav row added later)
	   — still only a rough pre-JS fallback, not a hard requirement. */
	--examission-header-height: 8rem;
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	background: var(--wp--preset--color--paper);
	box-shadow: var(--examission-shadow-md);
}

/* Sticky header on scroll: hides the announcement bar and main row
   (site title/search/toggles) once scrolled down, leaving only the
   Subjects row visible — which, since it's the only remaining visible
   child of this still-fixed header, naturally becomes the new "top"
   without needing its own separate position:fixed rule. Reappears on
   scroll up (assets/js/sticky-header-scroll.js toggles the class). A
   generous max-height (comfortably larger than either row's actual
   rendered height at any screen size) is what makes the collapse
   animate smoothly rather than snapping instantly. */
.site-header__announcement,
.site-header__inner {
	max-height: 250px;
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.25s ease, padding-top 0.3s ease, padding-bottom 0.3s ease;
}
.site-header.is-scrolled .site-header__announcement,
.site-header.is-scrolled .site-header__inner {
	max-height: 0;
	opacity: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	pointer-events: none;
}

/* Fixes a real gap issue: .site-header__inner had no explicit gap
   override, so it fell back to theme.json's global 1.5rem blockGap
   default — the same root cause already found behind other spacing
   bugs in this project. That's a reasonable gap between items on the
   SAME row, but far too much vertical space between wrapped rows on
   mobile, where the header now wraps onto two rows (site title/Login,
   then search/toggles/hamburger). row-gap alone is overridden here so
   horizontal spacing between same-row items is untouched. */
.site-header__inner {
	position: relative;
	row-gap: 0.5rem;
	column-gap: 0.6rem;
}

@media screen and (min-width: 601px) {
	.examission-header-search {
		flex: 0 0 auto;
		width: 420px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	/* Keeps theme-toggle, quiz-mode-toggle, and Login tightly grouped
	   together — the search bar's own auto margins above already claim
	   the free space on either side of ITSELF, so nothing extra needs
	   to be reserved here; this is just the normal gap between them. */
}

body {
	padding-top: var(--examission-header-height);
}

/* Fixes a real, confirmed bug: WordPress's global blockGap (1.5rem,
   set in theme.json for normal page-content spacing) was ALSO being
   applied between the header template part and <main> — the root
   block list of every single template treats them as adjacent
   siblings needing that same spacing. .site-header is position:fixed
   (removed from normal flow for visual positioning), so this extra
   margin never affected the header's own position — but it DID add an
   unwanted 1.5rem gap on TOP of <main>, stacked on top of the correct,
   dynamically-measured body padding-top from header-offset.js. The
   result was a visible strip of the page's plain background between
   the header and whatever followed it — invisible when both were
   similarly light-colored (every page until now), immediately obvious
   once the hero became a dark background with that same light strip
   sitting on top of it. #main directly follows the header template
   part in every template this theme has, so this one rule fixes it
   everywhere, not just the homepage. */
#main {
	margin-top: 0 !important;
}

/* WordPress's own admin toolbar is ALSO position:fixed at top:0 when
   you're logged in — without this, our fixed header would sit exactly
   on top of it instead of below it. Matches WP core's own admin-bar
   breakpoint (46px under 783px viewport width, 32px at/above it) so
   the header always sits directly under the toolbar, never overlapping
   it. */
.admin-bar .site-header {
	top: 46px;
}
@media screen and (min-width: 783px) {
	.admin-bar .site-header {
		top: 32px;
	}
}

/* ---------- Header: account link ---------- */
.examission-account-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--examission-shadow-sm);
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.examission-account-link__icon {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
}
.examission-account-link:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
	box-shadow: var(--examission-shadow-md);
	transform: translateY(-1px);
}

/* ---------- Header: Subjects nav row ----------
   A second, deliberately dark band directly under the main header row
   — a distinct "official notice board" strip carrying the real content
   navigation (Subjects/Topics), separate from the utility row above it
   (site title, search, account, mode toggles). Idea for a two-row
   header with a dark secondary bar via a reference site the user
   shared; colors, typography, and the dropdown treatment are ours.

   On mobile, this row is hidden by default and revealed via the
   hamburger button (.examission-subjects-toggle, further down this
   file) — see that section for the full reasoning.

   :empty check: examission/subjects-nav renders nothing at all when
   there are no Subjects yet (see its render.php) — without this rule,
   a site with zero Subjects would show an empty dark bar with nothing
   in it. */
.site-header__nav-row {
	background: linear-gradient(135deg, #16233D 0%, #1B3A6B 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 2px solid var(--wp--preset--color--gold);
}
.site-header__nav-row:empty {
	display: none;
}

.examission-subjects-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}
.examission-subjects-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}
.examission-subjects-nav__link {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.85rem 1rem;
	color: rgba(255, 255, 255, 0.94);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.examission-subjects-nav__link:hover {
	color: var(--wp--preset--color--gold);
	background: rgba(255, 255, 255, 0.04);
}
/* Base (desktop) styling — blends in the same way the caret used to
   look when it was inline inside the link, before it became its own
   tap target for the mobile accordion (see render.php). No visible
   button chrome; just the icon, matching the original appearance. */
.examission-subjects-nav__caret-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0 1rem 0 0;
	margin: 0;
	color: rgba(255, 255, 255, 0.94);
	cursor: pointer;
}
.examission-subjects-nav__caret {
	width: 0.6rem;
	height: 0.6rem;
	transition: transform 0.15s ease;
}
.examission-subjects-nav__item:hover > .examission-subjects-nav__caret {
	transform: rotate(180deg);
}

/* Dropdown panel: deliberately LIGHT against the dark bar — the
   established, readable pattern for a dark top-level nav with a
   lighter flyout underneath, and it visually matches the dropdown
   styling already used for the page-list menu elsewhere on the site. */
.examission-subjects-nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	min-width: 220px;
	max-height: 60vh;
	overflow-y: auto;
	background: var(--wp--preset--color--paper, #fff);
	border-radius: 0 0 10px 10px;
	box-shadow: var(--examission-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* Fixes a real, reported bug: these were previously descendant
   selectors (no >), meaning hovering ANY item — including the
   top-level "More Subjects" trigger — revealed EVERY nested submenu
   inside it at any depth simultaneously, not just its own immediate
   one. That's why Topics nested inside "More Subjects" always showed
   up already, overlapping and overflowing other content, the moment
   "More Subjects" itself was hovered, rather than requiring a
   separate hover on each individual Subject within it. The >
   direct-child combinator scopes this correctly: hovering an item now
   only reveals its own direct submenu — a nested item still needs its
   own separate hover to reveal ITS children in turn, the correct,
   expected flyout behavior. */
.examission-subjects-nav__item:hover > .examission-subjects-nav__submenu,
.examission-subjects-nav__item:focus-within > .examission-subjects-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Fixes a real, reported bug: the "More Subjects" panel needs to stay
   open even after the mouse leaves it, for as long as its own Topics
   flyout (a separate, detached portal element — see
   subjects-nav-overflow.js) is showing, since moving the mouse INTO
   that flyout no longer satisfies this panel's own CSS :hover at all.
   JS adds/removes this class specifically for that window of time. */
.examission-subjects-nav__more--flyout-active > .examission-subjects-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.examission-subjects-nav__submenu a {
	display: block;
	padding: 0.55rem 0.85rem;
	border-radius: 6px;
	color: var(--wp--preset--color--ink, #1a1f2e);
	font-size: 0.85rem;
	text-decoration: none;
}
.examission-subjects-nav__submenu a:hover {
	background: var(--wp--preset--color--muted, #eef2f8);
	color: var(--wp--preset--color--primary, #1b3a6b);
}
/* Fixes a real, reported bug: a Subject cloned into "More Subjects"
   (see subjects-nav-overflow.js) that has its own Topics was showing
   that Topics submenu dropping BELOW it, inside the already-open
   "More Subjects" panel, rather than flying out to the side — since
   "More Subjects" sits at the far right of the nav bar, and the
   default LEFT: 100% flyout direction pushes content off the right
   edge of the screen entirely. Flies LEFT instead specifically here,
   so it stays fully on-screen and doesn't overlap or overflow other
   content. Scoped only to submenus nested inside "More Subjects" —
   an ordinary top-level Subject's own nested Topics aren't clustered
   at the viewport edge the same way, so those keep the normal
   drop-down-below behavior. */
.examission-subjects-nav__more .examission-subjects-nav__submenu .examission-subjects-nav__submenu {
	top: 0;
	left: auto;
	right: 100%;
	margin-right: 2px;
	border-radius: 10px;
	display: none;
}
.examission-subjects-nav__more .examission-subjects-nav__item:hover > .examission-subjects-nav__submenu,
.examission-subjects-nav__more .examission-subjects-nav__item:focus-within > .examission-subjects-nav__submenu {
	display: block;
}
/* Fixes the ACTUAL root cause of the flyout still not showing: a CSS
   containing-block gotcha, not a JS logic bug. The base
   .examission-subjects-nav__submenu rule sets "transform:
   translateY(-6px)" (for its own fade-in animation) — and ANY
   ancestor with a transform property creates a NEW containing block
   for position: fixed descendants, meaning position: fixed no longer
   positions relative to the actual browser viewport at all, but
   relative to that transformed ancestor instead. Since the top-level
   "More Subjects" panel itself has this transform, every pixel
   coordinate subjects-nav-overflow.js calculated (based on
   getBoundingClientRect(), which returns real VIEWPORT-relative
   coordinates) was being applied inside the wrong coordinate system
   entirely — explaining why the flyout was rendering somewhere
   incorrect rather than genuinely appearing to the left as intended.
   Removing transform specifically from this ONE panel (not any other
   dropdown on the site) fixes this — position: fixed can now
   correctly reach all the way up to the real viewport, matching what
   the JS was already calculating correctly the whole time. */
.examission-subjects-nav__more > .examission-subjects-nav__submenu {
	transform: none;
}
/* Fixes a real, reported bug: the top-level "More Subjects" panel
   needs its own overflow-y: auto for vertical scrolling (it can hold
   many overflow Subjects), but a browser forces both axes to clip
   together — so that same setting was also hiding the left-flying
   Topics submenu, which needs to escape its parent's bounds
   horizontally. These two needs genuinely conflict in plain CSS (a
   container can't scroll one axis while letting content escape the
   other), so show/hide AND positioning for this specific nested case
   are handled entirely by JS instead (see subjects-nav-overflow.js's
   showMoreFlyout()/hideMoreFlyout()) — fixed positioning is relative
   to the browser viewport itself, not any ancestor, so it completely
   escapes the parent's overflow clipping without needing to change
   that parent's own overflow behavior at all. The display:none above
   is this element's default, static state; JS overrides it (and
   position/top/left/right) via direct inline styles on hover/focus,
   which always take precedence over this rule regardless of its own
   specificity. */

/* ---------- Mobile Subjects toggle ----------
   Per direct user feedback: the Subjects row was simply invisible on
   mobile before, with no way to reach it at all. Now a hamburger
   button reveals it as a collapsible vertical list instead of trying
   to cram a horizontal row into a narrow screen. */
.examission-subjects-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	padding: 0;
}
.examission-subjects-toggle svg {
	width: 1.15rem;
	height: 1.15rem;
}
@media screen and (max-width: 781px) {
	.examission-subjects-toggle {
		display: inline-flex;
	}
	.site-header__nav-row {
		display: none;
		max-height: 70vh;
		overflow-y: auto;
	}
	.site-header__nav-row.is-open {
		display: block;
	}
	.examission-subjects-nav__list {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 0;
	}
	.examission-subjects-nav__item {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	.examission-subjects-nav__link {
		flex: 1 1 auto;
		width: auto;
		border-bottom: none;
	}
	/* On mobile the row is a plain, fully-expanded vertical list — the
	   "More Subjects" overflow bucket only exists to solve a horizontal
	   width constraint that doesn't apply here (see
	   subjects-nav-overflow.js, which skips its own logic below this
	   same breakpoint). */
	.examission-subjects-nav__more {
		display: none;
	}
	/* The caret is now its own real tap target (see render.php), not
	   just a visual decoration nested inside the link — tapping it
	   expands/collapses this Subject's Topics without navigating away,
	   handled by subjects-toggle.js. Tapping the Subject's name itself
	   still navigates normally. */
	.examission-subjects-nav__caret-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 2.75rem;
		height: 2.75rem;
		background: transparent;
		border: none;
		color: rgba(255, 255, 255, 0.7);
		cursor: pointer;
		padding: 0;
	}
	.examission-subjects-nav__caret {
		width: 0.7rem;
		height: 0.7rem;
		transition: transform 0.15s ease;
	}
	.examission-subjects-nav__item.is-expanded .examission-subjects-nav__caret {
		transform: rotate(180deg);
	}
	/* Collapsed by default — only this Subject's own caret tap reveals
	   it, per explicit user request (previously every Topic list showed
	   permanently, which was both visually noisy and not what was
	   asked for). */
	.examission-subjects-nav__submenu {
		display: none;
		flex-basis: 100%;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		background: rgba(0, 0, 0, 0.2);
		max-height: none;
		padding: 0 0 0.5rem 1rem;
		margin: 0;
	}
	.examission-subjects-nav__item.is-expanded .examission-subjects-nav__submenu {
		display: block;
	}
	/* Fixes a real, confirmed bug: this text was inheriting the
	   desktop dropdown's dark ink color (meant for a LIGHT dropdown
	   panel background), but the mobile submenu's background is dark —
	   dark text on a dark background was nearly unreadable. */
	.examission-subjects-nav__submenu a {
		color: rgba(255, 255, 255, 0.85);
	}
	.examission-subjects-nav__submenu a:hover {
		background: rgba(255, 255, 255, 0.08);
		color: var(--wp--preset--color--gold);
	}
}


/* Buttons lift slightly on hover/focus, echoing an embossed seal. */
.wp-element-button:hover,
.wp-block-button__link:hover {
	box-shadow: var(--examission-shadow-md);
	transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}

/* ---------- Sun/moon mode toggle ----------
   Icon-only, no text label — sun visible in light mode, moon visible
   in dark mode, matching the current state (not "what clicking will
   switch to"). Replaces an earlier OMR-bubble icon (a signature
   element tied to the exam-bubble motif) per explicit user preference
   for a conventional sun/moon pattern — noting the trade-off since it
   was a deliberate design choice earlier, not reversing it silently.
   Pure CSS state driven by the [data-theme] attribute set on <html> —
   see assets/js/dark-mode.js and the inline anti-flash snippet in
   wp_head.
*/
.examission-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--examission-shadow-sm);
	cursor: pointer;
	padding: 0;
	color: var(--wp--preset--color--gold);
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.examission-theme-toggle:hover {
	background: var(--wp--preset--color--muted);
	box-shadow: var(--examission-shadow-md);
	border-color: var(--wp--preset--color--gold);
}
.examission-theme-toggle__icon {
	width: 1.25rem;
	height: 1.25rem;
}
.examission-theme-toggle__icon--moon {
	display: none;
}
html[data-theme="dark"] .examission-theme-toggle__icon--sun {
	display: none;
}
html[data-theme="dark"] .examission-theme-toggle__icon--moon {
	display: block;
}

/* ---------- Generic empty-state block (archive/search "no results") ---------- */
.examission-empty-state {
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--50);
	text-align: center;
	background: var(--wp--preset--color--muted);
}

/* ---------- My Bookmarks page (Milestone 5.1) ---------- */
.examission-bookmarks-loading,
.examission-bookmarks-noscript {
	font-size: 0.9rem;
	opacity: 0.75;
}
.examission-bookmarks-pagination {
	margin-top: 1rem;
}

/* ---------- Navigation: top-level link hover ---------- */
.wp-block-navigation-item > .wp-block-navigation-item__content {
	transition: color 0.15s ease, background-color 0.15s ease;
	border-radius: 6px;
}
.wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content:hover,
.wp-block-navigation-submenu__toggle:hover {
	color: var(--wp--preset--color--primary);
}

/* ---------- Navigation: dropdown submenus ----------
   Idea (dropdown panel + mega-menu grid) adapted from a reference
   theme the user shared for visual direction — rebuilt here with our
   own palette/tokens and WordPress core's actual navigation markup,
   not their code. Core's Navigation block already handles the
   show/hide interaction (hover/focus, and the mobile overlay) on its
   own — this only adds visual polish on top of behavior that already
   works, deliberately not touching how it opens/closes. */
.wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--border, #d8dce1);
	border-radius: 10px;
	box-shadow: var(--examission-shadow-md);
	padding: 0.4rem;
	min-width: 220px;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 0.85rem;
	border-radius: 6px;
	color: var(--wp--preset--color--ink, #1a1f2e);
	white-space: nowrap;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--muted, #eef2f8);
	color: var(--wp--preset--color--primary, #1b3a6b);
}
.wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

/* Mobile overlay menu: match our palette instead of the browser
   default, so it doesn't look like an unstyled fallback. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--paper, #fff);
	color: var(--wp--preset--color--ink, #1a1f2e);
}

/* ---------- Footer ----------
   Deliberately dark regardless of the site-wide light/dark toggle — a
   common pattern (a dark footer anchoring an otherwise light page) and
   a nice, low-risk visual upgrade: it's pure CSS, doesn't touch the
   toggle mechanism, and reads intentional rather than like an
   unstyled default. Idea via the same reference theme as the
   dropdown menus above; colors, spacing, and structure are all ours.
*/
.site-footer {
	--examission-footer-bg: #0F1623;
	--examission-footer-text: rgba(232, 237, 245, 0.75);
	--examission-footer-heading: #E8EDF5;
	--examission-footer-border: rgba(232, 237, 245, 0.12);

	position: relative;
	background: linear-gradient(160deg, #0B121F 0%, #16233D 60%, #1B3A6B 100%);
	color: var(--examission-footer-text);
	margin-top: var(--wp--preset--spacing--60, 4rem);
	padding-top: 1rem;
	overflow: hidden;
}
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--primary-light), var(--wp--preset--color--gold));
	z-index: 1;
}
/* A large, soft, gold-tinted glow anchored top-right — a common,
   subtle "premium" depth cue, deliberately faint enough not to
   compete with any actual content. */
.site-footer::after {
	content: "";
	position: absolute;
	top: -12rem;
	right: -8rem;
	width: 32rem;
	height: 32rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 160, 32, 0.14) 0%, rgba(232, 160, 32, 0) 70%);
	pointer-events: none;
}
.site-footer .wp-block-site-title a,
.site-footer .wp-block-site-title {
	color: var(--examission-footer-heading) !important;
}
.site-footer__brand-row {
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.6rem;
}
.site-footer__brand-row .wp-block-site-title {
	margin: 0;
}
.site-footer__logomark {
	display: inline-flex;
	align-items: center;
	width: 2rem;
	height: 2rem;
	flex: 0 0 auto;
}
.site-footer__columns {
	position: relative;
	gap: var(--wp--preset--spacing--50, 2.5rem) var(--wp--preset--spacing--60, 3rem);
	padding-top: 0.5rem;
}
.site-footer__col {
	flex: 1 1 200px;
	max-width: 320px;
}
.site-footer__col--brand {
	flex-basis: 280px;
}
/* A subtle vertical divider before every column after the first, on
   wide screens only — adds real structure between columns without
   needing visible boxes/borders around each one. */
@media screen and (min-width: 783px) {
	.site-footer__col:not(.site-footer__col--brand):not(:first-child) {
		position: relative;
		padding-left: 2.5rem;
	}
	.site-footer__col:not(.site-footer__col--brand):not(:first-child)::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.3rem;
		bottom: 0.3rem;
		width: 1px;
		background: var(--examission-footer-border);
	}
}
.site-footer__col-title {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--examission-footer-heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.95rem;
	margin-bottom: 1.1rem;
	padding-bottom: 0.5rem;
}
/* A small, rotated-square (diamond) accent — a deliberate, simple CSS
   shape, not an icon font/SVG dependency that could fail to load. */
.site-footer__col-title::before {
	content: "";
	flex-shrink: 0;
	width: 0.4rem;
	height: 0.4rem;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
}
.site-footer__col-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.25rem;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), rgba(232, 160, 32, 0));
	border-radius: 2px;
}
/* Per user request: if a link list grows past 4 items, the rest
   should shift into a new column rather than just making the footer
   taller. grid-auto-flow: column with a fixed row count does exactly
   this — the first 4 items fill column 1 top-to-bottom, item 5
   automatically starts column 2, and so on, entirely automatically as
   the list grows or shrinks (Quick Links/blog-link/contact-link/
   about-link together, and Popular Subjects, both use this same
   class). */
.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	font-size: 0.9rem;
}
/* Per user request ("if there are more items in a column, shift it to
   next column") — but deliberately scoped to ONLY this modifier class
   (footer-subjects' own list), not the base .site-footer__links class
   above. Quick Links LOOKS like one list but is actually four
   separate blocks stacked together (a static list, then blog-link/
   contact-link/about-link each rendering their own independent
   <ul>) — applying grid-auto-flow there caused a lone item to spill
   into an awkward, isolated second column on its own, while the
   other blocks' separate lists didn't join that reflow at all,
   producing a disjointed, unbalanced layout. Top Categories is
   genuinely ONE combined list from ONE block, where this reflow
   works exactly as intended. */
.site-footer__links--reflow {
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	column-gap: 1.75rem;
	row-gap: 0.55rem;
}
.site-footer__links a,
.site-footer__nav .wp-block-navigation-item__content {
	position: relative;
	display: inline-block;
	color: var(--examission-footer-text);
	text-decoration: none;
	padding-left: 0;
	transition: color 0.15s ease, padding-left 0.18s ease;
}
.site-footer__links a::before,
.site-footer__nav .wp-block-navigation-item__content::before {
	content: '\2192';
	position: absolute;
	left: -1.1rem;
	opacity: 0;
	color: var(--wp--preset--color--gold);
	transition: opacity 0.18s ease, left 0.18s ease;
}
.site-footer__links a:hover,
.site-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--examission-footer-heading);
	padding-left: 1.1rem;
}
.site-footer__links a:hover::before,
.site-footer__nav .wp-block-navigation-item__content:hover::before {
	opacity: 1;
	left: 0;
}
.site-footer__nav {
	font-size: 0.9rem;
}
.site-footer__bottom {
	position: relative;
	border-top-color: var(--examission-footer-border) !important;
	font-size: 0.8rem;
	justify-content: flex-end;
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}
.site-footer__bottom p {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	white-space: nowrap;
	opacity: 0.8;
}
@media screen and (max-width: 480px) {
	.site-footer__bottom {
		justify-content: center;
	}
	.site-footer__bottom p {
		position: static;
		transform: none;
		text-align: center;
		width: 100%;
		margin-bottom: 0.75rem;
		white-space: normal;
	}
}
.examission-privacy-link {
	display: inline-flex;
	align-items: center;
	color: var(--examission-footer-text);
	font-size: 0.8rem;
	text-decoration: none;
	transition: color 0.15s ease;
}
.examission-privacy-link:hover {
	color: var(--examission-footer-heading);
	text-decoration: underline;
}
.examission-legal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
}
.examission-legal-links__link {
	color: var(--examission-footer-text);
	text-decoration: none;
	transition: color 0.15s ease;
}
.examission-legal-links__link:hover {
	color: var(--examission-footer-heading);
	text-decoration: underline;
}
.examission-legal-links__divider {
	color: var(--examission-footer-border);
}
.site-footer__back-to-top {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1.25rem;
	border-radius: 999px;
	border: 1px solid var(--examission-footer-border);
	color: var(--examission-footer-text);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.site-footer__back-to-top svg {
	width: 0.9rem;
	height: 0.9rem;
}
.site-footer__back-to-top:hover {
	color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	background: rgba(232, 160, 32, 0.08);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(232, 160, 32, 0.18);
}

/* ---------- Sidebar layout (Subject/Topic pages + Search) ----------
   Deliberately NOT on the homepage — a sidebar next to a hero/landing
   section reads as dated rather than purposeful; it earns its place
   specifically next to a persistent content list (MCQ cards), which is
   exactly what these two page types already are. Sticky on wide
   screens so it stays visible while scrolling a long MCQ list;
   collapses to a single stacked column on narrow screens rather than
   competing for space with the main content. */
.examission-layout-with-sidebar {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	align-items: flex-start;
}
.examission-layout-with-sidebar__main {
	flex: 1 1 0;
	min-width: 0;
}
.examission-layout-with-sidebar__side {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: sticky;
	top: calc(var(--examission-header-height) + 1.5rem);
}
@media screen and (max-width: 900px) {
	.examission-layout-with-sidebar {
		flex-direction: column;
	}
	.examission-layout-with-sidebar__side {
		flex: 1 1 auto;
		width: 100%;
		position: static;
	}
}

/* ---------- Homepage widget row ----------
   Deliberately DIFFERENT from .examission-layout-with-sidebar (used on
   Subject/Topic and Search pages) rather than reusing that narrow,
   sticky column here — a hero section's whole job is to be the visual
   focus, and squeezing a skinny sidebar next to leftover space below
   it undersells both. This is a full-width, three-across row instead;
   each widget already carries its own .examission-widget card styling,
   so no per-item styling is needed here beyond the row layout itself. */
.examission-home-widgets-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: stretch;
}
.examission-home-widgets-row > .examission-widget {
	flex: 1 1 280px;
}
@media screen and (max-width: 700px) {
	.examission-home-widgets-row {
		flex-direction: column;
	}
}

/* ---------- Sidebar widgets ---------- */
.examission-widget {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 1.25rem;
	background: var(--wp--preset--color--paper);
}
.examission-widget__title {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 1rem;
	padding-bottom: 0.65rem;
	border-bottom: 2px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--primary);
}
.examission-widget__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Browse Subjects specifically — not Recently Added, which is already
   capped at 5 items server-side and never needs this. Without a cap,
   a site with many real Subjects would grow this one widget far
   taller than everything else beside it in the sidebar. */
.examission-widget--subjects .examission-widget__list {
	max-height: 380px;
	overflow-y: auto;
	scrollbar-width: thin;
}
.examission-widget__list li {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.examission-widget__list li:last-child {
	border-bottom: none;
}
.examission-widget__list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	margin: 0 -0.75rem;
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: 0.875rem;
	position: relative;
	transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.examission-widget__list a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3rem;
	bottom: 0.3rem;
	width: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleY(0);
	transition: transform 0.15s ease;
}
.examission-widget__list a:hover {
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--muted);
	transform: translateX(3px);
}
.examission-widget__list a:hover::before {
	transform: scaleY(1);
}
/* Latest News specifically — stacked title-then-date layout, rather
   than the flex row/space-between other widget lists use, since a
   news headline needs room to wrap onto its own line above the date,
   not squeeze onto one row alongside it. */
.examission-widget__news-link {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
}
.examission-widget__news-title {
	font-weight: 600;
	line-height: 1.35;
}
.examission-widget__news-date {
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.6;
}
.examission-widget__news-viewall {
	display: block;
	text-align: center;
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--primary);
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
}
.examission-widget__news-viewall:hover {
	color: var(--wp--preset--color--gold);
}
/* The animated "popping" icon next to the Latest News title, per
   explicit user request — a repeating scale pulse draws the eye to
   this specific widget without being so fast/large it feels
   distracting or gimmicky. */
.examission-widget__news-icon {
	display: inline-block;
	margin-right: 0.3rem;
	animation: examission-news-pop 1.6s ease-in-out infinite;
}
@keyframes examission-news-pop {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.35);
	}
}
@media (prefers-reduced-motion: reduce) {
	.examission-widget__news-icon {
		animation: none;
	}
}
.examission-widget__count {
	flex: 0 0 auto;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.examission-widget__list a:hover .examission-widget__count {
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.examission-widget__list--recent a {
	display: block;
	line-height: 1.4;
}
.examission-widget__search-form {
	display: flex;
	gap: 0.5rem;
}
.examission-widget__search-form input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	font: inherit;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.examission-widget__search-form button {
	flex: 0 0 auto;
	padding: 0.55rem 1.1rem;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.examission-widget__search-form button:hover {
	background: var(--wp--preset--color--primary-light);
}

/* ---------- Widget editor placeholders ---------- */
.examission-widget-placeholder {
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 1.25rem;
	background: var(--wp--preset--color--muted);
}
.examission-widget-placeholder__title {
	font-weight: 700;
	margin: 0 0 0.35rem;
}
.examission-widget-placeholder__description {
	margin: 0;
	font-size: 0.875rem;
	opacity: 0.8;
}

/* ---------- Floating bookmarks bubble ----------
   Created dynamically by assets/js/bookmarks.js and appended to
   <body> — not part of any template, so it works on every page
   automatically, including ones with no MCQ cards on them (the
   homepage, an About page, etc.). Hidden (opacity/scale, not
   display:none, for a smooth transition either direction) whenever
   the bookmark count is zero — never bookmarked anything, or just
   removed the last one.

   Positioned bottom-LEFT, not bottom-right — the site already has a
   third-party "Ask AI" widget docked bottom-right (visible in an
   earlier screenshot), and stacking a second floating element in the
   same corner would collide with it rather than coexist.

   Structural split between the outer link and an inner wrapper: the
   outer element owns fixed positioning and the one-time show/hide
   opacity+scale transition; the inner wrapper owns a CONTINUOUS gentle
   float animation. Both would otherwise be animating `transform` on
   the SAME element for two different, simultaneously-running purposes
   (a one-time transition vs. an infinite loop), which fight each other
   — splitting them across outer/inner avoids that entirely. */
.examission-bookmarks-bubble {
	position: fixed;
	left: 1.5rem;
	bottom: 1.5rem;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 999px;
	background: linear-gradient(145deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-light));
	color: #fff;
	text-decoration: none;
	box-shadow: var(--examission-shadow-md);
	opacity: 0;
	transform: scale(0.75);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.examission-bookmarks-bubble.is-visible {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
	/* Ambient gold "ping" ring, repeating gently while a visitor has
	   something bookmarked — invites interaction without shouting.
	   Independent of the inner float below (different property, same
	   or different element either way, so no conflict). */
	animation: examission-bubble-glow 2.6s ease-in-out infinite;
}
.examission-bookmarks-bubble:hover {
	transform: scale(1.08);
}
.examission-bookmarks-bubble:hover .examission-bookmarks-bubble__inner {
	animation-play-state: paused;
}
.examission-bookmarks-bubble__inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
	animation: examission-bubble-float 3.2s ease-in-out infinite;
}
.examission-bookmarks-bubble__icon {
	width: 1.65rem;
	height: 1.65rem;
}
.examission-bookmarks-bubble__count {
	position: absolute;
	top: -0.35rem;
	right: -0.4rem;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--primary);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--wp--preset--color--paper);
}
/* Gentle, continuous "floating" bob — literal to the name, subtle
   enough not to be distracting while reading a question below it. */
@keyframes examission-bubble-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}
/* Ambient attention ring — a soft gold pulse expanding outward and
   fading, repeating on a slow, unhurried cycle. */
@keyframes examission-bubble-glow {
	0%, 100% {
		box-shadow: var(--examission-shadow-md), 0 0 0 0 rgba(232, 160, 32, 0.45);
	}
	50% {
		box-shadow: var(--examission-shadow-md), 0 0 0 10px rgba(232, 160, 32, 0);
	}
}
/* Sharp, brief bounce on an actual bookmark/unbookmark action —
   distinct from the slow ambient glow/float above, so a real change
   still reads as a distinct "moment" against the idle animation. */
@keyframes examission-bubble-pulse {
	0% { transform: scale(1); }
	35% { transform: scale(1.24); }
	65% { transform: scale(0.92); }
	100% { transform: scale(1); }
}
.examission-bookmarks-bubble.is-pulsing {
	animation: examission-bubble-pulse 0.45s ease;
}
/* On mobile, sit above the thumb-reach zone and clear of any
   OS-level bottom bar/gesture area rather than hugging the exact
   corner. */
@media screen and (max-width: 600px) {
	.examission-bookmarks-bubble {
		left: 1rem;
		bottom: 1.25rem;
		width: 3.4rem;
		height: 3.4rem;
	}
}

/* ---------- Breadcrumbs (Milestone 8) ---------- */
.examission-breadcrumbs {
	margin-bottom: 1rem;
}
.examission-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.75;
}
.examission-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.examission-breadcrumbs__item:not(:first-child)::before {
	content: "/";
	opacity: 0.5;
}
.examission-breadcrumbs__item a {
	color: inherit;
	text-decoration: none;
}
.examission-breadcrumbs__item a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
.examission-breadcrumbs__item [aria-current="page"] {
	font-weight: 600;
	opacity: 1;
}

/* ---------- Interview Prep archive grid ----------
   Uses only core WordPress blocks (post-featured-image, post-title,
   post-excerpt inside post-template) — a standard public post type
   with 'editor'/'excerpt'/'thumbnail' support needs no custom
   rendering the way MCQs do. */
.examission-interview-prep-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}
.examission-interview-prep-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
	padding-bottom: 1.25rem;
	background: var(--wp--preset--color--paper);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.examission-interview-prep-card:hover {
	box-shadow: var(--examission-shadow-md);
	transform: translateY(-2px);
}
.examission-interview-prep-card .wp-block-post-featured-image {
	margin: 0 0 1rem;
}
.examission-interview-prep-card .wp-block-post-featured-image img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}
.examission-interview-prep-card > .wp-block-post-title,
.examission-interview-prep-card > .wp-block-post-excerpt {
	margin-left: 1.25rem;
	margin-right: 1.25rem;
}

/* ---------- Header announcement bar ----------
   Thin, dark strip above the main header row, per a reference
   screenshot the user shared — text content is deliberately NOT a
   copy of that screenshot's claim ("Join 500,000+ students"): there's
   no real user/student count behind that number on this site, and
   fabricating one would contradict the same "real numbers only"
   principle already applied to the hero stats block. Wording here can
   be changed anytime — it's plain text in header.html, not computed
   from anything. */
.site-header__announcement {
	background: var(--wp--preset--color--primary);
}
.site-header__announcement p {
	margin: 0;
	padding: 0.45rem 1rem;
	text-align: center;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 500;
}

/* ---------- Hero: two-column layout + background ----------
   Full-bleed background band (align:full on the block, set in
   front-page.html). Deliberately dark now (navy gradient, not the
   site's usual light paper background) per explicit user request and
   a reference screenshot — light hero text below is a direct
   consequence of that background change, not a separate decision. */
.examission-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #16233D 0%, #1B3A6B 50%, #24457C 100%);
}
.examission-hero::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -140px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 160, 32, 0.28), transparent 70%);
	pointer-events: none;
}
.examission-hero__columns {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	align-items: center;
	width: 100%;
	position: relative;
}
.examission-hero__text {
	flex: 1 1 380px;
}
/* Text color overrides — only within the hero, since the rest of the
   site keeps its normal light-background/dark-text palette regardless
   of this section's own background. */
.examission-hero__text h1 {
	color: #fff;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.examission-hero__text p {
	color: rgba(255, 255, 255, 0.85);
}
.examission-hero__accent {
	color: var(--wp--preset--color--gold);
}
@media screen and (max-width: 600px) {
	.examission-hero__text h1 {
		font-size: 1.85rem;
		line-height: 1.25;
	}
	.examission-hero__text p.has-large-font-size {
		font-size: 1rem;
	}
}
/* Fixes a real, confirmed double-spacing bug: this column had no
   explicit block-gap override, so it fell back to theme.json's global
   1.5rem default -- stacking on TOP of the badge's own margin-bottom
   below, producing far more gap under the badge than intended. The
   same root cause already found and fixed elsewhere in this project
   (header, footer). */
.examission-hero__text {
	--wp--style--block-gap: 1.1rem;
}
.examission-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1.15rem;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(232, 160, 32, 0.22), rgba(255, 255, 255, 0.06));
	border: 1px solid rgba(232, 160, 32, 0.4);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 2px 14px rgba(232, 160, 32, 0.18);
	margin-bottom: 0;
}
.examission-hero__badge-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--correct);
	flex: 0 0 auto;
	position: relative;
}
.examission-hero__badge-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--correct);
	animation: examission-badge-pulse 1.8s ease-out infinite;
}
@keyframes examission-badge-pulse {
	0% { transform: scale(1); opacity: 0.8; }
	100% { transform: scale(2.5); opacity: 0; }
}
.examission-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.15rem;
	margin: 1.75rem 0;
}
.examission-hero-stats__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	position: relative;
	padding-right: 1.15rem;
	transition: transform 0.2s ease;
}
.examission-hero-stats__item:hover {
	transform: translateY(-2px);
}
/* A thin vertical divider between items, rather than after the very
   last one — mirrors how modern stat rows typically separate figures
   (e.g. "12k Users | 4.9 Rating | 200+ Reviews") without needing a
   full visible border/box around each one. */
.examission-hero-stats__item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background: rgba(255, 255, 255, 0.18);
}
.examission-hero-stats__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: rgba(212, 160, 46, 0.16);
	color: var(--wp--preset--color--gold);
}
.examission-hero-stats__icon svg {
	width: 1rem;
	height: 1rem;
}
.examission-hero-stats__number {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
	white-space: nowrap;
}
.examission-hero-stats__label {
	display: block;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 0.1rem;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.examission-hero-stats {
		gap: 0.85rem;
	}
	.examission-hero-stats__item {
		padding-right: 0.85rem;
	}
	.examission-hero-stats__icon {
		width: 1.85rem;
		height: 1.85rem;
	}
	.examission-hero-stats__number {
		font-size: 1.4rem;
	}
}
.examission-hero-quiz-wrap {
	flex: 1 1 320px;
	max-width: 380px;
}
.examission-hero-quiz {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: var(--examission-shadow-md);
	padding: 0.7rem 1.15rem 1.15rem;
}
/* Fixes a real, confirmed Cumulative Layout Shift issue (flagged by
   PageSpeed Insights specifically on desktop): this card starts as a
   small "Loading a quick quiz…" message, then gets replaced with the
   full question card (subject badge, progress text, question, 4
   options) once it loads — a significant size change that visibly
   pushes everything below the hero section down as it happens. A
   min-height (a floor, not a fixed height) reserves roughly the space
   the loaded question needs up front, so that transition no longer
   causes a shift — shorter content still won't shrink the card below
   this, and an unusually long question can still grow it naturally
   without being clipped either way. */
/* Sized from the actual, calculated dimensions of a loaded question
   (header ~31px + progress bar ~18px + question text at 2 typical
   lines ~50px + 4 options ~176px ≈ 275px total), with a modest buffer
   for a slightly longer-than-typical question — not another rough
   guess. The two earlier attempts (380px, then 440px) were both
   meaningfully too generous, which is what caused the card to look
   visibly oversized once real content loaded in. */
.examission-hero-quiz__content {
	min-height: 310px;
}
.examission-hero-quiz::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--gold));
}
/* "Test Your Knowledge" badge — an outlined pill matching the same
   visual language as the Study/Quiz toggle elsewhere in the header,
   per explicit user request. Sits permanently at the top of the card
   shell (outside the JS-managed .examission-hero-quiz__content below),
   so it stays put through loading/question/results states rather than
   needing to be re-added by every JS render function. */
.examission-hero-quiz__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: fit-content;
	margin: 0 auto 1rem;
	padding: 0.5rem 1.15rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-light));
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	box-shadow: 0 4px 14px rgba(27, 58, 107, 0.3);
}
.examission-hero-quiz__badge svg {
	width: 0.85rem;
	height: 0.85rem;
	color: var(--wp--preset--color--gold);
}
@media screen and (max-width: 782px) {
	.examission-hero-quiz-wrap {
		max-width: none;
		width: 100%;
	}
}

/* ---------- Hero quiz widget ----------
   A deliberately different interaction from the site's regular Quiz
   Mode: no per-question feedback, score revealed only at the end —
   see assets/js/hero-quiz.js for the full reasoning. Sized down and
   restyled with more color/hover richness per explicit user feedback
   ("make quiz more attractive... reduce size a bit"). Visual language
   (letter badges, option rows) still echoes the real MCQ card styling
   elsewhere on the site, so this reads as "a genuine sample of the
   product." Deliberately kept LIGHT (paper background) even though
   the hero around it is now dark — this is the same established
   pattern as the reference screenshot: a light card floating over a
   dark hero reads as a genuine product demo, not a decoration matching
   its background. */
.examission-hero-quiz__loading {
	text-align: center;
	padding: 1.5rem 0.5rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.7;
}
.examission-hero-quiz__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.7rem;
}
.examission-hero-quiz__subject {
	background: linear-gradient(120deg, var(--wp--preset--color--muted), rgba(232, 160, 32, 0.15));
	color: var(--wp--preset--color--primary);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
}
.examission-hero-quiz__progress {
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.65;
	white-space: nowrap;
}
.examission-hero-quiz__progressbar {
	height: 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--muted);
	overflow: hidden;
	margin-bottom: 0.9rem;
}
.examission-hero-quiz__progressbar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--gold));
	transition: width 0.3s ease;
}
.examission-hero-quiz__question {
	font-size: 0.92rem;
	font-weight: 600;
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--ink);
}
.examission-hero-quiz__options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.examission-hero-quiz__option {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 9px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 0.85rem;
	text-align: left;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.examission-hero-quiz__option::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--wp--preset--color--gold);
	transform: scaleY(0);
	transition: transform 0.15s ease;
}
/* Scoped to devices that genuinely support hover (a mouse/trackpad),
   not touch — per a real, confirmed mobile bug: touch devices have no
   true mouse-out event, so :hover styling can get "stuck" on whatever
   was last tapped. Since the next question's options are freshly
   rendered elements at the SAME screen position, some mobile browsers
   keep applying the stuck :hover state to them too, making the next
   question look like it already has an answer selected before the
   visitor has touched anything — confusing for exactly the reason the
   user reported ("doesn't look like a quiz"). Desktop mouse users see
   no change at all; this only removes the effect where it was
   actually broken. */
@media (hover: hover) {
	.examission-hero-quiz__option:hover {
		border-color: var(--wp--preset--color--gold);
		background: rgba(232, 160, 32, 0.1);
		transform: translateX(4px);
		box-shadow: var(--examission-shadow-md);
	}
	.examission-hero-quiz__option:hover::before {
		transform: scaleY(1);
	}
	.examission-hero-quiz__option:hover .examission-hero-quiz__letter {
		border-color: var(--wp--preset--color--gold);
		background: var(--wp--preset--color--gold);
		color: #fff;
	}
}
/* :active — deliberately NOT scoped like :hover above. Works
   identically for a mouse click or a finger tap, and unlike :hover it
   clears the instant the press releases, so it genuinely cannot get
   stuck on the next question's option the way :hover did. This is
   what actually gives a tap on mobile visible, responsive feedback
   again without reintroducing that bug. */
.examission-hero-quiz__option:active {
	border-color: var(--wp--preset--color--gold);
	background: rgba(232, 160, 32, 0.12);
	transform: translateX(4px) scale(0.98);
	box-shadow: var(--examission-shadow-md);
}
.examission-hero-quiz__option:active::before {
	transform: scaleY(1);
}
.examission-hero-quiz__option:active .examission-hero-quiz__letter {
	border-color: var(--wp--preset--color--gold);
	background: var(--wp--preset--color--gold);
	color: #fff;
}
.examission-hero-quiz__letter {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.examission-hero-quiz__results {
	text-align: center;
	padding: 0.5rem 0.1rem;
}
.examission-hero-quiz__score-ring {
	--examission-score-percent: 0;
	width: 120px;
	height: 120px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: conic-gradient(var(--wp--preset--color--gold) calc(var(--examission-score-percent) * 1%), var(--wp--preset--color--muted) 0);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.examission-hero-quiz__score-ring::before {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--paper);
}
.examission-hero-quiz__results-score {
	position: relative;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}
.examission-hero-quiz__results-label {
	margin: 0 0 1.4rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.75;
	font-size: 0.88rem;
}
.examission-hero-quiz__solved {
	display: block;
	width: 100%;
	max-width: 220px;
	margin: 0 auto 0.75rem;
	padding: 0.7rem 1.6rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: 0.88rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.examission-hero-quiz__solved:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.examission-hero-quiz__retry {
	padding: 0.7rem 1.6rem;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.88rem;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.examission-hero-quiz__retry:hover {
	background: var(--wp--preset--color--primary-light);
	transform: translateY(-2px);
}
.examission-hero-quiz__review-wrap {
	max-height: 420px;
	overflow-y: auto;
	padding-right: 0.25rem;
}
.examission-hero-quiz__review-back {
	display: inline-flex;
	align-items: center;
	margin-bottom: 1rem;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}
.examission-hero-quiz__review-back:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.examission-hero-quiz__review-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.examission-hero-quiz__review-item {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.examission-hero-quiz__review-item:last-child {
	border-bottom: none;
}
.examission-hero-quiz__review-question {
	font-weight: 600;
	font-size: 0.9rem;
	margin: 0 0 0.5rem;
}
.examission-hero-quiz__review-options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.examission-hero-quiz__review-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.7rem;
	border-radius: 6px;
	font-size: 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
}
.examission-hero-quiz__review-option.is-correct {
	border-color: #00a32a;
	background: rgba(0, 163, 42, 0.08);
	color: #00a32a;
	font-weight: 600;
}
.examission-hero-quiz__review-option.is-incorrect {
	border-color: #d63638;
	background: rgba(214, 54, 56, 0.08);
	color: #d63638;
	font-weight: 600;
}

/* ---------- General content-area link hover ----------
   Article body (post-content), MCQ explanation/comments panels — a
   subtle underline-reveal rather than an abrupt color-only change,
   consistent with the same "premium" hover language used elsewhere
   (footer links, sidebar widget links) but using the primary navy
   here rather than gold, since gold is reserved for accents/CTAs, not
   ordinary body-copy links. */
.wp-block-post-content a,
.examission-mcq__panel a {
	color: var(--wp--preset--color--primary);
	text-decoration-color: var(--wp--preset--color--border);
	text-underline-offset: 2px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.wp-block-post-content a:hover,
.examission-mcq__panel a:hover {
	color: var(--wp--preset--color--primary-light);
	text-decoration-color: currentColor;
}

/* ---------- AI Explanation button ---------- */
.examission-mcq__ai-explanation-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1rem;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--gold);
	background: transparent;
	color: #9A6A10;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.examission-mcq__ai-explanation-button:hover:not(:disabled) {
	background: var(--wp--preset--color--gold);
	color: #1a1f2e;
}
.examission-mcq__ai-explanation-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.examission-mcq__ai-explanation-button svg {
	width: 1rem;
	height: 1rem;
}
.examission-mcq__ai-explanation-content {
	margin-top: 0.75rem;
	padding: 1rem;
	border-radius: 8px;
	background: rgba(232, 160, 32, 0.08);
	border-left: 3px solid var(--wp--preset--color--gold);
	font-size: 0.92rem;
	line-height: 1.6;
}
.examission-mcq__ai-explanation-content--auto strong {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--wp--preset--color--gold);
}

/* ---------- Job Postings (Milestone 9) ---------- */
.examission-job-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.examission-job-meta__organization {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
}
.examission-job-meta__deadline {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--correct);
}
.examission-job-meta__deadline.is-closed {
	color: var(--wp--preset--color--incorrect);
}
.examission-job-apply {
	margin-top: 1.5rem;
}
.examission-job-apply__button {
	display: inline-flex;
	align-items: center;
	padding: 0.85rem 1.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--examission-shadow-md);
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.examission-job-apply__button:hover {
	background: var(--wp--preset--color--primary-light);
	color: #fff;
	transform: translateY(-2px);
}
.examission-job-apply__button--closed {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--ink);
	opacity: 0.6;
	box-shadow: none;
	cursor: not-allowed;
}
.examission-job-apply__button--closed:hover {
	background: var(--wp--preset--color--muted);
	transform: none;
}

/* ---------- Study Notes (Milestone 9) ---------- */
.examission-note-download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.65rem 1.35rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.examission-note-download svg {
	width: 1rem;
	height: 1rem;
}
.examission-note-download:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* ---------- Past Papers (Milestone 9) ----------
   examission/past-paper-organizations (the PPSC/FPSC/NTS landing
   cards), examission/past-paper-browser (the Year/Job filter + results
   list on an Organization's own page). Neither of these blocks had any
   matching CSS yet — this is all new. */
.examission-org-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}
.examission-org-list__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 2rem 1.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--paper);
	text-decoration: none;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.examission-org-list__link:hover {
	transform: translateY(-3px);
	box-shadow: var(--examission-shadow-md);
	border-color: var(--wp--preset--color--primary);
}
.examission-org-list__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}
.examission-org-list__count {
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.65;
}
.examission-paper-filters {
	margin: 1.5rem 0;
}
.examission-paper-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
.examission-paper-filters select {
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-size: 0.9rem;
}
/* Matches .examission-paper-filters exactly, for visual consistency
   between this and the established Past Papers filter pattern. */
.examission-period-filters {
	margin: 1.5rem 0;
}
.examission-period-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
.examission-period-filters select {
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-size: 0.9rem;
}
.examission-mcq__action--primary {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.4rem;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.examission-mcq__action--primary:hover {
	background: var(--wp--preset--color--primary-light);
}

/* ---------- MCQ Share dropdown ---------- */
.examission-mcq__share-wrap {
	position: relative;
	display: inline-flex;
}
.examission-mcq__action--share {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.4rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.examission-mcq__action--share:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.examission-mcq__share-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	min-width: 10rem;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	box-shadow: var(--examission-shadow-md);
	padding: 0.4rem;
	z-index: 20;
	display: flex;
	flex-direction: column;
}
/* Fixes the same confirmed bug found in .examission-account-menu__dropdown
   and .examission-exit-intent-ad: display:flex above overrides the
   browser's native [hidden] => display:none behavior (an author
   stylesheet rule always beats a user-agent default of equal
   specificity). Included from the start here, learning from that. */
.examission-mcq__share-menu[hidden] {
	display: none;
}
.examission-mcq__share-menu a {
	display: block;
	padding: 0.6rem 0.8rem;
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: 0.9rem;
}
.examission-mcq__share-menu a:hover {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
}
.examission-paper-list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.examission-paper-list__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--paper);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.examission-paper-list__link:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--muted);
	transform: translateX(3px);
}
.examission-paper-list__name {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.examission-paper-list__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.65;
}

/* ---------- Footer Blog link (Milestone 9) ----------
   examission/blog-link renders its own small self-contained list
   (see the block's render.php for why it can't inject a single <li>
   into the static Explore list next to it) — this just removes the
   default top margin so it sits flush below that list instead of
   leaving an inconsistent gap. */
.examission-blog-link-list {
	margin-top: 0;
}
.examission-contact-link-list {
	margin-top: 0;
}
.examission-about-link-list {
	margin-top: 0;
}

/* ---------- Account dropdown menu ---------- */
.examission-account-menu {
	position: relative;
	display: inline-flex;
}
.examission-account-link__caret {
	width: 0.65rem;
	height: 0.65rem;
	margin-left: 0.15rem;
}
.examission-account-menu__dropdown {
	position: fixed;
	min-width: 12rem;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	box-shadow: var(--examission-shadow-md);
	padding: 0.4rem;
	z-index: 1500;
	display: flex;
	flex-direction: column;
}
/* Fixes a real, confirmed bug: display:flex above was overriding the
   browser's native [hidden] => display:none behavior (an author
   stylesheet rule always beats a user-agent default of equal
   specificity) — this dropdown was actually always being rendered
   visible, the whole time. It only appeared to work correctly before
   because a separate overflow:hidden clipping bug was ALSO hiding it
   regardless of this — two independent bugs coincidentally canceling
   each other out. Fixing the clipping bug on its own exposed this one.
   A dedicated [hidden] override, more specific than the bare class
   selector above, restores correct hide/show behavior. */
.examission-account-menu__dropdown[hidden] {
	display: none;
}
.examission-account-menu__dropdown a {
	display: block;
	padding: 0.6rem 0.8rem;
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: 0.9rem;
}
.examission-account-menu__dropdown a:hover {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
}

/* ---------- My Profile form ---------- */
.examission-my-profile {
	max-width: 640px;
}
.examission-my-profile__picture-row {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}
.examission-my-profile__picture-preview {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--border);
}
.examission-my-profile__picture-label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
}
.examission-my-profile__picture-label .description {
	display: block;
	font-weight: normal;
	font-size: 0.8rem;
	opacity: 0.7;
	margin-top: 0.3rem;
}
.examission-my-profile label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 1.1rem;
}
.examission-my-profile input[type="text"],
.examission-my-profile input[type="tel"],
.examission-my-profile textarea,
.examission-my-profile select {
	display: block;
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.7rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	font: inherit;
	font-weight: normal;
}
.examission-my-profile__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 1.25rem;
}
.examission-my-profile__message {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
}
.examission-my-profile__message.is-error {
	background: rgba(214, 54, 56, 0.1);
	color: #d63638;
}
.examission-my-profile__message.is-success {
	background: rgba(0, 163, 42, 0.1);
	color: #00a32a;
}
.examission-my-profile__submit {
	padding: 0.85rem 2rem;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.examission-my-profile__submit:hover {
	background: var(--wp--preset--color--primary-light);
}
.examission-my-profile__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------- My Questions / My Comments lists ---------- */
.examission-my-questions,
.examission-my-comments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.examission-my-questions__item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}
.examission-my-questions__item a {
	flex: 1 1 200px;
}
.examission-my-questions__status {
	flex: 0 0 auto;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
}
.examission-my-questions__status--publish {
	background: rgba(0, 163, 42, 0.12);
	color: #00a32a;
}
.examission-my-questions__status--pending {
	background: rgba(232, 160, 32, 0.15);
	color: #9a6a10;
}
.examission-my-questions__status--draft {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--ink);
	opacity: 0.75;
}
.examission-my-questions__date {
	flex: 0 0 auto;
	font-size: 0.8rem;
	opacity: 0.65;
}
.examission-my-comments__item {
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}
.examission-my-comments__excerpt {
	margin: 0 0 0.4rem;
	font-style: italic;
}
.examission-my-comments__meta {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.75;
}

/* ---------- Login/Register modal (Milestone 10) ---------- */
.examission-auth-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.examission-auth-modal[hidden] {
	display: none;
}
.examission-auth-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 22, 35, 0.6);
}
.examission-auth-modal__panel {
	position: relative;
	background: var(--wp--preset--color--paper);
	border-radius: 16px;
	box-shadow: var(--examission-shadow-md);
	padding: 2rem;
	width: 100%;
	max-width: 400px;
	max-height: 90vh;
	overflow-y: auto;
}
.examission-auth-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--ink);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.examission-auth-modal__tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.examission-auth-modal__tab {
	flex: 1;
	padding: 0.75rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	opacity: 0.6;
	cursor: pointer;
}
.examission-auth-modal__tab.is-active {
	opacity: 1;
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}
.examission-auth-modal__message {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}
.examission-auth-modal__message.is-error {
	background: rgba(214, 54, 56, 0.1);
	color: #d63638;
}
.examission-auth-modal__message.is-success {
	background: rgba(0, 163, 42, 0.1);
	color: #00a32a;
}
.examission-auth-form h2 {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
}
.examission-auth-form label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}
.examission-auth-form input[type="text"],
.examission-auth-form input[type="email"],
.examission-auth-form input[type="password"] {
	display: block;
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.65rem 0.9rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	font: inherit;
	font-weight: normal;
}
.examission-auth-form__checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: normal;
}
.examission-auth-form__forgot {
	margin: -0.5rem 0 1.25rem;
	text-align: right;
}
.examission-auth-form__forgot a {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.examission-auth-form__forgot a:hover {
	text-decoration: underline;
}
.examission-auth-form__roles {
	margin-bottom: 1rem;
	padding: 0.75rem;
	background: var(--wp--preset--color--muted);
	border-radius: 8px;
}
.examission-auth-form__roles-label {
	display: block;
	margin-bottom: 0.5rem;
}
.examission-auth-form__roles label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: normal;
	margin-bottom: 0.5rem;
}
.examission-auth-form__hint {
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.7;
	margin: -0.5rem 0 1rem;
}
.examission-auth-form__submit {
	width: 100%;
	padding: 0.85rem;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.examission-auth-form__submit:hover {
	background: var(--wp--preset--color--primary-light);
}
.examission-auth-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
body.examission-auth-modal-open {
	overflow: hidden;
}

/* ---------- WhatsApp Channel bubble (Settings > Social Links) ----------
   Positioned upper-right (below the fixed header), per explicit user
   request — deliberately the opposite corner from the Bookmarks
   bubble (bottom-left) so the two never compete for the same space.
   A gentle continuous float animation makes it feel "alive" rather
   than static, pausing in favor of the hover scale effect rather than
   fighting it for the same transform property. Green is WhatsApp's
   own well-known brand color — used here for immediate visitor
   recognition, not a copied logo. */
.examission-whatsapp-bubble {
	position: fixed;
	top: calc(var(--examission-header-height) + 1.25rem);
	right: 1.5rem;
	z-index: 1001;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 999px;
	background: linear-gradient(145deg, #25D366, #128C7E);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--examission-shadow-md);
	transition: box-shadow 0.2s ease, top 0.3s ease;
	animation: examission-whatsapp-float 2.6s ease-in-out infinite;
}
.examission-whatsapp-bubble:hover {
	animation-play-state: paused;
	transform: scale(1.1);
	box-shadow: var(--examission-shadow-lg, var(--examission-shadow-md));
}
.examission-whatsapp-bubble svg {
	width: 1.85rem;
	height: 1.85rem;
}
@keyframes examission-whatsapp-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}
@media screen and (max-width: 600px) {
	.examission-whatsapp-bubble {
		top: calc(var(--examission-header-height) + 0.75rem);
		right: 1rem;
		width: 3.25rem;
		height: 3.25rem;
	}
	.examission-whatsapp-bubble svg {
		width: 1.6rem;
		height: 1.6rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.examission-whatsapp-bubble {
		animation: none;
	}
}

/* ---------- Footer social links (Settings > Social Links) ---------- */
.examission-social-links {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.1rem;
}
.examission-social-links__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--examission-footer-text);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.examission-social-links__icon svg {
	width: 1.05rem;
	height: 1.05rem;
}
.examission-social-links__icon:hover {
	background: var(--wp--preset--color--gold);
	color: #0F1623;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(232, 160, 32, 0.25);
}

/* ---------- Exit-intent / inactivity ad ---------- */
.examission-exit-intent-ad {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 22, 35, 0.85);
	padding: 1.5rem;
}
/* Fixes the same confirmed bug found in .examission-account-menu__dropdown:
   display:flex above overrides the browser's native [hidden] =>
   display:none behavior (an author stylesheet rule always beats a
   user-agent default of equal specificity) — without this override,
   this overlay would show immediately and permanently the moment any
   ad code was ever saved for this slot, rather than only appearing on
   the intended exit-intent/inactivity trigger. */
.examission-exit-intent-ad[hidden] {
	display: none;
}
.examission-exit-intent-ad__content {
	max-width: 90vw;
	max-height: 85vh;
	overflow: auto;
	background: var(--wp--preset--color--paper);
	border-radius: 14px;
	padding: 1.5rem;
	box-shadow: var(--examission-shadow-lg, var(--examission-shadow-md));
}
.examission-exit-intent-ad__close {
	position: fixed;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 2001;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.examission-exit-intent-ad__close:hover {
	background: rgba(255, 255, 255, 0.3);
}
body.examission-exit-intent-open {
	overflow: hidden;
}

/* ---------- Mock Test ---------- */
.examission-mock-test {
	max-width: 720px;
	margin: 0 auto;
}
.examission-mock-test__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.75rem;
}
.examission-mock-test__intro-text {
	opacity: 0.8;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}
.examission-mock-test__name-label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}
.examission-mock-test__name-label input {
	display: block;
	width: 100%;
	max-width: 320px;
	margin-top: 0.4rem;
	padding: 0.7rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	font: inherit;
	font-weight: normal;
}
.examission-mock-test__start {
	padding: 0.9rem 2.2rem;
	border-radius: 999px;
	border: none;
	background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-light));
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: var(--examission-shadow-md);
	transition: transform 0.15s ease;
}
.examission-mock-test__start:hover {
	transform: translateY(-2px);
}
.examission-mock-test__loading {
	text-align: center;
	padding: 3rem 0;
	opacity: 0.7;
}
.examission-mock-test__header {
	position: sticky;
	top: var(--examission-header-height, 0);
	z-index: 5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}
.examission-mock-test__timer {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--wp--preset--color--primary);
}
.examission-mock-test__progress {
	font-size: 0.85rem;
	opacity: 0.7;
}
.examission-mock-test__question-wrap {
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	margin-bottom: 1rem;
}
.examission-mock-test__subject {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}
.examission-mock-test__question-text {
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 1.25rem;
}
.examission-mock-test__options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.examission-mock-test__option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.8rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--ink);
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.examission-mock-test__option:hover {
	border-color: var(--wp--preset--color--primary);
}
.examission-mock-test__option.is-selected {
	border-color: var(--wp--preset--color--primary);
	background: rgba(27, 58, 107, 0.06);
}
.examission-mock-test__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
	font-weight: 700;
	font-size: 0.8rem;
	flex: 0 0 auto;
}
.examission-mock-test__option.is-selected .examission-mock-test__letter {
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.examission-mock-test__nav {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}
.examission-mock-test__nav-btn {
	padding: 0.6rem 1.2rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
}
.examission-mock-test__nav-btn:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.examission-mock-test__submit {
	margin-left: auto;
	padding: 0.6rem 1.4rem;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--gold);
	color: #1a1f2e;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
}
.examission-mock-test__submit:hover {
	background: #D19420;
}
.examission-mock-test__palette {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
	gap: 0.4rem;
}
.examission-mock-test__palette-btn {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}
.examission-mock-test__palette-btn.is-answered {
	background: rgba(0, 163, 42, 0.12);
	border-color: #00a32a;
	color: #00a32a;
}
.examission-mock-test__palette-btn.is-current {
	border-color: var(--wp--preset--color--gold);
	border-width: 2px;
}
.examission-mock-test__certificate {
	padding: 2px;
	background: linear-gradient(135deg, var(--wp--preset--color--gold), var(--wp--preset--color--primary));
	border-radius: 16px;
	margin-bottom: 1.5rem;
}
.examission-mock-test__cert-inner {
	background: var(--wp--preset--color--paper);
	border-radius: 14px;
	padding: 2.5rem 1.5rem;
	text-align: center;
}
.examission-mock-test__cert-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.5rem;
}
.examission-mock-test__cert-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.5rem;
}
.examission-mock-test__cert-line {
	opacity: 0.7;
	margin-bottom: 0.15rem;
}
.examission-mock-test__cert-test-title {
	font-weight: 700;
	margin-bottom: 1.25rem;
}
.examission-mock-test__cert-score {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}
.examission-mock-test__cert-score span {
	font-size: 1.5rem;
	opacity: 0.6;
}
.examission-mock-test__cert-percent {
	font-weight: 600;
	opacity: 0.75;
	margin-bottom: 0.75rem;
}
.examission-mock-test__cert-date {
	font-size: 0.8rem;
	opacity: 0.55;
}
.examission-mock-test__share {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1.5rem;
}
.examission-mock-test__share-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	border: none;
	color: #fff;
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}
.examission-mock-test__share-btn--whatsapp {
	background: linear-gradient(145deg, #25D366, #128C7E);
}
.examission-mock-test__share-btn--facebook {
	background: #1877F2;
}
.examission-mock-test__share-btn--pdf {
	background: linear-gradient(135deg, var(--wp--preset--color--gold), #F2C464);
	color: #1a1f2e;
}
.examission-mock-test__share-btn--pdf:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}
.examission-mock-test__review-toggle {
	display: block;
	margin: 0 auto 1rem;
	padding: 0.7rem 1.6rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	cursor: pointer;
}
.examission-mock-test__review-toggle:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.examission-mock-test__review-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.examission-mock-test__review-item {
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.examission-mock-test__review-item:last-child {
	border-bottom: none;
}
.examission-mock-test__review-question {
	font-weight: 600;
	margin: 0 0 0.6rem;
}
.examission-mock-test__review-options {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.examission-mock-test__review-option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.8rem;
	border-radius: 6px;
	font-size: 0.88rem;
	border: 1px solid var(--wp--preset--color--border);
}
.examission-mock-test__review-option.is-correct {
	border-color: #00a32a;
	background: rgba(0, 163, 42, 0.08);
	color: #00a32a;
	font-weight: 600;
}
.examission-mock-test__review-option.is-incorrect {
	border-color: #d63638;
	background: rgba(214, 54, 56, 0.08);
	color: #d63638;
	font-weight: 600;
}
.examission-mock-test__review-status {
	font-size: 0.8rem;
	opacity: 0.6;
	margin: 0;
}
@media screen and (max-width: 600px) {
	.examission-mock-test__cert-score {
		font-size: 2.2rem;
	}
	.examission-mock-test__palette {
		grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
	}
	.examission-mock-test__palette-btn {
		width: 2rem;
		height: 2rem;
	}
}

/* ---------- Contact form ---------- */
.examission-contact-form {
	max-width: 560px;
}
.examission-contact-form label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 1.1rem;
}
.examission-contact-form input[type="text"],
.examission-contact-form input[type="email"],
.examission-contact-form textarea {
	display: block;
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.7rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	font: inherit;
	font-weight: normal;
}
/* Honeypot — visually hidden from real visitors (not display:none,
   which some screen readers/bots both skip identically; this keeps it
   out of the visible layout while still technically present in the
   DOM for an automated form-filler to find and fill in). */
.examission-contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.examission-contact-form__message {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
}
.examission-contact-form__message.is-error {
	background: rgba(214, 54, 56, 0.1);
	color: #d63638;
}
.examission-contact-form__message.is-success {
	background: rgba(0, 163, 42, 0.1);
	color: #00a32a;
}
.examission-contact-form__submit {
	padding: 0.85rem 2rem;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.examission-contact-form__submit:hover {
	background: var(--wp--preset--color--primary-light);
}
.examission-contact-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------- Homepage service buttons ---------- */
.examission-service-buttons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}
.examission-service-buttons__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	padding: 1.75rem 1.5rem;
	border-radius: 14px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--paper);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	position: relative;
}
/* The animated "new opportunity" badge on the Latest Jobs card, per
   explicit user request — only shown when there's a genuine, live
   count of open jobs to report (see service-buttons/render.php), so
   an empty jobs list never shows a hollow, misleading badge. Reuses
   the same pop-pulse animation technique already established for the
   Latest News widget's icon, for a consistent, deliberate "something
   new here" language across the site rather than a one-off effect. */
.examission-service-buttons__badge {
	position: absolute;
	top: -0.6rem;
	right: -0.5rem;
	font-size: 1.6rem;
	line-height: 1;
	animation: examission-news-pop 1.6s ease-in-out infinite;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
@media (prefers-reduced-motion: reduce) {
	.examission-service-buttons__badge {
		animation: none;
	}
}
.examission-service-buttons__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--examission-shadow-md);
	border-color: var(--wp--preset--color--primary);
}
.examission-service-buttons__card:hover .examission-service-buttons__icon {
	transform: rotate(-6deg) scale(1.08);
}
.examission-service-buttons__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-light));
	color: #fff;
	margin-bottom: 0.4rem;
	transition: transform 0.25s ease;
}
.examission-service-buttons__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}
.examission-service-buttons__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--primary);
}
.examission-service-buttons__desc {
	font-size: 0.85rem;
	opacity: 0.7;
	line-height: 1.4;
}

/* Mock Test — the most-featured card, per user request, gets its own
   gold treatment with a continuous, gentle glow pulse rather than the
   static default the other cards use — drawing the eye without being
   distracting (a slow 2.5s cycle, not a flashing/urgent one). */
.examission-service-buttons__card--mock-test {
	border-color: var(--wp--preset--color--gold);
	background: linear-gradient(135deg, rgba(232, 160, 32, 0.1), var(--wp--preset--color--paper) 65%);
	animation: examission-service-card-glow 2.5s ease-in-out infinite;
}
.examission-service-buttons__card--mock-test .examission-service-buttons__icon {
	background: linear-gradient(135deg, var(--wp--preset--color--gold), #F2C464);
}
.examission-service-buttons__card--mock-test .examission-service-buttons__label {
	color: #9A6A10;
}
@keyframes examission-service-card-glow {
	0%, 100% { box-shadow: 0 0 0 rgba(232, 160, 32, 0); }
	50% { box-shadow: 0 0 22px rgba(232, 160, 32, 0.3); }
}
@media (prefers-reduced-motion: reduce) {
	.examission-service-buttons__card--mock-test {
		animation: none;
	}
}

.examission-service-buttons__card--jobs .examission-service-buttons__icon {
	background: linear-gradient(135deg, #16A34A, #4ADE80);
}
.examission-service-buttons__card--jobs .examission-service-buttons__label {
	color: #15803D;
}
.examission-service-buttons__card--notes .examission-service-buttons__icon {
	background: linear-gradient(135deg, #7C3AED, #A78BFA);
}
.examission-service-buttons__card--notes .examission-service-buttons__label {
	color: #6D28D9;
}
.examission-service-buttons__card--ebooks .examission-service-buttons__icon {
	background: linear-gradient(135deg, #C2410C, #FB923C);
}
.examission-service-buttons__card--ebooks .examission-service-buttons__label {
	color: #C2410C;
}
.examission-service-buttons__card--pay-scale .examission-service-buttons__icon {
	background: linear-gradient(135deg, #0E7490, #22D3EE);
}
.examission-service-buttons__card--pay-scale .examission-service-buttons__label {
	color: #0E7490;
}
.examission-service-buttons__card--blog .examission-service-buttons__icon {
	background: linear-gradient(135deg, #BE185D, #F472B6);
}
.examission-service-buttons__card--blog .examission-service-buttons__label {
	color: #BE185D;
}
.examission-service-buttons__card--ielts .examission-service-buttons__icon {
	background: linear-gradient(135deg, #0369A1, #38BDF8);
}
.examission-service-buttons__card--ielts .examission-service-buttons__label {
	color: #0369A1;
}

/* ---------- Past Paper PDF download ---------- */
.examission-paper-pdf-download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
	color: #1a1f2e;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 1.5rem;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.examission-paper-pdf-download:hover {
	background: #D19420;
	transform: translateY(-2px);
}
.examission-paper-pdf-download svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* The new, on-demand "solved paper" PDF button — deliberately a
   different color (primary navy, not the gold used by
   .examission-paper-pdf-download above) so the two distinct download
   options — an admin-uploaded file vs. a generated, solved copy of
   this paper's MCQs — read as visually distinct actions, not
   duplicates of each other. */
.examission-paper-pdf-generate {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	margin-bottom: 1.5rem;
	margin-left: 0.75rem;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.examission-paper-pdf-generate:hover:not(:disabled) {
	background: var(--wp--preset--color--primary-light);
	transform: translateY(-2px);
}
.examission-paper-pdf-generate:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}
.examission-paper-pdf-generate svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* ---------- Ad slots (Settings > Ad Slots) ----------
   Deliberately minimal — no border, background, or placeholder
   styling of any kind, so an empty slot (no ad code saved yet) has
   genuinely zero visual footprint, and a populated one just gets
   reasonable breathing room from whatever surrounds it. The ad
   network's own code defines its own appearance. */
.examission-ad-slot {
	margin: 1.75rem 0;
	text-align: center;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ---------- Dark mode palette override ---------- */
/*
 * Merged from the previously-separate assets/css/dark-mode.css to
 * reduce the number of render-blocking CSS requests on every page —
 * these two files always loaded together with this main stylesheet
 * anyway (no page ever loaded one without the other), so there was no
 * actual conditional-loading benefit to keeping them separate, only
 * unnecessary HTTP request overhead.
 *
 * theme.json defines the LIGHT palette as the WordPress default (used by
 * the block editor's color picker, and rendered as CSS custom properties
 * like --wp--preset--color--paper). This section simply redefines those
 * same custom properties, scoped to html[data-theme="dark"], so every
 * block that already reads the preset variable (core blocks, and our own
 * CSS) repaints in dark mode automatically with zero per-block overrides.
 *
 * The [data-theme] attribute is set as early as possible via a small
 * inline script in wp_head (see inc/class-enqueue.php) to avoid a flash
 * of the wrong theme on load.
 *
 * Palette direction: deep navy + gold, evoking an official exam-board
 * seal/gazette notification rather than a generic dark UI. Note that
 * "primary" and "primary-light" are lightened relative to the light-mode
 * navy -- the light-mode #1B3A6B has insufficient contrast as body-text
 * links against a near-black background, so dark mode uses brighter
 * tints of the same hue rather than reusing the light-mode value as-is.
 */
html[data-theme="dark"] {
	--wp--preset--color--paper: #0F1623;
	--wp--preset--color--ink: #E8EDF5;
	--wp--preset--color--primary: #6E9EDB;
	--wp--preset--color--primary-light: #8AB4E8;
	--wp--preset--color--gold: #F0B94D;
	--wp--preset--color--correct: #34C28D;
	--wp--preset--color--incorrect: #E2665C;
	--wp--preset--color--muted: #162135;
	--wp--preset--color--border: #1E2E48;
}

/* ---------- Study/Quiz toggle control ---------- */
/*
 * Merged from the previously-separate assets/css/quiz-mode-toggle.css,
 * for the same "always loads together anyway" reasoning as dark mode
 * above. The toggle control lives in the header on every page.
 */
.examission-quiz-mode-toggle {
	display: inline-flex;
	border: 1px solid var( --wp--preset--color--border, #d8dce1 );
	border-radius: 999px;
	box-shadow: var( --examission-shadow-sm );
	padding: 2px;
	gap: 2px;
}
.examission-quiz-mode-toggle__option {
	appearance: none;
	border: none;
	background: transparent;
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	color: var( --wp--preset--color--ink, #1a1f2e );
	cursor: pointer;
}
.examission-quiz-mode-toggle__option[aria-pressed="true"] {
	background: var( --wp--preset--color--primary, #1b3a6b );
	color: #fff;
}

/* ---------- Ebooks (Read Ebooks Online) ---------- */
.examission-ebook-search {
	display: flex;
	gap: 0.6rem;
	margin: 0 0 1.75rem;
	max-width: 480px;
}
.examission-ebook-search__input {
	flex: 1 1 auto;
	padding: 0.7rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
}
.examission-ebook-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.5rem;
}
.examission-ebook-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.examission-ebook-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--examission-shadow-md);
}
.examission-ebook-card__cover {
	aspect-ratio: 3 / 4;
	background: var(--wp--preset--color--muted, #eef2f8);
	display: flex;
	align-items: center;
	justify-content: center;
}
.examission-ebook-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.examission-ebook-card__cover-placeholder {
	width: 40%;
	color: var(--wp--preset--color--border, #d8dce1);
}
.examission-ebook-card__cover-placeholder svg {
	width: 100%;
	height: auto;
}
.examission-ebook-card__info {
	padding: 0.85rem 1rem;
}
.examission-ebook-card__title {
	margin: 0 0 0.25rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	line-height: 1.3;
}
.examission-ebook-card__author {
	margin: 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.65;
}

/* The reader itself, on an individual Ebook's own page — a fixed,
   generous aspect ratio (portrait-document-shaped, not a fixed pixel
   height) so it comfortably fits a typical book page's proportions
   across different screen sizes, rather than an arbitrary fixed
   height that would be too short on some screens and wastefully tall
   on others. */
.examission-ebook-reader__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0.5rem;
}
.examission-ebook-reader__author {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	opacity: 0.75;
}
/* Per explicit user request: only a logged-in visitor can actually
   download — a logged-out visitor sees a visually distinct (dimmer,
   dashed-border) variant of the same button that opens the login
   modal on click instead of downloading anything, rather than either
   hiding the button entirely (which would look like the feature
   doesn't exist at all) or silently letting anyone download. */
.examission-ebook-reader__download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.2rem;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.examission-ebook-reader__download:hover {
	background: var(--wp--preset--color--primary-light);
	transform: translateY(-1px);
}
button.examission-ebook-reader__download {
	background: transparent;
	border: 1.5px dashed var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	opacity: 0.75;
}
button.examission-ebook-reader__download:hover {
	background: var(--wp--preset--color--muted, #eef2f8);
	transform: none;
}
.examission-ebook-reader__download svg {
	width: 1.1rem;
	height: 1.1rem;
}
.examission-ebook-reader {
	margin: 0.5rem 0 2rem;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--examission-shadow-md);
	width: 100%;
	height: 85vh;
	min-height: 600px;
}
.examission-ebook-reader__frame {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

/* ---------- Pay Scale Calculator ---------- */
.examission-pay-scale-calculator {
	max-width: 720px;
}
.examission-pay-scale-calculator__controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	margin-bottom: 1.75rem;
}
.examission-pay-scale-calculator__field label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.examission-pay-scale-calculator__field select,
.examission-pay-scale-calculator__field input {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
}
.examission-pay-scale-calculator__results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.examission-pay-scale-calculator__result {
	padding: 1.1rem 1.2rem;
	border-radius: 10px;
	background: var(--wp--preset--color--muted, #eef2f8);
	border: 1px solid var(--wp--preset--color--border);
}
.examission-pay-scale-calculator__result--estimate {
	background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-light, var(--wp--preset--color--primary)));
	border: none;
}
.examission-pay-scale-calculator__result--estimate .examission-pay-scale-calculator__result-label,
.examission-pay-scale-calculator__result--estimate .examission-pay-scale-calculator__result-value {
	color: #fff;
}
.examission-pay-scale-calculator__result-label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--ink);
	opacity: 0.65;
	margin-bottom: 0.35rem;
}
.examission-pay-scale-calculator__result-value {
	display: block;
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}
.examission-pay-scale-calculator__disclaimer {
	font-size: 0.82rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.6;
	margin: 0;
}

/* ---------- "More Subjects" Topics flyout (portal) ----------
   A single, standalone element created and positioned entirely by
   subjects-nav-overflow.js (its showPortalFlyout()/hidePortalFlyout()),
   appended directly to <body> rather than nested inside the "More
   Subjects" panel — so it needs its own COMPLETE styling here, since
   none of the .examission-subjects-nav__submenu rules elsewhere in
   this file apply to it at all (it isn't actually a descendant of
   that panel in the DOM, by design — see the JS comment on this same
   mechanism for the full reasoning). position: fixed + a high z-index
   are set directly here since this element's position never changes
   between hovers except via the inline top/right JS sets each time —
   only those two values actually need to be dynamic. */
.examission-subjects-nav__portal-flyout {
	display: none;
	position: fixed;
	z-index: 9999;
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	min-width: 220px;
	max-height: 60vh;
	overflow-y: auto;
	background: var(--wp--preset--color--paper, #fff);
	border-radius: 10px;
	box-shadow: var(--examission-shadow-md);
}
.examission-subjects-nav__portal-flyout a {
	display: block;
	padding: 0.55rem 0.7rem;
	border-radius: 6px;
	color: var(--wp--preset--color--ink, #1a1f2e);
	font-size: 0.85rem;
	text-decoration: none;
}
.examission-subjects-nav__portal-flyout a:hover {
	background: var(--wp--preset--color--muted, #eef2f8);
	color: var(--wp--preset--color--primary, #1b3a6b);
}

/* ---------- Job Details (single Job Posting page) ---------- */
.examission-job-details {
	margin: 1.5rem 0 2rem;
	max-width: 780px;
}
.examission-job-details__status {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	margin-bottom: 1.25rem;
}
.examission-job-details__status--open {
	background: rgba(22, 163, 74, 0.12);
	color: #15803D;
}
.examission-job-details__status--closed {
	background: rgba(220, 38, 38, 0.1);
	color: #B91C1C;
}
.examission-job-details__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
	margin-bottom: 1.75rem;
}
.examission-job-details__fact {
	padding: 0.9rem 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--muted, #eef2f8);
	border: 1px solid var(--wp--preset--color--border);
}
.examission-job-details__fact-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--ink);
	opacity: 0.6;
	margin-bottom: 0.3rem;
}
.examission-job-details__fact-value {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.examission-job-details__section {
	margin-bottom: 1.75rem;
	padding: 1.25rem 1.4rem;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--paper);
}
.examission-job-details__section h3 {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	color: var(--wp--preset--color--primary);
}
.examission-job-details__section p {
	margin: 0;
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
}
.examission-job-details__section--prep {
	background: linear-gradient(135deg, rgba(212, 160, 46, 0.07), rgba(212, 160, 46, 0.02));
	border-color: rgba(212, 160, 46, 0.3);
}
.examission-job-details__pdf-download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.examission-job-details__pdf-download:hover {
	background: var(--wp--preset--color--primary-light);
	transform: translateY(-2px);
}
.examission-job-details__pdf-download svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* ---------- Job Listing (archive page, split Open/Previously Opened) ---------- */
.examission-job-listing__heading {
	margin: 2rem 0 1.25rem;
	font-size: 1.3rem;
	color: var(--wp--preset--color--primary);
}
.examission-job-listing__heading:first-child {
	margin-top: 0;
}
.examission-job-listing__heading--closed {
	color: var(--wp--preset--color--ink);
	opacity: 0.65;
}
.examission-job-listing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
	margin-bottom: 1rem;
}
.examission-job-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.examission-job-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--examission-shadow-md);
}
.examission-job-card--closed {
	opacity: 0.7;
}
.examission-job-card__image {
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--muted, #eef2f8);
	overflow: hidden;
}
.examission-job-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.examission-job-card__body {
	padding: 1rem 1.15rem 1.2rem;
}
.examission-job-card__org {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.35rem;
}
.examission-job-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
	color: var(--wp--preset--color--ink);
	line-height: 1.35;
}
.examission-job-card__deadline {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: rgba(22, 163, 74, 0.12);
	color: #15803D;
}
.examission-job-card__deadline.is-closed {
	background: rgba(220, 38, 38, 0.1);
	color: #B91C1C;
}

/* ---------- Past Paper auto-generated intro ---------- */
.examission-past-paper-intro {
	margin: 0.5rem 0 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 10px;
	background: var(--wp--preset--color--muted, #eef2f8);
	border-left: 3px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	line-height: 1.7;
}

/* ---------- FAQ display ---------- */
.examission-faq {
	margin: 2rem 0;
	max-width: 780px;
}
.examission-faq__heading {
	margin: 0 0 1rem;
	font-size: 1.3rem;
	color: var(--wp--preset--color--primary);
}
.examission-faq__item {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	margin-bottom: 0.75rem;
	overflow: hidden;
}
.examission-faq__question {
	padding: 0.9rem 1.1rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
}
.examission-faq__question::-webkit-details-marker {
	display: none;
}
.examission-faq__question::after {
	content: '+';
	float: right;
	font-weight: 800;
	color: var(--wp--preset--color--gold);
}
.examission-faq__item[open] .examission-faq__question::after {
	content: '\2212';
}
.examission-faq__answer {
	padding: 0 1.1rem 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
	opacity: 0.85;
}

/* ---------- IELTS Writing/Speaking meta display ---------- */
.examission-ielts-meta {
	margin: 0.75rem 0 1.5rem;
}
.examission-ielts-meta__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: rgba(212, 160, 46, 0.14);
	color: var(--wp--preset--color--gold);
	font-size: 0.78rem;
	font-weight: 700;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
}
.examission-ielts-meta__badge--score {
	background: rgba(22, 163, 74, 0.12);
	color: #15803D;
}
.examission-ielts-meta__prompt {
	margin-top: 0.6rem;
	padding: 1rem 1.2rem;
	border-radius: 10px;
	background: var(--wp--preset--color--muted, #eef2f8);
	line-height: 1.7;
}
.examission-ielts-meta__questions {
	margin: 0.5rem 0 0;
	padding-left: 1.2rem;
}
.examission-ielts-meta__questions li {
	margin-bottom: 0.4rem;
}

/* ---------- "Why ExaMission" homepage long-form section ---------- */
#why-examission {
	padding-top: 1rem;
}
.examission-why-content h3 {
	margin-top: 2.25rem;
	margin-bottom: 0.6rem;
	font-size: 1.25rem;
	color: var(--wp--preset--color--primary);
}
.examission-why-content h3:first-child {
	margin-top: 0;
}
.examission-why-content p {
	line-height: 1.75;
	color: var(--wp--preset--color--ink);
	opacity: 0.9;
	margin-bottom: 1rem;
}

/* ---------- Table of Contents ---------- */
.examission-toc {
	margin: 1.75rem 0 2rem;
	border-radius: 12px;
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--gold);
	box-shadow: 0 2px 10px rgba(27, 58, 107, 0.06);
	text-align: left;
	overflow: hidden;
}
.examission-toc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 1rem 1.5rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: left;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.examission-toc__title::-webkit-details-marker {
	display: none;
}
.examission-toc__title::after {
	content: '';
	flex-shrink: 0;
	width: 0.55rem;
	height: 0.55rem;
	margin-left: 1rem;
	border-right: 2px solid var(--wp--preset--color--gold);
	border-bottom: 2px solid var(--wp--preset--color--gold);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.examission-toc[open] .examission-toc__title::after {
	transform: rotate(-135deg);
}
.examission-toc__list {
	list-style: none;
	margin: 0;
	padding: 0.25rem 1.5rem 1.25rem;
	text-align: left;
}
.examission-toc__list li {
	margin: 0;
	padding: 0.4rem 0;
	text-align: left;
}
.examission-toc__list a {
	position: relative;
	display: inline-block;
	padding-left: 1.1rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
	transition: color 0.15s ease, padding-left 0.15s ease;
}
.examission-toc__list a::before {
	content: '\2192';
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--gold);
	opacity: 0.8;
}
.examission-toc__list a:hover {
	color: var(--wp--preset--color--gold);
	padding-left: 1.4rem;
}
.examission-toc__item--sub {
	margin-left: 1.4rem;
	font-size: 0.92rem;
	opacity: 0.9;
}


/* ---------- Subject Intro (Syllabus, Prep Tips, Books, etc.) ---------- */
.examission-subject-intro {
	margin: 1.5rem 0 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.examission-subject-intro__section {
	border-radius: 10px;
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--primary);
	overflow: hidden;
}
.examission-subject-intro__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0.9rem 1.25rem;
	font-weight: 700;
	font-size: 1rem;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.examission-subject-intro__heading::-webkit-details-marker {
	display: none;
}
.examission-subject-intro__heading::after {
	content: '';
	flex-shrink: 0;
	width: 0.55rem;
	height: 0.55rem;
	margin-left: 1rem;
	border-right: 2px solid var(--wp--preset--color--gold);
	border-bottom: 2px solid var(--wp--preset--color--gold);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.examission-subject-intro__section[open] .examission-subject-intro__heading::after {
	transform: rotate(-135deg);
}
.examission-subject-intro__body {
	padding: 0 1.25rem 1.1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
}
.examission-subject-intro__body p:last-child {
	margin-bottom: 0;
}
.examission-subject-intro__body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 0.75rem 0;
}
.examission-subject-intro__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
	font-size: 0.92rem;
}
.examission-subject-intro__body table th,
.examission-subject-intro__body table td {
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	text-align: left;
}
.examission-subject-intro__body table th {
	background: var(--wp--preset--color--muted, #eef2f8);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.examission-subject-intro__body table tr:nth-child(even) td {
	background: rgba(0, 0, 0, 0.015);
}

/* ---------- Related Content (internal linking) ---------- */
.examission-related-content {
	margin: 2rem 0;
	padding: 1.5rem;
	border-radius: 12px;
	background: var(--wp--preset--color--muted, #eef2f8);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
@media (max-width: 782px) {
	.examission-related-content {
		grid-template-columns: 1fr;
	}
}
.examission-related-content__heading {
	margin: 0 0 0.6rem;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.examission-related-content__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.examission-related-content__list li {
	margin-bottom: 0.55rem;
}
.examission-related-content__list li:last-child {
	margin-bottom: 0;
}
.examission-related-content__list a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-size: 0.92rem;
	line-height: 1.5;
}
.examission-related-content__list a:hover {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
}

/* ---------- Submit MCQ Form (front-end Contributor submission) ---------- */
.examission-submit-mcq-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	max-width: 640px;
}
.examission-submit-mcq-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.examission-submit-mcq-form__field input[type="text"],
.examission-submit-mcq-form__field textarea,
.examission-submit-mcq-form__field select {
	font-weight: 400;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--wp--preset--color--ink);
}
.examission-submit-mcq-form__field input[type="text"]:focus,
.examission-submit-mcq-form__field textarea:focus,
.examission-submit-mcq-form__field select:focus {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 1px;
}
.examission-submit-mcq-form__correct-options {
	display: flex;
	gap: 1.25rem;
	font-weight: 400;
}
.examission-submit-mcq-form__correct-options label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.examission-submit-mcq-form__submit {
	align-self: flex-start;
	padding: 0.75rem 1.75rem;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.examission-submit-mcq-form__submit:hover {
	background: var(--wp--preset--color--gold);
	transform: translateY(-1px);
}
.examission-submit-mcq-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}
.examission-submit-mcq-form__message {
	padding: 0.85rem 1.1rem;
	border-radius: 8px;
	font-weight: 600;
}
.examission-submit-mcq-form__message--success {
	background: rgba(0, 163, 42, 0.1);
	color: #00701e;
}
.examission-submit-mcq-form__message--error {
	background: rgba(214, 54, 56, 0.1);
	color: #a11;
}