/*
Theme Name: Merchandiseworld
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Merchandiseworld Child is a child theme of Hello Elementor, created by Akiko team
Author: Akiki Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.1.5
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   Merchandise World visual refresh – phase 1
   --------------------------------------------------------------------------
   How this file is organised
   1. Design tokens (CSS custom properties)
   2. Base: focus, reduced motion, screen-reader text
   3. Typography helpers (eyebrow, two-tone headline)
   4. Links and buttons (add the class in Elementor › Advanced › CSS Classes)
   5. Cards, icon tiles, stats
   6. Tags and filter chips
   7. Exhibitor list ([exhibitorslist] shortcode)
   8. Sponsors section
   9. "Important information" pill
   10. Hero and footer helpers

   Rule of thumb: colours and fonts live in Elementor › Site Settings.
   This file only adds what Elementor can't do cleanly. Everything is
   opt-in via mw- classes, except section 2.
   ========================================================================== */

/* 1. Design tokens ======================================================== */
:root {
	/* Core palette – the only three colours */
	--mw-pink: #ED2B74;
	--mw-teal: #23BBB8;
	--mw-navy: #223645;

	/* Tints (core colour mixed with white) */
	--mw-pink-20: #FBD5E3;
	--mw-pink-10: #FDEAF1;
	--mw-teal-20: #D3F1F1;
	--mw-teal-10: #E9F8F8;
	--mw-navy-80: #4E5E6A; /* body text */
	--mw-navy-70: #64727D; /* captions, meta */
	--mw-navy-55: #868F99; /* input borders */
	--mw-navy-15: #DEE1E3; /* dividers, card borders */
	--mw-navy-05: #F4F5F6; /* neutral bands */
	--mw-white: #FFFFFF;

	/* Type */
	--mw-font-head: 'Poppins', system-ui, sans-serif;
	--mw-font-body: 'Lato', system-ui, sans-serif;

	/* Radius */
	--mw-r-sm: 8px;
	--mw-r-md: 16px;
	--mw-r-lg: 24px;
	--mw-r-pill: 999px;

	/* Spacing (8-point) */
	--mw-s-1: 8px;
	--mw-s-2: 16px;
	--mw-s-3: 24px;
	--mw-s-4: 32px;
	--mw-s-6: 48px;
	--mw-s-8: 64px;
	--mw-s-12: 96px;

	/* Elevation */
	--mw-shadow-card: 0 1px 2px rgba(34, 54, 69, 0.06), 0 12px 32px rgba(34, 54, 69, 0.06);

	/* Motion */
	--mw-ease: 0.15s ease-out;
}

/* 2. Base ================================================================== */

/* Visible keyboard focus everywhere (mouse clicks don't show it). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--mw-navy);
	outline-offset: 3px;
}

/* On teal or navy backgrounds, use a white focus ring.
   Add .mw-on-dark to the Elementor container. */
.mw-on-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--mw-white);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* Hello Elementor ships .screen-reader-text; repeated here so the
   exhibitor list works even if that stylesheet is filtered off. */
.mw-exhibitors .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 3. Typography helpers ==================================================== */

/* Eyebrow: small caps label above a heading.
   Elementor: Heading widget (p or span) › CSS Classes: mw-eyebrow */
.mw-eyebrow,
.mw-eyebrow .elementor-heading-title {
	font-family: var(--mw-font-head);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mw-navy);
}

.mw-on-dark .mw-eyebrow,
.mw-on-dark .mw-eyebrow .elementor-heading-title {
	color: var(--mw-white);
}

/* Two-tone headline: wrap the key phrase in <span class="mw-hl">…</span>.
   Pink text only at 24px and above. */
.mw-hl {
	color: var(--mw-pink);
}

/* Numbered section marker (01, 02 …) */
.mw-step-no,
.mw-step-no .elementor-heading-title {
	font-family: var(--mw-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--mw-teal);
}

/* 4. Links and buttons ===================================================== */

/* Standalone text link with arrow.
   Elementor: Button widget › Style: none, or a Heading link,
   with CSS Classes: mw-link. Put the arrow in a <span class="arr">→</span>
   if you want it to slide on hover. */
a.mw-link,
.mw-link .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	margin: 0; /* hover pill starts level with the content edge, never overhangs it */
	border-radius: var(--mw-r-pill);
	background: transparent;
	color: var(--mw-navy);
	font-family: var(--mw-font-head);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	min-height: 0;
	border: 0;
	box-shadow: none;
	text-decoration: none;
	transition: background-color var(--mw-ease), color var(--mw-ease);
}

