@charset "UTF-8";
/* ============================================================================
   Credit Card Casinos — WordPress / GeneratePress glue for the design system.
   design.css holds the tokens + base components; this file maps GP's
   structures onto it and styles the editorial layer (header submenus, notice
   strip, breadcrumbs, byline, content surface, related cards).
   ============================================================================ */

/* ---- GeneratePress neutralisation: we render our own .nav + .foot ---- */
#masthead, .site-header, .main-navigation:not(.nav__links), .footer-widgets, .site-info { display: none; }
#page.grid-container,
.grid-container.container,
body:not(.x) .grid-container { max-width: none !important; padding: 0 !important; }
.site-content { padding: 0 !important; background: transparent; display: block; }
.site-content .content-area,
.separate-containers .site-main { width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; }
.site-content > main, #main, main.site-main { width: 100% !important; max-width: none !important; margin: 0 !important; }
.separate-containers .inside-article, .one-container .site-content { padding: 0; }
.entry-header, .page-header-image, .generate-page-header { display: none; }
#page, .site, body { background: var(--cream); }
body.ccc { padding-bottom: 0; }
@media (max-width:640px){ body.ccc { padding-bottom: 68px; } }

.ccc-skip { position:absolute; left:-9999px; top:0; z-index:999; background:var(--accent); color:#fff; padding:10px 16px; font-family:var(--mono); font-weight:700; }
.ccc-skip:focus { left:8px; top:8px; }
html { scroll-padding-top: 96px; }

/* ---- reading progress (thin maple line on top of the sticky nav) ---- */
.ccc-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 90; background: linear-gradient(90deg, var(--felt), var(--accent)); transition: width .1s linear; }

/* ---- disclosure strip above the nav ---- */
.notice-strip { background: var(--felt-deep); color: rgba(255,255,255,.82); font-size: .8rem; line-height: 1.45; }
.notice-strip__inner { max-width: var(--maxw); margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; }
@media (min-width:1180px){ .notice-strip__inner { flex-wrap: nowrap; } .notice-strip__inner > span { white-space: nowrap; } }
.notice-strip a { color: #fff; text-decoration: underline; text-decoration-color: rgba(49,85,107,.7); text-underline-offset: 3px; }
.notice-strip a:hover { color: var(--accent); }
.notice-strip b { color: #fff; font-weight: 700; }
.notice-strip .flag { margin-right: 6px; }
@media (max-width:760px){ .notice-strip__inner { justify-content: center; text-align: center; padding: 7px 18px; } .notice-strip__lead { display: none; } }

/* ---- supplied brand logo: fit the existing header and preserve its proportions ---- */
.ccc .brand.ccc-brand {
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: 280px; max-width: 100%; min-width: 0; min-height: 44px;
  flex: 0 1 auto; gap: 0; line-height: 0;
}
.ccc .ccc-brand__image { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.ccc .drawer__head .ccc-brand { width: 250px; max-width: calc(100% - 56px); }
.ccc .foot__brand { min-width: 0; }
@media (max-width: 640px) {
  .ccc .brand.ccc-brand { width: 250px; }
}
@media (max-width: 360px) {
  .ccc .brand.ccc-brand { width: 220px; }
}

/* ---- header nav: submenus (hover cards on desktop, accordions in drawer) ---- */
.nav__links a { white-space: nowrap; }
.nav-item { position: relative; display: flex; }
/* The scrollable dropdown clips its own decoration; keep a pointer bridge outside it. */
.nav-item::after { content:""; position:absolute; top:100%; left:0; right:0; height:14px; }
.nav__links .nl-chev { width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px; display: inline-block; color: var(--ink-faint); transition: transform .18s ease; }
.nav-item:hover > a .nl-chev, .nav-item:focus-within > a .nl-chev { transform: rotate(180deg); color: var(--accent-deep); }
.nav-sub {
	position: absolute; top: 100%; left: 50%; z-index: 75;
	min-width: 320px; padding: 9px;
	max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 12px;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; transform: translate(-50%, 14px) scale(.985);
	transform-origin: top center;
	transition: opacity .18s ease, transform .18s cubic-bezier(.2,.7,.3,1), visibility .18s;
}
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 8px) scale(1); }
.nav-sub::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-sub::after {
	content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px;
	width: 11px; height: 11px; background: var(--paper);
	border-left: 1px solid var(--line); border-top: 1px solid var(--line);
	transform: rotate(45deg); border-top-left-radius: 3px;
}
.nav__links .nav-sub a.sub-link { display: flex; gap: 11px; align-items: flex-start; padding: 10px 13px; border-radius: 12px; font-weight: 400; white-space: normal; }
.nav__links .nav-sub a.sub-link:hover { background: var(--felt-tint); color: inherit; }
.sub-link .sub-ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--felt); }
.sub-link .sub-ic svg { width: 18px; height: 18px; display: block; }
.sub-link b { display: block; font-weight: 700; font-size: .94rem; color: var(--ink); line-height: 1.3; }
.sub-link:hover b { color: var(--felt); }
.sub-link small { display: block; color: var(--ink-faint); font-size: .81rem; line-height: 1.4; margin-top: 2px; }
.nav-sub--cols { min-width: 520px; }
.nav-sub--cols .nav-sub__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; }
.nav-sub--cols a.sub-link { padding: 9px 12px; }
.nav-sub__cta { margin-top: 6px; border-top: 1px solid var(--line-soft); padding: 4px 4px 0; }
.nav__links .nav-sub__cta a { display: flex; align-items: center; justify-content: space-between; padding: 10px 9px; border-radius: 10px; font-weight: 700; font-size: .88rem; color: var(--accent-deep); }
.nav__links .nav-sub__cta a:hover { background: var(--accent-tint); color: var(--accent-deep); }
.nav-sub__cta .arr { transition: transform .15s; }
.nav-sub__cta a:hover .arr { transform: translateX(3px); }
@media (max-width: 1180px) { .nav-sub { display: none; } }
/* the right-most dropdown opens leftwards so it never runs off-screen */
.nav__links > .nav-item:last-child .nav-sub { left: auto; right: -12px; transform: translate(0, 14px) scale(.985); }
.nav__links > .nav-item:last-child:hover .nav-sub, .nav__links > .nav-item:last-child:focus-within .nav-sub { transform: translate(0, 8px) scale(1); }
.nav__links > .nav-item:last-child .nav-sub::after { left: auto; right: 40px; }

