/* The general page template.

   Scoped under .ij-page so the other ~521 Beaver Builder pages are
   untouched. Layout lives in the section renderer's inline styles, as on
   every other redesigned page; this file carries the prose typography,
   the interactive states an inline style attribute cannot express, and
   the breakpoints.

   Every value here resolves through a design-system token. All 173 of
   them are already in tokens.css, imported from the design's own `_ds/`
   files, so nothing below hardcodes a colour, radius, shadow or easing. */

.ij-page { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }
/* bb-theme's skin sets Helvetica on h1-h6 directly, so the headings do not
   inherit the design's face from .ij-page above. */
.ij-page h1, .ij-page h2, .ij-page h3, .ij-page h4 { font-family: var(--font-sans); }
.ij-page a { color: var(--color-link); text-decoration: none; }

/* ---- Parent-theme overrides ---------------------------------------------
   bb-theme/css/base.min.css underlines every link on hover and paints a
   system-blue focus ring, and Beaver Builder's generated skin carries
   `.fl-page-content a:hover { text-decoration: underline }` — which wraps
   this <main>. That selector scores 0-2-1 and both sheets load after this
   one, so a bare `.ij-page a:hover` would TIE and lose on load order. The
   leading `body` adds the element that settles it. */
body .ij-page a:hover, body .ij-page a:focus { text-decoration: none; }
body .ij-page a:focus { outline: none; }

.ij-page a:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 2px;
	border-radius: var(--radius-8);
}

/* ---- Prose ---------------------------------------------------------------
   The rich-text and two-column layouts take arbitrary editor content, so
   these rules are by element. This is the whole reason a page can be
   moved onto the template and immediately look like the design.

   The measurements are the design's own. `.artbody` in Blog Detail.dc.html
   is the only long-form body copy in the design repo, and it gives the
   paragraph and h2 rules verbatim; h3 and h4 come from the design
   system's base.css, through the tokens it defines. Nothing here is
   invented — where the design had no rule (lists, quotes) the body
   rhythm and the accent colour it does define are carried over.

   Spacing runs DOWNWARD: every block owns the gap beneath it. The design
   writes `margin:0 0 20px` on a paragraph and `margin:56px 0 20px` on a
   heading, so adjacent margins collapse to the larger of the two and a
   heading after a paragraph gets the design's 56px, not 76px. */

.ij-page .ij-page-prose {
	font-size: 17px;
	line-height: 1.75;
	color: var(--color-text-secondary);
}

/* The first block must not push the section's own padding down, and the
   last must not add to the padding beneath it. */
.ij-page .ij-page-prose > :first-child { margin-top: 0; }
.ij-page .ij-page-prose > :last-child { margin-bottom: 0; }

/* .artbody h2, verbatim. */
.ij-page .ij-page-prose h2 {
	margin: 56px 0 20px;
	font-size: var(--text-h2);
	line-height: 1.15;
	letter-spacing: -1.1px;
	font-weight: var(--weight-heading);
	color: var(--color-text);
	text-wrap: pretty;
}

/* h3 and h4 take the design system's scale rather than the ad-hoc 22px
   this file used to carry, which matched nothing in the design. */
.ij-page .ij-page-prose h3 {
	margin: 40px 0 16px;
	font-size: var(--text-h3);
	line-height: var(--leading-h3);
	letter-spacing: var(--tracking-h3);
	font-weight: var(--weight-heading);
	color: var(--color-text);
	text-wrap: pretty;
}

.ij-page .ij-page-prose h4 {
	margin: 32px 0 12px;
	font-size: var(--text-h4);
	line-height: var(--leading-h4);
	letter-spacing: var(--tracking-h4);
	font-weight: var(--weight-heading);
	color: var(--color-text);
	text-wrap: pretty;
}

/* .artbody p, verbatim. */
.ij-page .ij-page-prose p {
	margin: 0 0 20px;
	text-wrap: pretty;
}

.ij-page .ij-page-prose strong,
.ij-page .ij-page-prose b {
	font-weight: var(--weight-semibold);
	color: var(--color-text);
}

/* The design has no body-copy list, so these take the paragraph's own
   rhythm — the same 20px beneath the block, the same line height — and
   mark each item with the accent colour the design uses for links. */
.ij-page .ij-page-prose ul,
.ij-page .ij-page-prose ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.ij-page .ij-page-prose li { margin: 0 0 8px; }
.ij-page .ij-page-prose li:last-child { margin-bottom: 0; }
.ij-page .ij-page-prose li::marker {
	color: var(--color-text-accent);
	font-weight: var(--weight-semibold);
}

/* A nested list belongs to the item above it, so it does not restart the
   paragraph gap. */
.ij-page .ij-page-prose li > ul,
.ij-page .ij-page-prose li > ol {
	margin: 8px 0 0;
}

.ij-page .ij-page-prose img {
	max-width: 100%;
	height: auto;
	margin: 0 0 20px;
	border-radius: var(--radius-media);
}

