/**
 * Pasta Posts Community — spot cards, state directory, buttons.
 *
 * Uses the Recipe Paper theme's colors, fonts and paper texture when
 * that theme is active (var(--wp--preset--…), var(--rp-card-paper)),
 * with plain fallbacks for any other theme.
 */

.ppc-spots,
.ppc-dir {
	--ppc-paper: var(--wp--preset--color--aged-paper, #f2e4bb);
	--ppc-ink: var(--wp--preset--color--ink, #23201c);
	--ppc-muted: #6a5c45;
	--ppc-accent: var(--wp--preset--color--tomato, #a3381f);
	--ppc-heading: var(--wp--preset--font-family--heading, Georgia, serif);
	--ppc-type: var(--wp--preset--font-family--typewriter, "Courier New", monospace);
	--ppc-shadow: var(--rp-card-shadow, 0 8px 20px -10px rgba(60, 40, 10, 0.45));
}

.ppc-section-title {
	margin: var(--wp--preset--spacing--50, 2.5rem) 0 1.25rem;
	font-size: var(--wp--preset--font-size--x-large, 2rem);
	text-align: center;
}

.ppc-empty {
	text-align: center;
	color: var(--ppc-muted, #6a5c45);
}

/* ---------- Spot cards ---------- */

.ppc-spots__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.25rem;
}

.ppc-spot {
	display: flex;
	flex-direction: column;
	padding: 1.1rem 1.2rem 1rem;
	color: var(--ppc-ink);
	background-color: var(--ppc-paper);
	background-image: var(--rp-card-paper, none);
	border-radius: 3px;
	box-shadow: var(--ppc-shadow);
}

.ppc-spot > * {
	margin: 0;
}

.ppc-spot__type {
	font-family: var(--ppc-type);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ppc-accent);
}

.ppc-spot__name {
	margin-top: 0.2rem;
	padding-bottom: 0.35rem;
	font-family: var(--ppc-heading);
	font-size: 1.3rem;
	line-height: 1.2;
	border-bottom: 1.5px solid color-mix(in srgb, var(--ppc-accent) 55%, transparent);
}

.ppc-spot__name a {
	color: inherit;
	text-decoration: none;
}

.ppc-spot__name a:hover {
	color: var(--ppc-accent);
}

.ppc-spot__where {
	margin-top: 0.35rem;
	font-family: var(--ppc-type);
	font-size: 0.85rem;
	color: var(--ppc-muted);
}

.ppc-spot__dish {
	margin-top: 0.7rem;
	font-weight: 600;
}

.ppc-spot__dish span {
	font-family: var(--ppc-type);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ppc-muted);
}

.ppc-spot__note {
	margin: 0.6rem 0 0;
	padding: 0 0 0 0.8rem;
	font-style: italic;
	line-height: 1.55;
	border-left: 3px solid var(--ppc-accent);
}

.ppc-spot__note p {
	margin: 0 0 0.5em;
}

.ppc-spot__note p:last-child {
	margin-bottom: 0;
}

.ppc-spot__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.4rem 1rem;
	margin-top: auto !important;
	padding-top: 0.9rem;
	font-family: var(--ppc-type);
	font-size: 0.78rem;
	color: var(--ppc-muted);
}

.ppc-spot__map {
	color: var(--ppc-accent);
}

.ppc-spots__cta {
	margin-top: 1.5rem;
	text-align: center;
}

/* Retro button (matches the theme's Retro button style). */
.ppc-button,
.ppc-button:visited {
	display: inline-block;
	padding: 0.55em 1.15em;
	font-family: var(--ppc-type, monospace);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper, #fff);
	text-decoration: none;
	background: var(--ppc-accent, #a3381f);
	border: 2px solid var(--ppc-ink, #23201c);
	border-radius: 6px;
	box-shadow: 3px 3px 0 var(--ppc-ink, #23201c);
	transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.ppc-button:hover,
.ppc-button:focus-visible {
	color: var(--wp--preset--color--paper, #fff);
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--ppc-ink, #23201c);
}

.ppc-button:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--ppc-ink, #23201c);
}

/* ---------- State directory ---------- */

.ppc-dir {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ppc-dir a {
	display: grid;
	grid-template-columns: 2.6rem 1fr;
	align-items: center;
	gap: 0 0.6rem;
	padding: 0.6rem 0.8rem;
	color: var(--ppc-ink);
	text-decoration: none;
	background-color: var(--ppc-paper);
	background-image: var(--rp-card-paper, none);
	border-radius: 3px;
	box-shadow: var(--ppc-shadow);
	transition: transform 0.12s ease;
}

.ppc-dir a:hover,
.ppc-dir a:focus-visible {
	transform: translateY(-2px);
}

.ppc-dir__code {
	grid-row: span 2;
	display: grid;
	place-items: center;
	height: 2.6rem;
	font-family: var(--ppc-type);
	font-weight: 700;
	color: var(--wp--preset--color--paper, #fff);
	background: var(--ppc-accent);
	border-radius: 50%;
}

.ppc-dir__name {
	font-family: var(--ppc-heading);
	font-weight: 700;
	line-height: 1.2;
}

.ppc-dir__count {
	font-family: var(--ppc-type);
	font-size: 0.75rem;
	color: var(--ppc-muted);
}

.ppc-hp {
	position: absolute !important;
	left: -9999px !important;
}

@media (prefers-reduced-motion: reduce) {
	.ppc-button,
	.ppc-dir a {
		transition: none;
	}
}

/* ---------- Pasta Quotes ([pasta_quote]) ----------
 * Typed onto the page: the quote in the typewriter face, the credit
 * tucked under its right edge, like a caption on an index card. */

.ppc-quote {
	/* A one-column grid as wide as the quote: the credit lines up under the
	   quote's end, and justify-content decides where the pair sits. */
	display: grid;
	grid-template-columns: minmax(0, auto);
	justify-content: start;
	margin: 1.5rem 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--typewriter, "Courier New", monospace);
	color: var(--wp--preset--color--ink, #23201c);
}

.ppc-quote--center { justify-content: center; }
.ppc-quote--right { justify-content: end; }

.ppc-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.05rem;
	line-height: 1.55;
}

.ppc-quote__text p {
	margin: 0;
}

.ppc-quote__text p::before { content: "\201C"; }
.ppc-quote__text p::after { content: "\201D"; }

.ppc-quote__credit {
	margin-top: 0.35rem;
	text-align: right;
	font-size: 0.95rem;
}

.ppc-quote__credit a {
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ppc-quote__credit a:hover,
.ppc-quote__credit a:focus-visible {
	color: var(--wp--preset--color--tomato, #a3381f);
}