/* Deepglot language switcher — appearance is driven by admin options,
   so adding new switcher_* values in Options.php should be paired with
   a matching block here.

   Markup contract (mirrors Weglot's <aside> + <input type=checkbox>
   pattern so the same CSS hooks work and the dropdown is JS-free):

     <aside class="deepglot-switcher deepglot-switcher--{list|dropdown}
                  deepglot-switcher--flag-{style} deepglot-switcher--{position}"
            data-deepglot-no-translate tabindex="0" aria-expanded="false">
       <input id="dgXXXX" class="deepglot-choice" type="checkbox">
       <label for="dgXXXX" class="deepglot-current ...">
         <span class="deepglot-flag deepglot-flag--de"></span>
         <span class="deepglot-label">Deutsch</span>
       </label>
       <ul role="none">
         <li class="deepglot-li deepglot-lang-en" role="option" data-l="en" …>
           <a href="/en/" hreflang="en" role="option" data-deepglot-no-translate>…</a>
         </li>
       </ul>
     </aside>
*/

.deepglot-switcher {
  display: inline-flex;
  position: relative;
  font-family: inherit;
}

/* The checkbox drives the dropdown via :checked. Hide visually but
   keep it focusable so keyboard users can Space/Enter to toggle. */
.deepglot-switcher .deepglot-choice {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  margin: 0;
}

.deepglot-current {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.875rem;
  color: inherit;
  cursor: pointer;
  user-select: none;
}

.deepglot-switcher ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.deepglot-switcher li a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25rem 0.5rem;
  text-decoration: none;
  border-radius: 3px;
  font-size: 0.875rem;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.deepglot-switcher li a:hover,
.deepglot-switcher li a:focus {
  opacity: 1;
}

.deepglot-switcher li.deepglot-active a {
  opacity: 1;
  font-weight: 600;
}

/* In the inline (list) style, the always-visible <label> is redundant
   with the inline list — hide it. The active <li> already shows the
   current language. */
.deepglot-switcher--list .deepglot-current { display: none; }

/* -------------------------------------------------------------------------
   Flag rendering. Flags are emitted by the renderer as
   <span class="deepglot-flag deepglot-flag--{iso}">.
   We render the country flag emoji via ::before so we don't need to bundle
   SVG assets per release; CSS shape + finish modifiers below customise the
   visual treatment based on switcher_flag_style.
   ------------------------------------------------------------------------- */

.deepglot-flag {
  display: inline-block;
  width: 1.25em;
  height: 0.9em;
  line-height: 0.9em;
  font-size: 1.1em;
  vertical-align: middle;
  overflow: hidden;
  position: relative;
  text-align: center;
  background: #f3f3f3; /* fallback for emoji-less environments */
}

.deepglot-flag::before {
  content: "🏳️";
  display: block;
  line-height: 1;
  transform: translateY(-0.05em);
}

/* ISO 639-1 → most-recognised flag. Multi-country languages pick a
   conventional default; admins who want a different flag can override per
   language via switcher_custom_css. */
.deepglot-flag--de::before { content: "🇩🇪"; }
.deepglot-flag--en::before { content: "🇬🇧"; }
.deepglot-flag--fr::before { content: "🇫🇷"; }
.deepglot-flag--es::before { content: "🇪🇸"; }
.deepglot-flag--it::before { content: "🇮🇹"; }
.deepglot-flag--pt::before { content: "🇵🇹"; }
.deepglot-flag--nl::before { content: "🇳🇱"; }
.deepglot-flag--pl::before { content: "🇵🇱"; }
.deepglot-flag--ru::before { content: "🇷🇺"; }
.deepglot-flag--ja::before { content: "🇯🇵"; }
.deepglot-flag--zh::before { content: "🇨🇳"; }
.deepglot-flag--ar::before { content: "🇸🇦"; }
.deepglot-flag--cs::before { content: "🇨🇿"; }
.deepglot-flag--da::before { content: "🇩🇰"; }
.deepglot-flag--fi::before { content: "🇫🇮"; }
.deepglot-flag--sv::before { content: "🇸🇪"; }
.deepglot-flag--no::before { content: "🇳🇴"; }
.deepglot-flag--tr::before { content: "🇹🇷"; }
.deepglot-flag--ko::before { content: "🇰🇷"; }
.deepglot-flag--he::before { content: "🇮🇱"; }
.deepglot-flag--hu::before { content: "🇭🇺"; }
.deepglot-flag--ro::before { content: "🇷🇴"; }
.deepglot-flag--el::before { content: "🇬🇷"; }
.deepglot-flag--uk::before { content: "🇺🇦"; }
.deepglot-flag--bg::before { content: "🇧🇬"; }
.deepglot-flag--hr::before { content: "🇭🇷"; }
.deepglot-flag--sk::before { content: "🇸🇰"; }
.deepglot-flag--sl::before { content: "🇸🇮"; }
.deepglot-flag--th::before { content: "🇹🇭"; }
.deepglot-flag--vi::before { content: "🇻🇳"; }
.deepglot-flag--id::before { content: "🇮🇩"; }

