/* Project styles.
 *
 * assets/new/css/style.css is a PRE-BUILT Tailwind bundle and this project has no
 * Tailwind build step, so a utility class the vendor kit never used produces no rule
 * at all — the markup silently renders unstyled. Anything the bundle does not already
 * contain belongs here, as plain CSS.
 *
 * Loaded from templates/base/base.html, after style.css.
 */

/* ------------------------------------------------------------------ search form --
 * Field and button sit on one line. The button is a sibling of the input rather than
 * an overlay, so it can never cover the text being typed - which is what happened
 * when it was absolutely positioned and the padding utility meant to reserve space
 * for it did not exist in the bundle.
 */
.site-search {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.site-search--page {
  max-width: 560px;
  margin-inline: auto;
}

.site-search__input {
  flex: 1 1 auto;
  min-width: 0; /* lets the field shrink instead of overflowing its row */
}

.site-search__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* Under 576px the label goes and the button becomes a square icon, so the field keeps
 * as much of the row as possible on a phone. */
@media (max-width: 575.98px) {
  .site-search__button {
    width: 46px;
    padding-inline: 0;
  }
  .site-search__button-label {
    display: none;
  }
}

/* ------------------------------------------------------------- search results -- */
.search-panel {
  max-width: 720px;
  margin-inline: auto;
}

.search-results {
  list-style: none;
  margin: 2rem auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 860px;
}

.search-result__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Long unbroken strings (URLs, identifiers) must wrap rather than widen the card. */
.search-result__title,
.search-result__snippet {
  overflow-wrap: anywhere;
}

.search-result__title {
  margin: 0.25rem 0;
}

.search-result__kind {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.search-result__card {
  transition: background-color 0.3s ease;
}

.search-chips {
  margin-top: 2rem;
}

.search-pagination {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.search-ellipsis {
  padding-inline: 0.25rem;
  user-select: none;
}

.search-empty {
  margin-top: 2.5rem;
}

.search-empty__icon {
  font-size: 2.25rem;
  line-height: 1;
}

/* --------------------------------------------------------- header language --
 * The code next to the globe is dropped below 1280px: between 640px and 1024px the
 * header row also carries the search field and the Contact button while the burger is
 * still shown, and the label there costs room the row does not have.
 */
@media (max-width: 1279.98px) {
  .lang-code {
    display: none;
  }
}

.lang-menu {
  min-width: 10rem;
}

.lang-menu__item {
  width: 100%;
  text-align: start;
  margin: 0;
}

/* ------------------------------------------------------- footer language pair -- */
.lang-switch__form {
  margin: 0;
}

.lang-switch__button {
  transition: background-color 0.3s ease;
}

/* ------------------------------------------------------------- light-mode ground --
 * The bundle sets --theme-bg-default to pure #fff in light mode, while the section
 * cards use --neutral-100 (#F1F4F9). White ground under grey cards is what makes the
 * page read as flat and clinical.
 *
 * Softening the ground to a near-white brand tint keeps everything light but gives the
 * white/near-white surfaces something to sit on. The variable is overridden rather than
 * `body { background }` so the pre-loader (.loader-bg uses bg-theme-bg-default) and
 * anything else reading it stay in step.
 *
 * TUNING: change --site-ground only. Lighter to stronger:
 *     #FBFBFE  barely there
 *     #F8F9FD  current - subtle
 *     #F4F6FC  clearly tinted
 * Dark mode is untouched: the rule is scoped to data-pc-theme="light".
 */
[data-pc-theme="light"] {
  --site-ground: #F8F9FD;
  --theme-bg-default: var(--site-ground);
}

/* Sections that deliberately paint themselves white keep doing so, so the cards and
 * panels still lift off the new ground. */
[data-pc-theme="light"] .bg-theme-bg-paper {
  background-color: #ffffff;
}