/* ==========================================================================
   Picksley Labs components
   Colours, spacing and type come from theme.json. This file only adds the
   things blocks cannot express: the sheet texture, the sticker cards, the
   scalloped edge and the product/blog furniture.
   Every class is prefixed pl- so nothing collides with core or the parent.
   ========================================================================== */

:root {
	--pl-forest: var(--wp--preset--color--forest, #134434);
	--pl-deep:   var(--wp--preset--color--deep,   #0E3327);
	--pl-paper:  var(--wp--preset--color--paper,  #F7F4ED);
	--pl-cream:  var(--wp--preset--color--cream,  #FDF8EC);
	--pl-mint:   var(--wp--preset--color--mint,   #EFF4E8);
	--pl-cta:    var(--wp--preset--color--cta,    #FBEDD2);
	--pl-edge:   var(--wp--preset--color--edge,   #7C8D6D);
	--pl-drop:   var(--wp--preset--color--drop,   #C2D4B0);
	--pl-ink:    var(--wp--preset--color--ink,    #23281F);
	--pl-muted:  var(--wp--preset--color--muted,  #57604F);
	--pl-amber:  var(--wp--preset--color--amber,  #E0A22F);
	--pl-clay:   var(--wp--preset--color--clay,   #B5502E);
	--pl-rule:   #C9D6BC;
}

/* --------------------------------------------------------------------------
   1. Sheet texture
   38px dot pitch is co-prime with every line-height in the theme, so it beats
   over a paragraph instead of landing in the same place on every line.
   -------------------------------------------------------------------------- */
body.pl-sheet,
.editor-styles-wrapper {
	background-color: var(--pl-paper);
	background-image:
		radial-gradient(rgba(19, 68, 52, .045) 1px, transparent 1.6px),
		radial-gradient(140% 100% at 50% 0%, rgba(255, 255, 255, .85) 0%, transparent 55%);
	background-size: 38px 38px, 100% 100%;
	background-attachment: scroll, fixed;
}

/* --------------------------------------------------------------------------
   2. Scalloped sheet edge. One per page, under the hero.
   -------------------------------------------------------------------------- */
.pl-edge {
	height: 11px;
	opacity: .4;
	background: radial-gradient(circle at 8px 11px, var(--pl-forest) 7px, transparent 7.5px) repeat-x;
	background-size: 16px 11px;
}

/* --------------------------------------------------------------------------
   3. Section heading: authority from colour and a rule, not from shouting
   -------------------------------------------------------------------------- */
.pl-shead {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.pl-shead::before {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 3px;
	border-radius: 2px;
	background: var(--pl-forest);
}

.pl-shead.is-alt::before { background: var(--pl-clay); }

.pl-shead > * { margin: 0 !important; }

.pl-shead .pl-count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .68rem;
	letter-spacing: .08em;
	color: var(--pl-muted);
}

/* --------------------------------------------------------------------------
   4. Product card. A columns block with .pl-prod on the wrapper.
   -------------------------------------------------------------------------- */
.pl-prod {
	background: var(--pl-cream);
	border: 1.5px solid var(--pl-edge);
	border-radius: 16px;
	padding: 16px;
	box-shadow: 3px 3px 0 var(--pl-drop);
}

.pl-prod.is-wip { background: var(--pl-mint); }

.pl-prod > .wp-block-column:first-child { flex-basis: 116px; flex-grow: 0; }

@media (max-width: 599px) {
	.pl-prod > .wp-block-column:first-child { flex-basis: 84px; }
}

.pl-prod p { color: var(--pl-muted); max-width: 58ch; }

/* Screenshot frame */
.pl-shot img,
.pl-shot .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1.5px solid var(--pl-edge);
	border-radius: 11px;
	background: #fff;
}

/* Empty state: the mascot earns its keep instead of 9px grey text */
.pl-shot.is-empty {
	display: grid;
	place-items: center;
	aspect-ratio: 300 / 650;
	padding: 8px;
	text-align: center;
	background: #fff;
	border: 1.5px solid var(--pl-edge);
	border-radius: 11px;
}

.pl-shot.is-empty img {
	width: 66%;
	border: 0;
	opacity: .85;
}

.pl-shot.is-empty figcaption,
.pl-shot.is-empty p {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6rem;
	letter-spacing: .06em;
	color: var(--pl-muted);
	margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   5. Status tags
   -------------------------------------------------------------------------- */
.pl-tag {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .63rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	line-height: 1.4;
}

.pl-tag.is-live { background: var(--pl-forest); color: var(--pl-paper); }
.pl-tag.is-wip  { color: var(--pl-clay); border-color: var(--pl-clay); }

/* Slapped on, like a sticker */
.pl-tag.is-sale {
	background: #fff;
	color: var(--pl-forest);
	border-color: var(--pl-edge);
	transform: rotate(-2.5deg);
}

/* --------------------------------------------------------------------------
   6. Workshop wash panel
   -------------------------------------------------------------------------- */
.pl-wash {
	background: var(--pl-mint);
	border: 1.5px solid var(--pl-edge);
	border-radius: 18px;
	padding: 24px;
}

.pl-mini a,
a.pl-mini-card {
	display: block;
	background: #fff;
	border: 1.5px solid var(--pl-edge);
	border-radius: 12px;
	padding: 12px;
	text-decoration: none;
	transition: background-color .16s ease, border-color .16s ease;
}

.pl-mini a:hover,
a.pl-mini-card:hover { border-color: var(--pl-clay); background: var(--pl-cream); }

.pl-mini h3, a.pl-mini-card h3 { font-size: .92rem; margin: 0 0 4px; }
.pl-mini p,  a.pl-mini-card p  { margin: 0; font-size: .79rem; color: var(--pl-muted); }

/* --------------------------------------------------------------------------
   7. Right rail
   -------------------------------------------------------------------------- */
.pl-rail .pl-card {
	background: #fff;
	border: 1.5px solid var(--pl-edge);
	border-radius: 14px;
	padding: 16px;
	box-shadow: 3px 3px 0 var(--pl-drop);
}

.pl-rail .pl-card.is-cta { background: var(--pl-cta); }
.pl-rail .pl-card > :first-child { margin-top: 0; }
.pl-rail .pl-card > :last-child { margin-bottom: 0; }

/* Latest posts block, restyled: title first, category after */
.pl-rail .wp-block-latest-posts__list { list-style: none; padding: 0; margin: 0; }

.pl-rail .wp-block-latest-posts__list li { padding: 8px 0; }

.pl-rail .wp-block-latest-posts__list li + li { border-top: 1.5px solid var(--pl-rule); }

.pl-rail .wp-block-latest-posts__post-title {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.32;
	color: var(--pl-forest);
	text-decoration: none;
}

.pl-rail .wp-block-latest-posts__post-title:hover {
	text-decoration: underline;
	text-decoration-color: var(--pl-amber);
	text-underline-offset: 3px;
}

.pl-rail .wp-block-latest-posts__post-date {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .62rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pl-muted);
	margin-top: 4px;
}

/* --------------------------------------------------------------------------
   8. Product page furniture
   -------------------------------------------------------------------------- */
.pl-panel {
	background: #fff;
	border: 1.5px solid var(--pl-edge);
	border-radius: 14px;
	padding: 16px 24px;
}

.pl-spec { margin: 0; }

.pl-spec dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 24px;
	margin: 0;
	font-size: .88rem;
}

.pl-spec dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .66rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pl-muted);
	padding-top: 3px;
}

.pl-spec dd { margin: 0; color: var(--pl-ink); }

.pl-veil {
	font-size: .85rem;
	color: var(--pl-muted);
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1.5px solid var(--pl-rule);
	max-width: 64ch;
}

/* "What it will not do" list */
.pl-nots { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

.pl-nots li {
	position: relative;
	padding-left: 24px;
	font-size: .92rem;
	color: var(--pl-muted);
}

.pl-nots li::before {
	content: "\00D7";
	position: absolute;
	left: 8px;
	color: var(--pl-clay);
	font-weight: 700;
}

/* Numbered how-it-works steps */
.pl-step .pl-n {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .66rem;
	letter-spacing: .08em;
	color: var(--pl-clay);
	margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   9. Blog
   -------------------------------------------------------------------------- */
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pl-chips a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 12px;
	border: 1.5px solid var(--pl-forest);
	border-radius: 999px;
	color: var(--pl-forest);
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}

.pl-chips a:hover,
.pl-chips a[aria-current] { background: var(--pl-forest); color: var(--pl-paper); }

.pl-entry { padding: 24px 0; border-top: 1.5px solid var(--pl-rule); max-width: 64ch; }
.pl-entry:first-of-type { border-top: 0; padding-top: 0; }
.pl-entry p { color: var(--pl-muted); }

.pl-entry .pl-line {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .66rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pl-muted);
}

/* --------------------------------------------------------------------------
   10. Header, footer, hero mascot
   -------------------------------------------------------------------------- */
.pl-hero-mascot img { transform: rotate(-3deg); max-width: 150px; height: auto; }

@media (max-width: 659px) {
	.pl-hero-mascot img { max-width: 110px; }
}

.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--pl-muted);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--pl-forest);
	border-bottom-color: var(--pl-drop);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--pl-forest);
	border-bottom-color: var(--pl-amber);
}

.pl-rule-top { border-top: 1.5px solid var(--pl-edge); }
.pl-rule-bottom { border-bottom: 1.5px solid var(--pl-edge); }

/* --------------------------------------------------------------------------
   11. Accessibility
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.wp-block-navigation a:focus-visible {
	outline: 2px solid var(--pl-clay);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}