/* ==========================================================================
   FoodTrade MENA — Main stylesheet (deferred, non-render-blocking)
   Loaded after first paint. Contains everything NOT needed above the fold:
   content typography, cards, archive river, pagination, forms, footer, and
   the component shells that Phase 3+ templates fill in.

   All colors use the semantic --ft-* tokens defined in critical.css, so this
   sheet is automatically dark-mode aware. All directional spacing uses CSS
   logical properties (margin-inline, inset-*) so the RTL variant is trivial.
   ========================================================================== */

/* --- Content typography ------------------------------------------------- */
.ft-prose {
	max-width: var(--ft-content);
	font-size: 1.0625rem;
}
.ft-prose > * + * { margin-block-start: 1.4em; }
.ft-prose p { margin: 0; }
.ft-prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); margin-block: 1.8em 0.4em; }
.ft-prose h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.5rem); margin-block: 1.4em 0.3em; }
.ft-prose ul,
.ft-prose ol { padding-inline-start: 1.4em; margin: 0; }
.ft-prose li + li { margin-block-start: 0.4em; }
.ft-prose blockquote {
	margin: 0;
	padding-inline-start: 1.2em;
	border-inline-start: 4px solid var(--ft-color-accent);
	font-family: var(--ft-font-serif);
	font-size: 1.2em;
	color: var(--ft-color-heading);
}
.ft-prose figure { margin: 0; }
.ft-prose figcaption {
	margin-block-start: 0.5em;
	font-size: 0.85rem;
	color: var(--ft-color-muted);
}
.ft-prose code,
.ft-prose kbd { font-family: var(--ft-font-mono); font-size: 0.9em; }

/* --- Cards + post river ------------------------------------------------- */
.ft-post-river {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.ft-card {
	display: flex;
	flex-direction: column;
	background: var(--ft-color-bg);
	border: 1px solid var(--ft-color-line);
	border-radius: var(--ft-radius);
	overflow: hidden;
	transition: box-shadow var(--ft-dur) var(--ft-ease), transform var(--ft-dur) var(--ft-ease);
}
.ft-card:hover { box-shadow: var(--ft-shadow-md); transform: translateY(-2px); }

.ft-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ft-color-surface-2); }
.ft-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.ft-card__body { padding: 1.1rem 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ft-card__title { font-size: 1.2rem; margin: 0; line-height: 1.25; }
.ft-card__title a { color: var(--ft-color-heading); text-decoration: none; }
.ft-card__title a:hover { color: var(--ft-color-link-hover); }

.ft-card__meta {
	margin: 0;
	font-family: var(--ft-font-sans);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ft-color-muted);
}
.ft-card__excerpt { margin: 0; color: var(--ft-color-muted); font-size: 0.95rem; }

/* --- Archive header + empty state -------------------------------------- */
.ft-archive-header { margin-block-end: clamp(1.5rem, 4vw, 2.5rem); }
.ft-archive-title { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); margin: 0; }

.ft-empty {
	max-width: var(--ft-content);
	margin-inline: auto;
	text-align: center;
	padding-block: clamp(2rem, 8vw, 5rem);
}
.ft-empty__title { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem); }

/* --- Pagination --------------------------------------------------------- */
.pagination,
.ft-pagination {
	margin-block-start: clamp(2rem, 5vw, 3.5rem);
	display: flex;
	justify-content: center;
}
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--ft-color-line);
	border-radius: var(--ft-radius-sm);
	color: var(--ft-color-text);
	text-decoration: none;
	font-family: var(--ft-font-sans);
	font-weight: 600;
}
.pagination .page-numbers:hover { background: var(--ft-color-surface); }
.pagination .page-numbers.current {
	background: var(--ft-brand);
	border-color: var(--ft-brand);
	color: var(--ft-color-on-brand);
}

/* --- Buttons ------------------------------------------------------------ */
.ft-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.25rem;
	background: var(--ft-brand);
	color: var(--ft-color-on-brand);
	border: 1px solid transparent;
	border-radius: var(--ft-radius-sm);
	font-family: var(--ft-font-sans);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ft-dur) var(--ft-ease);
}
.ft-btn:hover { background: var(--ft-brand-deep); color: var(--ft-color-on-brand); }
.ft-btn--ghost {
	background: transparent;
	color: var(--ft-color-link);
	border-color: var(--ft-color-line);
}
.ft-btn--ghost:hover { background: var(--ft-color-surface); color: var(--ft-color-link); }

/* --- Forms (search etc.) ------------------------------------------------ */
.search-form { display: flex; gap: 0.5rem; max-width: var(--ft-content); margin-inline: auto; }
.search-field {
	flex: 1 1 auto;
	padding: 0.7rem 1rem;
	border: 1px solid var(--ft-color-line);
	border-radius: var(--ft-radius-sm);
	background: var(--ft-color-bg);
	color: var(--ft-color-text);
	font: inherit;
}
.search-field::placeholder { color: var(--ft-color-muted); }

/* --- Footer shell ------------------------------------------------------- */
.ft-footer {
	margin-block-start: clamp(3rem, 8vw, 6rem);
	background: var(--ft-color-surface);
	border-block-start: 1px solid var(--ft-color-line);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}
