/* Resources section (blog) — listing, category archives, and single articles.
Loaded on is_home / is_archive / single posts — see resource_styles() in functions.php.
Palette matches property-management.css: #272531 dark, #D1CFCE light, #525157 body, #716e84 accent. */
/* ── Category filter chips (listing + archives) ── */
.resource-filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
padding: 60px 0 0;
}
.resource-filters a {
display: inline-block;
padding: 10px 22px;
border: 1px solid #ffffff44; /* listing page background is dark */
color: #D1CFCE;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
}
.resource-filters a:hover {
border-color: #fff;
color: #fff;
text-decoration: none;
}
.resource-filters a.active {
background: #fff;
border-color: #fff;
color: #272531;
}
.blog .resource-filters + .row.contentsection,
.archive .resource-filters + .row.contentsection {
padding-top: 50px;
}
/* ── Resource cards (listing + archives) ── */
.res-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 45px 40px;
padding-bottom: 60px;
}
.archive .row.contentsection {
padding: 0;
}
.res-card {
background: #D1CFCE;
display: flex;
flex-direction: column;
overflow: hidden;
}
.res-card-img {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
}
/* #main article scope needed: overrides.css sets `#main article img { height:auto }`
(ID specificity), which let each photo render at its natural ratio inside the
fixed 16:10 frame — panoramas left a gray gap, tall photos overflowed. */
#main article .res-card-img img,
.res-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.res-card:hover .res-card-img img {
transform: scale(1.04);
}
.res-card-cats {
position: absolute;
left: 14px;
bottom: 14px;
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: calc(100% - 28px);
}
.post-cat-chip {
display: inline-block;
padding: 5px 12px;
background: #272531;
color: #fff !important;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
text-decoration: none;
white-space: nowrap;
}
a.post-cat-chip:hover {
background: #716e84;
text-decoration: none;
}
.res-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 26px 28px 28px;
}
.res-card-date {
font-size: 12.5px;
color: #716e84;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 10px;
}
.res-card-title {
margin: 0 0 12px;
}
.res-card-title a {
color: #272531;
font-family: 'Playfair', sans-serif;
font-size: 27px;
line-height: 1.18;
text-wrap: balance;
text-decoration: none;
display: block;
}
.res-card-title a:hover {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.res-card-excerpt {
color: #525157;
font-size: 15.5px;
line-height: 1.7;
margin: 0 0 22px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.res-card-more {
align-self: flex-start;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #272531;
text-decoration: none;
border-bottom: 2px solid #27253155;
padding-bottom: 3px;
}
.res-card-more:hover,
.res-card-more:focus {
color: #272531;
border-bottom-color: #272531;
text-decoration: none; /* theme's global a:hover underline doubles up with the border */
}
/* ── Single article: one centered editorial column ──
(theme's style.css sets .single article { display:flex } with a 500px image
column — overridden here into a readable single-column layout) */
.single #main article {
display: block;
}
.single .single-post-wrap {
max-width: 860px;
margin: 0 auto;
padding: 50px 60px 55px;
}
.post-meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
color: #a3a2a5;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1.5px;
margin: 0 0 30px;
}
.post-byline {
color: #D1CFCE;
font-weight: 600;
}
.post-byline a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.post-byline a:hover {
color: #fff;
}
/* "Related:" service links at the end of every post (blog-build.mjs) */
.post-related-services a {
color: #D1CFCE;
text-decoration: underline;
text-underline-offset: 3px;
}
.post-related-services a:hover {
color: #fff;
}
.post-meta-dot {
color: #716e84;
}
.post-meta-row .post-cats {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-left: 4px;
}
.post-hero-img {
margin: 0 0 40px;
}
.post-hero-img img {
width: 100%;
height: auto;
max-height: 480px;
object-fit: cover;
display: block;
}
.post-body {
font-size: 17.5px;
line-height: 1.85;
}
.post-body > p {
margin-bottom: 22px;
}
/* In-text links on the dark post panel (#272531). The theme's link colors (#564C84 purple,
Bootstrap #0275d8 blue) measured 2.0:1 and 3.3:1 there; #D1CFCE is 9.6:1 and matches the
breadcrumbs. Button-style links keep their own colors. (Jax, 2026-10-12) */
.single .post-body a:not([class*="btn"]):not(.post-cat-chip) {
color: #D1CFCE;
text-decoration: underline;
text-underline-offset: 3px;
}
.single .post-body a:not([class*="btn"]):not(.post-cat-chip):hover,
.single .post-body a:not([class*="btn"]):not(.post-cat-chip):focus-visible {
color: #fff;
}
.single .post-navigation a {
color: #D1CFCE;
}
.single .post-navigation a:hover {
color: #fff;
}
/* ── Breadcrumbs ── */
.post-breadcrumbs {
font-size: 13px;
color: #a3a2a5; /* single-post panel is dark — light muted text */
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 25px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.post-breadcrumbs a {
color: #D1CFCE;
text-decoration: underline;
text-underline-offset: 3px;
}
.post-breadcrumbs a:hover {
color: #fff;
}
.post-breadcrumbs .crumb-current {
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 34ch;
}
.single .single-title {
text-wrap: balance;
}
.single .meta .post-cats {
margin-left: 6px;
}
/* Long-form article body: 2,500–5,000+ word support */
.post-body h2,
.post-body h3 {
margin: 40px 0 16px;
text-wrap: balance;
}
.post-body img {
max-width: 100%;
height: auto;
margin: 20px 0;
}
.post-body ul,
.post-body ol {
margin: 0 0 20px 22px;
line-height: 1.8;
}
.post-body blockquote {
border-left: 4px solid #716e84;
margin: 25px 0;
padding: 10px 0 10px 25px;
color: #525157;
font-style: italic;
}
.post-body table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
display: block;
overflow-x: auto;
}
.post-body table th,
.post-body table td {
border: 1px solid #d5d3d8;
padding: 10px 14px;
text-align: left;
}
/* Callout box — use …
(optional class="callout dark") in articles */
.post-body .callout {
background: #D1CFCE;
padding: 30px 35px;
margin: 30px 0;
border-left: 4px solid #272531;
}
.post-body .callout.dark {
background: #272531;
border-left-color: #716e84;
}
.post-body .callout.dark,
.post-body .callout.dark h3,
.post-body .callout.dark p {
color: #fff;
}
.post-body .callout h3 {
margin-top: 0;
}
.post-body .callout p:last-child {
margin-bottom: 0;
}
/* FAQ blocks — use Q
A