/* -------------------------------------------------------------------------
   The "teaching layout" (6.6) — scoped to .vf-teach, the wrapper
   vf_render_default_template() puts around the Single Post and Single
   Product Default Templates only (see inc/default-templates.php). Every
   other page on the site keeps the main --vf-* tokens untouched — this is
   an opt-in look for long-form reading and selling, not a site-wide
   restyle, the same relationship .vf-force-light already has to the main
   palette.

   Palette, type pairing, and measure are grounded in real published
   examples researched for this build (Notion Blog, Farnam Street,
   Josh Comeau, Readwise Reader, Dense Discovery, Nielsen Norman Group's
   own published research on a content+rail layout) rather than guessed:
   - Warm "paper" background instead of pure white (every example above
     does this) — depth comes from stacking two off-white tones plus one
     saturated accent, not from heavy shadows/borders.
   - Body serif (Source Serif 4) + sans headings (Inter) — the "modern
     editorial" pairing Notion/Dense Discovery use, credible for lessons
     while staying fast/clean for UI chrome (buttons, tags, ad labels).
   - Body copy at 18-19px/1.6 line-height, measure capped near 68ch —
     every "excellent" example measured ran at or above 1.5 line-height,
     erring generous for dense/technical teaching content specifically.
   - A rail's contents styled IDENTICALLY to article content (same card
     style, radius, border) is NN/G's own explicit finding on this exact
     pattern: a rail that looks like an ad module gets ignored ("right-
     rail blindness"); one that looks editorial gets read.
   ---------------------------------------------------------------------- */

/* Sitewide fallback for the same tokens — Affiliate Card and Share are
   ordinary blocks usable anywhere (a shortcode inside a normal post, a
   block on a normal Page), not only inside .vf-teach below, so they need
   real values wherever they land. .vf-teach re-declares the identical
   set purely so a change to one is a change to both — not two palettes
   to keep in sync. */
:root {
	--vf-teach-bg: #FBF8F3;
	--vf-teach-surface: #FFFFFF;
	--vf-teach-surface-alt: #F3ECE0;
	--vf-teach-text: #2A2420;
	--vf-teach-text-muted: #6B6259;
	--vf-teach-accent: #C1552C;
	--vf-teach-accent-soft: #F0DCC9;
	--vf-teach-border: #E7DFD2;
	--vf-teach-font-body: Georgia, "Iowan Old Style", serif;
	--vf-teach-font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.vf-teach {
	--vf-teach-font-body: "Source Serif 4", Georgia, "Iowan Old Style", serif;
	--vf-teach-font-head: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	background: var(--vf-teach-bg);
	color: var(--vf-teach-text);
}

.vf-teach .vf-pb-section { background-color: var(--vf-teach-bg); }
.vf-teach .vf-pb-section__inner { color: var(--vf-teach-text); }

/* Reading column — fixed in ch units so the line length never balloons
   even when the ad rail is empty or collapsed (Smashing Magazine's own
   pattern: reserved rail space, not reflowed content). */
.vf-teach .vf-pb-columns--right-narrow > :first-child {
	max-width: 68ch;
}
@media (max-width: 1024px) {
	/* Every researched example collapses the rail below ~1000px rather
	   than squeezing it — stacked below the article, never beside it. */
	.vf-teach .vf-pb-columns--right-narrow { grid-template-columns: 1fr !important; }
}

/* Base typography for real article prose (dynamic_content's the_content()
   output — arbitrary post HTML, not individually styled blocks) */
.vf-teach h1, .vf-teach h2, .vf-teach h3, .vf-teach h4 {
	font-family: var(--vf-teach-font-head);
	color: var(--vf-teach-text);
	font-weight: 700;
	text-wrap: balance;
}
.vf-teach h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.15; margin: 0 0 24px; }
.vf-teach h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; color: var(--vf-teach-accent); margin: 48px 0 20px; }
.vf-teach h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.3; margin: 36px 0 14px; }

