/*
 * ============================================================
 *  COLORBLIND GAMES — Custom Brand CSS
 *  Paste this into: WordPress Admin → Appearance → Customize
 *  → Additional CSS
 *
 *  Theme: Ixion (WordPress.com)
 *  Brand colors:
 *    Primary dark   #1F1F1F
 *    Slate accent   #7A8FA3
 *    Light accent   #A7B8C9
 *    Surface gray   #F8F9FB
 *    Border gray    #EFEFEF
 *  Font: Plus Jakarta Sans (loaded below via @import)
 * ============================================================
 */
/* ── 0. FONT IMPORT ────────────────────────────────────────
   Plus Jakarta Sans is the closest freely available match
   to Satoshi. If you purchase/self-host Satoshi, replace
   the @import and update font-family references below.
   ──────────────────────────────────────────────────────── */
/* ── 1. CSS CUSTOM PROPERTIES ──────────────────────────── */
:root {
}

/* ── 2. GLOBAL TYPOGRAPHY ──────────────────────────────── */
body,
.site,
.entry-content,
.widget,
input,
textarea,
select,
button {
	font-family: var(--cbg-font) !important;
	color: var(--cbg-text-main);
	-webkit-font-smoothing: antialiased;
}

/* Body text */
body {
	font-size: 16px;
	line-height: 1.75;
	background-color: var(--cbg-white);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title {
	font-family: var(--cbg-font) !important;
	font-weight: 700;
	color: var(--cbg-dark);
	letter-spacing: -.02em;
	line-height: 1.25;
}

h1, .entry-title {
	font-size: 2rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.2rem;
}

h4 {
	font-size: 1rem;
	font-weight: 600;
}

/* Body copy inside posts */
.entry-content p,
.entry-content li {
	font-size: 1rem;
	line-height: 1.8;
	color: #444;
}

/* Links — replace WordPress default blue */
a,
.entry-content a {
	color: var(--cbg-slate);
	text-decoration: underline;
	text-decoration-color: var(--cbg-slate-light);
	text-underline-offset: 3px;
	transition: color .15s ease;
}

a:hover,
.entry-content a:hover {
	color: var(--cbg-dark);
	text-decoration-color: var(--cbg-dark);
}

/* Remove WordPress default blue from nav (handled separately) */
.main-navigation a,
.nav-links a,
.menu a {
	text-decoration: none;
}

/* ── 3. SITE HEADER & NAVIGATION ───────────────────────── */
.site-header,
#masthead {
	background-color: var(--cbg-white) !important;
	border-bottom: 1px solid var(--cbg-border) !important;
	padding: 0 !important;
}

/* Header inner wrapper */
.site-header .site-branding,
.site-header .wrap,
#masthead .wrap {
	display: flex;
	align-items: center;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 32px;
	height: 64px;
}

/* Site title (text fallback if logo not set) */
.site-title,
.site-title a {
	font-family: var(--cbg-font) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--cbg-dark) !important;
	letter-spacing: -.02em;
	text-decoration: none !important;
}

/* Site description / tagline */
.site-description {
	font-size: .7rem;
	color: var(--cbg-text-faint);
	font-weight: 400;
	margin: 0;
}

/* Logo sizing */
.custom-logo,
.site-logo img {
	max-height: 40px !important;
	width: auto !important;
}

/* Navigation menu */
.main-navigation,
.primary-menu-container,
#site-navigation {
	background: transparent !important;
}

.main-navigation ul li a,
.primary-menu li a,
#site-navigation li a {
	font-family: var(--cbg-font) !important;
	font-size: .85rem !important;
	font-weight: 500 !important;
	color: var(--cbg-text-muted) !important;
	padding: 6px 12px !important;
	border-radius: var(--cbg-radius-sm);
	transition: color .15s ease, background .15s ease;
	text-decoration: none !important;
}

.main-navigation ul li a:hover,
.primary-menu li a:hover,
#site-navigation li a:hover,
.main-navigation ul li.current-menu-item > a,
.primary-menu li.current-menu-item > a {
	color: var(--cbg-dark) !important;
	background-color: var(--cbg-surface) !important;
}

/* Mobile menu toggle button */
.menu-toggle,
.nav-toggle {
	background: var(--cbg-dark) !important;
	color: var(--cbg-white) !important;
	border: none !important;
	border-radius: var(--cbg-radius-sm) !important;
	font-family: var(--cbg-font) !important;
	font-size: .8rem !important;
	font-weight: 600 !important;
	padding: 8px 16px !important;
}

/* ── 4. CONTENT AREA LAYOUT ────────────────────────────── */
.site-content,
#content,
.content-area {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 32px;
}

/* Post feed / loop */
.blog .hentry,
.archive .hentry,
.home .hentry {
	border-bottom: 1px solid var(--cbg-border);
	padding-bottom: 36px;
	margin-bottom: 36px;
}

