.ij-blog { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }
.ij-blog a { color: var(--color-link); text-decoration: none; }
.ij-blog a:hover { color: var(--color-link-hover); }

/* Cards */
.ij-blog .postcard-t,
.ij-blog .postcard img { transition: color 200ms cubic-bezier(0.4,0,0.2,1), transform 320ms cubic-bezier(0.16,1,0.3,1); }
.ij-blog .postcard:hover .postcard-t { text-decoration: underline; text-underline-offset: 3px; }
.ij-blog .postcard:hover img { transform: scale(1.04); }

/* Category chips */
.ij-blog .catchip { cursor: pointer; background: #fff; border: 1px solid var(--color-border-strong); color: var(--color-text); transition: background 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1); }
/* The colour is not redundant. The design's chips are JS buttons; these are
   anchors so server-side filtering works without JS, which means an
   unspecified `color` falls through to `.ij-blog a:hover` and paints them
   brand-orange. The design changes only the background on hover. */
.ij-blog .catchip:hover { background: var(--color-success-soft); color: var(--color-text); }
.ij-blog .catchip.is-on,
.ij-blog .catchip.is-on:hover { background: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.ij-blog .catchip.is-open { box-shadow: inset 0 0 0 1px var(--brand-green); color: var(--brand-green-dark); }

/* Grids */
@media (max-width: 1100px) { .ij-blog .trendgrid { grid-template-columns: minmax(0,1fr) !important; } }
@media (max-width: 900px)  { .ij-blog .feat2 { grid-template-columns: minmax(0,1fr) !important; } }
@media (max-width: 560px)  { .ij-blog .trendcol { grid-template-columns: minmax(0,1fr) !important; } }
@media (max-width: 1100px) { .ij-blog .postgrid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
@media (max-width: 720px)  { .ij-blog .postgrid { grid-template-columns: minmax(0,1fr) !important; } }

/* The related grid on the article page is its own grid in the design: a
   uniform 32px gap, and it drops straight from three columns to one at
   900px rather than passing through the index grid's two-column stage. */
.ij-blog .relgrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
@media (max-width: 900px) { .ij-blog .relgrid { grid-template-columns: minmax(0,1fr) !important; } }
@media (max-width: 900px)  { .ij-blog .loopcard { grid-template-columns: minmax(0,1fr) !important; gap: 32px; padding: 32px !important; } }

/* Article layout */
.ij-blog .artgrid { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 64px; align-items: start; }
@media (max-width: 1080px) { .ij-blog .artgrid { grid-template-columns: minmax(0,1fr) !important; gap: 40px; } .ij-blog .artrail { position: static !important; } }
.ij-blog .toclink { display: block; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--color-text-secondary); transition: background 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1); }
.ij-blog .toclink:hover { background: var(--color-success-soft); color: var(--brand-green-dark); }
.ij-blog .sharebtn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 100px; background: #fff; border: 1px solid var(--color-border-strong); color: var(--color-text); transition: background 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1), border-color 200ms cubic-bezier(0.4,0,0.2,1); }
.ij-blog .sharebtn:hover { background: var(--slate-50); border-color: var(--color-text); color: var(--color-text); }

/* Article prose */
.ij-blog .artbody p { margin: 0 0 20px; font-size: 17px; line-height: 1.75; color: var(--color-text-secondary); text-wrap: pretty; }
.ij-blog .artbody h2 { margin: 56px 0 20px; font-size: 32px; line-height: 1.15; letter-spacing: -1.1px; font-weight: 600; color: var(--color-text); text-wrap: pretty; scroll-margin-top: calc(var(--hdr-bottom, 180px) + 24px); }
.ij-blog .artbody h3 { margin: 40px 0 16px; font-size: 22px; line-height: 1.25; letter-spacing: -0.6px; font-weight: 600; color: var(--color-text); }
.ij-blog .artbody h4 { margin: 32px 0 12px; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--color-text); }
@media (max-width: 600px) { .ij-blog .artbody h2 { font-size: 26px; letter-spacing: -0.8px; } }

