/*
 * Silverline tokens — design system on GeneratePress + GenerateBlocks.
 *
 * Loaded BEFORE the silverline child style.css (see functions.php enqueue
 * order). Targets both classic core-block markup (.wp-block-group) and the
 * new GenerateBlocks markup (.gb-element-*) so either can be used per page.
 *
 * Phase: faithful-match baseline. Typography, padding, and section
 * backgrounds mirror live teamsilverline.com so the silverline (improved)
 * theme starts from a defensible "this is the same site" reference. The
 * /critique and /audit skills will then drive deliberate refinements
 * documented in silverline-phase2-audit.md.
 *
 * Design source of truth: .impeccable.md + silverline-classic-targets.md.
 */

:root {
	/* Color tokens — single source for both classic and GB blocks. */
	--silverline-color-orange: #f7941e;
	--silverline-color-teal: #2d96aa;
	--silverline-color-body-gray: #4f4f51;
	--silverline-color-secondary-gray: #838384;
	--silverline-color-white: #ffffff;

	/* Section padding scale — matches live's content-wrapper rhythm.
	 * Default 45/75 for content sections. Tight 64/64 for divider bands.
	 * Feature 128/128 for emphasis CTAs. Hero 126/0 for the top of the page. */
	--silverline-section-pad-top: 45px;
	--silverline-section-pad-bottom: 75px;
	--silverline-section-pad-tight: 64px;
	--silverline-section-pad-feature: 128px;
	--silverline-section-pad-hero: 126px;

	/* Section gradients — pure CSS radial-gradients that replicate the look
	 * of Squarespace's gradient PNGs without an HTTP request. Each is a soft
	 * elliptical highlight slightly upper-left of center.
	 *
	 * NB: the Squarespace asset names are misleading. "GradientDarkGrayBackground"
	 * is actually a *very light* silver — paired with dark text. The "LighGray"
	 * asset is the slightly more saturated mid-gray used for the Core Services
	 * divider band. Names below match the live design intent, not the PNGs.
	 */
	--silverline-gradient-orange: radial-gradient(ellipse at 30% 35%, #f7921d 0%, #f76700 100%);
	--silverline-gradient-dark: radial-gradient(ellipse at 30% 35%, #f8f8f8 0%, #ececec 45%, #dcdcdc 100%);
	--silverline-gradient-silver: radial-gradient(ellipse at 30% 35%, #dcdcdc 0%, #c8c8c8 45%, #b4b4b4 100%);
	--silverline-gradient-charcoal: radial-gradient(ellipse at 30% 35%, #6a6a6d 0%, #4f4f51 45%, #2d2d2f 100%);
}

/*
 * SECTION BACKGROUNDS
 *
 * Three section themes per .impeccable.md: orange (bright), dark, silver.
 * Plus implicit white for default. Each maps to a class hook applied to
 * the section's GenerateBlocks element block (or the legacy wp:group).
 *
 * `background` shorthand resets background-color so the gradient fully
 * overrides any inline flat-color set on the GB block. This lets us add
 * the gradient via a class hook without editing each block's styles.
 */
.silverline-section--orange,
.entry-content .wp-block-group.has-silverline-orange-background-color,
.entry-content [class*="gb-element-"].silverline-section--orange {
	background: var(--silverline-gradient-orange);
	color: var(--silverline-color-white);
}

/*
 * --dark: very-light gradient + body-gray text. Used on the homepage
 * Difference / Media / Creative / Public Affairs sections. Constraint
 * (Audit 2026-05-09 H-2): pair with body-gray text only — white text
 * fails contrast against this gradient.
 */
.silverline-section--dark,
.entry-content .wp-block-group.has-silverline-body-gray-background-color,
.entry-content [class*="gb-element-"].silverline-section--dark {
	background: var(--silverline-gradient-dark);
	color: var(--silverline-color-body-gray);
}

.silverline-section--silver,
.entry-content [class*="gb-element-"].silverline-section--silver {
	background: var(--silverline-gradient-silver);
	/* Default text color (dark) — silver gradient pairs with body-gray text */
}

/*
 * Charcoal — truly-dark gradient for sections that need white text on a
 * deep gray base. Center is body-gray-ish, edges fade to near-black so
 * white text reads at high contrast everywhere in the section.
 * Used for: Core Services divider, Data Centers feature, Staying Connected.
 */
.silverline-section--charcoal,
.entry-content [class*="gb-element-"].silverline-section--charcoal {
	background: var(--silverline-gradient-charcoal);
	color: var(--silverline-color-white);
}

/*
 * SECTION PADDING
 *
 * Apply the .silverline-section class to the outer GB section element to
 * get the standard 45/75 vertical rhythm. Variants:
 *   .silverline-section--hero    126/0  (top of page, no bottom — photo
 *                                          strip butts up against it)
 *   .silverline-section--tight    64/64 (divider bands like Core Services)
 *   .silverline-section--feature 128/128 (emphasis CTAs)
 */
.silverline-section,
.entry-content .silverline-section {
	padding-top: var(--silverline-section-pad-top);
	padding-bottom: var(--silverline-section-pad-bottom);
}

.silverline-section--hero,
.entry-content .silverline-section--hero {
	padding-top: var(--silverline-section-pad-hero);
	padding-bottom: 0;
}

.silverline-section--tight,
.entry-content .silverline-section--tight {
	padding-top: var(--silverline-section-pad-tight);
	padding-bottom: var(--silverline-section-pad-tight);
}

.silverline-section--feature,
.entry-content .silverline-section--feature {
	padding-top: var(--silverline-section-pad-feature);
	padding-bottom: var(--silverline-section-pad-feature);
}

/*
 * TYPOGRAPHY
 *
 * Matches live computed values exactly:
 *   H1   49px / weight 300 / lh 1.27 / -0.02em
 *   H2   34px / weight 300 / lh 1.33 / -0.02em
 *   H3   26px / weight 300 / lh 1.37 / -0.02em
 *   Body 26px / weight 300 / lh 1.50 / -0.008em
 *   Eyebrow 19px / weight 400 / 0 tracking / uppercase (when applied)
 *   Button  22px / weight 500 / 1.1px tracking / 36 54 padding
 *
 * Selectors target both core blocks (.wp-block-heading) and GenerateBlocks
 * (.gb-text) so either rendering path produces the same visual.
 */

/*
 * Heading rules use :where() to keep specificity at (0, 0, 1) — just the
 * type selector inside the bare context. This matches the body rule
 * pattern below and lets per-block GB-generated rules (.gb-text-{id} at
 * 0, 1, 0) override these defaults when a section needs a different
 * visual size. Specifically: a semantic H2 with inline `fontSize:49px`
 * renders at 49px (visual = H1) while still being H2 in the document
 * outline. Necessary because Cord wanted the visual look of H1s for
 * service-section headings without the multiple-H1 a11y violation.
 */

/* H1 */
:where(.entry-content) h1 {
	font-size: 49px;
	font-weight: 300;
	line-height: 1.27;
	letter-spacing: -0.02em;
}

/* H2 */
:where(.entry-content) h2 {
	font-size: 34px;
	font-weight: 300;
	line-height: 1.33;
	letter-spacing: -0.02em;
}

/* H3 */
:where(.entry-content) h3 {
	font-size: 26px;
	font-weight: 300;
	line-height: 1.37;
	letter-spacing: -0.02em;
}

/* H4 — case-study labels (Approach / Results / Services) */
:where(.entry-content) h4 {
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/*
 * Body — paragraphs in core and GB blocks.
 * 26px / weight 300 to match live exactly. Phase 2 audit (CC-5) flagged
 * that long-form body at 300 reads anemic; that fix is deferred to the
 * post-baseline refinement pass.
 *
 * Specificity: :where() makes the .entry-content qualifier weightless,
 * so the whole selector is (0, 0, 1) — just the `p` type selector.
 * That lets per-block GB-generated rules (.gb-text-{id} at 0, 1, 0)
 * override these defaults — needed for service-section paragraphs that
 * use 17px / 1.6 instead of the larger body rhythm. The bare <p> rule
 * matches both core <p> and GB-rendered <p class="gb-text"> elements,
 * so we don't need a separate GB-specific branch.
 */
:where(.entry-content) p {
	font-size: 26px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: -0.008em;
}

/*
 * Eyebrow / small uppercase signposts. Codified at the values that are
 * actually shipping across miss5 / toth3 / ins4 (14px / weight 500 /
 * 0.05em tracking). Earlier 19/400/0 spec was aspirational and never
 * reached any block. Targets paragraphs that have text-transform:uppercase
 * applied via inline style or a marker class.
 */
.entry-content p[style*="text-transform:uppercase"],
.entry-content p[style*="textTransform:uppercase"],
.entry-content .silverline-eyebrow {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/*
 * BUTTONS
 *
 * Squarespace-style generous proportions: 22.1px / 36 54 padding /
 * 1.1px letter-spacing / uppercase. Teal background by default.
 * Targets both core/button and GB element-as-anchor buttons.
 */
.entry-content .wp-block-button__link.wp-element-button {
	padding: 36px 54px;
	font-size: 22.1px;
	font-weight: 500;
	letter-spacing: 1.1px;
	line-height: normal;
	text-transform: uppercase;
	background-color: var(--silverline-color-teal);
	color: var(--silverline-color-white);
	border-radius: 0;
}

/*
 * IMAGE SIZING — logo grids and capability icons.
 *
 * Source images were imported without WordPress generating size-medium/
 * size-large derivatives, so the wp:image sizeSlug doesn't constrain
 * rendered width. We use CSS instead.
 *
 * Logo grids (mission, awards, media, public affairs): scale logos to
 * fill the grid cell width up to 200px, preserving aspect ratio. Without
 * this, logos render at their intrinsic source width which varies wildly.
 */
.entry-content [class*="gb-element-miss6"] figure.wp-block-image,
.entry-content [class*="gb-element-awbg1a"] figure.wp-block-image,
.entry-content [class*="gb-element-med6"] figure.wp-block-image,
.entry-content [class*="gb-element-pa7"] figure.wp-block-image {
	width: 100%;
	max-width: 200px;
	margin: 0;
}

.entry-content [class*="gb-element-miss6"] figure.wp-block-image img,
.entry-content [class*="gb-element-awbg1a"] figure.wp-block-image img,
.entry-content [class*="gb-element-med6"] figure.wp-block-image img,
.entry-content [class*="gb-element-pa7"] figure.wp-block-image img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/*
 * Capability icons (Capabilities_*IconOnly.webp) — render at 180px max
 * width so they sit as accents, not dominate the column. The right-
 * aligned figure floats inside the column width container.
 */
.entry-content figure.wp-block-image.alignright[class*="size-large"] {
	max-width: 180px;
}

.entry-content figure.wp-block-image.alignright[class*="size-large"] img {
	width: 100%;
	height: auto;
}

/*
 * HEADER + FOOTER
 *
 * The bulk of header/footer styling lives in GeneratePress's Customizer
 * (Layout > Footer + Colors > Footer Widgets, etc.). These rules are
 * supplemental: things GP free doesn't expose as Customizer settings.
 */

/* Logo width — GP free doesn't expose a logo-width Customizer control
 * (it's GP Premium). Constrain it here so the natural 1389x282 file
 * doesn't blow out the header. The blogname.h1 anchor still needs to
 * sit centered with proper line-height. */
.site-header .site-logo img,
.site-header .header-image {
	max-width: 200px;
	height: auto;
}

/* Social icon badges in footer-widget-1. Each <a> contains a 2-char
 * label (in / IG / BS) that we render as a circular outlined badge.
 * KSES strips `display:inline-block` from inline styles on widget
 * content, so we apply layout via stylesheet instead.
 *
 * Sized at 44x44 to meet WCAG 2.5.5 (Target Size) minimum. Visible
 * outline border is 2px; the rest is internal padding for the label. */
.footer-widget-1 .widget_custom_html div a[aria-label="LinkedIn"],
.footer-widget-1 .widget_custom_html div a[aria-label="Instagram"],
.footer-widget-1 .widget_custom_html div a[aria-label="Bluesky"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: 8px;
	color: #fff !important;
	background: transparent;
	border: 2px solid #fff;
	border-radius: 50%;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.footer-widget-1 .widget_custom_html div a[aria-label="LinkedIn"]:hover,
.footer-widget-1 .widget_custom_html div a[aria-label="Instagram"]:hover,
.footer-widget-1 .widget_custom_html div a[aria-label="Bluesky"]:hover {
	background: #fff;
	color: #f7941e !important;
}

/*
 * QUERY LOOP — blog post titles (CC-2 fix).
 * Default Kadence/Core renders these too bold relative to the section H2
 * above. Drop to weight 500 so the section H2 stays the visual anchor.
 */
.entry-content .wp-block-post-title,
.entry-content .wp-block-post-title.wp-block-heading,
.entry-content .wp-block-post-title.wp-block-heading a {
	font-size: 28px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/*
 * ──────────────────────────────────────────────────────────────────
 * SHARED PATTERN CLASSES (Phase 2 audit cleanup, 2026-06-23)
 *
 * Each class below replaces a recurring per-block inline style that
 * was duplicated across the homepage and service pages. Apply via the
 * block's Additional CSS Class(es) field — the block keeps its
 * semantic tag, the class delivers the visual styling.
 *
 * Once a block adopts one of these classes, REMOVE the equivalent
 * inline `styles` keys from its block JSON so the class wins without
 * a specificity fight.
 * ──────────────────────────────────────────────────────────────────
 */

/*
 * Section heading — visual H1 size for semantic H2s. Used 15+ times
 * across homepage section banners (awar2, msg2, med2, thot2, crea2,
 * digi2, pa2, dc3, stay2, wws2, sei2, ins2) and the corresponding
 * service-page hero H1s. Color is intentionally inherited from the
 * section context (orange-on-white from inline color, white from
 * --orange/--charcoal sections).
 */
.entry-content .silverline-section-heading {
	font-size: 49px;
	font-weight: 300;
	line-height: 1.27;
	letter-spacing: -0.02em;
	margin: 0;
}

/*
 * H2 large variant — 40px About/Reports subhead. Used on
 * wwaMissionH, wwaSuppH, sei2t1H–sei2t5H. Distinct role from the
 * 34px homepage subheads (diff3, miss4, core2, pwu2) which inherit
 * token H2; and from the 49px .silverline-section-heading above.
 *
 * line-height matches what ships on sei2 (1.2) so adoption is visual-
 * neutral. wwa currently ships at 1.27 — adopting on wwa will be a
 * small visual tweak, called out when that pass happens.
 */
.entry-content .silverline-h2--large {
	font-size: 40px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/*
 * Lead body paragraph — 22px supporting copy that sits between a
 * 49px section heading and standard 26px body. Used on diff6–diff9,
 * pwu3, toth2. The italic toth2 keeps its inline font-style.
 */
.entry-content .silverline-body--lead {
	font-size: 22px;
	font-weight: 300;
	line-height: 1.4;
	margin: 0;
}

/*
 * Canonical 1fr 2fr grid (heading | body). The Phase 2 layout
 * pattern documented in silverline-design-system.md. Apply to the
 * inner grid element of any service-page body / About-page body /
 * homepage service block. Standard column gap 3em, row gap 1.5em,
 * collapses to single column at 767px.
 */
.entry-content .silverline-grid--13 {
	display: grid;
	grid-template-columns: 1fr 2fr;
	column-gap: 3em;
	row-gap: 1.5em;
	align-items: start;
}

@media (max-width: 767px) {
	.entry-content .silverline-grid--13 {
		grid-template-columns: 1fr;
	}
}

/*
 * Buttons — anchor-as-button pattern.
 *
 * All visible CTAs on the site are GB element <a> blocks (not
 * core/button — that's the dormant rule above). Three variants ship:
 *   .silverline-btn         — primary, teal bg + white text (diff4, pwu5, sei4)
 *   .silverline-btn--accent — orange bg + white text (dc5 "Get on the List")
 *   .silverline-btn--ghost  — white bg + orange text + 2px orange border
 *                              (footer widget Subscribe / Work With Us)
 *
 * Geometry is intentionally restrained — 15px / 20-32 padding — not
 * the 22.1px / 36-54 spec from the brand guide. Codified here at what
 * actually ships so adoption is visual-neutral. Revisiting the larger
 * spec is a deliberate design call, separate from this drift cleanup.
 */
.entry-content a.silverline-btn,
.entry-content .silverline-btn,
.entry-content a.silverline-btn--accent,
.entry-content .silverline-btn--accent {
	display: inline-block;
	padding: 20px 32px;
	color: var(--silverline-color-white);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: normal;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	transition: background-color 0.2s, color 0.2s;
}

.entry-content a.silverline-btn,
.entry-content .silverline-btn {
	background-color: var(--silverline-color-teal);
}

.entry-content a.silverline-btn:hover,
.entry-content .silverline-btn:hover {
	background-color: var(--silverline-color-body-gray);
}

.entry-content a.silverline-btn--accent,
.entry-content .silverline-btn--accent {
	background-color: var(--silverline-color-orange);
}

.entry-content a.silverline-btn--accent:hover,
.entry-content .silverline-btn--accent:hover {
	background-color: var(--silverline-color-body-gray);
}

/*
 * Ghost variant — secondary footprint, slightly wider padding to suit
 * the longer "Work With Us" / "Subscribe" labels in the footer columns.
 */
.entry-content a.silverline-btn--ghost,
.entry-content .silverline-btn--ghost {
	display: inline-block;
	padding: 18px 48px;
	background-color: var(--silverline-color-white);
	color: var(--silverline-color-orange);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: normal;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--silverline-color-orange);
	border-radius: 0;
	transition: background-color 0.2s, color 0.2s;
}

.entry-content a.silverline-btn--ghost:hover,
.entry-content .silverline-btn--ghost:hover {
	background-color: var(--silverline-color-orange);
	color: var(--silverline-color-white);
}

/*
 * ──────────────────────────────────────────────────────────────────
 * INSIGHTS / BLOG LANDING — magazine layout (2026-06-25)
 *
 * Two-query loop: featured post on top (1.4fr 1fr image | body) followed
 * by an 8-post 3-col grid. CSS below styles the post fields without
 * needing per-block inline overrides on every wp:post-* element.
 * ──────────────────────────────────────────────────────────────────
 */

/* Featured post row — image left, body right, hairline divider below */
.entry-content .silverline-insights-featured {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	column-gap: 56px;
	align-items: center;
	margin-bottom: 96px;
	padding-bottom: 64px;
	border-bottom: 1px solid #e5e5e5;
}

.entry-content .silverline-insights-featured .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin: 0;
}
.entry-content .silverline-insights-featured .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Featured body — title, date, dek, read-more stacked left */
.entry-content .silverline-insights-featured__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

/* Featured date — orange eyebrow */
.entry-content .silverline-insights-featured__body .wp-block-post-date,
.entry-content .silverline-insights-featured__body .wp-block-post-date time {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--silverline-color-orange);
}

/* Featured title — 40px, dark, tight tracking, hover orange */
.entry-content .silverline-insights-featured__body .wp-block-post-title,
.entry-content .silverline-insights-featured__body .wp-block-post-title a {
	font-size: 40px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #1a1a1a;
	margin: 0;
}
.entry-content .silverline-insights-featured__body .wp-block-post-title a:hover {
	color: var(--silverline-color-orange);
}

/* Featured excerpt (dek) — 18px body, gray, comfortable line-height */
.entry-content .silverline-insights-featured__body .wp-block-post-excerpt {
	margin: 0;
}
.entry-content .silverline-insights-featured__body .wp-block-post-excerpt__excerpt {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--silverline-color-body-gray);
	margin: 0;
}
/* The post-excerpt "more" link rendered inline at end of paragraph —
 * promote to its own visual line, orange, weight 600. */
.entry-content .silverline-insights-featured__body .wp-block-post-excerpt__more-link {
	display: block;
	margin-top: 16px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--silverline-color-orange);
	text-decoration: none;
}
.entry-content .silverline-insights-featured__body .wp-block-post-excerpt__more-link:hover {
	color: var(--silverline-color-body-gray);
}

/* 8-post grid below featured */
.entry-content .silverline-insights-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 40px;
	row-gap: 64px;
}

/* Each grid card — flex column, tight gap between stacked elements */
.entry-content .silverline-insights-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.entry-content .silverline-insights-card .wp-block-post-featured-image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	margin: 0;
}
.entry-content .silverline-insights-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Card date — secondary-gray eyebrow */
.entry-content .silverline-insights-card .wp-block-post-date,
.entry-content .silverline-insights-card .wp-block-post-date time {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--silverline-color-secondary-gray);
}

/* Card title — 20px, 600, hover orange (overrides the .wp-block-post-title
 * rule above which would set it to 28px). */
.entry-content .silverline-insights-card .wp-block-post-title,
.entry-content .silverline-insights-card .wp-block-post-title a {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #1a1a1a;
	margin: 0;
}
.entry-content .silverline-insights-card .wp-block-post-title a:hover {
	color: var(--silverline-color-orange);
}

/* Card excerpt — 15px, gray, supports the title not competing with it */
.entry-content .silverline-insights-card .wp-block-post-excerpt {
	margin: 0;
}
.entry-content .silverline-insights-card .wp-block-post-excerpt__excerpt {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	color: var(--silverline-color-body-gray);
	margin: 0;
}
/* Card more-link — same orange separate-line treatment as featured */
.entry-content .silverline-insights-card .wp-block-post-excerpt__more-link {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--silverline-color-orange);
	text-decoration: none;
}
.entry-content .silverline-insights-card .wp-block-post-excerpt__more-link:hover {
	color: var(--silverline-color-body-gray);
}

