/**
 * Tijon Portal - layout, components and Elementor integration.
 * Design tokens live in style-guide.css; this file only consumes them.
 */

/* ===================================================================
 * RESET / BASE LAYOUT
 * =================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	overflow-x: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

.tijon-container {
	width: 100%;
	max-width: var(--tijon-container);
	margin-inline: auto;
	padding-inline: var(--tijon-gutter);
}

.tijon-container--wide {
	max-width: var(--tijon-container-wide);
}

.tijon-site-content {
	min-height: 40vh;
}

/* Elementor manages its own spacing on pages built with the builder;
 * only pad the fallback (non-Elementor) content. */
.tijon-site-content > .tijon-container {
	padding-block: 60px;
}

.tijon-skip-link {
	position: absolute;
	left: -9999px;
}


/* ===================================================================
 * HEADER  (fallback markup - replaced when a UAE header template is set)
 * Style guide: Element Spacing 40px horizontal / 30px vertical,
 * logo width 227px.
 * =================================================================== */

.tijon-header {
	background-color: var(--tijon-surface);
	border-bottom: 1px solid var(--tijon-border);
	position: relative;
	z-index: 100;
}

.tijon-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tijon-header-space-x);
	height: var(--tijon-header-height);
	padding-block: 0;
}

/* Branding: logo followed by the word PORTAL */
.tijon-branding {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	flex-shrink: 0;
}

.tijon-branding:hover,
.tijon-branding:focus {
	opacity: 1;
}

/* Height is the binding constraint inside a 60px bar; width follows and is
 * still capped at the style guide's 227px. */
.tijon-branding__logo,
.tijon-branding__logo img {
	display: block;
	width: auto;
	max-width: var(--tijon-logo-width);
	height: auto;
	max-height: var(--tijon-logo-height);
}

.tijon-branding__suffix {
	font-family: var(--tijon-nav-family);
	font-weight: var(--tijon-nav-weight);
	font-size: 18px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--tijon-blue-900);
	white-space: nowrap;
	padding-top: 2px;
}

/* ---- The same branding inside a UAE header template ----------------
 * Elementor stacks widgets down a column, so the logo widget and the PORTAL
 * heading need the column flipped to a nowrap row to sit side by side. The
 * type below is copied from .tijon-branding__suffix so the UAE header and the
 * theme fallback are indistinguishable.
 * ------------------------------------------------------------------- */

.tijon-hf-brand > .elementor-widget-wrap,
.tijon-hf-brand > .elementor-element-populated {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
}

/* Elementor gives every widget in a column width:100%, which would push the
 * word onto its own line however the column is laid out. */
.tijon-hf-brand .elementor-widget {
	width: auto;
	flex: 0 0 auto;
	margin-bottom: 0;
	/* Centre the word against the logo rather than its own text box: an
	 * uppercase line has more space above the caps than below the baseline,
	 * so left to itself it reads as sitting low. */
	display: flex;
	align-items: center;
	align-self: stretch;
}

/*
 * Scoped through .tijon-hf-brand for a third class, so this outranks the
 * Elementor kit's .elementor-widget-heading .elementor-heading-title rule
 * whichever stylesheet the browser sees last. The widget also carries
 * title_color, so this is a belt-and-braces fallback.
 */
.tijon-hf-brand .tijon-hf-suffix .elementor-heading-title,
.tijon-hf-brand .tijon-hf-suffix .elementor-heading-title a {
	font-family: var(--tijon-nav-family);
	font-weight: var(--tijon-nav-weight);
	font-size: 18px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--tijon-on-dark);
	white-space: nowrap;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

.tijon-hf-brand .tijon-hf-suffix .elementor-heading-title a:hover,
.tijon-hf-brand .tijon-hf-suffix .elementor-heading-title a:focus {
	color: var(--tijon-on-dark);
	opacity: 1;
}

/* Logo plus wordmark is wide; on a phone the word steps down so it does not
 * crowd the hamburger. */
@media (max-width: 767px) {
	.tijon-hf-brand > .elementor-widget-wrap,
	.tijon-hf-brand > .elementor-element-populated {
		gap: 8px;
	}

	.tijon-hf-brand .tijon-hf-suffix .elementor-heading-title,
	.tijon-hf-brand .tijon-hf-suffix .elementor-heading-title a {
		font-size: 13px;
		letter-spacing: 0.1em;
	}
}

/*
 * Do NOT pad .hfe-search-icon-toggle to enlarge the tap target: UAE gives the
 * expanded field `height: 100%` of this element, so any padding here makes the
 * search box taller. The hit area is already 40x40 - the icon carries its own
 * 10px padding on a 20px glyph.
 */

/* The icon is white on the hero photograph; a soft shadow keeps it legible
 * over a light patch of the image, the same way the menu text stays readable. */
.elementor-widget-hfe-search-button .hfe-search-icon-toggle i {
	filter: drop-shadow(0 1px 2px rgba(21, 39, 46, 0.45));
}

/* The field that slides out when the icon is clicked. Its height is pinned
 * rather than inherited so it matches the 60px bar instead of growing with
 * whatever box the toggle happens to be. */
.elementor-widget-hfe-search-button .hfe-search-icon-toggle .hfe-search-form__input {
	height: 36px;
	line-height: 36px;
	/* Right padding clears the magnifier, which sits over the field. */
	padding: 0 40px 0 14px;
	border-radius: var(--tijon-radius-card);
}

@media (max-width: 767px) {
	/* 250px is UAE's fixed default and overhangs a narrow phone. */
	.elementor-widget-hfe-search-button .hfe-search-button-wrapper.hfe-input-focus
		.hfe-search-icon-toggle .hfe-search-form__input {
		width: 200px;
	}
}

.tijon-header__actions {
	display: flex;
	align-items: center;
	gap: var(--tijon-header-space-x);
}


/* ---- Primary navigation -------------------------------------------
 * Style guide: Sofia Pro 500 / 12px / 0.05em / uppercase,
 * link spacing 1.06em, "Spotlight on hover".
 * ------------------------------------------------------------------- */