.mw-link .arr {
	display: inline-block;
	transition: transform var(--mw-ease);
}

a.mw-link:hover,
.mw-link .elementor-button:hover {
	background: var(--mw-pink-10);
	color: var(--mw-navy);
}

a.mw-link:hover .arr,
.mw-link .elementor-button:hover .arr {
	transform: translateX(4px);
}

/* Right-aligned links: pill ends level with the content edge */
a.mw-link--end,
.mw-link--end .elementor-button {
	margin: 0;
}

/* On navy panels */
a.mw-link--dark,
.mw-link--dark .elementor-button {
	color: var(--mw-white);
}

a.mw-link--dark:hover,
.mw-link--dark .elementor-button:hover {
	background: var(--mw-teal);
	color: var(--mw-navy);
}

/* Back link: arrow on the left, slides left */
a.mw-link--back:hover .arr,
.mw-link--back .elementor-button:hover .arr {
	transform: translateX(-4px);
}

/* Buttons. Base button colours/sizes are set in Site Settings › Buttons.
   These classes add the variants. Add to the Button widget's CSS Classes. */
.mw-btn .elementor-button,
.mw-btn-secondary .elementor-button,
.mw-btn-navy .elementor-button,
.mw-btn-white .elementor-button {
	border-radius: var(--mw-r-pill);
	font-family: var(--mw-font-head);
	transition: background-color var(--mw-ease), color var(--mw-ease), border-color var(--mw-ease);
}

/* Primary: pink, 19px bold so white-on-pink counts as large text */
.mw-btn .elementor-button {
	background: var(--mw-pink);
	color: var(--mw-white);
	font-size: 19px;
	font-weight: 700;
	min-height: 52px;
	padding: 0 28px;
	display: inline-flex;
	align-items: center;
}

.mw-btn .elementor-button:hover {
	background: var(--mw-navy);
	color: var(--mw-white);
}

/* Secondary: navy outline → navy fill */
.mw-btn-secondary .elementor-button {
	background: var(--mw-white);
	color: var(--mw-navy);
	border: 2px solid var(--mw-navy);
	font-size: 17px;
	font-weight: 600;
	min-height: 52px;
	padding: 0 26px;
	display: inline-flex;
	align-items: center;
}

.mw-btn-secondary .elementor-button:hover {
	background: var(--mw-navy);
	color: var(--mw-white);
}

/* Navy fill (on teal) → white */
.mw-btn-navy .elementor-button {
	background: var(--mw-navy);
	color: var(--mw-white);
	font-size: 17px;
	font-weight: 600;
	min-height: 52px;
	padding: 0 26px;
	display: inline-flex;
	align-items: center;
}

.mw-btn-navy .elementor-button:hover {
	background: var(--mw-white);
	color: var(--mw-navy);
}

/* White pill (phone number on teal) → navy */
.mw-btn-white .elementor-button {
	background: var(--mw-white);
	color: var(--mw-navy);
	font-size: 17px;
	font-weight: 600;
	min-height: 52px;
	padding: 0 26px;
	display: inline-flex;
	align-items: center;
}

.mw-btn-white .elementor-button:hover {
	background: var(--mw-navy);
	color: var(--mw-white);
}

/* Arrow nudge on any button with <span class="arr"> in its text */
.elementor-button .arr {
	display: inline-block;
	transition: transform var(--mw-ease);
}

.elementor-button:hover .arr {
	transform: translateX(4px);
}

/* Main navigation over the teal hero (Nav Menu widget › CSS Classes: mw-nav) */
.mw-nav .elementor-nav-menu--main .elementor-item {
	color: var(--mw-white);
	font-family: var(--mw-font-head);
	font-weight: 500;
}

.mw-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
.mw-nav .elementor-nav-menu--main .elementor-item:hover {
	color: var(--mw-white);
}

.mw-nav .elementor-nav-menu--main .elementor-item::after {
	background-color: var(--mw-white);
	height: 3px;
}

/* 5. Cards, icon tiles, stats ============================================== */

/* Elementor container › CSS Classes: mw-card */
.mw-card {
	background: var(--mw-white);
	border-radius: var(--mw-r-md);
	box-shadow: var(--mw-shadow-card);
}