.ij-blog .artbody ul,
.ij-blog .artbody ol { margin: 0 0 20px; padding-left: 24px; font-size: 17px; line-height: 1.75; color: var(--color-text-secondary); }
.ij-blog .artbody li { margin-bottom: 8px; }
.ij-blog .artbody li::marker { color: var(--brand-green); }

.ij-blog .artbody a,
/* The :hover/:focus variants are not redundant: without them this rule ties
   on specificity with the parent-theme reset in tokens.css and is decided by
   file load order alone. */
.ij-blog .artbody a:hover,
.ij-blog .artbody a:focus { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.ij-blog .artbody strong { color: var(--color-text); font-weight: 600; }

.ij-blog .artbody img,
.ij-blog .artbody .wp-block-image img { border-radius: var(--radius-media); height: auto; max-width: 100%; }
.ij-blog .artbody figure { margin: 40px 0; }
.ij-blog .artbody figcaption { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--color-text-tertiary); text-align: center; }

.ij-blog .artbody blockquote { margin: 40px 0; padding: 24px 32px; border-left: 3px solid var(--brand-green); background: var(--color-success-soft); border-radius: 0 var(--radius-16) var(--radius-16) 0; }
.ij-blog .artbody blockquote p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--color-text); font-weight: 500; }
.ij-blog .artbody blockquote cite { display: block; margin-top: 12px; font-size: 14px; font-style: normal; color: var(--color-text-secondary); }

.ij-blog .artbody .wp-block-table { margin: 40px 0; overflow-x: auto; }
.ij-blog .artbody table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ij-blog .artbody th,
.ij-blog .artbody td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-border-strong); }
.ij-blog .artbody th { font-weight: 600; color: var(--color-text); background: var(--slate-50); }