/* Rectangle, matte (default). */
.deepglot-switcher--flag-rectangle_mat .deepglot-flag {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Rectangle, glossy — adds a subtle highlight overlay. */
.deepglot-switcher--flag-rectangle_glossy .deepglot-flag {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.18);
}

.deepglot-switcher--flag-rectangle_glossy .deepglot-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.0) 55%,
    rgba(0, 0, 0, 0.10) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Circle, matte. */
.deepglot-switcher--flag-circle_mat .deepglot-flag,
.deepglot-switcher--flag-circle_glossy .deepglot-flag {
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.deepglot-switcher--flag-circle_mat .deepglot-flag::before,
.deepglot-switcher--flag-circle_glossy .deepglot-flag::before {
  /* Scale the emoji up so the circle is fully covered by flag colour. */
  transform: scale(1.4) translateY(0);
  line-height: 1.1em;
}

.deepglot-switcher--flag-circle_glossy .deepglot-flag {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.18);
}

.deepglot-switcher--flag-circle_glossy .deepglot-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 30% 25%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.0) 50%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* -------------------------------------------------------------------------
   Label visibility
   ------------------------------------------------------------------------- */

.deepglot-label--sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* -------------------------------------------------------------------------
   Dropdown style — JS-free via input[type=checkbox] + :checked.
   Tap/click anywhere on the label toggles the checkbox; CSS reveals the
   <ul>. Works on touch devices where :hover sticks.
   ------------------------------------------------------------------------- */

.deepglot-switcher--dropdown {
  position: relative;
}

.deepglot-switcher--dropdown > ul {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  min-width: 9em;
  padding: 0.25rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: none;
  z-index: 999;
}

.deepglot-switcher--dropdown .deepglot-choice:checked ~ ul {
  display: flex;
}

/* Keep keyboard-only users in mind: focus-within reveals the menu too. */
.deepglot-switcher--dropdown:focus-within > ul {
  display: flex;
}

.deepglot-switcher--dropdown li {
  width: 100%;
}

.deepglot-switcher--dropdown li a {
  display: flex;
  width: 100%;
  padding: 0.4rem 0.85rem;
  border-radius: 0;
}

.deepglot-switcher--dropdown li.deepglot-active a {
  background: rgba(0, 0, 0, 0.04);
}

.deepglot-switcher--dropdown li a:hover,
.deepglot-switcher--dropdown li a:focus {
  background: rgba(0, 0, 0, 0.06);
}

.deepglot-switcher--dropdown .deepglot-current::after {
  content: "▾";
  font-size: 0.7em;
  opacity: 0.6;
  margin-left: 0.2em;
}

/* -------------------------------------------------------------------------
   Fixed-position variants (Weglot-style "floating button" UX).
   Combined with switcher_auto_inject they give the "install plugin →
   chip appears bottom-right of every page" out-of-the-box experience.
   ------------------------------------------------------------------------- */

.deepglot-switcher--fixed-bottom-right,
.deepglot-switcher--fixed-bottom-left,
.deepglot-switcher--fixed-top-right,
.deepglot-switcher--fixed-top-left {
  position: fixed;
  z-index: 999999;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.deepglot-switcher--fixed-bottom-right { bottom: 20px; right: 20px; }
.deepglot-switcher--fixed-bottom-left  { bottom: 20px; left: 20px; }
.deepglot-switcher--fixed-top-right    { top: 20px; right: 20px; }
.deepglot-switcher--fixed-top-left     { top: 20px; left: 20px; }

/* In a fixed slot the dropdown should flip up if anchored at the bottom
   so the menu doesn't get clipped under the viewport edge. */
.deepglot-switcher--fixed-bottom-right.deepglot-switcher--dropdown > ul,
.deepglot-switcher--fixed-bottom-left.deepglot-switcher--dropdown > ul {
  top: auto;
  bottom: calc(100% + 4px);
}
.deepglot-switcher--fixed-bottom-right.deepglot-switcher--dropdown > ul,
.deepglot-switcher--fixed-top-right.deepglot-switcher--dropdown > ul {
  left: auto;
  right: 0;
}