/*
Theme Name:   Hello Elementor Child
Template:     hello-elementor
Version:      1.0.0
Description:  Site styles for new-site. Content lives in native Elementor widgets;
              this file only styles them through CSS classes set in each widget's
              Advanced > CSS Classes field. Colours and fonts come from Elementor
              Site Settings (globals) — use var(--e-global-color-*) here, not hex values.
*/

/* Accessibility (WCAG 2.1 AA), site-wide.
   Button widgets: the Site Settings button colours (deep teal, white text; lime on hover and keyboard focus).
   Without this the widget's own default wins, white on lime, which is too faint to read (1.8:1). A colour set
   on one button in Elementor still wins. */
body .elementor-widget-button .elementor-button { background-color: var(--e-global-color-primary); color: var(--e-global-color-white); }
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus-visible { background-color: var(--e-global-color-accent); color: var(--e-global-color-primary); }
/* Links in running text are underlined: the link teal is too close to the text colour to tell them apart by
   colour alone. */
.elementor-widget-text-editor a { text-decoration: underline; text-underline-offset: 3px; }
/* Keyboard focus on the dark header, full-screen menu and footer: a lime ring, as the browser's black one
   doesn't show on deep teal. */
.site-header :focus-visible,
.el-site-menu :focus-visible,
.el-site-footer :focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 2px; }

/* Header "Sign in" button: a normal menu item (Appearance > Menus) given the CSS class el-header-cta.
   Signed in, the plugin turns it into "Account" (accounts.php). */
.site-header .site-navigation ul.menu li.el-header-cta > a,
.site-header .site-navigation ul.menu li.el-header-signout > a {
	border: 2px solid var(--e-global-color-accent);
	background-color: var(--e-global-color-accent);
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: var(--e-global-typography-accent-font-weight);
	padding: 10px 26px;
	border-radius: 0;
	box-shadow: none;
	text-align: center;
	transition: background-color .2s, border-color .2s, color .2s;
}
.site-header .site-navigation ul.menu li.el-header-cta > a:hover,
.site-header .site-navigation ul.menu li.el-header-cta > a:focus-visible,
.site-header .site-navigation ul.menu li.el-header-signout > a:hover,
.site-header .site-navigation ul.menu li.el-header-signout > a:focus-visible {
	border-color: var(--e-global-color-white);
	background-color: var(--e-global-color-white);
	color: var(--e-global-color-primary);
}
/* Signed in: "Sign out" beside the Account button, the same size, outlined in white. On phones both go
   under the logo, side by side. */
.site-header .site-navigation ul.menu li.el-header-signout { margin-left: 12px; }
.site-header .site-navigation ul.menu li.el-header-signout > a {
	border-color: var(--e-global-color-white);
	background-color: transparent;
	color: var(--e-global-color-white);
}
@media (max-width: 600px) {
	.site-header .header-inner:has(.el-header-signout) { row-gap: 16px; }
	.site-header .header-inner:has(.el-header-signout) .site-navigation { flex-basis: 100%; }
	.site-header .site-navigation ul.menu:has(.el-header-signout) { flex-wrap: nowrap; width: 100%; }
	.site-header .site-navigation ul.menu li.el-header-cta:has(+ .el-header-signout),
	.site-header .site-navigation ul.menu li.el-header-signout { flex: 1; }
	.site-header .site-navigation ul.menu li.el-header-cta:has(+ .el-header-signout) > a,
	.site-header .site-navigation ul.menu li.el-header-signout > a { flex: 1; }
}

/* Full-screen menu (template-parts/dynamic-header.php, assets/site-menu.js). The header's menu button sits
   after Sign in, a square as tall as it (line + padding + border), outlined like Sign out. Open, it turns
   into a close button and the "Site menu" template fills the screen under the header, in the header's colour. */
.site-header .header-inner .site-navigation { margin-left: auto; }
.site-header .el-menu-toggle {
	display: inline-flex;
	flex: none;
	align-self: center;
	align-items: center;
	justify-content: center;
	width: calc(1.6rem + 24px);
	height: calc(1.6rem + 24px);
	margin-left: 12px;
	padding: 0;
	border: 2px solid var(--e-global-color-white);
	border-radius: 0;
	background-color: transparent;
	color: var(--e-global-color-white);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.site-header .el-menu-toggle[hidden] { display: none; }
.site-header .el-menu-toggle:hover,
.site-header .el-menu-toggle:focus-visible { background-color: var(--e-global-color-white); color: var(--e-global-color-primary); }
.site-header .el-menu-toggle:focus { background-color: transparent; color: var(--e-global-color-white); }
.site-header .el-menu-toggle:hover:focus,
.site-header .el-menu-toggle:focus-visible { background-color: var(--e-global-color-white); color: var(--e-global-color-primary); }
.el-menu-toggle svg { width: 24px; height: 24px; fill: currentColor; }
.el-menu-toggle .el-menu-icon-close,
.el-menu-toggle[aria-expanded="true"] .el-menu-icon-open { display: none; }
.el-menu-toggle[aria-expanded="true"] .el-menu-icon-close { display: block; }
@media (max-width: 600px) {
	/* Signed in, Account and Sign out take their own row: keep the menu button up beside the logo. */
	.site-header .header-inner:has(.el-header-signout) .el-menu-toggle { order: 1; margin-left: auto; }
	.site-header .header-inner:has(.el-header-signout) .site-navigation { order: 2; }
}

html.el-menu-is-open { overflow: hidden; }
.el-menu-is-open body { padding-top: var(--el-header-height); } /* Keeps the page still behind the fade-in. */
.el-menu-is-open .site-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 1001;
}
.el-site-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow-y: auto;
	padding-top: calc(var(--el-header-height, 96px) + var(--wp-admin--admin-bar--height, 0px));
	background-color: var(--e-global-color-primary);
	animation: el-menu-in .2s ease-out;
}
.el-site-menu[hidden] { display: none; }
@keyframes el-menu-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .el-site-menu { animation: none; } }
.el-site-menu .elementor-icon-list-item a:hover .elementor-icon-list-text,
.el-site-menu .elementor-icon-list-item a:focus-visible .elementor-icon-list-text { text-decoration: underline; text-underline-offset: 4px; }
/* The panel (class el-menu-panel) fills the screen, so its mosaic mark sits at the bottom right. */
.el-site-menu .el-menu-panel { min-height: calc(100dvh - var(--el-header-height, 96px) - var(--wp-admin--admin-bar--height, 0px)); }
/* Explore (class el-menu-main): large rows between lines, each with the home tiles' chevron, in lime. */
.el-menu-main .elementor-icon-list-item { border-bottom: 1px solid rgb(255 255 255 / 0.16); }
.el-menu-main .elementor-icon-list-item:first-child { border-top: 1px solid rgb(255 255 255 / 0.16); }
.el-menu-main .elementor-icon-list-item a { width: 100%; padding: 20px 0; gap: 16px; }
.el-menu-main .elementor-icon-list-item a::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	margin: 0 6px 0 auto;
	border-top: 2px solid var(--e-global-color-accent);
	border-right: 2px solid var(--e-global-color-accent);
	transform: rotate(45deg);
}
@media (max-width: 767px) {
	.el-menu-main .elementor-icon-list-item a { padding: 16px 0; }
}