.mw-card--outline {
	background: var(--mw-white);
	border: 1px solid var(--mw-navy-15);
	border-radius: var(--mw-r-md);
}

/* Rounded square icon tile (Icon widget › CSS Classes: mw-icon-tile) */
.mw-icon-tile .elementor-icon {
	width: 56px;
	height: 56px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: var(--mw-pink-10);
	color: var(--mw-pink);
	font-size: 26px;
}

.mw-icon-tile--teal .elementor-icon {
	background: var(--mw-teal-10);
	color: var(--mw-navy);
}

/* Circular icon (Info cards) – fixed size so it never squashes into an oval */
.mw-icon-circle .elementor-icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mw-pink);
	color: var(--mw-white);
	font-size: 22px;
}

/* Stat card (Counter widget inside a container with mw-stat) */
.mw-stat {
	background: var(--mw-teal-10);
	border-radius: var(--mw-r-md);
}

.mw-stat .elementor-counter-number-wrapper {
	font-family: var(--mw-font-head);
	font-weight: 700;
	color: var(--mw-pink);
	letter-spacing: -0.02em;
	line-height: 1;
}

.mw-stat .elementor-counter-title {
	font-family: var(--mw-font-head);
	font-weight: 600;
	color: var(--mw-navy);
	text-align: left;
}

/* 6. Tags and filter chips ================================================= */

.mw-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 3px;
	border-radius: var(--mw-r-pill);
	background: var(--mw-navy-05);
	font-family: var(--mw-font-head);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mw-navy);
	white-space: nowrap;
}

.mw-tag img {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	display: block;
}

.mw-tag--eco { background: var(--mw-teal-10); }
.mw-tag--new { background: var(--mw-pink-10); }
.mw-tag--sponsor {
	background: var(--mw-white);
	box-shadow: inset 0 0 0 1px var(--mw-navy-15);
}

/* Doubled class + element: outranks Elementor's kit button rules
   (.elementor-kit-14 button …) without !important. */
button.mw-chip.mw-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--mw-navy-15);
	border-radius: var(--mw-r-pill);
	background: var(--mw-white);
	color: var(--mw-navy);
	font-family: var(--mw-font-head);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--mw-ease), border-color var(--mw-ease), color var(--mw-ease);
}

button.mw-chip.mw-chip:has(img) {
	padding-left: 8px;
}

button.mw-chip.mw-chip img {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	margin: 0;
}

button.mw-chip.mw-chip:hover,
button.mw-chip.mw-chip:focus {
	border-color: var(--mw-navy);
	background: var(--mw-white);
	color: var(--mw-navy);
}

button.mw-chip.mw-chip[aria-pressed="true"] {
	background: var(--mw-navy);
	border-color: var(--mw-navy);
	color: var(--mw-white);
}

.mw-chip__count {
	font-weight: 500;
	opacity: 0.75;
}

/* 7. Exhibitor list ======================================================== */

.mw-exhibitors {
	display: flex;
	flex-direction: column;
	gap: var(--mw-s-3);
	margin-top: var(--mw-s-2);
	font-family: var(--mw-font-body);
	color: var(--mw-navy);
}

.mw-exhibitors__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mw-s-2);
}

/* Search gets its own row; the filter chips sit on the row below. */
.mw-search {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--mw-navy-55);
	border-radius: var(--mw-r-sm);
	background: var(--mw-white);
	color: var(--mw-navy-80);
}

.mw-search:focus-within {
	border-color: var(--mw-teal);
	box-shadow: 0 0 0 3px var(--mw-teal-10);
}

/* Outranks the kit's input rules (.elementor-kit-14 input:not(…):not(…)) */
.mw-exhibitors .mw-search.mw-search input[type="search"],
.mw-exhibitors .mw-search.mw-search input[type="search"]:focus {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
	font-family: var(--mw-font-body);
	font-size: 16px;
	color: var(--mw-navy);
	outline: none;
	box-shadow: none;
}

.mw-exhibitors .mw-search.mw-search input[type="search"]::placeholder {
	color: var(--mw-navy-70);
}

.mw-exhibitors__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* All 26 letters share one row on desktop, two rows of 13 on tablet,
   and scroll sideways on phones (see the 640px query). */
.mw-az {
	display: grid;
	grid-template-columns: repeat(26, minmax(0, 1fr));
	gap: 6px;
	font-family: var(--mw-font-head);
	font-size: 14px;
	font-weight: 600;
}

