/**
 * DuSunnah Editorial Ornament System — placement.
 *
 * The ornaments are the LAST layer of the hierarchy: typography, then
 * whitespace, then rules, then these. So the rules here are almost entirely
 * about position and restraint — size, colour weight, and getting out of the
 * way at narrow widths.
 *
 * Every ornament takes the terracotta accent through currentColor, so it can
 * never be brighter or heavier than the heading hierarchy above it, and it
 * inverts correctly if it is ever placed on a dark ground.
 */

/*
 * The ornaments carry HERITAGE GOLD, not the interaction accent. Terracotta
 * means "this does something"; these marks do nothing - they are the
 * publication's manuscript inheritance. Keeping them gold also stops the page
 * implying that a seal or a divider is interactive.
 */
/*
 * ONE INHERITED INK. Every ornament on the page is set in the darker heritage
 * gold - seal, divider and marginal mark alike - so the system reads as a
 * single editorial ink rather than a palette. The lighter --gold stays defined
 * globally but is deliberately not used here; mixing the two within one article
 * would read as decoration rather than inheritance.
 *
 * Terracotta is never used for these: it means "this does something", and an
 * ornament does nothing.
 */
.dus-article .dus-orn {
	display: block;
	color: var(--gold-d);
	opacity: 1;
}

/* ============================================================ 04 MARGINAL */

/*
 * Editorial marginalia: the mark sits in the gutter BETWEEN the contents rail
 * and the reading column, not inside the text.
 *
 * Measured gutters: 72px at 1440 (rail 240 + gap 72, body starts x=505) and
 * 48px at 1100 (rail 210 + gap 48). The mark is 22px wide and centred in that
 * gap, so it clears the rail and the text on both sides at every desktop width
 * and can never reach the viewport edge.
 */
.dus-article__body figure.has-orn-margin {
	position: relative;
}

.dus-orn-margin {
	display: none;              /* desktop only; narrow layouts simplify below */
	position: absolute;
	top: 6px;
	left: -47px;                /* centres a 22px mark in the 72px gutter */
	width: 22px;
	pointer-events: none;
}

/* Colour comes from the one inherited ink above; only the size is set here. */
.dus-orn-margin .dus-orn {
	width: 22px;
	height: auto;
}

/*
 * The compact medallion is the narrow-width variant only.
 *
 * Scoped with .dus-article deliberately: the base rule above is
 * `.dus-article .dus-orn` (0,2,0), so a bare `.dus-orn--...` selector (0,1,0)
 * would lose to it and BOTH variants would paint, whatever the source order.
 * Every variant swap below carries the same scope for the same reason.
 */
.dus-article .dus-orn--marginal-mark-compact { display: none; }

/* The hadith/source figure carries its own right-hand rule; nudge clear of it. */
.dus-article__body figure.dus-source.has-orn-margin > .dus-orn-margin { top: 10px; }

@media (min-width: 1024px) {
	.dus-orn-margin { display: block; }
}

/* the gutter narrows to 48px here, so the mark narrows with it */
@media (min-width: 1024px) and (max-width: 1199px) {
	.dus-orn-margin { left: -34px; width: 18px; }
	.dus-orn-margin .dus-orn { width: 18px; }
}

/* ============================================================ 05 DIVIDER */

.dus-orn-divider {
	margin: 46px auto;
	max-width: 280px;
	color: var(--gold-d);
}

/*
 * height:auto, not a fixed height: the SVG now scales uniformly, so a fixed
 * height would reintroduce the aspect distortion that squashed the diamond.
 */
/* Strength comes from the one inherited ink; only the size is set here. */
.dus-orn-divider .dus-orn {
	width: 100%;
	height: auto;
}

/* ============================================================ 03 MINI ROSETTE */

/*
 * Deliberately unstyled, because it is deliberately unplaced. .dus-note already
 * signals its own transition with 40px of space, a hairline and a label; adding
 * a rosette on top of that was decoration, not structure. The asset remains in
 * ornaments.php for a future transition that genuinely needs a marker.
 */

/* ============================================================ 01 PRIMARY SEAL */

/*
 * END OF MAIN ARTICLE, said without a word of text. Footnotes and References
 * begin after it. A khatm: centred, small, flanked by two SHORT hairlines and
 * given air on both sides so the pause is read as structural rather than
 * decorative.
 *
 * The 36px below collapses with .dus-footnotes' own 36px margin-top, so the
 * gap under the seal stays 36px rather than stacking to 72px.
 */
.dus-orn-seal {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 36px 0;
}

.dus-orn-seal::before,
.dus-orn-seal::after {
	content: "";
	flex: 0 0 64px;             /* short rules, not full-measure ones */
	height: 1px;
	background: var(--line);
}

.dus-orn-seal .dus-orn {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}

/* ============================================================ NARROW */

@media (max-width: 1023px) {

	/*
	 * Below the rail breakpoint there is no gutter to sit in, so the marginal
	 * mark stops being marginal: it simplifies to the medallion alone, set
	 * above the quotation. Dropping the stems and dots keeps it recognisable
	 * without stealing width from the reading column.
	 */
	.dus-orn-margin {
		display: block;
		position: static;
		width: auto;
		margin: 0 0 10px;
	}

	/* swap the tall mark for the compact medallion */
	.dus-article .dus-orn--marginal-mark { display: none; }

	.dus-article .dus-orn--marginal-mark-compact {
		display: block;
		width: 17px;
		height: 17px;
	}

	.dus-article__body figure.dus-source.has-orn-margin > .dus-orn-margin { top: auto; }
}

@media (max-width: 767px) {

	.dus-orn-divider { margin: 36px auto; max-width: 210px; }

	.dus-orn-seal { gap: 14px; margin: 32px 0; }

	.dus-orn-seal::before,
	.dus-orn-seal::after { flex: 0 0 48px; }

	.dus-orn-seal .dus-orn { width: 28px; height: 28px; }
}

/* ============================================================ PRINT / CONTRAST */

@media print {
	.dus-article .dus-orn { color: #000; opacity: 1; }
}

@media (forced-colors: active) {
	.dus-article .dus-orn { color: CanvasText; opacity: 1; }
}