/* ==========================================================================
   SámánKonyha – közös stíluslap
   Elvek: zöld a műveleteknek (gomb, link, fókusz), napsárga a melegséghez (aktív menü,
   csillagok, kiemelések; csak sötét szöveggel, soha nem szövegszínként), semleges skála,
   egy betűcsalád (Plus Jakarta Sans, a logó Pacifico), 12px alap térköz, vonalas ikonok, AA kontraszt.
   ========================================================================== */

/* ---------- 0. Betűtípusok (saját szerverről: a látogató IP-címe nem jut el harmadik félhez) ----------
   Plus Jakarta Sans és Pacifico, SIL Open Font License 1.1. A latin-ext rész kell az ő, ű betűkhöz. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/jakarta-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/jakarta-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/pacifico-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/pacifico-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. Tokenek ---------- */
:root {
    /* Színek */
    --c-bg: #F8F7F3;            /* oldal háttér */
    --c-surface: #FFFFFF;       /* kártya, panel */
    --c-surface-2: #F2F1EC;     /* beágyazott felület, input háttér */
    --c-border: #E6E4DE;
    --c-border-strong: #CFCCC4;
    --c-text: #26282C;
    --c-text-muted: #6B6B6B;    /* 5,0:1 a háttéren */
    --c-accent: #127A50;        /* 5,35:1 fehérrel */
    --c-accent-hover: #0F6B44;
    --c-accent-soft: #E8F4EE;
    --c-sun: #FFCA28;           /* napsárga: háttér sötét szöveggel (11:1), ikon, sáv */
    --c-sun-hover: #F5BC0F;
    --c-sun-soft: #FFF4D1;
    --c-sun-ink: #7A5600;       /* szöveg a halvány sárgán (6,4:1) */
    --c-danger: #B42318;
    --c-danger-soft: #FDECEA;
    --c-focus: #127A50;

    /* Betűk */
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-logo: 'Pacifico', cursive;
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;
    --fs-3xl: 36px;

    /* Térköz: 12px az alap elemköz */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;

    /* Lekerekítés, árnyék */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-full: 999px;
    --shadow-sm: 0 1px 2px rgba(38, 40, 44, .06);
    --shadow-md: 0 8px 24px rgba(38, 40, 44, .10);

    --sidebar-w: 248px;
    --content-max: 1680px;
    --reading-max: 1200px;
    --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 2. Alap ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
.icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-accent-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }
p { line-height: 1.6; }

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: var(--s-3); top: -60px; z-index: 2000;
    background: var(--c-text); color: #fff; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
    font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); color: #fff; }
.muted { color: var(--c-text-muted); }

/* ---------- 3. Elrendezés ---------- */
.logo {
    font-family: var(--font-logo);
    font-size: 26px;
    line-height: 1.2;
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
}
.logo:hover { color: var(--c-text); }

.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    padding: var(--s-5) var(--s-4);
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-2); }
.sidebar__head .sidebar__close { display: none; }

.nav { display: flex; flex-direction: column; gap: var(--s-1); }
.nav__item {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 10px var(--s-3);
    border-radius: var(--r-md);
    color: var(--c-text-muted);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav__item:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav__item.is-active { background: var(--c-sun); color: var(--c-text); }
.nav__item.is-active:hover { background: var(--c-sun-hover); }

.sidebar__user {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-border);
}
.user-chip {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-2);
    border-radius: var(--r-md);
    color: var(--c-text);
    text-decoration: none;
}
.user-chip:hover, .user-chip.is-active { background: var(--c-surface-2); color: var(--c-text); }
.user-chip__text { display: flex; flex-direction: column; min-width: 0; }
.user-chip__name { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip__sub { font-size: var(--fs-xs); color: var(--c-text-muted); }

.avatar {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: var(--r-full);
    background: var(--c-sun);
    color: var(--c-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--fs-sm);
}
.avatar--sm { width: 32px; height: 32px; font-size: var(--fs-xs); }
.avatar--soft { background: var(--c-accent-soft); color: var(--c-accent); }

.app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4) var(--s-6);
    position: sticky; top: 0; z-index: 50;
    background: rgba(248, 247, 243, .92);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid transparent;
}
.topbar .topbar__menu, .topbar .topbar__logo, .topbar .topbar__account { display: none; }

