/**
 * Pinbin 2.0 — main stylesheet
 *
 * Plain modern CSS, no build step, so the theme stays hackable by the people
 * who install it. Design tokens are custom properties; the block editor gets
 * the same values via theme.json.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Colour — light */
	--pinbin-canvas: #f4f2ef;
	--pinbin-surface: #fff;
	--pinbin-surface-alt: #faf9f7;
	--pinbin-ink: #141414;
	--pinbin-graphite: #4a4a4a;
	--pinbin-muted: #6a6a6a;
	--pinbin-rule: #e2ded9;
	--pinbin-accent: #b4552d;
	--pinbin-ribbon-bg: rgba(20, 20, 20, 0.68);
	--pinbin-ribbon-text: #fff;

	/* Elevation */
	--pinbin-shadow-card: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 24px -12px rgba(20, 20, 20, 0.14);
	--pinbin-shadow-lift: 0 2px 4px rgba(20, 20, 20, 0.05), 0 18px 40px -16px rgba(20, 20, 20, 0.22);
	--pinbin-shadow-header: 0 1px 0 var(--pinbin-rule);

	/* Type */
	--pinbin-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pinbin-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--pinbin-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--pinbin-text-xs: 0.8125rem;
	--pinbin-text-sm: 0.9375rem;
	--pinbin-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
	--pinbin-text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem);
	--pinbin-text-xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.75rem);
	--pinbin-text-2xl: clamp(2.25rem, 1.8rem + 2vw, 3.75rem);

	/* Space */
	--pinbin-gutter: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
	--pinbin-section: clamp(2.5rem, 1.6rem + 3.5vw, 5rem);

	/* Shape */
	--pinbin-radius: 14px;
	--pinbin-radius-sm: 8px;

	/* Grid — the Customizer overrides the column ceiling */
	--pinbin-grid-max-columns: 4;
	--pinbin-grid-min-column: 17rem;

	/* Motion */
	--pinbin-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--pinbin-duration: 260ms;

	/* 1 in LTR, -1 in RTL: mirrors arrow glyphs and their hover motion. */
	--pinbin-dir: 1;

	color-scheme: light dark;

}

[dir="rtl"] {
	--pinbin-dir: -1;
}

/*
 * Dark palette.
 *
 * The Customizer's colour scheme is a body class (pinbin-scheme-light /
 * pinbin-scheme-dark), so the scheme tokens are set on body, where that class
 * can reach them. They used to sit on :root, which no body class can match:
 * "Light" did nothing for a visitor whose system was dark, and "Dark" left the
 * palette presets below resolved against the light tokens.
 */
@media (prefers-color-scheme: dark) {
	body:not(.pinbin-scheme-light) {
		--pinbin-canvas: #121212;
		--pinbin-surface: #1c1c1c;
		--pinbin-surface-alt: #232323;
		--pinbin-ink: #f2f0ee;
		--pinbin-graphite: #c3bfba;
		--pinbin-muted: #948e8a;
		--pinbin-rule: #322f2c;
		--pinbin-accent: #e08b5f;
		--pinbin-ribbon-bg: rgba(0, 0, 0, 0.66);
		--pinbin-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
		--pinbin-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
		--pinbin-shadow-header: 0 1px 0 var(--pinbin-rule);
	}
}

