/*
Theme Name: Prayer Summits Japan
Author: Karen Ellrick
Description: Block theme for Prayer Summits Japan (祈りのサミット日本).
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prayer-summits-japan
*/

/*
 * Colours come only from palette presets or custom greys in theme.json.
 * No hex literals here, so a palette change propagates everywhere.
 */

/* ==========================================================================
   Page frame: indigo canvas, white panels in gold rings
   ========================================================================== */

.wp-site-blocks {
	padding-inline: var(--wp--custom--ring--gutter);
	padding-block-start: var(--wp--custom--ring--gutter);
}

.wp-site-blocks > * {
	max-width: var(--wp--custom--ring--max);
	margin-inline: auto;
}

.psj-panel {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border: var(--wp--custom--ring--width) solid var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--ring--radius);
}

main.psj-panel {
	padding: var(--wp--custom--ring--padding);
}

/*
 * Elements given a 44px min-height plus padding: border-box keeps the padding
 * inside the minimum. Buttons already default to this; links and inputs don't.
 */
.wp-block-navigation-item__content,
.wp-block-search__input {
	box-sizing: border-box;
}

/* Focus: gold ring on the indigo canvas, indigo ring inside white panels. */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

:where(.psj-panel) :focus-visible {
	outline-color: var(--wp--preset--color--indigo);
}

/*
 * Editor canvas. Anything that will appear inside a white panel (post and page
 * content, the navigation menu, patterns, the sidebar part) is edited on white
 * with a small inset. Views that show the real frame keep the indigo canvas:
 * templates and the header/overlay parts (they contain .psj-panel) and the
 * footer part (it sits on the canvas). Two :not(:has()) rather than one with a
 * selector list, because the editor rewrites stylesheet selectors at commas.
 */
.editor-styles-wrapper:not(:has(.psj-panel)):not(:has(.psj-footer)) {
	padding-inline: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
}

.editor-styles-wrapper:not(:has(.psj-panel)):not(:has(.psj-footer)) .wp-site-blocks {
	padding-inline: 0;
}

/*
 * Core centres the page title in the post editor with !important side margins,
 * even when the content below it is left-aligned, as in page.html. Matching
 * !important is the only override. Scoped to left-aligned content, so pages on
 * the no-sidebar template (centred content) keep a centred title.
 */
.editor-styles-wrapper:has(.is-root-container.is-content-justification-left) .editor-visual-editor__post-title-wrapper > .wp-block-post-title {
	margin-left: 0 !important;
}

/* ==========================================================================
   Header
   ========================================================================== */

.psj-header {
	/* Left inset shared by the lockup row and the menu bar, so the logo and the first menu label line up. */
	--psj-header-inset: clamp(14px, 2vw, 22px);
}

/*
 * These groups lay out their children with flex/grid, so core's flow-layout
 * block gap (a 1.5rem top margin on each child after the first) only adds
 * stray space: it made the lockup row taller and pushed the menu bar down.
 */
.psj-panel.psj-header > *,
.psj-header .psj-header-top > * {
	margin-block: 0;
}

.psj-header-top {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.75rem;
	padding-block: clamp(10px, 1.5vw, 16px);
	/* Right padding leaves room for the Facebook icon in the corner. */
	padding-inline: var(--psj-header-inset) calc(var(--psj-header-inset) + 44px);
}

/*
 * The lockup is a single banner image carrying the site name, so it takes the
 * row's leftover space rather than sizing to its content. flex-basis 0 keeps
 * the banner's 2188px intrinsic width out of the flex calculation, so the
 * verse keeps its place on the row no matter how large the image file is.
 */
.psj-lockup {
	flex: 1 1 0;
	min-width: 0;
}

.psj-lockup .wp-block-site-logo,
.psj-lockup .wp-block-site-logo a {
	display: block;
}

/*
 * Fill the column, up to the widest the header ever offers (830px, set by the
 * 1280px panel cap). The block also carries width 830, so core's `sizes` hint
 * matches and a phone fetches a small copy rather than the 2188px original.
 */