.search { position: relative; flex: 1; max-width: 440px; }
.search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-text-muted); pointer-events: none; }
.search__input {
    width: 100%;
    height: 44px;
    padding: 0 var(--s-4) 0 42px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    background: var(--c-surface);
    font-size: var(--fs-sm);
}
.search__input::placeholder { color: var(--c-text-muted); }
.search__input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.search__input::-webkit-search-cancel-button { cursor: pointer; }

.content {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    padding: var(--s-4) var(--s-6) var(--s-7);
}

.sidebar-backdrop { position: fixed; inset: 0; background: rgba(38, 40, 44, .45); z-index: 999; }

/* Lábléc */
.site-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-5) var(--s-6);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer__links a, .link-btn { color: var(--c-text-muted); text-decoration: none; }
.site-footer__links a:hover, .link-btn:hover { color: var(--c-text); text-decoration: underline; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font-size: inherit; }

/* Bejelentkezés, regisztráció, fiók: középre zárt kártya */
.auth-page {
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center;
    padding: var(--s-7) var(--s-4) 0;
    gap: var(--s-5);
}
.auth-card {
    width: 100%; max-width: 440px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--s-6);
}
.auth-page .site-footer { width: 100%; max-width: 440px; margin-top: auto; border-top: 0; justify-content: center; text-align: center; padding-inline: 0; }
.auth-card h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
.auth-card .lead { color: var(--c-text-muted); margin-bottom: var(--s-5); }
.auth-card__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-border); text-align: center; font-size: var(--fs-sm); color: var(--c-text-muted); }
.auth-card__foot--split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); text-align: left; }
.auth-card__foot a { display: inline-flex; align-items: center; gap: 6px; }

.plain-page { max-width: 760px; margin: 0 auto; padding: var(--s-7) var(--s-4) 0; }
.plain-page .site-footer { padding-inline: 0; margin-top: var(--s-7); }

/* ---------- 4. Összetevők ---------- */

/* Gombok */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 44px;
    padding: 0 var(--s-5);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .1s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn.is-loading { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-hover); color: #fff; }
.btn--secondary { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text); }
.btn--secondary:hover { border-color: var(--c-text); color: var(--c-text); }
.btn--ghost { background: transparent; color: var(--c-text); }
.btn--ghost:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn--danger { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-danger); }
.btn--danger:hover { background: var(--c-danger-soft); border-color: var(--c-danger); color: var(--c-danger); }
.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-xs); border-radius: var(--r-sm); }

.icon-btn {
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--c-text);
    text-decoration: none;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.icon-btn--bordered { border-color: var(--c-border); background: var(--c-surface); }
.inline-form { display: inline; margin: 0; }

/* Űrlap */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.field label, .label { font-size: var(--fs-sm); font-weight: 600; }
.field .hint { font-size: var(--fs-xs); color: var(--c-text-muted); }
.input, .field input, .field select, .field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    background: var(--c-surface);
    font-size: var(--fs-md);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea, textarea.input { min-height: 110px; resize: vertical; line-height: 1.5; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.field input[aria-invalid="true"] { border-color: var(--c-danger); }
.checkbox { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-accent); flex-shrink: 0; }
.form-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); font-size: var(--fs-sm); }

.password-meter { height: 4px; border-radius: 2px; background: var(--c-surface-2); overflow: hidden; margin-top: 6px; }
.password-meter__bar { height: 100%; width: 0; background: var(--c-border-strong); transition: width .2s var(--ease), background-color .2s var(--ease); }
.password-meter__bar.is-weak { width: 33%; background: var(--c-danger); }
.password-meter__bar.is-ok { width: 66%; background: var(--c-text-muted); }
.password-meter__bar.is-strong { width: 100%; background: var(--c-accent); }

