/**
 * izebuy single-post styling.
 *
 * The izebuy post API ships each post as clean, semantic HTML wrapped in
 * <article class="izebuy-post"> — body is HTML + class names only, no inline CSS
 * (WordPress' KSES would strip an inline <style> on the way in over the REST API).
 * This stylesheet is the theme-side half of that contract: it is enqueued
 * site-wide (see the child functions.php) so every post the API publishes is
 * styled without the body carrying any CSS of its own.
 *
 * Everything is scoped under .izebuy-post so it never leaks into the rest of the
 * site. Structure only — no colour — except the About-the-Author box, which gets a
 * light neutral background. Borders and text inherit the theme's colour
 * (currentColor), so the editorial layout below adopts whatever palette the site
 * runs.
 *
 * The cover image is NOT in the post body: it is the WordPress Featured Image,
 * which the single-post template (single.php) lifts into .izebuy-hero next to the
 * contents box — on desktop it sits to the right of the [toc] box; on mobile it
 * stacks above it.
 */

/* ── Shell: white card on a grey background (matches the parent page templates) ─
 * .izebuy-single is the wrapper the Single Blog Post template outputs; it paints
 * the grey band, and .izebuy-post becomes the centred white card inside it. Uses
 * the theme's design tokens (loaded site-wide) with plain fallbacks. */
.izebuy-single {
	background: var(--ize-surface-2, #f3f4f6);
	padding: 24px 0 56px;
}

/* ── Reading column ───────────────────────────────────────────────────────── */
.izebuy-post {
	max-width: 1140px;
	margin: 0 auto;
	padding: 52px 60px 44px;
	background: var(--ize-surface, #ffffff);
	border-radius: var(--ize-radius-lg, 12px);
	box-shadow: var(--ize-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
	font-family: Georgia, 'Times New Roman', serif;
	line-height: 1.7;
	font-size: 18px;
}

/* h1 — centred masthead. */
.izebuy-post h1 {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 46px;
	margin: 0 0 28px;
	padding-bottom: 16px;
	border-bottom: 8px double;
}

/* ── Hero: contents box + Featured Image ──────────────────────────────────── */
.izebuy-hero {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	margin-bottom: 34px;
}

/* The contents column positions the [toc] shortcode beside the cover. We do NOT
 * style the shortcode itself — it renders and styles its own .ize-toc box. All we
 * do here is give the column a width so the box sits to the left of the cover in
 * the hero row (and goes full width on mobile, see the media query below). */
.izebuy-toc { flex: 0 0 300px; }

/* Featured Image — fills the rest of the hero row. */
.izebuy-featured { flex: 1; margin: 0; }
.izebuy-featured img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid;
}
.izebuy-featured figcaption {
	font-size: 14px;
	font-style: italic;
	margin-top: 8px;
	text-align: center;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
.izebuy-post h2 {
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 23px;
	margin: 48px 0 18px;
	padding-bottom: 9px;
	border-bottom: 2px solid;
	clear: both;
}
.izebuy-post h3 {
	font-size: 18px;
	font-variant: small-caps;
	letter-spacing: .5px;
	margin: 30px 0 14px;
	border-left: 4px solid;
	padding-left: 12px;
}

/* Anchored headings clear the sticky site header when jumped to from the [toc]. */
.izebuy-post :is(h2, h3, h4)[id] {
	scroll-margin-top: calc(var(--ize-header-bar-h, 56px) + 16px);
}

/* ── Body copy & media ────────────────────────────────────────────────────── */
.izebuy-post p { margin: 0 0 16px; }
.izebuy-post figure { margin: 0; }
.izebuy-post figure img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid;
}
.izebuy-post figcaption { font-size: 13px; font-style: italic; margin-top: 6px; }
.izebuy-post .clear { clear: both; }

/* Floated text-wrap images. */
.izebuy-post .izebuy-figR { float: right; width: 420px; margin: 4px 0 14px 28px; }
.izebuy-post .izebuy-figL { float: left;  width: 420px; margin: 4px 28px 14px 0; }

/* Embedded map. */
.izebuy-post .izebuy-map { margin: 6px 0 24px; }
.izebuy-post .izebuy-map iframe {
	width: 100%;
	min-height: 360px;
	border: 1px solid;
	display: block;
}
.izebuy-post .izebuy-map figcaption { text-align: center; }

/* ── Item cards (two-column grid) ─────────────────────────────────────────── */
.izebuy-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin: 10px 0 14px;
}
.izebuy-item .it-cap { margin-top: 10px; }
.izebuy-item .it-name { font-weight: bold; font-size: 19px; display: block; }
.izebuy-item .it-text { font-size: 16px; }
.izebuy-item .it-hours { font-size: 14px; font-style: italic; display: block; }

/* ── Custom "›" bullet list ───────────────────────────────────────────────── */
ul.izebuy-bullets { list-style: none; padding: 0; margin: 0 0 20px; }
ul.izebuy-bullets li {
	position: relative;
	padding: 11px 0 11px 30px;
	border-bottom: 1px dotted;
	font-size: 17px;
}
ul.izebuy-bullets li::before {
	content: "\203A";
	position: absolute;
	left: 8px;
	top: 9px;
	font-weight: bold;
	font-size: 20px;
}

/* ── About the Author — small, centred, light neutral card ────────────────── */
.izebuy-post .izebuy-author {
	max-width: 560px;
	margin: 40px auto 0;          /* centred on the page */
	display: flex;
	gap: 20px;
	align-items: center;          /* avatar + text vertically centred (no top gap) */
	padding: 20px 24px;
	border: 1px solid;
	border-radius: 8px;
	background: #f5f5f5;
}
.izebuy-post .izebuy-author figure { flex: 0 0 84px; margin: 0; }
.izebuy-post .izebuy-author img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid;
}
/* Reset the text block and heading so nothing pushes the content down inside the
 * card — kills the gap above "About the Author" the theme's default h2 margin
 * would otherwise create. */
.izebuy-post .izebuy-author > div { margin: 0; }
.izebuy-post .izebuy-author h2 {
	border: none;
	margin: 0 0 6px;
	padding: 0;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.izebuy-post .izebuy-author p { margin: 0; font-size: 15px; line-height: 1.55; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
	.izebuy-post { padding: 28px 20px; }
	.izebuy-hero { flex-direction: column; }
	.izebuy-featured { order: -1; }                 /* cover above the contents box */
	.izebuy-toc { flex-basis: auto; width: 100%; box-sizing: border-box; }
	.izebuy-post .izebuy-figR,
	.izebuy-post .izebuy-figL { float: none; width: 100%; margin: 0 0 16px; }
	.izebuy-items { grid-template-columns: 1fr; }
	.izebuy-author { flex-direction: column; align-items: flex-start; }
}