/* =============================================================================
   far360 — OLDALVÁZ: fejléc, tartalom, lábléc.

   KÉT fejléc-alak, egy szerkezet:
   * PUBLIKUS és ÜGYFÉLPORTÁL (body.f-public) — a marketingoldal LEBEGŐ PIRULA
     menüsora: a fejléc maga átlátszó, a belső sáv üveg-pirula, világos felirattal.
   * ADMIN (body.f-admin) — sötét üveg-sáv, ragasztva a lap tetejére. A napi
     munkafelület nyugodt marad: nincs dekoráció, csak a homály és a mélység.
   ============================================================================= */
.f-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.f-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    max-width: var(--f-container-width);
    margin: 0 auto;
    min-height: 60px;
}

/* --- ADMIN: sötét üveg-sáv ---------------------------------------------- */
.f-admin .f-header {
    padding: 0 1.5rem;
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.f-admin .f-header__inner { min-height: 68px; }

/* --- PUBLIKUS / PORTÁL: lebegő üveg-pirula ------------------------------- */
.f-public .f-header {
    padding: 12px var(--f-gutter, 1.25rem);
    background: transparent;
}
.f-public .f-header__inner {
    padding: 6px 10px 6px 22px;
    border-radius: var(--f-radius-btn);
    background: var(--glass-secondary);
    color: var(--f-ink);
    border: 1px solid var(--glass-line-soft);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-depth-1);
}

/* --- Szójel -------------------------------------------------------------- */
.f-logo {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.55rem 0;
}
.f-logo:hover { text-decoration: none; }

.f-logo__text {
    font-family: var(--f-font);
    font-size: 1.3rem;
    font-weight: 700;
    font-stretch: 112%;
    letter-spacing: -0.036em;
    color: var(--f-white);
}
.f-public .f-logo__text { color: var(--f-ink); }

.f-logo__underline,
.f-logo__tagline,
.f-header__tagline {
    display: block;
    font-family: var(--f-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--f-white-60);
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
}
.f-header__tagline { font-size: 0.75rem; }
.f-public .f-logo__tagline,
.f-public .f-header__tagline { color: var(--f-grey-2); }

/* --- Tartalom ------------------------------------------------------------ */
.f-main {
    max-width: var(--f-container-width);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    min-height: 60vh;
}

.f-main--admin { max-width: 1320px; }

/* --- Lábléc -------------------------------------------------------------
   PUBLIKUS: a marketingoldal világos lábléce (--f-ground, halk szöveg).
   ADMIN: marad a sötét sáv — világos elválasztás a két terület között. */
.f-footer {
    margin-top: 3rem;
    padding: 1.75rem 1.5rem;
    font-size: 0.85rem;
}
.f-footer__inner {
    max-width: var(--f-container-width);
    margin: 0 auto;
}

.f-public .f-footer {
    background: var(--f-ground);
    color: var(--f-grey-2);
    border-top: 1px solid var(--f-border);
}
.f-public .f-footer a { color: var(--f-ink); text-decoration: underline; }

.f-admin .f-footer {
    background: var(--f-dark);
    color: #B8B8B8;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.f-admin .f-footer a { color: #E6E6E6; }

/* Lablec-hivatkozas — korabban ket helyen inline style="margin-left:1rem" vitte
   (_Layout.cshtml). Osztalyban azert kell, mert a telefonos 44 px-es doboz (lentebb)
   csak igy tudja kezelni a terkozt. */
.f-footer__link { margin-left: 1rem; }

.f-footer__verzio {
    margin-left: 1rem;
    opacity: .65;
    font-family: var(--f-font-mono);
    font-size: .8em;
    font-variant-numeric: tabular-nums;
}

/* A lábléc „Sütibeállítások" gombja: <button>, nem <a> — nincs mögötte cím.
   Kinézetre a szomszédos hivatkozásokhoz igazodik, nem üveggomb. */
.f-footer__suti {
    margin-left: 1rem;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.f-public .f-footer__suti:hover { color: var(--f-primary); }
.f-admin .f-footer__suti:hover { color: var(--f-white); }

@media (max-width: 992px) {
    .f-main { padding: 1.75rem 1rem 3rem; }
    .f-header__inner { min-height: auto; padding-block: 0.6rem; }
    .f-public .f-header__inner { border-radius: var(--f-radius-md); padding: 0.6rem 0.9rem; }
}

/* A publikus fejléc jobb oldala: felirat + (bemutató példányon) portál-gomb. */
.f-header__public {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.f-header__demo {
    margin: 0;
}

@media (max-width: 560px) {
    .f-header__public { gap: 0.55rem; }
    .f-header__public .f-header__tagline { display: none; }
}

/* -----------------------------------------------------------------------------
   TELEFONOS FINOMITAS (merve 2026-09-26, 375x812). A szabaly: ASZTALI MERETEN
   EGYETLEN BETUMERET SEM VALTOZIK — a DESIGN.md tipografiai rendszere asztali gepen
   mert kontraszttal es ritkitassal van beallitva, egy globalis emeles az egesz
   arculatot elmozditana. Ezert minden itteni javitas @media-blokkban el.
   Merve: a ket lablec-hivatkozas doboza 146x15 es 141x15 px volt, es mindketto
   MINDEN publikus, portal- es admin-oldalon ott van.
   ----------------------------------------------------------------------------- */
@media (max-width: 560px) {
    /* A 11 px-es „UGYFELPORTAL" / „ADMINISZTRACIO" felirat telefonon nem olvashato,
       es a szojel maga elmondja, hol vagyunk. Mindket agon (admin es portal). */
    .f-logo__tagline { display: none; }

    .f-footer { font-size: 0.9rem; }
    .f-footer__inner a,
    .f-footer__suti {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* 10,88 px -> ~12,2 px. Ez volt a rendszer legkisebb szovege. */
    .f-footer__verzio { font-size: 0.9em; }
}