/* ===========================================================
   Rico Sabor — Menu / language-select page styles (menu.html)
   Shared design tokens & reset live in base.css.
   =========================================================== */
:root {
    --bg-soft:  #1a130d;
    --card-hi:  #2a1f17;
    --line:     rgba(244, 230, 193, 0.10);
    --radius:   12px;
}
html, body { height: 100%; }
body {
    line-height: 1.55;
    min-height: 100dvh;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(139, 30, 30, 0.30), transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(201, 161, 74, 0.10), transparent 70%);
    background-attachment: fixed;
    display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
h1, h2 { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.5px; }
a { color: inherit; text-decoration: none; }

/* ---------- HEADER ---------- */
header {
    text-align: center;
    padding: 2.5rem 1.5rem 1.5rem;
}
.logo-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--accent-2);
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.4rem; font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 20px rgba(139, 30, 30, 0.35);
}
h1 {
    font-size: clamp(2.2rem, 8vw, 3rem);
    margin-bottom: .35rem;
}
.brand-sub {
    color: var(--accent);
    font-size: .7rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.greeting {
    color: var(--ink-soft);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.4;
    min-height: 2.8rem;
}
.greeting .sub {
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-size: .75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .6rem;
}

/* ---------- LANGUAGE LIST ---------- */
main {
    flex: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 1rem 1.25rem 2rem;
}
.lang-list {
    list-style: none;
    display: flex; flex-direction: column;
    gap: .85rem;
}
.lang-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: background .2s, border-color .2s, transform .15s;
    min-height: 76px;
    position: relative;
}
.lang-card:hover,
.lang-card:focus-visible { background: var(--card-hi); border-color: var(--accent); outline: none; }
.lang-card:active { transform: scale(0.985); }
.lang-card.suggested {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--card-hi), var(--card));
}
.lang-card.suggested::after {
    content: "Suggested";
    position: absolute;
    top: -8px; right: 14px;
    background: var(--accent);
    color: var(--bg);
    font-size: .58rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.flag {
    font-size: 2.2rem;
    line-height: 1;
    flex-shrink: 0;
    width: 44px; text-align: center;
}
.lang-text { flex: 1; min-width: 0; }
.lang-name {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
}
.lang-action {
    font-size: .68rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .15rem;
}
.arrow {
    color: var(--accent);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform .2s;
    flex-shrink: 0;
}
.lang-card:hover .arrow { transform: translateX(4px); }

/* ---------- ACTIONS ---------- */
.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: 2rem;
}
.action-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .4rem;
    padding: 1rem .75rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--card);
    text-align: center;
    transition: border-color .2s, background .2s;
    min-height: 78px;
}
.action-btn:hover, .action-btn:focus-visible { border-color: var(--accent); outline: none; }
.action-btn .ico {
    font-size: 1.2rem; color: var(--accent);
    line-height: 1;
}
.action-btn .lbl {
    font-size: .7rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-soft);
}

/* ---------- FOOTER ---------- */
footer {
    text-align: center;
    padding: 2rem 1.5rem 2.5rem;
    font-size: .72rem;
    color: var(--muted);
    letter-spacing: 1px;
}
footer a { color: var(--accent); }
footer .row { margin-bottom: .5rem; }

@media (min-width: 540px) {
    header { padding-top: 3.5rem; }
    .lang-card { min-height: 84px; }
}