/* No shadows anywhere: Hello adds a 1px inset line under mobile-dropdown menu links. */
.site-navigation-dropdown ul.menu li a { box-shadow: none; }

/* Home search box: WordPress Search widget with CSS class el-search. */
.el-search .search-form { display: flex; gap: 12px; }
.el-search .search-form label { flex: 1; margin: 0; }
.el-search .search-field,
.el-signup input,
.el-signup select {
	width: 100%;
	min-height: 56px;
	padding: 0 18px;
	border: 1px solid var(--e-global-color-muted);
	border-radius: 0;
	background: var(--e-global-color-white);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 1rem;
}
.el-search .search-submit,
.el-signup button {
	min-height: 56px;
	padding: 0 36px;
	border: 0;
	border-radius: 0;
	background-color: var(--e-global-color-accent);
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: var(--e-global-typography-accent-font-weight);
	font-size: 1rem;
	cursor: pointer;
}
/* Home search leads the page: a size up from the digest fields. (The search page's compact card
   sets its own size further down.) */
.el-search .search-field { min-height: 64px; padding: 0 20px; font-size: 1.125rem; }
.elementor-kit-4 .el-search .search-submit { min-height: 64px; padding: 0 40px; font-size: 1.125rem; }
/* Search stays lime (it sits on the teal band) though Site Settings buttons are teal; the kit's
   .elementor-kit-4 input[type="submit"] outranks two classes, hence the kit class here. */
.elementor-kit-4 .el-search .search-submit { background-color: var(--e-global-color-accent); color: var(--e-global-color-primary); }
.elementor-kit-4 .el-search .search-submit:hover,
.elementor-kit-4 .el-search .search-submit:focus-visible { background-color: var(--e-global-color-primary); color: var(--e-global-color-white); }
/* No card: field and button sit straight on the teal band (container class el-search-open). */
.el-search-open .el-search .search-field { border-color: var(--e-global-color-white); }
.elementor-kit-4 .el-search-open .el-search .search-submit:hover,
.elementor-kit-4 .el-search-open .el-search .search-submit:focus-visible { background-color: var(--e-global-color-white); color: var(--e-global-color-primary); }

/* Digest form: Shortcode widget [el_digest_form] with CSS class el-signup (Caribbean Mosaic plugin). */
.el-signup form { display: flex; flex-direction: column; gap: 16px; }
/* Light card: teal button, lime on hover. Errors on white, so the red stays crisp on the tinted card. */
.el-signup button { background-color: var(--e-global-color-primary); color: var(--e-global-color-white); }
.el-signup button:hover,
.el-signup button:focus-visible { background-color: var(--e-global-color-accent); color: var(--e-global-color-primary); }
.el-signup .el-form-error { background-color: var(--e-global-color-white); }
.el-signup .el-form-error p,
.el-signup-done { margin: 0; }
.el-signup-done { line-height: 1.5; }
.el-signup label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.el-signup button { align-self: flex-start; margin-top: 16px; }
/* Signed in: a line saying whether they're subscribed, then the tick and Subscribe, or an outlined
   Unsubscribe. */
.el-signup-note { margin: 0; font-size: 1rem; line-height: 1.5; }
.el-signup-member button { margin-top: 8px; }
.el-signup button.el-signup-button--line { border: 2px solid var(--e-global-color-primary); background-color: transparent; color: var(--e-global-color-primary); }
.el-signup button.el-signup-button--line:hover,
.el-signup button.el-signup-button--line:focus-visible { background-color: var(--e-global-color-primary); color: var(--e-global-color-white); }
/* The card is as tall as what it shows (form, notice or thank-you), not stretched beside the column next to it. */
.e-con:has(> .el-signup) { align-self: start; }
/* Square select with a chevron drawn in the text colour (no image, follows the global). */
.el-signup select,
.el-filter select,
.el-form select {
	appearance: none;
	padding-right: 48px;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--e-global-color-text) 50%),
		linear-gradient(135deg, var(--e-global-color-text) 50%, transparent 50%);
	background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* Tick lines (consent, "I'd also like an account"): label with class el-consent wrapping an unticked
   checkbox. Square box, tick drawn in white. */
.el-signup .el-consent { flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 400; font-size: 1rem; line-height: 1.5; }
.el-signup .el-consent a,
.el-signup .el-signup-done a { color: inherit; text-decoration: underline; }
.el-signup input[type="checkbox"],
.el-check input[type="checkbox"] {
	appearance: none;
	flex: none;
	width: 22px;
	height: 22px;
	min-height: 0;
	margin: 1px 0 0;
	padding: 0;
	border: 1px solid var(--e-global-color-muted);
	border-radius: 0;
	background: var(--e-global-color-white) center / 14px no-repeat;
	cursor: pointer;
}
.el-signup input[type="checkbox"]:checked,
.el-check input[type="checkbox"]:checked {
	border-color: var(--e-global-color-primary);
	background-color: var(--e-global-color-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5 5.5 11 12 3.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}
.el-signup input[type="checkbox"]:focus-visible,
.el-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 2px; }

