/*
Theme Name: Puzzle Brokers Editorial
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: puzzle-brokers
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

:root {
	--pb-grid-line: rgba(28, 26, 23, 0.08);
	--pb-shadow: 0 1px 0 rgba(28, 26, 23, 0.08);
}

/* === reset === */
/* === header === */
.site-header {
	border-bottom: 1px solid var(--pb-grid-line);
	padding-block: var(--wp--preset--spacing--40);
}
.site-header__title a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.site-header__nav {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.site-header__nav a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}
.site-header__nav a:hover {
	color: var(--wp--preset--color--gold-dim);
}
.site-header__nav .wp-block-navigation-item > a {
	padding-inline: var(--wp--preset--spacing--20);
}
.site-header__actions {
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}
.site-header__actions .wp-block-navigation {
	margin-inline-end: var(--wp--preset--spacing--20);
}
.site-header__login a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	font-weight: 500;
}
.site-header__login a:hover {
	color: var(--wp--preset--color--forest);
}
.site-header__cta {
	display: inline-block;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--forest);
	font-weight: 600;
	padding: 0.5em 1.1em;
	border-radius: var(--wp--preset--spacing--10);
	text-decoration: none;
}
.site-header__cta:hover {
	background-color: var(--wp--preset--color--gold-dim);
}

/* === footer === */
.site-footer {
	border-top: 1px solid var(--pb-grid-line);
	padding-block: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--paper);
}
.site-footer__title a {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}
.site-footer__tag,
.site-footer__copy {
	color: var(--wp--preset--color--paper-dim);
}
/* === hero === */
.pb-hero {
	align-items: stretch;
}
.pb-hero > .wp-block-column {
	padding-block: var(--wp--preset--spacing--70);
}
.pb-hero__copy {
	padding-inline-start: var(--wp--style--root--padding-left);
	row-gap: var(--wp--preset--spacing--30);
	max-width: 46ch;
}
.pb-hero__panel {
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--paper);
	padding-inline: var(--wp--preset--spacing--60);
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: var(--wp--preset--spacing--30);
	align-items: center;
}
.pb-hero__panel-label {
	text-align: center;
}
.pb-hero__caption {
	color: var(--wp--preset--color--paper);
	margin: 0;
	text-align: center;
}
.pb-hero__caption-sub {
	color: var(--wp--preset--color--paper-dim);
	text-align: center;
	max-width: 34ch;
}
.pb-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--wp--preset--color--gold-dim);
	margin: 0;
}
.pb-eyebrow--on-dark {
	color: var(--wp--preset--color--gold);
}

/* === sudoku grid === */
.pb-sudoku {
	max-width: 360px;
	margin: 0 auto;
}
.pb-sudoku table {
	border-collapse: collapse;
	table-layout: fixed;
	background-color: var(--wp--preset--color--paper);
	width: 100%;
	border: 3px solid var(--wp--preset--color--ink);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.pb-sudoku td {
	width: 11.11%;
	height: 38px;
	text-align: center;
	vertical-align: middle;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.95rem, 2.4vw, 1.35rem);
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	border: 1px solid rgba(33, 31, 26, 0.3);
	padding: 0;
}
.pb-sudoku tr:nth-child(3n) td {
	border-bottom: 2px solid var(--wp--preset--color--ink);
}
.pb-sudoku td:nth-child(3n) {
	border-right: 2px solid var(--wp--preset--color--ink);
}
.pb-sudoku tr:first-child td {
	border-top: 2px solid var(--wp--preset--color--ink);
}
.pb-sudoku td:first-child {
	border-left: 2px solid var(--wp--preset--color--ink);
}

/* === sections === */
.pb-section {
	padding-block: var(--wp--preset--spacing--70);
}
.pb-lede {
	max-width: 62ch;
	margin-inline: 0 !important;
}
.pb-framed-image img {
	border: 1px solid var(--pb-grid-line);
	display: block;
}
.pb-framework-intro {
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--70);
}
.pb-law-grid > .wp-block-column {
	border-top: 2px solid var(--wp--preset--color--gold);
	padding-top: var(--wp--preset--spacing--30);
}

