s
(block-editor groups, legacy pasted markup) is NOT a direct child, so the
`> * + *` flow can't reach it — it must KEEP its UA margins or it collapses
into an unspaced block. (The earlier `.kma-prose :where(...)` matched at any
depth and zeroed that nested content with nothing re-adding the gaps —
headings jammed against paragraphs. Scoping the reset to `>` fixes it.) */
.kma-prose > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, blockquote, figure, table, pre, hr, address) { margin: 0; }
.kma-prose > * + * { margin-top: 1.15rem; }
.kma-prose > h2 { margin-top: 2.6rem; }
.kma-prose > h3 { margin-top: 1.9rem; }
.kma-prose > h4, .kma-prose > h5, .kma-prose > h6 { margin-top: 1.6rem; }
/* ---- Headings -------------------------------------------------------------
Display face comes from the family heading role (h1–h4 on the scope root);
re-asserted here so prose headings hold up even under a family that missed
a level (locations/home only covered h1–h3). */
.kma-prose h2, .kma-prose h3, .kma-prose h4, .kma-prose h5 {
font-family: var(--font-display, 'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', sans-serif);
color: var(--ink2, #221E1F);
line-height: 1.14;
text-wrap: balance;
margin-bottom: 0;
}
.kma-prose h2 { font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 800; scroll-margin-top: 1rem; }
.kma-prose h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 700; scroll-margin-top: 1rem; }
.kma-prose h4 { font-size: 1.12rem; font-weight: 700; scroll-margin-top: 1rem; }
.kma-prose h5 { font-size: 1rem; font-weight: 700; }
.kma-prose h6 {
font-family: var(--font-mono, 'Space Mono', monospace);
font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--muted, #5b6168);
}
/* ---- Body text ------------------------------------------------------------ */
.kma-prose p { color: var(--prose, #33373b); text-wrap: pretty; }
.kma-prose li, .kma-prose blockquote, .kma-prose figcaption, .kma-prose dd { text-wrap: pretty; }
.kma-prose strong, .kma-prose b { color: var(--ink2, #221E1F); font-weight: 700; }
.kma-prose small { font-size: .85em; }
.kma-prose mark { background: rgba(147, 200, 71, .28); color: var(--ink2, #221E1F); padding: .05em .15em; }
.kma-prose sub, .kma-prose sup { font-size: .72em; line-height: 0; } /* no line-height jump */
.kma-prose abbr[title] { text-decoration: underline dotted; text-underline-offset: .15em; cursor: help; }
.kma-prose address { font-style: normal; }
/* Lead paragraph — only when the content genuinely OPENS with a paragraph
(:first-child, not :first-of-type: an image/heading first = no stray lede) */
.kma-prose > p:first-child { font-size: 1.25rem; line-height: 1.55; color: var(--ink2, #221E1F); }
/* ---- Links ----------------------------------------------------------------
Underlined (color alone is not affordance), from-font thickness, thickens
on hover; long pasted URLs may break anywhere. */
.kma-prose a {
color: var(--g-cta, #46731c);
font-weight: 600;
text-decoration-line: underline; /* re-assert vs Tailwind preflight a{text-decoration:inherit} */
text-underline-offset: .15em;
text-decoration-thickness: from-font;
overflow-wrap: anywhere;
}
.kma-prose a:hover { text-decoration-thickness: 2px; }
.kma-prose a:focus-visible { outline: 3px solid var(--g-cta, #46731c); outline-offset: 2px; }
/* ---- Lists (3 marker levels; markers re-asserted vs Tailwind preflight) -- */
.kma-prose ul { list-style: disc; padding-left: 1.4rem; }
.kma-prose ol { list-style: decimal; padding-left: 1.4rem; }
.kma-prose ul ul { list-style: circle; }
.kma-prose ul ul ul { list-style: square; }
.kma-prose ol ol { list-style: lower-alpha; }
.kma-prose ol ol ol { list-style: lower-roman; }
.kma-prose li { margin-top: .5rem; }
.kma-prose li > ul, .kma-prose li > ol { margin-top: .5rem; }
.kma-prose li > p { margin-top: .5rem; }
.kma-prose li > p:first-child { margin-top: 0; }
.kma-prose ul > li::marker { color: var(--g, #76a236); }
.kma-prose ol > li::marker {
color: var(--g-cta, #46731c);
font-family: var(--font-mono, 'Space Mono', monospace);
font-weight: 700;
}
.kma-prose dl { margin: 0; }
.kma-prose dt { font-weight: 700; color: var(--ink2, #221E1F); }
.kma-prose dd { margin: .3rem 0 0 1.4rem; }
.kma-prose dd + dt { margin-top: .8rem; }
/* Gravity Forms renders INSIDE the prose (contact page + legacy suburb pages):
its legacy markup is ul.gform_fields > li — undo the content-list styling
so fields never grow bullets/indents. Field visuals live in kma-page.css. */
.kma-prose .gform_wrapper ul, .kma-prose .gform_wrapper ol { list-style: none; padding: 0; }
.kma-prose .gform_wrapper li { margin-top: 0; }
/* (0,3,1): out-specifies GF's own legacy `body .gform_legacy_markup_wrapper ul
li.gfield { margin-top: 16px }` (0,2,3), which otherwise stacks onto the
grid gap and doubles the field spacing. */
.kma-prose .gform_wrapper .gform_fields > li { margin-top: 0; }
.kma-prose .gform_wrapper ul > li::marker, .kma-prose .gform_wrapper ol > li::marker { content: none; }
/* ---- Blockquote ----------------------------------------------------------- */
.kma-prose blockquote {
margin: 1.8rem 0 0;
padding: 1rem 1.4rem;
border-left: 4px solid var(--g, #76a236);
background: var(--mist, #f4f6ef);
color: var(--ink2, #221E1F);
font-size: 1.05rem;
}
.kma-prose blockquote > * + * { margin-top: .8rem; }
.kma-prose blockquote p { color: var(--ink2, #221E1F); }
.kma-prose blockquote cite, .kma-prose blockquote footer {
display: block;
font-family: var(--font-mono, 'Space Mono', monospace);
font-style: normal;
font-size: .76rem;
color: var(--muted, #5b6168);
}
/* ---- Images / figures / WP alignment classes ----------------------------- */
.kma-prose img { max-width: 100%; height: auto; }
.kma-prose img, .kma-prose figure { margin: 1.8rem 0 0; }
.kma-prose figure > img, .kma-prose figure > a > img { margin: 0; } /* figure owns the rhythm */
.kma-prose figure img { border: 1px solid var(--line, #e1e5da); }
.kma-prose figure a img { border: 0; } /* linked images (legacy CTA buttons) are UI, not photos */
.kma-prose figcaption, .kma-prose .wp-caption-text {
font-family: var(--font-mono, 'Space Mono', monospace);
font-size: .76rem;
color: var(--muted, #5b6168);
margin-top: .5rem;
}
/* Classic-editor + block alignments (legacy content uses alignnone/aligncenter) */
.kma-prose .alignnone { margin-left: 0; margin-right: 0; }
/* text-align covers the linked-image case: wp-block-library makes the
an
inline-block, so margin-auto on the img alone can't centre it. */
.kma-prose .aligncenter, .kma-prose img.aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.kma-prose figure.aligncenter img { margin-left: auto; margin-right: auto; display: block; }
.kma-prose figure.aligncenter a img { display: inline-block; }
.kma-prose .alignleft { float: left; max-width: 50%; margin: .35rem 1.4rem .9rem 0; }
.kma-prose .alignright { float: right; max-width: 50%; margin: .35rem 0 .9rem 1.4rem; }
.kma-prose .wp-caption { max-width: 100%; background: transparent; }
.kma-prose .wp-block-image { margin: 1.8rem 0 0; }
.kma-prose .wp-block-image figure { margin: 0; }
/* ---- Tables ---------------------------------------------------------------
inc/prose.php wraps every content table in .kma-prose__scroll so wide
tables scroll instead of breaking the page on phones. The region is
keyboard-focusable (tabindex=0 + role=region + aria-label in PHP). */
.kma-prose__scroll {
overflow-x: auto;
overscroll-behavior-x: contain;
margin-top: 1.8rem;
max-width: 100%;
}
.kma-prose__scroll:focus-visible { outline: 3px solid var(--g-cta, #46731c); outline-offset: 2px; }
.kma-prose__scroll > table { margin-top: 0; min-width: 100%; }
.kma-prose table {
width: 100%;
border-collapse: collapse;
margin-top: 1.8rem;
font-size: .98rem;
line-height: 1.5;
}
.kma-prose caption {
caption-side: top;
text-align: left;
font-family: var(--font-mono, 'Space Mono', monospace);
font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--muted, #5b6168);
padding-bottom: .55rem;
}
.kma-prose th, .kma-prose td {
padding: .7rem .85rem;
border: 1px solid var(--line2, #d3dac8);
text-align: left;
vertical-align: top;
}
.kma-prose thead th {
background: var(--ink2, #221E1F);
color: #fff;
font-family: var(--font-display, 'Barlow Condensed', sans-serif);
font-weight: 700;
letter-spacing: .01em;
white-space: nowrap;
}
.kma-prose tbody th { background: var(--mist, #f4f6ef); font-weight: 700; color: var(--ink2, #221E1F); }
.kma-prose tbody tr:nth-child(even) { background: var(--mist, #f4f6ef); }
/* Legacy content nests headings/rules/blocks INSIDE cells (the Policies table) */
.kma-prose :is(td, th) > * + * { margin-top: .6rem; }
.kma-prose :is(td, th) :is(h2, h3, h4) { font-size: 1.02rem; line-height: 1.3; }
.kma-prose :is(td, th) hr { margin: .8rem 0; }
.kma-prose :is(td, th) img { margin: 0; }
/* ---- Code / preformatted (FLAT: bordered, no radius) ---------------------- */
.kma-prose code, .kma-prose kbd, .kma-prose samp {
font-family: var(--font-mono, 'Space Mono', monospace);
font-size: .88em;
background: var(--mist, #f4f6ef);
border: 1px solid var(--line, #e1e5da);
padding: .12em .4em;
}
.kma-prose pre {
font-family: var(--font-mono, 'Space Mono', monospace);
font-size: .88rem;
line-height: 1.6;
background: var(--mist, #f4f6ef);
border: 1px solid var(--line, #e1e5da);
border-left: 4px solid var(--g, #76a236);
padding: 1rem 1.2rem;
overflow-x: auto;
overscroll-behavior-x: contain;
tab-size: 2;
}
.kma-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
/* ---- Rules ----------------------------------------------------------------- */
.kma-prose hr { border: 0; border-top: 1px solid var(--line, #e1e5da); margin: 2.4rem 0 0; }
/* ---- Embeds / media --------------------------------------------------------
Video embeds get a 16:9 box; the aspect-ratio is limited to known video
hosts so a pasted map/calendar iframe keeps its own proportions. */
.kma-prose iframe { max-width: 100%; border: 0; }
.kma-prose iframe[src*="youtube.com"], .kma-prose iframe[src*="youtube-nocookie.com"],
.kma-prose iframe[src*="player.vimeo.com"], .kma-prose iframe[src*="dailymotion.com"],
.kma-prose iframe[src*="fast.wistia"] {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
.kma-prose video, .kma-prose embed, .kma-prose object { max-width: 100%; height: auto; }
.kma-prose audio { width: 100%; }
.kma-prose .wp-block-embed { margin-top: 1.8rem; }
.kma-prose .wp-block-embed__wrapper { position: relative; }
.kma-prose .wp-block-embed.wp-has-aspect-ratio iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
/* ---- Legacy content compatibility shims ------------------------------------
Pre-redesign content (home intro, old suburb pages) carries Bootstrap-era
classes; without these the "Call us" CTA renders as a bare text link. */
.kma-prose .btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
background: var(--g-cta, #46731c); color: #fff; font-weight: 700;
padding: .85rem 1.5rem; border: 2px solid var(--g-cta, #46731c);
text-decoration: none;
}
.kma-prose .btn:hover { background: var(--g-cta-h, #3a5f16); border-color: var(--g-cta-h, #3a5f16); color: #fff; }
/* Legacy home content carries INSIDE the button —
#444 on the green is 1.7:1 (AA fail). !important is the only thing that
beats an inline style; justified here as an accessibility repair. */
.kma-prose .btn small { color: #fff !important; }
.kma-prose p.row-buttons { display: flex; flex-wrap: wrap; gap: .85rem; }
.kma-prose .font-weight-bold { font-weight: 700; }
/* ---- Inverted context (dark / green bands) -------------------------------- */
.kma-prose--invert { color: #d7dad2; }
.kma-prose--invert p, .kma-prose--invert li { color: #d7dad2; }
.kma-prose--invert :is(h2, h3, h4, h5), .kma-prose--invert strong, .kma-prose--invert b { color: #fff; }
.kma-prose--invert a { color: var(--bright, #93c847); }
.kma-prose--invert a:focus-visible { outline-color: #fff; }
.kma-prose--invert ul > li::marker, .kma-prose--invert ol > li::marker { color: var(--bright, #93c847); }
.kma-prose--invert blockquote { background: rgba(255, 255, 255, .06); border-left-color: var(--bright, #93c847); color: #fff; }
.kma-prose--invert blockquote p { color: #fff; }
.kma-prose--invert hr { border-top-color: rgba(255, 255, 255, .25); }
/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 560px) {
.kma-prose { font-size: 1.0625rem; } /* 17px reading size on phones */
.kma-prose > p:first-child { font-size: 1.15rem; }
.kma-prose .alignleft, .kma-prose .alignright { /* floats don't earn their keep at 360–560px */
float: none; max-width: 100%; margin: 1.4rem 0 0;
}
.kma-prose table { font-size: .9rem; }
.kma-prose th, .kma-prose td { padding: .55rem .65rem; }
.kma-prose pre { padding: .8rem .9rem; }
.kma-prose blockquote { padding: .9rem 1.1rem; }
}
/* ---- Print ------------------------------------------------------------------ */
@media print {
.kma-prose { max-width: 100%; color: #000; }
.kma-prose p, .kma-prose li { color: #000; }
.kma-prose a { color: #000; }
.kma-prose thead th { background: #fff; color: #000; border-bottom: 2px solid #000; }
.kma-prose tbody tr:nth-child(even), .kma-prose blockquote, .kma-prose pre, .kma-prose code { background: #fff; }
}