/* ==========================================================================
   Europe Casino Club - 2026 design system
   Loaded only when ecc_active(). All colour pairs meet WCAG AA (4.5:1 text,
   3:1 large text); the pairings are noted where they are not obvious.
   ========================================================================== */

:root {
	/* Brand */
	--ecc-navy:      #0A1024;   /* on gold  10.4:1 | on white 18.1:1 */
	--ecc-navy-2:    #121A36;
	--ecc-navy-3:    #1C2650;
	--ecc-gold:      #E9B949;
	--ecc-gold-2:    #F6D98A;
	--ecc-gold-3:    #C99A2E;

	/* Surfaces */
	--ecc-bg:        #F5F6FA;
	--ecc-card:      #FFFFFF;
	--ecc-line:      #E1E5EE;
	--ecc-line-2:    #CED5E3;

	/* Text */
	--ecc-ink:       #101828;   /* on white 16.9:1 */
	--ecc-ink-2:     #47536B;   /* on white  7.6:1 */
	--ecc-ink-3:     #667085;   /* on white  4.9:1 - smallest size used is 13px */
	--ecc-on-dark:   #FFFFFF;
	--ecc-on-dark-2: #B9C2D8;   /* on --ecc-navy 9.4:1 */

	/* Score bands - the bar colours are decorative, the figure is always shown */
	--ecc-exc:       #0E7C4A;   /* on white 5.3:1 */
	--ecc-good:      #1D6FB8;   /* on white 5.0:1 */
	--ecc-fair:      #8A5A00;   /* on white 5.9:1 */
	--ecc-basic:     #5B6577;   /* on white 6.1:1 */

	--ecc-radius:    16px;
	--ecc-radius-sm: 10px;
	--ecc-shadow:    0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.18);
	--ecc-shadow-lg: 0 2px 4px rgba(16,24,40,.06), 0 24px 48px -20px rgba(10,16,36,.35);
	--ecc-wrap:      1200px;
	--ecc-display:   "Outfit", ui-sans-serif, system-ui, sans-serif;
	--ecc-text:      "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------- shell -- */

body.ecc {
	background: var(--ecc-bg);
	color: var(--ecc-ink);
	font-family: var(--ecc-text);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
}
body.ecc .site-content,
body.ecc .site.grid-container,
body.ecc .inside-article { background: transparent; }
body.ecc .site-content { padding: 0; }
body.ecc .entry-content > * { margin-inline: auto; }

.ecc-wrap {
	width: 100%;
	max-width: var(--ecc-wrap);
	margin-inline: auto;
	padding-inline: 20px;
}

body.ecc h1, body.ecc h2, body.ecc h3, body.ecc h4 {
	font-family: var(--ecc-display);
	color: var(--ecc-ink);
	line-height: 1.15;
	letter-spacing: -.015em;
	text-transform: none;
	text-align: left;
	font-weight: 700;
}
body.ecc h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; }
body.ecc h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-block: 2.2rem .8rem; }
body.ecc h3 { font-size: 1.2rem; }
body.ecc p  { text-align: left; }
body.ecc a  { color: #1B4FA8; text-decoration-thickness: 1px; text-underline-offset: 2px; }
body.ecc a:hover { color: var(--ecc-navy); }

/* The old rules are scoped hard to the table; neutralise them here. */
body.ecc .ecc-list tr, body.ecc .ecc-list td { all: unset; }

/* ------------------------------------------------------------- strip --- */

.ecc-strip {
	background: var(--ecc-navy);
	color: var(--ecc-on-dark-2);
	font-size: 13px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.ecc-strip .ecc-wrap {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
}
.ecc-strip__item { display: inline-flex; align-items: center; gap: 8px; }
.ecc-strip__item strong {
	background: var(--ecc-gold);
	color: var(--ecc-navy);          /* 10.4:1 */
	font-family: var(--ecc-display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .04em;
	padding: 2px 6px;
	border-radius: 4px;
}

/* ------------------------------------------------------------ header --- */

.ecc-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(10,16,36,.94);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid rgba(233,185,73,.22);
}
.ecc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 74px;
}
.ecc-header__brand { display: inline-flex; align-items: center; }
.ecc-logo svg { display: block; height: 44px; width: auto; }
.ecc-logo--footer svg { height: 52px; }

.ecc-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ecc-nav__list li { position: relative; }
.ecc-nav__list a {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--ecc-on-dark);        /* 15.6:1 on navy */
	font-family: var(--ecc-display);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}
.ecc-nav__list a:hover,
.ecc-nav__list .current-menu-item > a {
	background: rgba(233,185,73,.14);
	color: var(--ecc-gold-2);         /* 9.9:1 on navy */
}
.ecc-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--ecc-navy-2);
	border: 1px solid rgba(233,185,73,.22);
	border-radius: 12px;
	padding: 6px;
	list-style: none;
	margin: 6px 0 0;
	box-shadow: var(--ecc-shadow-lg);
	display: none;
	flex-direction: column;
	align-items: stretch;
}
.ecc-nav__list li:hover > .sub-menu,
.ecc-nav__list li:focus-within > .sub-menu { display: flex; }

