/* components/links.css
   Tappable contact details and touch-target sizing.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.social-icon {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-3);
	transition: color 0.15s;
}

.social-glyph { display: block; }

/* Phone, email and address links appear on the navy top bar, the dark footer and the
   white contact panel, so they inherit their colour and signal themselves with an
   underline on hover rather than a fixed link colour. */
.contact-link {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.15s, color 0.15s;
}

.contact-link:hover,
.contact-link:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.contact-sep { opacity: 0.55; }

.directions-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--navy);
}

.directions-link:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* WCAG 2.5.8 asks for 24x24 minimum on anything you tap. Every link below was only as
   tall as its own line - 17px to 21px - which is a poor target on a phone.
   Inline links grow by padding: it enlarges the hit area without moving the text or
   the lines around it. Links that are flex items cannot use padding without changing
   the layout, so those get a min-height and centre their text instead. */
.contact-link { padding: 4px 0; }

.directions-link {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}