/* Site-specific additions on top of the theme. Keep small; the theme's look is unchanged. */

/* Language switcher: pinned to the right edge of the header bar, vertically centred like the logo.
   The theme's desktop menu is right-aligned, so on desktop (the theme's 1200px breakpoint) the
   menu gets right padding to stop "Contact" running under the switcher. On smaller screens the
   menu collapses under the hamburger and the right edge is free. */
.header .lang-switch {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	line-height: 40px;
	font-weight: 600;
	letter-spacing: 1px;
	white-space: nowrap;
	z-index: 2;
}
.header .lang-switch a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	padding: 0 2px;
	display: inline-block;
}
.header .lang-switch a:hover,
.header .lang-switch a.active {
	color: #FFF;
}
.header .lang-switch a .flag {
	width: 20px;
	height: 15px;
	margin-right: 6px;
	vertical-align: -3px;
	border-radius: 2px;
	opacity: 0.7;
}
.header .lang-switch a:hover .flag,
.header .lang-switch a.active .flag {
	opacity: 1;
}
.header .lang-switch .sep {
	color: rgba(255, 255, 255, 0.3);
	padding: 0 6px;
}
@media (min-width: 1200px) {
	.header .top-menu {
		padding-right: 170px;
	}
}
/* Below the theme's desktop breakpoint the hamburger (.menu-btn, 30px wide) is pinned to the
   right edge of the header, so the switcher moves left of it. */
@media (max-width: 1199px) {
	/* The logo is in flow at the top here and the menu opens below inside .head-top, so a
	   50%-centred switcher would drift into the open menu: pin it to the logo's 40px line. */
	.header .lang-switch {
		right: 50px;
		top: 0;
		transform: none;
		line-height: 40px;
	}
}
/* Narrow phones: drop the separator and tighten spacing so logo, switcher and hamburger fit. */
@media (max-width: 360px) {
	.header .lang-switch {
		letter-spacing: 0;
		font-size: 12px;
	}
	.header .lang-switch .sep {
		display: none;
	}
	.header .lang-switch a {
		padding: 0 3px;
	}
	.header .lang-switch a .flag {
		margin-right: 4px;
	}
}

/* Skills: one icon-led row per group. The icon colour matches the theme accent that
   theme-colors/blue.css gives .service-items .service-item .icon (#4fcbe9). */
.skills-groups .skills-group {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.skills-groups .skills-group:first-child {
	padding-top: 0;
}
.skills-groups .skills-group:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.skills-groups .skills-icon {
	flex: 0 0 44px;
	font-size: 26px;
	line-height: 28px;
	color: #4fcbe9;
	text-align: center;
}
/* The theme's base h4 is #141414 (for its light panels); on the dark panel the headings vanished. */
.skills-groups .skills-body h4 {
	margin: 0 0 6px;
	font-size: 20px;
	line-height: 28px;
	color: #FFF;
}
.skills-groups .skills-body p {
	margin: 0;
}

/* Resume: two rows of two columns; space between the rows. */
.section.resume .cols + .cols {
	margin-top: 70px;
}