/* ==========================================================================
   Visual refresh layer — typography and surface treatment.

   Loaded AFTER paragon.css and custom.css. Overrides only; no layout or
   content changes. To revert entirely, remove the 'kaylie-staging-site-refresh'
   enqueue in functions.php — nothing else depends on this file.

   What it does:
     1. Replaces Georgia with Newsreader for display type
     2. Raises body copy sizes roughly one step
     3. Replaces drop shadows with hairline borders
     4. Removes hover lift
   ========================================================================== */

:root {
	--kss-display: 'Newsreader', Georgia, 'Times New Roman', serif;
	--kss-hairline: #e3e0d8;
	--kss-hairline-strong: #cfcabd;
}

/* --------------------------------------------------------------------------
   0. Image sizing

   paragon.css declares `img { display: block; max-width: 100% }` with no
   `height: auto`. The static build's images carried no width/height
   attributes, so nothing broke. WordPress emits width and height attributes
   on everything it generates, so the width scales down while the height
   attribute holds — images render stretched and oversized.
   -------------------------------------------------------------------------- */
img {
	height: auto;
}

/* Images inside article bodies stay within the column and keep their ratio. */
.article-wrap img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin: 32px 0;
}

/* Wrapper-constrained images must still fill their box. */
.blog-card-img img,
.featured-card-img,
.ind-photo img,
.nav-logo img {
	height: 100%;
}

.nav-logo img { height: 44px; }

/* --------------------------------------------------------------------------
   1. Display typeface
   Enumerated rather than using a bare h1/h2 selector, because paragon.css
   sets font-family via class selectors that would win on specificity.
   -------------------------------------------------------------------------- */
.page-hero h1,
.check-band h2,
.section h2,
.section-label + h2,
.card h3,
.card-dark h3,
.step h3,
.step-num,
.compare-table th,
.faq-q,
.testimonial-band blockquote,
.testimonial-band::before,
.cta-band h2,
.stat-num,
.loc-card h4,
.prose h3,
.footer-brand-name,
.article-wrap h2,
.article-wrap h3,
.article-cta h3,
.blog-card-body h3,
.featured-content h2,
.legal-hero h1,
.legal-body h2,
.legal-toc ol,
.newsletter-band h2,
.conformance-card h3,
.contact-left h2,
.offices-block h2,
.offices-block h3,
.ind-content h2,
.ind-quote blockquote,
.thankyou-hero h1,
.next-steps h2,
.next-step h3,
.step-number,
.while-waiting h2,
.resource-card h3,
.direct-contact a.phone-link,
.error-code,
.error-hero h1,
.error-hero::after,
.error-links h2,
.error-link-card h3 {
	font-family: var(--kss-display);
}

/* Newsreader runs slightly wider and lighter than Georgia at display sizes;
   tighten tracking on the large headings to compensate. */
.page-hero h1,
.legal-hero h1,
.thankyou-hero h1,
.error-hero h1 {
	letter-spacing: -0.018em;
	font-weight: 400;
}

.section h2,
.check-band h2,
.cta-band h2,
.featured-content h2,
.ind-content h2 {
	letter-spacing: -0.012em;
}

/* --------------------------------------------------------------------------
   2. Body copy — up roughly one step throughout
   -------------------------------------------------------------------------- */
