/* Additions on top of the original site.css. */

/* ---------- Language switch (HR / EN), styled like the theme switch ---------- */
.lang-switcher { text-decoration: none; }
.lang-switcher .lang-label {
    position: relative;
    z-index: 1;
    width: 18px;
    text-align: center;
    font: 800 .6rem/1 Manrope, sans-serif;
    letter-spacing: .02em;
    transition: color .22s;
}
html .lang-switcher[data-locale] .theme-switcher-thumb { transform: none; }
html .lang-switcher[data-locale=en] .theme-switcher-thumb { transform: translate(24px); }
.lang-switcher[data-locale=hr] .lang-hr,
.lang-switcher[data-locale=en] .lang-en { color: #242424; }
.lang-switcher .theme-switcher-track { padding: 0 4px; }

.lang-desktop { width: 54px; padding: 0; }
/* On phones the switch lives in the navigation sheet, next to the close button. */
.sheet-actions { display: flex; align-items: center; gap: 6px; }
.sheet-actions .lang-switcher { width: 54px; padding: 0; }
@media (max-width: 767px) {
    .lang-desktop { display: none; }
}

/* ---------- Menu hover effects ---------- */
.menu-disclosure > summary { transition: background-color .25s ease; }
.menu-disclosure .menu-expand-icon { transition: transform .3s ease, color .25s ease; }

.dish-card { position: relative; transition: background-color .3s ease; }
.dish-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--red);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.dish-top img { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.dish-portion strong { transition: color .2s ease; }
.dish-portion b { display: inline-block; transition: transform .2s ease; transform-origin: right center; }

.drink-card { transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, box-shadow .3s ease; }
.drink-card .drink-image img { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }

.addons-grid li { transition: border-color .2s ease, color .2s ease, transform .2s ease; }

@media (hover: hover) and (pointer: fine) {
    .menu-disclosure > summary:hover { background: color-mix(in srgb, var(--red) 7%, transparent); }
    .menu-disclosure > summary:hover .menu-expand-icon { color: var(--red); transform: scale(1.2); }
    .menu-disclosure[open] > summary:hover .menu-expand-icon { transform: rotate(45deg) scale(1.2); }

    .dish-card:hover { background: color-mix(in srgb, var(--red) 5%, transparent); }
    .dish-card:hover::before { transform: scaleY(1); }
    .dish-card:hover .dish-top img { transform: scale(1.07) rotate(-2deg); }
    .dish-portion:hover strong { color: var(--red); }
    .dish-portion:hover b { transform: scale(1.1); }

    .drink-card:hover {
        transform: translateY(-5px);
        border-color: var(--red);
        box-shadow: 0 14px 30px #0000002e;
    }
    .drink-card:hover .drink-image img { transform: translateY(-4px) scale(1.06) rotate(-3deg); }

    .addons-grid li:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .dish-card::before, .dish-top img, .dish-portion b, .drink-card, .drink-card .drink-image img, .addons-grid li,
    .menu-disclosure .menu-expand-icon { transition: none; }
    .dish-card:hover .dish-top img, .dish-portion:hover b, .drink-card:hover, .drink-card:hover .drink-image img,
    .addons-grid li:hover { transform: none; }
}

/* ---------- Social links: rounded box, white glyph, brand colour on hover ---------- */
.social-links > a.social-tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    border: 1px solid #ffffff47;
    border-radius: 13px;
    background: #ffffff0f;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .25s ease, box-shadow .25s ease;
}
.footer-links .social-links > a.social-tile { width: 44px; }
.social-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transform: scale(.6);
    border-radius: inherit;
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.social-tile-facebook::before { background: #1877f2; }
.social-tile-instagram::before { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-tile-tiktok::before { background: #010101; }
.social-glyph { display: inline-flex; width: 20px; height: 20px; font: 800 1rem/1 Manrope, sans-serif; transition: transform .25s ease; }
.social-glyph svg { width: 100%; height: 100%; }
.social-tile-tiktok .social-glyph { width: 18px; height: 18px; }

.social-links > a.social-tile:hover,
.social-links > a.social-tile:focus-visible {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 10px 22px #00000059;
}
.social-tile:hover::before,
.social-tile:focus-visible::before { opacity: 1; transform: scale(1); }
.social-tile:hover .social-glyph,
.social-tile:focus-visible .social-glyph { transform: scale(1.12); }
.social-tile-tiktok:hover .social-glyph { filter: drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55); }
.social-tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .social-links > a.social-tile, .social-tile::before, .social-glyph { transition: none; }
    .social-links > a.social-tile:hover { transform: none; }
}