/* Explicit dark, chosen in the Customizer. Keep in step with the block above. */
body.pinbin-scheme-dark {
	--pinbin-canvas: #121212;
	--pinbin-surface: #1c1c1c;
	--pinbin-surface-alt: #232323;
	--pinbin-ink: #f2f0ee;
	--pinbin-graphite: #c3bfba;
	--pinbin-muted: #948e8a;
	--pinbin-rule: #322f2c;
	--pinbin-accent: #e08b5f;
	--pinbin-ribbon-bg: rgba(0, 0, 0, 0.66);
	--pinbin-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
	--pinbin-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
	--pinbin-shadow-header: 0 1px 0 var(--pinbin-rule);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Keep anchor targets (#comments, #respond, skip link) clear of the sticky
	   header, and of the admin bar when it is showing. */
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 5rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	/*
	 * Bind theme.json's colour presets to the tokens. Without this a block
	 * that opts into a palette colour keeps its light value in dark mode.
	 * Declared on body so var() resolves against the scheme body actually has.
	 * The editor never loads this file, so its swatches keep the literal hex
	 * from theme.json.
	 */
	--wp--preset--color--ink: var(--pinbin-ink);
	--wp--preset--color--graphite: var(--pinbin-graphite);
	--wp--preset--color--muted: var(--pinbin-muted);
	--wp--preset--color--rule: var(--pinbin-rule);
	--wp--preset--color--surface: var(--pinbin-surface);
	--wp--preset--color--canvas: var(--pinbin-canvas);
	--wp--preset--color--accent: var(--pinbin-accent);

	margin: 0;
	background-color: var(--pinbin-canvas);
	color: var(--pinbin-graphite);
	font-family: var(--pinbin-font-sans);
	font-size: var(--pinbin-text-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--pinbin-ink);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

h1 { font-size: var(--pinbin-text-2xl); }
h2 { font-size: var(--pinbin-text-xl); }
h3 { font-size: var(--pinbin-text-lg); }
h4 { font-size: var(--pinbin-text-base); }
h5, h6 { font-size: var(--pinbin-text-sm); }

p { margin: 0 0 1.25em; }

a {
	color: var(--pinbin-ink);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--pinbin-duration) var(--pinbin-ease);
}

a:hover,
a:focus {
	color: var(--pinbin-accent);
}

/* Focus rings — 1.x removed these entirely, which is why keyboard users were lost. */
:focus-visible {
	outline: 2px solid var(--pinbin-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

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

img {
	display: block;
}

figure {
	margin: 0 0 1.5em;
}

blockquote {
	margin: 1.5em 0;
	padding-inline-start: 1.5rem;
	border-inline-start: 2px solid var(--pinbin-accent);
	color: var(--pinbin-ink);
	font-family: var(--pinbin-font-serif);
	font-size: 1.15em;
	line-height: 1.5;
}

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

pre {
	padding: 1.25rem;
	border-radius: var(--pinbin-radius-sm);
	background: var(--pinbin-surface-alt);
	overflow-x: auto;
}

/* Scripted in navigation.js when the block actually overflows. */
pre[tabindex="0"]:focus-visible {
	outline: 2px solid var(--pinbin-accent);
	outline-offset: 2px;
}

code {
	padding: 0.15em 0.4em;
	border-radius: 4px;
	background: var(--pinbin-surface-alt);
}

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

hr {
	height: 1px;
	margin: var(--pinbin-section) 0;
	border: 0;
	background: var(--pinbin-rule);
}

table {
	width: 100%;
	margin: 0 0 1.5em;
	border-collapse: collapse;
	font-size: var(--pinbin-text-sm);
}

th, td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--pinbin-rule);
	text-align: start;
}

th {
	color: var(--pinbin-ink);
	font-weight: 600;
}

/* ==========================================================================
   3. Utilities
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed !important;
	top: 0.75rem;
	inset-inline-start: 0.75rem;
	z-index: 999;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	border-radius: var(--pinbin-radius-sm);
	background: var(--pinbin-surface);
	box-shadow: var(--pinbin-shadow-lift);
	color: var(--pinbin-ink);
	font-size: var(--pinbin-text-sm);
	text-decoration: none;
}

.pinbin-button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--pinbin-ink);
	color: var(--pinbin-canvas);
	font-family: inherit;
	font-size: var(--pinbin-text-sm);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--pinbin-duration) var(--pinbin-ease),
	            transform var(--pinbin-duration) var(--pinbin-ease);
}

.pinbin-button:hover,
button:hover,
input[type="submit"]:hover {
	background: var(--pinbin-accent);
	color: #fff;
	transform: translateY(-1px);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--pinbin-rule);
	border-radius: var(--pinbin-radius-sm);
	background: var(--pinbin-surface);
	color: var(--pinbin-ink);
	font-family: inherit;
	font-size: var(--pinbin-text-sm);
	transition: border-color var(--pinbin-duration) var(--pinbin-ease);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--pinbin-accent);
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

/* ==========================================================================
   4. Layout shell
   ========================================================================== */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.site-content {
	flex: 1 0 auto;
	width: 100%;
	max-width: 96rem;
	margin: 0 auto;
	padding: 0 var(--pinbin-gutter);
}

.site-main {
	padding: var(--pinbin-section) 0;
}

.site-main--single {
	max-width: 52rem;
	margin: 0 auto;
}

/* Full Width page template: no reading-width cap, and the body text still
   keeps a comfortable measure while wide and full blocks use the viewport.
   The measure and the wide size are the layout sizes the block editor uses
   for this template (pinbin_editor_layout_sizes() in inc/blocks.php). */
.site-main--full {
	max-width: none;
}

.pinbin-single--full {
	--wp--style--global--content-size: 44rem;
	--wp--style--global--wide-size: 72rem;
}

.pinbin-single--full .pinbin-single__body > .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-gallery):not(.wp-block-columns) {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.pinbin-single--full .entry-header {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* Wide blocks stop at the wide size instead of matching full ones. */
.pinbin-single--full .pinbin-single__body > .entry-content > .alignwide {
	width: auto;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Floats line up with the edges of the text measure, not the far edges of
   the page, so the text that wraps them sits beside them. */
.pinbin-single--full .pinbin-single__body > .entry-content > .alignleft {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

.pinbin-single--full .pinbin-single__body > .entry-content > .alignright {
	margin-right: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

.pinbin-panel {
	margin-bottom: var(--pinbin-gutter);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: var(--pinbin-radius);
	background: var(--pinbin-surface);
	box-shadow: var(--pinbin-shadow-card);
}

/* ==========================================================================
   5. Header and navigation
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--pinbin-surface) 88%, transparent);
	box-shadow: var(--pinbin-shadow-header);
}

/* Stick below the admin bar rather than sliding underneath it. Below 600px
   the admin bar scrolls away with the page, so the header goes back to 0. */
.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

@supports (backdrop-filter: blur(1px)) {
	.site-header {
		backdrop-filter: saturate(1.5) blur(14px);
	}
}

/* Older browsers get an opaque bar rather than an unreadable transparent one. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.site-header {
		background: var(--pinbin-surface);
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pinbin-gutter);
	max-width: 96rem;
	margin: 0 auto;
	padding: 0.75rem var(--pinbin-gutter);
}

.site-branding {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	/* Allow the branding to shrink so the title truncates instead of wrapping
	   into a narrow column when the menu is competing for room. */
	min-width: 0;
	flex: 0 1 auto;
}

.custom-logo-link {
	display: block;
	line-height: 0;
	transition: opacity var(--pinbin-duration) var(--pinbin-ease);
}

.custom-logo-link:hover {
	opacity: 0.75;
}

.custom-logo {
	max-height: 44px;
	width: auto;
}

.site-title {
	margin: 0;
	min-width: 0;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-title a {
	color: var(--pinbin-ink);
	text-decoration: none;
}

.site-description {
	margin: 0;
	min-width: 0;
	color: var(--pinbin-muted);
	font-size: var(--pinbin-text-xs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The tagline is decorative next to the menu. Drop it well before the menu
   starts competing, so the site name keeps its space rather than truncating. */
@media (max-width: 74.99em) {
	.site-description {
		display: none;
	}
}

.main-navigation {
	min-width: 0;
}

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	color: var(--pinbin-muted);
	font-size: var(--pinbin-text-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--pinbin-duration) var(--pinbin-ease),
	            background var(--pinbin-duration) var(--pinbin-ease);
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	background: var(--pinbin-surface-alt);
	color: var(--pinbin-ink);
}

/* Submenus
   ---------
   Closed submenus use `display: none` rather than `visibility: hidden`: a
   hidden-but-rendered submenu still extends the document's scroll width, which
   put a horizontal scrollbar on every page (most visibly in RTL, where the
   panel hangs off the leading edge). */
.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 10;
	display: none;
	flex-direction: column;
	min-width: 12rem;
	margin: 0;
	padding: 0.4rem;
	border-radius: var(--pinbin-radius-sm);
	background: var(--pinbin-surface);
	box-shadow: var(--pinbin-shadow-lift);
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu,
.main-navigation li.is-expanded > .sub-menu {
	display: block;
}

/* Keep submenus on the trailing items inside the viewport. */
.main-navigation > ul > li:last-child > .sub-menu,
.main-navigation > ul > li:nth-last-child(2) > .sub-menu {
	inset-inline: auto 0;
}

.main-navigation .sub-menu .sub-menu {
	top: 0;
	inset-inline-start: 100%;
}

/* Set by navigation.js when a submenu would run past the window edge. */
.main-navigation > ul > li.submenu-flip > .sub-menu {
	inset-inline: auto 0;
}

.main-navigation .sub-menu li.submenu-flip > .sub-menu {
	inset-inline: auto 100%;
}

.main-navigation .sub-menu a {
	white-space: normal;
}

/* A small chevron marks items that open a submenu in the desktop bar. */
@media (min-width: 62em) {
	.main-navigation .menu-item-has-children > a {
		display: flex;
		align-items: center;
		gap: 0.4em;
	}

	.main-navigation .menu-item-has-children > a::after {
		content: "";
		flex: none;
		width: 0.4em;
		height: 0.4em;
		/* Physical sides on purpose: rotated, this corner points down in
		   either text direction. */
		border-right: 1.5px solid currentcolor;
		border-bottom: 1.5px solid currentcolor;
		transform: translateY(-0.15em) rotate(45deg);
		opacity: 0.7;
	}

	/* Nested levels open sideways, so their chevron points that way. */
	.main-navigation .sub-menu .menu-item-has-children > a {
		justify-content: space-between;
	}

	.main-navigation .sub-menu .menu-item-has-children > a::after {
		transform: rotate(-45deg);
	}

	[dir="rtl"] .main-navigation .sub-menu .menu-item-has-children > a::after,
	.main-navigation .sub-menu .submenu-flip > a::after {
		transform: rotate(135deg);
	}

	[dir="rtl"] .main-navigation .sub-menu .submenu-flip > a::after {
		transform: rotate(-45deg);
	}
}

/* Toggle — hidden on desktop */
.nav-toggle {
	display: none;
	padding: 0.55rem;
	border-radius: var(--pinbin-radius-sm);
	background: transparent;
	color: var(--pinbin-ink);
}

.nav-toggle:hover,
.nav-toggle:focus {
	background: var(--pinbin-surface-alt);
	/* Re-assert the colour: the generic `button:hover` rule sets #fff, which
	   would otherwise paint a white icon on a light bar. */
	color: var(--pinbin-ink);
	transform: none;
}

.nav-toggle__bars {
	display: block;
	width: 22px;
}

.nav-toggle__bars span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--pinbin-duration) var(--pinbin-ease),
	            opacity var(--pinbin-duration) var(--pinbin-ease);
}

.nav-toggle__bars span + span {
	margin-top: 5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile navigation panel — replaces 1.x's <select> dropdown */
@media (max-width: 61.99em) {
	.nav-toggle {
		display: block;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		inset-inline: 0;
		max-height: calc(100dvh - 100%);
		padding: 0 var(--pinbin-gutter);
		background: var(--pinbin-surface);
		box-shadow: var(--pinbin-shadow-lift);
		overflow-y: auto;
		display: none;
	}

	.main-navigation.is-open {
		display: block;
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem 0 1rem;
	}

	.main-navigation a {
		padding: 0.75rem 0.5rem;
		border-radius: var(--pinbin-radius-sm);
		font-size: 1rem;
	}

	/* Submenus become static, indented lists on touch */
	.main-navigation .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0;
		padding-inline-start: 1rem;
		box-shadow: none;
		background: none;
	}
}

/* ==========================================================================
   6. The grid — Pinbin's whole reason to exist
   ==========================================================================
   1.x needed jQuery + Masonry + imagesLoaded (three script dependencies) to
   place these cards. This does it in CSS.

   Base: multi-column, which every browser has supported for a decade and which
   gives a true ragged-bottom masonry with zero JS. Columns fill top-to-bottom,
   so reading order runs down each column.

   Enhancement: browsers that ship native grid masonry get row-major order,
   which matches how the original Masonry library placed items.
   -------------------------------------------------------------------------- */

.pinbin-grid {
	columns: var(--pinbin-grid-max-columns) var(--pinbin-grid-min-column);
	column-gap: var(--pinbin-gutter);
}

.pinbin-grid > .pinbin-card {
	break-inside: avoid;
	/* Older Safari needs the prefixed form to reliably keep a card whole. */
	-webkit-column-break-inside: avoid;
	margin: 0 0 var(--pinbin-gutter);
}

@supports (grid-template-rows: masonry) {
	.pinbin-grid {
		display: grid;
		grid-template-columns: repeat(
			auto-fill,
			minmax(min(var(--pinbin-grid-min-column), 100%), 1fr)
		);
		/* stylelint-disable-next-line declaration-property-value-no-unknown -- CSS Grid Level 3 masonry; the @supports guard above gates it. */
		grid-template-rows: masonry;
		gap: var(--pinbin-gutter);
		columns: auto;
		max-width: calc(
			var(--pinbin-grid-max-columns) * 22rem +
			(var(--pinbin-grid-max-columns) - 1) * var(--pinbin-gutter)
		);
		margin-inline: auto;
	}

	.pinbin-grid > .pinbin-card {
		margin-bottom: 0;
	}
}

/* --- The card ------------------------------------------------------------ */

.pinbin-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--pinbin-radius);
	background: var(--pinbin-surface);
	box-shadow: var(--pinbin-shadow-card);
	overflow: hidden;
	transition: transform var(--pinbin-duration) var(--pinbin-ease),
	            box-shadow var(--pinbin-duration) var(--pinbin-ease);
}

.pinbin-card:hover,
.pinbin-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--pinbin-shadow-lift);
}

