/**
 * documentLinks — document links in post content.
 *
 * documentLinks.php tags any <a> in the_content whose href points at a
 * downloadable document with .file-link plus a .file-link--{ext} modifier.
 * This sheet turns that into a document icon tinted by file type.
 *
 * Deliberately conservative: it sets NO colour, underline or font on the link
 * itself, so every school's brand link styling still wins. All it adds is the
 * icon. Schools that want more can build on it from smartCSS.
 *
 * Override a single type, or the lot, from smartCSS:
 *   .file-link            { --file-link-colour: #333; }
 *   .file-link--pdf       { --file-link-colour: rebeccapurple; }
 *   .file-link::before    { display: none; }   // opt out entirely
 */

.file-link {
	/* Fallback tint for any extension without its own rule below. */
	--file-link-colour: #9099ab;
	--file-link-size: 1em;
	--file-link-gap: .35em;

	/* Page-with-folded-corner. evenodd punches the corner back out. */
	--file-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-7-7Zm-1 2.4V9a1 1 0 0 0 1 1h4.6L12 4.4Z'/%3E%3C/svg%3E");
}

/*
 * Colours match the file-type palette smart-files already uses, so a link to a
 * spreadsheet reads the same green whether it came from the file browser or
 * from a hand-written link in a page.
 */
.file-link--pdf {
	--file-link-colour: #ef6161;
}

.file-link--doc,
.file-link--docx,
.file-link--rtf {
	--file-link-colour: #5b8ce6;
}

.file-link--xls,
.file-link--xlsx,
.file-link--csv {
	--file-link-colour: #5cc773;
}

.file-link--ppt,
.file-link--pptx {
	--file-link-colour: #fb915e;
}

.file-link--zip {
	--file-link-colour: #b08bd8;
}

.file-link--txt {
	--file-link-colour: #9099ab;
}

/*
 * mask-image lets one SVG take the per-type tint. Guarded, because without
 * mask support the icon would render as a solid coloured block — worse than no
 * icon at all. Browsers that fail the test simply get the link unchanged.
 *
 * The icon is decorative: empty content means screen readers skip it, and the
 * link text still carries the meaning. Type is never signalled by colour alone.
 */
@supports (mask-image: none) or (-webkit-mask-image: none) {
	.file-link::before {
		content: "";
		display: inline-block;
		width: var(--file-link-size);
		height: var(--file-link-size);
		margin-right: var(--file-link-gap);
		/* Sits the icon on the text baseline rather than the line box. */
		vertical-align: -.125em;
		background-color: var(--file-link-colour);
		-webkit-mask: var(--file-link-icon) no-repeat center;
		mask: var(--file-link-icon) no-repeat center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
}

/*
 * Parents print policy and newsletter pages. On paper a link is dead, so spell
 * the target out. attr() in content is the one form supported everywhere.
 */
@media print {
	.file-link::after {
		content: " (" attr(href) ")";
		font-size: .85em;
		word-break: break-all;
	}
}