.ecc-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 9px;
	padding: 11px 10px;
	cursor: pointer;
}
.ecc-burger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; }

/* -------------------------------------------------------------- hero --- */

.ecc-hero {
	position: relative;
	background:
		radial-gradient(900px 420px at 78% -10%, rgba(233,185,73,.20), transparent 60%),
		radial-gradient(700px 400px at 12% 120%, rgba(28,38,80,.85), transparent 65%),
		linear-gradient(180deg, var(--ecc-navy-2) 0%, var(--ecc-navy) 100%);
	color: var(--ecc-on-dark);
	overflow: hidden;
}
.ecc-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(233,185,73,.55), transparent);
}
.ecc-hero__inner { padding: clamp(46px, 7vw, 86px) 20px clamp(52px, 7vw, 84px); }
.ecc-hero__kicker {
	font-family: var(--ecc-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ecc-gold);           /* 8.4:1 on navy */
	margin: 0 0 14px;
}
body.ecc .ecc-hero__title {
	color: var(--ecc-on-dark);
	margin: 0 0 18px;
	max-width: 17ch;
}
.ecc-hero__title em {
	font-style: normal;
	color: var(--ecc-gold-2);
}
.ecc-hero__title--sm { font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: none; }
.ecc-hero__lede {
	max-width: 58ch;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	color: var(--ecc-on-dark-2);
	margin: 0 0 30px;
}
.ecc-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.ecc-hero__stats li {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 12px;
	padding: 12px 18px;
	min-width: 130px;
}
.ecc-hero__stats strong {
	display: block;
	font-family: var(--ecc-display);
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--ecc-gold-2);
	line-height: 1.1;
}
.ecc-hero__stats span { font-size: 13px; color: var(--ecc-on-dark-2); }
.ecc-hero__jump {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ecc-navy);
	background: linear-gradient(180deg, var(--ecc-gold-2), var(--ecc-gold));
	font-family: var(--ecc-display);
	font-weight: 700;
	font-size: 16px;
	padding: 13px 24px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 10px 24px -12px rgba(233,185,73,.9);
}
.ecc-hero__jump::after { content: "\2193"; }
.ecc-hero__jump:hover { color: var(--ecc-navy); filter: brightness(1.06); }

/* single casino hero */
.ecc-sitehero { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.ecc-sitehero__logo {
	flex: 0 0 auto;
	width: 148px;
	height: 148px;
	background: #fff;
	border-radius: 20px;
	display: grid;
	place-items: center;
	padding: 14px;
	box-shadow: var(--ecc-shadow-lg);
}
.ecc-sitehero__logo img { max-width: 100%; height: auto; }
.ecc-sitehero__body { flex: 1 1 380px; }
.ecc-sitehero__meta { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.ecc-sitehero__meta .ecc-bars { flex: 1 1 260px; max-width: 340px; }
.ecc-sitehero__meta .ecc-bars__label,
.ecc-sitehero__meta .ecc-bars__val { color: var(--ecc-on-dark-2); }
.ecc-sitehero__meta .ecc-bars__track { background: rgba(255,255,255,.18); }

/* ----------------------------------------------------------- toolbar --- */

.ecc-listwrap { max-width: var(--ecc-wrap); margin: 0 auto; padding: 0 20px; }
.ecc-list__title { margin-top: 2rem; }
.ecc-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 0 14px;
	border-bottom: 1px solid var(--ecc-line);
	margin-bottom: 20px;
}
.ecc-toolbar__count { margin: 0; color: var(--ecc-ink-2); font-size: 15px; }
.ecc-toolbar__count strong { color: var(--ecc-ink); font-family: var(--ecc-display); font-size: 18px; }
.ecc-toolbar__sort { display: flex; align-items: center; gap: 10px; }
.ecc-toolbar__sort label { font-size: 14px; color: var(--ecc-ink-2); }
.ecc-toolbar__sort select {
	font-family: var(--ecc-text);
	font-size: 14px;
	color: var(--ecc-ink);
	background: var(--ecc-card);
	border: 1px solid var(--ecc-line-2);
	border-radius: 9px;
	padding: 8px 12px;
	min-height: 40px;
}

/* -------------------------------------------------------------- card --- */

.ecc-list { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; }

.ecc-card {
	position: relative;
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr) 196px 176px;
	gap: 26px;
	align-items: start;
	background: var(--ecc-card);
	border: 1px solid var(--ecc-line);
	border-radius: var(--ecc-radius);
	padding: 22px 24px;
	box-shadow: var(--ecc-shadow);
	content-visibility: auto;
	contain-intrinsic-size: auto 260px;
}
.ecc-card:hover { border-color: var(--ecc-line-2); box-shadow: var(--ecc-shadow-lg); }
.ecc-card--top { border-color: rgba(233,185,73,.55); }
.ecc-card--top::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 3px;
	border-radius: var(--ecc-radius) var(--ecc-radius) 0 0;
	background: linear-gradient(90deg, var(--ecc-gold-3), var(--ecc-gold-2), var(--ecc-gold-3));
}
.ecc-card__rank {
	position: absolute;
	top: 14px;
	left: 14px;
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	border-radius: 8px;
	background: var(--ecc-navy);
	color: #fff;                      /* 18.1:1 */
	font-family: var(--ecc-display);
	font-weight: 700;
	font-size: 13px;
	display: grid;
	place-items: center;
}
.ecc-card--top .ecc-card__rank { background: linear-gradient(180deg, var(--ecc-gold-2), var(--ecc-gold-3)); color: var(--ecc-navy); }