.pinbin-card__media {
	position: relative;
	overflow: hidden;
	background: var(--pinbin-surface-alt);
}

.pinbin-card__media img {
	width: 100%;
	transition: transform 600ms var(--pinbin-ease);
}

.pinbin-card:hover .pinbin-card__media img {
	transform: scale(1.04);
}

/* The category ribbon — the 2013 flat black bar, rebuilt as a blurred pill.
   ------------------------------------------------------------------------
   Default is in-flow: on a post with no featured image the ribbon renders in
   the entry header, where absolute positioning would have no positioned
   ancestor and would anchor to the viewport. */
.pinbin-ribbon {
	margin-bottom: 0.75rem;
}

/* Overlaid only when it actually sits on an image. */
.pinbin-card__media .pinbin-ribbon,
.pinbin-single__media .pinbin-ribbon {
	position: absolute;
	inset-inline: 0.75rem;
	bottom: 0.75rem;
	margin-bottom: 0;
	/* Above the card title's stretched link, so category links stay clickable. */
	z-index: 2;
	pointer-events: none;
}

.pinbin-ribbon__inner {
	display: inline-block;
	max-width: 100%;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--pinbin-surface-alt);
	color: var(--pinbin-muted);
	font-size: var(--pinbin-text-xs);
	line-height: 1.4;
	pointer-events: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Over an image it becomes the translucent overlay. */
