/* ==========================================================================
   SoftCrafter language switcher
   ==========================================================================
   Two renderings:

   1. Inside the theme's header menu — one compact item that reuses the
      theme's own `menu-item-has-children` + `ul.sub-menu` dropdown. There is
      almost nothing to style here on purpose: the theme already handles the
      caret, the hover reveal, the panel and the mobile behaviour, so the item
      looks exactly like its neighbours and cannot fight the theme's CSS.

      (Three side-by-side pills used to live here. They cost ~200px, which
      pushed the Albanian menu — KRYEFAQJA / MARKETPLACE / PRODUKTET, the
      longest label set — onto a second row and doubled the header height.)

   2. Via the [sc_language_switcher] shortcode — a row of pills, for use
      outside the menu where width is not scarce.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) Header menu dropdown — only the state cues the theme cannot know about
   -------------------------------------------------------------------------- */

/* The language you are already reading. */
.sc-lang-submenu .sc-lang-option.is-current > a {
	font-weight: 700;
}

.sc-lang-submenu .sc-lang-option.is-current > a::before {
	content: "\2022";      /* bullet */
	display: inline-block;
	width: 1em;
	margin-left: -1em;
	opacity: .7;
}

/* No translation yet — the link goes to that language's homepage instead. */
.sc-lang-submenu .sc-lang-option.no-translation > a {
	opacity: .55;
}

/* Keep the two-letter trigger from being mistaken for a word. */
.sc-lang-switcher-item > .sc-lang-current {
	text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   2) Shortcode pills
   -------------------------------------------------------------------------- */

.sc-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid rgba(128, 128, 128, .28);
	border-radius: 999px;
	line-height: 1;
	vertical-align: middle;
}

.sc-lang-switcher .sc-lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 6px 9px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	opacity: .62;
	transition: opacity .15s ease, background-color .15s ease;
}

.sc-lang-switcher .sc-lang:hover,
.sc-lang-switcher .sc-lang:focus-visible {
	opacity: 1;
	background-color: rgba(128, 128, 128, .14);
}

.sc-lang-switcher .sc-lang.is-current {
	opacity: 1;
	background-color: rgba(128, 128, 128, .2);
	cursor: default;
}

.sc-lang-switcher .sc-lang.no-translation {
	opacity: .38;
}

@media (prefers-color-scheme: dark) {
	.sc-lang-switcher {
		border-color: rgba(200, 200, 200, .26);
	}
}