.psj-lockup .wp-block-site-logo img {
	width: 100%;
	max-width: 640px;
	height: auto;
}

.psj-verse {
	margin-inline-start: auto;
	text-align: right;
}

.psj-verse > * {
	margin: 0;
}

.psj-verse > * + * {
	margin-block-start: 0.125rem;
}

.psj-verse-text {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.875rem, 0.75rem + 0.4vw, 1rem);
	line-height: 1.6;
}

.psj-verse-cite {
	color: var(--wp--custom--grey--meta);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	line-height: 1.6;
}

.psj-header .psj-social {
	position: absolute;
	top: clamp(4px, 1vw, 10px);
	right: clamp(4px, 1vw, 10px);
	margin: 0;
	font-size: 24px;
}

.psj-header .psj-social .wp-social-link a {
	padding: 10px;
}

/*
 * Menu bar (desktop). 850px, not core Navigation's 600px: below that the bar
 * wraps to two rows and the widest submenu runs off the right edge. The
 * breakpoint is one decision written in three places - here, the mobile header
 * below, and the core overrides after it. Change all three together.
 */
@media (min-width: 850px) {
	.psj-header > .wp-block-navigation {
		/* Pill padding sits inside this, so subtract it to align labels with the logo; keep 8px so a hover pill never touches the ring. */
		padding: 10px max(8px, calc(var(--psj-header-inset) - var(--psj-pad-x)));
		background-color: var(--wp--preset--color--cream);
		border-top: 3px solid var(--wp--preset--color--gold);
		border-radius: 0 0 var(--wp--custom--ring--radius-inner) var(--wp--custom--ring--radius-inner);
	}
}

/*
 * Mobile header. Below 850px the nav block collapses to its open button, which
 * joins the logo row; the verse drops to a cream strip. .psj-header-top becomes
 * display:contents so its children can be placed in the header grid alongside
 * the nav.
 */
@media (max-width: 849.98px) {
	.psj-header {
		display: grid;
		/* The banner fills the first track, so the gap is what keeps it off the menu button. */
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 12px;
		align-items: center;
	}

	.psj-header-top {
		display: contents;
	}

	.psj-lockup {
		grid-area: 1 / 1;
		padding: 12px 0 12px 14px;
	}

	/*
	 * Facebook moves into the mobile menu at these widths and the banner takes
	 * back its 44px. It is one tap away rather than on screen; above the
	 * breakpoint it keeps its corner of the header.
	 */
	.psj-header .psj-social {
		display: none;
	}

	.psj-header > .wp-block-navigation {
		grid-area: 1 / 2;
		padding-inline-end: 14px;
	}

	.psj-verse {
		grid-area: 2 / 1 / 3 / -1;
		margin: 0;
		padding: 10px 16px;
		text-align: center;
		background-color: var(--wp--preset--color--cream);
		border-top: 3px solid var(--wp--preset--color--gold);
		border-radius: 0 0 var(--wp--custom--ring--radius-inner) var(--wp--custom--ring--radius-inner);
	}
}

/*
 * The menu button carries both the hamburger and the word for "Menu": the
 * icon is what a visitor who does not read the label still recognises, and
 * the word is what stops the icon being looked straight past.
 *
 * Core renders one or the other, never both - `$toggle_button_content` is a
 * ternary on hasIcon. So the block carries hasIcon false, which emits core's
 * own translation of "Menu" as real text (nothing hardcoded here), and the
 * bars are drawn below. Core also forces font-family, weight and size onto
 * this button with a tripled class, hence .psj-nav in the selector.
 */
.psj-header .psj-nav .wp-block-navigation__responsive-container-open {
	min-width: 46px;
	min-height: 46px;
	padding: 0 14px;
	align-items: center;
	justify-content: center;
	gap: 9px;
	color: var(--wp--preset--color--indigo);
	background-color: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--indigo);
	border-radius: 12px;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* Three bars, sized like core's own hamburger, in the text colour. */
.psj-header .psj-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 2px;
	background-color: currentColor;
	box-shadow: 0 -6px currentColor, 0 6px currentColor;
}

