/* Islamic Finance page — a port of "Islamic Finance.dc.html".

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

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

/* ---- Parent-theme overrides ---------------------------------------------
   bb-theme's base sheet underlines links on hover and paints a system-blue
   focus ring, and Beaver Builder's skin adds `.fl-page-content a:hover`
   (0-2-1). Both load after this file, so the leading `body` is what lets
   these win rather than tie. */
body .ij-islamic-finance a:hover, body .ij-islamic-finance a:focus { text-decoration: none; }
body .ij-islamic-finance a:focus { outline: none; }
body .ij-islamic-finance p a:hover, body .ij-islamic-finance li a:hover, body .ij-islamic-finance strong a:hover { color: var(--brand-green); }

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

/* ---- Explainer cards ----------------------------------------------------- */

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

/* Colour restated: without it, `color` falls through to the link hover
   colour and paints the label. */
body .ij-islamic-finance .rescard:hover,
body .ij-islamic-finance .rescard:focus-visible {
	box-shadow: var(--shadow-overlay);
	transform: translateY(-2px);
	color: var(--color-text);
}

/* Photographs must never escape their rounded corners in Safari. */
.ij-islamic-finance .ifframe { isolation: isolate; }

/* ---- FAQ disclosures -----------------------------------------------------
   A plus that rotates 45 degrees into a cross when the row opens. */

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

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

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

@media (prefers-reduced-motion: reduce) {
	.ij-islamic-finance .rescard,
	.ij-islamic-finance .faq-chev { transition: none; }
	body .ij-islamic-finance .rescard:hover { transform: none; }
}

/* ---- Breakpoints ---------------------------------------------------------
   Every grid on the page is auto-fit, so the columns collapse on their
   own; what needs stating is the type scale and the gaps. On one column
   the photograph of a flipped row must still follow its text. */

@media (max-width: 860px) {
	.ij-islamic-finance .iffaq { gap: 48px !important; }
	.ij-islamic-finance .ifrow { gap: 40px !important; }
	.ij-islamic-finance .ifrow > .ifframe:first-child { order: 2; }
	.ij-islamic-finance .ifrow .ifframe { min-height: 380px !important; }
}

@media (max-width: 560px) {
	.ij-islamic-finance section { padding-left: 16px !important; padding-right: 16px !important; }
	/* The design's auto-fit minimums (300-340px) overflow a phone once the
	   gutter is taken off, so every grid goes to a single fluid column. */
	.ij-islamic-finance [style*="auto-fit"] { grid-template-columns: minmax(0, 1fr) !important; }

	.ij-islamic-finance h1 {
		font-size: 36px !important;
		letter-spacing: -1.4px !important;
	}

	.ij-islamic-finance h2 {
		font-size: 30px !important;
		letter-spacing: -1px !important;
	}

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