.vf-teach p, .vf-teach li, .vf-teach .vf-dynamic-excerpt {
	font-family: var(--vf-teach-font-body);
	font-size: 18px;
	line-height: 1.65;
	color: var(--vf-teach-text);
}
.vf-teach p { margin: 0 0 24px; }
.vf-teach ul, .vf-teach ol { margin: 0 0 24px; padding-left: 1.4em; }
.vf-teach a { color: var(--vf-teach-accent); text-decoration-color: var(--vf-teach-accent-soft); text-underline-offset: 3px; }
.vf-teach a:hover { text-decoration-color: currentColor; }

.vf-teach blockquote {
	margin: 32px 0;
	padding-left: 20px;
	border-left: 2px solid var(--vf-teach-accent);
	font-family: var(--vf-teach-font-head);
	font-size: 22px;
	font-style: normal;
	color: var(--vf-teach-text);
}

.vf-teach figure { margin: 32px 0; }
.vf-teach img { max-width: 100%; height: auto; border-radius: 12px; }
.vf-teach figcaption { font-family: var(--vf-teach-font-head); font-size: 14px; color: var(--vf-teach-text-muted); margin-top: 10px; }

.vf-teach code, .vf-teach pre {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	background: var(--vf-teach-surface-alt);
	border-radius: 6px;
}
.vf-teach code { padding: 2px 6px; font-size: 0.9em; }
.vf-teach pre { padding: 16px; overflow-x: auto; }
.vf-teach pre code { background: none; padding: 0; }

.vf-teach hr { border: none; border-top: 1px solid var(--vf-teach-border); margin: 48px 0; }

/* ---- Affiliate / Product Card (6.6) ------------------------------- */

.vf-aff-card-container { container-type: inline-size; }

.vf-aff-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--vf-teach-surface);
	border: 1px solid var(--vf-teach-border);
	border-radius: 14px;
	padding: 20px;
	font-family: var(--vf-teach-font-head);
}
/* Inline layout — image left, text right — once there's room for it
   (research: ~600-700px+ article column). A narrow sidebar rail stays
   the default vertical stack, matching the collapse-to-vertical logic
   every researched sidebar pattern uses at its own narrow width. Queries
   the WRAPPER's width (.vf-aff-card-container, set above), not the
   card's own — an element can't switch its own flex-direction off a
   query against itself. */