/* Footer (Elementor template "Site footer"): links inside its text widgets (class el-footer-text). */
/* Everything in the footer is white. Links in footer text are bold (weight sets them apart from the text);
   Site Settings make link hover teal, which vanishes on the dark footer: links stay white and underline instead. */
.el-site-footer .el-footer-text a { color: var(--e-global-color-white); font-weight: 600; text-decoration: none; }
.el-site-footer .el-footer-text a:hover,
.el-site-footer .el-footer-text a:focus-visible { color: var(--e-global-color-white); text-decoration: underline; }
.el-site-footer .elementor-icon-list-item a:hover .elementor-icon-list-text,
.el-site-footer .elementor-icon-list-item a:focus-visible .elementor-icon-list-text { text-decoration: underline; }
.el-footer-text p:last-child { margin-bottom: 0; }
/* Studio credit (class el-footer-credit): a quiet "Site by" in the headings' face, then a small Text and Hues
   mark. No underline; it brightens on hover instead. */
.el-site-footer .el-footer-credit a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--e-global-typography-primary-font-family), sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.el-site-footer .el-footer-credit a:hover,
.el-site-footer .el-footer-credit a:focus-visible { text-decoration: none; opacity: 1; }
.el-site-footer .el-footer-credit img { display: block; width: 22px; height: 22px; }

/* Search results page (child theme search.php). Search card is deep teal (class el-search-dark):
   Site Settings hover the button teal, so hover to white instead. */
.el-search-dark .el-search .search-field { border-color: var(--e-global-color-white); }
.el-search-dark .el-search .search-submit:hover,
.el-search-dark .el-search .search-submit:focus-visible { background-color: var(--e-global-color-white); color: var(--e-global-color-primary); }
/* Smaller box than the home page's, to match the compact results. */
.el-search-dark .el-search .search-field,
.el-search-dark .el-search .search-submit { min-height: 48px; font-size: 1rem; }
.el-search-dark .el-search .search-submit { padding: 0 28px; }

/* Results line up with the search box inside the card (24px gutter + 40px card padding).
   With filters: filter column on the left, results on the right. */
.el-results { max-width: 1248px; margin: 0 auto; padding: 40px 64px 96px; }
.el-results--filtered { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 56px; align-items: start; }
.el-results-main { max-width: 720px; min-width: 0; }

/* Filters: label above each dropdown, square, chevron drawn in the text colour. */
.el-filters-heading { margin: 0 0 16px; font-size: 1rem; }
.el-filter-form { display: flex; flex-direction: column; gap: 16px; }
.el-filter-form[hidden] { display: none; }
.el-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.el-filter-label { padding: 0; color: var(--e-global-color-text); font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.el-filter select {
	width: 100%;
	min-height: 44px;
	padding: 0 40px 0 12px;
	border: 1px solid var(--e-global-color-muted);
	border-radius: 0;
	background-color: var(--e-global-color-white);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 1rem;
}
.el-filter select:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 1px; }
.el-filter-years { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.el-filter-years legend { margin-bottom: 6px; }
.el-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.el-filters .el-filter-actions button {
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-white);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: var(--e-global-typography-accent-font-weight);
	font-size: 1rem;
	cursor: pointer;
}
.el-filters .el-filter-actions button:hover,
.el-filters .el-filter-actions button:focus-visible { background-color: var(--e-global-color-accent); color: var(--e-global-color-primary); }
.el-results .el-filter-actions a { color: var(--e-global-color-primary); font-size: 1rem; font-weight: 600; }

/* Small screens: a "Filters" button opens and closes the list (script in search.php). */
.el-filters button.el-filters-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--e-global-color-primary);
	border-radius: 0;
	background-color: var(--e-global-color-white);
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: var(--e-global-typography-accent-font-weight);
	font-size: 1rem;
	cursor: pointer;
}
.el-filters button.el-filters-toggle[hidden] { display: none; }
.el-filters button.el-filters-toggle:hover,
.el-filters button.el-filters-toggle:focus-visible { background-color: var(--e-global-color-lavender); color: var(--e-global-color-primary); }
.el-filters button.el-filters-toggle span { font-weight: 400; }
.el-filters button.el-filters-toggle::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.el-filters button.el-filters-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.el-filters-toggle:not([hidden]) + .el-filters-heading { display: none; }
.el-filters-toggle:not([hidden]) ~ .el-filter-form { margin-top: 20px; }
.el-results-count { margin: 0 0 24px; color: var(--e-global-color-muted); font-size: 1rem; }
.el-results .el-results-none { margin-bottom: 16px; color: var(--e-global-color-text); font-size: 1rem; }
.el-results-list { display: flex; flex-direction: column; gap: 28px; margin: 0; padding: 0; list-style: none; }
/* Each result: cover on the left (same A4 box as the home page's featured resource), text on the right. */
.el-result { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; }
.el-result-thumb,
.el-featured-cover { display: block; }
/* Covers (results, home page featured, resource page): A4 portrait box (1:1.414). Other shapes are trimmed
   evenly to fit; a US Letter cover loses a sliver at each side. */
.el-result-thumb img,
.el-featured-cover img,
.el-resource-cover img,
.el-cover-empty {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1.414;
	object-fit: cover;
	object-position: center;
	border: 1px solid var(--e-global-color-divider);
}
/* No cover yet: a cover of its own. "Caribbean Mosaic" top left as in the logo, the mark faint, oversized
   and cropped at the bottom right. Sized in cqw so the 72px result thumbnail is the same cover in small. */