/* Letters are links without JS and filter buttons with it (exhibitors.js).
   Doubled class outranks the kit's button rules without !important. */
.mw-exhibitors .mw-az a,
.mw-az span,
button.mw-az__btn.mw-az__btn {
	width: 100%;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: var(--mw-r-sm);
	background: var(--mw-navy-05);
	color: var(--mw-navy);
	font-family: var(--mw-font-head);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mw-ease), border-color var(--mw-ease), color var(--mw-ease);
}

.mw-exhibitors .mw-az a:hover,
button.mw-az__btn.mw-az__btn:hover,
button.mw-az__btn.mw-az__btn:focus-visible {
	background: var(--mw-white);
	border-color: var(--mw-navy);
	color: var(--mw-navy);
}

button.mw-az__btn.mw-az__btn[aria-pressed="true"] {
	background: var(--mw-navy);
	border-color: var(--mw-navy);
	color: var(--mw-white);
}

.mw-az span {
	color: var(--mw-navy-55);
	background: transparent;
	cursor: default;
}

/* Column rules are drawn on the list itself (::after), not on the items,
   so they stay put whatever the search or filters hide. */
.mw-exhibitors__list {
	--mw-col-rule: #C9D0D5;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--mw-navy-15);
	border-radius: var(--mw-r-md);
	overflow: hidden;
	background: var(--mw-white);
}

.mw-exhibitors__list::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--mw-col-rule), var(--mw-col-rule)),
		linear-gradient(var(--mw-col-rule), var(--mw-col-rule));
	background-size: 1px 100%;
	background-repeat: no-repeat;
	background-position: calc(100% / 3) 0, calc(200% / 3) 0;
}

/* Row dividers sit on top of each item; the first row's line is tucked
   under the list border, so no half-width line is left under the last row. */
.mw-exhibitors__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 68px;
	margin-top: -1px;
	padding: 14px 24px;
	border-top: 1px solid var(--mw-navy-15);
	scroll-margin-top: 120px; /* clears a sticky header when jumping A–Z */
	transition: background-color var(--mw-ease);
}

.mw-exhibitors__item:hover {
	background: var(--mw-teal-10);
}

.mw-exhibitors__item[hidden],
.mw-exhibitors [hidden] {
	display: none;
}

.mw-exhibitors .mw-exhibitors__name {
	flex: 1;
	min-width: 0;
	font-family: var(--mw-font-head);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mw-navy);
	text-decoration: none;
}

.mw-exhibitors a.mw-exhibitors__name:hover,
.mw-exhibitors a.mw-exhibitors__name:focus {
	color: var(--mw-navy);
	text-decoration: underline;
	text-decoration-color: var(--mw-pink);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.mw-exhibitors__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	flex-shrink: 0;
}

.mw-exhibitors__empty,
.mw-exhibitors__error {
	margin: 0;
	padding: var(--mw-s-3);
	border-radius: var(--mw-r-md);
	background: var(--mw-navy-05);
	font-size: 16px;
	color: var(--mw-navy-80);
}

@media (max-width: 1024px) {
	.mw-az {
		grid-template-columns: repeat(13, minmax(0, 1fr));
	}

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

	.mw-exhibitors__list::after {
		background-image: linear-gradient(var(--mw-col-rule), var(--mw-col-rule));
		background-position: 50% 0;
	}
}

@media (max-width: 640px) {
	.mw-exhibitors__list {
		grid-template-columns: 1fr;
	}

	.mw-exhibitors__list::after {
		content: none;
	}

	/* Tags drop under the name instead of squeezing it */
	.mw-exhibitors__item {
		flex-wrap: wrap;
		gap: 8px;
		padding: 12px 16px;
		min-height: 0;
	}

	.mw-exhibitors .mw-exhibitors__name {
		flex: 1 1 100%;
	}

	.mw-exhibitors__tags {
		justify-content: flex-start;
	}

	.mw-exhibitors__tags:empty {
		display: none;
	}

	/* A–Z scrolls sideways on one line */
	.mw-az {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: thin;
	}

	.mw-exhibitors .mw-az a,
	.mw-az span,
	button.mw-az__btn.mw-az__btn {
		flex: 0 0 40px;
		width: 40px;
	}
}