/*
 * Core hands the menu bar over to the overlay at 600px; these two put that
 * back for 600-850px. Core's own rules sit in `@media (min-width: 600px)`, so
 * these outrank them by one class from inside a narrower query.
 */
@media (min-width: 600px) and (max-width: 849.98px) {
	.psj-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.psj-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* ==========================================================================
   Navigation: desktop menu bar
   --------------------------------------------------------------------------
   Rules are scoped to the responsive container while it is NOT open, so they
   never leak into the mobile overlay (which renders inside the same nav).
   Submenus open on click, so every parent is a <button> followed by a
   sibling arrow <span>. The arrow is pulled back over the button's right
   padding so the hover/current fill covers label and arrow together.
   ========================================================================== */

.psj-nav {
	--psj-pad-x: 1rem;
	--psj-icon: 0.8em;
	gap: 6px 4px;
}

/*
 * Arrow size is one variable; the toggle padding and the arrow's negative
 * margin below are both derived from it. Transparent background so the arrow
 * never paints a patch over its button's hover fill (core sets inherit).
 */
.psj-nav .wp-block-navigation-item .wp-block-navigation__submenu-icon {
	width: var(--psj-icon);
	height: var(--psj-icon);
	background-color: transparent;
}

.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	flex-grow: 1;
	gap: 6px 4px;
}

/*
 * Items keep their natural width: when the bar gets crowded a whole item moves
 * to a second row instead of its label breaking inside the pill.
 */
.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item {
	flex-shrink: 0;
}

.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.625rem var(--psj-pad-x);
	border-radius: 999px;
}

.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .open-on-click > .wp-block-navigation-submenu__toggle {
	padding-inline-end: calc(var(--psj-pad-x) + var(--psj-icon) + 6px);
}

.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .open-on-click > .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
	position: relative;
	z-index: 2;
	margin-inline: calc(-1 * var(--psj-pad-x) - var(--psj-icon)) var(--psj-pad-x);
}

/*
 * Second-level arrows point down like the first level, since level 3 opens
 * downward too. Core turns them sideways from 782px and that rule outranks
 * its own open-state rotation, so both have to be stated here.
 */
.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
	transform: rotate(0deg);
}

.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/*
 * States. Text colour is set on the menu item (li) and inherited by both its
 * link/button and its arrow (core makes both inherit), so an arrow can never
 * disagree with its label. Backgrounds go on the link/button.
 * Order matters where specificity ties: resting, hover, current, open.
 */
.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item {
	color: var(--wp--preset--color--ink);
}

/* Hover: gold fill, indigo text. Not applied to the current item, which keeps its indigo pill. */
.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:not(.current-menu-item):not(.current-menu-ancestor):has(> .wp-block-navigation-item__content:hover) {
	color: var(--wp--preset--color--indigo);
}

.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:not(.current-menu-item):not(.current-menu-ancestor) > .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--gold);
}

/* Current page, and the items above it: indigo fill, white text. */
.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:is(.current-menu-item, .current-menu-ancestor) {
	color: var(--wp--preset--color--paper);
}

.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--indigo);
	font-weight: 600;
}

/* Open submenu parent: white fill, indigo text. Outranks (colour) or follows (fill) the current-page rules, so an open current section is still readable. */
.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
	color: var(--wp--preset--color--indigo);
}

.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item > .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	background-color: var(--wp--preset--color--paper);
}

/* Submenu panels: cream, gold ring, overlapping the bar by 6px. */
.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container {
	--psj-pad-x: 0.5rem;
	top: calc(100% + 4px);
	left: -12px;
	width: max-content;
	min-width: 100%;
	max-width: min(22rem, calc(100vw - 2 * var(--wp--custom--ring--gutter)));
	padding: 8px;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--cream);
	border: 4px solid var(--wp--preset--color--gold);
	border-radius: 20px;
	box-shadow: var(--wp--preset--shadow--submenu);
}