.pinbin-card__media .pinbin-ribbon__inner,
.pinbin-single__media .pinbin-ribbon__inner {
	background: var(--pinbin-ribbon-bg);
	color: var(--pinbin-ribbon-text);
}

@supports (backdrop-filter: blur(1px)) {
	.pinbin-card__media .pinbin-ribbon__inner,
	.pinbin-single__media .pinbin-ribbon__inner {
		backdrop-filter: blur(8px) saturate(1.4);
	}
}

.pinbin-ribbon a {
	color: inherit;
	text-decoration: none;
}

.pinbin-ribbon a:hover {
	text-decoration: underline;
}

.pinbin-card__media .pinbin-ribbon a:hover,
.pinbin-single__media .pinbin-ribbon a:hover {
	color: #fff;
}

.pinbin-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.15rem 1.25rem 3rem;
}

.pinbin-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.pinbin-card__title a {
	text-decoration: none;
}

/* The whole card is clickable, but the link text stays the accessible target. */
.pinbin-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pinbin-card__date {
	display: block;
	margin-bottom: 0.6rem;
	color: var(--pinbin-muted);
	font-size: var(--pinbin-text-xs);
}

.pinbin-card__excerpt {
	color: var(--pinbin-graphite);
	font-size: var(--pinbin-text-sm);
}

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