.tijon-nav ul {
	display: flex;
	align-items: center;
	gap: calc(var(--tijon-nav-link-spacing) * 2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tijon-nav li {
	position: relative;
}

.tijon-nav a {
	display: block;
	font-family: var(--tijon-nav-family);
	font-weight: var(--tijon-nav-weight);
	font-size: var(--tijon-nav-size);
	letter-spacing: var(--tijon-nav-spacing);
	text-transform: var(--tijon-nav-transform);
	line-height: 1.8em;
	color: var(--tijon-blue-900);
	text-decoration: none;
	padding: 6px 14px;
	transition: background-color var(--tijon-transition), opacity var(--tijon-transition);
}

/* "Spotlight on hover" - the link brightens while its siblings dim. */
.tijon-nav ul:hover > li > a {
	opacity: 0.45;
}

.tijon-nav ul > li > a:hover,
.tijon-nav ul > li > a:focus,
.tijon-nav ul:hover > li.current-menu-item > a:hover {
	opacity: 1;
}

.tijon-nav .current-menu-item > a,
.tijon-nav .current_page_item > a,
.tijon-nav .current-menu-ancestor > a {
	box-shadow: inset 0 -1px 0 0 currentColor;
}


/* ===================================================================
 * OVERLAY HEADER
 * On pages that open with the hero band the header sits on top of the
 * image rather than above it: transparent, white logo, white navigation.
 * =================================================================== */

.tijon-overlay-header .tijon-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-color: transparent;
	border-bottom: none;
}

/*
 * If the WordPress admin bar is ever shown, keep the header below it.
 *
 * The theme hides the bar on the front end (see tijon_portal_hide_admin_bar),
 * so this is a safety net rather than the fix - but the underlying bug is real
 * and worth correcting: the overlay header is positioned absolutely with no
 * positioned ancestor, so `top: 0` resolves against the viewport origin, not
 * the document. WordPress pushes the document down with html{margin-top} to
 * clear the fixed bar, and the header simply ignores that and slides underneath
 * it, cutting the logo and menu in half.
 */
body.admin-bar.tijon-overlay-header .tijon-header,
body.admin-bar.tijon-overlay-header.ehf-header #masthead {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar.tijon-overlay-header .tijon-header,
	body.admin-bar.tijon-overlay-header.ehf-header #masthead {
		top: 46px;
	}
}

/* The supplied logo is a single dark colour, so it can be flipped to white
 * without needing a second asset to keep in sync. */
.tijon-overlay-header .tijon-branding__image {
	filter: brightness(0) invert(1);
}

.tijon-overlay-header .tijon-branding__suffix,
.tijon-overlay-header .tijon-branding__logo--text,
.tijon-overlay-header .tijon-nav > ul > li > a,
.tijon-overlay-header .tijon-search-toggle,
.tijon-overlay-header .tijon-menu-toggle {
	color: var(--tijon-on-dark);
}

/* The current page gets a dark plate behind it, as on the existing portal. */
.tijon-overlay-header .tijon-nav .current-menu-item > a,
.tijon-overlay-header .tijon-nav .current_page_item > a,
.tijon-overlay-header .tijon-nav .current-menu-ancestor > a {
	background-color: rgba(21, 34, 39, 0.55);
	box-shadow: none;
}

.tijon-overlay-header .tijon-nav > ul > li > a:hover,
.tijon-overlay-header .tijon-nav > ul > li > a:focus {
	background-color: rgba(21, 34, 39, 0.35);
}

/* Elementor renders the hero as the first section; it must sit under the
 * header rather than below it. */
.tijon-overlay-header .tijon-site-content > .elementor,
.tijon-overlay-header .tijon-site-content {
	margin-top: 0;
}

/*
 * The same treatment for a header built in Ultimate Addons for Elementor.
 * Assigning a UAE template replaces the theme's header markup entirely, so
 * without this the transparent-over-hero behaviour would be lost the moment
 * anyone builds one in the builder. UAE adds `ehf-header` to the body and
 * renders its template inside #masthead.
 */
.tijon-overlay-header.ehf-header #masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: transparent;
}

/* A single-colour logo dropped into the UAE Site Logo widget flips to white,
 * the same way the theme's own logo does. */
.tijon-overlay-header.ehf-header #masthead .elementor-widget-site-logo img {
	filter: brightness(0) invert(1);
}

.tijon-overlay-header.ehf-header #masthead .hfe-nav-menu a,
.tijon-overlay-header.ehf-header #masthead .hfe-nav-menu__toggle,
.tijon-overlay-header.ehf-header #masthead .elementor-widget-hfe-search-button button,
.tijon-overlay-header.ehf-header #masthead .elementor-widget-hfe-site-title a {
	color: var(--tijon-on-dark);
}

.tijon-overlay-header.ehf-header #masthead .hfe-nav-menu .current-menu-item > a {
	background-color: rgba(21, 34, 39, 0.55);
}

/*
 * Below UAE's breakpoint the menu collapses into a panel with its own
 * background, so the white-link rule above must not apply there - that is what
 * produced blank rows on mobile. The panel is given the brand blue and the
 * links stay white against it.
 */
@media (max-width: 1024px) {

	.ehf-header #masthead nav.menu-is-active .hfe-nav-menu {
		background-color: var(--tijon-blue-900);
		padding-block: 6px;
		box-shadow: 0 16px 34px rgba(43, 72, 82, 0.28);
	}

	.ehf-header #masthead nav.menu-is-active .hfe-nav-menu a,
	.tijon-overlay-header.ehf-header #masthead nav.menu-is-active .hfe-nav-menu a {
		color: var(--tijon-on-dark);
		padding: 13px 22px;
	}

	.ehf-header #masthead nav.menu-is-active .hfe-nav-menu .current-menu-item > a,
	.tijon-overlay-header.ehf-header #masthead nav.menu-is-active .hfe-nav-menu .current-menu-item > a {
		background-color: rgba(255, 255, 255, 0.14);
	}

	/* Keep the toggle and search on the bar itself, never wrapping below it. */
	.ehf-header #masthead .elementor-column {
		align-self: center;
	}

	/* The hamburger and close icon sit on the photograph, so they are white. */
	.tijon-overlay-header.ehf-header #masthead .hfe-nav-menu__toggle,
	.tijon-overlay-header.ehf-header #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon,
	.tijon-overlay-header.ehf-header #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon i,
	.tijon-overlay-header.ehf-header #masthead .hfe-nav-menu__toggle svg {
		color: var(--tijon-on-dark);
		fill: currentColor;
	}
}

