/* ITAP Exhibitor & Sponsor Directory
   Palette matches the ITAP 2026 brand: red #F70000, dark #05080D with
   #101722 panels, light sections #F2F4F7.
   Dark is the default so the grid sits inside the look used on the
   programme page. Add theme="light" to a shortcode for a light section. */

.itapdir-directory,
.itapdir-sponsors {
	--itap-accent: #F70000;
	--itap-bg: #05080D;
	--itap-panel: #101722;
	--itap-line: rgba(255, 255, 255, .16);
	--itap-text: #ffffff;
	--itap-muted: #9DAAB8;
	--itap-cols: 4;

	background: var(--itap-bg);
	color: var(--itap-text);
	padding: 48px 24px 64px;
	box-sizing: border-box;
}

/* Break out of the theme's narrow content column so the section runs
   edge to edge, the way the programme page does.

   Uses margin arithmetic rather than position/left offsets: inside a
   CSS grid item, left: 50% resolves against the element's own column
   track, not the viewport, which shunts the section sideways instead
   of centring it. calc(50% - 50vw) is measured the same way in grid,
   flex and normal flow.

   grid-column / justify-self / align-self are scoped to fullbleed only
   — Twenty Twenty-Five's contained layout centres a normal child itself
   via margin-left/right: auto, and overriding that unconditionally (as
   an earlier version of this file did) broke the centred, non-fullbleed
   case instead of fixing the fullbleed one. */

.itapdir-directory.is-fullbleed,
.itapdir-sponsors.is-fullbleed {
	position: relative !important;
	display: block !important;
	width: 100vw;
	max-width: 100vw;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	grid-column: 1 / -1;
	justify-self: stretch;
	align-self: start;
	clear: both !important;
	overflow: visible !important;
}

.itapdir-directory[data-theme="light"],
.itapdir-sponsors[data-theme="light"] {
	--itap-bg: #F2F4F7;
	--itap-panel: #ffffff;
	--itap-line: #D7DDE4;
	--itap-text: inherit;
	--itap-muted: #5F6B78;
}

.itapdir-directory *,
.itapdir-sponsors * {
	box-sizing: border-box;
}

.itapdir-inner {
	/* The ITAP site has other legacy CSS using the same generic class
	   names as this plugin. Keep this structural wrapper in normal flow
	   so later sections and the footer are pushed down by the directory. */
	position: relative !important;
	display: block !important;
	float: none !important;
	clear: both !important;
	width: calc(100% - 48px) !important;
	max-width: 1240px !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 auto;
	overflow: visible !important;
}

/* Layout hardening. The main ITAP site also contains older .itap-* CSS.
   These resets prevent a theme/page rule from absolutely positioning or
   floating the plugin grids/cards, which makes the sponsor and exhibitor
   sections collapse in height and causes the next section/footer to overlap. */
.itapdir-directory .itapdir-grid,
.itapdir-sponsors .itapdir-sponsor-grid {
	position: relative !important;
	inset: auto !important;
	display: grid !important;
	float: none !important;
	clear: both !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow: visible !important;
}

.itapdir-directory .itapdir-card,
.itapdir-sponsors .itapdir-sponsor {
	position: relative !important;
	inset: auto !important;
	float: none !important;
	clear: none !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
}

/* Section heading */

.itapdir-heading {
	margin: 0 0 8px;
	color: var(--itap-accent);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.itapdir-intro {
	max-width: 720px;
	margin: 0 0 28px;
	color: var(--itap-muted);
	font-size: 16px;
	line-height: 1.6;
}

.itapdir-heading + .itapdir-controls,
.itapdir-heading + .itapdir-az {
	margin-top: 28px;
}

/* Controls */

.itapdir-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 20px;
}

.itapdir-control {
	flex: 0 1 240px;
}

.itapdir-control-search {
	flex: 1 1 340px;
}

.itapdir-directory input[type="search"],
.itapdir-directory select {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--itap-line);
	border-radius: 4px;
	background: var(--itap-panel);
	color: var(--itap-text);
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
}

.itapdir-directory select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.itapdir-directory input[type="search"]::placeholder {
	color: var(--itap-muted);
	opacity: 1;
}