.ft-footer__inner { display: flex; flex-direction: column; gap: 1.25rem; }
.ft-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--ft-font-sans);
	font-size: 0.95rem;
}
.ft-footer__menu a { color: var(--ft-color-text); text-decoration: none; }
.ft-footer__menu a:hover { color: var(--ft-color-link-hover); }
.ft-footer__legal { margin: 0; color: var(--ft-color-muted); font-size: 0.85rem; }

/* --- Utility ------------------------------------------------------------ */
.ft-visually-hidden { /* alias kept for component code */
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* =========================================================================
   Shared chrome (Phase 3): utility bar, mega-menu, ticker, search overlay,
   drawer, footer/network, plus shared editorial primitives (chips, meta,
   section headings, grids, disclosure, ad slots, breadcrumbs).
   ========================================================================= */

/* --- Generic helpers ---------------------------------------------------- */
.ft-iconbtn {
	display: inline-grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	color: var(--ft-color-text);
}
.ft-iconbtn:hover { background: var(--ft-color-surface); }
.ft-iconbtn__glyph { inline-size: 18px; block-size: 18px; position: relative; }
.ft-iconbtn__glyph--search::before {
	content: ""; position: absolute; inset-block-start: 1px; inset-inline-start: 1px;
	inline-size: 11px; block-size: 11px; border: 2px solid currentColor; border-radius: 999px;
}
.ft-iconbtn__glyph--search::after {
	content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 0;
	inline-size: 7px; block-size: 2px; background: currentColor; transform: rotate(45deg); transform-origin: center;
}
.ft-iconbtn__glyph--close::before,
.ft-iconbtn__glyph--close::after {
	content: ""; position: absolute; inset-block-start: 8px; inset-inline-start: 0;
	inline-size: 18px; block-size: 2px; background: currentColor;
}
.ft-iconbtn__glyph--close::before { transform: rotate(45deg); }
.ft-iconbtn__glyph--close::after { transform: rotate(-45deg); }

/* --- Utility bar -------------------------------------------------------- */
.ft-utilitybar {
	background: var(--ft-color-surface);
	border-block-end: 1px solid var(--ft-color-line);
	font-size: 0.8rem;
}
.ft-utilitybar__inner { display: flex; align-items: center; gap: 1rem; min-height: 38px; }
.ft-utility-menu { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; font-family: var(--ft-font-sans); }
.ft-utility-menu a { color: var(--ft-color-muted); text-decoration: none; }
.ft-utility-menu a:hover { color: var(--ft-color-link-hover); }
.ft-utilitybar__actions { margin-inline-start: auto; display: flex; gap: 0.25rem; align-items: center; }
.ft-utilitybar .ft-iconbtn { inline-size: 34px; block-size: 34px; }

/* --- Masthead main row + sticky condensed ------------------------------ */
.ft-masthead__main { background: var(--ft-color-bg); }
.ft-masthead.is-condensed { box-shadow: var(--ft-shadow-sm); }
.ft-masthead.is-condensed .ft-utilitybar,
.ft-masthead.is-condensed .ft-ticker { display: none; }
.ft-masthead.is-condensed .ft-masthead__inner { min-height: 52px; }
.ft-masthead__inner { gap: clamp(0.75rem, 2vw, 1.5rem); }

.ft-btn--subscribe { margin-inline-start: auto; padding-block: 0.5rem; }
.ft-menu--primary { margin: 0; }

/* --- Primary nav + submenu --------------------------------------------- */
.ft-menu__item { position: relative; display: flex; align-items: center; }
.ft-menu__link { display: inline-flex; align-items: center; gap: 0.25rem; padding-block: 0.5rem; }
.ft-menu__toggle {
	background: transparent; border: 0; cursor: pointer; padding: 0.4rem; color: inherit;
	display: inline-grid; place-items: center;
}
.ft-menu__caret { inline-size: 8px; block-size: 8px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--ft-dur) var(--ft-ease); }
.ft-menu__toggle[aria-expanded="true"] .ft-menu__caret { transform: rotate(-135deg); }

.ft-submenu {
	position: absolute; inset-block-start: 100%; inset-inline-start: 0;
	min-inline-size: 220px; margin: 0; padding: 0.5rem 0; list-style: none;
	background: var(--ft-color-bg); border: 1px solid var(--ft-color-line);
	border-radius: var(--ft-radius); box-shadow: var(--ft-shadow-md); z-index: 50;
	display: none;
}
/* Submenus are driven purely by aria-expanded (JS sets it on hover, click and
   focus alike) so the visual state and the accessibility state never diverge. */
.ft-menu__item--has-children .ft-menu__toggle[aria-expanded="true"] + .ft-submenu,
.ft-menu__more-btn[aria-expanded="true"] + .ft-submenu { display: block; }
.ft-submenu a { display: block; padding: 0.45rem 1rem; text-decoration: none; color: var(--ft-color-text); }
.ft-submenu a:hover { background: var(--ft-color-surface); }