/* Sub-menus */
.tijon-nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	min-width: 220px;
	padding: 12px 0;
	background-color: var(--tijon-blue-900);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--tijon-transition), transform var(--tijon-transition),
		visibility var(--tijon-transition);
}

.tijon-nav li:hover > ul,
.tijon-nav li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tijon-nav ul ul li {
	width: 100%;
}

.tijon-nav ul ul a {
	padding: 8px 20px;
	color: var(--tijon-on-dark);
}

.tijon-nav ul:hover > li > ul > li > a {
	opacity: 1;
}


/* ---- Header search ------------------------------------------------- */

.tijon-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: none;
	color: var(--tijon-blue-900);
	cursor: pointer;
}

.tijon-search-toggle:hover {
	background: none;
	color: var(--tijon-blue-900);
	opacity: 0.65;
}

.tijon-search-toggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

/* The search drawer covers the whole header bar rather than pushing it down,
 * so opening it never shifts the page. */
.tijon-header__search {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 10;
	align-items: center;
	justify-content: center;
	padding-inline: 64px;
	background-color: #EDEDED;
}

.tijon-header__search.is-open {
	display: flex;
}

/* Taken out of flow so the field centres against the bar, not against the
 * space left over beside the arrow. */
.tijon-search-back {
	position: absolute;
	left: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	color: #4a5a61;
	cursor: pointer;
}

.tijon-search-back:hover,
.tijon-search-back:focus {
	background-color: rgba(43, 72, 82, 0.08);
	color: var(--tijon-blue-900);
	opacity: 1;
}

.tijon-search-back svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tijon-search-bar {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 700px;
	max-width: 700px;
	background-color: #FFFFFF;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(43, 72, 82, 0.16);
}

.tijon-search-bar__icon {
	position: absolute;
	left: 16px;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #5A6E76;
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}

.tijon-search-bar input[type="search"] {
	width: 100%;
	height: 44px;
	padding: 0 16px 0 46px;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--tijon-blue-900);
	background: transparent;
	border: none;
	border-radius: 6px;
}

.tijon-search-bar input[type="search"]:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--tijon-blue-300);
}

.tijon-search-bar input[type="search"]::placeholder {
	color: #8a9aa1;
}


/* ---- Mobile toggle -------------------------------------------------- */

.tijon-menu-toggle {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	color: var(--tijon-blue-900);
	cursor: pointer;
}

.tijon-menu-toggle span,
.tijon-menu-toggle span::before,
.tijon-menu-toggle span::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--tijon-transition);
}

.tijon-menu-toggle span {
	margin-inline: auto;
	position: relative;
}

.tijon-menu-toggle span::before,
.tijon-menu-toggle span::after {
	content: "";
	position: absolute;
	left: 0;
}

.tijon-menu-toggle span::before { top: -7px; }
.tijon-menu-toggle span::after  { top: 7px; }


/* ===================================================================
 * PAGE HERO  (matches the current portal's banner)
 * =================================================================== */

.tijon-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 460px;
	/* Extra top padding clears the 60px overlay header sitting on top of it. */
	padding-block: 140px 90px;
	background-color: var(--tijon-blue-900);
	background-size: cover;
	background-position: center;
	text-align: center;
	overflow: hidden;
}

.tijon-hero__title {
	font-size: clamp(34px, 5.6vw, 76px);
	line-height: 0.95em;
}

.tijon-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(43, 72, 82, 0.55);
}

.tijon-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin-inline: auto;
	padding-inline: var(--tijon-gutter);
}

.tijon-hero__title {
	color: var(--tijon-on-dark);
	margin-bottom: 28px;
}

.tijon-hero__rule {
	width: 100%;
	max-width: 720px;
	height: 5px;
	margin: 0 auto 28px;
	background-color: var(--tijon-blue-300);
	border: 0;
}

.tijon-hero__text,
.tijon-hero__text p {
	color: var(--tijon-on-dark);
	font-size: 16px;
}

.tijon-hero__text p:last-child {
	margin-bottom: 0;
}


/* ===================================================================
 * SECTION INTRO BAND
 * =================================================================== */

.tijon-intro {
	padding-block: 50px;
	text-align: center;
	background-color: var(--tijon-surface);
}

.tijon-intro__note {
	font-style: italic;
	color: var(--tijon-text-muted);
	margin-bottom: 0;
}


/* ===================================================================
 * PORTAL PANEL
 * The band holding the grouped document cards.
 * =================================================================== */

.tijon-panel {
	background-color: var(--tijon-blue-100);
	padding-block: 80px;
	color: var(--tijon-text);
}

.tijon-panel--tinted {
	background-color: var(--tijon-neutral-100);
}

.tijon-panel--dark {
	background-color: var(--tijon-blue-900);
	color: var(--tijon-on-dark);
}

/* Auto-fitting grid: columns balance themselves instead of a hard 50/50
 * split that leaves one side short. */
.tijon-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 28px;
	align-items: start;
}

.tijon-columns--3 {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}


/* ===================================================================
 * DOCUMENT CARDS
 * One card per portal section; one row per document.
 * =================================================================== */

.tijon-group--card {
	background-color: var(--tijon-surface);
	border: 1px solid rgba(43, 72, 82, 0.10);
	border-radius: var(--tijon-radius-card);
	padding: 32px 32px 14px;
	height: 100%;
	/* A resting shadow, not just a hover one: on a tinted band the card needs
	 * to look lifted even before the pointer arrives. */
	box-shadow: 0 1px 2px rgba(43, 72, 82, 0.06), 0 10px 28px rgba(43, 72, 82, 0.06);
	transition: box-shadow var(--tijon-transition), border-color var(--tijon-transition),
		transform var(--tijon-transition);
}

