/* =========================================================================
 * Sticky menü — tiszta architektúra
 *
 * Két állapot van:
 *   1) ALAP (transzparens): a fejléc átlátszó, a hero kép felett lebeg.
 *      Világos logo + világos menüszöveg (sötét háttérre optimalizálva).
 *   2) IS-STICKY (görgetett): krém háttér + blur + árnyék, sötét logo +
 *      sötét menüszöveg, KISEBB logo és menüméret (shrink effekt).
 *
 * Minden méret CSS változókkal van paraméterezve egy helyen.
 * A fejléc position: fixed — nem zavarja a hero full-bleed megjelenését.
 * Admin topbar kompenzáció tisztán CSS-ből (body.admin-bar).
 * ====================================================================== */

.ssm-header {
    /* Alapértelmezett (transzparens) állapot változói */
    --ssm-logo-h: 60px;          /* logo magassága alapállapotban */
    --ssm-nav-size: 16px;        /* menüpont betűmérete alapállapotban */
    --ssm-pad-y: 18px;           /* fejléc függőleges padding alapállapotban */
    --ssm-text: #ffffff;         /* menüszöveg színe (világos, hero felett) */
    --ssm-text-hover: #ffffff;   /* hover szín */
    --ssm-bg: transparent;       /* háttér transzparens */
    --ssm-border: transparent;
    --ssm-shadow: none;
    --ssm-blur: 0;
    --ssm-hamburger: #ffffff;    /* hamburger ikon színe */

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    background: var(--ssm-bg);
    border-bottom: 1px solid var(--ssm-border);
    box-shadow: var(--ssm-shadow);
    -webkit-backdrop-filter: blur(var(--ssm-blur));
    backdrop-filter: blur(var(--ssm-blur));
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        padding 0.3s ease;
}

/* ---- Görgetett (is-sticky) állapot: a te stílusaid + shrink ---- */
.ssm-header.is-sticky {
    --ssm-logo-h: 44px;          /* kisebb logo gorgetésnél */
    --ssm-nav-size: 14px;        /* kisebb menü gorgetésnél */
    --ssm-pad-y: 10px;           /* szűkebb padding */
    --ssm-text: #374041;         /* sötét szöveg krém háttéren */
    --ssm-text-hover: #11b981;
    --ssm-bg: rgba(245, 244, 239, 0.82);
    --ssm-border: rgba(21, 24, 29, 0.08);
    --ssm-shadow: rgba(21, 24, 29, 0.3) 0px 4px 30px -18px;
    --ssm-blur: 16px;
    --ssm-hamburger: #374041;
}

/* =========================================================================
 * Admin topbar kompenzáció — csak CSS, csak bejelentkezett adminoknak
 * ====================================================================== */
body.admin-bar .ssm-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .ssm-header {
        top: 46px;
    }
}

/* =========================================================================
 * Belső konténer
 * ====================================================================== */
.ssm-header-inner {
    max-width: 1280px;
    margin: 0 auto;
padding: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    transition: padding 0.3s ease;
}