/* Once enhanced, JS owns disclosure state so Escape can override focus-within. */
.nav-item.ccc-nav-ready > .nav-sub { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 14px) scale(.985); }
.nav-item.ccc-nav-ready.is-open > .nav-sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 8px) scale(1); }
.nav-item.ccc-nav-ready > a .nl-chev { transform: rotate(0); color: var(--ink-faint); }
.nav-item.ccc-nav-ready.is-open > a .nl-chev { transform: rotate(180deg); color: var(--accent-deep); }
.nav__links > .nav-item.ccc-nav-ready:last-child > .nav-sub { transform: translate(0, 14px) scale(.985); }
.nav__links > .nav-item.ccc-nav-ready.is-open:last-child > .nav-sub { transform: translate(0, 8px) scale(1); }

/* drawer accordions */
.dl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.dl-row a { flex: 1; border-bottom: 0 !important; }
.ccc .dl-toggle,
.ccc .dl-toggle:focus,
.ccc .dl-toggle:active {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 48px;
  align-self: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 4px 0 4px 8px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #d8ccc5;
  border-radius: 10px;
  background: #fffdfa;
  color: #741a1e;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ccc .dl-toggle:hover { background: #f5e8e7; border-color: #b98b8e; color: #741a1e; }
.ccc .dl-toggle[aria-expanded="true"],
.ccc .dl-toggle[aria-expanded="true"]:hover,
.ccc .dl-toggle[aria-expanded="true"]:focus,
.ccc .dl-toggle[aria-expanded="true"]:active { background: #741a1e; border-color: #741a1e; color: #fff; }
.ccc .dl-toggle:focus-visible { outline: 3px solid #27465a; outline-offset: 3px; }
.ccc .dl-toggle svg { width: 18px; height: 18px; flex-shrink: 0; pointer-events: none; transition: transform .2s ease; }
.ccc .dl-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ccc .dl-toggle, .ccc .dl-toggle svg { transition: none; } }
.dl-sub { display: none; border-bottom: 1px solid var(--line-soft); background: var(--cream-deep); border-radius: 0 0 12px 12px; }
.dl-item.open .dl-sub { display: block; max-height: none; overflow: visible; }
.dl-sub a { display: flex; align-items: center; justify-content: flex-start; gap: 11px; font-family: var(--sans); font-size: .98rem; font-weight: 600; padding: 12px 14px; color: var(--ink-soft); border-bottom: 0; }
.dl-sub a + a { border-top: 1px solid var(--line-soft); }
.dl-sub a:active { color: var(--felt); }
.drawer__links .dl-row a { font-size: 1.4rem; }
.drawer__foot { margin-top: auto; padding-top: 22px; font-size: .82rem; color: var(--ink-faint); line-height: 1.5; }

/* A native disclosure is available until the full drawer successfully enhances. */
.ccc-nav-fallback { display:none; background:var(--paper); border-bottom:1px solid var(--line); }
.ccc .nav__burger[hidden], .ccc-nav-fallback[hidden] { display:none !important; }
@media (max-width:1180px) {
  .ccc-nav-fallback { display:block; }
  .ccc-nav-fallback > summary { min-height:48px; padding:12px 24px; color:var(--felt-deep); cursor:pointer; font-weight:700; }
  .ccc-nav-fallback > summary:focus-visible { outline:3px solid var(--accent); outline-offset:-4px; }
  .ccc-nav-fallback nav { padding:0 24px 18px; }
  .ccc-nav-fallback ul { list-style:none; padding:0; margin:0; }
  .ccc-nav-fallback li { margin:0; }
  .ccc-nav-fallback li > ul { padding-left:18px; border-left:2px solid var(--line); margin-left:4px; }
  .ccc-nav-fallback a { display:flex; align-items:center; min-height:44px; padding:9px 6px; line-height:1.5; color:var(--felt-deep); text-decoration:underline; text-underline-offset:3px; }
  .ccc-nav-fallback a[aria-current="page"] { font-weight:700; }
}

/* GP's customizer hover colours must not repaint our buttons/components */
a.btn--primary:hover, a.btn--primary:focus { color: #fff !important; }
a.btn--accent:hover, a.btn--accent:focus { color: #fff !important; }
a.btn--light:hover, a.btn--light:focus { color: var(--felt-deep) !important; }
a.btn--ghost:hover, a.btn--ghost:focus { color: var(--felt) !important; }
.ccc button.btn--primary:focus { background: var(--felt); color: #fff; }
.ccc button.btn--primary:hover, .ccc button.btn--primary:active { background: var(--felt-bright); color: #fff; }
.ccc button.btn--accent:focus { background: var(--accent); color: #fff; }
.ccc button.btn--accent:hover, .ccc button.btn--accent:active { background: var(--accent-strong); color: #fff; }
.ccc button.btn--ghost:focus, .ccc button.btn--ghost:hover, .ccc button.btn--ghost:active { background: transparent; border-color: var(--felt); color: var(--felt); }
.ccc button.btn--light:focus, .ccc button.btn--light:hover, .ccc button.btn--light:active { background: #fff; color: var(--felt-deep); }
button.drawer__close:hover, button.drawer__close:focus { background: #fff; color: var(--ink); }
button.nav__burger:hover, button.nav__burger:focus { background: var(--felt-tint); color: var(--ink); }
button.chip:hover, button.chip:focus { background: var(--felt-bright); border-color: var(--felt-bright); color: #fff; }
button.chip.active:hover, button.chip.active:focus { background: var(--felt); border-color: var(--felt); color: #fff; }
a.card--link:hover, a.card--link:hover h3, a.card--link:focus, a.card--link:focus h3 { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- breadcrumbs (Yoast) -> mono trail ---- */
.ccc-crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-faint); line-height: 1.6; }
.ccc-crumbs a { color: var(--ink-faint); }
.ccc-crumbs a:hover { color: var(--felt); }
.ccc-crumbs .breadcrumb_last { color: var(--ink-soft); }
.ccc-crumbs > span > span { white-space: normal; }

/* ---- byline pill: written by / fact-checked by / updated ---- */
.byline-wrap { container-type: inline-size; margin-top: 22px; }
.byline { display: flex; align-items: stretch; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.byline--compact { display: inline-flex; width: auto; max-width: 100%; align-items: center; border-radius: 999px; padding: 4px 8px; }
.byline__p { flex: none; display: flex; gap: 9px; align-items: center; padding: 6px 16px 6px 8px; }
.byline__p + .byline__p { border-left: 1px solid var(--line-soft); }
.byline__avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--felt-tint); color: var(--felt-deep); border: 1px solid var(--felt-line); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: .68rem; letter-spacing: .02em; }
.byline__avatar--accent { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent-line); }
.byline__txt { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.byline__role { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; }
.byline__name { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .92rem; line-height: 1.3; color: var(--ink); }
.byline__name a { color: inherit; }
.byline__name a:hover { color: var(--felt); }
.byline__tick { width: 13px; height: 13px; border-radius: 50%; background: var(--felt); color: #fff; display: inline-grid; place-items: center; flex: none; }
.byline__tick svg { width: 8px; height: 8px; }
.byline__meta { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 16px; border-left: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11px; color: var(--ink-soft); line-height: 1.5; white-space: nowrap; }
.byline__meta b { color: var(--ink); font-weight: 700; }
@container (max-width: 920px) {
	.byline--compact .byline__p { padding: 5px 12px 5px 6px; gap: 8px; }
	.byline--compact .byline__txt { flex-direction: column; align-items: flex-start; gap: 1px; }
	.byline--compact .byline__meta { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 4px 10px 4px 14px; font-size: 10px; }
}
@container (max-width: 560px) {
	.byline--compact { display: flex; flex-wrap: wrap; border-radius: var(--r-lg); }
	.byline--compact .byline__p { padding: 7px 10px; }
	.byline--compact .byline__p + .byline__p { border-left: 0; }
	.byline--compact .byline__meta { flex-basis: 100%; flex-direction: row; gap: 12px; border-left: 0; border-top: 1px solid var(--line-soft); padding: 8px 14px; white-space: normal; }
}

/* ============================================================
   CONTENT SURFACE (.entry-content -> prose)
   ============================================================ */
.ccc .entry-content { font-size: 1.1rem; line-height: 1.75; color: var(--ink); }
.ccc .entry-content > * + * { margin-top: 1.3rem; }
.entry-content p, .prose p { margin: 0; }
.entry-content p + p, .entry-content p + ul, .entry-content p + ol, .entry-content ul + p, .entry-content ol + p,
.entry-content ul + ul, .entry-content ol + ol { margin-top: 1.3rem; }
.entry-content > * + p, .entry-content > * + ul, .entry-content > * + ol { margin-top: 1.3rem; }
.entry-content h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem,3.2vw,2rem); line-height: 1.12; color: var(--ink); margin-top: 2.6rem; }
.entry-content h3 { font-family: var(--display); font-weight: 800; font-size: 1.38rem; line-height: 1.2; color: var(--ink); margin-top: 2rem; }
.entry-content h4 { font-family: var(--sans); font-weight: 800; font-size: 1.08rem; color: var(--ink); margin-top: 1.6rem; }
.entry-content h2 + *, .entry-content h3 + *, .entry-content h4 + * { margin-top: .8rem; }
.entry-content p, .entry-content li { color: var(--ink); }
.entry-content a { color: var(--felt); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; font-weight: 600; }
.entry-content a:hover { color: var(--felt-bright); }
.entry-content ul, .entry-content ol { padding-left: 1.3em; margin: 0; }
.entry-content li + li { margin-top: .5rem; }
.entry-content li::marker { color: var(--felt); }
.entry-content strong { font-weight: 700; }
.entry-content blockquote, .entry-content .wp-block-quote { margin: 1.8rem 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--accent); }
.entry-content blockquote p { font-family: var(--display); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--felt-deep); }
.entry-content blockquote cite { display: block; margin-top: .6rem; font-family: var(--mono); font-style: normal; font-size: .78rem; color: var(--ink-faint); }
.entry-content :where(h1,h2,h3) a { text-decoration: none; }
.entry-content img { border-radius: var(--r); height: auto; }
.entry-content figure { margin: 1.8rem 0; }
.entry-content figcaption { font-size: .85rem; color: var(--ink-faint); margin-top: .5rem; }
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.entry-content .wp-block-table, .entry-content .table-scroll { margin: 1.8rem 0; }
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.entry-content table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .96rem; line-height: 1.5; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 0; }
.entry-content th, .entry-content td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.entry-content thead th, .entry-content tr:first-child th:not([scope="row"]) { background: var(--felt-tint); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--felt-deep); font-weight: 700; }
.entry-content tbody tr:last-child td { border-bottom: 0; }
.entry-content tbody tr:nth-child(even) td { background: rgba(240,232,222,.35); }
.entry-content .wp-block-table table { border-collapse: separate; }
.entry-content .wp-block-table td, .entry-content .wp-block-table th { border-left: 0; border-right: 0; border-top: 0; }
@media (max-width: 860px) { .entry-content table { min-width: 560px; } .entry-content .table-scroll table { min-width: 560px; } }
.entry-content .wp-block-embed { margin: 1.8rem 0; }
.entry-content .wp-block-embed iframe { width: 100%; border-radius: var(--r); }
.ccc .entry-content.ccc-readcol { max-width: 800px; }

/* TL;DR box ([tldr] shortcode from Code Snippets) */
.tldr-box { position: relative; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: 22px 24px 20px; margin: 1.8rem 0; }
.tldr-box .tldr-label { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--felt); border-radius: 999px; padding: 4px 11px; margin-bottom: 10px; }
.tldr-box p { font-size: 1.02rem; line-height: 1.65; }

/* ---- related cards (end of pages) ---- */
.ccc-related { margin-top: 3.2rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.ccc-related__title { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--ink); margin: 6px 0 1.2rem; }
.lcards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .lcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .lcards { grid-template-columns: repeat(3, 1fr); } }
.lcard { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); color: var(--ink); transition: transform .2s, box-shadow .25s, border-color .2s; }
.lcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); color: var(--ink); }
.lcard__ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--felt-tint); color: var(--felt); }
.lcard__ic svg { width: 22px; height: 22px; }
.lcard__t { display: block; font-family: var(--display); font-weight: 800; font-size: 1.12rem; line-height: 1.2; }
.lcard__d { display: block; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; margin-top: 4px; }
.entry-content .lcards { padding: 0; list-style: none; }
.entry-content .lcards li + li { margin: 0; }
.entry-content a.lcard { text-decoration: none; font-weight: 400; color: var(--ink); }