/*
 * Third level drops below its parent item and overlaps it by 6px — the same
 * relationship the second level has with the menu bar, so the two behave
 * alike. It covers the second-level items beneath it, which is intended, and
 * it can never run off the right edge the way a fly-out could.
 *
 * It is also staggered 28px right of the box below it, so the two read as
 * separate boxes rather than one. Its parent row's text starts 20px in
 * (4px border + 8px panel padding + 8px pill padding), so 8px of that label
 * stays visible and clickable. `left` is measured from the parent row, which
 * itself sits 12px inside the box: 28 - 12 = 16.
 */
.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	top: calc(100% - 6px);
	left: 16px;
}

/* Core adds a transparent hover bridge to the left of a fly-out third level; with it below, that strip is in the wrong place. */
.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
	content: none;
}

/* 8px inside the pill, matching the 8px between pill and gold ring. Core sets 1em here, so the shorthand has to be restated. */
.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	flex-grow: 1;
	padding: 0.6875rem var(--psj-pad-x);
	border-radius: 10px;
}

/* A parent inside a submenu still needs room for its arrow; this has to outrank the shorthand above. */
.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item.open-on-click > .wp-block-navigation-submenu__toggle {
	padding-inline-end: calc(var(--psj-pad-x) + var(--psj-icon) + 6px);
}

/*
 * Hover opens a submenu as well as click. Core switches its own hover rule
 * off wherever `.open-on-click` is present, so the theme supplies one, gated
 * on `(hover: hover)` so touch devices are untouched and parents stay real
 * buttons. Only the four properties core uses to hide a submenu are undone;
 * the width rules above already apply in both states.
 *
 * Known trade-off, accepted: `aria-expanded` is set by core's script on click,
 * so a hover-opened submenu is still announced as collapsed.
 */
@media (hover: hover) {
	/*
	 * Hover bridge. The panel sits 4px below its item and that strip belongs to
	 * neither, so sliding down onto the menu dropped the hover and shut it again.
	 * A transparent 6px strip on the item spans the gap. It is only laid down
	 * while hovering, and covers empty menu-bar padding, so it intercepts nothing.
	 */
	.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		top: 100%;
		height: 6px;
	}

	.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover > .wp-block-navigation__submenu-container {
		visibility: visible;
		height: auto;
		overflow: visible;
		opacity: 1;
	}

	/*
	 * A parent whose submenu is showing wears the open pill, not the gold hover
	 * fill, so it looks the same however the submenu was opened. These follow
	 * the hover and current-page rules above and tie with them on specificity.
	 */
	.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child:hover {
		color: var(--wp--preset--color--indigo);
	}

	.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
		background-color: var(--wp--preset--color--paper);
	}

	.psj-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}
}

/* ==========================================================================
   Navigation: mobile overlay (parts/navigation-overlay.html)
   ========================================================================== */

.psj-nav .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--wp-admin--admin-bar--height, 0);
	padding: var(--wp--custom--ring--gutter);
	background-color: var(--wp--preset--color--indigo);
}

/*
 * Core lays the overlay out inside a *row* flexbox
 * (.wp-block-navigation__responsive-container-content), so the overlay
 * container is a flex item whose base size would come from its content -- and
 * that content is a banner with a 2188px intrinsic width. Basis 0 with
 * min-width 0 keeps content size out of the calculation, so the panel is sized
 * by the viewport alone whatever is put inside it.
 */
.psj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__overlay-container {
	flex: 1 1 0;
	min-width: 0;
}

.psj-overlay {
	max-width: 100%;
	overflow: hidden;
}

/*
 * Grid, not flex: a minmax(0, 1fr) track is free to shrink below its content,
 * which is the reliable way to stop a wide banner widening the row. The block
 * still declares a flex layout; this overrides it.
 */
.psj-overlay-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
}

.psj-overlay-top .wp-block-site-logo {
	min-width: 0;
}

.psj-overlay .wp-block-navigation-overlay-close {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	color: var(--wp--preset--color--gold);
	background-color: var(--wp--preset--color--indigo);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
}

