/* Front-end styling for core Gutenberg blocks (Vibe Game) */


/* Alignment */
.vibe-entry-content .alignwide { margin-left: -2rem; margin-right: -2rem; max-width: none; }
.vibe-entry-content .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.vibe-entry-content .alignleft { float: left; margin: 0.25rem 1.5rem 1rem 0; }
.vibe-entry-content .alignright { float: right; margin: 0.25rem 0 1rem 1.5rem; }
.vibe-entry-content .aligncenter { margin-left: auto; margin-right: auto; display: block; }
@media (max-width: 782px) {
  .vibe-entry-content .alignwide { margin-left: 0; margin-right: 0; }
}

/* Media */
.vibe-entry-content .wp-block-image img,
.vibe-entry-content .wp-block-gallery img { border-radius: 8px; height: auto; max-width: 100%; }
.vibe-entry-content figcaption,
.vibe-entry-content .wp-element-caption { color: var(--text-muted); font-size: 0.82rem; text-align: center; margin-top: 0.5rem; }
.vibe-entry-content .wp-block-embed iframe,
.vibe-entry-content .wp-block-video video { max-width: 100%; border-radius: 8px; }

/* Quote / pullquote */
.vibe-entry-content .wp-block-quote,
.vibe-entry-content .wp-block-pullquote {
  border-left: 3px solid var(--neon-cyan);
  background: var(--bg-card);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}
.vibe-entry-content .wp-block-pullquote { border: 1px solid var(--border-neon-cyan); border-radius: 8px; text-align: center; }
.vibe-entry-content .wp-block-quote cite { color: var(--text-secondary); font-size: 0.85rem; }

/* Code / preformatted */
.vibe-entry-content .wp-block-code,
.vibe-entry-content .wp-block-preformatted {
  background: var(--bg-void);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
}

/* Code block toolbar with Copy button (assets/js/code-copy.js) */
.vibe-entry-content .code-block {
  overflow: hidden;
  background: var(--bg-void);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}
.vibe-entry-content .code-block > .wp-block-code { margin: 0; border: 0; border-radius: 0; }
.code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.code-language { font-weight: 600; letter-spacing: 0.03em; }
.code-block--terminal .code-language::before { content: "❯ "; color: var(--neon-cyan); }
.code-copy {
  margin-left: auto;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  font: inherit;
  color: var(--neon-cyan);
  background: transparent;
  border: 1px solid var(--border-neon-cyan);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 180ms ease;
}
.code-copy:hover { background: var(--bg-card); }
.code-copy:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }

/* Buttons */
.vibe-entry-content .wp-block-button__link {
  background: var(--gradient-cyan);
  color: var(--bg-void);
  font-weight: 700;
  border-radius: 6px;
  padding: 0.7rem 1.4rem;
  text-decoration: none;
}
.vibe-entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
}

/* Tables */
.vibe-entry-content .wp-block-table table { width: 100%; border-collapse: collapse; }
.vibe-entry-content .wp-block-table th,
.vibe-entry-content .wp-block-table td { border: 1px solid var(--border-subtle); padding: 0.6rem 0.8rem; }
.vibe-entry-content .wp-block-table thead th { background: var(--bg-secondary); color: var(--neon-cyan); }
.vibe-entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }

/* Separator, group, columns */
.vibe-entry-content .wp-block-separator { border: 0; border-top: 1px solid var(--border-subtle); margin: 2rem 0; }
.vibe-entry-content .wp-block-group.has-background,
.vibe-entry-content .wp-block-cover { border-radius: 8px; padding: 1.5rem; }
.vibe-entry-content .wp-block-columns { gap: 1.5rem; }

/* ---- Block theme structure ---- */