/* Üzenetek */
.alert {
    display: flex; gap: var(--s-3); align-items: flex-start;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    margin-bottom: var(--s-4);
    border: 1px solid transparent;
}
.alert .icon { margin-top: 2px; }
.alert p { line-height: 1.5; }
.alert--success, .alert--info { background: var(--c-accent-soft); color: #0B5A3A; border-color: #CBE6D8; }
.alert--error { background: var(--c-danger-soft); color: var(--c-danger); border-color: #F4C7C2; }

/* Kártya */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}
.panel { padding: var(--s-5); }

/* Címkék, kategóriák */
.eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-accent); }
.chips { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip {
    display: inline-flex; align-items: center; min-height: 36px;
    padding: 0 var(--s-4);
    border-radius: var(--r-full);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.chip:hover { border-color: var(--c-text); color: var(--c-text); }
.chip.is-active { background: var(--c-text); border-color: var(--c-text); color: #fff; }
.chip--sm { min-height: 28px; padding: 0 var(--s-3); font-size: var(--fs-xs); }
.chip--soft { background: var(--c-accent-soft); border-color: transparent; color: var(--c-accent); }
.chip--soft:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* Csillagok */
.stars { display: inline-flex; gap: 2px; color: var(--c-border-strong); }
.star--on { color: var(--c-sun); }
.star--on .icon { fill: currentColor; }

/* Meta sor (idő, értékelés) */
.meta-item { display: inline-flex; align-items: center; gap: 6px; }
.meta-item .icon { color: var(--c-text-muted); }
.meta-item--rating .icon { color: var(--c-sun); fill: currentColor; }

/* Oldalfejléc */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin: var(--s-5) 0 var(--s-5); }
.page-title { font-size: var(--fs-3xl); letter-spacing: -.01em; max-width: 20ch; }
.page-intro { color: var(--c-text-muted); max-width: 65ch; margin-top: var(--s-2); }
.page-count { color: var(--c-text-muted); font-size: var(--fs-sm); }
.page-count strong { color: var(--c-text); font-size: var(--fs-xl); display: block; line-height: 1.1; }
.section-title { font-size: var(--fs-xl); margin-bottom: var(--s-4); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--c-text-muted); margin: var(--s-2) 0 var(--s-4); }
.breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-text); text-decoration: underline; }
.breadcrumb .icon { color: var(--c-border-strong); }

/* Recept rács és kártya */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-4);
}
.recipe-card {
    position: relative;
    display: flex;
    transition: border-color .15s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.recipe-card:hover { border-color: var(--c-sun); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.recipe-card__link {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
    padding: var(--s-5) var(--s-4) var(--s-4);
    text-align: center;
    color: var(--c-text);
    text-decoration: none;
    border-radius: inherit;
}
.recipe-card__link:hover { color: var(--c-text); }
.recipe-card__media {
    width: 136px; height: 136px;
    border-radius: var(--r-full);
    overflow: hidden;
    background: var(--c-sun-soft);
    box-shadow: 0 0 0 4px var(--c-surface), 0 0 0 6px var(--c-sun-soft);
    margin-bottom: var(--s-2);
    flex-shrink: 0;
}
.recipe-card__media img { width: 100%; height: 100%; object-fit: cover; }
.recipe-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--c-sun-ink); }
.recipe-card__title {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
}
.recipe-card__meta {
    margin-top: auto;
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    min-height: 22px;
}
.fav-btn {
    position: absolute; top: var(--s-3); right: var(--s-3);
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-full);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    transition: color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.fav-btn:hover { color: var(--c-accent); border-color: var(--c-accent); }
.fav-btn:active { transform: scale(.9); }
/* Mentve: sárgával kitöltött szív (a kártyán és a receptoldal "Mentve" gombján is) */
.fav-btn[aria-pressed="true"] { color: var(--c-text); border-color: var(--c-sun); background: var(--c-sun-soft); }
.fav-btn[aria-pressed="true"] .icon, .fav-btn--inline[aria-pressed="true"] .icon { fill: var(--c-sun); color: var(--c-text); }
.fav-btn--inline[aria-pressed="true"] { border-color: var(--c-sun); background: var(--c-sun-soft); }
.fav-btn--inline[aria-pressed="true"]:hover { border-color: var(--c-sun-hover); }
.fav-btn[aria-pressed="true"]:active .icon, .fav-btn--inline[aria-pressed="true"]:active .icon { transform: scale(1.15); }
.fav-btn--inline { position: static; }

