/*
 * Inca Culture Travel
 * Language switcher progressive fallback.
 *
 * This styling is intentionally independent of the Drupal
 * block machine ID. It applies only before the compact
 * JavaScript enhancement has completed.
 */

.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links > li {
  margin: 0;
  padding: 0;

  list-style: none;
}

.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links > li::marker {
  content: "";
}

.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-height: 32px;
  padding: 5px 7px;

  color: #132238;
  border-radius: 7px;

  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;
}

.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links a[hreflang="en"]::before,
.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links a[hreflang="es"]::before {
  content: "";

  display: inline-block;
  flex: 0 0 auto;

  width: 22px;
  height: 15px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links a[hreflang="en"]::before {
  background-image:
    url("/themes/custom/incaculturetravel/img/flags/en.svg");
}

.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links a[hreflang="es"]::before {
  background-image:
    url("/themes/custom/incaculturetravel/img/flags/es.svg");
}

.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links a:hover,
.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links a:focus-visible {
  background: rgba(0, 100, 148, 0.08);
  color: #002e5b;
}

.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links a.is-active,
.field--name-field-language-switcher
.block-language:not(.ict-header-lang-compact)
ul.links a[aria-current="page"] {
  background: rgba(184, 50, 18, 0.07);
  color: #9a3412;
}

@media (max-width: 767px) {

  .field--name-field-language-switcher
  .block-language:not(.ict-header-lang-compact)
  ul.links {
    gap: 5px;
  }

  .field--name-field-language-switcher
  .block-language:not(.ict-header-lang-compact)
  ul.links a {
    padding: 5px;
    font-size: 12px;
  }

  .field--name-field-language-switcher
  .block-language:not(.ict-header-lang-compact)
  ul.links a[hreflang="en"]::before,
  .field--name-field-language-switcher
  .block-language:not(.ict-header-lang-compact)
  ul.links a[hreflang="es"]::before {
    width: 20px;
    height: 14px;
  }
}