/* === feature band === */
.pb-feature-band {
	align-items: stretch;
}
.pb-feature-band > .wp-block-column {
	padding-block: var(--wp--preset--spacing--60);
}
.pb-feature-band__gold {
	background-color: var(--wp--preset--color--gold);
	padding-inline: var(--wp--preset--spacing--50);
	display: flex;
	align-items: center;
}
.pb-feature-band__gold h2 {
	color: var(--wp--preset--color--ink);
	margin: 0;
}
.pb-feature-band__copy {
	padding-inline: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--20);
}

/* === cards === */
.is-style-card {
	background-color: var(--wp--preset--color--paper);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--pb-grid-line);
}
.pb-membership-grid > .wp-block-column {
	border-top: 1px solid var(--pb-grid-line);
	padding-top: var(--wp--preset--spacing--40);
}
.pb-membership-grid > .wp-block-column.pb-tier-featured {
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--paper);
	border-top-color: var(--wp--preset--color--gold);
	padding: var(--wp--preset--spacing--40);
}
.pb-tier-price {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--wp--preset--color--gold-dim);
	margin-bottom: var(--wp--preset--spacing--10);
}
.pb-membership-grid > .wp-block-column.pb-tier-featured .pb-tier-price {
	color: var(--wp--preset--color--gold);
}
.pb-membership-grid > .wp-block-column.pb-tier-featured .pb-tier-cta a {
	color: var(--wp--preset--color--paper);
}
.pb-tier-cta {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.pb-taxonomy-grid {
	margin-bottom: var(--wp--preset--spacing--60);
}

/* === cta === */
.pb-section--cta {
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--paper);
}
.pb-cta-row {
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--40);
}
.pb-eyebrow--cta {
	color: var(--wp--preset--color--gold);
}
.pb-cta-heading {
	color: var(--wp--preset--color--paper);
	max-width: 18ch;
	margin: 0;
}
.pb-cta-button {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	display: inline-block;
}
.pb-cta-button:hover {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

/* === about page === */
.pb-quote {
	border-left: 3px solid var(--wp--preset--color--gold);
	padding-left: var(--wp--preset--spacing--40);
	margin-inline: 0;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--forest);
}
.pb-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}
.pb-section--cta.has-text-align-center .pb-cta-heading,
.pb-section--cta.has-text-align-center .pb-lede {
	margin-inline: auto;
}
.pb-section--cta .pb-contact {
	text-align: center;
	margin-top: var(--wp--preset--spacing--30);
}
.pb-section--cta .pb-contact a {
	color: var(--wp--preset--color--gold);
}
.pb-section--cta .pb-contact a:hover {
	color: var(--wp--preset--color--paper);
}

/* === play page === */
.pb-play-grid {
	column-gap: var(--wp--preset--spacing--50);
}
.pb-play-col {
	border-top: 2px solid var(--wp--preset--color--gold);
	padding-top: var(--wp--preset--spacing--30);
}
.pb-play-col-note {
	color: var(--wp--preset--color--ink-soft);
	max-width: 32ch;
}
.pb-mode-buttons {
	row-gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}
.pb-mode-buttons .wp-block-button__link.is-style-outline,
.pb-mode-buttons .is-style-outline .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--forest);
	color: var(--wp--preset--color--forest);
	background-color: transparent;
}
.pb-mode-buttons .is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--paper);
}
.pb-play-footnote {
	color: var(--wp--preset--color--ink-soft);
	max-width: 62ch;
	margin-top: var(--wp--preset--spacing--60);
}

