/**
 * Groundcraft Forge — shared base stylesheet.
 *
 * Structural layout + element skeletons live here (one cacheable file for the
 * whole site). Per-node overrides live in the compiled post-{id}.css. Colours
 * come exclusively from the --gf-* token bridge so brand re-tints flow through.
 */

/* ---- Layout primitive: container -------------------------------------- */
.gf-el { box-sizing: border-box; }
.gf-el *, .gf-el *::before, .gf-el *::after { box-sizing: inherit; }

.gf-container { display: block; }
.gf-container[data-layout="flex"] { display: flex; gap: var(--gf-gap, 0); }
.gf-container[data-layout="grid"] {
	display: grid;
	grid-template-columns: repeat(var(--gf-cols, 1), minmax(0, 1fr));
	gap: var(--gf-gap, 0);
}
/* A flex/grid item must never exceed its container. By default `flex-basis:auto`
 * resolves to the item's max-content width, so a wide descendant — a
 * `max-content` marquee track, an overflowing table, a long unbroken code line —
 * blows the item (and the whole page) out past the viewport, defeating any
 * `overflow:hidden` a descendant sets. `min-width:0` alone doesn't force the
 * shrink when the intrinsic content is explicitly `max-content`; a hard
 * `max-width:100%` cap does, and is safe for every flex/grid item (equal-share
 * and growing items are already ≤ 100%; naturally-wide media becomes
 * responsive). Pair it with `min-width:0` — the canonical flex-shrink enabler. */
.gf-container[data-layout="flex"] > .gf-el,
.gf-container[data-layout="grid"] > .gf-el { min-width: 0; max-width: 100%; }
.gf-container[data-dir="row"] { flex-direction: row; }
.gf-container[data-dir="column"] { flex-direction: column; }
.gf-container[data-wrap="wrap"] { flex-wrap: wrap; }
.gf-container[data-wrap="nowrap"] { flex-wrap: nowrap; }
.gf-container[data-align="start"] { align-items: flex-start; }
.gf-container[data-align="center"] { align-items: center; }
.gf-container[data-align="end"] { align-items: flex-end; }
.gf-container[data-align="stretch"] { align-items: stretch; }
.gf-container[data-justify="start"] { justify-content: flex-start; }
.gf-container[data-justify="center"] { justify-content: center; }
.gf-container[data-justify="end"] { justify-content: flex-end; }
.gf-container[data-justify="between"] { justify-content: space-between; }
.gf-container[data-justify="around"] { justify-content: space-around; }

/* Widths — centred content measures with a wide + full escape. */
.gf-container[data-width="content"],
.gf-container[data-width="wide"],
.gf-container[data-width="narrow"] { margin-inline: auto; width: 100%; }
.gf-container[data-width="narrow"] { max-width: 720px; }
.gf-container[data-width="content"] { max-width: 1200px; }
.gf-container[data-width="wide"] { max-width: 1440px; }
.gf-container[data-width="full"] { max-width: none; }

.gf-container[data-padded="1"] { padding-block: clamp(2.5rem, 6vw, 6rem); padding-inline: clamp(1rem, 4vw, 2.5rem); }

.gf-container__link { color: inherit; text-decoration: none; display: contents; }

/* ---- Heading ---------------------------------------------------------- */
.gf-heading[data-align="left"] { text-align: left; }
.gf-heading[data-align="center"] { text-align: center; }
.gf-heading[data-align="right"] { text-align: right; }
.gf-heading__eyebrow {
	display: inline-block;
	font-family: var(--gf-font-mono, monospace);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gf-color-brand-strong, #4f7a1f);
	margin-bottom: 0.75rem;
}
/* Headings INHERIT their colour rather than declaring one.
 *
 * A hard `color: ink` here looks right on a light page and wrong everywhere
 * else: a heading inside a dark section renders dark-on-dark, and the section
 * had already said what colour its text should be. Inheritance is also what an
 * imported page expects — its own stylesheet sets the colour on the section and
 * lets the heading follow. Where a specific colour IS wanted, the document says
 * so per node and the compiled CSS wins. */
.gf-heading__title { margin: 0; font-family: var(--gf-font-display, sans-serif); line-height: 1.1; color: inherit; }
.gf-heading__title a { color: inherit; text-decoration: none; }

