/*
Theme Name: Juegocito
Theme URI: https://baqueiro.es/store/juegocito-theme/
Author: Baqueiro Desarrollo Web
Author URI: https://baqueiro.es/
Description: Base theme for the Juegocito board game platform. Carries no palette of its own: it consumes the design tokens published by [B] Juegocito Core (Juegocitos UI Kit v2.0), so posts, pages, archives and the 404 arrive in the same ink, paper and type stack as the app shell, dark theme included. Built for the pages the platform does not render itself - Home, Search, My library and the catalog are the plugin's, and this theme deliberately stays out of them.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: juegocito
Tags: blog, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready, block-styles, wide-blocks
*/

/**
 * ---------------------------------------------------------------------------
 * 1. Token aliases
 * ---------------------------------------------------------------------------
 *
 * Every value below is `var(--bdw-*, <hex>)`: the token from Core's
 * tokens.css, with the hex only as the answer for when the plugin is
 * deactivated. That is the same fallback convention the sibling plugins use,
 * and it is why this theme has no palette to keep in sync - change a token in
 * the plugin and the blog follows.
 *
 * Custom properties are resolved where they are *used*, not where they are
 * declared, so this indirection survives the dark theme for free:
 * :root[data-theme="dark"] in tokens.css reassigns --bdw-ink on the same
 * element, and --jgc-ink re-resolves to the new value.
 *
 * The --jgc- prefix marks "this theme's alias of a platform token". Anything
 * written as a bare hex below this block is a bug.
 */