.el-cover-empty { position: relative; overflow: hidden; container-type: inline-size; border-color: transparent; background-color: var(--e-global-color-lavender); }
.el-cover-name { position: absolute; top: 10cqw; left: 10cqw; z-index: 1; display: flex; flex-direction: column; gap: 1.6cqw; color: var(--e-global-color-primary); font-family: var(--e-global-typography-primary-font-family), sans-serif; line-height: 1; }
.el-cover-name span:first-child { font-size: 6.4cqw; font-weight: 500; letter-spacing: .1em; }
.el-cover-name span:last-child { font-size: 18cqw; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.el-cover-empty svg { position: absolute; right: -36cqw; bottom: -36cqw; width: 120cqw; height: auto; }
/* Flat tones (no opacity), so the overlapping tiles don't darken where they cross. */
.el-cover-empty .el-mark-tile { fill: color-mix(in srgb, var(--e-global-color-primary) 18%, var(--e-global-color-lavender)); }
.el-cover-empty .el-mark-lime { fill: color-mix(in srgb, #aecc3a 55%, var(--e-global-color-lavender)); }
.el-result-title {
	margin: 0 0 4px;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}
.el-results .el-result-title a { color: var(--e-global-color-primary); text-decoration: none; }
.el-results .el-result-title a:hover,
.el-results .el-result-title a:focus-visible { color: var(--e-global-color-secondary); text-decoration: underline; }
/* Access level tag + authors · type · country · year. */
.el-result-details { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; color: var(--e-global-color-muted); font-size: .9375rem; line-height: 1.5; }
.el-access { padding: 0 6px; border: 1px solid currentColor; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.el-access--public { color: var(--e-global-color-primary); }
.el-access--view { color: var(--e-global-color-muted); }
.el-access--restricted { color: var(--e-global-color-secondary); }
/* How access works: the same tag above each level's description. */
.el-level .el-access { display: inline-block; margin-bottom: 6px; }
/* Blurb: two lines at most, ending in "…". */
.el-result-snippet {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--e-global-color-text);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
.el-result-snippet strong { font-weight: 700; }
/* Keyword tags: under each result and on the resource page (click to list everything with that keyword) and,
   once chosen, in the filter column with × to remove it. The chosen one is filled teal. 24px tall at least, for touch. */
.el-result-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.el-results .el-tag,
.el-resource .el-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	padding: 2px 8px;
	background-color: var(--e-global-color-lavender);
	color: var(--e-global-color-primary);
	font-size: .9375rem;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.el-results .el-tag:hover,
.el-results .el-tag:focus-visible,
.el-resource .el-tag:hover,
.el-resource .el-tag:focus-visible,
.el-results .el-tag[aria-current="true"],
.el-filter-keyword .el-tag { background-color: var(--e-global-color-primary); color: var(--e-global-color-white); }
.el-results .el-filter-keyword .el-tag { align-self: flex-start; min-height: 36px; padding: 4px 12px; font-size: .9375rem; font-weight: 600; }
.el-filter-keyword .el-tag span[aria-hidden] { font-size: 1rem; font-weight: 400; line-height: 1; }
.el-results .el-filter-keyword .el-tag:hover,
.el-results .el-filter-keyword .el-tag:focus-visible { background-color: var(--e-global-color-accent); color: var(--e-global-color-primary); }
.el-results-help p { margin: 0 0 8px; }
.el-results-help { font-size: 1rem; }
.el-results-help ul { margin: 0; padding-left: 20px; line-height: 1.8; }
.el-results .el-results-help a { color: var(--e-global-color-primary); font-weight: 600; }

/* Numbered pages, square like the rest of the site. */
.el-results .navigation { display: block; margin: 48px 0 0; padding: 0; }
.el-results .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.el-results .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-size: 1rem;
	border: 1px solid var(--e-global-color-divider);
	color: var(--e-global-color-primary);
	text-decoration: none;
}
.el-results a.page-numbers:hover,
.el-results a.page-numbers:focus-visible { border-color: var(--e-global-color-primary); }
.el-results .page-numbers.current { border-color: var(--e-global-color-primary); background-color: var(--e-global-color-primary); color: var(--e-global-color-white); }
.el-results .page-numbers.dots { border-color: transparent; }

@media (max-width: 1024px) {
	.el-results { padding-right: 40px; }
	.el-results--filtered { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 767px) {
	.el-results { padding: 28px 16px 64px; }
	.el-results--filtered { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.el-result { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
	.el-result-title { font-size: 1.0625rem; }
}

/* Home page lists: Shortcode widgets [el_featured_resource] and [el_latest_resources] (Caribbean Mosaic plugin). */
.el-featured { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: start; }
.el-featured-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.el-featured-title { margin: 0; font-size: 1.75rem; }
.el-featured-title a { color: var(--e-global-color-primary); text-decoration: none; }
.el-featured-title a:hover,
.el-featured-title a:focus-visible { color: var(--e-global-color-secondary); text-decoration: underline; }
.el-featured-blurb { margin: 0; }
.el-featured-meta { margin: 0; color: var(--e-global-color-muted); font-size: 1rem; }
/* Two classes: Site Settings' link colour (.elementor-kit-4 a) would otherwise recolour the label. */
.el-featured .el-featured-button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-top: 8px;
	padding: 0 28px;
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-white);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: var(--e-global-typography-accent-font-weight);
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.el-featured .el-featured-button:hover,
.el-featured .el-featured-button:focus-visible { background-color: var(--e-global-color-accent); color: var(--e-global-color-primary); }

/* Several featured: one slide at a time, swipe or the arrows by the heading (Shortcode widget
   [el_featured_nav] in a row with the heading). Square buttons with the Latest additions chevron. */
.el-featured-track { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.el-featured-track::-webkit-scrollbar { display: none; }
.el-featured-track > .el-featured { flex: 0 0 100%; scroll-snap-align: start; }
.el-featured-nav { display: flex; gap: 8px; }
.elementor-kit-4 .el-featured-nav button {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--e-global-color-primary);
	border-radius: 0;
	background-color: transparent;
	color: var(--e-global-color-primary);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.el-featured-nav button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translate(-70%, -50%) rotate(45deg);
}
.el-featured-nav .el-featured-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.elementor-kit-4 .el-featured-nav button:hover,
.elementor-kit-4 .el-featured-nav button:focus-visible { background-color: var(--e-global-color-primary); color: var(--e-global-color-white); }
@media (prefers-reduced-motion: reduce) {
	.el-featured-track { scroll-behavior: auto; }
}

/* Latest additions: teal chevron, title link, thin line between items. */
.el-latest { margin: 0; padding: 0; list-style: none; }
.el-latest li { padding: 7px 0; }
.el-latest li + li { border-top: 1px solid var(--e-global-color-divider); }
.el-latest li:first-child { padding-top: 0; }
.el-latest a { display: flex; align-items: baseline; gap: 12px; color: var(--e-global-color-primary); line-height: 1.45; text-decoration: none; }
.el-latest a::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--e-global-color-secondary);
	border-right: 2px solid var(--e-global-color-secondary);
	transform: translateY(-2px) rotate(45deg);
}
.el-latest a:hover,
.el-latest a:focus-visible { color: var(--e-global-color-secondary); text-decoration: underline; }
.el-latest-empty { margin: 0; color: var(--e-global-color-muted); }

/* Home category tiles (link container class el-tile, heading class el-tile-label): the Latest additions
   chevron before the label, a size up; the label underlines on hover. */
/* Bars fill the tile, so all four end level whatever the label's line count. */
.el-tile > .e-con { flex-grow: 1; }
.el-tile-label .elementor-heading-title { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.el-tile-label .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--e-global-color-secondary);
	border-right: 2px solid var(--e-global-color-secondary);
	transform: rotate(45deg);
}
.el-tile:hover .el-tile-label .elementor-heading-title,
.el-tile:focus-visible .el-tile-label .elementor-heading-title { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
	.el-featured { grid-template-columns: 112px minmax(0, 1fr); gap: 20px; }
	.el-featured-title { font-size: 1.3rem; }
}

@media (max-width: 767px) {
	.el-search .search-form { flex-direction: column; }
}

/* Resource page (child theme single-resource.php). Light band with the cover, title and action;
   then synopsis, citation and licence beside a details column; related resources at the end.
   Links are teal and underlined, so they read as part of the band rather than buttons. */
.el-resource-wrap { max-width: 1200px; margin: 0 auto; }
.el-resource-band { background-color: var(--e-global-color-lavender); }
.el-resource .el-resource-band a:not(.el-button),
.el-resource .el-resource-body a:not(.el-tag),
.el-resource .el-related a { color: var(--e-global-color-primary); text-decoration: underline; text-underline-offset: 3px; }
.el-resource .el-resource-band a:not(.el-button):hover,
.el-resource .el-resource-band a:not(.el-button):focus-visible,
.el-resource .el-resource-body a:not(.el-tag):hover,
.el-resource .el-resource-body a:not(.el-tag):focus-visible,
.el-resource .el-related a:hover,
.el-resource .el-related a:focus-visible { color: var(--e-global-color-secondary); }

/* Top row: breadcrumb (Library › Reports & toolkits › Report) left, access level right. */
.el-resource-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 24px; }
.el-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.el-crumbs li + li::before { content: "›"; margin-right: 10px; color: var(--e-global-color-muted); }
.el-resource .el-crumbs a { text-decoration: none; }
.el-resource .el-crumbs a:hover,
.el-resource .el-crumbs a:focus-visible { text-decoration: underline; }

.el-resource-head { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; padding: 28px 0 56px; }
.el-resource-cover { display: block; }
.el-resource-cover .el-cover-empty { border-color: var(--e-global-color-divider); background-color: var(--e-global-color-white); }
.el-resource-title { margin: 0 0 12px; font-size: 2.25rem; line-height: 1.15; }
.el-resource-authors { margin: 0 0 12px; font-size: 1rem; }
.el-resource-facts { margin: 0; color: var(--e-global-color-muted); font-size: 1rem; }

/* Access level top right: the same outlined tag as on results, with a "?" beside it. The "?" opens a
   small box under it saying what the level means. */
.el-access-corner { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.el-resource button.el-access-info,
.el-resource button.el-access-info:hover,
.el-resource button.el-access-info:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--e-global-color-primary);
	cursor: pointer;
}
.el-resource button.el-access-info[hidden] { display: none; }
.el-resource button.el-access-info:hover,
.el-resource button.el-access-info[aria-expanded="true"] { background-color: var(--e-global-color-white); }
.el-resource button.el-access-info:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 0; }
.el-access-info svg { width: 18px; height: 18px; }
.el-access-pop {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 10;
	width: 280px;
	padding: 14px 16px;
	border: 1px solid var(--e-global-color-divider);
	background-color: var(--e-global-color-white);
	font-size: 1rem;
	line-height: 1.5;
}
.el-access-pop p { margin: 0; }
.el-access-pop p + p { margin-top: 8px; }