/* brand column */
.ecc-card__brand { text-align: center; }
.ecc-card__logo {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #F2F4F9;
	border: 1px solid var(--ecc-line);
	border-radius: var(--ecc-radius-sm);
	overflow: hidden;
	padding: 12px;
}
.ecc-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ecc-logo-fallback {
	font-family: var(--ecc-display);
	font-weight: 700;
	font-size: 30px;
	color: var(--ecc-ink-2);
	letter-spacing: .02em;
}
body.ecc .ecc-card__name {
	font-size: 1.05rem;
	margin: 12px 0 2px;
	text-align: center;
	line-height: 1.3;
}
.ecc-card__name a { color: var(--ecc-ink); text-decoration: none; }
.ecc-card__name a:hover { text-decoration: underline; }
.ecc-card__facts {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0;
	font-size: 13px;
	color: var(--ecc-ink-3);
}
.ecc-card__facts span + span::before { content: "\00B7"; margin-right: 10px; color: var(--ecc-line-2); }

/* offer column */
.ecc-card__kicker {
	font-family: var(--ecc-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ecc-ink-2);
	margin: 2px 0 6px;
}
.ecc-card__bonus {
	font-family: var(--ecc-display);
	font-size: clamp(1.25rem, 1.9vw, 1.6rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ecc-ink);
	margin: 0 0 14px;
	letter-spacing: -.015em;
}
.ecc-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ecc-chip {
	font-size: 13px;
	line-height: 1.35;
	color: var(--ecc-ink-2);
	background: #F4F6FB;
	border: 1px solid var(--ecc-line);
	border-radius: 8px;
	padding: 6px 10px;
	max-width: 100%;
}
.ecc-chip__k {
	font-family: var(--ecc-display);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ecc-ink-3);
	margin-right: 6px;
}
.ecc-chip--feature { background: #ECF7F1; border-color: #C9E7D8; color: #0E5C3A; }  /* 6.9:1 */
.ecc-chip--feature::before { content: "\2713"; margin-right: 6px; font-weight: 700; }

/* verdict column */
.ecc-card__verdict { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ecc-card__band {
	margin: 0 0 8px;
	font-family: var(--ecc-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ecc-ink-2);
}

.ecc-score {
	--pct: 0;
	position: relative;
	width: 78px;
	height: 78px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
.ecc-score--lg { width: 104px; height: 104px; }
.ecc-score__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(var(--ring) calc(var(--pct) * 1%), #E6EAF2 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
	        mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
}
.ecc-score--lg .ecc-score__ring {
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px));
	        mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px));
}
.ecc-score__num {
	font-family: var(--ecc-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	color: var(--ecc-ink);
	letter-spacing: -.02em;
}
.ecc-score--lg .ecc-score__num { font-size: 34px; }
.ecc-score__out { font-size: 11px; color: var(--ecc-ink-3); margin-top: 1px; }
.ecc-score.is-exc   { --ring: var(--ecc-exc); }
.ecc-score.is-good  { --ring: var(--ecc-good); }
.ecc-score.is-fair  { --ring: var(--ecc-fair); }
.ecc-score.is-basic { --ring: var(--ecc-basic); }
.ecc-hero .ecc-score__num { color: #fff; }
.ecc-hero .ecc-score__out { color: var(--ecc-on-dark-2); }
.ecc-hero .ecc-score__ring { background: conic-gradient(var(--ring) calc(var(--pct) * 1%), rgba(255,255,255,.18) 0); }
.ecc-hero .ecc-score.is-exc  { --ring: #34D399; }
.ecc-hero .ecc-score.is-good { --ring: #60A5FA; }
.ecc-hero .ecc-score.is-fair { --ring: #FBBF24; }
.ecc-hero .ecc-score.is-basic{ --ring: #CBD5E1; }

.ecc-bars { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 5px; }
.ecc-bars__row {
	display: grid;
	grid-template-columns: 62px 1fr 28px;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}
.ecc-bars__label { color: var(--ecc-ink-2); }
.ecc-bars__track { height: 6px; border-radius: 4px; background: #E6EAF2; overflow: hidden; }
.ecc-bars__fill { display: block; height: 100%; border-radius: 4px; background: var(--ecc-basic); }
.ecc-bars__row.is-exc   .ecc-bars__fill { background: var(--ecc-exc); }
.ecc-bars__row.is-good  .ecc-bars__fill { background: var(--ecc-good); }
.ecc-bars__row.is-fair  .ecc-bars__fill { background: var(--ecc-fair); }
.ecc-bars__val { text-align: right; font-family: var(--ecc-display); font-weight: 600; color: var(--ecc-ink); }

/* action column */
.ecc-card__act { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.ecc-btn {
	display: block;
	text-align: center;
	font-family: var(--ecc-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	padding: 15px 18px;
	border-radius: 11px;
	color: var(--ecc-navy);           /* 10.4:1 on gold */
	background: linear-gradient(180deg, var(--ecc-gold-2) 0%, var(--ecc-gold) 60%, var(--ecc-gold-3) 100%);
	border: 1px solid var(--ecc-gold-3);
	text-decoration: none;
	box-shadow: 0 8px 18px -10px rgba(201,154,46,.95);
	transition: filter .15s ease, transform .15s ease;
}
.ecc-btn:hover { color: var(--ecc-navy); filter: brightness(1.05); transform: translateY(-1px); }
.ecc-card__review {
	text-align: center;
	font-size: 14px;
	color: #1B4FA8;                   /* 7.1:1 on white */
	text-decoration: none;
}
.ecc-card__review:hover { text-decoration: underline; }

/* footer strip of the card */
.ecc-card__foot {
	grid-column: 1 / -1;
	border-top: 1px solid var(--ecc-line);
	padding-top: 14px;
	margin-top: 2px;
	display: grid;
	gap: 10px;
}
.ecc-card__snippet { margin: 0; font-size: 14px; color: var(--ecc-ink-2); }
.ecc-card__snippet a { margin-left: 4px; white-space: nowrap; }
.ecc-terms { font-size: 13px; color: var(--ecc-ink-3); }
.ecc-terms summary {
	cursor: pointer;
	font-family: var(--ecc-display);
	font-weight: 600;
	font-size: 13px;
	color: var(--ecc-ink-2);
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.ecc-terms summary::-webkit-details-marker { display: none; }
.ecc-terms summary::before { content: "\25B8"; transition: transform .15s ease; }
.ecc-terms[open] summary::before { transform: rotate(90deg); }
.ecc-terms__body { margin-top: 8px; max-height: 8.5em; overflow-y: auto; scrollbar-width: thin; padding-right: 8px; }
.ecc-terms__body p { margin: 0 0 6px; line-height: 1.55; }

.ecc-empty { padding: 40px 0; color: var(--ecc-ink-2); }

/* ribbon from getRibbon() */
.ecc-card__logo .ribbon { right: 0; top: -4px; }

/* ------------------------------------------------------------ footer --- */

.ecc-footer {
	background: var(--ecc-navy);
	color: var(--ecc-on-dark-2);
	margin-top: 40px;
	padding-top: 52px;
	border-top: 1px solid rgba(233,185,73,.25);
}
.ecc-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
	gap: 40px;
	padding-bottom: 40px;
}
.ecc-footer__brand p { margin: 16px 0 0; max-width: 46ch; font-size: 14px; }
body.ecc .ecc-footer h2 {
	color: var(--ecc-gold);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 6px 0 14px;
}
.ecc-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ecc-footer__list a { color: var(--ecc-on-dark); font-size: 15px; text-decoration: none; }
.ecc-footer__list a:hover { color: var(--ecc-gold-2); text-decoration: underline; }
.ecc-footer__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-block: 20px;
	border-top: 1px solid rgba(255,255,255,.1);
	font-size: 13px;
}
.ecc-footer__bar p { margin: 0; }
.ecc-age {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid var(--ecc-gold);
	color: var(--ecc-gold);
	font-family: var(--ecc-display);
	font-weight: 700;
	font-size: 12px;
	display: grid;
	place-items: center;
}

/* ------------------------------------------------------ single casino -- */

body.ecc.single-site .entry-content,
body.ecc .ecc-prose {
	max-width: 860px;
	margin-inline: auto;
	background: var(--ecc-card);
	border: 1px solid var(--ecc-line);
	border-radius: var(--ecc-radius);
	padding: clamp(22px, 4vw, 44px);
	margin-block: 34px;
	box-shadow: var(--ecc-shadow);
}
body.ecc.single-site .entry-content ul { padding-left: 1.1em; }
body.ecc.single-site .entry-header { display: none; }
body.ecc.single-site h2:first-child { margin-top: 0; }

/* review nav bar that already exists in the old CSS */
body.ecc #review-navigation { background: var(--ecc-navy); border-top: 1px solid rgba(233,185,73,.3); }
body.ecc #review-navigation a { color: var(--ecc-gold-2); font-family: var(--ecc-display); font-weight: 600; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1080px) {
	.ecc-card { grid-template-columns: 180px minmax(0, 1fr) 170px; }
	.ecc-card__act { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; gap: 18px; }
	.ecc-btn { min-width: 200px; }
}

@media (max-width: 860px) {
	.ecc-header__inner { min-height: 64px; }
	.ecc-logo svg { height: 36px; }
	.ecc-burger { display: flex; }
	.ecc-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--ecc-navy);
		border-bottom: 1px solid rgba(233,185,73,.25);
		padding: 10px 16px 18px;
		display: none;
	}
	.ecc-nav.is-open { display: block; }
	.ecc-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.ecc-nav__list a { padding: 13px 12px; font-size: 16px; }
	.ecc-nav__list .sub-menu {
		position: static;
		display: flex;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 14px;
		margin: 0;
	}
	.ecc-strip__item--hide-sm { display: none; }
	.ecc-strip .ecc-wrap { justify-content: space-between; font-size: 12px; }

	.ecc-card {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 14px 16px;
		padding: 18px 16px;
	}
	.ecc-card__rank { top: 10px; left: 10px; }
	.ecc-card__brand { grid-column: 1; text-align: left; }
	.ecc-card__logo { aspect-ratio: 1 / 1; padding: 8px; }
	body.ecc .ecc-card__name { text-align: left; font-size: .95rem; margin-top: 8px; }
	.ecc-card__facts { justify-content: flex-start; font-size: 12px; }
	.ecc-card__offer { grid-column: 2; }
	.ecc-card__bonus { font-size: 1.2rem; }
	.ecc-card__verdict {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		gap: 16px;
		background: #F7F9FC;
		border: 1px solid var(--ecc-line);
		border-radius: var(--ecc-radius-sm);
		padding: 12px 14px;
	}
	.ecc-card__band { display: none; }
	.ecc-card__verdict .ecc-bars { flex: 1 1 auto; }
	.ecc-card__act { flex-direction: column; align-items: stretch; }
	.ecc-btn { min-width: 0; width: 100%; }
	.ecc-footer__top { grid-template-columns: 1fr; gap: 30px; }
	.ecc-sitehero__logo { width: 104px; height: 104px; border-radius: 16px; }
}

@media (max-width: 480px) {
	.ecc-card { grid-template-columns: 1fr; }
	.ecc-card__brand { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; }
	.ecc-card__logo { grid-row: span 2; aspect-ratio: 1 / 1; }
	body.ecc .ecc-card__name { margin: 0; align-self: end; }
	.ecc-card__facts { align-self: start; }
	.ecc-card__offer { grid-column: 1; }
	.ecc-bars__row { grid-template-columns: 56px 1fr 26px; }
	.ecc-toolbar { flex-direction: column; align-items: stretch; }
	.ecc-toolbar__sort select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ecc-btn, .ecc-terms summary::before { transition: none; }
	.ecc-btn:hover { transform: none; }
}

/* ==========================================================================
   Corrections pass - specificity against GeneratePress and the legacy CSS
   ========================================================================== */

/* The redesign supplies its own header, so hide anything GP still prints. */
body.ecc .site-header,
body.ecc .main-navigation:not(.ecc-nav),
body.ecc #site-navigation,
body.ecc .navigation-branding { display: none !important; }

/* Page furniture */
body.ecc .site-main { padding: 0; }
body.ecc .inside-article { padding: 0; }
body.ecc .entry-content { padding-bottom: 8px; }
body.ecc.home .entry-header { display: none; }
body.ecc .entry-content > p,
body.ecc .entry-content > h2,
body.ecc .entry-content > h3,
body.ecc .entry-content > ul,
body.ecc .entry-content > ol,
body.ecc .entry-content > figure,
body.ecc .entry-content > div:not(.ecc-listwrap) {
	max-width: var(--ecc-wrap);
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}
body.ecc.home .entry-content > p:first-of-type {
	font-family: var(--ecc-display);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--ecc-ink);
	margin-top: 34px;
}

/* Link colours: these need to beat `body.ecc a`. */
body.ecc a.ecc-hero__jump,
body.ecc a.ecc-btn { color: var(--ecc-navy); text-decoration: none; }
body.ecc .ecc-nav__list a { color: var(--ecc-on-dark); }
body.ecc .ecc-nav__list a:hover,
body.ecc .ecc-nav__list .current-menu-item > a { color: var(--ecc-gold-2); }
body.ecc .ecc-footer__list a { color: var(--ecc-on-dark); }
body.ecc .ecc-footer__list a:hover { color: var(--ecc-gold-2); }
body.ecc a.ecc-card__name,
body.ecc .ecc-card__name a { color: var(--ecc-ink); }
body.ecc .ecc-strip a { color: var(--ecc-gold-2); }

/* Hero: two columns, with the scoring panel on the right. */
.ecc-hero__main { min-width: 0; }
@media (min-width: 1000px) {
	.ecc-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.12fr) minmax(300px, 372px);
		gap: 56px;
		align-items: center;
	}
	.ecc-hero__panel { margin: 0; }
}
.ecc-hero__panel {
	background: rgba(255,255,255,.055);
	border: 1px solid rgba(233,185,73,.28);
	border-radius: 18px;
	padding: 24px 26px;
	margin: 6px 0 0;
}
body.ecc .ecc-hero__panel h2 {
	color: var(--ecc-gold);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.ecc-hero__panel dl { margin: 0; display: grid; gap: 12px; }
.ecc-hero__panel dt {
	font-family: var(--ecc-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--ecc-on-dark);
}
.ecc-hero__panel dd {
	margin: 2px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ecc-on-dark-2);
}
.ecc-hero__panel-note {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: 12.5px;
	color: var(--ecc-on-dark-2);
}
body.ecc .ecc-hero__jump { margin-bottom: 4px; }

/* Card: give the rank its own rail so nothing overlaps the logo. */
.ecc-card {
	grid-template-columns: 30px 190px minmax(0, 1fr) 190px 172px;
	gap: 22px;
	padding: 22px 22px 20px;
}
.ecc-card__rank {
	position: static;
	align-self: start;
	justify-self: start;
	margin-top: 2px;
}
@media (max-width: 1080px) {
	.ecc-card { grid-template-columns: 30px 168px minmax(0, 1fr) 176px; }
}
@media (max-width: 860px) {
	.ecc-card { grid-template-columns: 30px 96px minmax(0, 1fr); gap: 12px 14px; }
	.ecc-card__brand { grid-column: 2; }
	.ecc-card__offer { grid-column: 3; }
}
@media (max-width: 480px) {
	.ecc-card { grid-template-columns: 30px minmax(0, 1fr); }
	.ecc-card__brand { grid-column: 2; display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
	.ecc-card__offer { grid-column: 1 / -1; }
}

/* "Added recently" ribbon: a flat badge rather than the old rotated banner. */
body.ecc .ecc-card__logo .ribbon {
	position: absolute;
	top: 6px;
	right: 6px;
	left: auto;
	width: auto;
	height: auto;
	overflow: visible;
	text-align: center;
}
body.ecc .ecc-card__logo .ribbon span {
	position: static;
	display: inline-block;
	width: auto;
	transform: none;
	-webkit-transform: none;
	background: var(--ecc-navy);
	color: #fff;                      /* 18.1:1 */
	font-family: var(--ecc-display);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 5px;
	box-shadow: none;
}
body.ecc .ecc-card__logo .ribbon span::before,
body.ecc .ecc-card__logo .ribbon span::after { display: none; }

/* Legacy rules that would leak in */
body.ecc .ecc-list .box { width: auto; position: static; margin: 0; }
body.ecc .jump { display: none; }
body.ecc #toc_container { max-width: 860px; margin-inline: auto; }

/* Logo tiles: letterbox rather than crop. */
body.ecc .ecc-card__logo img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}
body.ecc .ecc-sitehero__logo img { width: 100%; height: 100%; object-fit: contain; }

/* Inline "added recently" / editorial badge. */
.ecc-badge {
	display: inline-block;
	background: #EEF2FF;
	border: 1px solid #C9D3F5;
	color: #22357A;                   /* 8.3:1 on #EEF2FF */
	font-family: var(--ecc-display);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 5px;
}
.ecc-card__facts .ecc-badge + span::before { content: none; }

/* Logo tile: percentage max-height on a content-sized grid area resolves to
   auto, so the cap has to be in pixels. */
body.ecc .ecc-card__logo {
	height: 124px;
	aspect-ratio: auto;
	padding: 12px;
}
body.ecc .ecc-card__logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 98px;
	object-fit: contain;
}
body.ecc .ecc-sitehero__logo { padding: 16px; }
body.ecc .ecc-sitehero__logo img { width: auto; height: auto; max-width: 100%; max-height: 112px; }
@media (max-width: 860px) {
	body.ecc .ecc-card__logo { height: 88px; padding: 8px; }
	body.ecc .ecc-card__logo img { max-height: 70px; }
	body.ecc .ecc-sitehero__logo img { max-height: 74px; }
}
@media (max-width: 480px) {
	body.ecc .ecc-card__logo { height: 76px; }
	body.ecc .ecc-card__logo img { max-height: 58px; }
}

/* ==========================================================================
   Single casino review page
   ========================================================================== */

/* The two-column hero grid is for the front page only. */
@media (min-width: 1000px) {
	.ecc-hero--site .ecc-hero__inner {
		display: flex;
		grid-template-columns: none;
		gap: 40px;
		align-items: center;
	}
}
.ecc-hero--site .ecc-hero__inner { padding-block: clamp(32px, 4.5vw, 56px); }
.ecc-sitehero__body { flex: 1 1 420px; min-width: 0; }
.ecc-sitehero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--ecc-on-dark-2);
}
.ecc-sitehero__facts span + span::before { content: "\00B7"; margin-right: 18px; color: rgba(255,255,255,.35); }
.ecc-sitehero__meta { align-items: center; margin-bottom: 24px; }
.ecc-sitehero__score { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ecc-sitehero__band {
	font-family: var(--ecc-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ecc-gold);
}
body.ecc a.ecc-hero__jump--cta { margin: 0; }

/* Everything the review generator prints, turned into a spec sheet. */
body.ecc.single-site .entry-content > p { margin: 0; }
body.ecc.single-site .entry-content h3 {
	font-family: var(--ecc-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ecc-ink-2);
	margin: 26px 0 12px;
	padding-top: 22px;
	border-top: 1px solid var(--ecc-line);
}
body.ecc.single-site .entry-content > p:first-of-type h3 { margin-top: 0; padding-top: 0; border-top: 0; }
body.ecc.single-site .entry-content ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
}
body.ecc.single-site .entry-content ul li {
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--ecc-ink-2);
	background: #F4F6FB;
	border: 1px solid var(--ecc-line);
	border-radius: 8px;
	padding: 7px 11px;
	margin: 0;
}
body.ecc.single-site .entry-content a { font-weight: 500; }

