/* =========================================================================
   The Betting Journal — brand layer over Astra
   Tokens are taken from the live homepage, not re-invented.
   ========================================================================= */

:root{
	--tbj-navy:#1a1a2e;
	--tbj-navy-lift:#24243d;
	--tbj-navy-line:#2a2a3e;
	--tbj-ink:#0d1117;
	--tbj-slate:#111827;
	--tbj-gold:#c9a84c;
	--tbj-gold-soft:rgba(201,168,76,.32);
	--tbj-green:#1a6b3c;
	--tbj-green-lit:#4aa877;
	--tbj-red:#b03a2b;
	--tbj-red-lit:#e0705f;
	--tbj-paper:#f5f5f0;
	--tbj-card:#ffffff;
	--tbj-line:#e0e0d8;
	--tbj-body:#3a3a44;
	--tbj-mute:#888;
	--tbj-mute-dark:#aaa;
	--tbj-radius:4px;
	--tbj-radius-lg:6px;
	--tbj-pad:40px;
	--tbj-max:1120px;   /* measured off the original homepage */
	--tbj-mono:"IBM Plex Mono",ui-monospace,monospace;
	--tbj-sans:"Inter",-apple-system,"Segoe UI",sans-serif;
	--tbj-disp:"Playfair Display",Georgia,serif;
}

/* -------------------------------------------------------------------------
   1. Base
   ---------------------------------------------------------------------- */

body{
	background-color:#fff;
	font-family:var(--tbj-sans);
	color:var(--tbj-body);
}

/* Everything sits in a centred 1120px box, like the original homepage —
   the strips are not full-bleed. */
.tbj-nav,
.tbj-geo,
.tbj-ticker,
.tbj-hero,
.tbj-foot,
#content{
	max-width:var(--tbj-max);
	margin-left:auto;
	margin-right:auto;
	width:100%;
}
#content,
.ast-separate-container{background-color:var(--tbj-paper)}

h1,h2,h3,h4,.entry-title,.widget-title{
	font-family:var(--tbj-disp);
	color:var(--tbj-navy);
	font-weight:700;
	letter-spacing:-.01em;
}

.entry-content a:not(.ast-button):not(.wp-block-button__link){
	color:var(--tbj-green);
	text-decoration:underline;
	text-underline-offset:2px;
	text-decoration-thickness:1px;
}
.entry-content a:not(.ast-button):not(.wp-block-button__link):hover{color:var(--tbj-navy)}

:where(a,button,input,select,textarea):focus-visible{
	outline:2px solid var(--tbj-gold);
	outline-offset:2px;
}

/* -------------------------------------------------------------------------
   2. Header — our own markup (see functions.php). Astra's is hidden.
   ---------------------------------------------------------------------- */

.site-header,
.ast-main-header-wrap,
.ast-mobile-header-wrap,
.ast-desktop-header{display:none !important}

.tbj-nav{
	background:var(--tbj-navy);
	border-bottom:3px solid var(--tbj-gold);
}
.tbj-nav__inner{
	display:flex;align-items:center;justify-content:space-between;gap:24px;
	padding:0 var(--tbj-pad);height:60px;
}