/* ---- author / reviewer box (E-E-A-T) ---- */
.ccc-authorbox { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; margin: 2.6rem 0 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.ccc-authorbox__avatar { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--felt); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.ccc-authorbox__name { font-family: var(--display); font-weight: 800; font-size: 1.2rem; margin: 0; color: var(--ink); }
.ccc-authorbox__name span { font-family: var(--sans); font-weight: 400; font-size: .92rem; color: var(--ink-soft); }
.ccc-authorbox__bio { margin: .5em 0 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.ccc-authorbox__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: .6em; padding: 8px 0; font-family: var(--sans); font-size: .875rem; line-height: 1.45; color: var(--felt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- the changelog mu-plugin, re-skinned to the system ---- */
.ccc-changelog-wrap { margin: 2.6rem 0 0 !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important; background: var(--paper) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; font-family: var(--sans) !important; }
.ccc-changelog-toggle { background: var(--paper) !important; color: var(--ink) !important; font-family: var(--sans) !important; padding: 16px 20px !important; }
.ccc-changelog-toggle:hover { background: var(--cream) !important; }
.ccc-changelog-entries { background: var(--paper) !important; }
.ccc-changelog-date-header { font-family: var(--mono) !important; color: var(--accent-deep) !important; letter-spacing: .08em; }
.ccc-changelog-msg { color: var(--ink-soft) !important; }
.entry-content .ccc-changelog-wrap a { text-decoration: none; }

/* ---- province view: the site runs in "Rest of Canada" mode (body.roc);
   Ontario-only copy stays hidden, exactly as on the live site ---- */
body.ontario .roc-only { display: none !important; }
body.roc .ontario-only { display: none !important; }
body:not(.ontario):not(.roc) .ontario-only { display: none !important; }

/* ============================================================
   LEGACY CONTENT COMPONENTS (hand-written HTML inside articles)
   ============================================================ */
.entry-content .custom-content-box { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--felt); border-radius: var(--r-lg); padding: 24px 26px; box-shadow: var(--shadow-sm); margin: 2rem 0; }
.entry-content .custom-content-box > h2:first-of-type, .entry-content .custom-content-box > .takeaway + h2 { margin-top: .4rem; font-size: 1.45rem; }
.entry-content .takeaway { display: inline-block; }
.entry-content .takeaway strong { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--felt); border-radius: 999px; padding: 4px 11px; font-weight: 700; }
.entry-content .custom-content-box ul { margin-top: .9rem; }

.entry-content .pros-n-cons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.6rem 0; }
.entry-content .pros-n-cons > .pros, .entry-content .pros-n-cons > .cons { border-radius: var(--r-lg); padding: 20px 22px; border: 1px solid var(--line); min-width: 0; }
.entry-content .pros-n-cons > .pros { background: var(--ok-tint); border-color: var(--ok-line); }
.entry-content .pros-n-cons > .cons { background: var(--bad-tint); border-color: var(--bad-line); }
.entry-content .pros-n-cons > div > p:first-child strong { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.entry-content .pros-n-cons > .pros > p:first-child strong { color: var(--ok); }
.entry-content .pros-n-cons > .cons > p:first-child strong { color: var(--bad); }
.entry-content .pros-n-cons ul { display: flex !important; flex-direction: column; gap: 10px; margin: 12px 0 0 !important; padding: 0 !important; list-style: none !important; }
.entry-content .pros-n-cons li { margin: 0 !important; font-size: .98rem; line-height: 1.55; padding-left: 26px; position: relative; }
.entry-content .pros-n-cons .pros li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: var(--ok); font-weight: 800; }
.entry-content .pros-n-cons .cons li::before { content: "✕"; position: absolute; left: 2px; top: 0; color: var(--bad); font-weight: 800; }
@media (max-width:640px) { .entry-content .pros-n-cons { grid-template-columns: 1fr; } }