/* The featured image and its outlink duplicate the hero. */
body.ecc.single-site .featured-image,
body.ecc.single-site .post-image,
body.ecc.single-site .inside-article > .featured-image { display: none; }

/* Sticky visit bar */
body.ecc #review-navigation {
	background: linear-gradient(180deg, rgba(10,16,36,.96), var(--ecc-navy));
	border-top: 1px solid rgba(233,185,73,.35);
	z-index: 70;
}
body.ecc #review-navigation a { padding: 15px 16px; font-size: 16px; }
body.ecc.single-site { padding-bottom: 60px; }

@media (max-width: 999px) {
	.ecc-sitehero__meta { flex-direction: column; align-items: flex-start; gap: 18px; }
	.ecc-sitehero__score { flex-direction: row; gap: 12px; }
	.ecc-sitehero__meta .ecc-bars { max-width: none; width: 100%; }
}

/* Toolbar + bars tidy-ups on small screens */
@media (max-width: 480px) {
	.ecc-toolbar__sort { flex-wrap: wrap; }
	.ecc-toolbar__sort label { flex: 0 0 auto; }
	.ecc-bars__row { grid-template-columns: 70px 1fr 28px; }
}

/* Review page polish */
body.ecc a.ecc-hero__jump--cta::after { content: "\2192"; }
@media (min-width: 1000px) {
	.ecc-hero--site .ecc-hero__inner { align-items: flex-start; }
	.ecc-sitehero__logo { margin-top: 6px; }
}
body.ecc.single-site .entry-content p:empty { display: none; }
body.ecc.single-site .entry-content h3:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
body.ecc.single-site .entry-content > p > h3 { margin-top: 26px; }

