/**
 * FCSA Tax Watch — named-schemes table.
 *
 * BRANDING. Colours and type are pulled from Elementor's global palette
 * first and fall back to FCSA's hexes, matching the convention already used
 * by the portal stylesheets (includes/snippets/assets/css/fcsa-*.css). That
 * way a change to the site's palette carries through here without a deploy.
 *
 * The live palette on fcsa.org.uk, read off the rendered page:
 *
 *   --e-global-color-accent     #F05A29   FCSA orange (the signature)
 *   --e-global-color-primary    #F79239   amber
 *   --e-global-color-secondary  #171717   near-black
 *   --e-global-color-text       #171717
 *   typography primary          Montserrat
 *
 * Note the portal stylesheets assume `primary` is the orange. On the live
 * site it is not — `accent` is orange and `primary` is the amber. The
 * fallbacks below follow the live values, so this file resolves correctly
 * whether or not Elementor's variables are present.
 *
 * CONTRAST. FCSA's own components put DARK text on orange rather than white
 * (see the portal tab buttons), which is the accessible choice: #171717 on
 * #F05A29 is about 7:1, whereas white on that orange is only ~3.4:1 and
 * fails WCAG AA for body text. This file follows that convention — orange
 * and amber carry backgrounds, borders and rules; text stays ink.
 *
 * Bump FCSA_TAX_WATCH_VERSION when this file changes or browsers will serve
 * the old copy.
 */