/* --- Sectors mega-menu -------------------------------------------------- */
.ft-menu__item--mega { position: static; }
.ft-mega {
	position: absolute; inset-inline: 0; inset-block-start: 100%;
	background: var(--ft-color-bg); border-block: 1px solid var(--ft-color-line);
	box-shadow: var(--ft-shadow-lg); z-index: 60; padding-block: clamp(1.25rem, 3vw, 2rem);
}
.ft-mega[hidden] { display: none; }
.ft-mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem 2rem; }
.ft-mega__head { display: block; font-family: var(--ft-font-serif); font-weight: 600; font-size: 1.05rem; color: var(--ft-color-heading); text-decoration: none; margin-block-end: 0.5rem; padding-block-end: 0.4rem; border-block-end: 2px solid var(--ft-color-accent); }
.ft-mega__sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ft-mega__sub a { color: var(--ft-color-muted); text-decoration: none; font-size: 0.92rem; }
.ft-mega__sub a:hover { color: var(--ft-color-link-hover); }

/* --- Breaking-news ticker ---------------------------------------------- */
.ft-ticker { background: var(--ft-color-bg); border-block-end: 1px solid var(--ft-color-line); overflow: hidden; }
.ft-ticker__inner { display: flex; align-items: center; gap: 1rem; min-height: 42px; }
.ft-ticker__label { flex: 0 0 auto; font-family: var(--ft-font-sans); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ft-color-on-brand); background: var(--ft-signal); padding: 0.25rem 0.6rem; border-radius: var(--ft-radius-sm); }
.ft-ticker__track { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; white-space: nowrap; }
.ft-ticker__list { display: inline-flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0; animation: ft-ticker 40s linear infinite; }
.ft-ticker__list a { color: var(--ft-color-text); text-decoration: none; font-size: 0.9rem; }
.ft-ticker__list a:hover { color: var(--ft-color-link-hover); }
.ft-ticker__track:hover .ft-ticker__list { animation-play-state: paused; }
@keyframes ft-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ft-ticker__list { animation: none; } }

/* --- Search overlay ----------------------------------------------------- */
.ft-search-overlay {
	position: fixed; inset: 0; z-index: 200; background: rgba(11,31,42,0.55);
	backdrop-filter: blur(2px); padding-block-start: clamp(2rem, 10vh, 6rem);
}
.ft-search-overlay[hidden] { display: none; }
.ft-search-overlay__inner { background: var(--ft-color-bg); border-radius: var(--ft-radius); padding: clamp(1rem, 3vw, 2rem); box-shadow: var(--ft-shadow-lg); display: flex; flex-direction: column; min-inline-size: 0; max-block-size: calc(100dvh - clamp(2rem, 10vh, 6rem) - 1.5rem); }
.ft-search-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ft-search-form__field { flex: 1 1 12rem; min-inline-size: 0; font-size: 1.1rem; padding: 0.75rem 1rem; border: 1px solid var(--ft-color-line); border-radius: var(--ft-radius-sm); background: var(--ft-color-bg); color: var(--ft-color-text); }
.ft-search-overlay__hint { color: var(--ft-color-muted); font-size: 0.85rem; margin-block: 0.75rem 0; }
.ft-search-results { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ft-search-results__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
.ft-search-results__item a { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: baseline; padding: 0.6rem 0.75rem; border-radius: var(--ft-radius-sm); text-decoration: none; color: var(--ft-color-text); }
.ft-search-results__item a:hover { background: var(--ft-color-surface); }
.ft-search-results__title { min-inline-size: 0; overflow-wrap: anywhere; }
.ft-search-results__type { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ft-color-on-brand); background: var(--ft-brand); padding: 0.1rem 0.4rem; border-radius: 999px; }
.ft-search-results__date { color: var(--ft-color-muted); font-size: 0.8rem; }
.ft-search-results__more { display: inline-block; margin-block-start: 0.75rem; font-weight: 600; }
.ft-search-results__empty { color: var(--ft-color-muted); }
/* Search modal on phones: full-height sheet, field on its own line, the
   redundant Search button hidden (live search + Enter already cover it), and a
   results list that wraps its date + scrolls instead of running off-screen. */
@media (max-width: 600px) {
	.ft-search-overlay { padding-block-start: 0; }
	.ft-search-overlay__inner { border-radius: 0; padding: 1rem; min-block-size: 100dvh; max-block-size: 100dvh; }
	.ft-search-form__field { flex: 1 1 auto; font-size: 1rem; padding: 0.65rem 0.85rem; }
	.ft-search-form .ft-btn { display: none; } /* live search + Enter cover submit; saves a row */
	.ft-search-results__item a { grid-template-columns: auto 1fr; column-gap: 0.5rem; row-gap: 0.15rem; }
	.ft-search-results__date { grid-column: 2; justify-self: start; }
}

/* --- WordPress admin bar offsets (logged-in users) ---------------------- */
/* The admin bar is fixed (32px) over the viewport, so the fixed/overlay UI
   must start below it. On <=782px it's 46px and scrolls away. */