/* Post title in loop */
.entry-title a {
	color: var(--cbg-dark) !important;
	text-decoration: none !important;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -.02em;
	transition: color .15s ease;
}

.entry-title a:hover {
	color: var(--cbg-slate) !important;
}

/* Post meta (date, author, category) */
.entry-meta,
.posted-on,
.byline,
.cat-links,
.tags-links {
	font-size: .75rem !important;
	color: var(--cbg-text-faint) !important;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.entry-meta a,
.posted-on a,
.byline a,
.cat-links a {
	color: var(--cbg-slate) !important;
	text-decoration: none !important;
	font-weight: 600;
}

/* Continue reading link */
.more-link,
a.more-link {
	display: inline-block;
	margin-top: 12px;
	font-size: .8rem;
	font-weight: 700;
	color: var(--cbg-dark) !important;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-bottom: 2px solid var(--cbg-slate);
	padding-bottom: 1px;
	transition: border-color .15s ease;
}

.more-link:hover,
a.more-link:hover {
	border-color: var(--cbg-dark);
}

/* Featured image */
.post-thumbnail img,
.entry-content img {
	border-radius: var(--cbg-radius-md);
	max-width: 100%;
	height: auto;
}

/* Post thumbnail in loop */
.post-thumbnail {
	margin-bottom: 16px;
}

/* ── 5. SINGLE POST / ARTICLE PAGE ─────────────────────── */
.single .entry-header {
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cbg-border);
}

.single .entry-title {
	font-size: 2rem;
	line-height: 1.2;
	margin-bottom: 10px;
}

/* Article body text */
.single .entry-content p {
	margin-bottom: 1.4em;
}

/* Blockquotes */
.entry-content blockquote {
	border-left: 3px solid var(--cbg-slate) !important;
	margin: 1.5em 0 !important;
	padding: 12px 20px !important;
	background: var(--cbg-surface) !important;
	border-radius: 0 var(--cbg-radius-sm) var(--cbg-radius-sm) 0 !important;
	font-style: italic;
	color: var(--cbg-text-muted);
}

.entry-content blockquote p {
	margin: 0 !important;
	font-size: .95rem;
}

/* Inline code */
.entry-content code {
	background: var(--cbg-surface);
	border: 1px solid var(--cbg-border);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: .85em;
}

/* Article footer */
.entry-footer {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--cbg-border);
	font-size: .8rem;
	color: var(--cbg-text-faint);
}

.entry-footer a {
	color: var(--cbg-slate) !important;
}

/* ── 6. CATEGORIES & TAGS (pills) ───────────────────────── */
.cat-links a,
.tags-links a,
.wp-block-post-terms a {
	display: inline-block;
	background: var(--cbg-surface) !important;
	color: var(--cbg-text-muted) !important;
	border: 1px solid var(--cbg-border) !important;
	border-radius: 20px !important;
	padding: 3px 10px !important;
	font-size: .7rem !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none !important;
	transition: background .15s ease, color .15s ease;
}

.cat-links a:hover,
.tags-links a:hover {
	background: #EEF2F6 !important;
	color: var(--cbg-slate) !important;
	border-color: var(--cbg-slate) !important;
}

/* "Reviews" category — slate accent */
.cat-links a[href*="review"],
.cat-links a[href*="reviews"] {
	background: #EEF2F6 !important;
	color: #5a7282 !important;
	border-color: #c8d8e4 !important;
}

/* "Essay" category — dark */
.cat-links a[href*="essay"] {
	background: #F0F0F0 !important;
	color: #444 !important;
	border-color: #d8d8d8 !important;
}

/* "Mods" category */
.cat-links a[href*="mod"],
.cat-links a[href*="mods"] {
	background: #EAF3F0 !important;
	color: #3d7060 !important;
	border-color: #b8d8ce !important;
}

/* ── 7. SIDEBAR ─────────────────────────────────────────── */
.widget-area,
#secondary {
	padding-left: 32px;
}

.widget {
	margin-bottom: 32px;
	padding: 20px 22px;
	background: var(--cbg-surface);
	border-radius: var(--cbg-radius-lg);
	border: 1px solid var(--cbg-border);
}

.widget-title {
	font-size: .7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .08em !important;
	color: var(--cbg-text-faint) !important;
	margin-bottom: 12px !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid var(--cbg-border) !important;
}

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget ul li {
	padding: 5px 0;
	border-bottom: 1px solid var(--cbg-border);
	font-size: .85rem;
}

.widget ul li:last-child {
	border-bottom: none;
}

.widget ul li a {
	color: var(--cbg-text-main) !important;
	text-decoration: none !important;
	font-weight: 500;
	transition: color .15s ease;
}

.widget ul li a:hover {
	color: var(--cbg-slate) !important;
}

/* Search widget */
.widget .search-field {
	font-family: var(--cbg-font) !important;
	border: 1px solid var(--cbg-border-mid) !important;
	border-radius: var(--cbg-radius-sm) !important;
	padding: 8px 12px !important;
	font-size: .85rem !important;
	width: 100%;
	outline: none;
	transition: border-color .15s ease;
}

