/**
 * GTA6 Basecamp — block styles & content typography.
 * Loaded on the front end AND inside the block editor (add_editor_style),
 * so posts look the same in both places.
 */

:root {
	--gb-bg: #07060d;
	--gb-bg-2: #0d0b1a;
	--gb-surface: #151229;
	--gb-surface-2: #1d1838;
	--gb-border: #2e2752;
	--gb-text: #ece9f7;
	--gb-muted: #b7b1cf;
	--gb-pink: #ff2bd6;
	--gb-pink-text: #ff5ee0;
	--gb-cyan: #00f0ff;
	--gb-orange: #ff7a18;
	--gb-orange-text: #ff9447;
	--gb-purple: #8b5cf6;
	--gb-purple-text: #b197fc;
	--gb-green: #3ef5a0;
	--gb-red: #ff4f7b;
	--gb-accent: var(--gb-pink);
	--gb-accent-text: var(--gb-pink-text);
	--gb-font-head: var(--wp--preset--font-family--heading, Orbitron, Rajdhani, "Segoe UI", system-ui, sans-serif);
	--gb-font-body: var(--wp--preset--font-family--body, Inter, system-ui, sans-serif);
	--gb-font-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	--gb-radius: 14px;
	--gb-radius-sm: 10px;
	--gb-gradient: linear-gradient(135deg, var(--gb-pink) 0%, var(--gb-purple) 50%, var(--gb-cyan) 100%);
	--gb-gradient-sunset: linear-gradient(135deg, var(--gb-orange) 0%, var(--gb-pink) 100%);
	--gb-glow-pink: 0 0 6px rgba(255, 43, 214, 0.55), 0 0 22px rgba(255, 43, 214, 0.3);
	--gb-glow-cyan: 0 0 6px rgba(0, 240, 255, 0.55), 0 0 22px rgba(0, 240, 255, 0.3);
	--gb-header-h: 68px;
}

/* ---------------------------------------------------------------------------
 * Content typography (front: .entry-content, editor: .is-root-container)
 * ------------------------------------------------------------------------ */

:where(.entry-content, .is-root-container) {
	color: var(--gb-text);
	font-family: var(--gb-font-body);
	overflow-wrap: break-word;
}

:where(.entry-content, .is-root-container) > * + * {
	margin-block-start: 1.25em;
}

:where(.entry-content, .is-root-container) :where(h2, h3, h4) {
	scroll-margin-top: calc(var(--gb-header-h) + 28px);
}

:where(.entry-content, .is-root-container) h2 {
	position: relative;
	margin-block-start: 2.4em;
	padding-inline-start: 0.85rem;
}

:where(.entry-content, .is-root-container) h2::before {
	content: "";
	position: absolute;
	inset-block: 0.2em;
	inset-inline-start: 0;
	width: 4px;
	border-radius: 4px;
	background: var(--gb-gradient);
	box-shadow: var(--gb-glow-pink);
}

:where(.entry-content, .is-root-container) h3 {
	margin-block-start: 2em;
	color: var(--gb-cyan);
}