body.admin-bar .ft-drawer { inset-block-start: 32px; }
body.admin-bar .ft-search-overlay { padding-block-start: calc(clamp(2rem, 10vh, 6rem) + 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar .ft-drawer { inset-block-start: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar .ft-search-overlay { padding-block-start: 46px; }
	body.admin-bar .ft-search-overlay__inner { min-block-size: calc(100dvh - 46px); max-block-size: calc(100dvh - 46px); }
}

/* --- Mobile drawer ------------------------------------------------------ */
.ft-drawer { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 190; inline-size: min(86vw, 360px); background: var(--ft-color-bg); border-inline-end: 1px solid var(--ft-color-line); box-shadow: var(--ft-shadow-lg); padding: 1.5rem; overflow-y: auto; }
.ft-drawer[hidden] { display: none; }
.ft-drawer__menu, .ft-drawer__menu .sub-menu, .ft-drawer__menu .ft-submenu { list-style: none; margin: 0; padding: 0; }
.ft-drawer__menu a { display: block; padding: 0.6rem 0; border-block-end: 1px solid var(--ft-color-line); text-decoration: none; color: var(--ft-color-text); }
.ft-burger { display: none; }
.ft-burger__bars, .ft-burger__bars::before, .ft-burger__bars::after { content: ""; display: block; inline-size: 20px; block-size: 2px; background: currentColor; position: relative; }
.ft-burger__bars::before { position: absolute; inset-block-start: -6px; }
.ft-burger__bars::after { position: absolute; inset-block-start: 6px; }

/* --- Breadcrumbs -------------------------------------------------------- */
.ft-breadcrumbs { margin-block: 1rem; font-size: 0.85rem; }
.ft-breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.ft-breadcrumbs__item { display: inline-flex; gap: 0.4rem; align-items: center; color: var(--ft-color-muted); }
.ft-breadcrumbs a { color: var(--ft-color-muted); text-decoration: none; }
.ft-breadcrumbs a:hover { color: var(--ft-color-link-hover); }
.ft-breadcrumbs [aria-current="page"] { color: var(--ft-color-text); }
.ft-breadcrumbs__sep { color: var(--ft-color-line); }

/* --- Editorial primitives: chip, meta, headings, grids ----------------- */
.ft-chip { display: inline-block; font-family: var(--ft-font-sans); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ft-brand-deep); background: var(--ft-color-surface-2); padding: 0.18rem 0.55rem; border-radius: 999px; text-decoration: none; }
.ft-chip:hover { background: var(--ft-brand); color: var(--ft-color-on-brand); }

.ft-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.85rem; align-items: center; font-family: var(--ft-font-sans); font-size: 0.78rem; color: var(--ft-color-muted); }
.ft-meta__author { font-weight: 600; color: var(--ft-color-text); }
.ft-meta__read::before { content: "·"; margin-inline-end: 0.5rem; color: var(--ft-color-line); }

.ft-section-heading { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); margin-block: 0 1rem; padding-block-end: 0.5rem; border-block-end: 2px solid var(--ft-color-ink, var(--ft-ink)); }
.ft-section-heading--sm { font-size: 1.15rem; }

.ft-grid { display: grid; gap: clamp(1.1rem, 2.5vw, 1.8rem); }
.ft-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.ft-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.ft-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

/* --- Disclosure labels -------------------------------------------------- */
.ft-disclosure { display: inline-block; font-family: var(--ft-font-sans); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.5rem; border-radius: var(--ft-radius-sm); margin: 0 0 0.5rem; }
.ft-disclosure--sponsored { color: #5a4500; background: #fbe6c2; border: 1px solid var(--ft-gold); }
.ft-disclosure--pr { color: var(--ft-color-muted); background: var(--ft-color-surface-2); }

/* --- Ad slots (CLS-safe fixed minimums) -------------------------------- */
.ft-ad { display: grid; place-items: center; margin-block: 1.5rem; background: var(--ft-color-surface); border: 1px dashed var(--ft-color-line); border-radius: var(--ft-radius-sm); }
.ft-ad__placeholder { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ft-color-muted); }
.ft-ad--leaderboard { min-block-size: 90px; }
.ft-ad--mpu { min-block-size: 250px; max-inline-size: 300px; margin-inline: auto; }
.ft-ad--incontent { min-block-size: 250px; }
.ft-ad--anchor { position: sticky; inset-block-end: 0; z-index: 80; min-block-size: 60px; margin: 0; }

/* --- Network footer ----------------------------------------------------- */
.ft-network { background: var(--ft-color-surface-2); border-block-start: 1px solid var(--ft-color-line); padding-block: 1.5rem; }
.ft-network__title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-color-muted); margin: 0 0 0.6rem; border: 0; padding: 0; }
.ft-network__list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; font-family: var(--ft-font-sans); }
.ft-network__list a { color: var(--ft-color-text); text-decoration: none; }
.ft-network__list a:hover { color: var(--ft-color-link-hover); }