.fcsa-tw {
	/* Brand tokens ---------------------------------------------------- */
	--fcsa-tw-orange: var( --fcsa-color-primary, var( --e-global-color-accent, #f05a29 ) );
	--fcsa-tw-amber: var( --e-global-color-primary, #f79239 );
	--fcsa-tw-ink: var( --fcsa-color-text, var( --e-global-color-text, #171717 ) );
	/* Montserrat is named literally and FIRST, not behind a var() chain.
	   Nested var() fallbacks are all-or-nothing: if the referenced custom
	   property resolves to anything the parser dislikes, the whole
	   declaration is dropped and the element silently falls back to the
	   browser default — which is a serif. Elementor's own token is listed
	   after it, so a site-level override still wins where it is set, but
	   the brand font can no longer be lost. */
	--fcsa-tw-font: 'Montserrat', var( --e-global-typography-primary-font-family, 'Montserrat' ), 'Segoe UI', Arial, sans-serif;

	/* Neutrals -------------------------------------------------------- */
	--fcsa-tw-muted: #5b5b5b;
	--fcsa-tw-border: #e3e3e3;
	--fcsa-tw-rule: #efefef;
	--fcsa-tw-surface: #ffffff;
	--fcsa-tw-surface-alt: #fbfaf9;

	/* States ---------------------------------------------------------- */
	--fcsa-tw-named-bg: #fdeee7;
	--fcsa-tw-removed-bg: #f2f2f2;
	--fcsa-tw-removed-fg: #5b5b5b;

	--fcsa-tw-radius: 15px;

	font-family: var( --fcsa-tw-font );
	color: var( --fcsa-tw-ink );
	margin: 0 0 2rem;
}

/* Form controls do NOT inherit font-family from their ancestors — the UA
   stylesheet sets its own. Without this the search box and every button
   render in the browser default while the table around them is Montserrat. */
.fcsa-tw input,
.fcsa-tw button,
.fcsa-tw select,
.fcsa-tw table,
.fcsa-tw th,
.fcsa-tw td {
	font-family: var( --fcsa-tw-font );
}

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

/* Controls ------------------------------------------------------------ */

.fcsa-tw__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem 1.25rem;
	margin-bottom: 1.25rem;
}

.fcsa-tw__search-label {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 0.4rem;
	letter-spacing: 0.01em;
}

.fcsa-tw__search {
	width: 100%;
	max-width: 26rem;
	padding: 0.7rem 0.9rem;
	font-family: inherit;
	font-size: 1rem;
	color: var( --fcsa-tw-ink );
	background: var( --fcsa-tw-surface );
	border: 2px solid var( --fcsa-tw-border );
	border-radius: var( --fcsa-tw-radius );
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fcsa-tw__search:focus {
	outline: none;
	border-color: var( --fcsa-tw-orange );
	box-shadow: 0 0 0 3px rgba( 240, 90, 41, 0.18 );
}

/* Hidden until the script has enhanced the table — a search box that does
   nothing is worse than no search box. */
.fcsa-tw:not( .fcsa-tw--enhanced ) .fcsa-tw__controls {
	display: none;
}

.fcsa-tw__count {
	margin: 0;
	padding-bottom: 0.65rem;
	color: var( --fcsa-tw-muted );
	font-size: 0.9rem;
}

/* Table --------------------------------------------------------------- */

.fcsa-tw__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var( --fcsa-tw-border );
	border-radius: var( --fcsa-tw-radius );
	background: var( --fcsa-tw-surface );
}

.fcsa-tw__table {
	width: 100%;
	min-width: 44rem;
	border-collapse: collapse;
	font-size: 0.95rem;
}

/* Header: ONE continuous orange-to-amber sweep across the whole row.
   Putting the gradient on each <th> restarts it per cell, so a five-column
   table renders five little gradients rather than one — visibly banded and
   nothing like the site's buttons. The gradient goes on the row; the cells
   stay transparent and are separated by grey rules instead. */
.fcsa-tw__table thead tr {
	background: linear-gradient( 90deg, var( --fcsa-tw-orange ) 0%, var( --fcsa-tw-amber ) 100% );
}

.fcsa-tw__th {
	position: sticky;
	top: 0;
	z-index: 1;
	text-align: left;
	padding: 0;
	white-space: nowrap;
	color: var( --fcsa-tw-ink );
	background: transparent;
	border-right: 1px solid rgba( 23, 23, 23, 0.16 );
}

.fcsa-tw__th:last-child {
	border-right: 0;
}

.fcsa-tw__th:not( :has( .fcsa-tw__sort ) ) {
	padding: 0.85rem 0.9rem;
	font-weight: 700;
}

.fcsa-tw__sort {
	display: block;
	width: 100%;
	padding: 0.85rem 1.6rem 0.85rem 0.9rem;
	background: transparent;
	border: 0;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: inherit;
	text-align: left;
	cursor: pointer;
	position: relative;
}

.fcsa-tw__sort::after {
	content: "\2195";
	position: absolute;
	right: 0.6rem;
	opacity: 0.45;
	font-weight: 400;
}

.fcsa-tw__th[ aria-sort="ascending" ] .fcsa-tw__sort::after {
	content: "\2191";
	opacity: 1;
}

.fcsa-tw__th[ aria-sort="descending" ] .fcsa-tw__sort::after {
	content: "\2193";
	opacity: 1;
}

.fcsa-tw__sort:focus-visible {
	outline: 2px solid var( --fcsa-tw-ink );
	outline-offset: -3px;
}

.fcsa-tw__row:nth-of-type( even ) {
	background: var( --fcsa-tw-surface-alt );
}

.fcsa-tw__row:hover {
	background: var( --fcsa-tw-named-bg );
}

.fcsa-tw__cell {
	padding: 0.8rem 0.9rem;
	border-bottom: 1px solid var( --fcsa-tw-rule );
	vertical-align: top;
	text-align: left;
	font-weight: 400;
}

.fcsa-tw__cell--date,
.fcsa-tw__cell--number {
	white-space: nowrap;
	color: var( --fcsa-tw-muted );
}

.fcsa-tw__cell--number {
	font-variant-numeric: tabular-nums;
}

.fcsa-tw__cell--name {
	font-weight: 700;
	color: var( --fcsa-tw-ink );
}

.fcsa-tw__none {
	color: #9a9a9a;
}

/* Status badges ------------------------------------------------------- */

.fcsa-tw__badge {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Orange, not green: "currently named by HMRC" is a warning, and a green
   badge next to a named tax-avoidance promoter reads as approval. */
.fcsa-tw__badge--current {
	background: var( --fcsa-tw-named-bg );
	color: #8a2c06;
	border: 1px solid rgba( 240, 90, 41, 0.35 );
}

.fcsa-tw__badge--removed {
	background: var( --fcsa-tw-removed-bg );
	color: var( --fcsa-tw-removed-fg );
	border: 1px solid #dcdcdc;
}

/* An entry HMRC has dropped but FCSA keeps. Muted, never hidden — showing
   these is the whole point of the archive. */
.fcsa-tw__row--removed .fcsa-tw__cell--name {
	color: var( --fcsa-tw-muted );
	font-weight: 600;
}

/* Detail rows --------------------------------------------------------- */

.fcsa-tw__cell--toggle {
	width: 3rem;
	text-align: right;
}

.fcsa-tw__toggle {
	background: var( --fcsa-tw-surface );
	border: 2px solid var( --fcsa-tw-border );
	border-radius: 999px;
	cursor: pointer;
	padding: 0.3rem 0.5rem;
	line-height: 1;
	color: var( --fcsa-tw-ink );
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.fcsa-tw__toggle:hover,
.fcsa-tw__toggle[ aria-expanded="true" ] {
	border-color: var( --fcsa-tw-orange );
	background: var( --fcsa-tw-named-bg );
}

.fcsa-tw__toggle:focus-visible {
	outline: 2px solid var( --fcsa-tw-orange );
	outline-offset: 2px;
}

.fcsa-tw__chevron::before {
	content: "\25BC";
	display: inline-block;
	font-size: 0.65rem;
	transition: transform 0.15s ease;
}

.fcsa-tw__toggle[ aria-expanded="true" ] .fcsa-tw__chevron::before {
	transform: rotate( 180deg );
}

.fcsa-tw__detail {
	padding: 1.1rem 1rem 1.35rem;
	background: var( --fcsa-tw-surface-alt );
	border-bottom: 1px solid var( --fcsa-tw-rule );
	border-left: 4px solid var( --fcsa-tw-orange );
}

.fcsa-tw__detail-item {
	margin: 0 0 0.9rem;
	max-width: 62ch;
	line-height: 1.55;
}

.fcsa-tw__detail-item:last-child {
	margin-bottom: 0;
}

.fcsa-tw__detail-item strong {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --fcsa-tw-muted );
}

.fcsa-tw__detail a {
	color: #8a2c06;
	text-decoration: underline;
}

.fcsa-tw__detail a:hover {
	color: var( --fcsa-tw-orange );
}

/* FCSA-style button ---------------------------------------------------- */

/* Matches the site's own .fcsa-portal-btn / .fcsa-member-btn: the
   orange-to-amber gradient, ink text, 3px radius, and a reversed gradient
   on hover. */
.fcsa-tw__btn {
	display: inline-block;
	background: linear-gradient( 90deg, var( --fcsa-tw-orange ) 0%, var( --fcsa-tw-amber ) 100% );
	color: var( --fcsa-tw-ink );
	padding: 8px 14px;
	font-family: var( --fcsa-tw-font );
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
}

.fcsa-tw__btn:hover,
.fcsa-tw__btn:focus {
	background: linear-gradient( 90deg, var( --fcsa-tw-amber ) 0%, var( --fcsa-tw-orange ) 100% );
	color: var( --fcsa-tw-ink );
	text-decoration: none;
	box-shadow: 2px 2px 6px 0 rgba( 0, 0, 0, 0.5 );
}

.fcsa-tw__btn:focus-visible {
	outline: 2px solid var( --fcsa-tw-ink );
	outline-offset: 2px;
}

/* The detail panel's link-coloured rule must not repaint the button. */
.fcsa-tw__detail a.fcsa-tw__btn {
	color: var( --fcsa-tw-ink );
	text-decoration: none;
}

/* Pagination ---------------------------------------------------------- */

.fcsa-tw__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 1.25rem;
}

.fcsa-tw__page {
	min-width: 2.4rem;
	padding: 0.45rem 0.75rem;
	border: 2px solid var( --fcsa-tw-border );
	background: var( --fcsa-tw-surface );
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var( --fcsa-tw-ink );
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.fcsa-tw__page:hover:not( [ disabled ] ):not( .is-current ) {
	border-color: var( --fcsa-tw-orange );
}

.fcsa-tw__page.is-current {
	background: linear-gradient( 90deg, var( --fcsa-tw-orange ) 0%, var( --fcsa-tw-amber ) 100% );
	border-color: transparent;
	color: var( --fcsa-tw-ink );
}

.fcsa-tw__page:focus-visible {
	outline: 2px solid var( --fcsa-tw-orange );
	outline-offset: 2px;
}

.fcsa-tw__page[ disabled ] {
	opacity: 0.4;
	cursor: default;
}

/* Footnotes ----------------------------------------------------------- */

.fcsa-tw__no-results,
.fcsa-tw__empty {
	padding: 1.5rem 1rem;
	color: var( --fcsa-tw-muted );
	background: var( --fcsa-tw-surface-alt );
	border: 1px dashed var( --fcsa-tw-border );
	border-radius: var( --fcsa-tw-radius );
	text-align: center;
}

.fcsa-tw__meta {
	margin-top: 1.1rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var( --fcsa-tw-muted );
}

.fcsa-tw__meta a {
	color: #8a2c06;
}

/* Generated post bodies ----------------------------------------------- */

/* The "named 20 August 2026" note after each name in a full-list post.
   Lives in post_content, so it is styled here rather than by the theme. */
.fcsa-tw-named-on {
	color: #5b5b5b;
	font-size: 0.85em;
	white-space: nowrap;
}

/* Update index -------------------------------------------------------- */

.fcsa-tw-updates {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	font-family: var( --e-global-typography-primary-font-family, 'Montserrat', 'Segoe UI', Arial, sans-serif );
}

.fcsa-tw-updates li {
	padding: 0.65rem 0;
	border-bottom: 1px solid #e3e3e3;
}

.fcsa-tw-updates a {
	font-weight: 600;
	color: #171717;
	text-decoration: none;
	border-bottom: 2px solid var( --e-global-color-accent, #f05a29 );
}

.fcsa-tw-updates a:hover {
	color: #8a2c06;
}

.fcsa-tw-updates__date {
	color: #5b5b5b;
	font-size: 0.85rem;
	margin-left: 0.5rem;
}

/* Small screens ------------------------------------------------------- */

@media ( max-width: 640px ) {
	.fcsa-tw__table {
		font-size: 0.9rem;
		min-width: 38rem;
	}

	.fcsa-tw__cell {
		padding: 0.6rem 0.55rem;
	}

	.fcsa-tw__search {
		max-width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.fcsa-tw *,
	.fcsa-tw *::before {
		transition: none !important;
	}
}