.itapdir-directory input[type="search"]:focus,
.itapdir-directory select:focus {
	outline: none;
	border-color: var(--itap-accent);
	box-shadow: 0 0 0 1px var(--itap-accent);
}

/* A to Z */

.itapdir-az {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 20px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--itap-line);
}

.itapdir-az-btn {
	min-width: 36px;
	padding: 8px 10px;
	border: 1px solid var(--itap-line);
	border-radius: 4px;
	background: transparent;
	color: var(--itap-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.itapdir-az-btn:hover:not([disabled]) {
	border-color: var(--itap-accent);
	color: var(--itap-accent);
}

.itapdir-az-btn.is-active {
	background: var(--itap-accent);
	border-color: var(--itap-accent);
	color: #fff;
}

.itapdir-az-btn[disabled] {
	opacity: .3;
	cursor: default;
}

.itapdir-az-btn:focus-visible {
	outline: 2px solid var(--itap-accent);
	outline-offset: 2px;
}

/* Count */

.itapdir-count {
	margin: 0 0 20px;
	color: var(--itap-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Grid
   Columns keep a readable minimum width (190px). If the section is placed
   inside a container narrower than that allows, the grid scrolls
   horizontally instead of squashing card text into illegible slivers —
   that's a visible signal the section is sitting in an unexpectedly
   narrow container, worth checking the page template for. */

.itapdir-grid {
	display: grid;
	grid-template-columns: repeat(var(--itap-cols), minmax(190px, 1fr));
	gap: 20px;
}

.itapdir-directory[data-columns="2"] { --itap-cols: 2; }
.itapdir-directory[data-columns="3"] { --itap-cols: 3; }
.itapdir-directory[data-columns="4"] { --itap-cols: 4; }
.itapdir-directory[data-columns="5"] { --itap-cols: 5; }
.itapdir-directory[data-columns="6"] { --itap-cols: 6; }

.itapdir-card.is-hidden {
	display: none;
}

.itapdir-card-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 1px solid var(--itap-line);
	border-radius: 6px;
	overflow: hidden;
	background: var(--itap-panel);
	color: var(--itap-text);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease;
}

.itapdir-card-link:hover,
.itapdir-card-link:focus-visible {
	border-color: var(--itap-accent);
	transform: translateY(-2px);
	text-decoration: none;
	color: var(--itap-text);
}

.itapdir-card-link:focus-visible {
	outline: 2px solid var(--itap-accent);
	outline-offset: 2px;
}

.itapdir-card.is-featured .itapdir-card-link {
	border-color: var(--itap-accent);
}

/* Logos always sit on white so black and colour logos both read. */

.itapdir-card-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 140px;
	padding: 22px;
	background: #ffffff;
}

.itapdir-card-logo img,
.itapdir-sponsor-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.itapdir-logo-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #f1f2f4;
	color: #5F6B78;
	font-size: 24px;
	font-weight: 700;
}

.itapdir-card-body {
	display: block;
	padding: 18px 20px 20px;
}

.itapdir-card-name {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--itap-text);
}