/* Header: block navigation and branding */
.vibe-header .wp-block-site-title.vibe-brand,
.vibe-footer .wp-block-site-title.vibe-brand { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; margin: 0; }
.vibe-header .wp-block-site-title a,
.vibe-footer .wp-block-site-title a { color: var(--text-main); text-decoration: none; }
.vibe-header .vibe-site-branding,
.vibe-footer .vibe-site-branding { align-items: center; gap: 0.75rem; }
.vibe-header .wp-block-site-logo,
.vibe-footer .wp-block-site-logo { display: flex; align-items: center; line-height: 0; margin: 0; }
.vibe-header .wp-block-site-logo a,
.vibe-footer .wp-block-site-logo a { display: flex; align-items: center; }
.vibe-header .wp-block-site-logo img,
.vibe-footer .wp-block-site-logo img { height: 40px; width: auto; display: block; }
.vibe-footer .wp-block-site-tagline { margin-top: 0.5rem; }
.vibe-header .wp-block-navigation { font-weight: 600; }
.vibe-header .wp-block-navigation a { color: var(--text-secondary); }
.vibe-header .wp-block-navigation a:hover,
.vibe-header .wp-block-navigation .current-menu-item > a { color: var(--neon-cyan); }
.vibe-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--bg-void);
	color: var(--text-main);
}
@media (max-width: 600px) {
	/* A filtered ancestor would contain the fixed navigation overlay. */
	.vibe-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
	.vibe-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: flex-start;
		height: auto;
	}
}
.vibe-header-inner { align-items: center; }

/* Sub navigation row below the header: pages as tabs */
.vibe-subnav { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.vibe-subnav-inner { align-items: flex-end; padding-top: 0.5rem; padding-bottom: 0; }
.vibe-subnav .wp-block-navigation__container { gap: 0.25rem; align-items: flex-end; }
.vibe-subnav .wp-block-navigation-item__content {
	padding: 0.55rem 1.15rem;
	border: 1px solid transparent;
	border-bottom: 3px solid transparent;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	margin-bottom: -1px;
	font-weight: 700;
	font-size: 0.92rem;
	transition: all 0.2s ease;
}
.vibe-subnav .wp-block-navigation-item__content:hover {
	color: #ddd;
	background: rgba(255, 255, 255, 0.04);
	border-bottom-color: var(--border-neon-cyan);
}
.vibe-subnav .current-menu-item > .wp-block-navigation-item__content,
.vibe-subnav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--neon-cyan);
	background: linear-gradient(180deg, rgba(0, 240, 255, 0.14) 0%, rgba(18, 22, 36, 0.95) 100%);
	border-color: var(--border-neon-cyan);
	border-bottom: 3px solid var(--neon-cyan);
	box-shadow: 0 -4px 16px rgba(0, 240, 255, 0.12);
}

/* Main wrapper: let the template group span the page */
.vibe-main { max-width: none; width: 100%; }
.vibe-main > .wp-block-group,
.vibe-footer > .wp-block-group { margin-block-start: 0; }

/* Keep header, listings and footer on the same content edges */
.vibe-header .vibe-container,
.vibe-main .vibe-container,
.vibe-footer .vibe-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
.vibe-main .vibe-container > .wp-block-query { max-width: none; margin: 0; }
.vibe-main .wp-block-post-template { padding: 0; margin: 0; max-width: none; }

/* Footer built from blocks */
.vibe-footer ul.vibe-footer-links { list-style: none; padding: 0; margin: 0; }
.vibe-footer .vibe-footer-col h4 { margin-bottom: 0.75rem; }
.vibe-footer p.vibe-virus-badge { display: inline-flex; margin: 0; }

/* 404 */
.vibe-404 { padding-top: 5rem; padding-bottom: 5rem; }
.vibe-404-card {
  background: var(--bg-card);
  border: 1px solid var(--border-neon-pink);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2rem;
  box-shadow: var(--shadow-pink);
  text-align: center;
}

/* Comments built from blocks */
.vibe-comments-area { margin-top: 2.5rem; }
.vibe-comments-area .comment-body {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.vibe-comments-area .wp-block-comment-template { list-style: none; padding: 0; margin: 0; }
.vibe-comments-area .wp-block-avatar img { border-radius: 50%; }
.vibe-comments-area input[type="text"],
.vibe-comments-area input[type="email"],
.vibe-comments-area input[type="url"],
.vibe-comments-area textarea {
  width: 100%;
  background: var(--bg-void);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
}
.vibe-comments-area .wp-block-post-comments-form .form-submit .wp-element-button,
.vibe-comments-area .wp-block-post-comments-form input[type="submit"] {
  background: var(--gradient-cyan);
  color: var(--bg-void);
  font-weight: 700;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0.7rem 1.4rem;
}

/* Block style: Neon Card (Group) */
.wp-block-group.is-style-neon-card {
  background: var(--bg-card);
  border: 1px solid var(--border-neon-cyan);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-cyan);
  padding: 1.5rem;
}

