/*
 * Bridges core block markup onto the original design.
 *
 * The page content is now built from real WordPress blocks, which wrap things
 * in their own elements (figures around images, divs around buttons, and so
 * on). These rules map that markup back onto the classes the original site
 * used, so the design is unchanged while everything stays editable.
 *
 * These rules are intentionally NOT scoped to .main-container. That wrapper is
 * output by the page templates and does not exist inside the block editor
 * canvas, so scoping them there made the editor render differently from the
 * live page.
 */

/* ---------------------------------------------------------------- layout */

.wp-block-group,
.wp-block-column {
	min-width: 0;
}

/* WordPress adds a 24px "block gap" above every block after the first. The
   design sets its own spacing, so drop the added top margin (bottom margins,
   which the design does use, are left alone) and restore the few top margins
   the layouts genuinely need. */
.wp-block-group.is-layout-flow > *,
.wp-block-column.is-layout-flow > * {
	margin-block-start: 0;
}

.prose-text.prose-text {
	margin-top: 1rem;
}

.subhead.subhead {
	margin-top: 1.75rem;
}

.pull-quote.pull-quote {
	margin-top: 1.5rem;
}

.faq.faq,
ol.rules-list.rules-list {
	margin-top: 1.5rem;
}

ol.rules-list.rules-list {
	margin-top: 1.75rem;
}

.flow-grid.flow-grid,
.feature-grid.feature-grid,
.status-grid.status-grid,
.tool-grid.tool-grid {
	margin-top: 1.75rem;
}

/* Columns ----------------------------------------------------------------
   The original layouts were CSS grids with set ratios, so the columns block
   is rendered as a grid rather than the default flex row. That keeps the
   proportions exact and still stacks on small screens. */
.wp-block-columns {
	margin-bottom: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	/* WordPress ships align-items:normal!important on this block. */
	align-items: flex-start !important;
}

.wp-block-columns > .wp-block-column {
	flex-basis: auto !important;
	min-width: 0;
}

.wp-block-columns.hero-columns {
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center !important;
}

.wp-block-columns.profile-columns {
	grid-template-columns: 300px 1fr;
	gap: 2rem;
	margin-top: 1.75rem;
	align-items: start !important;
}

.wp-block-columns.two-col-columns {
	margin-top: 1.5rem;
}

.hero-section,
.page-hero-section {
	overflow: visible;
}

/* Images ----------------------------------------------------------------- */
.wp-block-image {
	margin: 0;
}

.wp-block-image img {
	display: block;
}

/* Hero art (was .main-preview-img) */
.hero-frame img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
	background-color: var(--primary-light);
}

.page-hero-section .hero-frame img {
	height: 380px;
}

/* Character portraits (was .profile-portrait img) */
.profile-portrait .wp-block-image,
.origin-media .wp-block-image,
.portrait-wrapper .wp-block-image {
	margin: 0;
}

.portrait-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Screenshot tiles (was .showcase-item img + .showcase-caption) */
.showcase-grid .showcase-item {
	position: relative;
	margin: 0;
	height: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: var(--bg-base);
	border: 1px solid var(--primary-light);
}

.showcase-grid .showcase-item a {
	display: block;
	width: 100%;
	height: 100%;
}

.showcase-grid .showcase-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	background-color: var(--primary-light);
}

.showcase-grid .showcase-item:hover img {
	transform: scale(1.04);
}

.showcase-grid .showcase-item figcaption {
	position: absolute;
	inset: 0;
	margin: 0;
	background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, transparent 60%);
	display: flex;
	align-items: flex-end;
	padding: 1.2rem;
	color: var(--white);
	font-weight: 800;
	font-size: 1.1rem;
	text-align: left;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.showcase-grid .showcase-item:hover figcaption {
	opacity: 1;
}

/* Gallery thumbnails (was .gallery-thumb) */
.gallery-thumb-wrapper .wp-block-image {
	margin: 0;
	height: 100%;
}

.gallery-thumb-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
	display: block;
}

.gallery-card:hover .gallery-thumb-wrapper img {
	transform: scale(1.06);
}

.gallery-card.is-hidden {
	display: none !important;
}

/* ---------------------------------------------------------------- text */

