/* Specs for a Self: component styles, from Specs for a Self Design System v1.0.
   Colors and fonts come from theme.json, so changing them there changes them here. */

:root {
	--sfas-surface: var(--wp--preset--color--surface);
	--sfas-raised: var(--wp--preset--color--surface-raised);
	--sfas-sunken: var(--wp--preset--color--surface-sunken);
	--sfas-rule: var(--wp--preset--color--rule);
	--sfas-rule-strong: var(--wp--preset--color--rule-strong);
	--sfas-ink: var(--wp--preset--color--ink);
	--sfas-muted: var(--wp--preset--color--ink-muted);
	--sfas-inverse: var(--wp--preset--color--ink-inverse);
	--sfas-blue: var(--wp--preset--color--blue);
	--sfas-blue-deep: var(--wp--preset--color--blue-deep);
	--sfas-berry: var(--wp--preset--color--berry);
	--sfas-moss: var(--wp--preset--color--moss);
	--sfas-moss-text: var(--wp--preset--color--moss-text);
	--sfas-marigold: var(--wp--preset--color--marigold);
	--sfas-marigold-text: var(--wp--preset--color--marigold-text);
	--sfas-highlight: var(--wp--preset--color--highlight);
	--sfas-tape: var(--wp--preset--color--tape);
	--sfas-display: var(--wp--preset--font-family--display);
	--sfas-sans: var(--wp--preset--font-family--sans);
	--sfas-mono: var(--wp--preset--font-family--mono);
	--sfas-hand: var(--wp--preset--font-family--hand);
}

:where(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--sfas-blue); outline-offset: 2px; }
mark, .sfas-mark { background: var(--sfas-highlight); color: var(--sfas-ink); padding: 0 2px; }
figcaption { font-family: var(--sfas-mono); }

/* Site header */
.sfas-site-header { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); border-bottom: 1px solid var(--sfas-rule); }
.sfas-site-header__inner { max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto; }
.sfas-wordmark { gap: 12px; }
.sfas-wordmark .wp-block-site-title { margin: 0; }
.sfas-wordmark__tag { margin: 0; font-family: var(--sfas-mono); font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--sfas-ink); padding: 2px 6px; background: var(--sfas-raised); color: var(--sfas-ink); }
.sfas-site-header .wp-block-navigation a { text-decoration: none; color: var(--sfas-ink); }
.sfas-site-header .wp-block-navigation a:hover { color: var(--sfas-blue); text-decoration: underline; text-underline-offset: 4px; }

/* Site footer */
.sfas-site-footer { margin-top: var(--wp--preset--spacing--90); padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--80); border-top: 1px solid var(--sfas-ink); }
.sfas-site-footer p { font-family: var(--sfas-mono); font-size: 13px; line-height: 20px; color: var(--sfas-muted); }

/* Post header */
.sfas-post-header { margin-bottom: var(--wp--preset--spacing--80); }
.sfas-post-header .wp-block-post-title { font-size: var(--wp--preset--font-size--display); line-height: 1.07; margin-top: 12px; margin-bottom: 16px; }
.sfas-post-header .wp-block-post-date { border-top: 1px solid var(--sfas-rule); padding-top: 12px; }

/* Post list */
.sfas-post-list .wp-block-post { border-bottom: 1px solid var(--sfas-rule); padding-bottom: var(--wp--preset--spacing--60); }
.sfas-post-list .wp-block-post-title { font-size: var(--wp--preset--font-size--heading-2); margin: 8px 0 12px; }

/* Typed label (paragraph style) */
p.is-style-typed-label { font-family: var(--sfas-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sfas-berry); }

/* Specimen label (table style) */
.wp-block-table.is-style-specimen-label { display: inline-flex; flex-direction: column-reverse; background: var(--sfas-raised); border: 1px solid var(--sfas-ink); box-shadow: 0 1px 0 var(--sfas-rule); padding: 12px 16px; width: fit-content; max-width: 100%; box-sizing: border-box; margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; margin-right: auto !important; }
.wp-block-table.is-style-specimen-label table { border-collapse: collapse; width: auto; font-family: var(--sfas-mono); font-size: 13px; line-height: 20px; }
.wp-block-table.is-style-specimen-label td, .wp-block-table.is-style-specimen-label th { border: 0; padding: 2px 16px 2px 0; vertical-align: top; }
.wp-block-table.is-style-specimen-label td:first-child { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sfas-berry); }
.wp-block-table.is-style-specimen-label figcaption, .wp-block-table.is-style-specimen-label .wp-element-caption { margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--sfas-ink); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sfas-ink); text-align: left; }