/* Bal blokk: logók */
.ssm-logo-block {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Jobb blokk: menü + akció gomb + hamburger */
.ssm-nav-block {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

/* A nav blokk belső akció csoportja (gomb + hamburger) */
.ssm-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* =========================================================================
 * Logo — két kép, CSS váltja az is-sticky alapján
 * ====================================================================== */
.ssm-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    line-height: 0;
}

.ssm-logo-img {
    display: block;
    height: 45px !important;
    width: auto;
    transition: height 0.3s ease;
}

/* Alapállapot: default logo látszik, sticky logo rejtve */
.ssm-logo-sticky {
    display: none;
}

/* Görgetett állapot: sticky logo látszik, default logo rejtve */
.ssm-header.is-sticky .ssm-logo-default {
    display: none;
}
.ssm-header.is-sticky .ssm-logo-sticky {
    display: block;
}

/* =========================================================================
 * Desktop menü
 * ====================================================================== */
.ssm-nav-desktop {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1;
    justify-content: center;
}

.ssm-nav-desktop a {
    position: relative;
    text-decoration: none;
    color: var(--ssm-text);
    font-family: Poppins, sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.1px;
    transition: color 0.3s ease, font-size 0.3s ease;
}

.ssm-nav-desktop a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background-color: var(--ssm-text-hover);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.ssm-nav-desktop a:hover {
    color: var(--ssm-text-hover);
}

.ssm-nav-desktop a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.ssm-action-btn {
    display: inline-block;
    font-family: Poppins, sans-serif;
    transition: background-color 0.3s ease, transform 0.15s ease;
    white-space: nowrap;
    padding: 15px 25px;
    border-radius: 100px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    background-color: #10b981;
}

.ssm-action-btn:hover {
    background-color: #029e50;
    color: #fff;
}

.ssm-action-btn:active {
    transform: translateY(1px);
}

/* Hamburger gomb (alapból rejtve desktopon) */
.ssm-hamburger {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

.ssm-hamburger-icon {
    fill: var(--ssm-hamburger);
    width: 30px;
    height: auto;
    transition: fill 0.3s ease;
}

/* =========================================================================
 * Mobil overlay
 * ====================================================================== */
.ssm-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Nagyon magas z-index: az off-canvas megnyitásakor ez legyen a
       legerősebb elem az oldalon (minden felett). A JS a body végére
       mozgatja, így a header stacking context-jéből is kilép. */
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ssm-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.ssm-overlay-content {
      background: #f5f4ef;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 80%;
    max-width: 320px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.ssm-overlay.is-open .ssm-overlay-content {
    transform: translateX(0);
}

.ssm-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.ssm-overlay-logo {
    max-height: 44px;
    width: auto;
}

.ssm-overlay-close {
    background: transparent;
    color: #374041;
    border: none;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.ssm-nav-mobile {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ssm-nav-mobile a {
    display: block;
    padding: 12px 4px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    transition: color 0.2s ease;
    letter-spacing: 0.5px;
}

.ssm-nav-mobile a:last-child {
    border: None;
}

.ssm-nav-mobile a:hover {
    color: #A57884;
}

.ssm-action-btn--mobile {
    margin-top: 24px;
    text-align: center;
}

.ssm-contact-card {
    margin-top: 20px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid rgba(21, 24, 29, 0.06);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ssm-contact-title {
    font-size: 16px;
    font-weight: 600;
    color: #374041;
    margin-bottom: 4px;
    font-family: Poppins, sans-serif;
}

.ssm-contact-title:empty {
    display: none;
}

/* Bevezető szöveg / nyitvatartás (legfelül, ha van) */
.ssm-contact-note {
    font-family: Poppins, sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: #6b6b6b;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(21, 24, 29, 0.06);
}

.ssm-contact-note:empty {
    display: none;
}

/* Egy sor a kártyában (telefon / e-mail) — kattintható */
.ssm-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    text-decoration: none;
    color: #374041;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 400;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ssm-contact-item:hover {
    color: #A57884;
    background: rgba(165, 120, 132, 0.06);
}

.ssm-contact-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #11b981;
    color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(21, 24, 29, 0.08);
}

.ssm-contact-icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

.ssm-contact-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.ssm-header.is-sticky .ssm-nav-desktop a {
    font-size: 16px;
    font-weight: 500;
}

.ssm-header.is-sticky .ssm-action-btn {
    padding: 12px 20px;
    font-size: 14px;

}

.ssm-header.is-sticky .ssm-header-inner {
    padding: 10px 0px;
}

/* =========================================================================
 * Mobil töréspont (768px alapból; JS a data attribútumból jövő értéket használna)
 * ====================================================================== */
@media (max-width: 768px) {
    /* Mobilnézetben csak a menüpontok tűnnek el; az akció gomb látható
       marad a hamburger előtt (a felhasználó kérése szerint). */
    .ssm-nav-desktop {
        display: none;
    }

    .ssm-logo-img {
    height: 35px !important;
}

.ssm-header.is-sticky .ssm-header-inner {
    padding: 10px 15px;
}

.ssm-header.is-sticky .ssm-action-btn {
    padding: 10px 15px;
    font-size: 13px;
    margin-right: 10px;
}

    .ssm-hamburger {
        display: inline-flex;
    }

    .ssm-action-btn {
        padding: 15px 16px;
        font-size: 13px;
                font-weight: 700;
    }  }

    /* Szűkebb belső térközök mobilon */
    .ssm-header-inner {
        padding: 12px 16px;
        gap: 12px;
    }

    .ssm-nav-block {
        gap: 12px;
    }

    .ssm-nav-actions {
        gap: 10px;
    }


/* Hibaüzenet shortcode esetén */
.sticky-menu-error {
    color: #b32d2e;
    background: #fff0f0;
    padding: 12px 16px;
    border: 1px solid #e6b0b0;
    border-radius: 6px;
    font-size: 14px;
}