.psj-overlay .wp-block-navigation-overlay-close svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.psj-overlay .wp-block-site-logo,
.psj-overlay .wp-block-site-logo a {
	display: block;
}

.psj-overlay .wp-block-site-logo img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Facebook sits at the foot of the menu, clear of the close button. 30px icon plus padding clears 44px. */
.psj-overlay .psj-overlay-social {
	justify-content: center;
	margin: 0;
	padding: 16px 14px 20px;
	font-size: 30px;
	border-top: 1px solid var(--wp--custom--grey--rule);
}

.psj-overlay .psj-overlay-social .wp-social-link a {
	padding: 8px;
}

.psj-overlay .psj-overlay-nav {
	--psj-pad-x: 18px;
	width: 100%;
	border-top: 3px solid var(--wp--preset--color--gold);
}

.psj-overlay .psj-overlay-nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.psj-overlay .psj-overlay-nav .wp-block-navigation-item {
	flex-wrap: wrap;
}

/*
 * Every row in the overlay is the same size, colour and weight at every
 * level, with one divider above it. Depth is shown by indent alone, so a
 * third-level link reads as no less tappable than a first-level one.
 */
.psj-overlay .psj-overlay-nav .wp-block-navigation-item__content {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-height: 44px;
	padding: 14px var(--psj-pad-x);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	border-top: 1px solid var(--wp--custom--grey--rule);
}

/* The gold rule under the overlay header already separates the first row. */
.psj-overlay .psj-overlay-nav .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content {
	border-top: 0;
}

/*
 * Core opens every submenu when the overlay opens, and tapping a toggle does
 * not collapse it (tested on WP 7.1). So the overlay shows all levels
 * expanded, and parent toggles are styled as plain section labels: no arrow,
 * no pointer, nothing that suggests they collapse.
 */
.psj-overlay .psj-overlay-nav .wp-block-navigation__submenu-icon {
	display: none;
}

.psj-overlay .psj-overlay-nav .open-on-click > .wp-block-navigation-submenu__toggle {
	padding-inline-end: var(--psj-pad-x);
	background-color: var(--wp--preset--color--cream);
	font-weight: 600;
	cursor: default;
}

/* Current page: indigo fill, white text. Only a link can be the current page. */
.psj-overlay .psj-overlay-nav .current-menu-item > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--indigo);
	font-weight: 600;
}

/*
 * The section label above the current page keeps its cream band and takes
 * indigo text; it is not a link, so it must not wear the current-page pill.
 * This has to follow the cream rule above — the two selectors tie on
 * specificity and only the colour is meant to change.
 */
.psj-overlay .psj-overlay-nav :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--indigo);
}

/*
 * Submenus expand in place rather than floating, and carry no fill of their
 * own: the cream belongs to the parent label, so every link sits on the
 * panel's white ground whatever its level.
 */
.psj-overlay .psj-overlay-nav .has-child .wp-block-navigation__submenu-container {
	position: static;
	flex-basis: 100%;
	padding: 0;
	color: var(--wp--preset--color--ink);
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

/* One indent step per level. */
.psj-overlay .psj-overlay-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-inline-start: calc(var(--psj-pad-x) + 20px);
}

.psj-overlay .psj-overlay-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-inline-start: calc(var(--psj-pad-x) + 40px);
}

/* ==========================================================================
   Main column + sidebar
   ========================================================================== */

/*
 * minmax(0, 1fr) rather than an implicit track: an implicit grid column sizes
 * to its widest content, so a wide block in the page (e.g. a three-column
 * Grid) would stretch the column past the viewport instead of shrinking.
 */
.psj-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}

/*
 * Sidebar sits beside the content only when the main column can stay readable
 * (~450px+ of Japanese text); below that it drops underneath.
 */
@media (min-width: 1000px) {
	.psj-with-sidebar {
		grid-template-columns: minmax(0, 1fr) 20rem;
		align-items: start;
	}
}

.psj-with-sidebar > * {
	margin-block-start: 0;
}

/* Flex gap rather than sibling margins, so a hidden section menu leaves no gap above what follows. */
.psj-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.psj-sidebar > * {
	margin-block: 0;
}