/* Hero headline, split into two headings so both halves stay editable. */
.hero-title {
	margin-bottom: 0;
}

.hero-title-accent {
	display: inline-block;
	color: var(--primary);
	background: linear-gradient(120deg, rgba(100, 144, 215, 0.15) 0%, rgba(255, 117, 151, 0.15) 100%);
	padding: 0 0.3rem;
	border-radius: 8px;
	margin-bottom: 1rem;
}

/* Body copy (was .prose p) */
.prose-text {
	color: var(--text-muted);
	font-size: 1rem;
	line-height: 1.7;
	max-width: 68ch;
	margin-top: 1rem;
}

.page-hero-section .prose-text:first-of-type {
	margin-top: 0.75rem;
}

/* Small print inside the floating tags */
.floating-card-tag-sub {
	font-size: 0.75rem;
	color: var(--text-muted);
	font-weight: 600;
}

/* The demo banner flag is a paragraph now, not a span. */
.demo-banner p.demo-flag {
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--white);
	line-height: 1.2;
}

/* Section header text column */
.section-header-text {
	flex: 1 1 auto;
}

/* Pillar number colour variants (were inline styles) */
.pillar-number.is-accent {
	background: var(--accent);
}

.pillar-number.is-yellow {
	background: var(--accent-yellow);
	color: var(--text-dark);
}

/* Status card body wrapper */
.status-body {
	width: 100%;
}

/* Quotes ----------------------------------------------------------------- */
.pull-quote p,
.member-quote p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.wp-block-quote.pull-quote,
.wp-block-quote.member-quote {
	border-left-style: solid;
}

/* Lists ------------------------------------------------------------------ */
ul.tag-cloud-subtle,
ul.supporter-tags {
	list-style: none;
	padding-left: 0;
}

.tag-cloud-subtle li {
	background: var(--bg-base);
	color: var(--text-muted);
	font-weight: 600;
	font-size: 0.75rem;
	padding: 0.2rem 0.6rem;
	border-radius: 12px;
	border: 1px solid var(--primary-light);
}

.tag-cloud-subtle li:first-child {
	background: rgba(255, 117, 151, 0.1);
	color: var(--accent-dark);
	border-color: rgba(255, 117, 151, 0.2);
}

.tag-cloud-subtle li:last-child {
	background: rgba(255, 209, 102, 0.15);
	color: #8a6d1b;
	border-color: rgba(255, 209, 102, 0.3);
}

.supporter-tags li {
	background: var(--white);
	border: 1px solid var(--primary-light);
	padding: 0.4rem 0.9rem;
	border-radius: 16px;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--primary-dark);
	box-shadow: 0 2px 8px rgba(100, 144, 215, 0.08);
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.supporter-tags li:hover {
	transform: scale(1.05);
	border-color: var(--accent);
	color: var(--accent-dark);
}

/* ---------------------------------------------------------------- buttons */

/*
 * A Button block is a wrapper div with the real <a> inside it. The original
 * design styled a plain <a>, so when one of those legacy classes lands on the
 * wrapper you get a button drawn around a button. Strip any painting from the
 * wrapper first, then style the link itself.
 *
 * These rules are deliberately NOT scoped to .main-container: the block editor
 * canvas has no such wrapper, and without them the editor showed WordPress's
 * default dark button instead of yours.
 */
.wp-block-button.btn-primary,
.wp-block-button.btn-secondary,
.wp-block-button.social-link,
.wp-block-button.is-style-ao-primary,
.wp-block-button.is-style-ao-secondary,
.wp-block-button.is-style-ao-chip {
	background: none;
	background-color: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
	color: inherit;
	font-size: inherit;
	transform: none;
	display: inline-block;
}

.wp-block-buttons {
	gap: 1rem;
	margin: 0;
}

.wp-block-buttons.hero-cta-group,
.wp-block-buttons.cta-group {
	flex-wrap: wrap;
}

.wp-block-buttons.cta-group {
	margin-top: 1.5rem;
}