.page-hero p            { font-size: 1.08rem; line-height: 1.75; }
.section-sub            { font-size: 1.02rem; line-height: 1.78; }
.prose p                { font-size: 1.05rem; line-height: 1.82; }
.card p                 { font-size: .95rem;  line-height: 1.72; }
.card-dark p            { font-size: .94rem;  line-height: 1.72; }
.step p                 { font-size: .92rem;  line-height: 1.68; }
.faq-a                  { font-size: .96rem;  line-height: 1.78; }
.faq-q                  { font-size: 1.06rem; }
.check-band .sub        { font-size: 1rem;    line-height: 1.75; }
.check-text strong      { font-size: .96rem; }
.check-text span        { font-size: .9rem;   line-height: 1.62; }
.compare-table          { font-size: .94rem; }
.loc-card address       { font-size: .94rem; }
.blog-card-body p       { font-size: .94rem;  line-height: 1.68; }
.blog-card-body h3      { font-size: 1.08rem; }
.ind-content > p        { font-size: 1.04rem; line-height: 1.78; }
.ind-svc strong         { font-size: .93rem; }
.ind-svc span           { font-size: .89rem;  line-height: 1.6; }
.footer ul a            { font-size: .88rem; }
.footer-brand-desc      { font-size: .87rem; }
.next-step p            { font-size: .93rem; }
.resource-card h3       { font-size: 1.02rem; }
.resource-card p        { font-size: .88rem; }
.error-link-card p      { font-size: .89rem; }

/* --------------------------------------------------------------------------
   3. Surfaces — hairline borders instead of drop shadows
   -------------------------------------------------------------------------- */
.card {
	border: 1px solid var(--kss-hairline);
	border-top: 3px solid var(--gold);
	box-shadow: none;
	transition: border-color .2s ease;
}

.card:hover {
	box-shadow: none;
	border-color: var(--kss-hairline-strong);
	border-top-color: var(--gold);
}

.card-dark {
	box-shadow: none;
	transition: background .2s ease;
}

.card-dark:hover { box-shadow: none; }

.loc-card {
	box-shadow: none;
	border: 1px solid var(--kss-hairline);
	border-left: 3px solid var(--gold);
	transition: border-color .2s ease;
}

.loc-card:hover {
	box-shadow: none;
	border-color: var(--kss-hairline-strong);
	border-left-color: var(--gold);
}

.blog-card {
	border: 1px solid var(--kss-hairline);
	box-shadow: none;
	transition: border-color .2s ease;
}

.blog-card:hover {
	box-shadow: none;
	border-color: var(--kss-hairline-strong);
}

.form-card {
	box-shadow: none;
	border: 1px solid var(--kss-hairline);
}

.resource-card,
.error-link-card {
	box-shadow: none;
	transition: border-color .2s ease;
}

.resource-card:hover,
.error-link-card:hover { box-shadow: none; }

.ind-photo,
.featured-post { box-shadow: none; }

nav { box-shadow: none; }
.site-header nav { box-shadow: none; }
.site-header { border-bottom: 0; }

.btn-gold {
	box-shadow: none;
	transition: background .2s ease;
}

.btn-gold:hover { box-shadow: none; }

.dropdown-menu { box-shadow: 0 8px 24px rgba(7,31,23,.18); }

.cat-bar,
.ind-jumpnav {
	box-shadow: none;
	border-bottom: 1px solid var(--kss-hairline);
}

/* --------------------------------------------------------------------------
   5. Green budget

   paragon.css paints the hero, check band, testimonial band, and CTA band all
   in --green. On most pages the testimonial sits directly above the CTA, so
   two identical full-bleed sections merge into one uninterrupted wall of
   colour with no visible edge.

   Saturated brand colour now marks two moments only — the hero at the top and
   the CTA at the bottom. The testimonial becomes a light section, which also
   gives the closing CTA somewhere to land.
   -------------------------------------------------------------------------- */