.tijon-group--card:hover {
	border-color: rgba(43, 72, 82, 0.20);
	box-shadow: 0 2px 4px rgba(43, 72, 82, 0.08), 0 18px 40px rgba(43, 72, 82, 0.12);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.tijon-group--card,
	.tijon-group--card:hover {
		transform: none;
	}
}

.tijon-group__title {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 14px;
	color: var(--tijon-blue-900);
	font-size: 22px;
	letter-spacing: 0.05em;
	line-height: 1.25;
}

/* Short accent rule under each section heading. */
.tijon-group__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 3px;
	background-color: var(--tijon-green-300);
}

.tijon-group__subtitle {
	margin: 28px 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--tijon-text-muted);
}

/* The section's own one-line summary, under the heading. */
.tijon-group__desc {
	margin: -6px 0 18px;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--tijon-text-muted);
}

/* The hand-written button at the foot of a section card. */
.tijon-group__cta {
	margin: 18px 0 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(43, 72, 82, 0.12);
}

.tijon-group__cta a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tijon-blue-900);
	text-decoration: none;
}

.tijon-group__cta a:hover,
.tijon-group__cta a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 1;
}

.tijon-group__cta-go {
	display: inline-flex;
	width: 16px;
	height: 16px;
	transition: transform var(--tijon-transition);
}

.tijon-group__cta-go svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tijon-group__cta a:hover .tijon-group__cta-go {
	transform: translateX(4px);
}

/* Shown when a section holds more documents than the card lists. */
.tijon-group__more {
	margin: 14px 0 18px;
	padding-top: 14px;
	border-top: 1px solid rgba(43, 72, 82, 0.12);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tijon-group__more a {
	color: var(--tijon-blue-900);
	text-decoration: none;
}

.tijon-group__more a:hover,
.tijon-group__more a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 1;
}

.tijon-group__empty {
	color: var(--tijon-text-muted);
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.6;
	padding-bottom: 18px;
	margin: 0;
}

.tijon-doclist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tijon-doc + .tijon-doc {
	border-top: 1px solid rgba(43, 72, 82, 0.12);
}

/* The whole row is the target, not just the title text. */
.tijon-doc__link {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 8px 14px 0;
	margin-inline: -8px;
	padding-left: 8px;
	text-decoration: none;
	color: inherit;
	border-radius: var(--tijon-radius-card);
	transition: background-color var(--tijon-transition);
}

.tijon-doc__link:hover,
.tijon-doc__link:focus-visible {
	background-color: var(--tijon-blue-200);
	opacity: 1;
}

.tijon-doc__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background-color: var(--tijon-blue-200);
	color: var(--tijon-blue-900);
	font-family: var(--tijon-body-family);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.06em;
	line-height: 1;
	border-radius: var(--tijon-radius-card);
	transition: background-color var(--tijon-transition), color var(--tijon-transition);
}

.tijon-doc__link:hover .tijon-doc__badge,
.tijon-doc__link:focus-visible .tijon-doc__badge {
	background-color: var(--tijon-blue-900);
	color: var(--tijon-on-dark);
}

.tijon-doc__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.tijon-doc__title {
	font-family: var(--tijon-body-family);
	/* The brand body weight is Light (300). That is right for running copy but
	 * too faint for a list of links, so rows step up to Semibold. */
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.01em;
	line-height: 1.45;
	color: var(--tijon-blue-900);
}

.tijon-doc__link:hover .tijon-doc__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tijon-doc__desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.01em;
	color: var(--tijon-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tijon-doc__meta {
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tijon-text-muted);
}

.tijon-doc__go {
	flex: 0 0 auto;
	align-self: center;
	width: 16px;
	height: 16px;
	color: var(--tijon-text-muted);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--tijon-transition), transform var(--tijon-transition);
}

.tijon-doc__go svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tijon-doc__link:hover .tijon-doc__go,
.tijon-doc__link:focus-visible .tijon-doc__go {
	opacity: 1;
	transform: translateX(0);
	color: var(--tijon-blue-900);
}

/* Keyboard users get the affordance without hovering. */
@media (hover: none) {
	.tijon-doc__go {
		opacity: 1;
		transform: none;
	}
}


/* ---- Plain list variant -------------------------------------------- */

.tijon-group--plain .tijon-doc__badge,
.tijon-group--plain .tijon-doc__desc,
.tijon-group--plain .tijon-doc__go {
	display: none;
}

.tijon-group--plain .tijon-doc + .tijon-doc {
	border-top: none;
}

.tijon-group--plain .tijon-doc__link {
	padding-block: 6px;
}

.tijon-group--plain .tijon-doc__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ===================================================================
 * SEARCH
 * The reason the portal is being rebuilt: results link to the document,
 * not to the page the document sits on.
 * =================================================================== */

.tijon-searchform {
	display: flex;
	gap: 10px;
	width: 100%;
	max-width: 640px;
}

.tijon-searchform--center {
	margin-inline: auto;
}

.tijon-searchform input[type="search"] {
	flex: 1 1 auto;
	height: 44px;
}

.tijon-searchform button {
	flex: 0 0 auto;
}

.tijon-search-header {
	padding-block: 56px 28px;
}

.tijon-search-header h2 {
	margin-bottom: 22px;
}

.tijon-search-count {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tijon-text-muted);
	margin: 26px 0 0;
}

.tijon-results {
	list-style: none;
	margin: 0;
	padding: 24px 0 70px;
	display: grid;
	gap: 14px;
}

.tijon-result {
	display: flex;
	gap: 18px;
	padding: 22px 24px;
	background-color: var(--tijon-surface);
	border: 1px solid var(--tijon-border);
	border-radius: var(--tijon-radius-card);
	transition: border-color var(--tijon-transition), box-shadow var(--tijon-transition);
}

.tijon-result:hover {
	border-color: rgba(43, 72, 82, 0.28);
	box-shadow: 0 8px 24px rgba(43, 72, 82, 0.07);
}

.tijon-result__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--tijon-blue-100);
	color: var(--tijon-blue-900);
	border-radius: var(--tijon-radius-card);
	font-family: var(--tijon-body-family);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
}

.tijon-result:hover .tijon-result__icon {
	background-color: var(--tijon-blue-900);
	color: var(--tijon-on-dark);
}