.pinbin-no-excerpts .pinbin-card__excerpt {
	display: none;
}

/* The arrow chip, kept from 1.x but no longer absolutely positioned by hand */
.pinbin-card__arrow {
	position: absolute;
	inset-inline-end: 1.25rem;
	bottom: 1.15rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--pinbin-surface-alt);
	color: var(--pinbin-ink);
	font-size: 0.95rem;
	transform: scaleX(var(--pinbin-dir));
	transition: background var(--pinbin-duration) var(--pinbin-ease),
	            color var(--pinbin-duration) var(--pinbin-ease),
	            transform var(--pinbin-duration) var(--pinbin-ease);
}

.pinbin-card:hover .pinbin-card__arrow,
.pinbin-card:focus-within .pinbin-card__arrow {
	background: var(--pinbin-ink);
	color: var(--pinbin-canvas);
	/* scaleX runs last, so the nudge travels in the reading direction. */
	transform: scaleX(var(--pinbin-dir)) translateX(3px);
}

/* Sticky posts get an accent hairline rather than 1.x's grey wash.
   Drawn as an overlay: an inset box-shadow paints beneath the card's content
   and a negative-offset outline is clipped by the card's overflow, so both cut
   the ring off wherever the featured image reaches the edge. */
.pinbin-card.sticky::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border: 2px solid var(--pinbin-accent);
	border-radius: inherit;
	pointer-events: none;
}

/* ==========================================================================
   7. Single post and page
   ========================================================================== */

.pinbin-single {
	border-radius: var(--pinbin-radius);
	background: var(--pinbin-surface);
	box-shadow: var(--pinbin-shadow-card);
	overflow: hidden;
}

.pinbin-single__media {
	position: relative;
	margin: 0;
	background: var(--pinbin-surface-alt);
}

.pinbin-single__media img {
	width: 100%;
}

.pinbin-single__media .pinbin-ribbon {
	inset-inline: 1.25rem;
	bottom: 1.25rem;
}

.pinbin-single__body {
	/* How far wide and full blocks may reach past the text into this padding. */
	--pinbin-bleed: clamp(1.5rem, 1rem + 2.5vw, 3rem);

	padding: var(--pinbin-bleed);
}

.entry-header .entry-title {
	margin-bottom: 0.4rem;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--pinbin-rule);
	color: var(--pinbin-muted);
	font-size: var(--pinbin-text-xs);
}

.entry-meta a {
	color: inherit;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-footer {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--pinbin-rule);
	font-size: var(--pinbin-text-xs);
}

