/*
Theme Name: Mokko (Child Theme)
Theme URI: http://madsparrow.us/
Author: Mad Sparrow
Author URI: https://themeforest.net/user/madsparrow
Description: Mokko Creative Agency and Portfolio Theme – The theme is built to take advantage of the Full Site Editing features introduced in WordPress and Elementor plugin, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Tags: one-column, two-columns, right-sidebar, custom-menu, post-formats, sticky-post, translation-ready, page transition
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mokko
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Template: mokko
*/

/* Add your own modification from here
-------------------------------------------------------------- */


/* ==========================================================================
   SELETOR DE IDIOMA — HEADER SCRIPTUS
   Alinhado ao padrão dos demais ícones (ms-h_w) + globo/bandeira (Elementor)
   ========================================================================== */

/* --------------------------------------------------------------------
   CONTAINER PRINCIPAL
   -------------------------------------------------------------------- */
.header__lang-switcher {
  display: flex;
  align-items: center;
  height: 36px;
  list-style: none;
  margin: 0;
  padding: 0 12px;
  border-radius: 40px;
  background-color: var(--color-contrast-lower);
}

.header__lang-switcher .pll-parent-menu-item {
  position: relative;
  list-style: none;
}

/* --------------------------------------------------------------------
   GATILHO (link clicável / bandeira / globo)
   -------------------------------------------------------------------- */
.header__lang-switcher .pll-parent-menu-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width:auto;
  height: 24px;
  position: relative;
  z-index: 10;
}

@media (max-width: 1024px) {
  .header__lang-switcher .pll-parent-menu-item > a {
    margin-left: 0px;
  }
}

/* Imagem de bandeira vinda do Polylang (<img> dentro do <a>) */
.header__lang-switcher .pll-parent-menu-item > a img {
  width: 16px;
  height: 11px;
  display: block;
  pointer-events: none; /* garante que o clique sempre acerte o <a>, não a <img> */
}

/* --------------------------------------------------------------------
   GLOBO (Font Awesome, via <span> vazio dentro do <a>)
   -------------------------------------------------------------------- */
.header__lang-switcher .pll-parent-menu-item > a span:empty::before {
  content: "\f0ac";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  font-size: 16px;
  color: #FFFFFF;
  transition: color .3s ease;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.header__lang-switcher .pll-parent-menu-item:hover > a span:empty::before {
  color: #FF8E00;
}

/* --------------------------------------------------------------------
   BANDEIRA VIA ::after (baseada em html[lang])
   -------------------------------------------------------------------- */
.header__lang-switcher .pll-parent-menu-item > a::after {
  content: "";
  width: 16px;
  height: 11px;
  display: inline-block;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  margin-left: 2px;
  opacity: 0.95;
  transition: opacity .3s ease, transform .3s ease;
}

.header__lang-switcher .pll-parent-menu-item:hover > a::after {
  opacity: 1;
  transform: scale(1.05);
}

/* Português (Brasil) */
html[lang="pt-BR"] .header__lang-switcher .pll-parent-menu-item > a::after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAn1BMVEUAYQAAWwAAUgAARwAAOgAALgAAIwB/voB4uni242pttG1kr2Rdq11RpFEAGAD9/Uv8/VT690U/mz83lTguki4ADQCp2lJ3d+Q+dfpkaun47zii1B9IoEhgslHOy6fZ5virw/Iubfhsc6v29iMfih+Wy3Nbg+lzm/m61vd+oNr08hZ2uDcAAQCPlLSuraIzmA8yjzKw3z8nXvcTgxM1pTDYD/UeAAAAfUlEQVR4AUWIA3oFMBCE/4mT2nbvf6biQ91n27tjAaDNi7gaFuLAIexiUDc6QKUfhKaVva5Dh/Xu3rwrqYPTzfeYVNvrRvUiUUbvO5hIVR0f8f7TYCo797+6POgOqtm9n8nGQ1qP/395v7cHw4FsQohnXhE3DOSQSETOmN8EHiUfBxs2q7sAAAAASUVORK5CYII=");
}

/* Inglês (EUA) */
html[lang="en-US"] .header__lang-switcher .pll-parent-menu-item > a::after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAmVBMVEViZsViZMJiYrf9gnL8eWrlYkjgYkjZYkj8/PujwPybvPz4+PetraBEgfo+fvo3efkydfkqcvj8Y2T8UlL8Q0P8MzP9k4Hz8/Lu7u4DdPj9/VrKysI9fPoDc/EAZ7z7IiLHYkjp6ekCcOTk5OIASbfY/v21takAJrT5Dg6sYkjc3Nn94t2RkYD+y8KeYkjs/v7l5fz0dF22YkjWvcOLAAAAgElEQVR4AR2KNULFQBgGZ5J13KGGKvc/Cw1uPe62eb9+Jr1EUBFHSgxxjP2Eca6AfUSfVlUfBvm1Ui1bqafctqMndNkXpb01h5TLx4b6TIXgwOCHfjv+/Pz+5vPRw7txGWT2h6yO0/GaYltIp5PT1dEpLNPL/SdWjYjAAZtvRPgHJX4Xio+DSrkAAAAASUVORK5CYII=");
}

/* Fallback: idioma não mapeado, remove bandeira */
html:not([lang="pt-BR"]):not([lang="en-US"]) .header__lang-switcher .pll-parent-menu-item > a::after {
  display: none;
}

/* --------------------------------------------------------------------
   DROPDOWN (SUBMENU DE IDIOMAS) — controlado via JS (.is-open)
   -------------------------------------------------------------------- */
.header__lang-switcher .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background-color: var(--color-contrast-lower);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 8px;
  margin: 0;
  list-style: none;
  z-index: 20;
  min-width:100%;
}

.header__lang-switcher .pll-parent-menu-item.is-open .sub-menu {
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 8px;
}

.header__lang-switcher .sub-menu li {
  list-style: none;
}

/* Esconde o idioma atualmente ativo dentro do dropdown */
.header__lang-switcher .sub-menu li.current-lang {
  display: none !important;
}

/* Alinhamento dos itens de idioma dentro do dropdown */
.header__lang-switcher .sub-menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.header__lang-switcher .sub-menu img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------
   RESPONSIVO — MESMO PADRÃO DE .header__search-icon / .main-header__cart
   -------------------------------------------------------------------- */
@media only screen and (max-width: 1023px) {
  .header__lang-switcher .pll-parent-menu-item > a {
    width: 36px;
    height: 36px;
  }
  
    .header__lang-switcher .pll-parent-menu-item > a::after,
.header__lang-switcher .pll-parent-menu-item > a::before {
  display: none !important;
  content: none !important;
}
}