.empty-state { text-align: center; padding: var(--s-7) var(--s-4); color: var(--c-text-muted); }
.empty-state .icon { margin: 0 auto var(--s-3); color: var(--c-border-strong); }
.empty-state h2 { color: var(--c-text); font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.empty-state p { margin-bottom: var(--s-4); }

/* Lapozó */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin: var(--s-6) 0 0; }
.pagination__item {
    min-width: 44px; height: 44px; padding: 0 var(--s-3);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    font-weight: 600; font-size: var(--fs-sm);
    text-decoration: none;
}
.pagination__item:hover { border-color: var(--c-text); color: var(--c-text); }
.pagination__item.is-active { background: var(--c-text); border-color: var(--c-text); color: #fff; }

/* ---------- 5. Receptoldal ---------- */
.recipe { padding: var(--s-6); max-width: var(--reading-max); }
.recipe-hero { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-6); align-items: center; padding-bottom: var(--s-6); border-bottom: 1px solid var(--c-border); }
.recipe-hero__media { width: 280px; height: 280px; border-radius: var(--r-full); overflow: hidden; background: var(--c-sun-soft); }
.recipe-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.recipe-hero__media .recipe-card__placeholder .icon { width: 72px; height: 72px; }
.recipe-hero__cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.recipe-hero h1 { font-size: var(--fs-3xl); letter-spacing: -.01em; margin-bottom: var(--s-3); }
.recipe-hero__summary { color: var(--c-text-muted); font-size: var(--fs-md); max-width: 60ch; margin-bottom: var(--s-4); }
.recipe-hero__rating { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-muted); text-decoration: none; margin-bottom: var(--s-4); }
.recipe-hero__rating:hover { color: var(--c-text); }

.facts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.fact {
    position: relative;
    padding: var(--s-3) var(--s-4) var(--s-3) 48px;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
    min-width: 132px;
}
.fact .icon { position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%); color: var(--c-accent); }
.fact__label { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); }
.fact__value { display: block; margin: 0; font-weight: 700; font-size: var(--fs-sm); }

.recipe-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.recipe-body { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: var(--s-7); padding: var(--s-6) 0; }
.ingredients__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.ingredients__head .section-title { margin-bottom: 0; }
.servings { display: inline-flex; align-items: center; gap: var(--s-1); border: 1px solid var(--c-border); border-radius: var(--r-full); padding: 2px; }
.servings .icon-btn { width: 32px; height: 32px; border-radius: var(--r-full); }
.servings__value { min-width: 64px; text-align: center; font-size: var(--fs-sm); font-weight: 600; }
.ingredients ul { list-style: none; padding: 0; }
.ingredients li { display: flex; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-md); line-height: 1.5; }
.ingredients li::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--c-sun); margin-top: .6em; flex-shrink: 0; }
.ingredients .qty { font-weight: 700; }
.steps { font-size: var(--fs-md); line-height: 1.7; max-width: 68ch; }
.steps h4 { font-size: var(--fs-lg); margin: var(--s-5) 0 var(--s-2); }
.steps h4:first-child { margin-top: 0; }
.steps p { margin-bottom: var(--s-3); }
.steps ul, .steps ol { padding-left: var(--s-5); margin-bottom: var(--s-3); }
.steps li { margin-bottom: var(--s-1); }

