/* Retro Window Posts: the window frame drawn in CSS.
   Colors, sizes and layout come from the variables printed from Settings > Retro Window Posts. */

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

.wp-block-post-template:has(.rwp-window) {
	display: grid !important;
	grid-template-columns: repeat(var(--rwp-cols, 2), minmax(0, 1fr));
	gap: var(--rwp-post-gap, 32px);
	width: 100%;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	list-style: none;
}

/* The posts area (tag row, windows, page buttons) runs the full width of the screen,
   leaving only the chosen space at the sides. The script (front.js) fine-tunes the left
   position so it is exact whatever padding or width the theme puts around the page. */
.wp-block-query:has(.rwp-window) {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-left: var(--rwp-side, 10px) !important;
	padding-right: var(--rwp-side, 10px) !important;
}

.wp-block-post-template:has(.rwp-window) > li {
	margin: 0 !important;
	min-width: 0;
}

@media (max-width: 900px) {
	.wp-block-post-template:has(.rwp-window) {
		grid-template-columns: repeat(var(--rwp-cols-tab, 2), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.wp-block-post-template:has(.rwp-window) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Each post: the window first, then the date, text and tags below it */
.wp-block-group:has(> .rwp-window) {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--rwp-text-gap, 12px);
}

.wp-block-group:has(> .rwp-window) > * {
	width: 100%;
	max-width: none !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

.wp-block-group:has(> .rwp-window) > .rwp-window {
	order: -1;
}

/* ---------- The window ---------- */

.rwp-window {
	box-sizing: border-box;
	flex: none;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	padding: 3px;
	background: var(--rwp-face, #c0c0c0);
	color: #000;
	font-family: Tahoma, "MS Sans Serif", Verdana, Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.2;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	box-shadow:
		inset -1px -1px #0a0a0a,
		inset 1px 1px #dfdfdf,
		inset -2px -2px #808080,
		inset 2px 2px #fff,
		var(--rwp-drop, 5px 5px 0 rgba(0, 0, 0, 0.55));
}

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

/* Generic theme rules (minimum heights etc.) must not stretch any part of the window */
.rwp-window,
.rwp-window *,
.rwp-window *::before,
.rwp-window *::after {
	min-height: 0 !important;
}

.rwp-window {
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 3px !important;
}

/* Title bar */
.rwp-window .rwp-titlebar {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 3px 2px 3px 3px !important;
	margin: 0 !important;
	background: linear-gradient(90deg, var(--rwp-bar, #000080), var(--rwp-bar2, var(--rwp-bar, #000080)));
	color: var(--rwp-title-color, #fff);
	line-height: 1.2;
}

.rwp-window .rwp-icon {
	flex: none;
	display: block;
	width: 16px;
	height: 16px;
}

.rwp-window .rwp-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--rwp-title-size, 14px);
	font-weight: 700;
	color: var(--rwp-title-color, #fff);
}

.rwp-window .rwp-btns {
	flex: none;
	display: flex;
	align-items: center;
}

.rwp-window .rwp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 14px;
	margin-left: 2px;
	background: var(--rwp-face, #c0c0c0);
	box-shadow:
		inset -1px -1px #0a0a0a,
		inset 1px 1px #fff,
		inset -2px -2px #808080,
		inset 2px 2px #dfdfdf;
}

.rwp-window .rwp-btn-close {
	margin-left: 4px;
}

.rwp-window .rwp-btn svg {
	display: block;
	width: 8px;
	height: 8px;
}

.rwp-window .rwp-btn:first-child svg {
	margin-top: 3px;
}

/* Your own logo in the title bar */
.rwp-window .rwp-titlebar img.rwp-logo {
	flex: none;
	display: block;
	width: var(--rwp-logo-size, 16px) !important;
	height: var(--rwp-logo-size, 16px) !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0 !important;
	box-shadow: none;
	object-fit: contain !important;
	aspect-ratio: auto !important;
}

/* Menu bar */
.rwp-window .rwp-menu {
	display: flex;
	flex-wrap: wrap;
	padding: 2px 0 3px !important;
	margin: 0 !important;
	line-height: 1.2;
	cursor: default;
}

.rwp-window .rwp-menu-item {
	padding: 2px 8px 2px 5px;
}

.rwp-window .rwp-menu-item u {
	text-decoration: underline;
}

.rwp-window.rwp-nomenu .rwp-menu {
	display: none;
}

.rwp-window.rwp-nomenu .rwp-titlebar {
	margin-bottom: 3px;
}

/* White area with the scrollbars around it */
.rwp-window .rwp-client {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 16px;
	grid-template-rows: auto 16px;
	padding: 2px !important;
	margin: 0 !important;
	background: var(--rwp-face, #c0c0c0);
	box-shadow:
		inset -1px -1px #fff,
		inset 1px 1px #808080,
		inset -2px -2px #dfdfdf,
		inset 2px 2px #0a0a0a;
}

.rwp-window .rwp-view {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	background: #fff;
}

/* The photo: shown whole, in its own original shape, at the width of the window.
   The picture box gets its height from the photo's shape alone (a percentage of its
   width, printed by the plugin and corrected by front.js when the image loads).
   The image and its link just fill that box, so nothing the theme sets on images
   (height, shape, crop, minimum height) can make the frame taller or shorter. */
.rwp-window .rwp-view {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	overflow: hidden;
	line-height: 0;
}

.rwp-window .rwp-pic {
	position: relative;
	display: block;
	box-sizing: content-box;
	width: 100% !important;
	max-width: none !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	border: 0;
	overflow: hidden;
	line-height: 0;
	aspect-ratio: auto !important;
}

.rwp-window .rwp-pic.rwp-flow {
	height: auto !important;
	padding-bottom: 0;
}

.rwp-window .rwp-pic .rwp-link {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	display: block;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	box-shadow: none;
	text-decoration: none;
}

.rwp-window .rwp-pic.rwp-flow .rwp-link {
	position: static !important;
	height: auto !important;
}

.rwp-window .rwp-pic img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0 !important;
	box-shadow: none;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center !important;
	transform: none;
}

.rwp-window .rwp-pic.rwp-flow img {
	position: static !important;
	height: auto !important;
}

/* Scrollbars (decoration only).
   Their parts are positioned inside the column, so they never add to the window's height
   and generic theme rules (minimum heights, padding on divs and spans) cannot stretch them. */
.rwp-window .rwp-vscroll {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	display: block;
	width: 16px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

.rwp-window .rwp-hscroll {
	grid-column: 1;
	grid-row: 2;
	position: relative;
	display: block;
	width: auto !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

.rwp-window .rwp-sbtn {
	position: absolute;
	display: block;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--rwp-face, #c0c0c0);
	box-shadow:
		inset -1px -1px #0a0a0a,
		inset 1px 1px #fff,
		inset -2px -2px #808080,
		inset 2px 2px #dfdfdf;
}

.rwp-window .rwp-sbtn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border: 4px solid transparent;
}

.rwp-window .rwp-up    { top: 0; left: 0; }
.rwp-window .rwp-down  { bottom: 0; left: 0; }
.rwp-window .rwp-left  { top: 0; left: 0; }
.rwp-window .rwp-right { top: 0; right: 0; }

.rwp-window .rwp-up::after    { margin: -5px 0 0 -4px; border-bottom: 4px solid #000; border-top-width: 0; }
.rwp-window .rwp-down::after  { margin: -1px 0 0 -4px; border-top: 4px solid #000; border-bottom-width: 0; }
.rwp-window .rwp-left::after  { margin: -4px 0 0 -5px; border-right: 4px solid #000; border-left-width: 0; }
.rwp-window .rwp-right::after { margin: -4px 0 0 -1px; border-left: 4px solid #000; border-right-width: 0; }

.rwp-window .rwp-track {
	position: absolute;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	background: repeating-conic-gradient(var(--rwp-face, #c0c0c0) 0 25%, #fff 0 50%) 0 0 / 2px 2px;
}

.rwp-window .rwp-vscroll .rwp-track {
	top: 16px;
	bottom: 16px;
	left: 0;
	right: 0;
}

.rwp-window .rwp-hscroll .rwp-track {
	left: 16px;
	right: 16px;
	top: 0;
	bottom: 0;
}

.rwp-window .rwp-thumb {
	position: absolute;
	display: block;
	background: var(--rwp-face, #c0c0c0);
	box-shadow:
		inset -1px -1px #0a0a0a,
		inset 1px 1px #fff,
		inset -2px -2px #808080,
		inset 2px 2px #dfdfdf;
}

.rwp-window .rwp-vscroll .rwp-thumb {
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
}

.rwp-window .rwp-hscroll .rwp-thumb {
	top: 0;
	bottom: 0;
	left: 0;
	width: 28%;
}

/* Resize corner */
.rwp-window .rwp-grip {
	grid-column: 2;
	grid-row: 2;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background-color: var(--rwp-face, #c0c0c0);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M15 5L5 15M15 9L9 15M15 13L13 15' stroke='%23808080' stroke-width='1.4' fill='none'/%3E%3Cpath d='M15 6L6 15M15 10L10 15M15 14L14 15' stroke='%23fff' stroke-width='1' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

/* Without scrollbars */
.rwp-window.rwp-noscroll .rwp-client {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
}

.rwp-window.rwp-noscroll .rwp-vscroll,
.rwp-window.rwp-noscroll .rwp-hscroll,
.rwp-window.rwp-noscroll .rwp-grip {
	display: none;
}

/* ---------- Paint design ---------- */

.rwp-window[hidden] {
	display: none !important;
}

/* Toolbox on the left, image area on the right */
.rwp-window.rwp-paint .rwp-body {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	margin: 0 !important;
	padding: 0 !important;
}

.rwp-window.rwp-paint .rwp-tools {
	grid-column: 1;
	position: relative;
	display: block;
	width: 54px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	container-type: size;
}

/* The buttons get smaller when the window is short, so the toolbox never makes it taller */
.rwp-window.rwp-paint .rwp-tools-in {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: repeat(2, 25px);
	grid-template-rows: repeat(8, 22px) 40px;
	justify-content: center;
	align-content: start;
	gap: 0;
	padding: 3px 0 0 !important;
	margin: 0 !important;
	overflow: hidden;
}

@supports (height: 1cqh) {
	.rwp-window.rwp-paint .rwp-tools-in {
		grid-template-rows: repeat(8, min(25px, calc((100cqh - 6px) / 10.6))) min(62px, calc((100cqh - 6px) * 2.6 / 10.6));
	}
}

.rwp-window.rwp-paint .rwp-tool {
	display: block;
	position: relative;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--rwp-face, #c0c0c0);
	box-shadow:
		inset -1px -1px #0a0a0a,
		inset 1px 1px #fff,
		inset -2px -2px #808080,
		inset 2px 2px #dfdfdf;
}

.rwp-window.rwp-paint .rwp-tool svg {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: calc(100% - 8px);
	height: calc(100% - 6px);
	max-width: 16px;
	max-height: 16px;
	transform: translate(-50%, -50%);
}

.rwp-window.rwp-paint .rwp-tool img.rwp-tool-img {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	display: block;
	width: calc(100% - 6px) !important;
	height: calc(100% - 6px) !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0 !important;
	box-shadow: none;
	object-fit: contain !important;
	aspect-ratio: auto !important;
	transform: translate(-50%, -50%);
}

.rwp-window.rwp-paint .rwp-tool.rwp-on {
	background: repeating-conic-gradient(#fff 0 25%, var(--rwp-face, #c0c0c0) 0 50%) 0 0 / 2px 2px;
	box-shadow:
		inset -1px -1px #fff,
		inset 1px 1px #0a0a0a,
		inset -2px -2px #dfdfdf,
		inset 2px 2px #808080;
}

.rwp-window.rwp-paint .rwp-tool-opts {
	grid-column: 1 / -1;
	display: block;
	margin: 3px 0 0 !important;
	padding: 0 !important;
	background: var(--rwp-face, #c0c0c0);
	box-shadow:
		inset -1px -1px #fff,
		inset 1px 1px #808080,
		inset -2px -2px #dfdfdf,
		inset 2px 2px #0a0a0a;
}

.rwp-window.rwp-paint .rwp-body > .rwp-client {
	grid-column: 2;
	min-width: 0;
}

/* Colors at the bottom */
.rwp-window.rwp-paint .rwp-palette {
	display: flex;
	align-items: flex-start;
	height: 40px !important;
	margin: 0 !important;
	padding: 4px 2px 0 !important;
	overflow: hidden;
}

.rwp-window.rwp-paint .rwp-swatch {
	position: relative;
	flex: none;
	display: block;
	width: 31px;
	height: 31px;
	margin: 0 6px 0 0 !important;
	padding: 0 !important;
	background: var(--rwp-face, #c0c0c0);
	box-shadow:
		inset -1px -1px #fff,
		inset 1px 1px #808080,
		inset -2px -2px #dfdfdf,
		inset 2px 2px #0a0a0a;
}

.rwp-window.rwp-paint .rwp-swatch .rwp-bg,
.rwp-window.rwp-paint .rwp-swatch .rwp-fg {
	position: absolute;
	display: block;
	width: 13px;
	height: 13px;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow:
		inset -1px -1px #fff,
		inset 1px 1px #808080;
}

.rwp-window.rwp-paint .rwp-swatch .rwp-bg { right: 6px; bottom: 6px; background: #fff; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
.rwp-window.rwp-paint .rwp-swatch .rwp-fg { left: 6px; top: 6px; background: #000; box-shadow: 0 0 0 1px #c0c0c0, 1px 1px 0 1px #808080; }

.rwp-window.rwp-paint .rwp-colors {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(14, minmax(0, 1fr));
	grid-template-rows: repeat(2, 15px);
	max-width: 252px;
	height: 30px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rwp-window.rwp-paint .rwp-color-box {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	box-shadow:
		inset 1px 1px #808080,
		inset -1px -1px #fff,
		inset 2px 2px #0a0a0a,
		inset -2px -2px #dfdfdf;
}

.rwp-window.rwp-paint.rwp-nomenu .rwp-body {
	margin-top: 0 !important;
}

/* Phones: a narrower toolbox and smaller color boxes */
@media (max-width: 420px) {
	.rwp-window.rwp-paint .rwp-body { grid-template-columns: 38px minmax(0, 1fr); }
	.rwp-window.rwp-paint .rwp-tools { width: 38px !important; }
	.rwp-window.rwp-paint .rwp-tools-in { grid-template-columns: repeat(2, 17px); }
	.rwp-window.rwp-paint .rwp-tool svg { width: calc(100% - 4px); height: calc(100% - 4px); }
	.rwp-window.rwp-paint .rwp-tool img.rwp-tool-img { width: calc(100% - 4px) !important; height: calc(100% - 4px) !important; }
}

/* ---------- Tag filter row (above the posts) ---------- */

.rwp-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 var(--rwp-filter-gap, 20px);
	padding: 0;
}

.rwp-filter[hidden] {
	display: none;
}

.rwp-filter .rwp-tag {
	display: inline-block;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 6px 2px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--rwp-filter-color, #008bdc);
	font-family: inherit;
	font-size: var(--rwp-filter-size, 20px);
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-underline-offset: 3px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.rwp-filter .rwp-tag:hover,
.rwp-filter .rwp-tag:focus,
.rwp-filter .rwp-tag:active {
	background: none;
	color: var(--rwp-filter-color, #008bdc);
	box-shadow: none;
	text-decoration: underline;
}

.rwp-filter .rwp-tag.rwp-active {
	text-decoration: underline;
}

.rwp-filter a.rwp-tag,
.rwp-filter a.rwp-tag:visited {
	color: var(--rwp-filter-color, #008bdc);
}

.rwp-filter .rwp-tag:focus-visible {
	outline: 2px solid var(--rwp-filter-color, #008bdc);
	outline-offset: 2px;
}

/* Posts hidden by the filter */
.wp-block-post-template > li[hidden] {
	display: none !important;
}

/* Click effects (look only) */
.rwp-window .rwp-tool,
.rwp-window .rwp-sbtn,
.rwp-window .rwp-thumb {
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.rwp-window .rwp-thumb,
.rwp-window .rwp-track {
	touch-action: none;
}

.rwp-window .rwp-sbtn.rwp-pressed {
	box-shadow:
		inset -1px -1px #fff,
		inset 1px 1px #0a0a0a,
		inset -2px -2px #dfdfdf,
		inset 2px 2px #808080;
}

.rwp-window .rwp-sbtn.rwp-pressed::after {
	transform: translate(1px, 1px);
}

.rwp-window.rwp-paint .rwp-tool.rwp-pressed {
	box-shadow:
		inset -1px -1px #fff,
		inset 1px 1px #0a0a0a,
		inset -2px -2px #dfdfdf,
		inset 2px 2px #808080;
}

.rwp-window.rwp-paint .rwp-tool.rwp-pressed svg,
.rwp-window.rwp-paint .rwp-tool.rwp-pressed img.rwp-tool-img {
	margin-top: 1px !important;
	margin-left: 1px !important;
}