:where(.entry-content, .is-root-container) a:where(:not(.wp-element-button)) {
	color: var(--gb-cyan);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

:where(.entry-content, .is-root-container) a:where(:not(.wp-element-button)):hover {
	color: var(--gb-pink-text);
	text-decoration-thickness: 2px;
}

:where(.entry-content, .is-root-container) :where(ul, ol):not([class*="is-style-gb"]) {
	padding-inline-start: 1.4em;
}

:where(.entry-content, .is-root-container) li + li {
	margin-top: 0.4em;
}

:where(.entry-content, .is-root-container) ul:not([class*="is-style-gb"]) > li::marker {
	color: var(--gb-pink);
}

:where(.entry-content, .is-root-container) ol:not([class*="is-style-gb"]) > li::marker {
	color: var(--gb-cyan);
	font-family: var(--gb-font-head);
	font-weight: 700;
}

:where(.entry-content, .is-root-container) strong {
	color: #fff;
}

:where(.entry-content, .is-root-container) :not(pre) > code {
	padding: 0.12em 0.4em;
	border-radius: 6px;
	background: var(--gb-surface-2);
	color: var(--gb-cyan);
	font-family: var(--gb-font-mono);
	font-size: 0.9em;
}

:where(.entry-content, .is-root-container) hr,
:where(.entry-content, .is-root-container) .wp-block-separator {
	height: 2px;
	border: 0;
	background: var(--gb-gradient);
	opacity: 0.6;
	margin-block: 2.5em;
}

:where(.entry-content, .is-root-container) img {
	max-width: 100%;
	height: auto;
}

:where(.entry-content, .is-root-container) figcaption,
:where(.entry-content, .is-root-container) .wp-element-caption {
	margin-top: 0.6em;
	color: var(--gb-muted);
	font-size: 0.875rem;
	text-align: center;
}

:where(.entry-content, .is-root-container) .wp-block-table {
	overflow-x: auto;
}

:where(.entry-content, .is-root-container) table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

:where(.entry-content, .is-root-container) :where(th, td) {
	padding: 0.7em 0.9em;
	border: 1px solid var(--gb-border);
	text-align: start;
}

:where(.entry-content, .is-root-container) thead th,
:where(.entry-content, .is-root-container) table th {
	background: var(--gb-surface-2);
	color: #fff;
	font-family: var(--gb-font-head);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

:where(.entry-content, .is-root-container) .is-style-stripes tbody tr:nth-child(odd) {
	background: rgba(255, 255, 255, 0.03);
}

:where(.entry-content, .is-root-container) blockquote {
	margin-inline: 0;
	color: var(--gb-text);
}

:where(.entry-content, .is-root-container) blockquote cite {
	display: block;
	margin-top: 0.5em;
	color: var(--gb-muted);
	font-size: 0.875rem;
	font-style: normal;
}

:where(.entry-content, .is-root-container) .wp-block-embed iframe {
	max-width: 100%;
	border-radius: var(--gb-radius-sm);
}

:where(.entry-content, .is-root-container) .wp-block-image img {
	border-radius: 12px;
}

/* ---------------------------------------------------------------------------
 * Callout base (Pro Tip, Warning, Key Facts, Update Log)
 * ------------------------------------------------------------------------ */

.wp-block-group:is(.is-style-gb-pro-tip, .is-style-gb-warning, .is-style-gb-key-facts, .is-style-gb-update-log) {
	position: relative;
	margin-block: 2em;
	padding: 1.15rem 1.25rem 1.15rem 3.4rem;
	border-radius: var(--gb-radius);
	color: var(--gb-text);
}

.wp-block-group:is(.is-style-gb-pro-tip, .is-style-gb-warning, .is-style-gb-key-facts, .is-style-gb-update-log) > * {
	margin-block: 0;
}

.wp-block-group:is(.is-style-gb-pro-tip, .is-style-gb-warning, .is-style-gb-key-facts, .is-style-gb-update-log) > * + * {
	margin-block-start: 0.6em;
}

.wp-block-group:is(.is-style-gb-pro-tip, .is-style-gb-warning, .is-style-gb-key-facts, .is-style-gb-update-log)::before {
	content: "";
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	width: 1.5rem;
	height: 1.5rem;
	background: currentColor;
	-webkit-mask: var(--gb-callout-icon) center / contain no-repeat;
	mask: var(--gb-callout-icon) center / contain no-repeat;
	color: var(--gb-callout-color);
	filter: drop-shadow(0 0 6px var(--gb-callout-color));
}

.gb-callout__title,
.wp-block-group[class*="is-style-gb-"] > p:first-child > strong:only-child {
	color: var(--gb-callout-color);
	font-family: var(--gb-font-head);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gb-callout__title strong {
	color: inherit;
}

/* Pro Tip — cyan */
.wp-block-group.is-style-gb-pro-tip {
	--gb-callout-color: var(--gb-cyan);
	--gb-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
	border: 1px solid rgba(0, 240, 255, 0.45);
	border-left: 4px solid var(--gb-cyan);
	background: linear-gradient(90deg, rgba(0, 240, 255, 0.1), rgba(0, 240, 255, 0.03));
	box-shadow: inset 0 0 24px rgba(0, 240, 255, 0.06);
}

/* Warning — orange */
.wp-block-group.is-style-gb-warning {
	--gb-callout-color: var(--gb-orange-text);
	--gb-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E");
	border: 1px solid rgba(255, 122, 24, 0.5);
	border-left: 4px solid var(--gb-orange);
	background: linear-gradient(90deg, rgba(255, 122, 24, 0.12), rgba(255, 122, 24, 0.03));
}

/* Key Facts — gradient border box */
.wp-block-group.is-style-gb-key-facts {
	--gb-callout-color: var(--gb-pink-text);
	--gb-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
	border: 2px solid transparent;
	background:
		linear-gradient(var(--gb-surface), var(--gb-surface)) padding-box,
		var(--gb-gradient) border-box;
	box-shadow: 0 0 28px rgba(139, 92, 246, 0.18);
}

.wp-block-group.is-style-gb-key-facts ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.wp-block-group.is-style-gb-key-facts li {
	position: relative;
	margin: 0;
	padding-inline-start: 1.2rem;
}

.wp-block-group.is-style-gb-key-facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	transform: rotate(45deg);
	background: var(--gb-cyan);
	box-shadow: var(--gb-glow-cyan);
}

/* Update Log — purple timeline */
.wp-block-group.is-style-gb-update-log {
	--gb-callout-color: var(--gb-purple-text);
	--gb-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
	border: 1px dashed rgba(177, 151, 252, 0.55);
	background: rgba(139, 92, 246, 0.07);
	font-size: 0.94rem;
}

.wp-block-group.is-style-gb-update-log ul {
	list-style: none;
	padding: 0 0 0 0.9rem;
	border-left: 2px solid rgba(177, 151, 252, 0.35);
}

.wp-block-group.is-style-gb-update-log li {
	position: relative;
	margin: 0;
	padding: 0.15rem 0 0.15rem 0.6rem;
}

.wp-block-group.is-style-gb-update-log li::before {
	content: "";
	position: absolute;
	left: calc(-0.9rem - 6px);
	top: 0.72em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gb-purple);
	box-shadow: 0 0 8px var(--gb-purple);
}

.wp-block-group.is-style-gb-update-log li strong {
	color: var(--gb-purple-text);
}

/* ---------------------------------------------------------------------------
 * Spoiler (core/details)
 * ------------------------------------------------------------------------ */

.wp-block-details.is-style-gb-spoiler {
	margin-block: 2em;
	border: 1px solid rgba(255, 43, 214, 0.5);
	border-radius: var(--gb-radius);
	background: repeating-linear-gradient(-45deg, rgba(255, 43, 214, 0.06) 0 12px, rgba(255, 43, 214, 0.02) 12px 24px);
	overflow: hidden;
}

.wp-block-details.is-style-gb-spoiler > summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.2rem;
	cursor: pointer;
	list-style: none;
	color: var(--gb-pink-text);
	font-family: var(--gb-font-head);
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wp-block-details.is-style-gb-spoiler > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-gb-spoiler > summary::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10 10 0 0 1 12 20c-7 0-10-8-10-8a18 18 0 0 1 4.1-5.9M9.9 4.2A9 9 0 0 1 12 4c7 0 10 8 10 8a18 18 0 0 1-2.2 3.2M14.1 14.1a3 3 0 1 1-4.2-4.2M1 1l22 22'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10 10 0 0 1 12 20c-7 0-10-8-10-8a18 18 0 0 1 4.1-5.9M9.9 4.2A9 9 0 0 1 12 4c7 0 10 8 10 8a18 18 0 0 1-2.2 3.2M14.1 14.1a3 3 0 1 1-4.2-4.2M1 1l22 22'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-details.is-style-gb-spoiler > summary::after {
	content: "+";
	margin-inline-start: auto;
	font-size: 1.3rem;
	line-height: 1;
}

.wp-block-details.is-style-gb-spoiler[open] > summary::after {
	content: "−";
}

.wp-block-details.is-style-gb-spoiler[open] > summary {
	border-bottom: 1px solid rgba(255, 43, 214, 0.35);
}

.wp-block-details.is-style-gb-spoiler > :not(summary) {
	margin: 0;
	padding: 1rem 1.2rem;
	background: var(--gb-surface);
}

.wp-block-details.is-style-gb-spoiler > :not(summary) + :not(summary) {
	padding-top: 0;
}

/* ---------------------------------------------------------------------------
 * Mission Steps (core/list ordered)
 * ------------------------------------------------------------------------ */

ol.is-style-gb-mission-steps {
	counter-reset: gb-step;
	list-style: none;
	margin-block: 2em;
	padding: 0;
}

ol.is-style-gb-mission-steps > li {
	position: relative;
	counter-increment: gb-step;
	min-height: 2.6rem;
	margin: 0;
	padding: 0.35rem 0 1.4rem 3.6rem;
}

ol.is-style-gb-mission-steps > li::before {
	content: counter(gb-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 2px solid var(--gb-cyan);
	border-radius: 10px;
	background: var(--gb-bg);
	color: var(--gb-cyan);
	font-family: var(--gb-font-head);
	font-size: 0.95rem;
	font-weight: 800;
	box-shadow: var(--gb-glow-cyan);
	text-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
}

ol.is-style-gb-mission-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(1.25rem - 1px);
	top: 2.7rem;
	bottom: 0.2rem;
	width: 2px;
	background: linear-gradient(var(--gb-cyan), var(--gb-pink));
	opacity: 0.5;
}

ol.is-style-gb-mission-steps > li + li {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Button + image styles
 * ------------------------------------------------------------------------ */

.wp-block-button.is-style-gb-neon .wp-block-button__link {
	border: 2px solid var(--gb-pink);
	background: transparent;
	color: var(--gb-pink-text);
	box-shadow: var(--gb-glow-pink), inset 0 0 12px rgba(255, 43, 214, 0.25);
	text-shadow: 0 0 6px rgba(255, 43, 214, 0.6);
}

.wp-block-button.is-style-gb-neon .wp-block-button__link:hover,
.wp-block-button.is-style-gb-neon .wp-block-button__link:focus-visible {
	background: var(--gb-pink);
	color: var(--gb-bg);
	text-shadow: none;
}

.wp-block-image.is-style-gb-neon-frame img {
	border: 2px solid transparent;
	border-radius: 14px;
	background: var(--gb-gradient) border-box;
	box-shadow: 0 0 24px rgba(255, 43, 214, 0.3), 0 0 40px rgba(0, 240, 255, 0.15);
}

/* Buttons from theme.json: glow on hover */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	box-shadow: var(--gb-glow-cyan);
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
}

/* Sources list at the end of articles */
:where(.entry-content, .is-root-container) .gb-sources__title {
	margin-block-start: 2.5em;
	padding-top: 1.25rem;
	border-top: 1px solid var(--gb-border);
	color: var(--gb-muted);
	font-family: var(--gb-font-head);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

:where(.entry-content, .is-root-container) .gb-sources__title strong {
	color: inherit;
}

:where(.entry-content, .is-root-container) ul.gb-sources {
	margin-block-start: 0.5em;
	color: var(--gb-muted);
	font-size: 0.88rem;
}

:where(.entry-content, .is-root-container) ul.gb-sources li + li {
	margin-top: 0.25em;
}