.tijon-result__body {
	flex: 1 1 auto;
	min-width: 0;
}

.tijon-result__title {
	font-family: var(--tijon-h3-family);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: none;
	line-height: 1.45;
	margin-bottom: 6px;
}

.tijon-result__title a {
	text-decoration: none;
}

.tijon-result__title a:hover {
	text-decoration: underline;
}

.tijon-result__breadcrumb {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tijon-text-muted);
	margin-bottom: 8px;
}

.tijon-result__excerpt {
	font-size: 13.5px;
	line-height: 1.75;
	margin-bottom: 14px;
}

.tijon-result__excerpt mark,
.tijon-result mark {
	background-color: var(--tijon-green-200);
	color: var(--tijon-blue-900);
	padding: 0 3px;
	border-radius: 2px;
}

.tijon-result__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	font-size: 12px;
}

.tijon-result__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}

.tijon-tag,
.tijon-chip {
	display: inline-block;
	padding: 5px 12px;
	background-color: var(--tijon-blue-100);
	color: var(--tijon-blue-900);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color var(--tijon-transition), color var(--tijon-transition);
}

.tijon-tag:hover,
.tijon-chip:hover {
	background-color: var(--tijon-blue-900);
	color: var(--tijon-on-dark);
	opacity: 1;
}

.tijon-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tijon-no-results {
	padding-block: 50px 90px;
	max-width: 640px;
}

.tijon-no-results h4 {
	margin-top: 40px;
}


/* ===================================================================
 * RESOURCE SINGLE
 * =================================================================== */

.tijon-resource {
	padding-block: 60px 90px;
}

.tijon-resource__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	padding: 18px 22px;
	margin-bottom: 30px;
	background-color: var(--tijon-blue-100);
	border-radius: var(--tijon-radius-card);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tijon-text-muted);
}

.tijon-resource__meta strong {
	color: var(--tijon-blue-900);
	font-weight: 500;
}


/* ===================================================================
 * NOTICES / RESTRICTED ACCESS
 * =================================================================== */

.tijon-notice {
	padding: 20px 24px;
	margin-bottom: 30px;
	background-color: var(--tijon-neutral-200);
	border-left: 4px solid var(--tijon-neutral-400);
	border-radius: 0 var(--tijon-radius-card) var(--tijon-radius-card) 0;
}

.tijon-notice p:last-child {
	margin-bottom: 0;
}

.tijon-notice--locked {
	background-color: var(--tijon-blue-100);
	border-left-color: var(--tijon-blue-900);
}


/* ===================================================================
 * FOOTER
 * Style guide: background #2B4852, column titles H3 white,
 * links and body text white, social icons white / XS / outlines.
 * =================================================================== */

.tijon-footer {
	background-color: var(--tijon-blue-900);
	color: var(--tijon-on-dark);
	padding-block: 60px 30px;
}

.tijon-footer h1,
.tijon-footer h2,
.tijon-footer h3,
.tijon-footer h4,
.tijon-footer p,
.tijon-footer a,
.tijon-footer li {
	color: var(--tijon-on-dark);
}

.tijon-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
	padding-bottom: 40px;
}

.tijon-footer__title {
	margin-bottom: 18px;
}

.tijon-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tijon-footer li {
	margin-bottom: 8px;
}

.tijon-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 12px;
	letter-spacing: 0.06em;
}

.tijon-footer__bottom p {
	margin: 0;
}

/* Social icons - white, XS, outline style */
.tijon-social {
	display: flex;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tijon-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	color: #FFFFFF;
	text-decoration: none;
}

.tijon-social svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

/* Newsletter block styling from the global style guide. The portal is a
 * private, logged-in site so no newsletter is wired up - these classes
 * exist so the style system is complete if the block is ever used. */
.tijon-newsletter {
	background-color: #FFFFFF;
	padding: 40px;
}

.tijon-newsletter .tijon-newsletter__title {
	color: var(--tijon-blue-900);
}


/* ===================================================================
 * ELEMENTOR INTEGRATION
 * Elementor injects its own container widths; align them to the theme.
 * =================================================================== */

.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner {
	max-width: var(--tijon-container);
}

/* Stacked resource cards need breathing room between them. */
.elementor-widget-tijon_resource_list:not(:last-child) {
	margin-bottom: 28px;
}

/* Elementor headings and buttons inherit the style guide unless the
 * editor explicitly overrides them. */
.elementor-widget-heading .elementor-heading-title {
	color: var(--tijon-heading);
}

.elementor-button {
	font-family: var(--tijon-btn-family);
	font-weight: var(--tijon-btn-weight);
	letter-spacing: var(--tijon-btn-spacing);
	text-transform: var(--tijon-btn-transform);
	border-radius: var(--tijon-radius);
}

/* UAE renders the header/footer inside these wrappers. */
.ehf-header #masthead,
.ehf-footer #colophon {
	z-index: 99;
}


/* ===================================================================
 * WORDPRESS CORE CLASSES
 * =================================================================== */

.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: var(--tijon-text-muted); }

.tijon-pagination {
	display: flex;
	gap: 8px;
	padding-block: 20px 60px;
}

.tijon-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 10px;
	background-color: var(--tijon-blue-100);
	color: var(--tijon-blue-900);
	text-decoration: none;
	font-size: 12px;
	letter-spacing: 0.06em;
}

.tijon-pagination .page-numbers.current {
	background-color: var(--tijon-blue-900);
	color: #FFFFFF;
}


/* ===================================================================
 * RESPONSIVE
 * =================================================================== */