.testimonial-band {
	background: #fff;
	color: var(--kss-ink, #1a1a1a);
	padding: 64px 0 68px;
	border-top: 1px solid var(--kss-hairline);
	border-bottom: 1px solid var(--kss-hairline);
}

/* Off-white when the preceding section is white, white when it's off-white —
   so the testimonial always reads as a distinct band rather than merging
   into whatever sits above it. */
.section:not(.alt) + .testimonial-band,
.check-band + .testimonial-band {
	background: var(--off-white);
}

.section.alt + .testimonial-band,
.newsletter-band + .testimonial-band {
	background: #fff;
}

/* The decorative quote mark was sized for a full-bleed green band. At 18rem
   on a light ground it just opens a hole above the quote. */
.testimonial-band::before {
	font-size: 7rem;
	top: 6px;
	color: rgba(13, 85, 64, .07);
}

.testimonial-band blockquote {
	color: #22302a;
	margin-top: 0;
}

/* Gold on off-white lands near 2.4:1 — well under the WCAG minimum for text
   this size. Attribution uses green instead; gold does the rule above it. */
.testimonial-band cite {
	color: var(--green);
}

.testimonial-band .container {
	position: relative;
}

.testimonial-band .container::before {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	background: var(--gold);
	margin: 0 auto 24px;
	position: relative;
	z-index: 1;
}

/* The section above the testimonial doesn't need its full closing padding
   when a bordered band follows it. */
.section + .testimonial-band { margin-top: 0; }
.section:has(+ .testimonial-band) { padding-bottom: 64px; }

/* Where a dark band still runs directly into the CTA, drop the seam so the
   two read as one deliberate block rather than an accidental collision. */
.check-band + .cta-band,
.testimonial-band + .cta-band {
	border-top: 0;
}

/* Slightly tighter vertical rhythm on the stacked closers. */
.cta-band { padding: 76px 0; }

/* --------------------------------------------------------------------------
   7. Article typography

   paragon.css sets every paragraph, list item, and heading in an article at
   near-identical weight and size, so a 700-word post reads as one undivided
   block. These rules add an entry point, widen the spacing between ideas, and
   give lists and callouts their own visual register.
   -------------------------------------------------------------------------- */

/* The article hero is sized for a marketing page. On a post it pushes the
   opening paragraph most of a screen down. */
.page-hero--article {
	padding: 56px 0 48px;
}

.page-hero--article h1 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	max-width: 20ch;
	margin-bottom: 14px;
}

.page-hero--article::after { height: 0; }

.article-wrap {
	max-width: 700px;
	padding: 44px 24px 88px;
}

/* Byline under the article title. */
.article-byline {
	color: rgba(255, 255, 255, .58);
	font-size: .85rem;
	margin: 0;
	letter-spacing: .01em;
}

/* --- Key takeaways summary --------------------------------------------- */
.key-takeaways {
	background: var(--off-white);
	border: 1px solid var(--kss-hairline);
	border-left: 3px solid var(--gold);
	border-radius: 0 6px 6px 0;
	padding: 26px 30px 22px;
	margin: 48px 0 40px;
}

.key-takeaways h2 {
	font-size: .78rem !important;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--green);
	font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
	border-bottom: none !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	display: block !important;
}

.key-takeaways ul { margin-bottom: 0; }

.key-takeaways li {
	font-size: .97rem;
	margin-bottom: 10px;
}

.key-takeaways li:last-child { margin-bottom: 0; }

/* --- Previous / next navigation ---------------------------------------- */
.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--kss-hairline);
}

.post-nav__link {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--kss-hairline);
	border-radius: 6px;
	text-decoration: none;
	color: var(--green);
	font-family: var(--kss-display);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color .2s ease;
}

.post-nav__link:hover { border-color: var(--gold); }

.post-nav__link span {
	display: block;
	font-family: 'Plus Jakarta Sans', Arial, sans-serif;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 6px;
}

.post-nav__link--next {
	text-align: right;
	grid-column: 2;
}

.post-nav__all {
	margin-top: 28px;
	text-align: center;
	font-size: .9rem;
}

.post-nav__all a {
	color: var(--green);
	font-weight: 600;
	text-decoration: none;
}

.post-nav__all a:hover { color: var(--gold); }

@media (max-width: 600px) {
	.post-nav { grid-template-columns: 1fr; }
	.post-nav__link--next { grid-column: 1; text-align: left; }
}

/* Lead paragraph — larger and lighter, so the article has a way in. */
.article-wrap > p:first-of-type {
	font-size: 1.12rem;
	line-height: 1.72;
	color: #2c3a33;
	margin-bottom: 26px;
}

.article-wrap p {
	font-size: 1rem;
	line-height: 1.8;
	margin-bottom: 22px;
	color: #3d4642;
}