/* An attachment with no description: the meta line's rule already divides. */
.entry-header + .entry-footer {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.tag-list a {
	display: inline-block;
	margin: 0 0.3rem 0.3rem 0;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--pinbin-surface-alt);
	color: var(--pinbin-muted);
	text-decoration: none;
}

.tag-list a:hover {
	background: var(--pinbin-ink);
	color: var(--pinbin-canvas);
}

.attachment-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	color: var(--pinbin-muted);
}

.pinbin-single__media figcaption {
	padding: 0.75rem 1.25rem 0;
}

.page-header .page-title {
	margin-bottom: 0.25rem;
	font-size: var(--pinbin-text-xl);
}

.page-header .archive-description {
	color: var(--pinbin-muted);
}

.search-term {
	color: var(--pinbin-accent);
}

/* Alignment classes for classic and block content */
.alignleft {
	float: left;
	margin: 0.35em 1.5em 1em 0;
}

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

.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* Inside a post or page card, full blocks run edge to edge of the card and
   wide blocks reach halfway into its padding, so the two are distinguishable
   and text in a wide block (columns, a table) keeps an inset from the edge.
   Elsewhere (widgets, comments) there is no bleed and both are 100% wide. */
.alignwide {
	width: calc(100% + var(--pinbin-bleed, 0px));
	max-width: none;
	margin-inline-start: calc(var(--pinbin-bleed, 0px) / -2);
}

.alignfull {
	width: calc(100% + 2 * var(--pinbin-bleed, 0px));
	max-width: none;
	margin-inline-start: calc(-1 * var(--pinbin-bleed, 0px));
	border-radius: 0;
}

/* On a phone a floated image leaves the wrapping text a one-word column. */
@media (max-width: 29.99em) {
	.alignleft,
	.alignright {
		float: none;
		margin-inline: 0;
	}
}

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

.wp-caption-text,
.wp-element-caption {
	margin-top: 0.5rem;
	color: var(--pinbin-muted);
	font-size: var(--pinbin-text-xs);
	text-align: center;
}

/* ==========================================================================
   8. Navigation between posts and pages
   ========================================================================== */

.post-navigation,
.posts-navigation,
.comment-navigation {
	margin-top: var(--pinbin-gutter);
}

.post-navigation .nav-links,
.posts-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pinbin-gutter);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	flex: 1 1 14rem;
}

.post-navigation .nav-next {
	text-align: end;
}

.post-navigation a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1rem 1.25rem;
	border-radius: var(--pinbin-radius);
	background: var(--pinbin-surface);
	box-shadow: var(--pinbin-shadow-card);
	color: var(--pinbin-ink);
	font-size: var(--pinbin-text-sm);
	text-decoration: none;
	transition: transform var(--pinbin-duration) var(--pinbin-ease),
	            box-shadow var(--pinbin-duration) var(--pinbin-ease);
}

.post-navigation .nav-next a {
	justify-content: flex-end;
}

.post-navigation a:hover {
	transform: translateY(-2px);
	box-shadow: var(--pinbin-shadow-lift);
}

.nav-arrow {
	display: inline-block;
	color: var(--pinbin-muted);
	font-size: 1.1rem;
	transform: scaleX(var(--pinbin-dir));
}

/* Archive pagination */
.pagination {
	margin-top: var(--pinbin-section);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 999px;
	background: var(--pinbin-surface);
	box-shadow: var(--pinbin-shadow-card);
	color: var(--pinbin-ink);
	font-size: var(--pinbin-text-sm);
	text-decoration: none;
	transition: background var(--pinbin-duration) var(--pinbin-ease),
	            color var(--pinbin-duration) var(--pinbin-ease);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--pinbin-ink);
	color: var(--pinbin-canvas);
}

.pagination .page-numbers.dots {
	background: none;
	box-shadow: none;
}

.pagination .prev,
.pagination .next {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* ==========================================================================
   9. Comments
   ========================================================================== */

.comments-area {
	margin-top: var(--pinbin-gutter);
}

.comments-title {
	margin-bottom: 1.5rem;
	font-size: var(--pinbin-text-lg);
}

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

/* 1.x hid .reply and .avatar outright, so threads were invisible. */
.comment-list .children {
	margin-top: 1.25rem;
	padding-inline-start: clamp(1rem, 0.5rem + 2vw, 2.5rem);
	border-inline-start: 2px solid var(--pinbin-rule);
}

.comment-body {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--pinbin-rule);
}

.comment-list > .comment-body:last-child {
	border-bottom: 0;
}

.comment-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.comment-avatar img {
	border-radius: 999px;
}

