/* ==========================================================================
   JemRamen & Chicken — style.css
   Wspólny arkusz dla splash (index.html) i zwykłych podstron (menu.html,
   polityka-prywatnosci.html).
   ========================================================================== */

/* --- font: self-hosted Oswald (zamiast Google Fonts CDN) --- */
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/oswald-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/oswald-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;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }

/* Ukryte wizualnie, ale dostępne dla czytników ekranu i wyszukiwarek — NIE display:none. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   SPLASH (index.html) — plakat na cały ekran, bez przewijania
   ========================================================================== */

html.jr-lock, html.jr-lock body{margin:0!important;height:100%!important;overflow:hidden!important;overscroll-behavior:none;}

#jr-splash{position:fixed;inset:0;z-index:2147483000;background:#160c06;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#jr-splash *{box-sizing:border-box;}

.jr-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  font-family:"Oswald","Arial Narrow",Arial,sans-serif;}
.jr-frame .jr-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

.jr-desktop{aspect-ratio:3072/1280;width:max(100vw,calc(100dvh * 3072 / 1280));}
.jr-mobile {aspect-ratio:1536/2752;width:max(100vw,calc(100dvh * 1536 / 2752));display:none;}
@media (orientation:portrait){ .jr-desktop{display:none;} .jr-mobile{display:block;} }

/* --- ożywienie: migające neony (nakładka na namalowane elementy) + światła w oknie --- */
.jr-fx{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;}
.jr-flick{position:absolute;mix-blend-mode:screen;
  background:radial-gradient(ellipse at center, var(--fx-c,rgba(150,230,255,.5)) 0%, rgba(0,0,0,0) 72%);
  animation-name:jrFlicker;animation-timing-function:linear;animation-iteration-count:infinite;}
