/*
 * V4 — PARTITÚRA NAVIGÁCIÓ
 * Az eredeti emblémához tervezett, önálló "kottaszalag" navigáció.
 * A navigáció linkjei dinamikus, PHP által előállított href értékek.
 */
.site-header{
    background:rgba(251,250,247,.98);
    box-shadow:0 7px 24px rgba(45,31,37,.035);
    border-bottom:0;
}
.site-header .header-inner{
    min-height:82px;
    gap:26px;
}
.site-header .brand-logo{width:71px;height:70px}
.site-header .brand-text strong{font-size:1.50rem}
.masthead-motto{
    display:flex;align-items:center;gap:17px;margin-left:auto;
    color:var(--wine-dark);padding-right:5px;
}
.masthead-motto-icon{
    color:var(--gold);font:normal 2.5rem/1 var(--serif);
    width:58px;height:47px;border-right:1px solid rgba(112,46,59,.18);
    display:grid;place-items:center;padding-right:16px;
}
.masthead-motto>span:last-child{display:flex;flex-direction:column;gap:2px}
.masthead-motto small{
    font-size:.60rem;font-weight:700;letter-spacing:.19em;color:var(--wine-light);
}
.masthead-motto strong{
    font:italic 500 1.24rem/1.3 var(--serif);letter-spacing:-.02em;
}
/* A sötétkék-bordó partitúraszalag öt kottavonalat kap, a feliratok a vonalak alatt ülnek. */
.score-nav-wrap{
    position:relative;isolation:isolate;
    background:linear-gradient(106deg,#3d2a39 0%,#553143 40%,#30445a 100%);
    border-top:1px solid rgba(176,143,107,.24);
    border-bottom:1px solid rgba(176,143,107,.4);
    box-shadow:0 5px 17px rgba(39,35,41,.12);
}
.score-nav-wrap::before{
    content:'';pointer-events:none;position:absolute;inset:15px 0 auto;height:37px;
    background:repeating-linear-gradient(to bottom,rgba(232,204,163,.24) 0px,rgba(232,204,163,.24) 1px,transparent 1px,transparent 9px);
    -webkit-mask-image:linear-gradient(90deg,transparent 1%,black 12%,black 88%,transparent 99%);
    mask-image:linear-gradient(90deg,transparent 1%,black 12%,black 88%,transparent 99%);
}
.score-nav-wrap::after{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.3;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);
}
.score-nav-frame{position:relative;z-index:1}
.site-header .main-nav{
    max-width:none;width:100%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
    gap:0;align-items:stretch;justify-content:stretch;
}
.site-header .main-nav a{
    --pitch:0px;
    position:relative;min-width:0;display:flex;align-items:center;justify-content:flex-end;
    flex-direction:column;gap:0;
    min-height:101px;padding:14px 4px 19px;
    font-size:clamp(.66rem,.79vw,.79rem);line-height:1.35;
    font-weight:600;letter-spacing:.018em;text-align:center;white-space:normal;
    color:#f1e9e6;transition:color .25s ease;
    isolation:isolate;
}
.site-header .main-nav a::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(224,190,153,.1),rgba(224,190,153,.055));
    border-inline:1px solid rgba(236,210,185,.12);
    opacity:0;transition:opacity .22s ease;
}
.site-header .main-nav a::after{
    content:'';display:block;position:absolute;bottom:0;left:24%;right:24%;height:3px;
    background:#d6b47c;transform:scaleX(0);transform-origin:center;
    transition:transform .26s ease;
}
.site-header .main-nav a:hover,
.site-header .main-nav a:focus-visible,
.site-header .main-nav a.active{color:#ffdfac}
.site-header .main-nav a:hover::before,
.site-header .main-nav a:focus-visible::before,
.site-header .main-nav a.active::before{opacity:1}
.site-header .main-nav a:hover::after,
.site-header .main-nav a:focus-visible::after,
.site-header .main-nav a.active::after{transform:scaleX(1)}
.site-header .main-nav a:focus-visible{outline:2px solid #e8c39c;outline-offset:-3px}
.site-header .nav-label{position:relative;z-index:1;min-height:35px;display:grid;place-items:center;padding-inline:3px}
.site-header .nav-index{display:none}
/* A hangjegyek hangmagassága változik, mintha egy dallam lenne. */
.site-header .main-nav a:nth-child(1){--pitch:8px}
.site-header .main-nav a:nth-child(2){--pitch:0px}
.site-header .main-nav a:nth-child(3){--pitch:-8px}
.site-header .main-nav a:nth-child(4){--pitch:0px}
.site-header .main-nav a:nth-child(5){--pitch:10px}
.site-header .main-nav a:nth-child(6){--pitch:2px}
.site-header .main-nav a:nth-child(7){--pitch:-7px}
.site-header .main-nav a:nth-child(8){--pitch:8px}
.site-header .nav-note{
    display:block;position:absolute;top:18px;left:50%;width:17px;height:28px;
    color:#dbc29e;transform:translateX(-50%) translateY(var(--pitch));
    transition:transform .28s cubic-bezier(.22,.61,.36,1),color .28s ease;
    pointer-events:none;
}
.site-header .nav-note::before{
    content:'';position:absolute;bottom:0;left:0;width:16px;height:10px;
    border-radius:60% 45% 60% 45%;transform:rotate(-23deg);background:currentColor;
}
.site-header .nav-note::after{
    content:'';position:absolute;bottom:7px;right:1px;width:2px;height:25px;background:currentColor;
}
.site-header .main-nav a:hover .nav-note,
.site-header .main-nav a:focus-visible .nav-note,
.site-header .main-nav a.active .nav-note{
    color:#ffe1aa;
    transform:translateX(-50%) translateY(calc(var(--pitch) - 5px)) scale(1.13);
}
.site-header .main-nav a.active .nav-label{font-weight:700}
/* A mobilmenü is partitúra: sorszámozott, könyvszerű tétellista. */
.site-header .menu-toggle{display:none}
@media(max-width:1120px){
    .site-header .header-inner{min-height:78px}
    .site-header .brand-logo{width:64px;height:63px}
    .site-header .brand-text strong{font-size:1.35rem}
    .masthead-motto{display:none}
    .site-header .menu-toggle{
        display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
        color:var(--wine-dark);cursor:pointer;
        border:1px solid rgba(112,46,59,.23);border-radius:99px;
        padding:9px 14px 9px 11px;background:#fffefa;
        box-shadow:0 4px 13px rgba(57,31,41,.04);
        font-size:.78rem;letter-spacing:.04em;
        transition:border-color .2s,background .2s;
    }
    .site-header .menu-toggle:hover,
    .site-header .menu-toggle[aria-expanded="true"]{
        border-color:#b79562;background:#f8f1e9;
    }
    .menu-toggle-icon{font-size:1.4rem;line-height:1;color:var(--wine)}
    .menu-toggle-chevron{font-size:1.3rem;line-height:1;transition:transform .2s}
    .menu-toggle[aria-expanded="true"] .menu-toggle-chevron{transform:rotate(180deg)}
    .score-nav-wrap{
        display:none;position:absolute;top:100%;left:0;right:0;
        max-height:calc(100dvh - 104px);overflow-y:auto;
        box-shadow:0 19px 35px rgba(27,24,35,.27);
    }
    .score-nav-wrap.is-open{display:block;animation:score-menu-reveal .22s ease-out both}
    @keyframes score-menu-reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
    .score-nav-wrap::before{inset:17px 0 auto;height:35px;opacity:.5}
    .score-nav-frame{padding-block:20px}
    .site-header .main-nav,
    .site-header .main-nav.is-open{
        display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;max-width:none;padding:0;position:static;
        background:transparent;box-shadow:none;border:0;
    }
    .site-header .main-nav a{
        min-height:63px;display:grid;grid-template-columns:38px minmax(0,1fr);
        align-items:center;justify-items:start;gap:13px;
        padding:13px 16px;font-size:.89rem;text-align:left;
        color:#f2e6e4;background:rgba(253,248,242,.06);
        border:1px solid rgba(227,199,175,.14);border-radius:3px;
        line-height:1.25;white-space:normal;
    }
    .site-header .main-nav a::before{border:none}
    .site-header .main-nav a::after{left:0;right:auto;top:8px;bottom:8px;width:3px;height:auto;transform:scaleY(0)}
    .site-header .main-nav a:hover::after,
    .site-header .main-nav a.active::after,
    .site-header .main-nav a:focus-visible::after{transform:scaleY(1)}
    .site-header .nav-note{display:none}
    .site-header .nav-index{
        display:grid;place-items:center;width:36px;height:36px;
        color:#d1b38d;font:italic 500 1.05rem/1 var(--serif);
        border:1px solid rgba(231,198,155,.3);border-radius:50%;
    }
    .site-header .nav-label{min-height:0;display:block;padding:0}
    .site-header .main-nav a.active{color:#ffe0ac}
    .site-header .main-nav a.active .nav-index{color:#553141;background:#f1d7b1;border-color:#f1d7b1}
}
@media(max-width:620px){
    .site-header .header-inner{min-height:73px;gap:7px}
    .site-header .brand-logo{width:55px;height:55px}
    .site-header .brand-text strong{font-size:1.22rem}
    .site-header .brand-text small{font-size:.5rem}
    .site-header .menu-toggle{gap:7px;padding:7px 10px}
    .score-nav-frame{padding-block:16px}
    .site-header .main-nav,
    .site-header .main-nav.is-open{grid-template-columns:1fr;gap:6px}
    .site-header .main-nav a{min-height:53px;padding:9px 16px;font-size:.87rem}
}
@media(max-width:360px){
    .site-header .brand-logo{width:45px;height:45px}
    .site-header .brand-text strong{font-size:1.05rem}
    .menu-toggle-text{display:none}
}
@media(prefers-reduced-motion:reduce){
    .score-nav-wrap.is-open{animation:none}
}