/* =========================================================
   TCG — LANGUAGE SWITCH
   "EN / EL" in the desktop header and in the phone menu
   (includes/languages.php).
========================================================= */

.tcg-lang {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    line-height: 1;
}

.tcg-lang .tcg-lang__link {
    position: relative;
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .14em;
    text-decoration: none;
    opacity: .5;
    transition: opacity .18s ease;
}

.tcg-lang .tcg-lang__link:hover,
.tcg-lang .tcg-lang__link.is-current {
    opacity: 1;
}

.tcg-lang .tcg-lang__link + .tcg-lang__link::before {
    content: "/";
    margin-right: 7px;
    opacity: .45;
}

/* a finger-sized area around each of the two */
.tcg-lang .tcg-lang__link::after {
    content: "";
    position: absolute;
    inset: -14px -5px;
}

/* desktop header: with the links on its right-hand side, in their type and
   their colour (white on the bar at the top of a page, ink once scrolled) */
.tcg-lang--header {
    color: #ffffff;
}

body.tcg-has-scrolled .tcg-lang--header {
    color: #111111;
}

.tcg-lang--header .tcg-lang__link {
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.02em;
}

/* phone top bar: beside the menu button */
.tcg-lang--bar {
    gap: 5px;
    color: #111111;
}

.tcg-lang--bar .tcg-lang__link {
    font-size: 10.5px;
    letter-spacing: .1em;
}

.tcg-lang--bar .tcg-lang__link + .tcg-lang__link::before {
    margin-right: 5px;
}

/* phone menu: at the end of the row of links at its foot */
.tcg-lang--menu {
    margin-left: auto;
    color: #111111;
}