/*
 * Page-level layout classes for hand-authored templates (CLAUDE.md §3, rule 2).
 *
 * Static blocks only render styles the editor baked into their HTML at save
 * time. Hand-written template files never pass through the editor, so spacing
 * lives here as semantic classes instead of inline styles — token variables
 * only, versioned with the code.
 */

/* Guard against stray horizontal overflow on small screens (decorative
   circles, wide/aligned media). overflow-x: clip does NOT create a scroll
   container, so position:sticky, fixed elements and the motion layer stay
   unaffected — unlike overflow:hidden. */
html {
	overflow-x: clip;
}

/* Full-bleed background bands must touch. The post-content flow layout adds a
   block-gap (margin-block-start) between top-level children; between two bands
   of different colour that gap reveals a strip of the page background — the
   white line where section colours change. Each band carries its own
   padding-block, so zero the outer top margin and let them sit flush. */
.entry-content > .doryo-section,
.entry-content > .doryo-hero-geo,
.entry-content > .doryo-about {
	margin-block-start: 0;
}

/* Title area at the top of a page/archive (heading, terms, description). */
.doryo-page-head {
	padding-block-start: var(--wp--preset--spacing--6-xl);
	padding-block-end: var(--wp--preset--spacing--4-xl);
}

/* Main content area below the header/featured image of a single view. */
.doryo-page-body {
	padding-block-start: var(--wp--preset--spacing--4-xl);
	padding-block-end: var(--wp--preset--spacing--7-xl);
}

/* The footer lifts -6xl over the preceding content for the round transition,
   so the last content section (and archives) needs extra bottom room — else
   its content (form submit, CTA button, pagination) sits on the footer's
   rounded top. 9xl − 6xl overlap ≈ a comfortable clear gap. */
.doryo-archive,
.entry-content > .doryo-section:last-of-type {
	padding-block-end: var(--wp--preset--spacing--10-xl);
}

/* The archive main relies on WP's constrained layout, which centers content
   but adds no edge padding. Its project grid is align:wide, so at any viewport
   below wide-size it fills 100% and sits flush against the screen edges. Mirror
   the section container gutter so archive/taxonomy content keeps its margins. */
.doryo-archive {
	padding-inline: var(--wp--custom--container--padding-mobile);
}

@media (min-width: 782px) {
	.doryo-archive {
		padding-inline: var(--wp--custom--container--padding-desktop);
	}
}

/* Footer template part. */
.doryo-footer {
	padding-block-start: var(--wp--preset--spacing--7-xl);
	padding-block-end: var(--wp--preset--spacing--7-xl);
}

/* Inline SVG icons (inc/icons.php) — inherit color/size from context. */
.doryo-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

/* Section eyebrow — the mono/brand kicker above a section heading (V2 head
   pattern: eyebrow → heading → intro). Reused across sections. */
.doryo-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--brand);
}

/* On dark surfaces the brand blue lacks contrast — use the on-brand muted. */
.doryo-section--bg-dark .doryo-eyebrow {
	color: var(--wp--preset--color--fg-on-brand-muted);
}

/* Mobile safety: let long German compounds break instead of overflowing narrow
   screens (only acts when a word would actually overflow). */
h1,
h2,
h3,
h4 {
	overflow-wrap: break-word;
}