/* Pagination — center, generous space above */
.entry-content .silverline-insights-pagination {
	margin-top: 72px;
	display: flex;
	justify-content: center;
	gap: 16px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.entry-content .silverline-insights-pagination a,
.entry-content .silverline-insights-pagination .page-numbers {
	color: var(--silverline-color-body-gray);
	text-decoration: none;
	padding: 8px 14px;
}
.entry-content .silverline-insights-pagination a:hover {
	color: var(--silverline-color-orange);
}
.entry-content .silverline-insights-pagination .page-numbers.current {
	color: var(--silverline-color-orange);
	font-weight: 700;
}

/* Mobile — collapse featured + grid to single column */
@media (max-width: 767px) {
	.entry-content .silverline-insights-featured {
		grid-template-columns: 1fr;
		row-gap: 24px;
		margin-bottom: 64px;
		padding-bottom: 48px;
	}
	.entry-content .silverline-insights-featured__body .wp-block-post-title,
	.entry-content .silverline-insights-featured__body .wp-block-post-title a {
		font-size: 32px;
	}
	.entry-content .silverline-insights-grid {
		grid-template-columns: 1fr;
		row-gap: 48px;
	}
}

/*
 * ──────────────────────────────────────────────────────────────────
 * QUOTE — "Silverline Featured" block style (2026-06-25)
 *
 * Brand signature: orange-gradient quote-mark PNG (100x82) sits to the
 * left of italic quoted text, cite below in bold. Migrated from the
 * legacy Squarespace .sqs-block-quote treatment (see
 * silverline-design-system.md L239-261).
 *
 * Apply by selecting "Silverline Featured" from the block style picker
 * on any core/quote block. The block style is registered in functions.php
 * as silverline_register_block_styles().
 * ──────────────────────────────────────────────────────────────────
 */

.entry-content .wp-block-quote.is-style-silverline-featured {
	position: relative;
	width: 70%;
	max-width: 900px;
	padding: 0 0 0 120px;
	margin: 0;
	border: 0;
}

.entry-content .wp-block-quote.is-style-silverline-featured::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 82px;
	background-image: url("assets/images/QuoteMarksOrangeGradient.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top left;
}

/* Quoted text — italic, larger body, comfortable line-height */
.entry-content .wp-block-quote.is-style-silverline-featured p {
	font-size: 22px;
	font-weight: 300;
	font-style: italic;
	line-height: 1.5;
	margin: 0;
}

/* Attribution / cite — bold, paddingLeft to align with quote text,
 * paddingTop for breathing room. Matches the legacy .source treatment. */
.entry-content .wp-block-quote.is-style-silverline-featured cite {
	display: block;
	margin-top: 24px;
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0;
	text-align: left;
}

/*
 * Contextual override — on orange-themed sections, the orange PNG would
 * disappear into the background. Hide the icon and tighten left padding
 * so the italic-text-plus-bold-cite treatment still applies cleanly.
 * White text inherits from the section's color rule.
 */
.entry-content .silverline-section--orange .wp-block-quote.is-style-silverline-featured,
.silverline-section--orange .entry-content .wp-block-quote.is-style-silverline-featured {
	padding-left: 0;
}
.entry-content .silverline-section--orange .wp-block-quote.is-style-silverline-featured::before,
.silverline-section--orange .entry-content .wp-block-quote.is-style-silverline-featured::before {
	display: none;
}

/* Mobile — drop to full width, tighter padding for the icon */
@media (max-width: 767px) {
	.entry-content .wp-block-quote.is-style-silverline-featured {
		width: 100%;
		padding-left: 70px;
	}
	.entry-content .wp-block-quote.is-style-silverline-featured::before {
		width: 60px;
		height: 49px;
	}
}