@media (max-width: 1024px) {
	:root {
		--tijon-h1-size: 40px;
		--tijon-logo-width: 180px;
		--tijon-logo-height: 34px;
	}

	.tijon-columns--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	:root {
		--tijon-h1-size: 32px;
		--tijon-h2-size: 22px;
		--tijon-header-space-x: 16px;
		--tijon-header-space-y: 18px;
		--tijon-logo-width: 150px;
		--tijon-logo-height: 30px;
	}

	.tijon-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.tijon-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		border-top: 1px solid var(--tijon-border);
		padding: 20px var(--tijon-gutter);
		box-shadow: 0 12px 24px rgba(43, 72, 82, 0.12);
	}

	.tijon-nav.is-open {
		display: block;
	}

	.tijon-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.tijon-nav ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		padding: 10px 0 0 16px;
	}

	.tijon-nav ul ul a {
		color: var(--tijon-blue-900);
		padding: 4px 0;
	}

	.tijon-nav ul:hover > li > a {
		opacity: 1;
	}

	/* The mobile drawer is a white panel, so its links stay dark even when
	 * the header itself is in overlay mode. */
	.tijon-overlay-header .tijon-nav > ul > li > a {
		color: var(--tijon-blue-900);
	}

	.tijon-overlay-header .tijon-nav .current-menu-item > a,
	.tijon-overlay-header .tijon-nav .current_page_item > a {
		background-color: var(--tijon-blue-100);
	}

	.tijon-header__search {
		padding-inline: 52px 12px;
	}

	.tijon-hero {
		min-height: 300px;
		padding-block: 50px;
	}

	.tijon-columns,
	.tijon-columns--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.tijon-result {
		flex-direction: column;
		gap: 12px;
	}
}

@media print {
	.tijon-header,
	.tijon-footer,
	.tijon-search-toggle {
		display: none !important;
	}
}


/* ===================================================================
 * TEMPLATE PAGES  (search, 404, archives)
 * The four portal pages are built in Elementor; these are ordinary
 * templates and need the same furniture written by hand, so the site
 * does not change shape the moment you leave a built page.
 * =================================================================== */

/* A shorter banner than the portal pages: these are working screens,
 * not landing pages, so the content should sit closer to the fold. */
.tijon-hero--compact {
	min-height: 0;
	padding-block: 120px 60px;
}

.tijon-hero--compact .tijon-hero__title {
	font-size: clamp(28px, 4.4vw, 54px);
	margin-bottom: 20px;
}

.tijon-hero--compact .tijon-hero__rule {
	max-width: 420px;
	margin-bottom: 20px;
}

/* The tinted ground the cards sit on, matching tijon_link_panel() in
 * tools/build-pages.php so a template page and a built page agree. */
.tijon-band {
	background-color: var(--tijon-surface-tint);
	padding-block: 70px;
}

@media (max-width: 767px) {
	.tijon-band {
		padding-block: 44px;
	}
}

.tijon-panel {
	background-color: var(--tijon-surface);
	border: 1px solid rgba(43, 72, 82, 0.10);
	border-radius: var(--tijon-radius-card);
	box-shadow: 0 1px 2px rgba(43, 72, 82, 0.06), 0 10px 28px rgba(43, 72, 82, 0.06);
	padding: 32px;
	margin-bottom: 28px;
}

.tijon-panel--center {
	text-align: center;
}

.tijon-panel__title {
	position: relative;
	margin: 0 0 18px;
	padding-bottom: 14px;
	font-size: 22px;
	letter-spacing: 0.05em;
	line-height: 1.25;
	color: var(--tijon-blue-900);
}

.tijon-panel__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 3px;
	background-color: var(--tijon-green-300);
}

.tijon-panel--center .tijon-panel__title::after {
	left: 50%;
	transform: translateX(-50%);
}

.tijon-panel__aside {
	margin: 18px 0 0;
	font-size: 14px;
}

.tijon-panel p {
	color: var(--tijon-text-muted);
	font-size: 15px;
	font-weight: 400;
}

.tijon-search-count {
	margin: 18px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tijon-text-muted);
}


/* ---- Results as cards ----------------------------------------------
 * Previously a bare list on white, which is why a results page read as
 * a different site to the pages that link into it. */

/*
 * Two columns from tablet up. Cards in a row stretch to a common height, which
 * keeps the grid from going ragged when one result has a description and its
 * neighbour does not.
 *
 * Fixed at two rather than auto-fit: on a 1140px container auto-fit would slip
 * to three on wide screens, and a ranked list is already working against
 * reading order without adding a third column to track.
 */
.tijon-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
	align-items: stretch;
}

@media (min-width: 900px) {
	.tijon-results {
		grid-template-columns: 1fr 1fr;
	}
}

.tijon-result {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background-color: var(--tijon-surface);
	border: 1px solid rgba(43, 72, 82, 0.10);
	border-radius: var(--tijon-radius-card);
	box-shadow: 0 1px 2px rgba(43, 72, 82, 0.06), 0 10px 28px rgba(43, 72, 82, 0.06);
	padding: 24px 26px;
	transition: box-shadow var(--tijon-transition), border-color var(--tijon-transition),
		transform var(--tijon-transition);
}

.tijon-result:hover {
	border-color: rgba(43, 72, 82, 0.20);
	box-shadow: 0 2px 4px rgba(43, 72, 82, 0.08), 0 18px 40px rgba(43, 72, 82, 0.12);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.tijon-result,
	.tijon-result:hover {
		transform: none;
	}
}

/* The same badge as a document row on a portal page, so a PPT looks
 * like a PPT wherever it turns up. */
.tijon-result__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background-color: var(--tijon-blue-200);
	color: var(--tijon-blue-900);
	font-family: var(--tijon-body-family);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.06em;
	line-height: 1;
	border-radius: var(--tijon-radius-card);
}

.tijon-result__body {
	flex: 1 1 auto;
	min-width: 0;
	/* A column so the actions can sit at the foot of the card. In a two-up grid
	 * the cards share a height, and buttons floating at different heights
	 * across a row is what makes equal heights look accidental. */
	display: flex;
	flex-direction: column;
}

.tijon-result__body > .tijon-result__actions {
	margin-top: auto;
}

.tijon-result__breadcrumb {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tijon-text-muted);
}

.tijon-result__title {
	margin: 0 0 6px;
	font-family: var(--tijon-body-family);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.01em;
	line-height: 1.35;
	text-transform: none;
}

.tijon-result__title a {
	color: var(--tijon-blue-900);
	text-decoration: none;
}

.tijon-result__title a:hover,
.tijon-result__title a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 1;
}

.tijon-result__excerpt {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--tijon-text-muted);
}

/* The matched term inside the snippet. This is the whole point of the
 * rebuild made visible: the word was found in the document body. */