/* Actions: filled teal, or outlined teal beside it; both fill lime on hover. Square, 48px tall. */
.el-resource-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.el-resource .el-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 28px;
	border: 2px solid var(--e-global-color-primary);
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-white);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: var(--e-global-typography-accent-font-weight);
	text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}
.el-resource .el-button:hover,
.el-resource .el-button:focus-visible { border-color: var(--e-global-color-accent); background-color: var(--e-global-color-accent); color: var(--e-global-color-primary); }
.el-resource .el-button--line { border-color: var(--e-global-color-primary); background-color: transparent; color: var(--e-global-color-primary); }
.el-button-meta { font-weight: 400; opacity: .85; }
.el-resource-note { max-width: 560px; margin: 12px 0 0; color: var(--e-global-color-muted); font-size: 1rem; line-height: 1.5; }

/* Body: main column and details. */
.el-resource-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; padding: 56px 0 72px; }
.el-resource-main { max-width: 720px; }
.el-resource-section + .el-resource-section { margin-top: 40px; }
.el-resource-section h2,
.el-resource-aside h2,
.el-related h2 { margin: 0 0 12px; font-size: 1.25rem; }
.el-resource-synopsis > :last-child { margin-bottom: 0; }
.el-video { aspect-ratio: 16 / 9; background-color: var(--e-global-color-text); }
.el-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.el-cite { padding: 24px 28px; border: 1px solid var(--e-global-color-divider); }
.el-cite p { margin: 0; }
.el-cite-text { font-size: 1rem; line-height: 1.6; }
.el-cite .el-cite-doi { margin-top: 10px; font-size: .9375rem; overflow-wrap: anywhere; }
.el-cite .el-cite-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.el-resource button.el-copy {
	min-height: 40px;
	padding: 0 18px;
	border: 2px solid var(--e-global-color-primary);
	border-radius: 0;
	background-color: transparent;
	color: var(--e-global-color-primary);
	font-size: 1rem;
	font-weight: 600;
}
.el-resource button.el-copy:hover,
.el-resource button.el-copy:focus-visible { background-color: var(--e-global-color-primary); color: var(--e-global-color-white); }
.el-resource button.el-copy[hidden] { display: none; }
.el-copy-status { color: var(--e-global-color-muted); font-size: 1rem; }