/* === mvp landing: hero band (forest) === */
.pb-hero-band {
	color: var(--wp--preset--color--paper);
}
.pb-hero-band .pb-hero__copy h1 {
	color: var(--wp--preset--color--paper);
}
.pb-hero-band .pb-hero-sub {
	color: var(--wp--preset--color--paper-dim);
}
.pb-hero-band .pb-hero__copy a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--gold);
}
.pb-hero-band .pb-hero__copy a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--paper);
}
.pb-hero-band .pb-hero__copy .wp-block-button__link {
	color: var(--wp--preset--color--forest);
}
.pb-hero-band .pb-hero__copy .wp-block-button__link:hover {
	color: var(--wp--preset--color--forest);
	background-color: var(--wp--preset--color--gold-dim);
}
.pb-hero-band .pb-hero__panel {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.pb-hero-band .pb-hero__panel .pb-eyebrow {
	color: var(--wp--preset--color--gold-dim);
}
.pb-hero-band .pb-hero__caption {
	color: var(--wp--preset--color--ink);
}
.pb-hero-band .pb-hero__caption-sub {
	color: var(--wp--preset--color--ink-soft);
}

/* === mvp landing: heading rows === */
.pb-heading-row {
	align-items: baseline;
	row-gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--60);
}
.pb-heading-row > .wp-block-group:first-child {
	max-width: 60ch;
}
.pb-band-note {
	max-width: 34ch;
	color: var(--wp--preset--color--ink-soft);
	text-align: right;
	margin: 0;
}
.pb-section--alt .pb-band-note,
.pb-banding-note {
	color: var(--wp--preset--color--ink-soft);
}
.pb-heading--paper {
	color: var(--wp--preset--color--paper);
}
.pb-membership-band .pb-band-note--on-dark {
	color: var(--wp--preset--color--paper-dim);
}

/* === mvp landing: board wrap + 6×6 & 4×4 grids === */
.pb-board-wrap .pb-sudoku {
	margin: 0 auto;
}
.pb-caption--ink {
	color: var(--wp--preset--color--ink-soft) !important;
	max-width: 40ch;
}
.pb-sudoku--6 table {
	max-width: 300px;
}
.pb-sudoku--6 td {
	width: 16.66%;
	height: 42px;
}
.pb-sudoku--6 tr:nth-child(3n) td {
	border-bottom: 2px solid var(--wp--preset--color--ink);
}
.pb-sudoku--6 td:nth-child(2n) {
	border-right: 2px solid var(--wp--preset--color--ink);
}
.pb-sudoku--4 table {
	max-width: 280px;
}
.pb-sudoku--4 td {
	width: 25%;
	height: 48px;
}
.pb-sudoku--4 tr:nth-child(2n) td {
	border-bottom: 2px solid var(--wp--preset--color--ink);
}
.pb-sudoku--4 td:nth-child(2n) {
	border-right: 2px solid var(--wp--preset--color--ink);
}

/* === mvp landing: modes legend card === */
.pb-legend {
	max-width: 380px;
	margin-inline: 0;
}
.pb-legend h3 {
	border-bottom: 2px solid var(--wp--preset--color--gold);
	padding-bottom: var(--wp--preset--spacing--20);
	margin-block-start: 0;
}

/* === mvp landing: membership on forest === */
.pb-membership-band .pb-membership-grid--on-forest > .wp-block-column {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.pb-membership-band .pb-membership-grid--on-forest > .wp-block-column.pb-tier-featured {
	border-top: 3px solid var(--wp--preset--color--gold);
}

/* === mvp landing: gold cta band === */
.pb-section--cta-gold .pb-cta-heading {
	color: var(--wp--preset--color--ink);
	max-width: 18ch;
	margin: 0;
}
.pb-cta-button--forest {
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--paper);
}
.pb-cta-button--forest:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}


/* === landing bands butt edge-to-edge === */
.wp-block-post-content.is-layout-constrained > .alignfull + .alignfull {
	margin-block-start: 0;
}

.pb-intro-row {
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
}
.pb-intro-row h1 {
	max-width: 14ch;
	margin-block: var(--wp--preset--spacing--20) 0;
}
.pb-intro .pb-lede {
	max-width: 62ch;
	margin-top: var(--wp--preset--spacing--20);
}

/* === membership page: sign-up band (forest) === */
.pb-signup-band .pb-signup-row {
	align-items: center;
}
.pb-signup-band .pb-account-list {
	color: var(--wp--preset--color--paper-dim);
	max-width: 48ch;
	margin-block: var(--wp--preset--spacing--20) 0;
}
.pb-account-panel .is-style-card {
	max-width: 400px;
	margin-inline: 0;
}

