/* Delovely Detroit — Guides (DD Core).
   Moved from the Kadence Child theme's Additional CSS on 29 Oct 2026, verbatim
   apart from: variables renamed --dd-* to --ddg-* so they never collide with the
   theme's own, and the fuchsia set to the brand's deeper DD fuchsia. */

/* =========================================================================
   Delovely Detroit — Guides
   Complete stylesheet. Replaces ALL previous guide CSS.

   In Additional CSS: find the old "Delovely Detroit — Guides" comment,
   delete from there to the end of the file, then paste this.
   ====================================================================== */

:root {
	--ddg-fuchsia: #B5176A;
	--ddg-fuchsia-deep: #8F1254;
	--ddg-green: #1F5C4A;
	--ddg-open: #0F6E56;
	--ddg-closed: #993C1D;
	--ddg-cream: #FBF6EC;
	--ddg-cream-deep: #F3E9D7;
	--ddg-ink: #1A1614;
	--ddg-ink-soft: #5C534D;
	--ddg-rule: rgba(26, 22, 20, 0.14);

	--ddg-display: "Fraunces", Georgia, serif;
	--ddg-body: "Hanken Grotesk", system-ui, sans-serif;
	--ddg-label: "Archivo", system-ui, sans-serif;

	/* One measure token. 100% = fill the container, no dead space on the
	   right. If lines ever feel too long, set this to a rem value (42rem is
	   a classic reading measure) and every text block retunes at once. */
	--ddg-measure: 100%;
}

/* -------------------------------------------------------------------------
   Guide title — Kadence's h1 on single guide pages
   ---------------------------------------------------------------------- */

body.single-guide h1 {
	font-family: var(--ddg-display);
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1.05;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
   Dek
   ---------------------------------------------------------------------- */

.dd-guide__dek {
	font-family: var(--ddg-display);
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	line-height: 1.4;
	font-weight: 400;
	color: var(--ddg-ink-soft);
	margin: 0 0 2rem;
	max-width: 34em;
}

/* -------------------------------------------------------------------------
   Summary block
   ---------------------------------------------------------------------- */

.dd-guide__summary {
	background: var(--ddg-cream);
	border-top: 3px solid var(--ddg-fuchsia);
	border-bottom: 3px solid var(--ddg-fuchsia);
	box-shadow: inset 0 5px 0 var(--ddg-cream), inset 0 -5px 0 var(--ddg-cream),
		inset 0 6px 0 var(--ddg-fuchsia), inset 0 -6px 0 var(--ddg-fuchsia);
	padding: 1.75rem 1.5rem;
	margin: 0 0 2.5rem;
}

.dd-guide__facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 3rem;
	margin: 0;
	padding: 0;
}

.dd-guide__facts li {
	font-family: var(--ddg-display);
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--ddg-ink);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
}

.dd-guide__facts strong {
	font-family: var(--ddg-label);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ddg-fuchsia);
}

.dd-guide__access {
	font-family: var(--ddg-body);
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--ddg-ink-soft);
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ddg-rule);
	max-width: var(--ddg-measure);
}

.dd-guide__route {
	margin: 1.25rem 0 0;
}

.dd-guide__route a {
	display: inline-block;
	font-family: var(--ddg-label);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ddg-cream);
	background: var(--ddg-fuchsia);
	padding: 0.85rem 1.6rem;
	transition: background 0.15s ease;
}

.dd-guide__route a:hover,
.dd-guide__route a:focus {
	background: var(--ddg-fuchsia-deep);
	color: var(--ddg-cream);
}

.dd-guide__signpost {
	font-family: var(--ddg-body);
	font-size: 0.92rem;
	color: var(--ddg-ink-soft);
	margin: 1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--ddg-rule);
}

.dd-guide__signpost a {
	color: var(--ddg-fuchsia);
	text-decoration: none;
	border-bottom: 1px solid rgba(181, 23, 106, 0.35);
}

.dd-guide__signpost a:hover,
.dd-guide__signpost a:focus {
	border-bottom-color: var(--ddg-fuchsia);
}

/* -------------------------------------------------------------------------
   Corrections
   ---------------------------------------------------------------------- */

.dd-guide__corrections {
	background: var(--ddg-green);
	color: var(--ddg-cream);
	padding: 1.5rem 1.75rem;
	margin: 0 0 2.5rem;
	font-family: var(--ddg-body);
	font-size: 1rem;
	line-height: 1.65;
}

.dd-guide__corrections p {
	max-width: var(--ddg-measure);
}

.dd-guide__corrections p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Stops
   ---------------------------------------------------------------------- */

.dd-guide__stops {
	margin-top: 3rem;
}