.el-resource-aside { padding-left: 32px; border-left: 1px solid var(--e-global-color-divider); }
.el-details { margin: 0; }
.el-details dt,
.el-resource-aside .el-details-label { margin: 0; color: var(--e-global-color-muted); font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; }
.el-details dd { margin: 2px 0 16px; font-size: 1rem; }
.el-resource-aside .el-details-label { margin-top: 24px; }

/* Related resources: up to three, cover beside title and details. */
.el-related { padding: 48px 0 96px; border-top: 1px solid var(--e-global-color-divider); }
.el-related h2 { margin-bottom: 24px; }
.el-related-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.el-related-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; }
.el-related-title { margin: 0 0 4px; font-size: 1rem; line-height: 1.3; }
.el-resource .el-related-title a { text-decoration: none; }
.el-resource .el-related-title a:hover,
.el-resource .el-related-title a:focus-visible { text-decoration: underline; }
.el-related-meta { margin: 0; color: var(--e-global-color-muted); font-size: .9375rem; line-height: 1.5; }

.el-report-link { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--e-global-color-divider); font-size: 1rem; }

/* Forms: Report, Sign in, Create an account and Your account pages (Caribbean Mosaic plugin). */
.el-form { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.el-form h2 { margin: 20px 0 0; font-size: 1.25rem; }
.el-form h2:first-child { margin-top: 0; }
.el-form h2 em,
.el-field em { color: var(--e-global-color-muted); font-style: normal; font-weight: 400; }
.el-form p { margin: 0; }
.el-form-hint { margin-top: -8px; color: var(--e-global-color-muted); font-size: 1rem; line-height: 1.5; }
.el-about summary { color: var(--e-global-color-primary); font-weight: 600; cursor: pointer; }
.el-about[open] summary { margin-bottom: 16px; }
.el-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.el-field > span,
.el-field > label { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.el-form select,
.el-form textarea,
.el-form input[type="text"],
.el-form input[type="email"],
.el-form input[type="url"],
.el-form input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--e-global-color-muted);
	border-radius: 0;
	background-color: var(--e-global-color-white);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 1rem;
}
.el-form select { padding-right: 40px; }
.el-form select:focus-visible,
.el-form textarea:focus-visible,
.el-form input:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 1px; }
.el-form button {
	align-self: flex-start;
	min-height: 48px;
	padding: 0 28px;
	border: 2px solid var(--e-global-color-primary);
	border-radius: 0;
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-white);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: var(--e-global-typography-accent-font-weight);
	font-size: 1rem;
	cursor: pointer;
}
.el-form button:hover,
.el-form button:focus-visible { border-color: var(--e-global-color-accent); background-color: var(--e-global-color-accent); color: var(--e-global-color-primary); }
.el-form .el-form-button--line { border-color: var(--e-global-color-primary); background-color: transparent; color: var(--e-global-color-primary); }
/* The one warm colour in the UI, kept for errors. */
.el-form-error { margin: 0; padding: 12px 16px; border: 1px solid var(--e-global-color-error); color: var(--e-global-color-error); font-weight: 600; }
.el-form-error p + p { margin-top: 4px; }
.el-form-done { margin: 0 0 28px; padding: 12px 16px; border: 1px solid var(--e-global-color-primary); font-weight: 600; }
.el-form > .el-form-done { margin: 0; }
/* Button with a text link beside it (Cancel, Forgot your password?). */
.el-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
/* Hidden field only bots fill in. */
.el-form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.el-form-intro { color: var(--e-global-color-muted); font-size: 1rem; }
/* Checkbox with its text beside it: square box, tick drawn in white (as the digest form's consent line). */
.el-field > .el-check { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; font-weight: 400; line-height: 1.5; cursor: pointer; }

