/**
 * Next Admin Diary — presentation layer.
 *
 * theme.json owns colors, type and spacing tokens. This file owns the things
 * theme.json can't express: the brand gradient bar, animated underlines,
 * post-list hover/entrance motion, and metadata pills.
 *
 * Structural spacing (padding/gap/border) for group/paragraph/separator
 * blocks is handled here via plain classNames rather than block "style" or
 * "layout" attributes on purpose: those blocks are static (client-saved),
 * and Gutenberg's editor flags a hand-authored template as invalid the
 * moment its saved HTML doesn't byte-for-byte match what the block's own
 * save() would regenerate from those attributes. className is a simple,
 * unambiguous append with no such risk.
 */

/* Page structure: header, main, footer share one reading column.
   position+z-index lift the whole column into a layer strictly above the
   decorative sticky-notes plane (z-index: 0) — content can never be covered
   by an ornament, independent of any stacking subtleties inside the column
   (sticky avatars, animations, etc.). */
.site-header,
.site-main,
.site-footer {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: 1rem;
	position: relative;
	z-index: 1;
}

.site-header {
	padding-block: 1.5rem 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.site-header__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}

/* The logo spans the same width as the reading column below it. It's a
   wide, non-square bubble wordmark, so height is left to follow naturally —
   never stretched, never cropped. */
.site-logo {
	display: block;
	width: 100%;
	margin: 0;
}

.site-logo img,
.site-logo .custom-logo,
.wp-block-site-logo.is-default-size img {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
}

.site-header .wp-block-navigation {
	justify-content: center;
	width: 100%;
}

/* Default: the flat row — shown inline on desktop (core's own breakpoint
   decides that, not a media query here), and also how the same <ul> is
   marked up while the mobile modal is closed. .is-responsive is present in
   both this case AND the open mobile modal, so it doesn't distinguish them —
   .is-menu-open below, on the modal wrapper itself, is what's specific to
   "the mobile panel is actually open right now". */
.wp-block-navigation-item.wp-block-navigation-link {
	font-size: 1.375rem;
}

.wp-block-navigation-item:not( :first-child )::before {
	content: "•";
	display: inline-block;
	margin-inline-end: 0.35rem;
	color: var( --wp--preset--color--carbon-light );
	font-size: 0.85rem;
}