/* ==========================================================================
   Sidebar section menu (parts/sidebar.html)
   --------------------------------------------------------------------------
   A second copy of the site menu with submenus always open, reduced by CSS to
   the branch that contains the current page: its top-level item becomes the
   heading, with that section's pages listed beneath. Core marks the current
   page (.current-menu-item) and every item above it (.current-menu-ancestor),
   which is all the filtering needs.

   The filtering rules start with body:not(.editor-styles-wrapper). The editor
   rewrites a leading "body" to .editor-styles-wrapper, so these rules can
   never match there, and the Site Editor shows the whole menu to edit.

   Selectors start at aside.psj-sidebar to outrank core's .open-always rules.
   ========================================================================== */

/* Nothing to show: the page isn't in the menu, or it's a top-level page with no children. */
body:not(.editor-styles-wrapper) aside.psj-sidebar .psj-section-nav:not(:has(.current-menu-ancestor)):not(:has(.has-child.current-menu-item)) {
	display: none;
}

/* Only the current section, and only the current branch's third level. */
body:not(.editor-styles-wrapper) aside.psj-sidebar .psj-section-nav .wp-block-navigation__container > .wp-block-navigation-item:not(.current-menu-item):not(.current-menu-ancestor),
body:not(.editor-styles-wrapper) aside.psj-sidebar .psj-section-nav .has-child .wp-block-navigation__submenu-container .has-child:not(.current-menu-item):not(.current-menu-ancestor) > .wp-block-navigation__submenu-container {
	display: none;
}

aside.psj-sidebar .psj-section-nav .wp-block-navigation__container,
aside.psj-sidebar .psj-section-nav .wp-block-navigation-item {
	display: block;
	width: 100%;
}

/* Section heading: the top-level item, drawn like the Underlined style's heading. */
aside.psj-sidebar .psj-section-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	/* 44px because the heading is a link while the section's parent page still exists. */
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 0 0.5rem;
	color: var(--wp--preset--color--indigo);
	border-bottom: 3px solid var(--wp--preset--color--gold);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* The section's pages: a ruled list. */
aside.psj-sidebar .psj-section-nav .has-child .wp-block-navigation__submenu-container {
	display: block;
	gap: 0;
	padding: 0;
}

aside.psj-sidebar .psj-section-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.375rem 0.5rem;
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--custom--grey--hairline-soft);
	font-size: 0.9375rem;
	line-height: 1.5;
}

aside.psj-sidebar .psj-section-nav .has-child .wp-block-navigation__submenu-container a.wp-block-navigation-item__content[href]:hover {
	color: var(--wp--preset--color--indigo);
	background-color: var(--wp--preset--color--cream);
}

aside.psj-sidebar .psj-section-nav .has-child .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--indigo);
	background-color: var(--wp--preset--color--cream);
	font-weight: 700;
}

/* Third level: indented behind a gold rule, as in the mobile menu. */
aside.psj-sidebar .psj-section-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-inline-start: 0.75rem;
	border-left: 3px solid var(--wp--preset--color--gold);
}

.psj-sidebar .wp-block-heading {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	line-height: var(--wp--custom--line-height--tight);
}

/* ==========================================================================
   Content typography
   ========================================================================== */

.wp-block-post-title {
	margin-block: 0 0.5rem;
}

.wp-block-post-content h2 {
	padding-bottom: 0.375em;
	border-bottom: 3px solid var(--wp--preset--color--gold);
}

/*
 * Vertical rhythm. Core's flow layout puts one block gap above every block,
 * which would leave a heading as close to the text above it as to its own
 * paragraph. More space above headings, less below. (Core's first-child rule
 * is more specific, so a heading at the very top still gets no margin.)
 */
.wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wp-block-post-content > :is(h3, h4, h5, h6) {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wp-block-post-content > h2 + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-post-content > :is(h3, h4, h5, h6) + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

.wp-block-post-content a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.wp-block-post-content a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

/* Quote */
.wp-block-quote cite {
	display: block;
	margin-block-start: 0.5rem;
}

/* Buttons: secondary (outline) hover */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--indigo);
}