/* Report page */
.el-report-about { margin: 0; }
/* Two classes: Site Settings' link colour (.elementor-kit-4 a) would otherwise win. */
.el-report-form .el-report-about a,
.el-report-sent.el-report-sent a,
.el-account .el-account-who a,
.el-account .el-account-head a,
.el-account .el-account-details a,
.el-form .el-form-intro a,
.el-form .el-form-actions a,
.el-form .el-sign-in-new a,
.el-form .el-check a { color: var(--e-global-color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Sign in: "No account? Create an account" under a line. */
.el-form .el-sign-in-new { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--e-global-color-divider); }
.el-report-sent p { margin: 0 0 8px; }

/* Your account ([el_account]): who is signed in, then Your access, Your details, Monthly digest and
   Delete your account, divided by thin lines. "Edit details" swaps them for the details form.
   Your contributions and Your history share a panel: on the left from 1025px wide, after the rest on smaller
   screens. */
.el-account-main { max-width: 560px; }
.el-account-panel { max-width: 560px; margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--e-global-color-divider); }
@media (min-width: 1025px) {
	.el-account { display: grid; grid-template-columns: 360px minmax(0, 560px); grid-template-areas: "panel main"; column-gap: 64px; align-items: start; }
	.el-account-main { grid-area: main; }
	.el-account-panel { grid-area: panel; margin: 0; padding: 28px; border: 0; background-color: var(--e-global-color-lavender); }
	.el-account-panel .el-account-section + .el-account-section { margin-top: 28px; padding-top: 28px; }
}
.el-account-who { margin: 0 0 24px; color: var(--e-global-color-muted); font-size: 1rem; overflow-wrap: anywhere; }
.el-account-section + .el-account-section { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--e-global-color-divider); }
.el-account-section h2 { margin: 0 0 20px; font-size: 1.25rem; }
.el-account-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.el-account-head h2 { margin: 0; }
.el-account-head a { font-size: 1rem; }
.el-account-status { margin: 0 0 24px; padding: 16px 20px; background-color: var(--e-global-color-lavender); line-height: 1.5; }
/* Details in two columns, one on phones. */
.el-account-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-bottom: -16px; }
.el-account-details dd { overflow-wrap: anywhere; }
.el-account-empty { color: var(--e-global-color-muted); }
/* Your contributions and Your history: one row each between thin lines, the date or status under it. */
.el-account .el-account-list { margin: 0 0 24px; padding: 0; list-style: none; }
.el-account .el-account-list:last-child { margin-bottom: 0; }
.el-account-list li { padding: 14px 0; line-height: 1.5; overflow-wrap: anywhere; }
.el-account-list li:first-child { padding-top: 0; }
.el-account-list li:last-child { padding-bottom: 0; }
.el-account-list li + li { border-top: 1px solid var(--e-global-color-divider); }
.el-account-list-meta { display: block; color: var(--e-global-color-muted); font-size: 15px; }
.el-account .el-account-list a { color: var(--e-global-color-primary); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
	.el-account-details { grid-template-columns: 1fr; }
}

/* Type and author pages (child theme taxonomy.php): the resource page's band with the name and a search
   box (same as the search page's), then the search page's filters and results, lined up with the band. */
.el-term-head { max-width: 720px; padding: 28px 0 48px; }
.el-term-head .el-resource-title { margin: 0; }
.el-term-search { margin-top: 24px; }
.el-term-search .search-field,
.el-term-search .search-submit { min-height: 48px; font-size: 1rem; }
.el-term-search .search-submit { padding: 0 28px; }
.el-results.el-term-results { max-width: 1200px; padding: 40px 0 96px; }

@media (max-width: 1240px) {
	.el-resource-wrap,
	.el-results.el-term-results { margin: 0 40px; }
}

@media (max-width: 1024px) {
	.el-resource-head { grid-template-columns: 200px minmax(0, 1fr); gap: 36px; }
	.el-resource-body { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }
	.el-resource-aside { padding-left: 24px; }
	.el-related-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 767px) {
	.el-resource-wrap,
	.el-results.el-term-results { margin: 0 16px; }
	.el-results.el-term-results { padding: 28px 0 64px; }
	.el-term-head { padding: 20px 0 32px; }
	.el-resource-top { position: relative; padding-top: 20px; }
	.el-access-corner { position: static; }
	.el-access-pop { left: 0; width: auto; }
	.el-resource-head { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 0 36px; }
	.el-resource-cover { width: 140px; }
	.el-resource-title { font-size: 1.625rem; }
	.el-resource-actions > .el-button { flex: 1 1 100%; justify-content: center; }
	.el-resource-body { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 36px 0 48px; }
	.el-resource-aside { padding: 28px 0 0; border-top: 1px solid var(--e-global-color-divider); border-left: 0; }
	.el-cite { padding: 20px; }
	.el-related { padding: 36px 0 64px; }
	.el-related-item { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
}

/* Reader (child theme read-resource.php; the Caribbean Mosaic plugin's assets/reader.js draws the pages).
   The resource page's band with "Back to the resource" and the title, a white bar that stays at the top
   (page count, zoom), then the pages, white on the light ground. Nothing on the pages to select; nothing prints.
   Each page's words are hidden in it for screen readers (.el-reader-text), and can't be selected or copied. */
.el-reader-text { user-select: none; -webkit-user-select: none; }
/* The script keeps your place when zooming; the browser's own scroll anchoring would move it twice. */
.el-reader { overflow-anchor: none; }
.el-reader-head { padding: 24px 0 40px; }
.el-reader-back { margin: 0 0 16px; font-size: 1rem; }
.el-reader-head .el-resource-title { max-width: 880px; }
.el-reader-head .el-resource-note { margin: 0; }
.el-reader-bar {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 5;
	border-bottom: 1px solid var(--e-global-color-divider);
	background-color: var(--e-global-color-white);
}
.el-reader-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.el-reader-tools[hidden] { display: none; }
.el-reader-count { margin: 0; font-size: 1rem; }
.el-reader-zoom { display: flex; align-items: center; gap: 8px; }
.el-reader-scale { min-width: 3.5em; font-size: 1rem; text-align: center; }
.el-reader .el-reader-zoom button,
.el-reader .el-reader-zoom button:hover,
.el-reader .el-reader-zoom button:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--e-global-color-primary);
	border-radius: 0;
	background-color: transparent;
	color: var(--e-global-color-primary);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.el-reader .el-reader-zoom button:hover:not(:disabled) { background-color: var(--e-global-color-primary); color: var(--e-global-color-white); }