.wp-block-button__link {
	border-radius: 30px;
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Primary */
.wp-block-button.btn-primary > .wp-block-button__link,
.wp-block-button.is-style-ao-primary > .wp-block-button__link {
	background-color: var(--primary);
	color: var(--white);
	padding: 0.85rem 1.75rem;
	font-size: 1.05rem;
	box-shadow: 0 4px 12px rgba(100, 144, 215, 0.25);
	border: 2px solid transparent;
}

.wp-block-button.btn-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-ao-primary > .wp-block-button__link:hover {
	background-color: var(--primary-dark);
	color: var(--white);
	transform: translateY(-2px);
}

/* Secondary — also the fallback for a button with no style chosen */
.wp-block-button.btn-secondary > .wp-block-button__link,
.wp-block-button.is-style-ao-secondary > .wp-block-button__link,
.wp-block-button:not([class*="is-style-"]):not(.btn-primary):not(.social-link) > .wp-block-button__link {
	background-color: var(--bg-base);
	color: var(--text-dark);
	border: 2px solid var(--primary-light);
	padding: 0.85rem 1.5rem;
	font-size: 1rem;
	box-shadow: none;
}

.wp-block-button.btn-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-ao-secondary > .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style-"]):not(.btn-primary):not(.social-link) > .wp-block-button__link:hover {
	border-color: var(--primary);
	color: var(--primary);
	transform: translateY(-2px);
}

.wp-block-button.btn-secondary.is-small > .wp-block-button__link,
.wp-block-button.is-style-ao-secondary.is-small > .wp-block-button__link {
	padding: 0.5rem 1.2rem;
	font-size: 0.9rem;
}

/* Chip — the small links on the credits cards (was .social-link) */
.wp-block-buttons.member-links {
	gap: 0.6rem;
}

.member-links .wp-block-button > .wp-block-button__link,
.wp-block-button.social-link > .wp-block-button__link,
.wp-block-button.is-style-ao-chip > .wp-block-button__link {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--primary);
	background-color: var(--white);
	padding: 0.25rem 0.65rem;
	border-radius: 12px;
	border: 1px solid var(--primary-light);
	box-shadow: none;
}

.member-links .wp-block-button > .wp-block-button__link:hover,
.wp-block-button.social-link > .wp-block-button__link:hover,
.wp-block-button.is-style-ao-chip > .wp-block-button__link:hover {
	background-color: var(--primary);
	color: var(--white);
	border-color: var(--primary);
	transform: none;
}

/* ---------------------------------------------------------------- details */

.faq .wp-block-details {
	background: var(--bg-base);
	border: 2px solid var(--primary-light);
	border-radius: 14px;
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
}