.tijon-result__excerpt mark,
.tijon-result__title mark {
	background-color: var(--tijon-green-100);
	color: var(--tijon-blue-900);
	padding: 0 2px;
}

.tijon-result__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.tijon-result__actions .tijon-btn {
	padding: 8px 22px;
}

.tijon-result__actions a:not(.tijon-btn) {
	font-size: 13px;
	font-weight: 500;
	color: var(--tijon-text-muted);
}

.tijon-result__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

@media (max-width: 600px) {
	.tijon-result {
		padding: 20px;
		gap: 14px;
	}

	.tijon-result__icon {
		width: 38px;
		height: 38px;
	}
}


/* ---- Empty state ---------------------------------------------------- */

.tijon-band .tijon-no-results {
	background-color: var(--tijon-surface);
	border: 1px solid rgba(43, 72, 82, 0.10);
	border-radius: var(--tijon-radius-card);
	box-shadow: 0 1px 2px rgba(43, 72, 82, 0.06), 0 10px 28px rgba(43, 72, 82, 0.06);
	padding: 40px 32px;
	text-align: center;
}

.tijon-band .tijon-no-results h3 {
	font-size: 20px;
	margin-bottom: 12px;
}

.tijon-band .tijon-no-results p {
	color: var(--tijon-text-muted);
	font-size: 15px;
	font-weight: 400;
	max-width: 560px;
	margin-inline: auto;
}

.tijon-band .tijon-no-results h4 {
	margin-top: 30px;
	color: var(--tijon-text-muted);
}

.tijon-band .tijon-no-results .tijon-search {
	margin-block: 22px;
}


/* ---- Section chips --------------------------------------------------- */

.tijon-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.tijon-panel--center .tijon-chips,
.tijon-no-results .tijon-chips {
	justify-content: center;
}

.tijon-chip {
	display: inline-block;
	padding: 8px 16px;
	background-color: var(--tijon-blue-100);
	border: 1px solid rgba(43, 72, 82, 0.12);
	border-radius: var(--tijon-radius-card);
	color: var(--tijon-blue-900);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--tijon-transition), border-color var(--tijon-transition);
}

.tijon-chip:hover,
.tijon-chip:focus {
	background-color: var(--tijon-blue-200);
	border-color: rgba(43, 72, 82, 0.28);
	opacity: 1;
}


/* ---- The inline search field used on both templates ------------------ */

.tijon-search--inline {
	display: flex;
	gap: 10px;
	margin: 0;
}

.tijon-panel--center .tijon-search--inline,
.tijon-no-results .tijon-search--inline {
	max-width: 520px;
	margin-inline: auto;
}

.tijon-search--inline .tijon-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 16px;
	border: 1px solid var(--tijon-border);
	border-radius: var(--tijon-radius-card);
	font-size: 15px;
}

.tijon-search--inline .tijon-search__submit {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 28px;
}

@media (max-width: 480px) {
	.tijon-search--inline {
		flex-direction: column;
	}

	.tijon-search--inline .tijon-search__submit {
		width: 100%;
	}
}


/* ===================================================================
 * SAFETY NET: a UAE header on a page with no banner
 *
 * The header widgets carry hard-coded white text so they read against
 * the hero photograph. On any template that does NOT render a banner,
 * that white type would land on a white ground and the header would
 * disappear entirely. Painting the bar brand blue there keeps it
 * readable whatever template gets added later.
 * =================================================================== */

body.ehf-header:not(.tijon-overlay-header) #masthead {
	background-color: var(--tijon-blue-900);
}

body.ehf-header:not(.tijon-overlay-header) #masthead .elementor-widget-site-logo img {
	filter: brightness(0) invert(1);
}

body.ehf-header:not(.tijon-overlay-header) #masthead .tijon-hf-suffix .elementor-heading-title,
body.ehf-header:not(.tijon-overlay-header) #masthead .tijon-hf-suffix .elementor-heading-title a {
	color: var(--tijon-on-dark);
}


/* ===================================================================
 * SEARCH OVERLAY
 * Opened by the header magnifier. Replaces the field that used to
 * slide out of the icon: 250px wide, sitting on top of the last menu
 * item, with the typed text squeezed into a grey box.
 * =================================================================== */

.tijon-search-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;   /* above the UAE header, which sits at 100 */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(60px, 14vh, 160px) var(--tijon-gutter) var(--tijon-gutter);
	opacity: 0;
	transition: opacity 160ms ease;
}

/*
 * Required, not decorative. The browser's own [hidden] rule is a user-agent
 * style, and the author rule above beats it - so without this the overlay
 * would sit open across the whole viewport on every page load.
 */
.tijon-search-modal[hidden] {
	display: none;
}

.tijon-search-modal.is-open {
	opacity: 1;
}

.tijon-search-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(21, 39, 46, 0.72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.tijon-search-modal__panel {
	position: relative;
	width: 100%;
	max-width: 680px;
	background-color: var(--tijon-surface);
	border-radius: var(--tijon-radius-card);
	box-shadow: 0 24px 70px rgba(21, 39, 46, 0.45);
	padding: 34px 34px 26px;
	transform: translateY(-12px);
	transition: transform 180ms ease;
}

.tijon-search-modal.is-open .tijon-search-modal__panel {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.tijon-search-modal,
	.tijon-search-modal__panel {
		transition: none;
		transform: none;
	}
}

.tijon-search-modal__form {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--tijon-border);
	border-radius: var(--tijon-radius-card);
	padding: 0 0 0 16px;
	transition: border-color var(--tijon-transition), box-shadow var(--tijon-transition);
}

.tijon-search-modal__form:focus-within {
	border-color: var(--tijon-blue-900);
	box-shadow: 0 0 0 3px rgba(43, 72, 82, 0.12);
}

.tijon-search-modal__icon {
	flex: 0 0 auto;
	color: var(--tijon-text-muted);
}

/*
 * The reason for all of this: a full-size field on white, with brand-blue
 * text at a readable weight. The old one inherited a grey background and
 * whatever colour the widget defaults gave it.
 */
/*
 * Scoped through the panel for two classes. The style guide sets its field
 * defaults on `input[type="search"]`, and an attribute selector outranks a
 * single class - so on one class this field silently inherited 14px type, a
 * border and 10px of padding, which is exactly the cramped box the overlay
 * exists to replace.
 */