.comment-author {
	display: block;
	color: var(--pinbin-ink);
	font-weight: 600;
	font-size: var(--pinbin-text-sm);
}

.comment-author a {
	text-decoration: none;
}

.comment-permalink {
	color: var(--pinbin-muted);
	font-size: var(--pinbin-text-xs);
	text-decoration: none;
}

.comment-content {
	font-size: var(--pinbin-text-sm);
}

.comment-content > *:last-child {
	margin-bottom: 0;
}

.comment-actions {
	display: flex;
	gap: 1rem;
	margin-top: 0.75rem;
	font-size: var(--pinbin-text-xs);
}

.comment-actions a {
	color: var(--pinbin-muted);
	text-decoration: none;
}

.comment-actions a:hover {
	color: var(--pinbin-accent);
}

.comment-awaiting-moderation {
	color: var(--pinbin-accent);
	font-size: var(--pinbin-text-xs);
}

/* A comment left by the post's own author. */
.bypostauthor > .comment-article .comment-author::after {
	content: "";
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	margin-inline-start: 0.45rem;
	border-radius: 999px;
	background: var(--pinbin-accent);
	vertical-align: 0.15em;
}

.comment-respond {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--pinbin-rule);
}

/* With no comments above it, the form opens the panel: no divider. */
.comments-area > .comment-respond:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.comment-reply-title {
	font-size: var(--pinbin-text-lg);
}

.comment-reply-title small {
	margin-inline-start: 0.75rem;
	font-size: var(--pinbin-text-xs);
	font-weight: 400;
}

.comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--pinbin-ink);
	font-size: var(--pinbin-text-xs);
	font-weight: 500;
}

.comment-form p {
	margin-bottom: 1rem;
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: var(--pinbin-text-xs);
}

.comment-form .comment-form-cookies-consent input {
	width: auto;
	margin-top: 0.2rem;
}

.comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

/* ==========================================================================
   10. Search form
   ========================================================================== */

.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 30rem;
}

.search-form .search-field {
	flex: 1;
}

.search-form .search-submit {
	flex-shrink: 0;
}

/* Space the form from the heading above it and the button below it. */
.page-header .search-form {
	margin-top: 1rem;
}

.error-404 .search-form {
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site-footer {
	flex-shrink: 0;
	margin-top: var(--pinbin-section);
	padding: var(--pinbin-section) var(--pinbin-gutter) 2rem;
	border-top: 1px solid var(--pinbin-rule);
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--pinbin-section) var(--pinbin-gutter);
	max-width: 96rem;
	margin: 0 auto var(--pinbin-section);
}

/* Block widgets render their own heading inside the block content rather than
   through before_title/after_title, so .widget-title alone never matched and
   footer headings came out at full h2 size. */