/* Post content flow spacing (the global reset zeroes block-gap margins) */
.vibe-entry-content .wp-block-post-content > * + *,
.vibe-entry-content .wp-block-group > * + * { margin-top: 1.25rem; }

/* Entry meta links */
.vibe-single-meta a { color: var(--text-secondary); }
.vibe-single-meta a:hover { color: var(--neon-cyan); }

/* Post cards built from core blocks */
.vibe-card .wp-block-post-featured-image { margin: 0; }
.vibe-card .vibe-card-thumb-fallback { aspect-ratio: 16 / 9; height: auto; }
.vibe-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--vibe-card-image-position, center center); border-radius: 0; }
.vibe-card-body { padding: 1rem 1.25rem 1.25rem; }
.vibe-card .wp-block-post-title { font-size: 1.1rem; margin: 0.4rem 0; }
.vibe-card .wp-block-post-title a { color: var(--text-main); }
.vibe-card .wp-block-post-title a:hover { color: var(--neon-cyan); }
.vibe-card .wp-block-post-excerpt { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 0.6rem; }
.vibe-card { position: relative; cursor: pointer; }
.vibe-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vibe-card .wp-block-post-terms a { position: relative; z-index: 2; }
.vibe-card .wp-block-post-date,
.vibe-card .wp-block-post-terms { color: var(--text-muted); font-size: 0.8rem; }
.wp-block-post-terms a {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.75rem;
	border-radius: var(--radius-pill);
	background: var(--gradient-pink);
	color: #ddd;
	font-size: 0.73rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	text-decoration: none;
	margin-bottom: 4px;
}
.wp-block-post-terms a:hover { color: #ddd; filter: brightness(1.15); }
.vibe-main .wp-block-query { padding: 2rem 0; }
.vibe-main .wp-block-query-pagination { margin-top: 2rem; padding-bottom: 2.5rem; gap: 1rem; }
.wp-block-query-pagination { align-items: center; justify-content: center; }
.wp-block-query-pagination-numbers { display: flex; gap: 0.5rem; }
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.75rem 1.4rem;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.4px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-main);
	border: 1px solid var(--border-subtle);
	text-decoration: none;
	transition: all 0.22s ease;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-numbers a.page-numbers:hover {
	border-color: var(--neon-cyan);
	color: var(--neon-cyan);
	background: rgba(0, 240, 255, 0.08);
}
.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--gradient-cyan);
	color: #05070b;
	border-color: transparent;
	box-shadow: var(--shadow-cyan);
}
.wp-block-query-pagination-numbers .page-numbers.dots { background: none; border-color: transparent; }
.vibe-main .wp-block-post-template.is-layout-grid { gap: 1.5rem; }
.vibe-header .wp-block-search { margin: 0; }