.article-wrap h2 {
	font-size: 1.4rem;
	line-height: 1.32;
	margin: 52px 0 16px;
	padding-bottom: 8px;
	border-bottom-width: 2px;
}

.article-wrap h3 {
	font-size: 1.1rem;
	line-height: 1.4;
	margin: 34px 0 12px;
}

/* Tighter coupling where a subheading follows a section heading directly. */
.article-wrap h2 + h3 { margin-top: 28px; }

.article-wrap strong { font-weight: 600; }

/* --- Lists get markers rather than default bullets ---------------------- */
.article-wrap ul,
.article-wrap ol {
	margin: 0 0 30px;
	padding-left: 0;
	list-style: none;
}

.article-wrap li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 12px;
	font-size: .98rem;
	line-height: 1.72;
	color: #3d4642;
}

.article-wrap ul li::before {
	content: '';
	position: absolute;
	left: 6px;
	top: .78em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold);
}

.article-wrap ol {
	counter-reset: kss-article-step;
}

.article-wrap ol li {
	counter-increment: kss-article-step;
}

.article-wrap ol li::before {
	content: counter(kss-article-step) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--kss-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--gold);
}

/* Where a list item leads with a bold term, let it start its own line. */
.article-wrap li > strong:first-child {
	color: var(--green);
}

/* --- Callout: more separation from the surrounding text ----------------- */
.callout {
	margin: 34px 0;
	padding: 20px 24px;
	background: var(--off-white);
	border-left: 3px solid var(--gold);
}

.callout p {
	font-size: .97rem;
	line-height: 1.72;
	margin-bottom: 0;
}

/* --- Inline code in technical posts ------------------------------------- */
.article-wrap code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
	background: rgba(13, 85, 64, .07);
	padding: 2px 6px;
	border-radius: 3px;
	color: var(--dark-green);
}

/* --- Closing CTA --------------------------------------------------------- */
.article-cta {
	margin-top: 56px;
	padding: 32px 36px;
	border-radius: 10px;
}

.article-cta h3 {
	margin-top: 0;
	font-size: 1.2rem;
}

.article-cta p {
	color: rgba(255, 255, 255, .78);
	font-size: .97rem;
	margin-bottom: 20px;
}

/* Blog index cards — the image is a preview only; it does not repeat inside
   the post. Fixed band height, image cropped to fill. */
.blog-card-img {
	display: block;
	height: 168px;
	overflow: hidden;
}

.blog-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   9. Internal linking blocks
   -------------------------------------------------------------------------- */
.further-reading {
	padding: 56px 0 64px;
	background: #fff;
	border-top: 1px solid var(--kss-hairline);
}

.further-reading .section-label { margin-bottom: 18px; }

.fr-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}

.fr-links a {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--kss-hairline);
	border-left: 3px solid var(--gold);
	border-radius: 0 6px 6px 0;
	text-decoration: none;
	color: var(--green);
	font-family: var(--kss-display);
	font-size: 1.02rem;
	line-height: 1.4;
	transition: border-color .2s ease;
}

.fr-links a:hover { border-color: var(--gold); }

.fr-links a span {
	display: block;
	font-family: 'Plus Jakarta Sans', Arial, sans-serif;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 6px;
}

/* Article → service links, above the closing CTA. */
.article-related {
	margin: 40px 0 0;
	padding: 18px 22px;
	background: var(--off-white);
	border-radius: 6px;
	font-size: .95rem !important;
	line-height: 1.7;
	color: #4a544f !important;
}

.article-related strong {
	color: var(--green);
	font-weight: 600;
}

.article-related a {
	color: var(--green);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.article-related a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   10. No hover lift
   -------------------------------------------------------------------------- */
.card:hover,
.card-dark:hover,
.blog-card:hover,
.loc-card:hover,
.resource-card:hover,
.error-link-card:hover,
.btn-gold:hover,
.btn-ghost:hover,
.nav-cta:hover,
.form-submit:hover,
.stat-cell:hover {
	transform: none;
}

.blog-card:hover .blog-card-img img,
.ind-photo:hover img { transform: none; }