.footer-widgets .widget-title,
.footer-widgets h1,
.footer-widgets h2,
.footer-widgets h3,
.footer-widgets h4,
.footer-widgets h5,
.footer-widgets h6 {
	margin-bottom: 0.75rem;
	font-size: var(--pinbin-text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

.footer-widgets ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-widgets li {
	margin-bottom: 0.4rem;
	font-size: var(--pinbin-text-sm);
}

/* Core's layout rules emit the global blockGap (1.5rem) between block
   children, which is right for content and far too airy for a footer list. */
.footer-widgets ul,
.footer-widgets ol {
	--wp--style--block-gap: 0.4rem;
}

.footer-widgets .is-layout-flow > * + * {
	margin-block-start: 0.4rem;
}

.footer-widgets .widget > .is-layout-flow > * + * {
	margin-block-start: 0.75rem;
}

.footer-widgets p {
	margin-bottom: 0.75rem;
	font-size: var(--pinbin-text-sm);
}

.footer-widgets .wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.footer-widgets .wp-block-search__button {
	font-size: var(--pinbin-text-sm);
}

.footer-widgets a {
	color: var(--pinbin-muted);
	text-decoration: none;
}

.footer-widgets a:hover {
	color: var(--pinbin-accent);
}

.social-navigation ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: var(--pinbin-text-sm);
}

.social-navigation a {
	color: var(--pinbin-muted);
	text-decoration: none;
}

.social-navigation a:hover {
	color: var(--pinbin-accent);
}

.site-footer__bottom {
	max-width: 96rem;
	margin: 0 auto;
	text-align: center;
}

.site-credit {
	margin: 0;
	color: var(--pinbin-muted);
	font-size: var(--pinbin-text-xs);
}

.site-credit a {
	color: var(--pinbin-muted);
}

/* ==========================================================================
   12. Block editor output on the front end
   ========================================================================== */

.wp-block-image img {
	border-radius: var(--pinbin-radius-sm);
}

.wp-block-gallery.is-style-pinbin-grid {
	--wp--style--unstable-gallery-gap: var(--pinbin-gutter);
}

.gallery-caption,
.blocks-gallery-item__caption {
	display: block;
	margin-top: 0.4rem;
	color: var(--pinbin-muted);
	font-size: var(--pinbin-text-xs);
	line-height: 1.4;
}

.wp-block-image.is-style-pinbin-frame img {
	padding: 0.5rem;
	border: 1px solid var(--pinbin-rule);
	border-radius: var(--pinbin-radius-sm);
	background: var(--pinbin-surface);
}

.wp-block-quote.is-style-pinbin-quote {
	padding-inline-start: 0;
	border-inline-start: 0;
	text-align: center;
	font-size: 1.4em;
}

/* The pullquote block draws its own frame. The theme's blockquote accent
   rule and indent would otherwise add a second, one-sided border inside it. */
.wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.wp-block-separator {
	border-color: var(--pinbin-rule);
}

.wp-block-button__link {
	border-radius: 999px;
}

/* ==========================================================================
   13. Galleries
   ==========================================================================
   Declaring html5 gallery support stops WordPress printing its own default
   gallery CSS and hands the classic [gallery] shortcode to the theme. Without
   these rules a gallery renders as one stacked column of 150px thumbnails.

   Multi-column rather than grid, for the same reason the post grid uses it: a
   single long caption in a grid row stretches that whole row and leaves the
   other cells sitting above a gap. Columns just flow on, and it matches the
   masonry language of the front page.
   -------------------------------------------------------------------------- */

.gallery {
	columns: 3;
	column-gap: 0.75rem;
	margin: 0 0 1.5em;
}

.gallery-columns-1 { columns: 1; }
.gallery-columns-2 { columns: 2; }
.gallery-columns-3 { columns: 3; }
.gallery-columns-4 { columns: 4; }
.gallery-columns-5 { columns: 5; }
.gallery-columns-6 { columns: 6; }
.gallery-columns-7 { columns: 7; }
.gallery-columns-8 { columns: 8; }
.gallery-columns-9 { columns: 9; }

.gallery-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 0.75rem;
}

.gallery-icon {
	margin: 0;
	overflow: hidden;
	border-radius: var(--pinbin-radius-sm);
	background: var(--pinbin-surface-alt);
}

.gallery-icon a,
.gallery-icon img {
	display: block;
	width: 100%;
}

.gallery-icon img {
	height: auto;
	transition: transform 600ms var(--pinbin-ease);
}

.gallery-item:hover .gallery-icon img,
.gallery-item:focus-within .gallery-icon img {
	transform: scale(1.04);
}

/* Dense galleries drop columns before the thumbnails become unreadable. */
@media (max-width: 47.99em) {
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 {
		columns: 3;
	}
}

@media (max-width: 29.99em) {
	.gallery-columns-2,
	.gallery-columns-3,
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 {
		columns: 2;
	}
}

/* Block gallery: core owns the layout, the theme matches the finish.
   Two markup generations are still in the wild -- the current
   figure.wp-block-image, and the legacy ul.blocks-gallery-grid that older
   posts keep -- so both are covered. */
.wp-block-gallery figure.wp-block-image img,
.wp-block-gallery .blocks-gallery-item img {
	border-radius: var(--pinbin-radius-sm);
	transition: transform 600ms var(--pinbin-ease);
}

.wp-block-gallery figure.wp-block-image:hover img,
.wp-block-gallery .blocks-gallery-item:hover img {
	transform: scale(1.03);
}

.wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-gallery figure.wp-block-image figcaption {
	color: var(--pinbin-muted);
	font-size: var(--pinbin-text-xs);
}

/* Core caps the height of an overlaid gallery caption and lets it scroll.
   Letting it grow instead (2.0.2) pushed long captions up past the top of
   their image, over the row above. The cap stays; navigation.js makes a
   caption that actually scrolls reachable by keyboard, as it does for code. */
.wp-block-gallery figcaption[tabindex="0"]:focus-visible {
	outline: 2px solid var(--pinbin-accent);
	outline-offset: -2px;
}

/* The registered "Pinbin grid" block style crops to a uniform square. */
.wp-block-gallery.is-style-pinbin-grid figure.wp-block-image img,
.wp-block-gallery.is-style-pinbin-grid .blocks-gallery-item img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* ==========================================================================
   14. Print
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.post-navigation,
	.pagination,
	.comment-respond,
	.pinbin-card__arrow {
		display: none !important;
	}

	.pinbin-single,
	.pinbin-card {
		box-shadow: none;
		break-inside: avoid;
	}

	body {
		background: #fff;
		color: #000;
	}
}