/* Mobile: WordPress's own hamburger + full-panel overlay (core/navigation's
   overlayMenu:"mobile"), just recolored and resized to match the theme
   instead of a hand-rolled layout. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var( --wp--preset--color--carbon );
	background: var( --wp--preset--color--paper-alt );
	border-radius: 999px;
	padding: 0.5rem;
}

.wp-block-navigation__responsive-dialog {
	background: var( --wp--preset--color--paper );
}

/* Only while the mobile panel is actually open: bigger, vertical, no
   separators (a stacked list doesn't need them). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	gap: 1.75rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.wp-block-navigation-link {
	font-size: 1.75rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not( :first-child )::before {
	display: none;
}

.wp-block-navigation-item .wp-block-navigation-item__content {
	padding: 0.1em 0.3em;
	border-radius: 6px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-navigation-item .wp-block-navigation-item__content:hover,
.wp-block-navigation-item .wp-block-navigation-item__content:focus-visible {
	background: var( --wp--preset--color--blue-soft );
	color: var( --wp--preset--color--blue );
}

.site-main {
	padding-block: 0 6rem;
}

.site-footer {
	padding-block: 2.5rem 4rem;
	border-top: 1px solid var( --wp--preset--color--border );
}

/* Post list + single post structure. */
.post-entry {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.post-article {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Author avatar sits in the left margin, outside the reading column, on
   viewports wide enough to have room for it. Below that it falls back to
   sitting inline, above the date/title. It's sticky within its own article/
   entry (.post-article / .post-entry are its containing block), so it
   follows you down the page as you read and naturally releases once that
   article ends — never drifting into the next one. */
.post-avatar {
	margin-block-end: 1rem;
	width: 64px;
}

.post-avatar img {
	display: block;
	border-radius: 999px;
}

@media ( min-width: 1320px ) {
	.post-avatar {
		/* Chrome silently ignores inset-inline-start/left on a sticky element
		   here (confirmed by testing: forcing position:relative with the same
		   offset applies it correctly, sticky does not) — a negative margin
		   shifts the box instead and composes fine with sticky's own vertical
		   offset, since it's a layout property, not an inset. */
		position: sticky;
		margin-inline-start: -148px;
		top: 2rem;
		/* Sticky still reserves its own height in the flex column even
		   though it's visually shifted into the margin — a negative bottom
		   margin collapses that reserved space so it doesn't push the
		   date/title/content down. */
		margin-block: 0 -80px;
		/* Above the sticky notes layer (z-index: 1), which otherwise
		   draws over it since both are positioned. */
		z-index: 2;
	}
}

.post-meta-block {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.post-nav-row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.post-separator {
	margin-block: 4rem;
}

.is-muted {
	color: var( --wp--preset--color--carbon-light );
}

/* A faint grain over the paper color — the difference between "cream" and
   an actual sheet of paper. Pure SVG turbulence, no image request. */
body {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E" );
	background-repeat: repeat;
}

/* Brand gradient bar — the one deliberately colorful fixture on every page. */
body::before {
	content: "";
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient( 90deg, var( --wp--preset--color--blue ), var( --wp--preset--color--green ) );
	z-index: 999;
}

html {
	scroll-behavior: smooth;
}

::selection {
	background: var( --wp--preset--color--blue );
	color: var( --wp--preset--color--paper );
}

hr.wp-block-separator {
	border-top: 1px solid var( --wp--preset--color--border );
}

code,
pre,
kbd,
samp {
	font-family: var( --wp--preset--font-family--mono );
}

/* Inline body links get an animated underline sweep instead of a static one. */
main a,
.wp-block-post-navigation-link a {
	background-image: linear-gradient( var( --wp--preset--color--blue ), var( --wp--preset--color--blue ) );
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size 0.25s ease, color 0.25s ease;
	padding-bottom: 0.05em;
}

main a:hover,
main a:focus-visible,
.wp-block-post-navigation-link a:hover,
.wp-block-post-navigation-link a:focus-visible {
	background-size: 100% 2px;
}

/* Post titles behave like headings, not body copy — plain color shift only. */
.wp-block-post-title a {
	background-image: none;
	text-decoration: none;
	transition: color 0.2s ease;
}

.wp-block-post-title a:hover {
	color: var( --wp--preset--color--green );
}

/* Metadata pills: blue = when, green = what. */
.wp-block-post-date time {
	display: inline-flex;
	align-items: center;
	background: var( --wp--preset--color--blue-soft );
	border-radius: 999px;
	padding: 0.15rem 0.7rem;
}

.wp-block-post-terms {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.wp-block-post-terms a {
	background: var( --wp--preset--color--green-soft );
	border-radius: 999px;
	padding: 0.15rem 0.7rem;
	background-image: none;
	text-decoration: none;
}

/* Full-length entries in the feed are divided, not carded — a hover-lift on
   an entire article reads as janky rather than delightful. */
.wp-block-post-template > li:not( :last-child ) {
	padding-bottom: 3rem;
	border-bottom: 1px solid var( --wp--preset--color--border );
}

.post-entry {
	position: relative;
}

.full-post-content {
	margin-block-start: 1.5rem;
}

.infinite-scroll-sentinel {
	height: 1px;
}

.infinite-scroll-sentinel.is-loading::after {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	margin: 3rem auto;
	border-radius: 999px;
	border: 2px solid var( --wp--preset--color--border );
	border-top-color: var( --wp--preset--color--blue );
	animation: next-admin-diary-spin 0.7s linear infinite;
}

@keyframes next-admin-diary-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Quiet entrance animation, staggered across the visible fold.
   Opacity only, deliberately no transform: fill-mode "both" holds whatever
   the "to" keyframe sets forever (it never releases back to the element's
   own CSS) — a held transform, even translateY(0), creates a permanent
   stacking context, which silently trapped the sticky avatar's z-index
   inside its animated ancestor (.post-article / .wp-block-post-template>li),
   letting .sticky-notes paint over it regardless of the avatar's own
   z-index. Held opacity:1 has no such effect — it's the non-special value,
   so no stacking context, while opacity:0 during the animation itself still
   reads as a clean fade-in. */
@keyframes next-admin-diary-fade-up {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.wp-block-post-template > li {
	animation: next-admin-diary-fade-up 0.5s ease both;
}

.wp-block-post-template > li:nth-child( 1 ) { animation-delay: 0.02s; }
.wp-block-post-template > li:nth-child( 2 ) { animation-delay: 0.08s; }
.wp-block-post-template > li:nth-child( 3 ) { animation-delay: 0.14s; }
.wp-block-post-template > li:nth-child( 4 ) { animation-delay: 0.2s; }
.wp-block-post-template > li:nth-child( 5 ) { animation-delay: 0.26s; }
.wp-block-post-template > li:nth-child( 6 ) { animation-delay: 0.32s; }
.wp-block-post-template > li:nth-child( n + 7 ) { animation-delay: 0.36s; }

main > .wp-block-group {
	animation: next-admin-diary-fade-up 0.4s ease both;
}

/* Blockquotes read as a taped-down index card, not a quoted paragraph. */
.wp-block-quote {
	background: var( --wp--preset--color--paper-alt );
	border-inline-start: none;
	border-radius: 3px;
	padding: 1.5rem 1.75rem;
	margin-block: 2rem;
	box-shadow: 0 14px 26px -18px rgba( 51, 43, 24, 0.45 );
	font-style: italic;
	position: relative;
	transform: rotate( -0.4deg );
}

.wp-block-quote::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 2rem;
	width: 46px;
	height: 16px;
	background: rgba( 255, 255, 255, 0.55 );
	border: 1px solid rgba( 51, 43, 24, 0.08 );
	transform: rotate( -3deg );
}

.wp-block-quote cite {
	display: block;
	margin-block-start: 0.75rem;
	font-family: var( --wp--preset--font-family--mono );
	font-style: normal;
	font-size: var( --wp--preset--font-size--meta );
	color: var( --wp--preset--color--carbon-light );
}

.wp-block-button__link {
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY( -1px );
}

/* Sticky notes scattered down the dead space beside the reading column —
   pure ornament, leaning into the "developer's desk" feel of a diary rather
   than a sterile screen. Positioned relative to the whole document (not the
   viewport) so a growing number of notes can spread down a long page as you
   scroll, instead of crowding into one screen. Hidden below 1400px where
   there's no room for them without crowding the content. */
.sticky-notes {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	/* Below the content column (z-index: 1 on .site-header/main/footer):
	   ornaments live between the wallpaper and the page, never above it. */
	z-index: 0;
	display: none;
}

@media ( min-width: 1400px ) {
	.sticky-notes {
		display: block;
	}
}

.sticky-note {
	position: absolute;
	width: 152px;
	will-change: transform;
}

.sticky-note__float {
	animation: sticky-note-float 8s ease-in-out infinite;
}

.sticky-note__card {
	--tilt-x: 0deg;
	--tilt-y: 0deg;
	transform: rotate( var( --rot, 0deg ) ) perspective( 700px ) rotateX( var( --tilt-x ) ) rotateY( var( --tilt-y ) );
	transition: transform 0.2s ease-out;
	border-radius: 2px;
	box-shadow: 0 18px 34px -18px rgba( 51, 43, 24, 0.5 );
	padding: 24px 16px;
	position: relative;
}

.sticky-note--yellow .sticky-note__card {
	background: #fbe08a;
}

.sticky-note--blue .sticky-note__card {
	background: #bcd8f2;
}

.sticky-note--green .sticky-note__card {
	background: #c8ecc8;
}

.sticky-note__text {
	margin: 0;
	font-family: var( --wp--preset--font-family--serif );
	font-style: italic;
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.4;
	color: #3a2f14;
	text-align: center;
}

.sticky-note--taped .sticky-note__card::before {
	content: "";
	position: absolute;
	top: -11px;
	left: 50%;
	width: 56px;
	height: 20px;
	background: rgba( 255, 255, 255, 0.55 );
	border: 1px solid rgba( 0, 0, 0, 0.05 );
	transform: translateX( -50% ) rotate( -3deg );
}

.sticky-note--pinned .sticky-note__card::before {
	content: "📌";
	position: absolute;
	top: -19px;
	left: 50%;
	transform: translateX( -50% );
	font-size: 20px;
}

@keyframes sticky-note-float {
	0%,
	100% {
		transform: translateY( 0 );
	}
	50% {
		transform: translateY( -6px );
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.wp-block-post-template > li:hover {
		transform: none;
	}
}