/* Neon search bar */
.wp-block-search .wp-block-search__inside-wrapper {
  background: var(--bg-void);
  border: 1px solid var(--border-neon-cyan);
  border-radius: var(--radius-md);
  padding: 2px;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-search .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--neon-cyan);
  box-shadow: var(--shadow-cyan);
}
.wp-block-search .wp-block-search__input {
  background: transparent;
  color: var(--text-main);
  border: 0;
  outline: 0;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-sans);
}
.wp-block-search .wp-block-search__input::placeholder { color: var(--text-muted); }
.wp-block-search .wp-block-search__button {
  background: var(--gradient-cyan);
  color: var(--bg-void);
  border: 0;
  border-radius: var(--radius-sm);
  margin-left: 2px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
.wp-block-search .wp-block-search__button svg { fill: currentColor; }
.wp-block-search .wp-block-search__button:hover { filter: brightness(1.15); box-shadow: var(--shadow-cyan); }

.code-toolbar .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Steam store button (Button block style "Steam Store") */
.wp-block-button.is-style-steam .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: linear-gradient(90deg, #1b2838 0%, #2a475e 100%);
  color: #c7d5e0;
  border: 1px solid #66c0f4;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: box-shadow 0.2s ease, color 0.2s ease;
}

.wp-block-button.is-style-steam .wp-block-button__link::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 0 0-12 11.4l6.4 2.6a3.4 3.4 0 0 1 1.9-.6l2.9-4.1v-.1a4.5 4.5 0 1 1 4.5 4.5h-.1l-4.1 3a3.4 3.4 0 0 1-6.7.8L.4 15.3A12 12 0 1 0 12 0zM7.5 18.2l-1.5-.6a2.6 2.6 0 0 0 4.8-.7 2.6 2.6 0 0 0-2.5-3.3l1.5.6a1.9 1.9 0 1 1-2.3 4zM18 9a3 3 0 1 0-6 0 3 3 0 0 0 6 0zm-5.3 0a2.3 2.3 0 1 1 4.6 0 2.3 2.3 0 0 1-4.6 0z'/%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'%3E%3Cpath d='M12 0a12 12 0 0 0-12 11.4l6.4 2.6a3.4 3.4 0 0 1 1.9-.6l2.9-4.1v-.1a4.5 4.5 0 1 1 4.5 4.5h-.1l-4.1 3a3.4 3.4 0 0 1-6.7.8L.4 15.3A12 12 0 1 0 12 0zM7.5 18.2l-1.5-.6a2.6 2.6 0 0 0 4.8-.7 2.6 2.6 0 0 0-2.5-3.3l1.5.6a1.9 1.9 0 1 1-2.3 4zM18 9a3 3 0 1 0-6 0 3 3 0 0 0 6 0zm-5.3 0a2.3 2.3 0 1 1 4.6 0 2.3 2.3 0 0 1-4.6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-button.is-style-steam .wp-block-button__link:hover,
.wp-block-button.is-style-steam .wp-block-button__link:focus-visible {
  color: #fff;
  box-shadow: 0 0 14px rgba(102, 192, 244, 0.55);
}

/* itch.io button (Button block style "itch.io") */
.wp-block-button.is-style-itch .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: #fa5c5c;
  color: #fff;
  border: 1px solid #ff8a8a;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.wp-block-button.is-style-itch .wp-block-button__link::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 2h16l3 5a3 3 0 0 1-5.500 1.700A3 3 0 0 1 12 10a3 3 0 0 1-5.500-1.300A3 3 0 0 1 1 7zM4 11.500c1 .700 2 1 3 1 1.800 0 3.200-.800 5-.800s3.200.800 5 .800c1 0 2-.300 3-1V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%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'%3E%3Cpath fill-rule='evenodd' d='M4 2h16l3 5a3 3 0 0 1-5.500 1.700A3 3 0 0 1 12 10a3 3 0 0 1-5.500-1.300A3 3 0 0 1 1 7zM4 11.500c1 .700 2 1 3 1 1.800 0 3.200-.800 5-.800s3.200.800 5 .800c1 0 2-.300 3-1V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-button.is-style-itch .wp-block-button__link:hover,
.wp-block-button.is-style-itch .wp-block-button__link:focus-visible {
  color: #fff;
  filter: brightness(1.08);
  box-shadow: 0 0 14px rgba(250, 92, 92, 0.55);
}

/* Centre the icon and label when a store button is full width (stacked) */
.wp-block-button.is-style-steam .wp-block-button__link,
.wp-block-button.is-style-itch .wp-block-button__link {
  justify-content: center;
}

/* Mermaid diagrams (rendered by assets/js/mermaid-init.js) */
.vibe-mermaid {
	margin: 1.5em 0;
	padding: 1em;
	overflow-x: auto;
	text-align: center;
	background: var(--wp--preset--color--panel, #121624);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
}

.vibe-mermaid svg {
	max-width: 100%;
	height: auto;
}

/* Editor: give the post content the same card background as the front end */
.editor-styles-wrapper .is-root-container {
	background: rgba(20, 25, 40, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	padding: 2.25rem;
	max-width: 900px;
	margin: 0 auto;
}