:root {
	/* Surfaces and text. */
	--jgc-cream: var(--bdw-cream, #FFF6EA);
	--jgc-paper: var(--bdw-paper, #FFFDF8);
	--jgc-sand: var(--bdw-sand, #F3E7D6);
	--jgc-ink: var(--bdw-ink, #16241F);
	--jgc-muted: var(--bdw-muted, #68756F);
	--jgc-line: var(--bdw-line, #DED4C6);
	--jgc-heading: var(--bdw-heading, #0A3B31);
	--jgc-accent: var(--bdw-accent, #177C63);
	--jgc-shadow: var(--bdw-shadow, 0 18px 55px rgba(22, 36, 31, 0.08));

	/* Brand fills. Fixed in both themes - see the palette note in tokens.css. */
	--jgc-brand: var(--bdw-coral-700, #B8341F);
	--jgc-brand-soft: var(--bdw-coral-100, #FFE2DA);
	--jgc-green: var(--bdw-green-600, #177C63);
	--jgc-green-soft: var(--bdw-green-100, #D6F2E8);
	--jgc-tint: var(--bdw-yellow-100, #FFF0CF);
	--jgc-tint-ink: var(--bdw-yellow-900, #6b4c00);

	/* Text on surfaces that do not change lightness with the theme. */
	--jgc-chrome: var(--bdw-chrome, #0A3B31);
	--jgc-on-brand: var(--bdw-on-brand, #FFFFFF);
	--jgc-on-dark: var(--bdw-on-dark, #FFF6EA);
	--jgc-on-dark-soft: var(--bdw-on-dark-soft, #C6DED7);
	--jgc-on-tint: var(--bdw-on-tint, #16241F);
	--jgc-danger-ink: var(--bdw-danger-ink, #B8341F);

	/* Radii: the kit allows exactly these four. */
	--jgc-radius-sm: var(--bdw-radius-sm, 8px);
	--jgc-radius-md: var(--bdw-radius-md, 12px);
	--jgc-radius-lg: var(--bdw-radius-lg, 20px);
	--jgc-radius-pill: var(--bdw-radius-pill, 999px);

	/* Type. */
	--jgc-font-display: var(--bdw-font-display, "Fredoka", "Nunito Sans", sans-serif);
	--jgc-font-body: var(--bdw-font-body, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--jgc-font-mono: var(--bdw-font-mono, "JetBrains Mono", Consolas, Monaco, "Courier New", monospace);

	/* Focus: two tones, because no single colour clears 3:1 on both the cream
	   page and the dark green header this same theme contains. The long
	   explanation, with the measurements, is in tokens.css. */
	--jgc-focus-color: var(--bdw-focus-color, #F5B33C);
	--jgc-focus-halo: var(--bdw-focus-halo, #0A3B31);
	--jgc-focus-width: var(--bdw-focus-width, 3px);
	--jgc-focus-offset: var(--bdw-focus-offset, 2px);

	/* Layout metrics. These describe this theme's own chrome, not the brand,
	   so they are values rather than aliases.

	   --jgc-measure is a reading column, not a container: around 70
	   characters at the body size below. A legal page set across 1180px is
	   physically harder to read - the eye loses the line on the way back. */
	--jgc-measure: 760px;
	--jgc-wide: 1180px;
	--jgc-gutter: 20px;
}

/**
 * The dark theme's fallbacks.
 *
 * Redundant while Core is active: tokens.css has already reassigned every
 * --bdw-* this block mentions, and var() takes the token over the fallback.
 * It exists so a site running this theme with the plugin off still has a
 * working dark mode instead of cream-on-cream.
 */
:root[data-theme="dark"] {
	color-scheme: dark;

	--jgc-cream: var(--bdw-cream, #0A3B31);
	--jgc-paper: var(--bdw-paper, #0E4C3F);
	--jgc-sand: var(--bdw-sand, #16564A);
	--jgc-ink: var(--bdw-ink, #FFF6EA);
	--jgc-muted: var(--bdw-muted, #A9D7CA);
	--jgc-line: var(--bdw-line, #4E9E85);
	--jgc-heading: var(--bdw-heading, #FFF6EA);
	--jgc-accent: var(--bdw-accent, #7CD3B9);
	--jgc-chrome: var(--bdw-chrome, #06251E);
	--jgc-danger-ink: var(--bdw-danger-ink, #FFE2DA);
	--jgc-shadow: var(--bdw-shadow, 0 18px 55px rgba(0, 0, 0, 0.45));
}

/**
 * ---------------------------------------------------------------------------
 * 2. Base
 * ---------------------------------------------------------------------------
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--jgc-cream);
	color: var(--jgc-ink);
	font-family: var(--jgc-font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--jgc-font-display);
	font-weight: 600;
	color: var(--jgc-heading);
	line-height: 1.15;
	margin: 1.6em 0 0.5em;
	text-wrap: balance;
}

h1 {
	font-size: 34px;
	font-weight: 700;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 21px;
}

h4 {
	font-size: 18px;
}

h5,
h6 {
	font-size: 16px;
}

p,
ul,
ol,
dl,
table,
pre,
figure,
blockquote {
	margin: 0 0 1.1em;
}

a {
	color: var(--jgc-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 2px;
}

img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

figure img {
	border-radius: var(--jgc-radius-md);
	display: block;
}

figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: var(--jgc-muted);
	text-align: center;
}

code,
kbd,
pre,
samp {
	font-family: var(--jgc-font-mono);
	font-size: 0.92em;
}

code {
	background: var(--jgc-sand);
	border-radius: var(--jgc-radius-sm);
	padding: 2px 6px;
}

pre {
	background: var(--jgc-sand);
	border-radius: var(--jgc-radius-md);
	padding: 16px 18px;
	overflow-x: auto;
}

pre code {
	background: none;
	padding: 0;
}

blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--jgc-accent);
	color: var(--jgc-ink);
	font-size: 19px;
}

blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-style: normal;
	color: var(--jgc-muted);
}

hr {
	border: 0;
	border-top: 1px solid var(--jgc-line);
	margin: 40px 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

th,
td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--jgc-line);
	text-align: left;
}

th {
	font-weight: 800;
	color: var(--jgc-heading);
}

/**
 * ---------------------------------------------------------------------------
 * 3. Accessibility
 * ---------------------------------------------------------------------------
 *
 * .screen-reader-text is defined here rather than borrowed from Core's
 * stylesheet: that copy is scoped to `.bdw-jc`, and an undefined
 * .screen-reader-text does not fail quietly - it prints the hidden text on
 * the screen.
 */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
}

/* The single focus declaration for everything the theme owns. Core carries
   the matching one for its own components; both resolve to the same tokens,
   so a keyboard user sees one ring across the whole site. */
:focus-visible {
	outline: var(--jgc-focus-width) solid var(--jgc-focus-color);
	outline-offset: var(--jgc-focus-offset);
	box-shadow: 0 0 0 calc(var(--jgc-focus-width) + var(--jgc-focus-offset)) var(--jgc-focus-halo);
}

.juegocito-skip-link {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 70;
	padding: 12px 18px;
	border-radius: var(--jgc-radius-sm);
	background: var(--jgc-paper);
	color: var(--jgc-ink);
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--jgc-shadow);
}

.juegocito-skip-link:focus {
	top: 12px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/**
 * ---------------------------------------------------------------------------
 * 4. Header
 * ---------------------------------------------------------------------------
 *
 * With Core active the header *is* BDW_JC_Nav's bar, and the plugin already
 * makes it static and drawer-only outside the app shell. Two corrections:
 * the rounded card treatment it uses when embedded in an unknown theme is
 * wrong here (this is the site's header, so it goes edge to edge), and the
 * drawer should open below the bar rather than over it.
 *
 * Left static rather than made sticky or fixed on purpose. Sticky cannot work
 * - the bar's parent wrapper is only as tall as the bar itself, so there is
 * no distance to stick over - and fixed would mean maintaining a stack of
 * offsets against the WordPress admin bar, which changes height at 782px and
 * stops being fixed at all below 600px. A blog page is a document; its header
 * may scroll away.
 */

body.juegocito .bdw-jc-topbar {
	border-radius: 0;
	margin-bottom: 0;
}

/* The plugin's wrapper is `.bdw-jc`, which carries a 24px vertical margin for
   shortcodes embedded in prose. As the site header it must not have one. */
body.juegocito .bdw-jc-shell-nav {
	margin: 0;
}

/* ---------- The header used when Core is inactive ---------- */

.juegocito-header {
	background: var(--jgc-chrome);
	color: var(--jgc-on-dark);
}

.juegocito-header__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--jgc-wide);
	min-height: 58px;
	margin: 0 auto;
	padding: 0 var(--jgc-gutter);
}

.juegocito-brand,
.juegocito-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: auto;
	padding: 6px 4px;
	font-family: var(--jgc-font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--jgc-on-dark);
	text-decoration: none;
	white-space: nowrap;
}

.juegocito-brand__mark {
	font-size: 20px;
	line-height: 1;
}

.juegocito-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--jgc-radius-sm);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

/* Three bars drawn from one element: the middle is the box, the outer two are
   its pseudo-elements. Saves an inline SVG for a shape this simple. */
.juegocito-header__toggle-bars,
.juegocito-header__toggle-bars::before,
.juegocito-header__toggle-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.juegocito-header__toggle-bars::before,
.juegocito-header__toggle-bars::after {
	content: "";
	position: relative;
}

.juegocito-header__toggle-bars::before {
	top: -6px;
}

.juegocito-header__toggle-bars::after {
	top: 4px;
}

.juegocito-header__theme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: var(--jgc-radius-sm);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.juegocito-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* One button, two glyphs: the one shown is the theme you would switch *to*,
   which is what makes a single control legible without a label. */
.juegocito-icon--sun,
:root[data-theme="dark"] .juegocito-icon--moon {
	display: none;
}

:root[data-theme="dark"] .juegocito-icon--sun {
	display: block;
}

.juegocito-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.juegocito-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--jgc-radius-sm);
	color: var(--jgc-on-dark);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

.juegocito-menu a:hover,
.juegocito-menu .current-menu-item > a,
.juegocito-menu .current_page_item > a {
	background: rgba(255, 255, 255, 0.12);
}

/* Second level. A flyout would need positioning, a click-outside handler and
   a focus trap; a blog menu does not earn that, so children are indented
   inside the same list. */
.juegocito-menu .sub-menu {
	display: contents;
	list-style: none;
}

.juegocito-menu .sub-menu a {
	font-weight: 400;
	color: var(--jgc-on-dark-soft);
}

@media (max-width: 782px) {
	.juegocito-header__nav {
		display: none;
		flex-basis: 100%;
		order: 3;
		padding-bottom: 12px;
	}

	.juegocito-header__nav.is-open {
		display: block;
	}

	.juegocito-header__inner {
		flex-wrap: wrap;
	}

	.juegocito-menu {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (min-width: 783px) {
	.juegocito-header__toggle {
		display: none;
	}
}

/**
 * ---------------------------------------------------------------------------
 * 5. Shell
 * ---------------------------------------------------------------------------
 */

.juegocito-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	max-width: var(--jgc-wide);
	margin: 0 auto;
	padding: 40px var(--jgc-gutter) 72px;
}

@media (min-width: 1024px) {
	body:not(.juegocito-no-sidebar) .juegocito-shell {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

/* A single document - a post, a page, the 404 - is read at the measure. A
   listing is not: cards are scanned, not read line by line, so they get the
   full column.

   The cap is on the *children*, not on the column, which is the whole point.
   Capping the column and then letting a wide block claw the width back with
   `margin-inline: calc(50% - 50vw)` is the usual trick and it is broken: 100vw
   counts the vertical scrollbar and 100% does not, so on every desktop browser
   that reserves scrollbar space the block ends up wider than the viewport and
   the page gains a horizontal scrollbar. Here the column is already full
   width, so alignwide and alignfull simply stop capping themselves - no
   negative margins exist to overshoot. */
.juegocito-narrow .juegocito-main > *,
.juegocito-narrow .juegocito-entry > *,
.juegocito-narrow .juegocito-entry__content > * {
	max-width: var(--jgc-measure);
	margin-inline: auto;
}

/* The two wrappers on the path from the column to a block: they pass the cap
   down rather than applying it, otherwise nothing inside them could ever be
   wider than the measure. */
.juegocito-narrow .juegocito-main > .juegocito-entry,
.juegocito-narrow .juegocito-entry > .juegocito-entry__content {
	max-width: none;
}

.juegocito-page-head {
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--jgc-line);
}

.juegocito-page-head__title {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
}

.juegocito-page-head__term {
	color: var(--jgc-accent);
}

.juegocito-page-head__description {
	margin-top: 8px;
	color: var(--jgc-muted);
}

.juegocito-page-head__search {
	margin-top: 20px;
	max-width: var(--jgc-measure);
}

/**
 * ---------------------------------------------------------------------------
 * 6. A single entry
 * ---------------------------------------------------------------------------
 */

.juegocito-entry__head {
	margin-bottom: 24px;
}

.juegocito-entry__title {
	margin: 0;
	font-size: 38px;
	font-weight: 700;
}

.juegocito-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--jgc-muted);
}

/* A bullet between the parts, drawn rather than written, so it is not read
   out as a word by a screen reader. */
.juegocito-entry__meta > * + *::before {
	content: "\00B7";
	margin-right: 10px;
}

.juegocito-entry__meta a {
	color: inherit;
}

.juegocito-entry__figure {
	margin: 0 0 28px;
}

.juegocito-entry__figure img {
	width: 100%;
	border-radius: var(--jgc-radius-lg);
}

.juegocito-entry__content > *:first-child {
	margin-top: 0;
}

.juegocito-entry__content ul,
.juegocito-entry__content ol {
	padding-left: 1.4em;
}

.juegocito-entry__content li + li {
	margin-top: 0.4em;
}

.juegocito-entry__pages {
	display: flex;
	gap: 8px;
	margin-top: 32px;
	font-size: 14px;
	font-weight: 800;
	color: var(--jgc-muted);
}

.juegocito-entry__foot {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--jgc-line);
}

.juegocito-entry__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.juegocito-entry__edit {
	margin: 16px 0 0;
	font-size: 14px;
}

/**
 * ---------------------------------------------------------------------------
 * 7. Listings
 * ---------------------------------------------------------------------------
 */

.juegocito-list {
	display: grid;
	gap: 24px;
}

@media (min-width: 700px) {
	body.juegocito-no-sidebar .juegocito-list {
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	}
}

.juegocito-card {
	display: flex;
	flex-direction: column;
	background: var(--jgc-paper);
	border: 1px solid var(--jgc-line);
	border-radius: var(--jgc-radius-md);
	box-shadow: var(--jgc-shadow);
	overflow: hidden;
}

.juegocito-card__figure {
	display: block;
	line-height: 0;
}

.juegocito-card__figure img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
}

.juegocito-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 22px 22px;
}

.juegocito-card__title {
	margin: 0;
	font-size: 21px;
}

.juegocito-card__title a {
	color: var(--jgc-heading);
	text-decoration: none;
}

.juegocito-card__title a:hover {
	text-decoration: underline;
}

.juegocito-card__excerpt {
	margin-top: 10px;
	color: var(--jgc-ink);
	font-size: 16px;
}

.juegocito-card__excerpt p:last-child {
	margin-bottom: 0;
}

.juegocito-more {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 14px;
	font-weight: 800;
	font-size: 14px;
	color: var(--jgc-accent);
}

/**
 * ---------------------------------------------------------------------------
 * 8. Controls
 * ---------------------------------------------------------------------------
 *
 * Same shape and sizes as Core's .bdw-jc-button and .bdw-jc-input. Not reused
 * by class name: those live in the plugin's stylesheet, which is not loaded
 * when Core is off - and a button that disappears with the plugin is worse
 * than one that is redeclared here.
 */

.juegocito-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--jgc-radius-md);
	background: var(--jgc-brand);
	color: var(--jgc-on-brand);
	font-family: inherit;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease;
}

.juegocito-button:hover,
.juegocito-button:focus {
	transform: translateY(-2px);
	color: var(--jgc-on-brand);
}

.juegocito-button--ghost {
	background: transparent;
	border-color: var(--jgc-line);
	color: var(--jgc-ink);
}

.juegocito-button--ghost:hover,
.juegocito-button--ghost:focus {
	color: var(--jgc-ink);
}

/* The bare element selectors are wrapped in :where() so they contribute zero
   specificity. Without it, `input[type="search"]` (0,1,1) outranks the
   plugin's own `.bdw-jc-input` (0,1,0), and a Core shortcode embedded in a
   page - the takedown form, the transfer form - would silently have its
   fields restyled by the theme. A base style should lose every argument it
   has with a component style, and :where() is how that is expressed. */
.juegocito-input {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--jgc-accent);
	border-radius: var(--jgc-radius-sm);
	background: var(--jgc-paper);
	color: var(--jgc-ink);
	font: inherit;
}

/* Kept in a rule of its own rather than joined to the one above by a comma:
   a browser that does not know :where() discards the whole rule it appears
   in, comma-separated siblings included, so sharing one rule would mean the
   theme's own explicit .juegocito-input class disappearing with it. */
:where(
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="date"],
	select,
	textarea
) {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--jgc-accent);
	border-radius: var(--jgc-radius-sm);
	background: var(--jgc-paper);
	color: var(--jgc-ink);
	font: inherit;
}

:where(textarea) {
	min-height: 140px;
	line-height: 1.5;
}

.juegocito-chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--jgc-radius-pill);
	background: var(--jgc-tint);
	color: var(--jgc-tint-ink);
	font-size: 11px;
	font-weight: 800;
	text-decoration: none;
}

.juegocito-chip:hover {
	background: var(--bdw-yellow-500, #F5B33C);
	color: var(--jgc-on-tint);
}

.juegocito-searchform {
	display: flex;
	gap: 8px;
}

.juegocito-searchform .juegocito-button {
	flex-shrink: 0;
}

/**
 * ---------------------------------------------------------------------------
 * 9. Notices and empty states
 * ---------------------------------------------------------------------------
 */

.juegocito-notice {
	background: var(--jgc-paper);
	border: 1px solid var(--jgc-line);
	border-radius: var(--jgc-radius-md);
	padding: 32px 28px;
	text-align: center;
	box-shadow: var(--jgc-shadow);
}

.juegocito-notice::before {
	content: "\1F3B2";
	display: block;
	font-size: 30px;
	line-height: 1;
	margin-bottom: 12px;
}

.juegocito-notice__title {
	margin: 0 0 8px;
	font-size: 26px;
}

.juegocito-notice__aside {
	color: var(--jgc-muted);
	font-size: 15px;
}

.juegocito-notice__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.juegocito-notice__search {
	max-width: 420px;
	margin: 24px auto 0;
}

/**
 * ---------------------------------------------------------------------------
 * 10. Pagination and post navigation
 * ---------------------------------------------------------------------------
 */

.juegocito-pagination {
	margin-top: 48px;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--jgc-line);
	border-radius: var(--jgc-radius-sm);
	background: var(--jgc-paper);
	color: var(--jgc-ink);
	font-weight: 700;
	text-decoration: none;
}

.page-numbers.current {
	background: var(--jgc-chrome);
	border-color: var(--jgc-chrome);
	color: var(--jgc-on-dark);
}

.page-numbers.dots {
	border-color: transparent;
	background: none;
}

.juegocito-post-nav {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--jgc-line);
}

.juegocito-post-nav .nav-links {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	.juegocito-post-nav .nav-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.juegocito-post-nav .nav-next {
		text-align: right;
	}
}

.juegocito-post-nav a {
	display: block;
	padding: 16px 18px;
	border: 1px solid var(--jgc-line);
	border-radius: var(--jgc-radius-md);
	background: var(--jgc-paper);
	text-decoration: none;
	color: var(--jgc-ink);
}

.juegocito-post-nav__label {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jgc-accent);
}

.juegocito-post-nav__title {
	display: block;
	margin-top: 4px;
	font-family: var(--jgc-font-display);
	font-size: 17px;
	font-weight: 600;
}

/**
 * ---------------------------------------------------------------------------
 * 11. Comments
 * ---------------------------------------------------------------------------
 */

.juegocito-comments {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--jgc-line);
}

.juegocito-comments__title {
	margin: 0 0 24px;
	font-size: 24px;
}

.juegocito-comments__list,
.juegocito-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.juegocito-comments__list .children {
	margin-top: 16px;
	padding-left: 20px;
	border-left: 2px solid var(--jgc-line);
}

.juegocito-comment {
	margin-bottom: 16px;
}

.juegocito-comment__body {
	padding: 18px 20px;
	background: var(--jgc-paper);
	border: 1px solid var(--jgc-line);
	border-radius: var(--jgc-radius-md);
}

.juegocito-comment__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.juegocito-comment__head img {
	border-radius: 50%;
}

.juegocito-comment__author {
	display: block;
	font-family: var(--jgc-font-display);
	font-weight: 600;
}

.juegocito-comment__author a {
	color: var(--jgc-ink);
	text-decoration: none;
}

.juegocito-comment__date {
	font-size: 13px;
	color: var(--jgc-muted);
	text-decoration: none;
}

.juegocito-comment__pending {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--jgc-danger-ink);
}

.juegocito-comment__content > *:last-child {
	margin-bottom: 0;
}

.juegocito-comment__reply {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 800;
}

.juegocito-comments__closed {
	color: var(--jgc-muted);
	font-size: 15px;
}

.comment-form {
	display: grid;
	gap: 16px;
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 800;
	color: var(--jgc-muted);
}

.comment-form p {
	margin: 0;
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.comment-form .comment-form-cookies-consent input {
	width: auto;
	min-height: 0;
}

.comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	color: var(--jgc-ink);
}

.comment-form .submit {
	width: auto;
	justify-self: start;
}

.comment-notes,
.logged-in-as {
	font-size: 14px;
	color: var(--jgc-muted);
}

/**
 * ---------------------------------------------------------------------------
 * 12. Sidebar, widgets and footer
 * ---------------------------------------------------------------------------
 */

.juegocito-sidebar {
	display: grid;
	gap: 24px;
	align-content: start;
}

.juegocito-widget {
	padding: 20px 22px;
	background: var(--jgc-paper);
	border: 1px solid var(--jgc-line);
	border-radius: var(--jgc-radius-md);
	font-size: 15px;
}

.juegocito-widget__title {
	margin: 0 0 12px;
	font-size: 17px;
}

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

.juegocito-widget li + li {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--jgc-line);
}

.juegocito-widget .sub-menu,
.juegocito-widget .children {
	margin-top: 8px;
	padding-left: 14px;
	list-style: none;
}

.juegocito-footer {
	background: var(--jgc-chrome);
	color: var(--jgc-on-dark);
	padding: 40px 0 48px;
}

.juegocito-footer__inner {
	max-width: var(--jgc-wide);
	margin: 0 auto;
	padding: 0 var(--jgc-gutter);
	text-align: center;
}

.juegocito-footer a {
	color: var(--jgc-on-dark);
}

.juegocito-footer__widgets {
	display: grid;
	gap: 24px;
	margin-bottom: 32px;
	text-align: left;
}

@media (min-width: 700px) {
	.juegocito-footer__widgets {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

.juegocito-footer__widgets .juegocito-widget {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--jgc-on-dark-soft);
}

.juegocito-footer__widgets .juegocito-widget__title {
	color: var(--jgc-on-dark);
}

.juegocito-footer__widgets .juegocito-widget li + li {
	border-top-color: rgba(255, 255, 255, 0.12);
}

.juegocito-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.juegocito-footer__brand {
	margin: 0;
	font-family: var(--jgc-font-display);
	font-size: 16px;
	font-weight: 600;
}

/* Core's own footer links (help centre, guidelines, content removal, privacy).
   The plugin's rule for them is layout only - flex, gap, size - so they take
   their colour from the surrounding text, which here is the dark footer's.
   All this adds is the breathing room they had above the app's cream page. */
.juegocito-footer .bdw-jc-app-footer__links {
	margin-top: 14px;
}

.juegocito-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 20px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 13px;
	color: var(--jgc-on-dark-soft);
}

.juegocito-footer__copy,
.juegocito-footer__credit {
	margin: 0;
}

.juegocito-footer__credit a {
	font-weight: 700;
	color: var(--jgc-on-dark);
	text-decoration: none;
}

.juegocito-footer__credit a:hover {
	text-decoration: underline;
}

.juegocito-footer__heart {
	color: var(--jgc-brand);
}

/**
 * ---------------------------------------------------------------------------
 * 13. Block editor output
 * ---------------------------------------------------------------------------
 *
 * The classes an author's choices turn into. A classic theme has to ship
 * these itself - WordPress only generates them from theme.json, which a
 * block theme has and this one does not.
 *
 * Every value is the token, not the hex from inc/setup.php: the editor's
 * swatch is a fixed brand colour by definition, but "Ink" as *text* has to
 * stay legible when the reader switches to the dark theme, so it resolves
 * through --jgc-ink rather than to #16241F.
 */

.has-green-700-color { color: var(--bdw-green-700, #12634F); }
.has-green-900-color { color: var(--bdw-green-900, #0A3B31); }
.has-green-100-color { color: var(--bdw-green-100, #D6F2E8); }
.has-coral-700-color { color: var(--bdw-coral-700, #B8341F); }
.has-coral-100-color { color: var(--bdw-coral-100, #FFE2DA); }
.has-yellow-500-color { color: var(--bdw-yellow-500, #F5B33C); }
.has-paper-color { color: var(--jgc-paper); }
.has-ink-color { color: var(--jgc-ink); }

.has-green-700-background-color { background-color: var(--bdw-green-700, #12634F); }
.has-green-900-background-color { background-color: var(--bdw-green-900, #0A3B31); }
.has-green-100-background-color { background-color: var(--bdw-green-100, #D6F2E8); }
.has-coral-700-background-color { background-color: var(--bdw-coral-700, #B8341F); }
.has-coral-100-background-color { background-color: var(--bdw-coral-100, #FFE2DA); }
.has-yellow-500-background-color { background-color: var(--bdw-yellow-500, #F5B33C); }
.has-paper-background-color { background-color: var(--jgc-paper); }
.has-ink-background-color { background-color: var(--jgc-ink); }

/* A saturated fill needs its text set with it, or the author gets dark green
   on dark green. The two light tints are the exception: they stay light in
   both themes (see the --bdw-on-tint note in tokens.css), so their text is
   the fixed dark ink rather than the theme's. */
.has-green-700-background-color,
.has-green-900-background-color,
.has-coral-700-background-color,
.has-ink-background-color {
	color: var(--jgc-on-brand);
}

.has-green-100-background-color,
.has-coral-100-background-color,
.has-yellow-500-background-color {
	color: var(--jgc-on-tint);
}

.has-small-font-size { font-size: 14px; }
.has-normal-font-size { font-size: 17px; }
.has-large-font-size { font-size: 21px; }
.has-display-font-size {
	font-size: 30px;
	font-family: var(--jgc-font-display);
	line-height: 1.2;
}

/* ---------- Alignment ---------- */

.alignleft {
	float: left;
	margin: 0.4em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.4em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

/* Wide and full opt out of the reading measure by raising their own cap. See
   the constrained-layout note in section 5 for why they do not use negative
   margins.

   "Full" here means the full width of the page column, not of the viewport.
   A true edge-to-edge bleed cannot be produced from inside a centred, padded,
   max-width column without the 100vw scrollbar bug, and a horizontal
   scrollbar on every article is a worse trade than a block that stops at the
   page's own margin. */
.juegocito-narrow .juegocito-entry__content > .alignwide {
	max-width: 1000px;
}

.juegocito-narrow .juegocito-entry__content > .alignfull {
	max-width: none;
}

/* The floats have to win against the `margin-inline: auto` the constrained
   layout puts on every child, hence the extra class rather than relying on
   these rules simply appearing later in the file. */
.juegocito-narrow .juegocito-entry__content > .alignleft {
	margin: 0.4em 1.5em 1em 0;
}

.juegocito-narrow .juegocito-entry__content > .alignright {
	margin: 0.4em 0 1em 1.5em;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: 14px;
	color: var(--jgc-muted);
	text-align: center;
}

.sticky .juegocito-card__title::before {
	content: "\1F4CC";
	margin-right: 6px;
}

/* ---------- Core blocks that need a brand answer ---------- */

.wp-block-button__link {
	border-radius: var(--jgc-radius-md);
	background-color: var(--jgc-brand);
	color: var(--jgc-on-brand);
	font-weight: 800;
	padding: 12px 22px;
}

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

.wp-block-quote {
	border-left: 4px solid var(--jgc-accent);
	padding-left: 20px;
}

.wp-block-pullquote {
	border-top: 2px solid var(--jgc-line);
	border-bottom: 2px solid var(--jgc-line);
	padding: 28px 0;
	text-align: center;
	font-family: var(--jgc-font-display);
}

.wp-block-separator {
	border-top: 1px solid var(--jgc-line);
	border-bottom: 0;
}

.wp-block-table figcaption,
.wp-block-image figcaption,
.wp-block-embed figcaption {
	color: var(--jgc-muted);
}

.wp-block-code {
	background: var(--jgc-sand);
	border: 0;
	border-radius: var(--jgc-radius-md);
	padding: 16px 18px;
}

.wp-block-search .wp-block-search__button {
	border-radius: var(--jgc-radius-md);
	background: var(--jgc-brand);
	border: 0;
	color: var(--jgc-on-brand);
	font-weight: 800;
	padding: 12px 20px;
}

.wp-block-calendar table th {
	background: var(--jgc-sand);
	color: var(--jgc-ink);
}