/* Értékelések */
.reviews { padding-top: var(--s-6); border-top: 1px solid var(--c-border); }
.rating-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); margin-bottom: var(--s-5); }
.rating-summary__big { text-align: center; }
.rating-summary__big strong { display: block; font-size: 44px; line-height: 1; }
.rating-summary__big .stars { margin: var(--s-2) 0 var(--s-1); }
.rating-bars { flex: 1; min-width: 220px; max-width: 420px; display: flex; flex-direction: column; gap: 6px; }
.rating-bar { display: grid; grid-template-columns: 12px 1fr 28px; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
.rating-bar__track { height: 8px; border-radius: 4px; background: var(--c-surface-2); overflow: hidden; }
.rating-bar__fill { height: 100%; background: var(--c-sun); border-radius: 4px; }

.review-form { background: var(--c-surface-2); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-5); }
.review-form h3 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-bottom: var(--s-3); border: 0; padding: 0; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { color: var(--c-border-strong); cursor: pointer; padding: 2px; border-radius: 6px; transition: color .1s var(--ease); }
.star-input label .icon { width: 30px; height: 30px; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--c-sun); }
.star-input label:hover .icon, .star-input label:hover ~ label .icon, .star-input input:checked ~ label .icon { fill: currentColor; }
.star-input input:focus-visible + label { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.review-form textarea { background: var(--c-surface); margin-bottom: var(--s-3); }

.review { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-border); }
.review:last-child { border-bottom: 0; }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.review__name { font-weight: 700; font-size: var(--fs-sm); }
.review__date { font-size: var(--fs-xs); color: var(--c-text-muted); }
.review__text { margin-top: var(--s-1); font-size: var(--fs-sm); line-height: 1.6; }

.related { margin-top: var(--s-7); }

/* Jogi és szöveges oldalak */
.prose { max-width: 70ch; }
.prose h1 { font-size: var(--fs-3xl); margin-bottom: var(--s-3); }
.prose h2 { font-size: var(--fs-xl); margin: var(--s-6) 0 var(--s-3); }
.prose h3 { font-size: var(--fs-lg); margin: var(--s-5) 0 var(--s-2); }
.prose p, .prose ul, .prose ol, .prose table { margin-bottom: var(--s-3); }
.prose ul, .prose ol { padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-1); line-height: 1.6; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-border); vertical-align: top; }
.prose .updated { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Hibaoldal */
.error-page { text-align: center; padding: var(--s-7) 0; }
.error-page__code { font-size: 64px; font-weight: 700; color: var(--c-accent); line-height: 1; margin-bottom: var(--s-3); }
.error-page h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
.error-page p { color: var(--c-text-muted); margin-bottom: var(--s-5); }

/* Hirdetés helye */
.ad-slot { margin: var(--s-6) 0; min-height: 280px; }
.recipe-grid .ad-slot { grid-column: 1 / -1; margin: var(--s-2) 0; min-height: 250px; }
.ad-slot__label { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; margin-bottom: var(--s-1); }

/* ---------- 5b. Felfedezés: kiemelés, csempék, mai ötlet, hűtő ---------- */
/* Filctoll-kiemelés egy szón (a cím alsó harmadán sárga sáv) */
.marker { background: linear-gradient(transparent 58%, var(--c-sun) 58%, var(--c-sun) 92%, transparent 92%); padding: 0 .08em; }

.quick-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.quick-tile {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-5);
    border-radius: var(--r-lg);
    color: var(--c-text); text-decoration: none;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.quick-tile:hover { color: var(--c-text); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quick-tile--sun { background: var(--c-sun); }
.quick-tile--green { background: var(--c-accent-soft); }
.quick-tile__icon {
    width: 56px; height: 56px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-full);
    background: var(--c-surface);
    transform: rotate(-8deg);
    transition: transform .3s var(--ease);
}
.quick-tile:hover .quick-tile__icon { transform: rotate(8deg) scale(1.05); }
.quick-tile--green .quick-tile__icon { color: var(--c-accent); }
.quick-tile__title { display: block; font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.quick-tile__sub { display: block; font-size: var(--fs-sm); margin-top: 2px; }
.quick-tile--sun .quick-tile__sub { color: #4A3A10; }
.quick-tile--green .quick-tile__sub { color: #0B5A3A; }
.quick-tile__arrow { margin-left: auto; flex-shrink: 0; }
.quick-tile--footer { margin-top: var(--s-6); max-width: 560px; }

/* Szűrősáv (mai ötlet, hűtő) */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.filter-row__label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted); margin-right: var(--s-1); display: inline-flex; align-items: center; gap: 6px; }
.chip.is-sun { background: var(--c-sun); border-color: var(--c-sun); color: var(--c-text); }
.chip .icon { margin-right: 6px; }

/* Mai ötlet */
.pick {
    display: grid; grid-template-columns: 320px 1fr; gap: var(--s-6); align-items: center;
    padding: var(--s-6);
    max-width: var(--reading-max);
    margin-top: var(--s-4);
    border-color: var(--c-sun);
    background: linear-gradient(135deg, var(--c-sun-soft), var(--c-surface) 55%);
}
.pick__media { width: 320px; height: 320px; border-radius: var(--r-full); overflow: hidden; background: var(--c-sun-soft); box-shadow: 0 0 0 8px var(--c-surface), 0 0 0 12px var(--c-sun); }
.pick__media img { width: 100%; height: 100%; object-fit: cover; }
.pick__media .recipe-card__placeholder .icon { width: 72px; height: 72px; }
.pick__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-full); background: var(--c-sun); font-size: var(--fs-xs); font-weight: 700; margin-bottom: var(--s-3); }
.pick__title { font-size: var(--fs-3xl); line-height: 1.15; margin-bottom: var(--s-3); }
.pick__title a { color: var(--c-text); text-decoration: none; }
.pick__title a:hover { text-decoration: underline; text-decoration-color: var(--c-sun); text-decoration-thickness: 4px; }
.pick__summary { color: var(--c-text-muted); margin-bottom: var(--s-4); max-width: 60ch; }
.pick__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--s-5); }
.pick__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn--sun { background: var(--c-sun); color: var(--c-text); }
.btn--sun:hover { background: var(--c-sun-hover); color: var(--c-text); }