.dd-guide__stop {
	padding: 0 0 3rem;
	margin: 0 0 3rem;
	border-bottom: 1px solid var(--ddg-rule);
}

.dd-guide__stop:last-child {
	border-bottom: 0;
}

.dd-guide__figure {
	margin: 0 0 1.5rem;
	max-width: var(--ddg-measure);
}

.dd-guide__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.dd-guide__number {
	font-family: var(--ddg-label);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ddg-fuchsia);
	margin: 0 0 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	max-width: var(--ddg-measure);
}

.dd-guide__number::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ddg-rule);
}

.dd-guide__stop-title {
	font-family: var(--ddg-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
	font-weight: 500;
	margin: 0 0 0.6rem;
}

.dd-guide__stop-title a {
	color: var(--ddg-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--ddg-fuchsia), var(--ddg-fuchsia));
	background-size: 0% 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.25s ease;
}

.dd-guide__stop-title a:hover,
.dd-guide__stop-title a:focus {
	color: var(--ddg-fuchsia);
	background-size: 100% 2px;
}

.dd-guide__meta {
	font-family: var(--ddg-label);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--ddg-ink-soft);
	margin: 0 0 1rem;
}

/* Body prose — the measure cap. Scoped so it never catches the chip row,
   the links row, or the note box, all of which are also <p> elements. */
.dd-guide__stop > p:not(.dd-guide__meta):not(.dd-guide__chips):not(.dd-guide__links):not(.dd-guide__note),
.dd-guide__break > p:not(.dd-guide__meta):not(.dd-guide__chips):not(.dd-guide__links):not(.dd-guide__note) {
	font-family: var(--ddg-body);
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--ddg-ink);
	max-width: var(--ddg-measure);
}

/* -------------------------------------------------------------------------
   Chips

   The label background is set per modifier, NOT via currentColor.
   currentColor resolves against the element's own color — which is cream
   here — and produced an invisible cream-on-cream label.
   ---------------------------------------------------------------------- */

.dd-guide__chips {
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
	line-height: 1;
	max-width: none;
}

.dd-chip {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	max-width: 100%;
	border: 1px solid currentColor;
	border-radius: 2px;
	overflow: hidden;
	font-family: var(--ddg-label);
	font-size: 0.75rem;
	line-height: 1;
	min-height: 30px;
}

.dd-chip__label {
	display: flex;
	align-items: center;
	color: var(--ddg-cream);
	padding: 6px 11px;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dd-chip__value {
	display: flex;
	align-items: center;
	padding: 6px 13px;
	font-weight: 600;
	color: inherit;
	white-space: normal;
}

.dd-chip--detail {
	color: var(--ddg-green);
}

.dd-chip--detail .dd-chip__label {
	background: var(--ddg-green);
}

.dd-chip--open {
	color: var(--ddg-open);
}

.dd-chip--open .dd-chip__label {
	background: var(--ddg-open);
}

.dd-chip--closed {
	color: var(--ddg-closed);
}

.dd-chip--closed .dd-chip__label {
	background: var(--ddg-closed);
}

/* -------------------------------------------------------------------------
   Callout boxes — note and listening share one measure so they line up
   ---------------------------------------------------------------------- */

.dd-guide__note,
.dd-guide__listening {
	max-width: var(--ddg-measure);
	box-sizing: border-box;
}

.dd-guide__note {
	background: var(--ddg-cream-deep);
	border-left: 4px solid var(--ddg-green);
	padding: 1rem 1.25rem;
	font-family: var(--ddg-body);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ddg-ink-soft);
	margin: 1.5rem 0;
}

.dd-guide__listening {
	background: var(--ddg-cream);
	border-left: 4px solid var(--ddg-fuchsia);
	padding: 1.1rem 1.3rem;
	margin: 1.75rem 0;
}

.dd-guide__listening-label {
	font-family: var(--ddg-label);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ddg-fuchsia);
	margin: 0 0 0.35rem;
	line-height: 1.4;
	max-width: none;
}

.dd-guide__listening-track {
	font-family: var(--ddg-body);
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.5;
	max-width: none;
}

.dd-guide__listening-note {
	font-family: var(--ddg-display);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--ddg-ink-soft);
	margin: 0.2rem 0 0;
	line-height: 1.5;
	max-width: none;
}

/* -------------------------------------------------------------------------
   Stop footer links — pills. No measure cap, so they share a line.
   ---------------------------------------------------------------------- */

.dd-guide__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 1.5rem 0 0;
	max-width: none;
}