.ft-footer__main { padding-block: clamp(2rem, 5vw, 3.5rem); }
.ft-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem 2.5rem; }
.ft-footer__menu--explore { flex-direction: column; gap: 0.55rem; }
.ft-footer__heading { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-color-muted); margin: 0 0 0.75rem; }
.ft-brand--footer { font-size: 1.2rem; }
.ft-footer__tagline { color: var(--ft-color-muted); font-size: 0.9rem; max-width: 32ch; }
.ft-footer__events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ft-footer__events a { display: grid; text-decoration: none; color: var(--ft-color-text); }
.ft-footer__event-date { font-size: 0.75rem; color: var(--ft-color-muted); }
.ft-footer__event-title { font-weight: 600; }
.ft-social { display: flex; gap: 0.5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.ft-social__link { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border: 1px solid var(--ft-color-line); border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: var(--ft-color-text); text-decoration: none; }
.ft-social__link:hover { background: var(--ft-brand); color: var(--ft-color-on-brand); border-color: var(--ft-brand); }
.ft-footer__bar { border-block-start: 1px solid var(--ft-color-line); padding-block: 1rem; }
.ft-footer__bar-inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.ft-footer__legal-menu, .ft-footer__menu { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; font-family: var(--ft-font-sans); }
.ft-footer__menu a, .ft-footer__legal-menu a { color: var(--ft-color-text); text-decoration: none; }
.ft-footer__menu a:hover, .ft-footer__legal-menu a:hover { color: var(--ft-color-link-hover); }

/* --- Render performance: skip off-screen work (content-visibility) ------
   Below-the-fold blocks are skipped by the renderer until near the viewport.
   contain-intrinsic-size reserves space so this never causes layout shift. */
.ft-sectionblock,
.ft-related,
.ft-home__columns,
.ft-newsletter,
.ft-footer {
	content-visibility: auto;
	contain-intrinsic-size: auto 480px;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
	.ft-primary-nav, .ft-btn--subscribe { display: none; }
	.ft-burger { display: inline-grid; }
	.ft-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.ft-utility-nav { display: none; }
	.ft-footer__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   ENHANCEMENTS — elevation, motion & micro-interactions
   Layered after the base rules above (later source order wins on ties). All
   motion is wrapped so prefers-reduced-motion users get a calm, static UI.
   ========================================================================= */

/* --- Elevation: raised surfaces use the dedicated --ft-color-elevated role so
   they lift off the page canvas in dark mode (in light it equals paper). ----- */
.ft-card,
.ft-eventcard,
.ft-companycard,
.ft-pricecard,
.ft-submenu,
.ft-mega,
.ft-search-overlay__inner,
.ft-drawer,
.ft-share__btn,
.ft-search-form__field,
.ft-field input,
.ft-field textarea,
.ft-field select { background: var(--ft-color-elevated); }

.ft-card { box-shadow: var(--ft-shadow-sm); }

/* --- Frosted masthead: let the blurred backdrop show through the rows -------- */
.ft-masthead__main,
.ft-utilitybar,
.ft-ticker { background: transparent; }
.ft-utilitybar { border-block-end: 1px solid var(--ft-color-line); }

/* --- Card hover: lift + slow image push-in --------------------------------- */
.ft-card { transition: box-shadow var(--ft-dur) var(--ft-ease), transform var(--ft-dur) var(--ft-ease), border-color var(--ft-dur) var(--ft-ease); }
.ft-card:hover { box-shadow: var(--ft-shadow-lg); transform: translateY(-3px); border-color: color-mix(in srgb, var(--ft-brand) 35%, var(--ft-color-line)); }
.ft-card__media img,
.ft-hero__media img { transition: transform 600ms var(--ft-ease-out); }
.ft-card:hover .ft-card__media img,
.ft-hero__media:hover img { transform: scale(1.05); }

/* --- Event / company / issue card hovers ----------------------------------- */
.ft-eventcard { transition: box-shadow var(--ft-dur) var(--ft-ease), transform var(--ft-dur) var(--ft-ease); }
.ft-eventcard:hover { box-shadow: var(--ft-shadow-md); transform: translateY(-2px); }
.ft-companycard { transition: box-shadow var(--ft-dur) var(--ft-ease), transform var(--ft-dur) var(--ft-ease); }
.ft-companycard:hover { transform: translateY(-2px); }

/* --- Buttons: hover lift, active press ------------------------------------- */
.ft-btn { transition: background var(--ft-dur) var(--ft-ease), box-shadow var(--ft-dur) var(--ft-ease), transform var(--ft-dur-fast) var(--ft-ease); }
.ft-btn:hover { box-shadow: var(--ft-shadow-md); transform: translateY(-1px); }
.ft-btn:active { transform: translateY(0) scale(0.985); box-shadow: var(--ft-shadow-sm); }

/* --- Icon buttons + theme toggle: settle on press -------------------------- */
.ft-iconbtn { transition: background var(--ft-dur) var(--ft-ease), color var(--ft-dur) var(--ft-ease), transform var(--ft-dur-fast) var(--ft-ease); }
.ft-iconbtn:active { transform: scale(0.92); }
.ft-theme-toggle__icon { transition: box-shadow var(--ft-dur-slow) var(--ft-ease), background var(--ft-dur-slow) var(--ft-ease), transform var(--ft-dur-slow) var(--ft-ease-out); }
[data-theme="dark"] .ft-theme-toggle__icon { transform: rotate(180deg); }

/* --- Chips / tags / share: spring on hover --------------------------------- */
.ft-chip,
.ft-tags a,
.ft-taxchips a { transition: background var(--ft-dur) var(--ft-ease), color var(--ft-dur) var(--ft-ease), transform var(--ft-dur-fast) var(--ft-ease); }
.ft-chip:hover,
.ft-tags a:hover { transform: translateY(-1px); }
.ft-share__btn { transition: background var(--ft-dur) var(--ft-ease), color var(--ft-dur) var(--ft-ease), transform var(--ft-dur-fast) var(--ft-ease), box-shadow var(--ft-dur) var(--ft-ease); }
.ft-share__btn:hover { transform: translateY(-2px); box-shadow: var(--ft-shadow-sm); }
.ft-social__link { transition: background var(--ft-dur) var(--ft-ease), color var(--ft-dur) var(--ft-ease), border-color var(--ft-dur) var(--ft-ease), transform var(--ft-dur-fast) var(--ft-ease); }
.ft-social__link:hover { transform: translateY(-2px); }

/* --- Primary nav: animated underline that grows from the start ------------- */
.ft-menu__link { position: relative; }
.ft-menu__link::after {
	content: ""; position: absolute; inset-block-end: -2px; inset-inline-start: 0;
	inline-size: 100%; block-size: 2px; background: var(--ft-brand);
	transform: scaleX(0); transform-origin: inline-start;
	transition: transform var(--ft-dur) var(--ft-ease-out);
}
.ft-menu__item:hover .ft-menu__link::after,
.ft-menu__link:focus-visible::after,
.ft-menu__item--current .ft-menu__link::after,
.current-menu-item > .ft-menu__link::after { transform: scaleX(1); }
.current-menu-item > .ft-menu__link { color: var(--ft-color-link-hover); }

/* --- Mega-menu + submenu: fade + slide down when opened -------------------- */
.ft-mega:not([hidden]) { animation: ft-fade-down var(--ft-dur) var(--ft-ease-out); }
.ft-menu__item--has-children .ft-submenu { animation: ft-fade-down var(--ft-dur) var(--ft-ease-out); }
.ft-mega__col { animation: ft-fade-up var(--ft-dur-slow) var(--ft-ease-out) both; }
.ft-mega__head { transition: border-color var(--ft-dur) var(--ft-ease); }
.ft-mega__sub a { transition: color var(--ft-dur) var(--ft-ease), padding-inline-start var(--ft-dur) var(--ft-ease); }
.ft-mega__sub a:hover { padding-inline-start: 0.35rem; }

/* --- Search overlay: backdrop fade + panel pop ----------------------------- */
.ft-search-overlay:not([hidden]) { animation: ft-fade var(--ft-dur) var(--ft-ease); }
.ft-search-overlay:not([hidden]) .ft-search-overlay__inner { animation: ft-pop var(--ft-dur-slow) var(--ft-ease-out); }
.ft-search-results__item a { transition: background var(--ft-dur) var(--ft-ease), transform var(--ft-dur-fast) var(--ft-ease); }
.ft-search-results__item a:hover { transform: translateX(3px); }

/* --- Mobile drawer + shared scrim ------------------------------------------ */
.ft-drawer:not([hidden]) { animation: ft-drawer-in var(--ft-dur-slow) var(--ft-ease-out); }
.ft-scrim {
	position: fixed; inset: 0; z-index: 180;
	background: color-mix(in srgb, var(--ft-ink) 55%, transparent);
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
	border: 0; padding: 0; margin: 0; cursor: pointer;
	animation: ft-fade var(--ft-dur) var(--ft-ease);
}
.ft-scrim[hidden] { display: none; }

/* --- Reading-progress + condensed masthead --------------------------------- */
.ft-masthead__inner { transition: min-height var(--ft-dur) var(--ft-ease); }

/* --- Scroll-reveal: JS adds .ft-reveal, then .is-in when in view ------------ */
@media (prefers-reduced-motion: no-preference) {
	.js .ft-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--ft-dur-slow) var(--ft-ease-out), transform var(--ft-dur-slow) var(--ft-ease-out); will-change: opacity, transform; }
	.js .ft-reveal.is-in { opacity: 1; transform: none; }
}