.faq .wp-block-details summary {
	font-weight: 800;
	font-size: 1.05rem;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 781px) {
	.wp-block-columns,
	.wp-block-columns.profile-columns {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.hero-frame img,
	.page-hero-section .hero-frame img {
		height: 260px;
	}
}


/* ------------------------------------------------------------- lightbox */

/* A slide keeps its `active` class between openings, and pointer-events on a
   child override the closed overlay's pointer-events:none — which left an
   invisible image sitting over the middle of the gallery, swallowing clicks.
   Hiding the whole overlay when it is closed takes it out of hit testing. */
.lightbox-overlay:not(.is-open) {
	visibility: hidden;
}

.lightbox-overlay:not(.is-open) .lightbox-img {
	pointer-events: none !important;
}

/* ------------------------------------------------ home page devlog cards */

a.blog-mini-card {
	text-decoration: none;
	color: inherit;
}

.mini-card-link {
	align-self: flex-start;
	display: inline-block;
	background: var(--white);
	color: var(--text-dark);
	border: 2px solid var(--primary-light);
	padding: 0.4rem 1rem;
	border-radius: 30px;
	font-weight: 800;
	font-size: 0.85rem;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

a.blog-mini-card:hover .mini-card-link {
	border-color: var(--primary);
	color: var(--primary);
	transform: translateY(-2px);
}

/* ------------------------------------------------------ hit testing fix */

/*
 * The original static pages set `content-visibility: auto` on every section
 * (and a few cards) as a paint optimisation. In the browser that skips the
 * subtree for hit testing as well, so clicks landed on the section instead of
 * the link or card inside it — which is why parts of a card were dead and only
 * the text sometimes worked. The saving is negligible on pages this size.
 */
.main-container > section,
section.wp-block-group,
.team-card,
.tech-grid,
.supporters-box,
.gallery-card,
.blog-card,
.featured-card {
	content-visibility: visible;
	contain-intrinsic-size: none;
}

/* Cards are one big link: make sure nothing inside eats the click. */
a.blog-card *,
a.featured-card *,
a.blog-mini-card * {
	pointer-events: none;
}

/* ------------------------------------------------- nav "Support Us!" pill */

/*
 * Belt and braces alongside the nav_menu_css_class filter: if the pill class
 * ever lands on the <li> as well as the <a>, only the anchor should paint.
 * Without this the pink pill and its glow render twice, one inside the other.
 */
li.nav-btn-support {
	background: none;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
}

li.nav-btn-support::after {
	content: none;
}

/* ------------------------------------------------------------ tag cloud */

/*
 * The block list sits directly above the support section, where the original
 * markup had it inside a bordered section. Give it breathing room below and a
 * slightly looser row gap so wrapped rows of tags do not look cramped.
 */
ul.tag-cloud-subtle.tag-cloud-subtle {
	margin-top: 3rem;
	margin-bottom: 3rem;
	gap: 0.5rem 0.4rem;
	line-height: 1.6;
}

.tag-cloud-subtle li {
	line-height: 1.4;
}

/* ---------------------------------------------------------- card grids */

/*
 * The card grids are declared to WordPress as grid-layout groups so the editor
 * treats them as real containers (see aos_grid_columns() in inc/blocks.php).
 * WordPress then prints its own `grid-template-columns` and `gap` for each one
 * at 0,1,0 specificity, and the order of that inline stylesheet relative to the
 * theme's is not guaranteed — so the design's own tracks are restated here with
 * a doubled class name (0,2,0) and it wins wherever it lands.
 */
.showcase-grid.showcase-grid { grid-template-columns: 2fr 1fr 1fr; gap: 1.25rem; }
.pillars-grid.pillars-grid   { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.flow-grid.flow-grid         { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.feature-grid.feature-grid   { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.status-grid.status-grid     { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tool-grid.tool-grid         { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.gallery-grid.gallery-grid   { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.team-grid.team-grid         { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.tech-grid.tech-grid         { grid-template-columns: repeat(4, 1fr); gap: 1rem; }

@media (max-width: 960px) {
	.pillars-grid.pillars-grid   { grid-template-columns: 1fr; }
	.showcase-grid.showcase-grid { grid-template-columns: 1fr; height: auto; }
	.feature-grid.feature-grid   { grid-template-columns: 1fr; }
	.flow-grid.flow-grid,
	.tool-grid.tool-grid,
	.status-grid.status-grid     { grid-template-columns: 1fr 1fr; }
	.gallery-grid.gallery-grid   { grid-template-columns: repeat(2, 1fr); }
	.team-grid.team-grid         { grid-template-columns: 1fr; }
	.tech-grid.tech-grid         { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.flow-grid.flow-grid,
	.tool-grid.tool-grid,
	.status-grid.status-grid     { grid-template-columns: 1fr; }
	.gallery-grid.gallery-grid   { grid-template-columns: 1fr; }
	.tech-grid.tech-grid         { grid-template-columns: 1fr; }
}

/*
 * Grid items stretch to the row height by default, which is what the original
 * cards did. Keep the editor's grid-item chrome from adding its own spacing.
 */
.wp-block-group.is-layout-grid > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ------------------------------------------------------- header site logo */

/*
 * The header brand is the site title in text until a custom logo is set, at
 * which point the same .logo anchor wraps the artwork instead. Constraining by
 * height keeps the lockup the same size on every page while the nav row stays
 * vertically centred.
 */
.logo.logo-has-image {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	flex: 0 0 auto;
}

.logo .logo-img {
	display: block;
	width: auto;
	height: 68px;
	max-width: 100%;
}

@media (max-width: 960px) {
	.logo .logo-img { height: 54px; }
}

@media (max-width: 560px) {
	.logo .logo-img { height: 44px; }
}


/* ================================================================ *
 * Trello fixes — October 2026
 * ================================================================ */

/* Columns -----------------------------------------------------------------
 * WordPress prints its own ".is-layout-flex { display:flex }" rule after this
 * file, which beat the grid declared above, so every Columns block fell back
 * to a flex row sized by its content (that is what squashed the Meet Ao
 * portraits into a thin strip). The doubled class puts the grid back. */
.wp-block-columns.wp-block-columns {
	display: grid;
}

/* Meet Ao: one row per portrait, so each heading lines up with the top of
 * its portrait. */
.wp-block-columns.profile-row {
	grid-template-columns: 300px 1fr;
	gap: 2rem;
	margin-top: 1.75rem;
	align-items: start !important;
}

.wp-block-columns.profile-row + .wp-block-columns.profile-row {
	margin-top: 1.25rem;
}

.profile-row .subhead.subhead {
	margin-top: 0;
}

.profile-row .subhead + .prose-text.prose-text {
	margin-top: 0.5rem;
}

/* Card game rules: list on the left, Special Abilities box on the right. */
.wp-block-columns.rules-columns {
	grid-template-columns: 1.4fr 1fr;
	gap: 2rem;
	margin-top: 1.75rem;
	align-items: start !important;
}

.rules-columns ol.rules-list.rules-list {
	margin-top: 0;
}

.rule-callout h3 {
	font-size: 1.5rem;
	margin-bottom: 0.6rem;
}

.rule-callout p {
	color: var(--text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.rule-callout p + p {
	margin-top: 0.9rem;
}

/* Every Columns variant stacks on phones. */
@media (max-width: 781px) {
	.wp-block-columns.wp-block-columns.wp-block-columns {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* Support box: the description is width-limited, so centre the block itself
 * as well as its text. */
.support-box .section-desc {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

/* Single blog post — modelled on the Patreon post layout ----------------- */
.single-head {
	padding-bottom: 1.5rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--primary-light);
}

.single-head .single-title {
	margin-bottom: 0.6rem;
}

.single-head .single-meta {
	margin-bottom: 0;
}

.single-head .blog-badge {
	margin-bottom: 0;
}

.single-subtitle {
	margin-top: 1rem;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--text-muted);
}

/* Cover image: shown whole, never cropped. */
.single-hero {
	margin: 0 0 2rem;
	background: none;
}

.single-hero img {
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
}

.article-body {
	font-size: 1rem;
	line-height: 1.7;
}

.article-body > * + * {
	margin-top: 1rem;
}

.article-body p:empty {
	display: none;
}

/* Section headings get a divider above them, like the Patreon posts. */
.article-body h2,
.article-body h3 {
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--primary-light);
	line-height: 1.3;
	color: var(--text-dark);
}

.article-body h2 { font-size: 1.5rem; }
.article-body h3 { font-size: 1.3rem; }

.article-body > h2:first-child,
.article-body > h3:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.article-body h2 + *,
.article-body h3 + * {
	margin-top: 0.6rem;
}

.article-body hr {
	border: 0;
	border-top: 1px solid var(--primary-light);
	margin: 2rem 0;
}

.article-body figure {
	margin-left: 0;
	margin-right: 0;
}

/* Age gate: date-of-birth fields ------------------------------------------ */
.age-dob-label {
	font-weight: 700;
	color: var(--text-dark);
	margin: 1.25rem 0 0.6rem;
}

.age-dob-fields {
	display: grid;
	grid-template-columns: 4.5rem 1fr 5.5rem;
	gap: 0.5rem;
}

.age-dob-fields input,
.age-dob-fields select {
	width: 100%;
	min-width: 0;
	padding: 0.7rem 0.75rem;
	border: 2px solid var(--primary-light);
	border-radius: 12px;
	background: var(--bg-base);
	font: inherit;
	font-weight: 600;
	color: var(--text-dark);
	text-align: center;
}

.age-dob-fields input:focus,
.age-dob-fields select:focus {
	outline: none;
	border-color: var(--primary);
}

.age-dob-error {
	margin-top: 0.75rem;
	color: var(--accent-dark);
	font-weight: 700;
	font-size: 0.9rem;
}

.age-dob-form .age-btn-group {
	margin-top: 1.25rem;
}

/* Support box with two cards (Ko-fi removed). */
.support-grid.support-grid--two {
	grid-template-columns: repeat(2, 1fr);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 960px) {
	.support-grid.support-grid--two { grid-template-columns: 1fr; }
}