.ij-blog .artbody .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-button); background: var(--brand-green); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.ij-blog .artbody .wp-block-button__link:hover { background: var(--brand-green-dark); color: #fff; }

.ij-blog .artbody hr { margin: 48px 0; border: none; border-top: 1px solid var(--color-border-strong); }
.ij-blog .artbody pre { margin: 32px 0; padding: 24px; border-radius: var(--radius-16); background: var(--slate-900); color: #fff; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; }

/* Archive pagination */
.ij-blog .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; margin: 0 4px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-border-strong); font-size: 14px; font-weight: 600; color: var(--color-text); text-decoration: none; }
.ij-blog .page-numbers:hover { background: var(--color-success-soft); color: var(--brand-green-dark); }
.ij-blog .page-numbers.current { background: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.ij-blog .page-numbers.dots { background: transparent; border-color: transparent; }

/* Newsletter form — the design's single row: email field, then a pill
   Subscribe button beside it, and a 13px tertiary line underneath. Gravity
   Forms puts the button in .gform_footer, outside the fields, so the form
   itself is the grid and the two wrappers between are flattened with
   display:contents. Gravity Forms' own grid rules outrank plain selectors here,
   hence the !important on layout. The required consent checkbox stays (the form cannot
   submit without it) and takes the design's small-print line. The form is
   set to hidden labels, which this theme never styled, so do it here. */
.ij-blog .ij-newsletter-form form { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 16px; row-gap: 0; align-items: start; }
.ij-blog .ij-newsletter-form .gform_body,
.ij-blog .ij-newsletter-form .gform_fields { display: contents !important; }
.ij-blog .ij-newsletter-form form > *,
.ij-blog .ij-newsletter-form .gfield { grid-column: 1 / -1 !important; margin: 0 !important; padding: 0; min-width: 0; }
.ij-blog .ij-newsletter-form .gfield.gfield--type-email { grid-column: 1 !important; grid-row: 1 !important; }
.ij-blog .ij-newsletter-form .gform_footer { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; padding: 0 !important; }
.ij-blog .ij-newsletter-form .gfield--type-consent { grid-row: 2 !important; margin-top: 16px !important; border: 0; font-size: 13px; color: var(--color-text-tertiary); }
.ij-blog .ij-newsletter-form .gfield--type-email > .gfield_label,
.ij-blog .ij-newsletter-form .gfield--type-consent > legend { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ij-blog .ij-newsletter-form .ginput_container_consent { display: flex; align-items: center; gap: 8px; }
.ij-blog .ij-newsletter-form .ginput_container_consent input { margin: 0; flex: none; }
.ij-blog .ij-newsletter-form .gfield_consent_label { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--color-text-tertiary); }
.ij-blog .ij-newsletter-form input[type="email"] { width: 100%; box-sizing: border-box; padding: 14px 20px !important; border-radius: 12px !important; background: #fff; border: 1px solid var(--color-border-strong) !important; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--color-text); outline: none; }
.ij-blog .ij-newsletter-form .gform_button { padding: 14px 28px !important; border: none !important; border-radius: 100px !important; background: var(--brand-green) !important; color: #fff !important; font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: normal; cursor: pointer; }
.ij-blog .ij-newsletter-form .gform_button:hover { background: var(--brand-green-dark) !important; }
.ij-blog .ij-newsletter-form .gform_confirmation_message { font-size: 16px; color: var(--brand-green-dark); font-weight: 600; }
.ij-blog .ij-newsletter-form .validation_message { margin-top: 8px; font-size: 13px; }
/* The design's row wraps once the field would drop under 220px: button on its own line. */
@media (max-width: 560px) {
	.ij-blog .ij-newsletter-form form { grid-template-columns: minmax(0, 1fr) !important; }
	.ij-blog .ij-newsletter-form .gform_footer { grid-column: 1 !important; grid-row: 2 !important; margin-top: 16px !important; }
	.ij-blog .ij-newsletter-form .gfield--type-consent { grid-row: 3 !important; }
}

/* ---- Trending grid on narrow screens: the design's "om-trend-mobile" block (2026-10-05).
   Without min-width:0 a one-line (nowrap) card title stretched its card past the screen
   at 561-1100px and made the whole blog page scroll sideways. */
.ij-blog .trendgrid * { min-width: 0; }
.ij-blog .trendgrid .postcard > * { max-width: 100%; }
@media (max-width: 1100px) {
	.ij-blog .trendgrid { gap: 32px !important; margin-top: 48px !important; }
	.ij-blog .trendgrid a > div:first-child { height: auto !important; min-height: 0 !important; flex: none !important; }
	.ij-blog .trendgrid a > div:first-child > img { position: static !important; display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; }
}
@media (max-width: 560px) {
	.ij-blog .trendcol { gap: 28px !important; }
	.ij-blog .trendgrid [style*="nowrap"] { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
	.ij-blog .trendgrid .postcard-t, .ij-blog .postgrid .postcard-t { font-size: 18px !important; line-height: 1.35 !important; letter-spacing: -0.3px !important; }
	.ij-blog .postgrid p, .ij-blog .postgrid [style*="font-size:16px"] { font-size: 15px !important; line-height: 1.6 !important; }
	.ij-blog .trendgrid div[style*="font-size:14px"], .ij-blog .postgrid div[style*="font-size:14px"] { font-size: 13px !important; }
	.ij-blog .trendgrid p { font-size: 15px !important; line-height: 1.6 !important; }
	.ij-blog .trendgrid * { overflow-wrap: anywhere; }
}

/* "Stay in the loop" as the design (2026-10-07): the email field and the
   Subscribe button on one row, no visible label (the placeholder carries it). */
.ij-blog .ij-newsletter-form form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.ij-blog .ij-newsletter-form .gform_body { flex: 1 1 220px; min-width: 220px; }
.ij-blog .ij-newsletter-form .gform_footer { flex: 0 0 auto; margin: 0 !important; }
.ij-blog .ij-newsletter-form .gfield--type-email > .gfield_label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ij-blog .ij-newsletter-form .gform_validation_errors { flex: 1 1 100%; order: -1; }