/*
 * Revia Homes - the social links (change round V3/B, decision log 26).
 *
 * One list, two places: the footer's row of marks (template-parts/social.php)
 * and the contact section's rows (template-parts/home/contact.php). The marks
 * are the platforms' own (inc/social-icons.php), painted with currentColor -
 * one colour, the surrounding text's, so they follow the theme and never
 * carry a brand colour of their own. Every value comes from tokens.css.
 *
 * The footer's links take the footer nav's colours (layout.css): the same
 * step at rest, the same gold on hover and focus - an icon is a link like the
 * words beside it. Measured pairs, from layout.css: --rh-body-dark on
 * --rh-ink-deep 8.86:1, --rh-gold-light 6.92:1; a mark needs 3:1 (WCAG 1.4.11).
 *
 * @package Revia_Homes
 */

/* --------------------------------------------------------------------------
 * The footer's row
 *
 * The list is pulled left by half the difference between the target and the
 * glyph, so the first mark's edge lines up with the wordmark above it rather
 * than its invisible hit square. A text link is padded by the same amount, so
 * its first letter stands where a mark would.
 * ----------------------------------------------------------------------- */

.rh-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rh-social-gap);
	margin-top: var(--rh-social-top);
	margin-left: calc((var(--rh-social-icon) - var(--rh-social-hit)) / 2);
	list-style: none;
	padding: 0;
}

.rh-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--rh-social-hit);
	height: var(--rh-social-hit);
	color: var(--rh-body-dark);
	transition: color var(--rh-t-header) var(--rh-ease);
}

.rh-social__link:hover,
.rh-social__link:focus-visible {
	color: var(--rh-gold-light);
}

.rh-social__link--text {
	padding-inline: calc((var(--rh-social-hit) - var(--rh-social-icon)) / 2);
	font-family: var(--rh-font-body);
	font-size: var(--rh-t-footer-nav);
	line-height: normal;
}

/*
 * The capitals are the VISIBLE text's only. On the link they reached the
 * screen-reader text too, and Chrome reads the name as rendered: measured,
 * "LINKEDIN REVIA HOMES KFT." - a company name some readers would spell out.
 */
.rh-social__text {
	letter-spacing: var(--rh-ls-footer-nav);
	text-transform: uppercase;
}

.rh-social .rh-social-icon {
	width: var(--rh-social-icon);
	height: var(--rh-social-icon);
}

/* --------------------------------------------------------------------------
 * In a contact row: the mark before the platform's name, in the label's own
 * colour and at the label's scale. The e-mail and phone rows carry no mark,
 * so this rule never touches them.
 * ----------------------------------------------------------------------- */

.rh-contact__label .rh-social-icon {
	display: inline-block;
	width: var(--rh-contact-icon);
	height: var(--rh-contact-icon);
	margin-right: var(--rh-contact-icon-gap);
	vertical-align: text-bottom;
}