@container (min-width: 420px) {
	.vf-aff-card { flex-direction: row; align-items: flex-start; }
	.vf-aff-card__media { flex: 0 0 160px; }
}
.vf-aff-card__media {
	border-radius: 10px;
	overflow: hidden;
	background: var(--vf-teach-surface-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
}
.vf-aff-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.vf-aff-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.vf-aff-card__badge {
	align-self: flex-start;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--vf-teach-accent);
	background: var(--vf-teach-accent-soft);
	padding: 3px 10px;
	border-radius: 999px;
}
.vf-aff-card__title { font-size: 18px; font-weight: 600; color: var(--vf-teach-text); margin: 0; }
.vf-aff-card__value { font-size: 15px; color: var(--vf-teach-text-muted); margin: 0; font-family: var(--vf-teach-font-body); }
.vf-aff-card__meta { display: flex; align-items: center; gap: 12px; }
.vf-aff-card__rating { color: var(--vf-teach-accent); letter-spacing: 1px; }
.vf-aff-card__price { font-size: 16px; font-weight: 600; color: var(--vf-teach-text); }
.vf-aff-card__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--vf-teach-accent);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: transform 0.2s ease;
}
.vf-aff-card__cta:hover { transform: translateY(-1px); color: #fff; }
.vf-aff-card__disclosure { font-size: 12px; color: var(--vf-teach-text-muted); margin: 0; font-family: var(--vf-teach-font-body); }

/* ---- Share block (6.6) --------------------------------------------- */

.vf-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-family: var(--vf-teach-font-head);
	margin: 32px 0;
}
.vf-share__label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vf-teach-text-muted); }
.vf-share__buttons { display: flex; gap: 8px; }
.vf-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--vf-teach-surface-alt);
	color: var(--vf-teach-text);
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.vf-share__btn:hover { background: var(--vf-teach-accent); color: #fff; }
.vf-share__btn--copy.is-copied { background: var(--vf-teach-accent); color: #fff; width: auto; padding: 0 12px; font-size: 12px; font-weight: 600; }

/* ---- AdSense in-article, warm-palette match ------------------------ */

.vf-teach .vf-ads-slot--in-article {
	background: var(--vf-teach-surface-alt);
	border-radius: 12px;
	padding: 12px;
}

/* ---- Warm archive listings (6.6.6) ----------------------------------
   Field Notes archive (home.php + archive.php's category/tag/date/author
   variants) and the Shop archive (archive-product.php, and every product
   category/tag archive via the same template) — restyled to match the
   .vf-teach palette above via a scoping class rather than editing
   style.css's shared card/grid rules directly, so the existing grid,
   spacing, and hover behavior stay exactly as built; only color and type
   change. See vf_teach_is_warm_archive() in inc/teaching-layout.php for
   why these pages need the same force-light treatment as the templates
   they feed into. Selectors here match the specificity of the rules
   they override rather than exceeding it — this stylesheet is enqueued
   as a dependent of glasspane-style/glasspane-page-builder, so it always
   loads after both and wins any tie, the same relationship the .vf-teach
   rules above already have with page-builder.css. */

.vf-teach-archive { background: var(--vf-teach-bg); }

.vf-teach-archive .vf-section__title {
	font-family: var(--vf-teach-font-head);
	color: var(--vf-teach-text);
}
.vf-teach-archive .vf-section__eyebrow,
.vf-teach-archive .vf-section__desc {
	font-family: var(--vf-teach-font-head);
	color: var(--vf-teach-text-muted);
}

/* Field Notes cards */
.vf-teach-archive .vf-note-card {
	background: var(--vf-teach-surface);
	border: 1px solid var(--vf-teach-border);
	box-shadow: none;
}
.vf-teach-archive .vf-note-card__media { background: var(--vf-teach-surface-alt); }
.vf-teach-archive .vf-note-card__category { color: var(--vf-teach-accent); }
.vf-teach-archive .vf-note-card__title {
	font-family: var(--vf-teach-font-head);
	color: var(--vf-teach-text);
}
.vf-teach-archive .vf-note-card__excerpt {
	font-family: var(--vf-teach-font-body);
	color: var(--vf-teach-text-muted);
}

/* Shop filter pills (assets/js/shop-filter.js, inserted client-side) */
.vf-teach-archive .vf-shop-filter {
	background: var(--vf-teach-surface);
	border: 1px solid var(--vf-teach-border);
}
.vf-teach-archive .vf-shop-filter__pill {
	font-family: var(--vf-teach-font-head);
	color: var(--vf-teach-text-muted);
}
.vf-teach-archive .vf-shop-filter__pill.is-active {
	background: var(--vf-teach-accent);
	color: #fff;
}

/* Shop product cards (WooCommerce's own markup/classes, restyled) */
.vf-teach-archive ul.products li.product {
	background: var(--vf-teach-surface);
	border: 1px solid var(--vf-teach-border);
	box-shadow: none;
}
.vf-teach-archive .woocommerce-loop-product__title {
	font-family: var(--vf-teach-font-head);
	color: var(--vf-teach-text);
}
.vf-teach-archive ul.products li.product .price {
	font-family: var(--vf-teach-font-head);
	color: var(--vf-teach-accent);
}
.vf-teach-archive span.onsale { background: var(--vf-teach-accent); }
.vf-teach-archive .vf-product-type-note { color: var(--vf-teach-text-muted); }