/* ---- Text / prose ----------------------------------------------------- */
.gf-prose { color: var(--gf-color-ink-2, #46514a); line-height: 1.7; }
.gf-prose[data-align="center"] { text-align: center; }
.gf-prose[data-align="right"] { text-align: right; }
.gf-prose[data-align="justify"] { text-align: justify; }
.gf-prose > :first-child { margin-top: 0; }
.gf-prose > :last-child { margin-bottom: 0; }
.gf-prose a { color: var(--gf-color-accent, #5fae6e); }

/* ---- Image ------------------------------------------------------------ */
.gf-image { margin: 0; display: block; }
.gf-image__img { display: block; max-width: 100%; height: auto; }
.gf-image[data-ratio="1"] .gf-image__img { aspect-ratio: var(--gf-ratio); width: 100%; height: auto; object-fit: var(--gf-fit, cover); }
.gf-image[data-fit="contain"] .gf-image__img { object-fit: contain; }
.gf-image[data-rounded="sm"] .gf-image__img { border-radius: var(--gf-radius-sm, 10px); }
.gf-image[data-rounded="md"] .gf-image__img { border-radius: var(--gf-radius-md, 16px); }
.gf-image[data-rounded="lg"] .gf-image__img { border-radius: var(--gf-radius-lg, 22px); }
.gf-image[data-rounded="pill"] .gf-image__img { border-radius: var(--gf-radius-pill, 999px); }
.gf-image figcaption { font-size: 0.875rem; color: var(--gf-color-muted, #71807a); margin-top: 0.5rem; text-align: center; }

/* ---- Button ----------------------------------------------------------- */
.gf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--gf-font-body, sans-serif);
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	border-radius: var(--gf-radius-pill, 999px);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.gf-button[data-size="sm"] { padding: 0.55rem 1.1rem; font-size: 0.8125rem; }
.gf-button[data-size="md"] { padding: 0.8rem 1.6rem; font-size: 0.9375rem; }
.gf-button[data-size="lg"] { padding: 1rem 2rem; font-size: 1.0625rem; }
.gf-button[data-full="1"] { display: flex; width: 100%; }
.gf-button[data-variant="primary"] { background: var(--gf-color-brand, #9bd45f); color: var(--gf-color-brand-ink, #1e3209); }
.gf-button[data-variant="primary"]:hover { background: var(--gf-color-brand-strong, #4f7a1f); color: var(--gf-color-on-dark, #f7fffd); }
.gf-button[data-variant="secondary"] { background: var(--gf-color-ink, #15201a); color: var(--gf-color-on-dark, #f7fffd); }
.gf-button[data-variant="secondary"]:hover { background: var(--gf-color-ink-2, #46514a); }
.gf-button[data-variant="ghost"] { background: transparent; color: var(--gf-color-ink, #15201a); border-color: var(--gf-color-border-strong, #cfd4c6); }
.gf-button[data-variant="ghost"]:hover { border-color: var(--gf-color-brand-strong, #4f7a1f); color: var(--gf-color-brand-strong, #4f7a1f); }
.gf-button[data-variant="link"] { background: transparent; color: var(--gf-color-accent, #5fae6e); padding-inline: 0; border-radius: 0; }
.gf-button[data-variant="link"]:hover { text-decoration: underline; }
.gf-button__icon { display: inline-flex; }
.gf-button__icon svg { width: 1.15em; height: 1.15em; }

/* ---- Legacy (imported, unconverted) ----------------------------------- */
.gf-legacy__badge {
	display: inline-block;
	font: 600 11px/1 var(--gf-font-mono, monospace);
	background: var(--gf-color-brand-soft, #eef7df);
	color: var(--gf-color-brand-strong, #4f7a1f);
	padding: 4px 8px; border-radius: 6px; margin-bottom: 8px;
}

/* ---- Editor affordances (only present in the canvas) ------------------ */
.gf-empty {
	display: block; text-align: center; padding: 2rem;
	color: var(--gf-color-muted, #71807a);
	border: 1.5px dashed var(--gf-color-border-strong, #cfd4c6);
	border-radius: var(--gf-radius-md, 16px);
	font: 500 13px/1.4 var(--gf-font-body, sans-serif);
}
.gf-image__placeholder {
	display: flex; align-items: center; justify-content: center; min-height: 160px;
	background: var(--gf-color-surface-2, #f1f3ec); color: var(--gf-color-muted, #71807a);
	border-radius: var(--gf-radius-md, 16px); font: 500 13px/1 var(--gf-font-body, sans-serif);
}

@media (prefers-reduced-motion: reduce) {
	.gf-button { transition: none; }
}