/* Immersive JF navigation panel */
/* The overlay-only controls must not leak into the regular page header. */
.app-header .nav-close { display: none !important; }
.app-header .nav-kicker,
.app-header .nav-heading { display: none !important; }
body:has(#screen-inicio.is-visible) .app-header .app-nav:not(.is-open) {display:none !important;}
body:has(#screen-inicio.is-visible) .app-header .app-nav.is-open {
 position:fixed !important;inset:0 !important;z-index:60 !important;
 display:flex !important;flex-direction:column;justify-content:center;gap:clamp(6px,1.8vh,18px) !important;
 width:100vw;min-width:0 !important;height:100dvh;box-sizing:border-box;
 padding:clamp(108px,18vh,190px) clamp(24px,9vw,120px) clamp(54px,10vh,104px) !important;
 overflow:auto;border:0 !important;border-radius:0 !important;
 background:radial-gradient(ellipse at 82% 12%,#20445c66,transparent 40%),linear-gradient(145deg,#071c2cfa,#03111df7 72%) !important;
 box-shadow:none !important;backdrop-filter:blur(28px) saturate(130%);
 animation:nav-arrive .38s cubic-bezier(.2,.8,.2,1) both;
}
body:has(#screen-inicio.is-visible) .app-header .app-nav.is-open::before {
 content:'JF TRANSPORTES  /  NAVEGAÇÃO';display:block;color:#f1c85d;
 font:800 11px/1 var(--font);letter-spacing:.19em;margin-bottom:2px;
}
body:has(#screen-inicio.is-visible) .app-header .app-nav.is-open::after {
 content:'Novo Hamburgo — RS e região';display:block;margin-top:clamp(14px,3vh,28px);
 color:#8fa6b7;font:500 12px/1.4 var(--font);letter-spacing:.07em;
}
body:has(#screen-inicio.is-visible) .app-header .nav-item {
 position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) 34px;align-items:center;gap:16px;
 width:100%;min-height:clamp(66px,11vh,104px);padding:10px 0 !important;
 border:0;border-bottom:1px solid #bed0df25;border-radius:0;
 color:#dbe5eb;text-align:left;background:transparent;
 font:500 clamp(25px,5vh,48px)/1 var(--display);letter-spacing:-.025em;
 transition:color .24s ease,padding .24s ease,border-color .24s ease;
}
body:has(#screen-inicio.is-visible) .app-header .nav-item::before {
 content:attr(data-index);color:#8ca3b5;font:700 11px/1 var(--font);letter-spacing:.12em;
}
body:has(#screen-inicio.is-visible) .app-header .nav-item::after {
 content:'↗';position:static;display:block;justify-self:end;width:32px;height:32px;
 border:1px solid #d8ad50;border-radius:50%;color:#f5cd66;
 font:400 17px/30px var(--font);text-align:center;background:#d6a93a0b;
 transition:transform .24s ease,background .24s ease;
}
body:has(#screen-inicio.is-visible) .app-header .nav-item:hover,
body:has(#screen-inicio.is-visible) .app-header .nav-item:focus-visible,
body:has(#screen-inicio.is-visible) .app-header .nav-item.is-active {
 padding-left:8px !important;color:#ffe08a;border-color:#d6aa4f88;outline:none;
}
body:has(#screen-inicio.is-visible) .app-header .nav-item:hover::after,
body:has(#screen-inicio.is-visible) .app-header .nav-item:focus-visible::after {transform:translate(3px,-3px);background:#d6a93a20;}
body:has(#screen-inicio.is-visible) .app-header .nav-close {
 position:absolute;top:max(22px,env(safe-area-inset-top));right:clamp(22px,5vw,64px);z-index:5;
 display:grid !important;width:50px;height:50px;place-items:center;border:1px solid #e8c362aa;border-radius:50%;
 background:#091d2ce6;color:#fff;font:300 29px/1 var(--font);cursor:pointer;
 box-shadow:0 0 22px #e6b33b20;
}
body:has(#screen-inicio.is-visible) .app-header .nav-close:hover {background:#d9aa3c;color:#071b2a;}
body:has(#screen-inicio.is-visible) .app-header .nav-kicker,
body:has(#screen-inicio.is-visible) .app-header .nav-heading {display:none !important;}
@keyframes nav-arrive {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:821px){body:has(#screen-inicio.is-visible) .app-header .app-nav.is-open{padding-left:max(160px,calc((100vw - 1040px)/2)) !important;padding-right:max(160px,calc((100vw - 1040px)/2)) !important;}}
@media(prefers-reduced-motion:reduce){body:has(#screen-inicio.is-visible) .app-header .app-nav.is-open{animation:none}body:has(#screen-inicio.is-visible) .app-header .nav-item,body:has(#screen-inicio.is-visible) .app-header .nav-item::after{transition:none}}