/* Community Support page.

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

.ij-community { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }
.ij-community 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-community a:hover` would TIE and lose on load order.
   The leading `body` adds the element that settles it. */
body .ij-community a:hover, body .ij-community a:focus { text-decoration: none; }
body .ij-community a:focus { outline: none; }

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

/* ---- The call to action --------------------------------------------------
   Colour restated alongside the background: without it, `color` falls
   through to the link hover colour and paints the label brand-orange. */

.ij-community .cs-cta { transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); }

.ij-community .cs-cta:hover,
.ij-community .cs-cta:focus-visible {
	background: var(--brand-green-dark);
	color: #fff;
}

/* ---- Step cards ---------------------------------------------------------- */

.ij-community .csstep {
	transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* The step number is tabular so (01) through (05) share a column width. */
.ij-community .csstep-n { font-variant-numeric: tabular-nums; }

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

/* ---- 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 the FAQs, Am I
   Qualified and Residential pages, so these rules stay scoped. */

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

.ij-community .faq-chev { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.ij-community details[open] > summary .faq-chev { transform: rotate(45deg); }

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

@media (prefers-reduced-motion: reduce) {
	.ij-community .cs-cta,
	.ij-community .csstep,
	.ij-community .faq-chev { transition: none; }
	.ij-community .csstep:hover { transform: none; }
}

/* ---- Breakpoints ---------------------------------------------------------
   The hero and the FAQ are auto-fit grids and collapse on their own. The
   step card's three fixed columns are what needs stating. */

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

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

	.ij-community .csstep p { grid-column: 1 / -1; }
}

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

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

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