/* --- Back-to-top floating button ------------------------------------------- */
.ft-to-top {
	position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 120;
	inline-size: 44px; block-size: 44px; display: grid; place-items: center;
	background: var(--ft-brand); color: var(--ft-color-on-brand);
	border: 0; border-radius: var(--ft-radius-pill); cursor: pointer;
	box-shadow: var(--ft-shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.9);
	transition: opacity var(--ft-dur) var(--ft-ease), transform var(--ft-dur) var(--ft-ease-out), visibility var(--ft-dur), background var(--ft-dur) var(--ft-ease);
}
.ft-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.ft-to-top:hover { background: var(--ft-brand-deep); transform: translateY(-2px); }
.ft-to-top:active { transform: scale(0.92); }
.ft-to-top__arrow { inline-size: 11px; block-size: 11px; border-block-start: 2px solid currentColor; border-inline-start: 2px solid currentColor; transform: translateY(2px) rotate(45deg); }

/* --- Keyframes ------------------------------------------------------------- */
@keyframes ft-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ft-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ft-fade-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes ft-pop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ft-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.ft-mega:not([hidden]),
	.ft-submenu,
	.ft-mega__col,
	.ft-search-overlay:not([hidden]),
	.ft-search-overlay:not([hidden]) .ft-search-overlay__inner,
	.ft-drawer:not([hidden]),
	.ft-scrim { animation: none; }
	.ft-card:hover,
	.ft-eventcard:hover,
	.ft-btn:hover,
	.ft-companycard:hover { transform: none; }
	.ft-card:hover .ft-card__media img,
	.ft-hero__media:hover img { transform: none; }
	.ft-theme-toggle__icon,
	[data-theme="dark"] .ft-theme-toggle__icon { transform: none; }
}