/* Hűtő */
.fridge { padding: var(--s-5); max-width: var(--reading-max); margin-top: var(--s-4); }
.fridge__field { display: flex; gap: var(--s-2); }
.fridge__field .input { flex: 1; min-width: 0; }
.fridge__selected { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.fridge__selected:empty { display: none; }
.chip--remove { background: var(--c-sun); border-color: var(--c-sun); color: var(--c-text); gap: 6px; padding-right: var(--s-3); }
.chip--remove:hover { background: var(--c-sun-hover); border-color: var(--c-sun-hover); }
.chip--remove .icon { margin: 0; }
.fridge__suggest { margin-top: var(--s-4); }
.fridge__suggest .chip { font-weight: 500; }
.fridge__staples { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-sm); cursor: pointer; }
.fridge__staples input { width: 18px; height: 18px; accent-color: var(--c-accent); }

.have { margin-top: var(--s-1); width: 100%; max-width: 180px; }
.have__track { height: 8px; border-radius: 4px; background: var(--c-surface-2); overflow: hidden; }
.have__fill { height: 100%; border-radius: 4px; background: var(--c-sun); }
.have__fill.is-full { background: var(--c-accent); }
.have__text { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 4px; }
.have__text strong { color: var(--c-text); }


/* Piszkozat-előnézet (csak admin) és Ábel megjegyzése */
.draft-bar { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); margin: var(--s-2) 0 var(--s-4); max-width: var(--reading-max); border: 2px dashed var(--c-sun); border-radius: var(--r-lg); background: var(--c-sun-soft); }
.draft-bar__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-sm); }
.draft-bar__head .pick__badge { margin-bottom: 0; }
.draft-bar__warn { display: inline-flex; align-items: center; gap: 6px; color: var(--c-danger); font-weight: 600; }
.draft-bar textarea { background: var(--c-surface); }
.draft-bar__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.recipe-intro p + p { margin-top: var(--s-2); }
.steps h3 { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.steps .faq-q { font-weight: 700; margin-bottom: var(--s-1); }
.owner-note { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-6); padding: var(--s-4); border-radius: var(--r-lg); background: var(--c-sun-soft); }
.owner-note__title { font-size: var(--fs-md); margin-bottom: var(--s-1); }
.owner-note p { margin: 0; }