.dd-guide__links a {
	display: inline-block;
	border: 1px solid var(--ddg-fuchsia);
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	font-family: var(--ddg-label);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--ddg-fuchsia);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.dd-guide__links a:hover,
.dd-guide__links a:focus {
	background: var(--ddg-fuchsia);
	color: var(--ddg-cream);
}

/* -------------------------------------------------------------------------
   Breaks
   ---------------------------------------------------------------------- */

.dd-guide__break {
	background: var(--ddg-cream);
	border-top: 3px solid var(--ddg-green);
	padding: 1.75rem;
	margin: 0 0 3rem;
}

.dd-guide__break-label {
	font-family: var(--ddg-label);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ddg-green);
	margin: 0 0 0.4rem;
}

.dd-guide__break-title {
	font-family: var(--ddg-display);
	font-size: 1.35rem;
	font-weight: 500;
	margin: 0 0 0.5rem;
}

.dd-guide__break-title a {
	color: var(--ddg-ink);
	text-decoration: none;
}

.dd-guide__break-title a:hover {
	color: var(--ddg-green);
}

.dd-guide__break .dd-guide__meta {
	margin-bottom: 0.75rem;
}

/* -------------------------------------------------------------------------
   Affiliate
   ---------------------------------------------------------------------- */

.dd-affiliate {
	background: var(--ddg-cream);
	border: 2px dashed var(--ddg-fuchsia);
	border-radius: 10px;
	padding: 1.75rem;
	margin: 3rem 0 0;
	scroll-margin-top: 2rem;
}

.dd-affiliate__heading {
	font-family: var(--ddg-display);
	font-size: 1.35rem;
	font-weight: 500;
	margin: 0 0 0.6rem;
}

.dd-affiliate__intro p {
	font-family: var(--ddg-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ddg-ink-soft);
	margin: 0 0 0.85rem;
}

.dd-affiliate__card {
	background: #fff;
	border: 1px solid var(--ddg-rule);
	border-radius: 6px;
	padding: 15px 17px;
	margin: 1.25rem 0 0;
}


.dd-affiliate__product {
	font-family: var(--ddg-body);
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 0.2rem;
	line-height: 1.35;
}

.dd-affiliate__meta {
	font-family: var(--ddg-label);
	font-size: 0.82rem;
	color: var(--ddg-ink-soft);
	margin: 0 0 0.85rem;
}

.dd-affiliate__cta {
	display: inline-block;
	text-align: center;
	border-radius: 4px;
	font-family: var(--ddg-label);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ddg-cream);
	background: var(--ddg-fuchsia);
	padding: 0.65rem 1.15rem;
}

.dd-affiliate__cta:hover,
.dd-affiliate__cta:focus {
	background: var(--ddg-fuchsia-deep);
	color: var(--ddg-cream);
}

.dd-affiliate__caveat {
	font-family: var(--ddg-body);
	font-size: 0.82rem;
	font-style: italic;
	line-height: 1.55;
	color: var(--ddg-ink-soft);
	margin: 0.9rem 0 0;
}

/* -------------------------------------------------------------------------
   Reciprocal link on Place pages
   ---------------------------------------------------------------------- */

.dd-guide-backlink {
	font-family: var(--ddg-label);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--ddg-ink-soft);
	margin: 1.5rem 0;
}

.dd-guide-backlink a {
	color: var(--ddg-fuchsia);
}

/* -------------------------------------------------------------------------
   Spacing overrides

   Kadence styles paragraphs with something like `.entry-content p`, which is
   a class plus an element (specificity 0,1,1) and therefore beats a lone
   class (0,1,0). Every margin set on a single class below was being ignored.
   Scoping each rule under its parent raises it to 0,2,0 and wins cleanly —
   no !important needed.
   ---------------------------------------------------------------------- */

.dd-affiliate .dd-affiliate__product {
	margin: 0 0 0.2rem;
}

.dd-affiliate .dd-affiliate__meta {
	margin: 0 0 0.9rem;
}

.dd-affiliate .dd-affiliate__caveat {
	margin: 0.9rem 0 0;
}

.dd-affiliate .dd-affiliate__intro p {
	margin: 0 0 0.85rem;
}

.dd-affiliate .dd-affiliate__intro p:last-child {
	margin-bottom: 0;
}

.dd-guide__listening .dd-guide__listening-label {
	margin: 0 0 0.35rem;
}

.dd-guide__listening .dd-guide__listening-track {
	margin: 0;
}

.dd-guide__listening .dd-guide__listening-note {
	margin: 0.25rem 0 0;
}

.dd-guide__stop .dd-guide__note,
.dd-guide__break .dd-guide__note {
	margin: 1.5rem 0;
}