/* Page head for everything that is not the front page or a casino review. */
body.ecc .entry-header {
	max-width: var(--ecc-wrap);
	margin: 0 auto;
	padding: clamp(26px, 4vw, 44px) 20px clamp(10px, 1.6vw, 18px);
	box-sizing: border-box;
}
body.ecc .entry-header .entry-title {
	margin: 0;
	font-size: clamp(1.8rem, 3.4vw, 2.7rem);
	text-transform: none;
	border: 0;
	padding: 0;
}
body.ecc.single-site .entry-header,
body.ecc.home .entry-header { display: none; }
body.ecc .entry-header + .entry-content .ecc-listwrap .ecc-toolbar { padding-top: 10px; }

/* Solid fallback under the hero gradient so the text is never on a light
   surface if the gradient fails to paint. */
.ecc-hero { background-color: var(--ecc-navy); }

/* Solid fallbacks under every gradient that carries text. */
.ecc-hero__jump,
body.ecc a.ecc-hero__jump { background-color: var(--ecc-gold); }
.ecc-btn, body.ecc a.ecc-btn { background-color: var(--ecc-gold); }
.ecc-card--top .ecc-card__rank { background-color: var(--ecc-gold); }
body.ecc #review-navigation { background-color: var(--ecc-navy); }

/* Responsible-gambling links carry a one-line description. */
.ecc-footer__list li { line-height: 1.4; }
.ecc-footer__list li span {
	display: block;
	font-size: 12.5px;
	color: var(--ecc-on-dark-2);
	margin-top: 2px;
}