/*
 * Images: white "polaroid" frame with the caption inside it.
 *
 * `display: block` is deliberate. Core gives an aligned image (left, right,
 * centre) `display: table` and its caption `display: table-caption`, and a
 * table-caption box is laid out outside the table box — so the caption
 * escaped the figure's side padding and read as a separate strip below the
 * frame. As a plain block the padding applies to image and caption alike.
 *
 * Opt out with the Plain style.
 */
.wp-block-post-content .wp-block-image:not(.is-style-psj-plain) {
	display: block;
	width: fit-content;
	max-width: 100%;
	padding: 10px;
	background-color: var(--wp--preset--color--paper);
	box-shadow: var(--wp--preset--shadow--figure), 0 0 0 1px var(--wp--custom--grey--hairline);
}

/*
 * A linked image is wrapped in an inline-block <a>, which sits on a line
 * box and leaves the strut's descender as a stray gap under the picture.
 * Block removes the line box, so the frame's padding is the only spacing.
 */
.wp-block-post-content .wp-block-image:not(.is-style-psj-plain) > a {
	display: block;
}

/* A long caption can make the frame wider than a small image; keep the image centred in it. */
.wp-block-post-content .wp-block-image:not(.is-style-psj-plain) img {
	display: block;
	margin-inline: auto;
}

/* The frame grows to hold the caption; one gap above it, the frame's own 10px below. */
.wp-block-post-content .wp-block-image:not(.is-style-psj-plain) > figcaption {
	display: block;
	margin: 10px 0 0;
	padding: 0;
}

/* ==========================================================================
   Search block
   ========================================================================== */

.wp-block-search .wp-block-search__input {
	min-height: 44px;
	padding: 0.625rem 0.875rem;
	color: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--custom--grey--hairline);
	border-radius: 10px;
	font-size: 0.9375rem;
	line-height: var(--wp--custom--line-height--tight);
}

.wp-block-search .wp-block-search__input::placeholder {
	color: var(--wp--custom--grey--meta);
	opacity: 1;
}

.wp-block-search .wp-block-search__button {
	min-height: 44px;
	margin-inline-start: 0.625rem;
	padding-block: 0.625rem;
	font-size: 0.9375rem;
}

/* Narrow column: stack input above a full-width button. */
.psj-sidebar .wp-block-search .wp-block-search__inside-wrapper {
	flex-direction: column;
	gap: 0.625rem;
}

.psj-sidebar .wp-block-search .wp-block-search__button {
	margin-inline-start: 0;
}

/* ==========================================================================
   Archive, search results, post meta
   ========================================================================== */

.psj-meta {
	gap: 0.75rem;
	align-items: center;
}

.psj-meta > * {
	margin: 0;
}

.psj-meta .wp-block-post-terms::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-inline-end: 0.75rem;
	vertical-align: middle;
	background-color: var(--wp--preset--color--gold);
	border-radius: 50%;
}

.psj-results-head {
	padding-bottom: 1.125rem;
	border-bottom: 3px solid var(--wp--preset--color--gold);
}

.psj-results-head > * {
	margin: 0;
}

.psj-results-head .wp-block-query-total {
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.9375rem;
}

.psj-result {
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--wp--custom--grey--hairline);
}

.psj-result > * {
	margin-block: 0;
}

.psj-result > * + * {
	margin-block-start: 0.5rem;
}

.psj-result .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.psj-result .wp-block-post-excerpt {
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.95;
}

/*
 * Excerpt length is enforced here rather than by excerptLength: WordPress counts
 * excerpt "words" by spaces unless the site language is Japanese, so Japanese
 * posts would otherwise print in full.
 */
.psj-result .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.psj-result .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
}

/* Pagination: current indigo, others cream, hover gold. */
.wp-block-query-pagination {
	gap: 0.5rem;
	padding-top: 1.75rem;
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 1rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--cream);
	border-radius: 12px;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.dots {
	background-color: transparent;
}