.entry-content .editor-comment-box { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; align-items: start; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: 22px 24px; margin: 2rem 0; }
.entry-content .editor-comment-box .editor-profile { grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.entry-content .editor-comment-title { font-family: var(--display); font-weight: 800; font-size: 1.15rem; line-height: 1.25; color: var(--ink); }
.entry-content .editor-comment-box p { grid-column: 2; margin: 0; font-size: 1rem; }
.entry-content .editor-comment-box p + p { margin-top: .6rem; }

.entry-content .notes, .entry-content .callout-box, .entry-content .warning-box, .entry-content .green-box { border-radius: var(--r-lg); padding: 20px 22px; margin: 1.8rem 0; border: 1px solid var(--line); background: var(--paper); line-height: 1.65; }
.entry-content .notes { background: var(--cream-deep); }
.entry-content .notes > strong:first-child, .entry-content .green-box > strong:first-child { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.entry-content .notes > strong:first-child { color: var(--accent-deep); }
.entry-content .callout-box { background: var(--accent-tint); border-color: var(--accent-line); }
.entry-content .warning-box { background: var(--bad-tint); border-color: var(--bad-line); border-left: 4px solid var(--felt); }
.entry-content .green-box { background: var(--ok-tint); border-color: var(--ok-line); }
.entry-content .green-box > strong:first-child { color: var(--ok); }
.entry-content :is(.callout-box, .warning-box) h4 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.15rem; }
.entry-content .warning-box h4 { color: var(--felt-deep); }
.entry-content :is(.notes, .callout-box, .warning-box, .green-box) p { margin: 0; }
.entry-content :is(.notes, .callout-box, .warning-box, .green-box) p + p { margin-top: .6rem; }
.entry-content .source-ref { font-size: .82rem !important; color: var(--ink-faint) !important; line-height: 1.5; margin-top: .6rem !important; }

.entry-content .accordion { margin: 1.6rem 0; display: flex; flex-direction: column; gap: 10px; }
.entry-content .accordion-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.entry-content .accordion-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; cursor: pointer; }
.entry-content .accordion-header h3 { margin: 0; font-family: var(--sans); font-size: 1.02rem; font-weight: 800; }
.entry-content .accordion-header .chevron { color: var(--felt); transition: transform .2s; }
.entry-content .accordion-item.active .chevron { transform: rotate(180deg); }
.entry-content .accordion-content { display: none; padding: 0 20px 18px; }
.entry-content .accordion-item.active .accordion-content { display: block; }