/* Spec panel (group style) */
.wp-block-group.is-style-spec-panel { background: var(--sfas-raised); border: 1px solid var(--sfas-ink); padding: 24px; }
.wp-block-group.is-style-spec-panel > p:first-child { margin: 0 0 8px; padding-bottom: 12px; border-bottom: 1px solid var(--sfas-ink); font-family: var(--sfas-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.wp-block-group.is-style-spec-panel ol { list-style: none; counter-reset: spec; margin: 0; padding: 0; }
.wp-block-group.is-style-spec-panel ol li { counter-increment: spec; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sfas-rule); line-height: 28px; }
.wp-block-group.is-style-spec-panel ol li:last-child { border-bottom: 0; }
.wp-block-group.is-style-spec-panel ol li::before { content: counter(spec, decimal-leading-zero); font-family: var(--sfas-mono); font-size: 13px; line-height: 28px; color: var(--sfas-berry); }

/* Figure well (image style) */
.wp-block-image.is-style-specimen-well img { background: var(--sfas-sunken); border: 1px solid var(--sfas-rule); padding: 24px; box-sizing: border-box; }
.wp-block-image figcaption, .wp-element-caption { text-align: left; }
@media (max-width: 600px) { .wp-block-image.is-style-specimen-well img { padding: 12px; } }

/* Stat tile (group style) */
.wp-block-group.is-style-stat-tile { background: var(--sfas-raised); border: 1px solid var(--sfas-ink); box-shadow: 0 1px 0 var(--sfas-rule); padding: 24px; }
.wp-block-group.is-style-stat-tile > * { margin: 0; }
.wp-block-group.is-style-stat-tile > p:nth-child(1) { font-family: var(--sfas-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sfas-berry); margin-bottom: 8px; }
.wp-block-group.is-style-stat-tile > p:nth-child(2) { font-family: var(--sfas-display); font-size: 52px; line-height: 56px; font-weight: 800; color: var(--sfas-ink); margin-bottom: 8px; }
.wp-block-group.is-style-stat-tile > p:nth-child(3) { font-size: 16px; line-height: 24px; }

/* Field note and In focus (group styles) */
.wp-block-group.is-style-field-note, .wp-block-group.is-style-in-focus { background: var(--sfas-raised); border: 1px solid var(--sfas-rule-strong); border-top: 4px solid var(--sfas-marigold); padding: 16px 24px; }
.wp-block-group.is-style-in-focus { border-top-color: var(--sfas-blue); }
.wp-block-group.is-style-field-note > *, .wp-block-group.is-style-in-focus > * { margin: 0; font-size: 16px; line-height: 24px; }
.wp-block-group.is-style-field-note > p:first-child, .wp-block-group.is-style-in-focus > p:first-child { font-family: var(--sfas-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sfas-marigold-text); margin-bottom: 8px; }
.wp-block-group.is-style-in-focus > p:first-child { color: var(--sfas-blue); }

/* Taped note (quote styles). v1.0.2, 2026-10-04: the design system v1.1 look Joyce picked, a pale yellow note taped across the top. #SFAS-58417 */
.wp-block-quote.is-style-taped-note, .wp-block-quote.is-style-taped-note-right { position: relative; width: fit-content; max-width: min(560px, 100%); margin: var(--wp--preset--spacing--70) auto !important; padding: 30px 22px 22px; background: #FBF3CF; border: 0; box-shadow: 0 3px 0 var(--sfas-rule); transform: rotate(-1.2deg); text-align: center; font-style: normal; }
.wp-block-quote.is-style-taped-note-right { transform: rotate(1.2deg); }
.wp-block-quote.is-style-taped-note::before, .wp-block-quote.is-style-taped-note-right::before { content: ""; position: absolute; top: -10px; left: 50%; width: 110px; height: 24px; margin-left: -55px; transform: rotate(2deg); background: #F2D675D9; }
.wp-block-quote.is-style-taped-note-right::before { transform: rotate(-2deg); }
.wp-block-quote.is-style-taped-note p, .wp-block-quote.is-style-taped-note-right p { font-family: var(--sfas-hand); font-style: normal; font-size: 22px; line-height: 35px; color: #3A3320; margin: 0; }
.wp-block-quote.is-style-taped-note cite, .wp-block-quote.is-style-taped-note-right cite { display: block; margin-top: 8px; font-family: var(--sfas-mono); font-style: normal; font-size: 13px; line-height: 20px; letter-spacing: 0.04em; text-transform: none; color: #3A3320; text-align: center; }
@media (max-width: 600px) {
	.wp-block-quote.is-style-taped-note, .wp-block-quote.is-style-taped-note-right { padding: 26px 18px 18px; }
	.wp-block-quote.is-style-taped-note p, .wp-block-quote.is-style-taped-note-right p { font-size: 20px; line-height: 32px; }
}

/* Status tags (paragraph styles) */
p.is-style-tag-building, p.is-style-tag-doing, p.is-style-tag-both { display: flex; width: fit-content; box-sizing: border-box; margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; margin-right: auto !important; align-items: center; gap: 4px; font-family: var(--sfas-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--sfas-rule-strong); border-radius: 2px; background: var(--sfas-raised); }
p.is-style-tag-building::before, p.is-style-tag-doing::before, p.is-style-tag-both::before { content: ""; width: 8px; height: 8px; display: inline-block; }
p.is-style-tag-building { color: var(--sfas-blue); }
p.is-style-tag-building::before { background: var(--sfas-blue); }
p.is-style-tag-doing { color: var(--sfas-moss-text); }
p.is-style-tag-doing::before { background: var(--sfas-moss); }
p.is-style-tag-both { color: var(--sfas-marigold-text); }
p.is-style-tag-both::before { background: var(--sfas-marigold); }

/* Signup box (group style). Styles whatever form sits inside, including the Reach form. */
.wp-block-group.is-style-signup { background: var(--sfas-raised); border: 1px solid var(--sfas-ink); padding: 24px; margin-top: var(--wp--preset--spacing--80); }
.wp-block-group.is-style-signup h2, .wp-block-group.is-style-signup h3 { font-size: 24px; line-height: 30px; margin: 0 0 8px; }
.wp-block-group.is-style-signup p { font-size: 16px; line-height: 24px; margin: 0 0 12px; }
.wp-block-group.is-style-signup input[type="email"], .wp-block-group.is-style-signup input[type="text"] { min-height: 44px; padding: 0 12px; font-family: var(--sfas-sans); font-size: 16px; color: var(--sfas-ink); background: var(--sfas-raised); border: 1px solid var(--sfas-rule-strong); border-radius: 2px; box-sizing: border-box; }
.wp-block-group.is-style-signup button, .wp-block-group.is-style-signup input[type="submit"] { min-height: 44px; padding: 0 24px; font-family: var(--sfas-sans); font-size: 16px; font-weight: 500; color: var(--sfas-inverse); background: var(--sfas-blue); border: 1px solid var(--sfas-blue); border-radius: 2px; cursor: pointer; }
.wp-block-group.is-style-signup button:hover, .wp-block-group.is-style-signup input[type="submit"]:hover { background: var(--sfas-blue-deep); border-color: var(--sfas-blue-deep); }
.wp-block-group.is-style-signup .sfas-fine { font-family: var(--sfas-mono); font-size: 12px; line-height: 18px; color: var(--sfas-muted); margin: 0; }

/* Inline code */
:not(pre) > code { font-family: var(--sfas-mono); font-size: 0.85em; background: var(--sfas-sunken); padding: 1px 5px; }
.wp-block-code { overflow-x: auto; }
.wp-block-code code { background: none; padding: 0; }

/* Custom HTML toys: give them the figure well */
.sfas-toy { background: var(--sfas-sunken); border: 1px solid var(--sfas-rule); padding: 24px; }

.sfas-site-footer .wp-block-site-title { font-family: var(--sfas-display); font-size: 22px; line-height: 28px; font-weight: 700; color: var(--sfas-ink); margin: 0; }
.sfas-site-footer .wp-block-site-title a { color: var(--sfas-ink); text-decoration: none; }

.is-layout-flex > p.is-style-tag-building, .is-layout-flex > p.is-style-tag-doing, .is-layout-flex > p.is-style-tag-both { margin: 0 !important; }

/* Featured image above the post body (1.0.1) */
.sfas-featured .wp-block-post-featured-image { margin-top: 0; margin-bottom: var(--wp--preset--spacing--80); }
.sfas-featured .wp-block-post-featured-image img { display: block; width: 100%; height: auto; border: 1px solid var(--sfas-rule); }
.sfas-featured:empty, .sfas-featured:not(:has(img)) { display: none; }