/* =========================================================================
   WCLOCKS — language switcher
   =========================================================================

   Two placements, one component:

     .wcl-lang--header   desktop, inside .wcl-hd-icons, left of search.
                         Focal puts its cross-border form in
                         header__secondary-links immediately before
                         header__icon-list; this is the same slot.

     .wcl-lang--drawer   mobile, in the navigation drawer's footer row beside
                         the account link — again where Focal puts it.

   Measured off the live storefront rather than guessed:

     trigger   11px Montserrat, letter-spacing .44px, no uppercase,
               colour #282828, padding 6px 11px, 5px gap to the chevron
     panel     white, 1px #ececec, 10px radius, 0 16px 44px rgba(0,0,0,.12)
     item      13px Montserrat, left aligned, #282828

   Built on <details>, so the open/closed state needs no JavaScript. The
   marker is removed on both engines — Safari still ships ::-webkit-details-
   marker and ignores `display: list-item` changes.
   ====================================================================== */

.wcl-lang {
	position: relative;
}

.wcl-lang > summary {
	list-style: none;
	cursor: pointer;
}

.wcl-lang > summary::-webkit-details-marker {
	display: none;
}

.wcl-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px;
	font-family: var(--text-font-family);
	font-size: 11px;
	letter-spacing: 0.44px;
	line-height: 1.7;
	color: rgb(var(--header-text-color));
	white-space: nowrap;
	border-radius: 999px;
	transition: background-color 0.2s ease;
}

.wcl-lang-btn:hover,
.wcl-lang[open] > .wcl-lang-btn {
	background: rgba(0, 0, 0, 0.04);
}

.wcl-lang-chev {
	transition: transform 0.2s ease;
	flex: none;
}

.wcl-lang[open] .wcl-lang-chev {
	transform: rotate(180deg);
}

/* ---- the panel ------------------------------------------------------- */

.wcl-lang-menu {
	position: absolute;
	z-index: 60;
	min-width: 143px;
	padding: 6px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
}

.wcl-lang--header .wcl-lang-menu {
	top: calc(100% + 8px);
	right: 0;
}

.wcl-lang-item {
	display: block;
	padding: 8px 10px;
	font-family: var(--text-font-family);
	font-size: 13px;
	line-height: 1.73;
	text-align: left;
	text-decoration: none;
	color: rgb(var(--header-text-color));
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

.wcl-lang-item:hover,
.wcl-lang-item:focus-visible {
	background: rgba(0, 0, 0, 0.05);
	color: rgb(var(--header-text-color));
}

.wcl-lang-item.is-current {
	font-weight: 600;
	background: rgba(196, 160, 85, 0.12);
}

/* ---- desktop placement ----------------------------------------------- */

/*
 * The icon row is a flex line; the switcher joins it as a first child so it
 * reads left of search, and steps out of the way below the header breakpoint
 * where the drawer copy takes over.
 */
.wcl-hd-icons > .wcl-lang--header {
	order: -1;
	margin-right: 2px;
}

@media (max-width: 1024px) {
	.wcl-lang--header {
		display: none;
	}
}

/* ---- drawer placement ------------------------------------------------ */

/*
 * The drawer footer is a dark bar, so this variant inverts: the same 12.5px
 * Montserrat at rgba(255,255,255,.82) that the account link beside it uses,
 * with a hairline box instead of a hover wash. Matches Focal, whose mobile
 * cross-border trigger measures the same.
 */
.wcl-lang--drawer {
	margin-left: auto;
}

.wcl-lang--drawer .wcl-lang-btn {
	padding: 6px 10px;
	font-size: 12.5px;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.82);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.wcl-lang--drawer .wcl-lang-btn:hover,
.wcl-lang--drawer[open] > .wcl-lang-btn {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--mnav-gold);
	color: var(--mnav-gold);
}

/*
 * Opening upward: the drawer footer is pinned to the bottom of the viewport,
 * so a panel dropped below it would be off-screen.
 */
.wcl-lang--drawer .wcl-lang-menu {
	bottom: calc(100% + 8px);
	right: 0;
}