/*
 * Icons.
 *
 * Each icon is an SVG data URI used as a CSS mask, so the glyph is painted in
 * currentColor. That is the whole reason for the mask rather than a background
 * image: the same markup works on bone, on teal and on ink without a second
 * copy of the file, and it inherits link hover colour for free.
 *
 * Template parts are plain HTML and cannot call PHP, so icons are applied by
 * class name. Add one with .ca-ico plus a modifier.
 *
 * The set is deliberately small and one visual family: 24px grid, 1.75 stroke,
 * round caps and joins. Anything new should match or it will read as clip art.
 */

.ca-ico {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

.ca-ico::before {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask: var(--ca-ico) center / contain no-repeat;
	mask: var(--ca-ico) center / contain no-repeat;
}

/* An icon that labels a field rather than a link sits a shade quieter. */
.ca-meta__label.ca-ico::before {
	opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   Contact and social
   ------------------------------------------------------------------------- */

.ca-ico--mail {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
}

.ca-ico--whatsapp {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2Zm5.8 14.03c-.24.68-1.42 1.31-1.95 1.36-.5.05-.98.24-3.3-.69-2.77-1.09-4.54-3.92-4.68-4.1-.14-.19-1.13-1.5-1.13-2.86 0-1.36.71-2.03.96-2.31.25-.28.55-.35.73-.35.18 0 .37 0 .53.01.17.01.4-.06.62.48.24.57.8 1.97.87 2.11.07.14.12.31.02.5-.09.19-.14.31-.28.47-.14.17-.29.37-.42.5-.14.14-.28.29-.12.57.16.28.72 1.18 1.54 1.92 1.06.94 1.95 1.24 2.23 1.38.28.14.44.12.6-.07.17-.19.69-.8.87-1.08.19-.28.37-.23.62-.14.25.09 1.6.75 1.87.89.28.14.46.21.53.33.07.11.07.66-.17 1.34Z'/%3E%3C/svg%3E");
}

.ca-ico--linkedin {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM3 9.5h4V21H3V9.5Zm6.5 0h3.8v1.57h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.76V21h-4v-5.3c0-1.27-.02-2.9-1.83-2.9-1.83 0-2.11 1.38-2.11 2.81V21h-4V9.5Z'/%3E%3C/svg%3E");
}

.ca-ico--instagram {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.4 6.6h.01'/%3E%3C/svg%3E");
}

.ca-ico--pin {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.69 7-11a7 7 0 1 0-14 0c0 5.31 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Field labels on the single templates
   ------------------------------------------------------------------------- */

.ca-ico--property {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='1.5'/%3E%3Cpath d='M8 7.5h2M14 7.5h2M8 11.5h2M14 11.5h2M10.5 20.5v-4h3v4'/%3E%3C/svg%3E");
}

.ca-ico--client {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.2'/%3E%3Cpath d='M3.5 19.5a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M16.2 6.3a3.2 3.2 0 0 1 0 6M17.5 19.5a5.6 5.6 0 0 0-2.1-4.4'/%3E%3C/svg%3E");
}

.ca-ico--year {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3.5v3M16 3.5v3'/%3E%3C/svg%3E");
}

.ca-ico--duration {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.2V12l3.1 1.9'/%3E%3C/svg%3E");
}

.ca-ico--role {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12.5' rx='2'/%3E%3Cpath d='M8.5 7.5V6a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v1.5M3 12.5h18'/%3E%3C/svg%3E");
}

.ca-ico--audience {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='3.2'/%3E%3Cpath d='M5.5 20a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E");
}

.ca-ico--doc {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8Z'/%3E%3Cpath d='M14 3.5V8h4.5M8.5 13h7M8.5 16.5h4.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Actions
   ------------------------------------------------------------------------- */

/*
 * Arrow into a tray, on the same 24px grid and 1.75 stroke as the rest. Drawn
 * as an outline rather than a solid glyph so it holds its weight next to the
 * outlined mail and pin icons instead of reading as a heavier second family.
 */
.ca-ico--download {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.75v10.5'/%3E%3Cpath d='m7.75 10 4.25 4.25L16.25 10'/%3E%3Cpath d='M4.5 16.25v2.25a1.75 1.75 0 0 0 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-2.25'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Checklist
   ------------------------------------------------------------------------- */

/*
 * A list of things to bring rather than a list of prose. The tick is drawn from
 * the same 24px grid as the icons above, so it sits in the family instead of
 * reading as a disc bullet that someone recoloured.
 */
.ca-checklist {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");

	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.ca-checklist li {
	display: grid;
	grid-template-columns: 1.05em 1fr;
	gap: 0.6em;
	align-items: start;
}

.ca-checklist li::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	/* Optical centring against the first line of text, not the box. */
	margin-block-start: 0.2em;
	background-color: var(--wp--preset--color--teal);
	-webkit-mask: var(--ca-ico) center / contain no-repeat;
	mask: var(--ca-ico) center / contain no-repeat;
}

.is-style-ink .ca-checklist li::before,
.is-style-teal .ca-checklist li::before {
	background-color: currentColor;
}

/* ---------------------------------------------------------------------------
   Controls

   Used by the testimonial carousel, which builds its arrows in JavaScript and
   therefore cannot ship an inline SVG from a pattern. Same 24px grid and 1.75
   stroke as the rest of the set.
   ------------------------------------------------------------------------- */

.ca-ico--arrow-left {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 6-6 6 6 6'/%3E%3C/svg%3E");
}

.ca-ico--arrow-right {
	--ca-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}