.tbj-nav__logo{
	color:#fff;font-family:var(--tbj-disp);font-size:22px;font-weight:700;
	text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
	white-space:nowrap;flex:none;
}
.tbj-nav__logo span{color:var(--tbj-gold)}
.tbj-nav__logo:hover{color:#fff}
.tbj-nav__logo--img img{max-height:38px;width:auto;display:block}

.tbj-nav__links{min-width:0}
.tbj-nav__end{display:flex;align-items:center;gap:6px;flex:none}

/* Telegram — the site's main CTA, so it stays visible on mobile rather than
   being buried in the burger panel. */
.tbj-nav__cta{
	background:var(--tbj-green);color:#fff;
	font-family:var(--tbj-sans);font-size:12px;font-weight:500;
	padding:8px 16px;border-radius:var(--tbj-radius);
	text-decoration:none;white-space:nowrap;transition:.15s;
}
.tbj-nav__cta:hover{background:var(--tbj-green-lit);color:#fff}
.tbj-nav__list{
	list-style:none;margin:0;padding:0;
	display:flex;gap:24px;align-items:center;
}
.tbj-nav__list a{
	color:#ccc;font-family:var(--tbj-sans);font-size:13px;
	text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
	white-space:nowrap;
}
.tbj-nav__list a:hover,
.tbj-nav__list .current-menu-item > a{color:var(--tbj-gold)}

/* Sub-menus */
.tbj-nav__list li{position:relative}
.tbj-nav__list .sub-menu{
	list-style:none;margin:0;padding:8px 0;
	position:absolute;top:100%;left:-14px;min-width:190px;z-index:60;
	background:var(--tbj-navy-lift);border-top:2px solid var(--tbj-gold);
	box-shadow:0 12px 28px rgba(0,0,0,.4);
	opacity:0;visibility:hidden;transform:translateY(4px);transition:.14s;
}
.tbj-nav__list li:hover > .sub-menu,
.tbj-nav__list li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.tbj-nav__list .sub-menu a{display:block;padding:8px 16px;text-decoration:none}
.tbj-nav__list .sub-menu a:hover{background:var(--tbj-navy)}

/* Give a menu item the CSS class "nav-cta" (Menus > Screen Options > CSS Classes) */
.tbj-nav__list li.nav-cta > a,
.tbj-mobile__list li.nav-cta > a{
	background:var(--tbj-green);color:#fff;
	border-radius:var(--tbj-radius);padding:8px 16px;
	text-decoration:none;font-size:12px;font-weight:500;
}
.tbj-nav__list li.nav-cta > a:hover,
.tbj-mobile__list li.nav-cta > a:hover{background:var(--tbj-green-lit);color:#fff}

/* Burger */
.tbj-burger{
	display:none;flex-direction:column;gap:5px;cursor:pointer;
	padding:8px;background:transparent;border:0;flex:none;
}
.tbj-burger span{width:24px;height:2px;background:#fff;display:block;transition:.16s}
.tbj-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tbj-burger.is-open span:nth-child(2){opacity:0}
.tbj-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.tbj-mobile{background:var(--tbj-navy);border-top:1px solid var(--tbj-navy-line);padding:8px var(--tbj-pad) 16px}
.tbj-mobile__list{list-style:none;margin:0;padding:0}
.tbj-mobile__list a{
	display:block;color:#ccc;font-size:14px;padding:11px 0;
	border-bottom:1px solid var(--tbj-navy-line);text-decoration:none;
}
.tbj-mobile__list > li:last-child > a{border-bottom:0}
.tbj-mobile__list a:hover{color:var(--tbj-gold)}
.tbj-mobile__list .sub-menu{list-style:none;margin:0;padding:0 0 0 16px}
.tbj-mobile__list li.nav-cta > a{display:inline-block;margin-top:10px}

/* -------------------------------------------------------------------------
   3. Geo bar
   ---------------------------------------------------------------------- */

.tbj-geo{background:var(--tbj-slate);border-bottom:1px solid var(--tbj-navy-line)}
.tbj-geo__inner{
	padding:8px var(--tbj-pad);
	overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.tbj-geo__inner::-webkit-scrollbar{display:none}
.tbj-geo__list{
	list-style:none;margin:0;padding:0;
	display:flex;gap:18px;align-items:center;flex-wrap:nowrap;width:max-content;
}
.tbj-geo__list a{
	color:#8b90a3;font-size:11px;white-space:nowrap;text-decoration:none;
	padding:2px 0;border-bottom:1px solid transparent;display:block;
}
.tbj-geo__list a:hover{color:var(--tbj-gold)}
.tbj-geo__list .current-menu-item a{color:var(--tbj-gold);border-bottom-color:var(--tbj-gold)}

/* -------------------------------------------------------------------------
   4. Ticker — CSS marquee, no JS, no "Loading…"
   ---------------------------------------------------------------------- */

.tbj-ticker{
	background:var(--tbj-ink);border-bottom:1px solid var(--tbj-navy);
	display:flex;align-items:center;gap:14px;padding:8px var(--tbj-pad);overflow:hidden;
}
.tbj-ticker__label{
	flex:none;display:flex;align-items:center;
	font-family:var(--tbj-mono);font-size:10px;font-weight:600;
	letter-spacing:.14em;text-transform:uppercase;color:var(--tbj-gold);
	padding-right:14px;border-right:1px solid #1e2a3a;height:20px;
}
.tbj-dot{
	width:6px;height:6px;background:var(--tbj-green-lit);border-radius:50%;
	display:inline-block;margin-right:7px;animation:tbj-pulse 2s infinite;
}
@keyframes tbj-pulse{0%,100%{opacity:1}50%{opacity:.25}}

.tbj-ticker__mask{position:relative;flex:1;overflow:hidden;min-width:0}
/* Only fade the right edge. The LIVE chip already closes off the left, and a
   gradient there just half-hid the first row. */
.tbj-ticker__mask::after{
	content:"";position:absolute;top:0;bottom:0;right:0;width:48px;z-index:2;
	pointer-events:none;background:linear-gradient(to left,var(--tbj-ink),transparent);
}

.tbj-ticker__track{
	display:flex;width:max-content;
	animation:tbj-scroll 60s linear infinite;   /* duration set inline from PHP */
	will-change:transform;
}
.tbj-ticker__track > span{display:flex}
.tbj-ticker:hover .tbj-ticker__track{animation-play-state:paused}
@keyframes tbj-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.tbj-t{
	color:#ccc;font-size:12px;white-space:nowrap;line-height:20px;
	padding:0 20px;border-right:1px solid #1e2a3a;text-decoration:none;flex:none;
}
a.tbj-t:hover{color:#fff}
a.tbj-t:hover strong{color:#fff}
.tbj-t strong{color:var(--tbj-gold);font-weight:600}
.tbj-t em{color:#666;font-style:normal;font-size:10px;margin-left:2px}
.tbj-draw{color:#666}
.tbj-up{color:var(--tbj-green-lit)}
.tbj-down{color:#cc3333}

/* -------------------------------------------------------------------------
   5. Hero banner — the homepage banner, now on every page
   ---------------------------------------------------------------------- */

.tbj-hero{background:var(--tbj-navy);border-bottom:3px solid var(--tbj-gold)}
.tbj-hero__inner{padding:48px var(--tbj-pad) 56px}
.tbj-hero--inner .tbj-hero__inner{padding:38px var(--tbj-pad) 42px}

.tbj-hero__label{
	color:var(--tbj-gold);font-size:11px;letter-spacing:2px;
	text-transform:uppercase;margin-bottom:14px;
}
.tbj-hero__title{
	color:#fff;font-family:var(--tbj-disp);font-weight:700;
	font-size:42px;line-height:1.25;margin:0 0 14px;max-width:620px;
}
.tbj-hero--inner .tbj-hero__title{font-size:34px;max-width:24ch}
.tbj-hero__text{
	color:var(--tbj-mute-dark);font-size:16px;line-height:1.7;
	margin:0 0 24px;max-width:520px;
}
.tbj-hero__btns{display:flex;gap:12px;flex-wrap:wrap}
.tbj-hero--inner .tbj-hero__btns{margin-top:22px}

.tbj-btn-primary,
.tbj-btn-secondary{
	font-family:var(--tbj-sans);font-size:14px;
	padding:12px 24px;border-radius:var(--tbj-radius);
	text-decoration:none;white-space:nowrap;display:inline-block;transition:.15s;
}
.tbj-btn-primary{background:var(--tbj-green);color:#fff}
.tbj-btn-primary:hover{background:var(--tbj-green-lit);color:#fff}
.tbj-btn-secondary{border:1px solid var(--tbj-gold);color:var(--tbj-gold)}
.tbj-btn-secondary:hover{background:var(--tbj-gold);color:var(--tbj-navy)}

/* The banner already says it — don't say it twice. */
.tbj-has-hero .ast-single-post .entry-title,
.tbj-has-hero .page .entry-header .entry-title,
.tbj-has-hero .ast-archive-description > .page-title{display:none}

/* -------------------------------------------------------------------------
   6. Content, cards, sidebar
   ---------------------------------------------------------------------- */

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comment-respond,
.widget{
	background:var(--tbj-card);
	border:1px solid var(--tbj-line);
	border-radius:var(--tbj-radius-lg);
}

.entry-content{font-size:16px;line-height:1.75}
.entry-content blockquote{
	border-left:3px solid var(--tbj-gold);background:#fff;
	padding:16px 20px;margin:24px 0;font-style:normal;color:var(--tbj-navy);
}

/* Section label — the gold-tick pattern from the homepage, reusable anywhere:
   <p class="tbj-label">Latest reviews</p> */
.tbj-label{
	border-left:3px solid var(--tbj-gold);padding-left:10px;margin-bottom:18px;
	color:var(--tbj-green);font-size:11px;letter-spacing:.18em;
	text-transform:uppercase;font-weight:500;
}

.widget-title{
	font-family:var(--tbj-sans) !important;font-size:11px !important;
	letter-spacing:.14em;text-transform:uppercase;color:var(--tbj-navy);font-weight:500;
}

/* Buttons everywhere: Gutenberg, Astra, Elementor */
.wp-block-button__link,
.ast-button,
button:not(.menu-toggle):not(.tbj-plain),
input[type="submit"],
.elementor-button{
	background:var(--tbj-green);
	color:#fff;
	border:1px solid var(--tbj-green);
	border-radius:var(--tbj-radius);
	font-family:var(--tbj-sans);
	font-weight:500;
	font-size:14px;
}
.wp-block-button__link:hover,
.ast-button:hover,
input[type="submit"]:hover,
.elementor-button:hover{background:var(--tbj-green-lit);border-color:var(--tbj-green-lit);color:#fff}

.wp-block-button.is-style-outline .wp-block-button__link{
	background:transparent;border-color:var(--tbj-gold);color:var(--tbj-gold);
}

/* -------------------------------------------------------------------------
   7. Footer — our own markup (see functions.php). Astra's is hidden.
   ---------------------------------------------------------------------- */

.site-footer,
.ast-small-footer,
.footer-adv{display:none !important}

.tbj-foot{background:var(--tbj-navy);border-top:3px solid var(--tbj-gold)}

.tbj-foot__top{
	display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
	padding:44px var(--tbj-pad) 36px;
}
.tbj-foot__logo{
	font-family:var(--tbj-disp);font-size:20px;font-weight:700;color:#fff;
	text-decoration:none;display:inline-block;
}
.tbj-foot__logo span{color:var(--tbj-gold)}
.tbj-foot__blurb{
	color:#8b90a3;font-size:13px;line-height:1.7;margin:12px 0 18px;max-width:44ch;
}
.tbj-foot__tg{
	display:inline-block;background:var(--tbj-gold);color:var(--tbj-navy);
	font-size:12px;font-weight:500;padding:9px 18px;border-radius:var(--tbj-radius);
	text-decoration:none;transition:.15s;
}
.tbj-foot__tg:hover{background:#fff;color:var(--tbj-navy)}

.tbj-foot__title{
	font-family:var(--tbj-sans) !important;font-size:10px !important;
	letter-spacing:.18em;text-transform:uppercase;color:var(--tbj-gold);
	font-weight:500;margin:0 0 14px;
}
.tbj-foot__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.tbj-foot__list a{color:#8b90a3;font-size:13px;text-decoration:none}
.tbj-foot__list a:hover{color:var(--tbj-gold)}

.tbj-foot__legal{
	border-top:1px solid var(--tbj-navy-line);
	padding:22px var(--tbj-pad);background:var(--tbj-ink);
}
.tbj-foot__legal p{
	font-family:var(--tbj-mono);font-size:10.5px;line-height:1.7;
	color:#767c8f;margin:0 0 8px;max-width:88ch;
}
.tbj-foot__legal p:last-child{margin-bottom:0}
.tbj-foot__legal p strong{color:var(--tbj-gold)}

.tbj-foot__bottom{
	display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
	padding:16px var(--tbj-pad);background:var(--tbj-ink);
	border-top:1px solid var(--tbj-navy-line);
}
.tbj-foot__bottom p{color:#767c8f;font-size:11px;margin:0}
.tbj-foot__legal-links{list-style:none;display:flex;gap:20px;flex-wrap:wrap;margin:0;padding:0}
.tbj-foot__legal-links a{color:#767c8f;font-size:11px;text-decoration:none}
.tbj-foot__legal-links a:hover{color:var(--tbj-gold)}

/* -------------------------------------------------------------------------
   8. Plugin components — retune the tokens, don't re-skin
   Higher specificity than the plugins' own `.bj` / `.bja` rules, so these win
   regardless of which stylesheet loads last.
   ---------------------------------------------------------------------- */

body .bj,
body .bja{
	--line:var(--tbj-line);
	--navy:var(--tbj-navy);
	--gold:var(--tbj-gold);
	--green:var(--tbj-green);
	--green-lit:var(--tbj-green-lit);
	--red:var(--tbj-red);
	--red-lit:var(--tbj-red-lit);
	--sans:var(--tbj-sans);
	--disp:var(--tbj-disp);
	--mono:var(--tbj-mono);
}

/* Match the site's rounded corners. */
body .bj-cta,
body .bja-cta,
body .bja-filters select,
body .bj-filters select,
body .bja-filters__go,
body .bj-filters__go{border-radius:var(--tbj-radius)}

body .bja-card,
body .bj-slip,
body .bja-hero,
body .bja-pc,
body .bj-chartbox,
body .bj-scoreboard,
body .bja-box{border-radius:var(--tbj-radius-lg)}

/* Cards sit on #f5f5f0, not white — lift them so the edges stay visible. */
body .bja-card,
body .bj-ledger{background:var(--tbj-card)}
body .bja-card{overflow:hidden}

/* The content link rule near the top of this file scores 0-3-1, while the
   plugins style their buttons with a single class at 0-1-0. It was winning and
   painting green text onto green buttons. These restate the button colours at
   0-3-2, so they win on specificity rather than on load order. */
body .entry-content .bj a.bj-cta,
body .entry-content .bja a.bja-cta{color:#fff;text-decoration:none}
body .entry-content .bj a.bj-cta:hover,
body .entry-content .bja a.bja-cta:hover{color:var(--green-lit);text-decoration:none}

/* "Read the full breakdown" / "Read review" — gold on navy is the house rule for
   a link that takes you somewhere. The rule above was painting them green, which
   on a navy slip is close to unreadable. */
body .entry-content .bj a.bj-more,
body .entry-content .bja .bja-row__side a.bja-review-link{
	color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold);
}
body .entry-content .bj a.bj-more:hover,
body .entry-content .bja .bja-row__side a.bja-review-link:hover{color:#fff;border-bottom-color:#fff}

body .entry-content .bja .bja-card__foot a.bja-review-link{color:var(--navy);text-decoration:none}
body .entry-content .bja .bja-card__foot a.bja-review-link:hover{color:#fff}

/* Ledger match names link through to the tip. */
body .entry-content .bj .bj-ledger a.bj-t{color:var(--navy);text-decoration:none}
body .entry-content .bj .bj-ledger a.bj-t:hover{color:var(--green)}

body .entry-content .bja a.bja-row__logo,
body .entry-content .bja a.bja-card__top,
body .entry-content .bja a.bja-box__logo{color:#fff;text-decoration:none}

body .entry-content .bja a.bja-filters__clear,
body .entry-content .bj a.bj-filters__clear{color:var(--muted-ink)}
body .entry-content .bja a.bja-filters__clear:hover,
body .entry-content .bj a.bj-filters__clear:hover{color:var(--red)}

/* -------------------------------------------------------------------------
   9. Responsive
   ---------------------------------------------------------------------- */

@media (max-width:920px){
	.tbj-nav__links{display:none}
	.tbj-burger{display:flex}
	.tbj-nav__cta{font-size:11px;padding:7px 12px}
	.tbj-foot__top{grid-template-columns:1fr 1fr;gap:30px}
	.tbj-foot__brand{grid-column:1/-1}
}

@media (max-width:768px){
	:root{--tbj-pad:16px}
	.tbj-nav__inner{height:56px;gap:10px}
	.tbj-nav__cta{font-size:11px;padding:7px 10px}
	.tbj-hero__inner{padding:32px 16px 40px}
	.tbj-hero--inner .tbj-hero__inner{padding:26px 16px 30px}
	.tbj-hero__title{font-size:28px}
	.tbj-hero--inner .tbj-hero__title{font-size:24px}
	.tbj-hero__text{font-size:14px}
	.tbj-ticker{gap:10px}
	.tbj-ticker__mask::after{width:28px}
	.tbj-t{padding:0 14px}
	.tbj-foot__top{grid-template-columns:1fr;gap:26px;padding:32px 16px 26px}
	.tbj-foot__bottom{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
	.tbj-ticker__track{animation:none}
	.tbj-dot{animation:none}
}