/* Table of Contents Plus, in the site's own idiom. */
body.ecc #toc_container {
	background: var(--ecc-card);
	border: 1px solid var(--ecc-line);
	border-radius: var(--ecc-radius-sm);
	box-shadow: var(--ecc-shadow);
	padding: 18px 20px;
	width: auto;
	max-width: 340px;
	margin: 0 0 22px 28px;
	font-size: 14px;
}
body.ecc #toc_container .toc_title {
	font-family: var(--ecc-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ecc-ink-2);
	text-align: left;
	margin: 0 0 10px;
}
body.ecc #toc_container ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
body.ecc #toc_container ul li { margin: 0; }
body.ecc #toc_container a { color: #1B4FA8; text-decoration: none; line-height: 1.4; }
body.ecc #toc_container a:hover { text-decoration: underline; }
@media (max-width: 860px) {
	body.ecc #toc_container { float: none !important; max-width: none; margin: 0 0 22px; }
}

/* ==========================================================================
   Legal pages and the contact form
   ========================================================================== */

body.ecc .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
	font-size: 14.5px;
	display: table;
}
body.ecc .entry-content table tr { display: table-row; box-shadow: none; border-radius: 0; margin: 0; }
body.ecc .entry-content table td {
	display: table-cell;
	border: 1px solid var(--ecc-line);
	padding: 10px 12px;
	vertical-align: top;
	text-align: left;
	background: var(--ecc-card);
	color: var(--ecc-ink-2);
	width: auto !important;
}
body.ecc .entry-content table tr:nth-child(odd) td { background: #FAFBFE; }
body.ecc .entry-content table td strong { color: var(--ecc-ink); }
body.ecc .entry-content ol { padding-left: 1.3em; }
body.ecc .entry-content ol li { margin-bottom: 8px; color: var(--ecc-ink-2); }
body.ecc:not(.single-site) .entry-content ul { list-style: disc; padding-left: 1.3em; }
body.ecc:not(.single-site) .entry-content ul li { margin-bottom: 8px; color: var(--ecc-ink-2); display: list-item; }

/* Legal pages read as a document, not a landing page. */
body.ecc.page .entry-content {
	max-width: 880px;
	margin-inline: auto;
}
body.ecc.page .entry-content > * { max-width: none; padding-inline: 0; }
body.ecc.page-template-default:not(.home) .entry-content {
	background: var(--ecc-card);
	border: 1px solid var(--ecc-line);
	border-radius: var(--ecc-radius);
	padding: clamp(22px, 4vw, 44px);
	box-shadow: var(--ecc-shadow);
	margin-block: 10px 40px;
}
/* ...but pages whose job is a casino list stay full width. */
body.ecc.page .entry-content:has(.ecc-listwrap) {
	max-width: none;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
body.ecc.page .entry-content:has(.ecc-listwrap) > *:not(.ecc-listwrap) {
	max-width: var(--ecc-wrap);
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}

/* --- contact form --- */
.ecc-nope { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.ecc .wpcf7 { margin-top: 8px; }
body.ecc .ecc-field { display: grid; gap: 7px; margin: 0 0 20px; }
body.ecc .ecc-field label {
	font-family: var(--ecc-display);
	font-weight: 600;
	font-size: 14px;
	color: var(--ecc-ink);
}
body.ecc .ecc-req { color: #B42318; }               /* 6.4:1 on white */
body.ecc .ecc-hint { font-size: 13px; color: var(--ecc-ink-3); }
body.ecc .wpcf7 input[type="text"],
body.ecc .wpcf7 input[type="email"],
body.ecc .wpcf7 select,
body.ecc .wpcf7 textarea {
	width: 100%;
	font-family: var(--ecc-text);
	font-size: 15px;
	color: var(--ecc-ink);
	background: #fff;
	border: 1px solid var(--ecc-line-2);
	border-radius: 10px;
	padding: 11px 13px;
	box-sizing: border-box;
	min-height: 46px;
}
body.ecc .wpcf7 textarea { min-height: 150px; resize: vertical; }
body.ecc .wpcf7 input:focus,
body.ecc .wpcf7 select:focus,
body.ecc .wpcf7 textarea:focus {
	outline: 2px solid var(--ecc-gold-3);
	outline-offset: 1px;
	border-color: var(--ecc-gold-3);
}
body.ecc .wpcf7 ::placeholder { color: var(--ecc-ink-3); opacity: 1; }
body.ecc .ecc-field--consent { grid-template-columns: auto; font-size: 14px; color: var(--ecc-ink-2); }
body.ecc .ecc-field--consent .wpcf7-list-item { margin: 0; display: flex; gap: 10px; align-items: flex-start; }
body.ecc .ecc-field--consent input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; }
body.ecc .wpcf7 input.ecc-btn,
body.ecc .wpcf7 .ecc-btn {
	width: auto;
	min-width: 220px;
	cursor: pointer;
	min-height: 52px;
	border: 1px solid var(--ecc-gold-3);
}
body.ecc .wpcf7-not-valid-tip { color: #B42318; font-size: 13px; }
body.ecc .wpcf7-response-output {
	border-radius: var(--ecc-radius-sm);
	border-width: 1px;
	padding: 13px 15px;
	margin: 18px 0 0;
	font-size: 15px;
}
body.ecc .wpcf7 form.sent .wpcf7-response-output { border-color: #0E7C4A; background: #ECF7F1; color: #0B5A36; }
body.ecc .wpcf7 form.invalid .wpcf7-response-output,
body.ecc .wpcf7 form.failed .wpcf7-response-output,
body.ecc .wpcf7 form.spam .wpcf7-response-output { border-color: #B42318; background: #FEF3F2; color: #8A1B13; }

/* CF7 inserts <br> at every newline in the form markup; the grid already
   handles spacing, so the breaks only add dead air. */
body.ecc .ecc-field br { display: none; }
body.ecc .ecc-field { gap: 6px; margin-bottom: 18px; }
body.ecc .ecc-field .wpcf7-form-control-wrap { display: block; }
body.ecc .ecc-field .ecc-hint { margin-top: -1px; }
body.ecc .wpcf7 p { margin: 0 0 18px; }
body.ecc .wpcf7 p:last-child { margin-bottom: 0; }

/* GeneratePress styles buttons via input[type="submit"], which is specificity
   (0,1,1) and so outranks the plain .ecc-btn class. Match it with a heavier
   selector rather than reaching for !important. */
body.ecc .wpcf7 input[type="submit"].ecc-btn,
body.ecc .wpcf7 input[type="submit"] {
	color: var(--ecc-navy);
	background-color: var(--ecc-gold);
	background-image: linear-gradient(180deg, var(--ecc-gold-2) 0%, var(--ecc-gold) 60%, var(--ecc-gold-3) 100%);
	border: 1px solid var(--ecc-gold-3);
	border-radius: 11px;
	font-family: var(--ecc-display);
	font-weight: 700;
	font-size: 16px;
	padding: 15px 26px;
	box-shadow: 0 8px 18px -10px rgba(201,154,46,.95);
}
body.ecc .wpcf7 input[type="submit"]:hover,
body.ecc .wpcf7 input[type="submit"]:focus {
	color: var(--ecc-navy);
	background-color: var(--ecc-gold);
	filter: brightness(1.05);
}