.el-reader .el-reader-zoom button:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 2px; }
.el-reader .el-reader-zoom button:disabled { opacity: .4; cursor: default; }
/* Pages wider than the screen (zoomed in) scroll sideways; auto margins keep them centred until then. */
.el-reader-pages {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	overflow-x: auto;
	padding: 32px 40px 72px;
	background-color: var(--e-global-color-lavender);
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.el-reader-page { flex: none; margin: 0 auto; background-color: var(--e-global-color-white); }
.el-reader-page canvas { display: block; width: 100%; height: 100%; }
.el-reader-status { width: 100%; max-width: 880px; margin: 0 auto; font-size: 1rem; }
.el-reader-print { display: none; }

@media (max-width: 767px) {
	.el-reader-head { padding: 20px 0 32px; }
	.el-reader-pages { padding: 20px 16px 48px; }
}
/* WordPress's toolbar (staff) scrolls away on phones, so the bar sits at the very top there. */
@media (max-width: 600px) {
	.el-reader-bar { top: 0; }
}
@media print {
	.el-reader-bar,
	.el-reader-pages { display: none !important; }
	.el-reader-print { display: block; padding: 40px 0; font-size: 1rem; }
}

/* Info pages (About, How access works, Contribute, Contact): text kept to a readable line length,
   no space under the last paragraph. Elementor's .e-con > .e-con-inner > .elementor-widget sets
   max-width 100%, hence the extra classes. */
.el-page-band .elementor-element.elementor-widget.elementor-widget-text-editor,
.el-page-body .elementor-element.elementor-widget.elementor-widget-text-editor { max-width: 760px; }
.el-page-band .elementor-widget-text-editor :last-child,
.el-page-body .elementor-widget-text-editor :last-child,
.el-contribute-band .elementor-widget-text-editor :last-child { margin-bottom: 0; }
.el-page-body .elementor-widget-text-editor :is(ul, ol) { margin: 0 0 .9rem 1.25em; padding: 0; }
.el-page-body .elementor-widget-text-editor li + li { margin-top: 4px; }

/* Contribute form ([el_contribute_form]): topics and "Who can open it" as lists of ticks; round radios,
   filled teal when chosen; the file picker's button outlined; Sign in as a button. */
.el-form fieldset.el-choices { gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.el-form .el-choices legend { margin-bottom: 6px; padding: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.el-check input[type="radio"] {
	appearance: none;
	flex: none;
	width: 22px;
	height: 22px;
	min-height: 0;
	margin: 1px 0 0;
	padding: 0;
	border: 1px solid var(--e-global-color-muted);
	border-radius: 50%;
	background: var(--e-global-color-white);
	cursor: pointer;
}
.el-check input[type="radio"]:checked { border: 7px solid var(--e-global-color-primary); }
.el-check input[type="radio"]:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 2px; }
.el-form input[type="file"] { max-width: 100%; color: var(--e-global-color-text); font-size: 1rem; }
.el-form input[type="file"]::file-selector-button {
	min-height: 44px;
	margin-right: 12px;
	padding: 0 20px;
	border: 2px solid var(--e-global-color-primary);
	border-radius: 0;
	background: var(--e-global-color-white);
	color: var(--e-global-color-primary);
	font: 600 1rem var(--e-global-typography-accent-font-family), sans-serif;
	cursor: pointer;
}
.el-form .el-form-actions a.el-button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 28px;
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-white);
	font-weight: 600;
	text-decoration: none;
}
.el-form .el-form-actions a.el-button:hover,
.el-form .el-form-actions a.el-button:focus-visible { background-color: var(--e-global-color-accent); color: var(--e-global-color-primary); }
/* Contribute, signed in: a line across the page under What happens next, then the form, its first
   heading the size of the page's section headings. */
.elementor-widget-shortcode:has(.el-contribute-form) { padding-top: 56px; border-top: 1px solid var(--e-global-color-divider); }
.el-form .el-contribute-title { font-size: 1.75rem; }
@media (max-width: 767px) {
	.elementor-widget-shortcode:has(.el-contribute-form) { padding-top: 40px; }
	.el-form .el-contribute-title { font-size: 1.5rem; }
}
/* Contribute, signed out: the sign-in choice in a light box under the page text. */
.el-form.el-contribute-sign-in { padding: 40px; background-color: var(--e-global-color-lavender); }
@media (max-width: 767px) {
	.el-form.el-contribute-sign-in { padding: 24px; }
}
/* Second choice beside it (Contribute: Create an account): outlined, fills teal on hover. */
.el-form .el-form-actions a.el-button--line { border: 2px solid var(--e-global-color-primary); background-color: transparent; color: var(--e-global-color-primary); }
.el-form .el-form-actions a.el-button--line:hover,
.el-form .el-form-actions a.el-button--line:focus-visible { background-color: var(--e-global-color-primary); color: var(--e-global-color-white); }

/* Resource loader (template-parts/resource-loader.php, assets/resource-loader.js). Resource pages and the
   reader only: the mark builds itself on the light ground while the page opens, then fades away. The lime
   star is one piece and moves as one (0–0.6 s); the tiles arrive clockwise from the top, from 0.2 s, 0.05 s
   apart, 0.55 s each, so the mark is whole by 1.15 s. If the page is still busy (the reader opening a PDF),
   each tile steps out and back in turn. Reduced motion: the finished mark, still. */
.el-loader { display: none; }
.el-loading .el-loader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	background-color: var(--e-global-color-lavender, #F1F4F2);
	transition: opacity .3s ease;
}
.el-loading .el-loader.is-done { opacity: 0; pointer-events: none; }
.el-loader-mark { width: 120px; height: 120px; overflow: visible; }
.el-loader-star,
.el-loader-tile { transform-box: fill-box; transform-origin: center; }
.el-loader-star { animation: el-loader-star .6s cubic-bezier(.16, 1, .3, 1) both; }
.el-loader-tile {
	animation:
		el-loader-seat .55s cubic-bezier(.16, 1, .3, 1) calc(.2s + var(--i) * .05s) both,
		el-loader-step 1.35s ease-in-out calc(1.3s + var(--i) * .15s) infinite;
}
@keyframes el-loader-star {
	from { opacity: 0; transform: rotate(-45deg) scale(.35); }
	30% { opacity: 1; }
	to { opacity: 1; transform: none; }
}
@keyframes el-loader-seat {
	from { opacity: 0; transform: translate(var(--x), var(--y)) rotate(60deg); }
	25% { opacity: 1; }
	to { opacity: 1; transform: none; }
}
@keyframes el-loader-step {
	0%, 40%, 100% { transform: none; }
	20% { transform: translate(var(--nx), var(--ny)); }
}
@media (max-width: 767px) {
	.el-loader-mark { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
	.el-loader-star,
	.el-loader-tile { animation: none; }
}