/* 7b. Registered visitors ================================================= */
/* [mw_visitors] reuses the exhibitor toolbar (.mw-exhibitors) and adds a
   three-column table: Company | Location | Visitors. The header sticks while
   scrolling; on phones each row becomes a small card. Selectors are scoped
   to .mw-visitors so they outrank the theme's generic table rules. */

.mw-visitors table.mw-visitors__table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--mw-navy-15);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--mw-r-md);
	background: var(--mw-white);
	font-family: var(--mw-font-body);
}

.mw-visitors table.mw-visitors__table th {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 14px 24px;
	border: 0;
	background: var(--mw-navy);
	color: var(--mw-white);
	font-family: var(--mw-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
}

.admin-bar .mw-visitors table.mw-visitors__table th {
	top: 32px; /* clears the WordPress toolbar when logged in */
}

.mw-visitors table.mw-visitors__table th:first-child {
	border-top-left-radius: calc(var(--mw-r-md) - 1px);
}

.mw-visitors table.mw-visitors__table th:last-child {
	border-top-right-radius: calc(var(--mw-r-md) - 1px);
}

.mw-visitors table.mw-visitors__table td {
	padding: 14px 24px;
	border: 0;
	border-top: 1px solid var(--mw-navy-15);
	background: var(--mw-white);
	color: var(--mw-navy-80);
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	vertical-align: middle;
	transition: background-color var(--mw-ease);
}

.mw-visitors table.mw-visitors__table tbody tr:first-child td {
	border-top: 0;
}

.mw-visitors table.mw-visitors__table tbody tr:hover td {
	background: var(--mw-teal-10);
}

.mw-visitors table.mw-visitors__table tbody tr:last-child td:first-child {
	border-bottom-left-radius: calc(var(--mw-r-md) - 1px);
}

.mw-visitors table.mw-visitors__table tbody tr:last-child td:last-child {
	border-bottom-right-radius: calc(var(--mw-r-md) - 1px);
}

.mw-visitors .mw-visitors__company {
	width: 46%;
}

.mw-visitors table.mw-visitors__table .mw-visitors__count {
	width: 120px;
	text-align: right;
	white-space: nowrap;
}

.mw-visitors td.mw-visitors__count {
	font-family: var(--mw-font-head);
	font-weight: 600;
	color: var(--mw-navy);
}

.mw-visitors .mw-visitors__unit {
	display: none;
}

.mw-visitors .mw-visitors__name {
	font-family: var(--mw-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--mw-navy);
	text-decoration: none;
}

.mw-visitors a.mw-visitors__name:hover,
.mw-visitors a.mw-visitors__name:focus {
	color: var(--mw-navy);
	text-decoration: underline;
	text-decoration-color: var(--mw-pink);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.mw-visitors .mw-visitors__ext {
	margin-left: 6px;
	vertical-align: -1px;
	color: var(--mw-navy-55);
}

.mw-visitors tr[hidden] {
	display: none;
}

@media (max-width: 640px) {
	/* Header row stays available to screen readers, hidden visually */
	.mw-visitors table.mw-visitors__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.mw-visitors table.mw-visitors__table,
	.mw-visitors table.mw-visitors__table tbody {
		display: block;
	}

	/* Each row: company on top, location left and visitor count right */
	.mw-visitors table.mw-visitors__table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 4px 12px;
		padding: 14px 16px;
		border-top: 1px solid var(--mw-navy-15);
	}

	.mw-visitors table.mw-visitors__table tbody tr:first-child {
		border-top: 0;
	}

	.mw-visitors table.mw-visitors__table tr[hidden] {
		display: none;
	}

	.mw-visitors table.mw-visitors__table td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		background: transparent;
		border-radius: 0;
	}

	.mw-visitors table.mw-visitors__table tbody tr:hover td {
		background: transparent;
	}

	.mw-visitors table.mw-visitors__table tbody tr:hover {
		background: var(--mw-teal-10);
	}

	.mw-visitors td.mw-visitors__company {
		grid-column: 1 / -1;
	}

	.mw-visitors table.mw-visitors__table td.mw-visitors__location {
		font-size: 14px;
	}

	.mw-visitors table.mw-visitors__table td.mw-visitors__count {
		width: auto;
		font-size: 14px;
	}

	.mw-visitors .mw-visitors__unit {
		display: inline;
		font-weight: 400;
		color: var(--mw-navy-80);
	}
}