.itapdir-card-stand {
	display: block;
	margin-top: 8px;
	color: var(--itap-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.itapdir-empty,
.itapdir-none {
	margin: 32px 0;
	color: var(--itap-muted);
}

/* Red pill labels, as used on the programme page */

.itapdir-tag {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 4px 10px;
	border: 1px solid var(--itap-accent);
	border-radius: 3px;
	color: var(--itap-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Button */

.itapdir-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	background: var(--itap-accent);
	border: 1px solid var(--itap-accent);
	border-radius: 3px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.itapdir-button:hover,
.itapdir-button:focus {
	background: transparent;
	color: var(--itap-accent);
	text-decoration: none;
}

/* Modal */

.itapdir-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.itapdir-modal[hidden] {
	display: none;
}

.itapdir-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .8);
}

.itapdir-modal-panel {
	position: relative;
	width: 100%;
	max-width: 700px;
	max-height: 86vh;
	overflow-y: auto;
	padding: 0 0 36px;
	background: #111114;
	border: 1px solid var(--itap-line);
	border-radius: 6px;
	color: #fff;
}

.itapdir-directory[data-theme="light"] .itapdir-modal-panel {
	background: #fff;
	color: inherit;
}

.itapdir-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.itapdir-modal-close:hover {
	background: var(--itap-accent);
}

.itapdir-modal-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	padding: 28px;
	background: #fff;
}

.itapdir-modal-logo:empty {
	display: none;
}

.itapdir-modal-logo img {
	max-width: 260px;
	max-height: 120px;
	width: auto;
	height: auto;
}

.itapdir-modal-content {
	padding: 30px 36px 0;
}

.itapdir-detail-name {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.itapdir-detail-stand {
	margin-top: 10px;
	color: var(--itap-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.itapdir-detail-country {
	margin-top: 6px;
	color: var(--itap-muted);
	font-size: 14px;
}

.itapdir-detail-sectors {
	margin-top: 18px;
}

.itapdir-detail-bio {
	margin-top: 20px;
	line-height: 1.65;
	color: var(--itap-muted);
}

.itapdir-directory[data-theme="light"] .itapdir-detail-bio {
	color: inherit;
}

.itapdir-detail-bio p {
	margin: 0 0 1em;
}

.itapdir-detail-cta {
	margin-top: 26px;
}

.itapdir-detail-more {
	margin-top: 14px;
	font-size: 14px;
}

.itapdir-detail-more a {
	color: var(--itap-muted);
}

body.itapdir-modal-open {
	overflow: hidden;
}

/* Sponsor wall */

.itapdir-sponsors[data-columns="2"] { --itap-cols: 2; }
.itapdir-sponsors[data-columns="3"] { --itap-cols: 3; }
.itapdir-sponsors[data-columns="4"] { --itap-cols: 4; }
.itapdir-sponsors[data-columns="5"] { --itap-cols: 5; }
.itapdir-sponsors[data-columns="6"] { --itap-cols: 6; }

.itapdir-tier-heading {
	margin: 40px 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--itap-line);
	color: var(--itap-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.itapdir-tier-heading:first-child {
	margin-top: 0;
}

.itapdir-sponsor-grid {
	display: grid;
	grid-template-columns: repeat(var(--itap-cols), minmax(190px, 1fr));
	gap: 20px;
}

.itapdir-sponsor {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	border: 1px solid var(--itap-line);
	border-radius: 6px;
	overflow: hidden;
	background: var(--itap-panel);
	color: var(--itap-text);
	text-align: center;
	text-decoration: none;
}

a.itapdir-sponsor:hover,
a.itapdir-sponsor:focus-visible {
	border-color: var(--itap-accent);
	text-decoration: none;
	color: var(--itap-text);
}

.itapdir-sponsor-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 120px;
	padding: 20px;
	background: #fff;
}

.itapdir-sponsor-name {
	padding: 16px 16px 0;
	font-size: 15px;
	font-weight: 700;
}

.itapdir-sponsor-of {
	padding: 4px 16px 18px;
	color: var(--itap-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.itapdir-sponsor-name:last-child {
	padding-bottom: 18px;
}

/* Single listing page, if individual pages are switched on */

.itapdir-single-logo img {
	max-width: 240px;
	height: auto;
}

.itapdir-single-facts {
	margin: 16px 0;
}

.itapdir-single-facts p {
	margin: 0 0 4px;
}

.itapdir-single-footer {
	margin-top: 24px;
}

/* Screen reader helper, in case the theme does not define one */

.itapdir-directory .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Responsive */

@media (max-width: 1024px) {
	.itapdir-grid,
	.itapdir-sponsor-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.itapdir-directory,
	.itapdir-sponsors {
		padding: 36px 18px 48px;
	}

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

@media (max-width: 560px) {
	.itapdir-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.itapdir-control,
	.itapdir-control-search {
		flex: 1 1 100%;
	}

	.itapdir-modal {
		padding: 0;
	}

	.itapdir-modal-panel {
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
		border: 0;
	}

	.itapdir-modal-content {
		padding: 24px 20px 0;
	}

	.itapdir-detail-name {
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.itapdir-card-link {
		transition: none;
	}

	.itapdir-card-link:hover {
		transform: none;
	}
}