/**
 * Overrides for the IDP React menu (@idealista/menu).
 *
 * This file is manually maintained. Do NOT merge it with idp-menu.css —
 * that file is auto-generated by the Vite build and would overwrite these rules.
 *
 * Covers:
 *  - White variant: cancel the library's padding-bottom on .menu-wrapper
 *  - Luxury logo slot (IdpLuxuryLogo)
 *  - Language selector slot (IdpLanguageSelector)
 */

/* ============================================================
 * White variant padding-bottom reset
 *
 * @idealista/menu injects variant styles as inline CSS custom properties on
 * .menu-wrapper (--padding-bottom, --menu-bg-color, etc.) — no class or
 * data-attribute is added for the variant, so CSS cannot target White alone.
 *
 * In practice this rule is White-only: Default and Home already set
 * --padding-bottom to "0" via inline style, so overriding padding-bottom
 * here has no visible effect on them. Only White sets it to
 * var(--dimension-x300), which this rule cancels.
 *
 * If the library ever exposes a data-variant attribute, scope this to
 * #idp-menu-root .menu-wrapper[data-variant="white"] instead.
 * ============================================================ */
#idp-menu-root .menu-wrapper {
  padding-bottom: 0;
}

/* ============================================================
 * Custom logo slot (IdpLogo)
 *
 * Aligns the custom logo anchor and constrains the image height to match
 * @idealista/menu's default logo height (24px), letting width scale
 * proportionally. Works for both single-image and responsive <picture>.
 * ============================================================ */
#idp-menu-root .idp-menu-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

#idp-menu-root .idp-menu-logo__img {
  height: 24px;
  width: auto;
  display: block;
}

/* ============================================================
 * Language selector — custom path-based selector (IdpLanguageSelector)
 *
 * @idealista/menu ships its own LanguageSelector, but it switches language
 * by code — not by URL — which breaks path-based translation (e.g.
 * /sala-de-prensa/ ↔ /press-room/). We replace it with IdpLanguageSelector,
 * which reads drupalSettings.idpMenu.languages (built by PHP via
 * LanguageManager::getLanguageSwitchLinks()) and navigates to the actual
 * translated path.
 *
 * Integration: IdpLanguageSelector is mounted as the `Shortcuts` slot of
 * <Menu> — the library renders Shortcuts OR the native LanguageSelector, so
 * providing the slot removes the native one from the header automatically.
 * `allowedLanguages={[]}` is passed to <Menu> to also suppress the native
 * selector in the drawer (empty list → renders nothing).
 *
 * CSS strategy:
 *   1. Hide ALL .language-selector__select globally (belt-and-suspenders for
 *      any remaining native instance — e.g. if allowedLanguages is later
 *      removed or the library's render logic changes).
 *   2. Re-show ONLY inside .shortcuts__slot (our IdpLanguageSelector lives
 *      there) — this is the custom selector, not the native one.
 *
 * Visual styles (trigger, options, flags, hover, check) come entirely from
 * @idealista/menu/bundled-css via the language-selector__* classes. Only
 * layout/visibility overrides are needed here.
 * ============================================================ */

/* 1. Suppress the native selector everywhere — including inside the drawer,
 *    which @idealista/menu renders via a React Portal OUTSIDE #idp-menu-root.
 *    Scoping this rule to #idp-menu-root would miss the portaled drawer. */
.language-selector__select {
  display: none !important;
}

/* 2. Re-enable our custom selector inside the Shortcuts slot (header).
 *    The Shortcuts slot IS inside #idp-menu-root — scope it to avoid
 *    accidentally re-enabling the native selector anywhere else. */
#idp-menu-root .shortcuts__slot .language-selector__select {
  display: grid !important;
}

/* Reset the Drupal theme's button styles for the language trigger in the
 * header (Shortcuts slot — inside #idp-menu-root, protected by the theme's
 * :not(:where(#idp-menu-root *)) guard, but reset defensively). */
#idp-menu-root .shortcuts__slot .language-selector__trigger {
  appearance: none;
  background-color: transparent;
  border: var(--dimension-x050, 1px) solid transparent;
  border-radius: var(--dimension-x100, 0.25rem);
  box-shadow: none;
  color: inherit;
  font: inherit;
  padding: 2px;
}

#idp-menu-root .shortcuts__slot .language-selector__trigger:hover {
  background-color: transparent;
  box-shadow: none;
  cursor: pointer;
}

/* Reset for the drawer trigger — portaled OUTSIDE #idp-menu-root, so the
 * theme's :not(:where(#idp-menu-root *)) guard does NOT protect it.
 * Mirrors .idn-drawer-language .language-selector__trigger in news. */
.idp-drawer-language .language-selector__trigger {
  width: 100%;
  appearance: none;
  min-height: unset;
  padding: 0;
  padding-left: 2px;
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: unset;
  border: var(--dimension-x050, 1px) solid transparent;
  border-radius: var(--dimension-x100, 0.25rem);
  box-shadow: none;
}

.idp-drawer-language .language-selector__trigger:hover {
  background-color: transparent;
  box-shadow: none;
  cursor: pointer;
}

/* option text colour — prevent the Drupal theme link colour from overriding
 * the library's default (dark text on light background). */
#idp-menu-root .shortcuts__slot .language-selector__option {
  color: #141414; /* --color-core-content-primary */
  text-decoration: none;
}

#idp-menu-root .shortcuts__slot .language-selector__option:hover {
  color: #141414;
  text-decoration: none;
}

/* check icon alignment — same as news idn-menu-overrides.css. */
#idp-menu-root .shortcuts__slot .language-selector__option-check {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
}

/* ============================================================
 * Drawer language selector (IdpDrawerContent)
 *
 * Re-enable our IdpLanguageSelector inside the drawer. The drawer is rendered
 * via a React Portal OUTSIDE #idp-menu-root, so this rule must NOT be scoped
 * to that root — same approach as idn-menu-overrides.css in the news project.
 * ============================================================ */
.idp-drawer-language .language-selector__select {
  display: grid !important;
  width: 100%;
}

/* ============================================================
 * Hide the library's native DrawerLanguageSelector wrapper
 *
 * @idealista/menu always renders a DrawerContent + native LanguageSelector
 * between the two <hr> dividers in the non-logged drawer — it cannot be
 * replaced via slots. With allowedLanguages=[] it renders empty.
 *
 * We suppress the whole DrawerContent wrapper with :has() so the two
 * consecutive <hr> collapse. The first <hr> (before this block) is then
 * hidden with the adjacent sibling combinator to avoid a double divider.
 *
 * data-value is an attribute only present on the native selector, not on
 * our custom IdpLanguageSelector — this targets it precisely.
 * ============================================================ */
[data-testid="kiwi-drawer-content"]:has(.language-selector__select[data-value]) {
  display: none;
}
[data-testid="kiwi-drawer-content"]:has(.language-selector__select[data-value]) + [data-kiwi-divider] {
  display: none;
}