/* Language control: a globe trigger that opens a small menu of language
   names written in their own language. No flags — see note at the foot. */
.lang { position: relative; flex: 0 0 auto; }

.lang-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.34rem 0.56rem 0.34rem 0.5rem;
    border: 1px solid var(--line, rgba(58, 42, 31, 0.13));
    border-radius: 999px;
    background: rgba(255, 252, 247, 0.62);
    color: var(--ink-soft, #6B5E55);
    cursor: pointer;
    /* Set separately, not via the `font` shorthand: Safari parses var()
       inside shorthands unreliably. */
    font-family: var(--sans, "Inter", -apple-system, sans-serif);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Safari can refuse to treat a <button> as a flex container. The global
   `svg { display: block }` then stacks the icons vertically. Laying the
   parts out as inline-block with margins keeps them on one line whether
   or not flex applies — and is ignored when it does. */
.lang-trigger > svg,
.lang-trigger > span {
    display: inline-block;
    vertical-align: middle;
}

.lang-trigger:hover { color: var(--ink, #211A16); border-color: rgba(58, 42, 31, 0.26); }
.lang-globe { width: 15px; height: 15px; flex: 0 0 auto; margin-right: 0.3rem; }
.lang-chev { width: 11px; height: 11px; flex: 0 0 auto; margin-left: 0.28rem; opacity: 0.65; transition: transform 0.24s var(--ease, ease); }
.lang[data-open] .lang-chev { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    right: 0;
    min-width: 176px;
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--line, rgba(58, 42, 31, 0.13));
    border-radius: 16px;
    background: rgba(255, 252, 247, 0.94);
    box-shadow: 0 18px 44px rgba(65, 40, 21, 0.16);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transform-origin: top right;   /* the menu grows from its trigger */
    animation: langMenuIn 0.18s var(--ease, ease) both;
}

.lang-menu[hidden] { display: none; }

@keyframes langMenuIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

.lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.56rem 0.68rem;
    border-radius: 11px;
    color: var(--ink-soft, #6B5E55);
    font-size: 0.86rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.lang-option:hover { background: rgba(58, 42, 31, 0.06); color: var(--ink, #211A16); }
.lang-option[aria-current="page"] { color: var(--ink, #211A16); font-weight: 750; }
.lang-check { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent, #B84F0A); opacity: 0; }
.lang-option[aria-current="page"] .lang-check { opacity: 1; }

.language-availability {
    margin-top: 1.25rem;
    color: var(--ink-soft, #6B5E55);
    font-size: 0.9rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.language-availability span[aria-hidden="true"] {
    margin-inline: 0.45rem;
    color: var(--accent, #B84F0A);
}

.language-suggestion {
    position: fixed;
    z-index: 10050;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    width: min(430px, calc(100% - 2rem));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: rgba(35, 26, 20, 0.96);
    box-shadow: 0 22px 64px rgba(35, 26, 20, 0.28);
    color: #FFF8EE;
    padding: 1rem;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.language-suggestion[hidden] {
    display: none;
}

.language-suggestion p {
    color: inherit;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.4;
}

.language-suggestion__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.language-suggestion__accept,
.language-suggestion__dismiss {
    border: 0;
    cursor: pointer;
    font: 700 0.76rem/1 var(--sans, "Inter", sans-serif);
    white-space: nowrap;
}

.language-suggestion__accept {
    border-radius: 999px;
    background: var(--accent-bright, #EE7817);
    color: #fff;
    padding: 0.72rem 0.9rem;
    text-decoration: none;
}

.language-suggestion__dismiss {
    background: transparent;
    color: #D7C9BE;
    padding: 0.6rem 0;
}

.language-suggestion__dismiss:hover {
    color: #fff;
}

@media (max-width: 860px) {
    .site-nav .lang {
        margin-left: auto;
    }
}

@media (max-width: 640px) {
    .page-nav-links {
        gap: 0.75rem;
    }

    .page-nav .lang {
        font-size: 0.68rem;
    }

    .language-suggestion {
        grid-template-columns: 1fr;
    }

    .language-suggestion__actions {
        justify-content: space-between;
    }
}

@media (max-width: 380px) {
    .page-nav-cta {
        padding-inline: 0.68rem;
    }

    .lang-trigger { padding-inline: 0.44rem; }
}

/* ─────────────────────────────────────────────────────────────
   Why there are no flags here.

   1. Flag emoji do not render on Windows. Windows shows the two
      letter codes ("RO", "US") instead of a flag, so a flag-based
      switcher is visibly broken for most desktop visitors.
   2. Flags are countries, not languages. Romanian is also spoken
      in Moldova, and English has no flag — a US flag is wrong for
      British or Irish readers, a UK flag is wrong for Americans.
   3. Colour-only cues are weak for accessibility and for anyone
      who does not recognise the flag at 20px.

   Apple, Google, Airbnb and Booking all avoid flags for language
   for these reasons. Two-letter codes in a segmented control read
   faster and stay correct.
   ───────────────────────────────────────────────────────────── */

.lang-trigger:active,
.lang-option:active { transform: scale(0.97); }

@media (prefers-reduced-transparency: reduce) {
    .lang-menu {
        background: #FFFCF7;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    .lang-menu, .lang-trigger { border-color: rgba(58, 42, 31, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
    .lang-menu { animation: none; }
}