/* creditcardsportsbooks.com — custom.css
 * The site's base design lives in the child theme's style.css (loaded first).
 * This file adds the components the GenerateBlocks pages use.
 */

/* 01 tokens */
:root {
	--ccs-accent: #f08507;          /* brand orange, as in style.css buttons */
	--ccs-on-accent: #ffffff;
	--ccs-accent-ink: #b85c00;       /* orange for text links (4.6:1 on white) */
	--ccs-muted: #5f6b76;            /* secondary text, e.g. dates */
	--ccs-surface: #ffffff;
	--ccs-surface-head: #f3f5f7;    /* box title band */
	--ccs-border: #c9d0d7;          /* box / table lines */
	--ccs-rule: #d9dee3;            /* section divider */
	--ccs-tint-warm: #ffe8c7;       /* tip callout background */
	--ccs-border-warm: #eaa24a;
	--ccs-tint-blue: #e1ecf8;       /* editor's note background */
	--ccs-border-blue: #9dbde0;
	/* Box headers: solid section colours with white titles (all >= 4.5:1 on white text) */
	--ccs-head-offshore: #c2410c;   /* red-orange */
	--ccs-head-regulated: #2e7d32;  /* green */
	--ccs-head-brand: #1d4f91;      /* blue */
	--ccs-head-ink: #ffffff;
	--ccs-radius: 4px;
	--ccs-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	--ccs-gap: 20px;
	--ccs-title-gap: 30px;          /* space between the header and the H1 */
	--ccs-icon: 40px;
	--ccs-icon-sm: 28px;
}

/* 05 components */

/* Affiliate disclosure — lightly set apart from the copy around it */
/* Styled to match the editor's-note callout (.c-tip--editor) */
.c-disclosure {
	margin: 0 0 1.5em;
	padding: 16px var(--ccs-gap);
	background: var(--ccs-tint-blue);
	border: 1px solid var(--ccs-border-blue);
	border-radius: var(--ccs-radius);
}

.c-disclosure h2 {
	margin: 0 0 .3em;
	font-size: 1em;
	color: var(--color-blue);
}

.c-disclosure p:last-child {
	margin-bottom: 0;
}

/* Stand-out tip ("Pro Tip:" paragraphs) */
.c-tip {
	margin: 0 0 1.5em;
	padding: 16px var(--ccs-gap);
	background: var(--ccs-tint-warm);
	border: 1px solid var(--ccs-border-warm);
	border-radius: var(--ccs-radius);
}

.c-tip p {
	margin-bottom: 0;
}

.c-tip strong:first-child {
	color: var(--ccs-accent);
}

/* Editor's note: same callout in the site's blue (--color-blue in style.css) */
.c-tip--editor {
	background: var(--ccs-tint-blue);
	border-color: var(--ccs-border-blue);
}

.c-tip--editor strong:first-child {
	color: var(--color-blue);
}

/* FAQ question headings with a question-mark icon */
.c-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 1.2em 0 .4em;
}

.c-faq__q::before {
	content: "?";
	flex: none;
	width: 28px;
	height: 28px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--ccs-accent);
	color: var(--ccs-on-accent);
	font-size: 17px;
	line-height: 28px;
	text-align: center;
}

/* Operator icon (square library logo, 100x100 source) */
.c-op-icon {
	flex: none;
	width: var(--ccs-icon);
	height: var(--ccs-icon);
	border-radius: var(--ccs-radius);
}

/* Operator icon over its name in a table cell (linked to the affiliate URL) */
.c-op-name {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.2;
	color: var(--text-dark);
	text-decoration: none;
}

a.c-op-name:hover,
a.c-op-name:focus-visible {
	color: var(--ccs-accent);
}

.c-op-name .c-op-icon {
	width: var(--ccs-icon);
	height: var(--ccs-icon);
}