/* 8. Sponsors section ====================================================== */
/* Structure in Elementor:
   Container .mw-sponsors (navy 5% band, 24px radius)
     Container .mw-sponsor-tier (one per tier: medallion + logo grid)
       Image widget  › medallion SVG (mw-medal-*.svg), CSS class mw-sponsor-medal
       Container .mw-sponsor-logos (grid)
         Image widgets › CSS class mw-sponsor-tile, link to sponsor site     */

.mw-sponsors {
	background: var(--mw-navy-05);
	border-radius: var(--mw-r-lg);
}

.mw-sponsor-tier {
	display: flex;
	gap: var(--mw-s-4);
	align-items: flex-start;
	padding-top: 28px;
	border-top: 1px solid var(--mw-navy-15);
}

.mw-sponsor-tier:first-of-type {
	border-top: 0;
}

.mw-sponsor-medal {
	flex: 0 0 120px;
	width: 120px;
}

.mw-sponsor-medal img {
	width: 112px;
	height: 112px;
	display: block;
	margin: 0 auto;
}

/* Every logo tile is the same size; the medallion shows the tier. */
.mw-sponsor-logos {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}

.mw-sponsor-tile,
.mw-sponsor-tile .elementor-widget-container {
	height: 92px;
}

.mw-sponsor-tile .elementor-widget-container,
.mw-sponsor-tile a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 12px 18px;
	box-sizing: border-box;
	background: var(--mw-white);
	border-radius: var(--mw-r-md);
	box-shadow: 0 1px 2px rgba(34, 54, 69, 0.06);
	transition: box-shadow var(--mw-ease);
}

.mw-sponsor-tile a {
	padding: 0;
	box-shadow: none;
	background: transparent;
}

.mw-sponsor-tile img {
	max-width: 100%;
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.mw-sponsor-tile:hover .elementor-widget-container {
	box-shadow: 0 0 0 2px var(--mw-teal), 0 10px 24px rgba(34, 54, 69, 0.10);
}

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

@media (max-width: 767px) {
	.mw-sponsor-tier {
		flex-direction: column;
		align-items: center;
	}

	.mw-sponsor-medal {
		flex-basis: auto;
	}

	.mw-sponsor-logos {
		width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mw-sponsor-tile,
	.mw-sponsor-tile .elementor-widget-container {
		height: 68px;
	}
}

/* 9. "Important information" pill ========================================= */
/* Button widget › CSS Classes: mw-info-pill. Icon: hamburger, after text. */

.mw-info-pill .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 8px 0 22px;
	border-radius: var(--mw-r-pill);
	background: var(--mw-navy);
	color: var(--mw-white);
	font-family: var(--mw-font-head);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
}

.mw-info-pill .elementor-button-icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mw-teal);
	color: var(--mw-navy);
	transition: background-color var(--mw-ease);
}

.mw-info-pill .elementor-button-icon svg {
	fill: var(--mw-navy);
	width: 16px;
}

.mw-info-pill .elementor-button:hover {
	background: var(--mw-navy);
	color: var(--mw-white);
}

.mw-info-pill .elementor-button:hover .elementor-button-icon {
	background: var(--mw-pink);
}

/* 10. Hero and footer helpers ============================================== */

/* Hero container › CSS Classes: mw-hero mw-on-dark
   Set the image + overlays in Elementor (Background + Background Overlay);
   this only handles the curved bottom edge and white text. */
.mw-hero {
	border-radius: 0 0 50% 50% / 0 0 72px 72px;
	overflow: hidden;
	color: var(--mw-white);
}

.mw-hero .elementor-heading-title,
.mw-hero .elementor-widget-text-editor {
	color: var(--mw-white);
}

@media (max-width: 767px) {
	.mw-hero {
		border-radius: 0 0 50% 50% / 0 0 32px 32px;
	}
}

/* Footer container › CSS Classes: mw-footer mw-on-dark (solid teal) */
.mw-footer {
	background-color: var(--mw-teal);
	color: var(--mw-white);
}

.mw-footer .elementor-heading-title {
	color: var(--mw-navy); /* menu headings: navy on teal ≈ 5.3:1 */
	font-family: var(--mw-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mw-footer a,
.mw-footer .elementor-icon-list-text {
	color: var(--mw-white);
}

.mw-footer a:hover,
.mw-footer a:hover .elementor-icon-list-text {
	color: var(--mw-white);
	text-decoration: underline;
}