/* Footer: brand accent rule along the top edge. */
.ft-footer { position: relative; }
.ft-footer::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px; background: linear-gradient(90deg, var(--ft-brand), var(--ft-accent) 50%, var(--ft-gold)); }
.ft-footer__col--explore .ft-footer__menu a { display: inline-block; transition: transform var(--ft-dur) var(--ft-ease-out), color var(--ft-dur) var(--ft-ease); }
.ft-footer__col--explore .ft-footer__menu a:hover { transform: translateX(3px); }

/* --- Admin-controlled header / ad-manager support -------------------------- */
.ft-masthead--static { position: static; }
.ft-ad__creative { display: grid; place-items: center; inline-size: 100%; }
.ft-ad__creative img { max-inline-size: 100%; height: auto; border-radius: var(--ft-radius-sm); }
.ft-ad--leaderboard .ft-ad__creative img { max-block-size: 120px; width: auto; }
@media (max-width: 600px) { .ft-ad--desktop-only { display: none !important; } }
@media (min-width: 601px) { .ft-ad--mobile-only { display: none !important; } }

/* =========================================================================
   Lucide icons: social links, menu chevrons, view toggle, calendar nav
   ========================================================================= */

/* Social profile icons (footer, topbar, drawer) */
.ft-social__link svg { inline-size: 18px; block-size: 18px; }
.ft-social__link { transition: background var(--ft-dur) var(--ft-ease), color var(--ft-dur) var(--ft-ease), border-color var(--ft-dur) var(--ft-ease), transform var(--ft-dur-fast) var(--ft-ease); }
.ft-social__link:hover { background: var(--ft-social-color, var(--ft-brand)); border-color: var(--ft-social-color, var(--ft-brand)); color: #fff; transform: translateY(-2px); }

/* Topbar variant — compact, borderless, tinted on hover. */
.ft-social--bar { gap: 0.15rem; margin: 0; }
.ft-social--bar .ft-social__link { inline-size: 30px; block-size: 30px; border-color: transparent; color: var(--ft-color-muted); }
.ft-social--bar .ft-social__link svg { inline-size: 16px; block-size: 16px; }
.ft-social--bar .ft-social__link:hover { color: #fff; }

/* Drawer variant — full-size row at the bottom of the mobile menu. */
.ft-drawer__social { margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--ft-color-line); }

/* Keep the crowded topbar clean on small screens (drawer carries social there). */
/* Keep the social icons in the utility bar on small screens — once the utility
   nav collapses, push them to the left so the bar isn't lopsided with only the
   search + theme toggle floating on the right. */
@media (max-width: 600px) {
	.ft-utilitybar__inner { gap: 0.5rem; }
	.ft-utilitybar__actions { margin-inline-start: 0; flex: 1 1 auto; }
	.ft-utilitybar__actions .ft-social--bar { margin-inline-end: auto; }
}
@media (max-width: 380px) {
	.ft-social--bar { gap: 0; }
	.ft-social--bar .ft-social__link { inline-size: 26px; block-size: 26px; }
}

/* Menu disclosure chevron (replaces the old CSS caret). */
.ft-menu__chevron { transition: transform var(--ft-dur) var(--ft-ease); }
.ft-menu__toggle[aria-expanded="true"] .ft-menu__chevron { transform: rotate(180deg); }

/* View toggle + calendar nav icons. */
.ft-viewtoggle__btn svg { inline-size: 16px; block-size: 16px; }
.ft-cal__nav svg { inline-size: 20px; block-size: 20px; }
.ft-cal__nav { font-size: 0; }

/* =========================================================================
   Event card (shared component: homepage "Upcoming Events" + events archive)
   ========================================================================= */
.ft-eventcard { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; background: var(--ft-color-elevated); border: 1px solid var(--ft-color-line); border-radius: var(--ft-radius); padding: 1rem 1.25rem; }
.ft-eventcard__date { display: grid; place-items: center; text-align: center; background: var(--ft-brand); color: var(--ft-color-on-brand); border-radius: var(--ft-radius-sm); padding: 0.5rem 0.6rem; line-height: 1; min-inline-size: 3.25rem; }
.ft-eventcard__day { font-size: 1.5rem; font-weight: 700; font-family: var(--ft-font-serif); }
.ft-eventcard__mon { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; margin-block-start: 0.15rem; }
.ft-eventcard__title { font-size: 1.05rem; margin: 0 0 0.2rem; }
.ft-eventcard__title a { color: var(--ft-color-heading); text-decoration: none; }
.ft-eventcard__title a:hover { color: var(--ft-color-link-hover); }
.ft-eventcard__loc { margin: 0; color: var(--ft-color-muted); font-size: 0.85rem; }

/* =========================================================================
   "More" overflow menu + site-wide microanimation fill-in
   (prefers-reduced-motion is handled globally in critical.css, which zeroes
   transition/animation durations — so these are safe everywhere.)
   ========================================================================= */

/* Priority+ overflow item */
.ft-menu__item--more { position: relative; }
.ft-menu__more-btn { background: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--ft-color-text); display: inline-flex; align-items: center; gap: 0.25rem; padding-block: 0.5rem; }
.ft-menu__item--more .ft-submenu { inset-inline-start: auto; inset-inline-end: 0; min-inline-size: 200px; }