.pb-register-row {
	align-items: flex-start;
}
.pb-register-copy .pb-account-list {
	max-width: 44ch;
	margin-top: 0;
}
.pb-register-panel .is-style-card {
	max-width: 440px;
	margin-inline: 0;
}
.pb-register-card {
	row-gap: var(--wp--preset--spacing--30);
}
.pb-register-card h3 {
	border-bottom: 2px solid var(--wp--preset--color--gold);
	padding-bottom: var(--wp--preset--spacing--20);
	margin-block-start: 0;
}
.pb-muted {
	color: var(--wp--preset--color--ink-soft);
}
.pb-register-card .wp-block-jetpack-contact-form,
.pb-register-card .wp-block-jetpack-contact-form .grunion-field-label {
	color: var(--wp--preset--color--ink);
}
.pb-register-card .wp-block-jetpack-contact-form input[type="text"],
.pb-register-card .wp-block-jetpack-contact-form input[type="email"] {
	border: 1px solid var(--wp--preset--color--green-border, rgba(28, 26, 23, 0.25));
	background-color: var(--wp--preset--color--paper);
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	width: 100%;
}
.pb-register-card .wp-block-jetpack-contact-form .wp-block-button__link {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
.pb-register-card .wp-block-jetpack-contact-form .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.pb-play-surface {
	align-items: center;
}
.pb-board-card {
	max-width: 360px;
	margin-inline: 0;
}
.pb-board-card .pb-sudoku {
	max-width: 300px;
	margin: 0 auto;
}
.pb-piece-col {
	row-gap: var(--wp--preset--spacing--30);
}
.pb-piece-col .pb-howto {
	max-width: 46ch;
	margin-top: 0;
}

.pb-move-row,
.pb-video-row {
	align-items: center;
}
.pb-move-copy .pb-howto {
	max-width: 46ch;
	margin-top: var(--wp--preset--spacing--30);
}
.pb-move-panel .is-style-card,
.pb-video-panel .is-style-card {
	max-width: 400px;
	margin-inline: 0;
}

/* === onboarding: modes grid === */
.pb-mode-grid > .wp-block-column {
	border-top: 2px solid var(--wp--preset--color--gold);
	padding-top: var(--wp--preset--spacing--30);
}

/* === onboarding: hard-rule band (forest) === */
.pb-rule-band .pb-rule-row {
	max-width: 60ch;
	margin-inline: 0;
}
.pb-rule-sub {
	color: var(--wp--preset--color--paper-dim);
	max-width: 48ch;
	margin-block-start: var(--wp--preset--spacing--20);
}

/* === onboarding: card buttons === */
.pb-legend .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--forest);
	border: 1.5px solid var(--wp--preset--color--forest);
}
.pb-legend .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--paper);
}

/* === responsive === */
@media (max-width: 782px) {
	.pb-heading-row {
		flex-wrap: wrap;
	}
	.pb-band-note {
		text-align: left;
		max-width: 100%;
	}
	.pb-hero-band .pb-hero__panel,
	.pb-hero-band .pb-hero__copy {
		padding-inline: var(--wp--style--root--padding-left);
	}
}
@media (max-width: 782px) {
	.pb-hero {
		flex-wrap: wrap;
	}
	.pb-hero > .wp-block-column {
		flex-basis: 100% !important;
	}
	.pb-hero__copy {
		max-width: 100%;
		padding-inline-start: var(--wp--style--root--padding-left);
	}
	.pb-hero__panel {
		padding-inline: var(--wp--style--root--padding-left);
	}
	.pb-framework-intro,
	.pb-feature-band {
		flex-wrap: wrap;
	}
	.pb-framework-intro > .wp-block-column,
	.pb-feature-band > .wp-block-column {
		flex-basis: 100% !important;
	}
	.pb-feature-band__gold,
	.pb-feature-band__copy {
		padding-inline: var(--wp--style--root--padding-left);
	}
}