.widget .search-field:focus {
	border-color: var(--cbg-slate) !important;
}

.widget .search-submit {
	background: var(--cbg-dark) !important;
	color: var(--cbg-white) !important;
	border: none !important;
	border-radius: var(--cbg-radius-sm) !important;
	font-family: var(--cbg-font) !important;
	font-size: .8rem !important;
	font-weight: 600 !important;
	padding: 8px 14px !important;
	cursor: pointer;
	margin-top: 8px;
	width: 100%;
}

/* ── 8. BUTTONS ─────────────────────────────────────────── */
.wp-block-button__link,
input[type="submit"],
button[type="submit"],
.button {
	font-family: var(--cbg-font) !important;
	font-weight: 600 !important;
	font-size: .85rem !important;
	border-radius: var(--cbg-radius-sm) !important;
	transition: background .15s ease, color .15s ease !important;
	cursor: pointer !important;
}

/* Primary button */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
input[type="submit"],
button[type="submit"] {
	background-color: var(--cbg-dark) !important;
	color: var(--cbg-white) !important;
	border: none !important;
	padding: 10px 22px !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: #333 !important;
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--cbg-dark) !important;
	border: 1.5px solid var(--cbg-border-mid) !important;
	padding: 10px 22px !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--cbg-dark) !important;
	background: var(--cbg-surface) !important;
}

/* ── 9. FOOTER ──────────────────────────────────────────── */
.site-footer,
#colophon {
	background-color: var(--cbg-dark) !important;
	color: rgba(255,255,255,0.6) !important;
	padding: 40px 0 24px !important;
	margin-top: 60px;
}

.site-footer a {
	color: var(--cbg-slate-light) !important;
	text-decoration: none !important;
	transition: color .15s ease;
}

.site-footer a:hover {
	color: #fff !important;
}

.site-footer .site-info {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 32px;
	font-size: .75rem;
	color: rgba(255,255,255,0.35);
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 20px;
	margin-top: 32px;
	text-align: center;
}

/* Hide "Powered by WordPress.com" line */
.site-footer .powered-by,
.site-footer a[href*="wordpress.com"] {
	display: none !important;
}

.site-footer .widget-title {
	color: rgba(255,255,255,0.4) !important;
	border-bottom-color: rgba(255,255,255,0.08) !important;
}

.site-footer .widget ul li {
	border-bottom-color: rgba(255,255,255,0.06) !important;
}

.site-footer .widget ul li a {
	color: rgba(255,255,255,0.65) !important;
}

.site-footer .widget ul li a:hover {
	color: #fff !important;
}

/* ── 10. PAGINATION ──────────────────────────────────────── */
.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--cbg-border);
	border-radius: var(--cbg-radius-sm);
	font-size: .8rem;
	font-weight: 600;
	color: var(--cbg-text-muted) !important;
	text-decoration: none !important;
	transition: all .15s ease;
}

.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	background: var(--cbg-surface);
	color: var(--cbg-dark) !important;
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: var(--cbg-dark) !important;
	color: #fff !important;
	border-color: var(--cbg-dark) !important;
}

/* ── 11. RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
	.site-content,
	  #content,
	  .content-area {
		padding: 0 20px;
	}
	
	.single .entry-title,
	  h1,
	  .entry-title {
		font-size: 1.5rem !important;
	}
	
	.widget-area,
	  #secondary {
		padding-left: 0;
		margin-top: 40px;
	}
	
	.site-footer .site-info {
		padding: 0 20px;
		padding-top: 20px;
		text-align: center;
	}
}

@media (max-width: 480px) {
	h1,
	  .entry-title {
		font-size: 1.3rem !important;
	}
	
	body {
		font-size: 15px;
	}
}

/* ── 12. SMALL EXTRAS ────────────────────────────────────── */
/* Horizontal rule */
hr {
	border: none;
	border-top: 1px solid var(--cbg-border);
	margin: 2em 0;
}

/* Tables */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
	margin: 1.5em 0;
}

.entry-content th {
	background: var(--cbg-surface);
	font-weight: 700;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--cbg-text-muted);
	padding: 10px 14px;
	border-bottom: 2px solid var(--cbg-border);
	text-align: left;
}

.entry-content td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--cbg-border);
	vertical-align: top;
}

.entry-content tr:last-child td {
	border-bottom: none;
}

/* Like button (WordPress.com native) */
.sharedaddy,
.sd-like-widget {
	border-top: 1px solid var(--cbg-border) !important;
	margin-top: 32px !important;
	padding-top: 20px !important;
}

/* Smooth focus outlines for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--cbg-slate);
	outline-offset: 3px;
	border-radius: 3px;
}

css/* Remove extra padding above homepage hero */
.home .entry-header,
.home .page-header {
  display: none;
}

.home .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.home .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.home .entry-header {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.home .page-title,
.home h1.entry-title {
  display: none !important;
}