/* Submenu items (native + moved-into-More) */
.ft-submenu .ft-menu__item { display: block; }
.ft-submenu .ft-menu__link { display: block; padding: 0.45rem 1rem; font-weight: 500; color: var(--ft-color-text); }
.ft-submenu .ft-menu__link::after { display: none; }
.ft-submenu .ft-menu__toggle { display: none; }
.ft-submenu a, .ft-submenu .ft-menu__link { transition: background var(--ft-dur) var(--ft-ease), color var(--ft-dur) var(--ft-ease), padding-inline-start var(--ft-dur) var(--ft-ease); }
.ft-submenu a:hover, .ft-submenu .ft-menu__link:hover { background: var(--ft-color-surface); color: var(--ft-color-link-hover); padding-inline-start: 1.25rem; }

/* Text links that only had a color change — give them a smooth transition. */
.ft-breadcrumbs a, .ft-utility-menu a, .ft-footer__menu a, .ft-footer__legal-menu a,
.ft-network__list a, .ft-authorbox__links a, .ft-exec__links a, .ft-facts dd a,
.ft-issuecard__title a, .ft-companycard__name, .ft-brand__link, .ft-section-more,
.ft-rank__link, .ft-mega__head { transition: color var(--ft-dur) var(--ft-ease); }
.ft-brand__link:hover { opacity: 0.85; }
.ft-mega__head:hover { color: var(--ft-color-link-hover); }

/* Pagination */
.pagination .page-numbers { transition: background var(--ft-dur) var(--ft-ease), color var(--ft-dur) var(--ft-ease), border-color var(--ft-dur) var(--ft-ease), transform var(--ft-dur-fast) var(--ft-ease); }
.pagination .page-numbers:hover { transform: translateY(-2px); border-color: var(--ft-brand); }

/* Table of contents */
.ft-toc__item a { transition: color var(--ft-dur) var(--ft-ease), padding-inline-start var(--ft-dur) var(--ft-ease); }
.ft-toc__item a:hover, .ft-toc__item a.is-active { padding-inline-start: 0.3rem; }

/* Tags / chips */
.ft-tags a, .ft-taxchips a { transition: background var(--ft-dur) var(--ft-ease), color var(--ft-dur) var(--ft-ease), transform var(--ft-dur-fast) var(--ft-ease); }
.ft-tags a:hover, .ft-taxchips a:hover { transform: translateY(-1px); }

/* Company + pricing cards: lift on hover */
.ft-companycard { transition: box-shadow var(--ft-dur) var(--ft-ease), transform var(--ft-dur) var(--ft-ease), border-color var(--ft-dur) var(--ft-ease); }
.ft-companycard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ft-brand) 30%, var(--ft-color-line)); }
.ft-pricecard { transition: box-shadow var(--ft-dur) var(--ft-ease), transform var(--ft-dur) var(--ft-ease), border-color var(--ft-dur) var(--ft-ease); }
.ft-pricecard:hover { transform: translateY(-3px); box-shadow: var(--ft-shadow-md); }

/* Form fields: branded focus ring */
.ft-field input, .ft-field textarea, .ft-field select, .search-field,
.ft-search-form__field, .ft-newsletter__field, .ft-gate__form input,
.ft-companydir__search input { transition: border-color var(--ft-dur) var(--ft-ease), box-shadow var(--ft-dur) var(--ft-ease); }
.ft-field input:focus, .ft-field textarea:focus, .ft-field select:focus, .search-field:focus,
.ft-search-form__field:focus, .ft-gate__form input:focus {
	outline: none; border-color: var(--ft-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ft-brand) 22%, transparent);
}

/* Rate-card rows */
.ft-ratecard__table tbody tr { transition: background var(--ft-dur) var(--ft-ease); }
.ft-ratecard__table tbody tr:hover { background: var(--ft-color-surface); }

/* Breadcrumb + meta links resolve to the hover colour */
.ft-breadcrumbs a:hover, .ft-network__list a:hover, .ft-authorbox__links a:hover,
.ft-exec__links a:hover, .ft-facts dd a:hover { color: var(--ft-color-link-hover); }

/* =========================================================================
   Header top strip (utility bar + ticker) — normal flow, scrolls away.
   Only .ft-masthead (the nav row) is sticky, so the sticky element's height is
   constant → no collapse flicker. Replaces the old JS condense behaviour.
   ========================================================================= */
.ft-topstrip { position: relative; z-index: 90; background: var(--ft-color-surface); }
.ft-topstrip .ft-utilitybar,
.ft-topstrip .ft-ticker { background: transparent; }

/* Optional ad zones (below-header, footer billboard) spacing. */
.ft-zone { margin-block: clamp(1rem, 3vw, 1.75rem); }
.ft-zone--belowheader { margin-block-start: clamp(1rem, 3vw, 1.5rem); }