.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--indigo);
	font-weight: 600;
}

.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover {
	color: var(--wp--preset--color--indigo);
	background-color: var(--wp--preset--color--gold);
}

/* ==========================================================================
   404
   ========================================================================== */

.psj-404 {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	text-align: center;
}

.psj-404 > * {
	margin-inline: auto;
}

.psj-404 .psj-404-numeral {
	width: fit-content;
	padding: 18px 46px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	border-radius: 22px;
}

.psj-404 .wp-block-search {
	max-width: 28rem;
}

.psj-404 > p:not(.psj-404-numeral) {
	max-width: 32rem;
}

.psj-404-links {
	max-width: 35rem;
	padding-top: 1.5rem;
	column-gap: 1.75rem;
	border-top: 3px solid var(--wp--preset--color--gold);
}

.psj-404-links p {
	margin: 0;
	font-weight: 600;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/*
 * The links carry a 44px minimum height for tap targets, which already reads
 * as space above and below the text. So the footer sits closer to the panel
 * than the page's default block gap and adds no padding of its own on top.
 */
.wp-site-blocks > footer {
	margin-block-start: var(--wp--preset--spacing--10);
}

.psj-footer {
	column-gap: clamp(2rem, 5vw, 3.5rem);
	padding-block: 0 var(--wp--custom--ring--gutter);
}

.psj-footer p {
	margin: 0;
}

.psj-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--gold);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
}

.psj-footer a:hover {
	color: var(--wp--preset--color--paper);
}

/* ==========================================================================
   Block style variations (core/group)
   ========================================================================== */

/* Boxed: gold border; a leading heading becomes the gold band. */
.wp-block-group.is-style-psj-boxed {
	padding: 0 1.125rem 1.125rem;
	border: 3px solid var(--wp--preset--color--gold);
	border-radius: 18px;
	overflow: hidden;
}

.wp-block-group.is-style-psj-boxed > :first-child {
	margin-block-start: 1.125rem;
}

/*
 * The band runs edge to edge by widening the heading and shifting it left.
 * Negative side margins would be simpler, but a Group with constrained layout
 * (the editor's default) forces its children's side margins with !important.
 */
.wp-block-group.is-style-psj-boxed > .wp-block-heading:first-child {
	position: relative;
	inset-inline-start: -1.125rem;
	box-sizing: border-box;
	width: calc(100% + 2.25rem);
	max-width: none;
	margin-block: 0 1rem;
	padding: 0.625rem 1rem;
	color: var(--wp--preset--color--indigo);
	background-color: var(--wp--preset--color--gold);
	border: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	line-height: var(--wp--custom--line-height--tight);
}

/* Underlined: leading heading underlined in gold, plain ruled list beneath. */
.wp-block-group.is-style-psj-underlined > .wp-block-heading:first-child {
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--wp--preset--color--gold);
}

.wp-block-group.is-style-psj-underlined :where(ul, ol) {
	padding-left: 0;
	list-style: none;
}

.wp-block-group.is-style-psj-underlined :where(ul, ol) > li {
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--wp--custom--grey--hairline-soft);
}

.wp-block-group.is-style-psj-underlined :where(ul, ol) > li:last-child {
	border-bottom: 0;
}

/* Marker: gold left bar, no box. */
.wp-block-group.is-style-psj-marker {
	padding: 0.25rem 0 0.25rem 1rem;
	color: var(--wp--preset--color--ink-soft);
	border-left: 5px solid var(--wp--preset--color--gold);
}

/* Attention: tinted fill, indigo bold lead line. */
.wp-block-group.is-style-psj-attention {
	padding: 1.375rem 1.625rem;
	background-color: var(--wp--custom--grey--attention);
	border-radius: 16px;
}

.wp-block-group.is-style-psj-attention > :first-child {
	margin-block-start: 0;
	color: var(--wp--preset--color--indigo);
	font-weight: 700;
}

.wp-block-group.is-style-psj-attention > :last-child {
	margin-block-end: 0;
}