.tijon-search-modal .tijon-search-modal__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--tijon-blue-900);
	font-family: var(--tijon-body-family);
	font-weight: 500;
	font-size: 19px;
	letter-spacing: 0.01em;
}

.tijon-search-modal .tijon-search-modal__input:focus {
	outline: none;
	border: 0;
	box-shadow: none;
}

.tijon-search-modal .tijon-search-modal__input::placeholder {
	color: var(--tijon-text-muted);
	font-weight: 300;
	opacity: 1;
}

/* Chrome draws its own clear button, which collides with the submit. */
.tijon-search-modal .tijon-search-modal__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.tijon-search-modal__submit {
	flex: 0 0 auto;
	align-self: stretch;
	padding-inline: 30px;
	border-radius: 0;
}

.tijon-search-modal__hint {
	margin: 14px 2px 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--tijon-text-muted);
}

.tijon-search-modal__close {
	position: absolute;
	top: -52px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: var(--tijon-radius-card);
	color: var(--tijon-on-dark);
	cursor: pointer;
}

.tijon-search-modal__close:hover,
.tijon-search-modal__close:focus-visible {
	background-color: rgba(255, 255, 255, 0.16);
	color: var(--tijon-on-dark);
}

@media (max-width: 600px) {
	.tijon-search-modal {
		padding-top: 76px;
	}

	.tijon-search-modal__panel {
		padding: 26px 22px 20px;
	}

	.tijon-search-modal__form {
		flex-wrap: wrap;
		padding-bottom: 12px;
	}

	.tijon-search-modal .tijon-search-modal__input {
		height: 48px;
		font-size: 17px;
	}

	.tijon-search-modal__submit {
		width: calc(100% - 16px);
		margin-right: 16px;
		align-self: auto;
		border-radius: var(--tijon-radius-card);
	}
}

/* The page behind must not scroll while the dialog is open. */
html.tijon-modal-open,
html.tijon-modal-open body {
	overflow: hidden;
}

/*
 * Retire the Ultimate Addons slide-out field - but only once the script has
 * confirmed the overlay is wired up. If the JavaScript never runs, that field
 * is still the working search and hiding it would break the icon entirely.
 */
html.tijon-has-search-modal .hfe-search-icon-toggle .hfe-search-form__input {
	display: none;
}

html.tijon-has-search-modal .hfe-search-icon-toggle,
html.tijon-has-search-modal .tijon-search-toggle {
	cursor: pointer;
}


/* ===================================================================
 * PORTAL SECTION BLOCKS
 * The front page, and the foot of any other page. Large enough that
 * someone who missed the menu on the hero photograph cannot miss these.
 * =================================================================== */

.tijon-pagecards__heading {
	margin: 0 0 24px;
	font-size: 22px;
	letter-spacing: 0.05em;
	line-height: 1.25;
	color: var(--tijon-blue-900);
	text-align: center;
}

.tijon-pagecards__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
}

@media (min-width: 700px) {
	.tijon-pagecards--2 .tijon-pagecards__list,
	.tijon-pagecards--3 .tijon-pagecards__list,
	.tijon-pagecards--4 .tijon-pagecards__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.tijon-pagecards--3 .tijon-pagecards__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.tijon-pagecards--4 .tijon-pagecards__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*
 * Matched to .tijon-group--card, the resource box on the section pages: same
 * border, padding, shadow and the same short green rule under the heading.
 * Two card styles a scroll apart read as two different sites.
 */
.tijon-pagecards__link {
	display: flex;
	/* A column, so the description sits under the title and the call to action
	 * can be pinned to the foot - cards in a row then line their buttons up
	 * with each other instead of floating at three different heights. */
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	box-sizing: border-box;
	padding: 32px 32px 14px;
	background-color: var(--tijon-surface);
	border: 1px solid rgba(43, 72, 82, 0.10);
	border-radius: var(--tijon-radius-card);
	box-shadow: 0 1px 2px rgba(43, 72, 82, 0.06), 0 10px 28px rgba(43, 72, 82, 0.06);
	text-decoration: none;
	transition: box-shadow var(--tijon-transition), border-color var(--tijon-transition),
		transform var(--tijon-transition);
}

.tijon-pagecards__link:hover,
.tijon-pagecards__link:focus-visible {
	border-color: rgba(43, 72, 82, 0.20);
	box-shadow: 0 2px 4px rgba(43, 72, 82, 0.08), 0 18px 40px rgba(43, 72, 82, 0.12);
	transform: translateY(-2px);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tijon-pagecards__link,
	.tijon-pagecards__link:hover {
		transform: none;
	}
}

.tijon-pagecards__text {
	display: block;
	min-width: 0;
	margin-bottom: 18px;
}

.tijon-pagecards__title {
	position: relative;
	display: block;
	margin: 0 0 20px;
	padding-bottom: 14px;
	font-family: var(--tijon-font-display);
	font-weight: 400;
	font-size: 22px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.25;
	color: var(--tijon-blue-900);
}

/* The same short accent rule the resource boxes carry. */
.tijon-pagecards__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 3px;
	background-color: var(--tijon-green-300);
}

.tijon-pagecards__desc {
	display: block;
	margin: 0;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--tijon-text-muted);
}

/* The call-to-action row, held at the bottom of the card. */
.tijon-pagecards__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 16px;
	padding-bottom: 18px;
	border-top: 1px solid rgba(43, 72, 82, 0.12);
}

.tijon-pagecards__cta {
	font-family: var(--tijon-body-family);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--tijon-blue-900);
}

.tijon-pagecards__go {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--tijon-blue-900);
	transition: transform var(--tijon-transition);
}

.tijon-pagecards__go svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tijon-pagecards__link:hover .tijon-pagecards__go,
.tijon-pagecards__link:focus-visible .tijon-pagecards__go {
	transform: translateX(4px);
}

@media (max-width: 600px) {
	.tijon-pagecards__link {
		padding: 24px 22px 10px;
	}

	.tijon-pagecards__title {
		font-size: 20px;
	}
}