.entry-content .reddit-embed-bq { font-family: var(--sans); font-style: normal; font-size: 1rem; }

/* tables keep whole words; wide tables scroll sideways inside .table-scroll */
.entry-content table, .entry-content th, .entry-content td { overflow-wrap: normal; word-break: normal; }
@media (max-width:860px) { .entry-content th, .entry-content td { min-width: 120px; } .entry-content td:first-child, .entry-content th:first-child { min-width: 110px; } }

/* Interaction and small-screen safeguards, shared across all templates. */
[hidden] { display: none !important; }
.drawer__panel { height: 100dvh; max-height: 100dvh; overscroll-behavior: contain; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.drawer__links, .drawer__head, .drawer__foot { flex-shrink: 0; }
.drawer__head { gap: 12px; }
.drawer__panel:focus { outline-offset: -4px; }
.drawer__links a, .dl-toggle, .nav__burger { min-height: 44px; }
.table-scroll { max-width: 100%; overscroll-behavior-x: contain; scrollbar-gutter: stable; }
.table-scroll:focus-visible { outline: 3px solid var(--felt); outline-offset: 4px; }
table caption { text-align: left; font-weight: 700; padding: 12px 0; color: var(--ink); }
.entry-content a:not(.btn), .prose a:not(.btn) { text-underline-offset: .18em; }
@media (max-width:480px) {
  .nav__inner { padding: 0 12px; gap: 8px; }
  .nav .brand { min-width: 0; gap: 7px; }
  .nav .brand .ccc-emblem { width: 32px; height: 32px; }
  .nav .brand__name { font-size: clamp(.95rem, 4.25vw, 1.14rem); }
  .nav .brand__name span { font-size: 7px; letter-spacing: .12em; }
  .nav__right { gap: 0; flex: none; }
  .nav__burger { width: 44px; min-width: 44px; padding: 9px; }
  .drawer__panel { width: min(94vw, 380px); padding: 20px 16px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .drawer__head .brand { gap: 7px; }
  .drawer__head .ccc-emblem { width: 32px; height: 32px; }
  .drawer__head .brand__name { font-size: 1rem; }
  .drawer__head .brand__name span { font-size: 7px; letter-spacing: .12em; }
  .drawer__close { width: 44px; height: 44px; }
  .drawer__links .dl-row a { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Brand navigation: reserve space and contain artwork without cropping it. */
.ccc-menu-logo {
  display: inline-flex; align-items: center; justify-content: center; align-self: center;
  flex: 0 0 40px; width: 40px; height: 26px; box-sizing: border-box;
  overflow: hidden; border: 1px solid var(--line, #d8d1c6); border-radius: 4px; background: #fff;
}
.ccc-menu-logo img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.ccc-menu-logo--casino { flex-basis: 44px; width: 44px; height: 28px; padding: 3px; }
.ccc-menu-logo--on-dark { background: #202a2d; border-color: #202a2d; }
.ccc-menu-logo--category { color: var(--felt); background: var(--felt-tint); }
.ccc-menu-logo--category svg { width: 18px; height: 18px; }
.sub-link > span:last-child, .dl-sub a > span:last-child { min-width: 0; }
.dl-sub a .sub-ic { display: inline-flex; flex: 0 0 18px; }

.nav__links .nav-sub a.sub-link:has(.ccc-menu-logo), .dl-sub a:has(.ccc-menu-logo) { gap: 9px; }