/* One sportsbook in the offshore / regulated lists */
.c-op-box {
	--box-head-bg: var(--ccs-surface-head);
	--box-line: var(--ccs-border);
	margin: 0 0 var(--ccs-gap);
	padding: var(--ccs-gap);
	background: var(--ccs-surface);
	border: 1px solid var(--box-line);
	border-radius: var(--ccs-radius);
	box-shadow: var(--ccs-shadow);
}

/* One header colour per section */
.c-op-box--offshore {
	--box-head-bg: var(--ccs-head-offshore);
	--box-line: var(--ccs-head-offshore);
	--box-head-ink: var(--ccs-head-ink);
}

.c-op-box--regulated {
	--box-head-bg: var(--ccs-head-regulated);
	--box-line: var(--ccs-head-regulated);
	--box-head-ink: var(--ccs-head-ink);
}

.c-op-box--brand {
	--box-head-bg: var(--ccs-head-brand);
	--box-line: var(--ccs-head-brand);
	--box-head-ink: var(--ccs-head-ink);
}

/* Title band: tinted strip across the top of the box */
.c-op-box__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: calc(var(--ccs-gap) * -1) calc(var(--ccs-gap) * -1) .8em;
	padding: 12px var(--ccs-gap);
	background: var(--box-head-bg);
	color: var(--box-head-ink, inherit);
	border-bottom: 1px solid var(--box-line);
	border-radius: var(--ccs-radius) var(--ccs-radius) 0 0;
}

/* Tables: visible cell lines and an outer frame (header + zebra come from style.css) */
.wp-block-table table {
	border: 1px solid var(--ccs-border);
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--ccs-border);
}

/* Page title: the content area has no top padding (left over from the BB layout),
   so the H1 sat 10px under the header. */
.entry-content > h1.gb-text:first-child {
	margin-top: var(--ccs-title-gap);
}

/* Sections: a rule above each top-level H2 separates the page into clear blocks */
.entry-content > h2.gb-text {
	margin-top: 1.6em;
	padding-top: .8em;
	border-top: 1px solid var(--ccs-rule);
}

.c-op-box p:last-child {
	margin-bottom: 0;
}

/* style.css floats a.btn; keep the button inside the box */
.c-op-box__action {
	display: flow-root;
}

/* style.css fixes a.btn at 180px; long names ("SportsBetting.ag") wrapped */
.c-op-box__action .btn {
	width: auto;
	min-width: 180px;
}

/* News page: latest-posts card grid (GB query loop on /news/) */
.c-news__intro {
	margin-bottom: 1.5em;
}

.c-news__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ccs-gap);
}

.c-news__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ccs-surface);
	border: 1px solid var(--ccs-border);
	border-radius: var(--ccs-radius);
	box-shadow: var(--ccs-shadow);
}

.c-news__thumb {
	display: block;
}

.c-news__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.c-news__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .5em;
	padding: 16px var(--ccs-gap) var(--ccs-gap);
}

.c-news__date {
	margin: 0;
	font-size: 14px;
	color: var(--ccs-muted);
}

.c-news__title {
	margin: 0;
	font-size: 1.15em;
	line-height: 1.3;
}

.c-news__title a {
	color: var(--text-dark);
	text-decoration: none;
}

.c-news__title a:hover,
.c-news__title a:focus-visible {
	color: var(--ccs-accent);
}

.c-news__excerpt {
	margin: 0;
	font-size: 15px;
}

/* pushed to the bottom so every card's link lines up */
.c-news__more {
	margin-top: auto;
	padding-top: .5em;
	font-weight: bold;
	color: var(--ccs-accent-ink);
	text-decoration: none;
}

.c-news__more:hover,
.c-news__more:focus-visible {
	text-decoration: underline;
}

.c-news__pages {
	margin-top: var(--ccs-gap);
	text-align: center;
}

@media (max-width: 1024px) {
	.c-news__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.c-news__grid {
		grid-template-columns: 1fr;
	}
}