.ij-page .ij-page-prose blockquote {
	margin: 0 0 20px;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--brand-green);
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text);
}

.ij-page .ij-page-prose hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--color-divider);
}

.ij-page .ij-page-prose table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
	font-size: 15px;
}

.ij-page .ij-page-prose th,
.ij-page .ij-page-prose td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--color-divider);
	text-align: left;
	vertical-align: top;
}

.ij-page .ij-page-prose th {
	font-weight: var(--weight-semibold);
	color: var(--color-text);
}

/* The design's own link treatment: the accent colour carries the link,
   with the underline held back for hover. base.css states
   `a{color:var(--color-link);text-decoration:none}` sitewide, and the
   prose had been overriding it with an inherited grey. */
.ij-page .ij-page-prose a,
.ij-page .ij-page-lead a {
	color: var(--color-link);
	text-decoration: none;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-page .ij-page-prose a:hover,
.ij-page .ij-page-prose a:focus-visible,
.ij-page .ij-page-lead a:hover,
.ij-page .ij-page-lead a:focus-visible {
	color: var(--color-link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Buttons ------------------------------------------------------------- */

.ij-page .ij-page-cta { transition: background var(--duration-base) var(--ease-standard); }

/* Colour restated alongside the background: without it, `color` falls
   through to the link hover colour and paints the label brand-orange. */
.ij-page .ij-page-cta:hover,
.ij-page .ij-page-cta:focus-visible {
	background: var(--brand-green-dark);
	color: #fff;
}

/* ---- Cards and steps ----------------------------------------------------- */

.ij-page .ij-page-card,
.ij-page .ij-page-step {
	transition: box-shadow var(--duration-base) var(--ease-standard),
		transform var(--duration-base) var(--ease-standard);
}

.ij-page .ij-page-card:hover,
.ij-page .ij-page-step:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(17, 16, 22, 0.05), 0 18px 44px rgba(17, 16, 22, 0.09);
}

/* (01) through (NN) share a column width. */
.ij-page .ij-page-step-n { font-variant-numeric: tabular-nums; }

/* Safari keeps an image's square corners over a rounded parent without
   this. */
.ij-page .ij-page-frame { isolation: isolate; }

/* ---- Split ---------------------------------------------------------------
   `is-reversed` puts the image first. Source order stays copy-then-image
   so a screen reader and a narrow viewport both read the copy first. */
.ij-page .ij-page-split.is-reversed .ij-page-split-media { order: -1; }

/* ---- FAQ disclosures -----------------------------------------------------
   The design marks each row with a plus that rotates into a cross when
   the row opens — 45 degrees is the whole animation, which is why the
   glyph is a plus and not a chevron. `.faq-chev` is shared with several
   other pages, so these rules stay scoped. */

.ij-page details > summary { list-style: none; cursor: pointer; }
.ij-page details > summary::-webkit-details-marker { display: none; }
.ij-page details > summary::marker { content: ''; }

.ij-page .faq-chev { transition: transform var(--duration-base) var(--ease-standard); }
.ij-page details[open] > summary .faq-chev { transform: rotate(45deg); }

.ij-page details > summary:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 4px;
	border-radius: var(--radius-8);
}

@media (prefers-reduced-motion: reduce) {
	.ij-page .ij-page-cta,
	.ij-page .ij-page-card,
	.ij-page .ij-page-step,
	.ij-page .faq-chev { transition: none; }

	.ij-page .ij-page-card:hover,
	.ij-page .ij-page-step:hover { transform: none; }
}

/* ---- Breakpoints ---------------------------------------------------------
   Hero, two-column, split, cards and FAQ are all auto-fit grids and
   collapse on their own. The step card's three fixed columns are what
   needs stating. */

@media (max-width: 900px) {
	.ij-page .ij-page-faq { gap: 48px !important; }

	/* Number and heading share the first row, body drops beneath. */
	.ij-page .ij-page-step {
		grid-template-columns: auto minmax(0, 1fr) !important;
		gap: 12px 20px !important;
	}

	.ij-page .ij-page-step p { grid-column: 1 / -1; }

	/* Below the split there is one column, so leading with the image
	   pushes the copy off the first screen. */
	.ij-page .ij-page-split.is-reversed .ij-page-split-media { order: 0; }
}

@media (max-width: 560px) {
	.ij-page .ij-page-hero h1 {
		font-size: 34px !important;
		letter-spacing: -1.2px !important;
	}

	.ij-page h2 {
		font-size: 28px !important;
		letter-spacing: -0.9px !important;
	}

	.ij-page .ij-page-prose { font-size: 16px; }
	.ij-page .ij-page-prose h2 { font-size: 26px !important; }

	/* h3 is 28px at desktop, which is larger than the capped h2 above —
	   it has to come down with it or the hierarchy inverts on a phone. */
	.ij-page .ij-page-prose h3 { font-size: 21px !important; line-height: 1.3 !important; }
	.ij-page .ij-page-prose h4 { font-size: 17px !important; }

	.ij-page details > summary { gap: 16px !important; }
}