.dd-guide__stop .dd-guide__meta,
.dd-guide__break .dd-guide__meta {
	margin: 0 0 1rem;
}

.dd-guide__stop .dd-guide__chips,
.dd-guide__break .dd-guide__chips {
	margin: 0 0 1.5rem;
}

.dd-guide__stop .dd-guide__links {
	margin: 1.5rem 0 0;
}

.dd-guide__stop .dd-guide__number {
	margin: 0 0 0.5rem;
}

.dd-guide__summary .dd-guide__access {
	margin: 1.5rem 0 0;
}

.dd-guide__summary .dd-guide__route {
	margin: 1.25rem 0 0;
}

.dd-guide__summary .dd-guide__signpost {
	margin: 1rem 0 0;
}

.dd-reader-note p {
	margin: 0 0 0.75rem;
}

.dd-reader-note p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Small screens
   ---------------------------------------------------------------------- */

@media (max-width: 600px) {

	.dd-guide__summary {
		padding: 1.35rem 1.15rem;
	}

	.dd-guide__facts {
		gap: 1rem 1.75rem;
	}

	.dd-guide__facts li {
		font-size: 1.1rem;
	}

	.dd-guide__route a {
		display: block;
		text-align: center;
	}

	.dd-guide__stop,
	.dd-guide__break {
		padding-bottom: 2rem;
		margin-bottom: 2rem;
	}

	.dd-chip {
		font-size: 0.72rem;
	}

	.dd-chip__label {
		font-size: 0.6rem;
	}

	.dd-affiliate {
		padding: 1.25rem 1.1rem;
	}

	.dd-affiliate__card {
		padding: 14px 15px;
	}

	.dd-affiliate__cta {
		display: block;
		width: 100%;
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
	}
}

/* -------------------------------------------------------------------------
   Reader note — closes the page. Deliberately unboxed: the page already has
   enough panels, and an invitation shouldn't look like a widget.
   ---------------------------------------------------------------------- */

.dd-reader-note {
	margin: 3rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ddg-rule);
}

.dd-reader-note p {
	font-family: var(--ddg-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ddg-ink-soft);
	margin: 0 0 0.75rem;
}

.dd-reader-note p:last-child {
	margin-bottom: 0;
}

.dd-reader-note a {
	color: var(--ddg-fuchsia);
	text-decoration: none;
	border-bottom: 1px solid rgba(181, 23, 106, 0.35);
}

.dd-reader-note a:hover,
.dd-reader-note a:focus {
	border-bottom-color: var(--ddg-fuchsia);
}

/* -------------------------------------------------------------------------
   0.8.0 — visit chip, cost line, map legs, optional extensions
   ---------------------------------------------------------------------- */

.dd-chip--radar {
	color: var(--ddg-fuchsia);
	border-style: dashed;
}

.dd-chip--radar .dd-chip__label {
	background: var(--ddg-fuchsia);
}

.dd-guide__facts-extra {
	font-size: 0.8em;
	color: var(--ddg-ink-soft);
	white-space: nowrap;
}

.dd-guide__summary .dd-guide__cost {
	font-family: var(--ddg-body);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--ddg-ink-soft);
	margin: 0.75rem 0 0;
}

.dd-guide__route--legs {
	margin: 1.25rem 0 0;
}

.dd-guide__route-head {
	font-family: var(--ddg-label);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ddg-ink-soft);
	margin: 0 0 0.6rem;
}

.dd-guide__legs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dd-guide__legs li {
	margin: 0;
}

.dd-guide__route--legs .dd-guide__legs a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.7rem 1.1rem;
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: none;
}

.dd-guide__leg-part {
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dd-guide__leg-mode {
	opacity: 0.85;
	font-weight: 500;
}

.dd-guide__extensions {
	margin: 3rem 0 0;
	padding-top: 2rem;
	border-top: 2px dashed var(--ddg-rule);
}

.dd-guide__ext-label {
	font-family: var(--ddg-label);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ddg-fuchsia);
	margin: 0 0 0.4rem;
}

.dd-guide__ext-title {
	font-family: var(--ddg-display);
	font-size: 1.6rem;
	font-weight: 500;
	margin: 0 0 0.5rem;
}

.dd-guide__ext-intro {
	font-family: var(--ddg-body);
	color: var(--ddg-ink-soft);
	margin: 0 0 1rem;
	max-width: var(--ddg-measure);
}

.dd-guide__extensions .dd-guide__stops {
	margin-top: 2rem;
}

@media (max-width: 600px) {
	.dd-guide__legs {
		flex-direction: column;
	}
	.dd-guide__route--legs .dd-guide__legs a {
		display: flex;
		justify-content: center;
	}
}