.jr-twinkle{position:absolute;border-radius:50%;mix-blend-mode:screen;pointer-events:none;
  background:radial-gradient(circle, #fff6c8 0%, rgba(255,246,200,0) 72%);
  animation-name:jrTwinkle;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}

@keyframes jrFlicker{
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24% { opacity: .32; }
  55% { opacity: .58; }
}
@keyframes jrTwinkle{
  0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  .jr-flick,.jr-twinkle{ animation: none; opacity: .85; }
}

/* --- klikalne przyciski (nakładka na namalowane neony); top/height/left/width ustawiane inline per przycisk --- */
.jr-hot{position:absolute;display:block;border-radius:16px;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .2s ease, box-shadow .2s ease, transform .2s ease;}
.jr-hot:hover,.jr-hot:focus-visible{
  background:radial-gradient(120% 120% at 50% 50%, rgba(25,224,255,.22), rgba(25,224,255,0) 68%);
  box-shadow:0 0 24px rgba(25,224,255,.32);
  transform:translateY(-2px);outline:none;}
.jr-hot:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* --- tabliczka O NAS (klikalna → otwiera pełny tekst) --- */
.jr-plaque{position:absolute;left:67.7%;width:8.8%;top:23%;height:64%;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.4em;
  background:transparent!important;border:0;box-shadow:none!important;cursor:pointer;text-align:center;color:#241f1b;
  appearance:none;-webkit-appearance:none;
  font-family:"Oswald",sans-serif;line-height:1.26;
  user-select:none;-webkit-tap-highlight-color:transparent;}
.jr-plaque:hover,.jr-plaque:focus,.jr-plaque:active{background:transparent!important;box-shadow:none!important;}
.jr-plaque h2{margin:0 0 .1em;font-weight:700;letter-spacing:.09em;font-size:clamp(19px,2.25vw,44px);color:#191512;
  text-shadow:0 1px 0 rgba(255,255,255,.4);}
.jr-plaque .jr-teaser{margin:0;font-weight:400;font-size:clamp(9px,.96vw,17px);color:#2e2823;}
.jr-plaque .jr-lead{font-weight:600;color:#201b17;}
.jr-plaque .jr-more{font-weight:700;font-size:clamp(9px,.98vw,16px);letter-spacing:.04em;color:#8a1c14;
  text-transform:uppercase;border-bottom:1px solid rgba(138,28,20,.5);padding-bottom:2px;}
.jr-plaque h2,.jr-plaque .jr-teaser,.jr-plaque .jr-more{width:100%;white-space:normal;overflow-wrap:break-word;}
.jr-plaque:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px;}

/* --- modal z pełnym tekstem O NAS --- */
#jr-modal{position:fixed;inset:0;z-index:2147483100;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,5,3,.72);backdrop-filter:blur(4px);}
#jr-modal.open{display:flex;}
#jr-modal .jr-card{position:relative;max-width:620px;width:100%;max-height:82vh;overflow:auto;
  background:linear-gradient(180deg,#20130c,#150c07);border:2px solid #19e0ff;border-radius:14px;
  box-shadow:0 0 20px rgba(25,224,255,.6),0 0 60px rgba(25,224,255,.25);
  padding:clamp(22px,3vw,40px);color:#efe6d6;font-family:"Oswald",sans-serif;}
#jr-modal h2{margin:0 0 .6em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:clamp(24px,3vw,38px);color:#fff;text-shadow:0 0 6px #19e0ff,0 0 20px #19e0ff;}
#jr-modal p{margin:0 0 1em;font-weight:300;line-height:1.65;font-size:clamp(15px,1.5vw,18px);color:#e7ddcd;}
#jr-modal .jr-x{position:absolute;top:10px;right:14px;width:40px;height:40px;border:0;background:transparent;
  color:#19e0ff;font-size:30px;line-height:1;cursor:pointer;border-radius:8px;}
#jr-modal .jr-x:hover,#jr-modal .jr-x:focus-visible{color:#fff;text-shadow:0 0 10px #19e0ff;outline:none;}

/* --- popup MENU (strony jako obrazy + link do pełnej wersji tekstowej) --- */
#jr-menu-modal{position:fixed;inset:0;z-index:2147483100;display:none;align-items:flex-start;justify-content:center;
  padding:clamp(12px,2.5vw,32px);background:rgba(8,5,3,.82);backdrop-filter:blur(4px);overflow:auto;}
#jr-menu-modal.open{display:flex;}
#jr-menu-modal .jr-menu-card{position:relative;max-width:1440px;width:100%;margin:auto;
  background:linear-gradient(180deg,#20130c,#150c07);border:2px solid #19e0ff;border-radius:14px;
  box-shadow:0 0 20px rgba(25,224,255,.6),0 0 60px rgba(25,224,255,.25);
  padding:clamp(30px,3vw,34px) clamp(14px,2vw,26px) clamp(16px,2vw,24px);
  display:flex;flex-direction:column;gap:14px;}
#jr-menu-modal .jr-menu-card img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.5);}
#jr-menu-modal .jr-x{position:absolute;top:8px;right:12px;width:40px;height:40px;border:0;background:transparent;
  color:#19e0ff;font-size:30px;line-height:1;cursor:pointer;border-radius:8px;z-index:2;}
#jr-menu-modal .jr-x:hover,#jr-menu-modal .jr-x:focus-visible{color:#fff;text-shadow:0 0 10px #19e0ff;outline:none;}
#jr-menu-modal .jr-menu-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
#jr-menu-modal .jr-menu-dl{color:#19e0ff;font-family:"Oswald",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(13px,1.4vw,16px);text-decoration:none;
  border:2px solid #19e0ff;border-radius:10px;padding:.55em 1.4em;box-shadow:0 0 10px rgba(25,224,255,.4);transition:background .18s ease;}
#jr-menu-modal .jr-menu-dl:hover,#jr-menu-modal .jr-menu-dl:focus-visible{background:rgba(25,224,255,.14);outline:none;}
#jr-menu-modal .jr-menu-dl.jr-menu-full{color:#ffcf4d;border-color:#ffcf4d;box-shadow:0 0 10px rgba(255,207,77,.4);}
#jr-menu-modal .jr-menu-dl.jr-menu-full:hover,#jr-menu-modal .jr-menu-dl.jr-menu-full:focus-visible{background:rgba(255,207,77,.14);}

@media (orientation:portrait){ .jr-plaque{display:none;} }
@media (orientation:landscape){ .jr-icons .jr-about-trigger{display:none;} } /* na desktopie "O nas" otwiera się z tabliczki */

/* --- klaster w rogu: status godzin + O nas/Instagram/Facebook/Nawiguj/Opinie --- */
.jr-cluster{position:fixed;right:clamp(10px,2.2vw,26px);bottom:clamp(10px,2.2vw,26px);z-index:2147483050;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:"Oswald",sans-serif;}

.jr-status{display:flex;align-items:center;gap:.55em;padding:.4em 1em;border-radius:999px;
  background:linear-gradient(180deg,#20130c,#150c07);border:1.5px solid currentColor;
  font-weight:700;font-size:clamp(10px,1.05vw,13px);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;color:#9aa0a6;}
.jr-status.jr-open{color:#28ffb0;box-shadow:0 0 10px rgba(40,255,176,.55),0 0 26px rgba(40,255,176,.22);}
.jr-status.jr-closed{color:#ff4d5e;opacity:.85;box-shadow:0 0 8px rgba(255,77,94,.4);}
.jr-status .jr-dot{width:.55em;height:.55em;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;flex:none;}

.jr-icons{display:flex;gap:8px;}
.jr-ic{width:clamp(34px,3.6vw,44px);height:clamp(34px,3.6vw,44px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#19e0ff;
  background:linear-gradient(180deg,#20130c,#150c07);border:1.5px solid rgba(25,224,255,.55);
  transition:box-shadow .2s ease, transform .2s ease, color .2s ease;text-decoration:none;
  padding:0;margin:0;font:inherit;appearance:none;-webkit-appearance:none;cursor:pointer;}
.jr-ic svg{width:52%;height:52%;}
.jr-ic:hover,.jr-ic:focus-visible{color:#fff;box-shadow:0 0 12px rgba(25,224,255,.85),0 0 28px rgba(25,224,255,.35);
  transform:translateY(-2px);outline:none;}


/* ==========================================================================
   BANER COOKIES (Consent Mode v2 — Basic)
   ========================================================================== */
/* Desktop/tablet: kompaktowa karta w lewym dolnym rogu — pusty mur, nie zasłania
   logo ani CTA; lustrzane odbicie klastra (prawy dolny róg). */
#jr-cookie{position:fixed;left:clamp(10px,2.2vw,26px);bottom:clamp(10px,2.2vw,26px);top:auto;right:auto;
  max-width:320px;z-index:2147483200;display:none;
  background:linear-gradient(180deg,#20130c,#150c07);border:2px solid #19e0ff;border-radius:14px;
  box-shadow:0 0 18px rgba(25,224,255,.5),0 6px 24px rgba(0,0,0,.5);
  padding:16px;font-family:"Oswald",sans-serif;color:#e7ddcd;}
#jr-cookie.open{display:block;}
#jr-cookie .jr-cookie-wrap{display:flex;flex-direction:column;gap:12px;}
#jr-cookie p{margin:0;font-weight:300;font-size:13px;line-height:1.5;}
#jr-cookie a{color:#19e0ff;}
#jr-cookie .jr-cookie-btns{display:flex;gap:8px;}
#jr-cookie button{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:12px;padding:.55em 1.1em;border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;flex:1 1 auto;}
#jr-cookie .jr-cookie-accept{background:#19e0ff;color:#0b1418;border:2px solid #19e0ff;}
#jr-cookie .jr-cookie-reject{background:transparent;color:#e7ddcd;border:2px solid rgba(231,221,206,.4);}
#jr-cookie .jr-cookie-accept:hover{background:#5eecff;}
#jr-cookie .jr-cookie-reject:hover{border-color:#e7ddcd;}

/* Mobile: za mało miejsca w rogu (koliduje z klastrem po prawej i przyciskami) —
   zostaje cienki pasek u góry, zasłania tylko dekoracyjny neon z nazwą, nic klikalnego. */
@media (max-width:640px){
  #jr-cookie{position:fixed;left:0;right:0;top:0;bottom:auto;max-width:none;
    border:0;border-bottom:2px solid #19e0ff;border-radius:0;
    box-shadow:0 4px 20px rgba(0,0,0,.5);padding:10px 14px;}
  #jr-cookie .jr-cookie-wrap{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;}
  #jr-cookie p{flex:1 1 220px;font-size:11.5px;}
  #jr-cookie .jr-cookie-btns{flex:0 0 auto;}
}

/* ==========================================================================
   ZWYKŁE PODSTRONY (menu.html, polityka-prywatnosci.html)
   Ciemne tło, czytelna typografia, bez efektu "plakatu na cały ekran".
   ========================================================================== */
body.jr-page{
  background:#150c07 url('assets/img/jr-desktop.webp') center top/cover fixed no-repeat;
  min-height:100vh;
}
body.jr-page .jr-page-overlay{
  min-height:100vh;
  background:linear-gradient(180deg,rgba(12,7,4,.92),rgba(12,7,4,.96) 200px, #0e0906 480px);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:#e7ddcd;
}
.jr-page-header{max-width:900px;margin:0 auto;padding:28px clamp(16px,4vw,32px) 8px;}
.jr-page-header a.jr-back{color:#19e0ff;text-decoration:none;font-family:"Oswald",sans-serif;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:14px;}
.jr-page-header a.jr-back:hover{text-decoration:underline;}
.jr-page main{max-width:900px;margin:0 auto;padding:12px clamp(16px,4vw,32px) 80px;}
.jr-page h1{font-family:"Oswald",sans-serif;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  font-size:clamp(28px,5vw,46px);color:#fff;text-shadow:0 0 10px rgba(25,224,255,.5);margin:.2em 0 .3em;}
.jr-page h2{font-family:"Oswald",sans-serif;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  font-size:clamp(20px,3vw,28px);color:#ffcf4d;margin:1.6em 0 .5em;}
.jr-page h3{font-family:"Oswald",sans-serif;font-weight:600;letter-spacing:.02em;
  font-size:clamp(16px,2.2vw,20px);color:#f2ede2;margin:1.3em 0 .3em;}
.jr-page p{line-height:1.7;font-size:16px;color:#d8cdbc;margin:0 0 1em;}
.jr-page a{color:#19e0ff;}
.jr-page .jr-lede{font-size:18px;color:#efe6d6;}

.jr-menu-section{margin:1.6em 0 2.2em;}
.jr-menu-section .jr-menu-note{font-size:14px;color:#b7ab98;font-style:italic;}
.jr-dish{border-bottom:1px solid rgba(231,221,206,.12);padding:14px 0;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;}
.jr-dish:last-child{border-bottom:0;}
.jr-dish-name{font-family:"Oswald",sans-serif;font-weight:600;font-size:17px;color:#fff;letter-spacing:.01em;}
.jr-dish-price{font-family:"Oswald",sans-serif;font-weight:700;font-size:17px;color:#ffcf4d;white-space:nowrap;}
.jr-dish-desc{flex-basis:100%;font-size:14px;color:#b7ab98;line-height:1.5;}
.jr-addons{font-size:14px;color:#d8cdbc;line-height:1.9;}

.jr-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:1.6em 0;}
a.jr-cta{display:inline-block;font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:14px;text-decoration:none;color:#0b1418;background:#19e0ff;
  border-radius:10px;padding:.75em 1.4em;box-shadow:0 0 14px rgba(25,224,255,.4);}
a.jr-cta:hover{background:#5eecff;}
a.jr-cta.jr-cta-ghost{background:transparent;color:#19e0ff;border:2px solid #19e0ff;padding:.65em 1.3em;box-shadow:none;}
a.jr-cta.jr-cta-ghost:hover{background:rgba(25,224,255,.12);}