/* ---------- 6. Reszponzív ---------- */
@media (max-width: 1023px) {
    .content { padding: var(--s-3) var(--s-5) var(--s-7); }
    .topbar { padding: var(--s-3) var(--s-5); }
    .site-footer { padding: var(--s-5); }
    .recipe { padding: var(--s-5); }
    .recipe-hero { grid-template-columns: 200px 1fr; gap: var(--s-5); }
    .recipe-hero__media { width: 200px; height: 200px; }
    .recipe-body { grid-template-columns: 1fr; gap: var(--s-6); }
    .pick { grid-template-columns: 220px 1fr; gap: var(--s-5); padding: var(--s-5); }
    .pick__media { width: 220px; height: 220px; }
}

@media (max-width: 767px) {
    .sidebar {
        position: fixed; left: 0; top: 0; z-index: 1000;
        transform: translateX(-100%);
        transition: transform .25s var(--ease);
        box-shadow: none;
        width: min(300px, 86vw);
    }
    .sidebar.is-open { transform: none; box-shadow: var(--shadow-md); }
    .sidebar__head .sidebar__close { display: inline-flex; }
    .topbar { padding: var(--s-2) var(--s-4); flex-wrap: wrap; gap: var(--s-2); }
    .topbar .topbar__menu, .topbar .topbar__account { display: inline-flex; }
    .topbar .topbar__logo { display: block; flex: 1; text-align: center; font-size: 22px; }
    .search { order: 3; flex-basis: 100%; max-width: none; }
    .content { padding: var(--s-2) var(--s-4) var(--s-6); }
    .site-footer { padding: var(--s-5) var(--s-4); flex-direction: column; align-items: flex-start; }
    .page-head { margin: var(--s-3) 0 var(--s-4); }
    .page-title { font-size: var(--fs-2xl); }
    .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .recipe-card__link { padding: var(--s-4) var(--s-3) var(--s-3); }
    .recipe-card__media { width: 112px; height: 112px; }
    .recipe-card__title { font-size: var(--fs-sm); }
    .recipe-card__meta { font-size: var(--fs-xs); gap: var(--s-1) var(--s-3); }
    .fav-btn { top: var(--s-2); right: var(--s-2); width: 36px; height: 36px; }
    .recipe { padding: var(--s-4); border-radius: var(--r-md); }
    .recipe-hero { grid-template-columns: 1fr; text-align: left; }
    .recipe-hero__media { width: 200px; height: 200px; margin: 0 auto; }
    .recipe-hero h1 { font-size: var(--fs-2xl); }
    .fact { flex: 1 1 calc(50% - var(--s-3)); min-width: 0; }
    .auth-page { padding-top: var(--s-6); }
    .auth-card { padding: var(--s-5); }
    .quick-tiles { grid-template-columns: 1fr; gap: var(--s-2); margin-bottom: var(--s-4); }
    .quick-tile { padding: var(--s-4); }
    .quick-tile__icon { width: 44px; height: 44px; }
    .pick { grid-template-columns: 1fr; text-align: center; padding: var(--s-5) var(--s-4); }
    .pick__media { width: 200px; height: 200px; margin: 0 auto; }
    .pick__title { font-size: var(--fs-2xl); }
    .pick__meta, .pick__actions { justify-content: center; }
    .pick__summary { margin-left: auto; margin-right: auto; }
    .fridge { padding: var(--s-4); }
    .have { margin-left: auto; margin-right: auto; }
}

@media (max-width: 359px) {
    .recipe-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 7. Nyomtatás ---------- */
@media print {
    body { background: #fff; font-size: 12pt; }
    .sidebar, .topbar, .site-footer, .fav-btn, .recipe-actions, .reviews, .related, .breadcrumb, .ad-slot, .servings, .skip-link, ins.adsbygoogle { display: none !important; }
    .app, .app__main { display: block; }
    .content { padding: 0; max-width: none; }
    .card { border: 0; }
    .recipe { padding: 0; }
    .recipe-hero { grid-template-columns: 120px 1fr; gap: 16px; padding-bottom: 12px; }
    .recipe-hero__media { width: 120px; height: 120px; }
    .recipe-body { grid-template-columns: 1fr 2fr; gap: 24px; padding-top: 12px; }
    .fact { background: none; padding: 0; min-width: 0; }
    .fact .icon { display: none; }
    a { color: inherit; text-decoration: none; }
}