/* ===================================================================
   CHOPIN — Restaurant & Drink Bar, Rynek Główny 39, Kraków
   Design: warm, traditional Polish tavern with a bold red accent lifted
   from the CHOPIN logotype. Light-first, neutral warm-grey ground, with a
   dark mode. Titles set in Saira Regular; Mulish for body/nav/labels.
=================================================================== */

:root{
  /* ---- LIGHT palette (default look) ---- */
  --ground:      #F1F0ED;
  --ground-2:    #E5E3DE;
  --surface:     #FFFFFF;
  --surface-2:   #E9E7E2;
  --text:        #262420;
  --text-soft:   #57534B;
  --text-mute:   #8A8580;
  --red:         #C4232E;
  --red-bright:  #A81C27;
  --maroon:      #7C1119;
  --line:        rgba(196,35,46,0.22);
  --line-strong: rgba(196,35,46,0.42);
  --shadow:      rgba(20,18,16,0.12);
  --img-dim:     1;

  --font-display: 'Saira', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Mulish', 'Helvetica Neue', Arial, sans-serif;
  --font-label:   'Mulish', 'Helvetica Neue', Arial, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:      #18110C;
    --ground-2:    #120C09;
    --surface:     #221812;
    --surface-2:   #2B1F17;
    --text:        #F3E6D6;
    --text-soft:   #C8B29B;
    --text-mute:   #94806C;
    --red:         #E6394A;
    --red-bright:  #F4626F;
    --maroon:      #B23240;
    --line:        rgba(230,57,74,0.28);
    --line-strong: rgba(230,57,74,0.5);
    --shadow:      rgba(0,0,0,0.55);
    --img-dim:     0.88;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ground:      #18110C;
  --ground-2:    #120C09;
  --surface:     #221812;
  --surface-2:   #2B1F17;
  --text:        #F3E6D6;
  --text-soft:   #C8B29B;
  --text-mute:   #94806C;
  --red:         #E6394A;
  --red-bright:  #F4626F;
  --maroon:      #B23240;
  --line:        rgba(230,57,74,0.28);
  --line-strong: rgba(230,57,74,0.5);
  --shadow:      rgba(0,0,0,0.55);
  --img-dim:     0.88;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --ground:      #F1F0ED;
  --ground-2:    #E5E3DE;
  --surface:     #FFFFFF;
  --surface-2:   #E9E7E2;
  --text:        #262420;
  --text-soft:   #57534B;
  --text-mute:   #8A8580;
  --red:         #C4232E;
  --red-bright:  #A81C27;
  --maroon:      #7C1119;
  --line:        rgba(196,35,46,0.22);
  --line-strong: rgba(196,35,46,0.42);
  --shadow:      rgba(20,18,16,0.12);
  --img-dim:     1;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; margin:0; text-wrap:balance; letter-spacing:0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }

.eyebrow{
  font-family:var(--font-label); font-size:12.5px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--red); font-weight:700;
}
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.wrap--narrow{ max-width:880px; }

/* ---------- decorative rule / diamond divider ---------- */
.rule-diamond{ display:flex; align-items:center; gap:14px; width:100%; }
.rule-diamond::before,.rule-diamond::after{ content:""; flex:1; height:1px; background:var(--line-strong); }
.rule-diamond .dia{ width:7px; height:7px; background:var(--red); transform:rotate(45deg); flex:none; }

/* ---------- understated inline link ---------- */
.text-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-label); font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--red); border-bottom:1px solid var(--line-strong); padding-bottom:4px;
  transition:color .25s ease, border-color .25s ease;
}
.text-link:hover{ color:var(--red-bright); border-color:var(--red); }

/* ---------- corner ornament (svg symbol reused) ---------- */
.corner{ position:absolute; width:44px; height:44px; color:var(--red); opacity:0.85; pointer-events:none; }
.corner svg{ width:100%; height:100%; display:block; }
.corner--tl{ top:14px; left:14px; }
.corner--tr{ top:14px; right:14px; transform:scaleX(-1); }
.corner--bl{ bottom:14px; left:14px; transform:scaleY(-1); }
.corner--br{ bottom:14px; right:14px; transform:scale(-1,-1); }

.framed{ position:relative; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.9s ease, transform 0.9s ease; }
.reveal.is-in{ opacity:1; transform:translateY(0); }

/* ---------- page router: each nav destination is its own full "page" ---------- */

/* =================== HEADER =================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  background:transparent;
  transition:background 0.4s ease, padding 0.4s ease, border-color 0.4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:color-mix(in srgb, var(--ground) 62%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:12px 28px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:64px; width:auto; }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  font-family:var(--font-label); font-size:12.5px; letter-spacing:0.2em; text-transform:uppercase; font-weight:700;
  color:var(--text-soft); position:relative; padding-bottom:4px;
}
.main-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--red); transition:right .35s ease; }
.main-nav a:hover{ color:var(--text); }
.main-nav a:hover::after{ right:0; }
.main-nav a.active{ color:var(--text); }
.main-nav a.active::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:18px; }
.lang-toggle{
  display:flex; align-items:center; gap:14px;
}
.lang-toggle button{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 0; font-family:var(--font-label); font-size:11.5px; letter-spacing:0.14em; font-weight:700;
  color:var(--text-soft); transition:color .25s ease;
}
.lang-toggle button.active{ color:var(--red); font-weight:800; }
.lang-toggle .flag{ font-size:13px; line-height:1; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px;
  font-family:var(--font-label); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:700;
  border:1px solid var(--red); border-radius:2px; color:var(--text); white-space:nowrap;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover{ background:var(--red); color:#F2F1EE; }
.btn--ghost{ border-color:var(--line-strong); }
.btn--ghost:hover{ background:var(--surface-2); color:var(--text); border-color:var(--red); }

/* while transparent over the hero photo (Home only), header always reads light regardless of theme */
body[data-route="home"] .site-header:not(.scrolled) .main-nav a{ color:#F1E3D2; }
body[data-route="home"] .site-header:not(.scrolled) .main-nav a::after{ background:#F4626F; }
body[data-route="home"] .site-header:not(.scrolled) .main-nav a:hover, body[data-route="home"] .site-header:not(.scrolled) .main-nav a.active{ color:#FFFFFF; }
body[data-route="home"] .site-header:not(.scrolled) .lang-toggle button{ color:#E9D9C6; }
body[data-route="home"] .site-header:not(.scrolled) .lang-toggle button.active{ color:#F4626F; }
body[data-route="home"] .site-header:not(.scrolled) .nav-toggle{ border-color:rgba(244,98,111,0.6); }
body[data-route="home"] .site-header:not(.scrolled) .nav-toggle span{ background:#F1E3D2; box-shadow:0 5px 0 #F1E3D2, 0 -5px 0 #F1E3D2; }

.nav-toggle{ display:none; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:2px; }
.nav-toggle span{ display:block; width:16px; height:1px; background:var(--text); box-shadow:0 5px 0 var(--text), 0 -5px 0 var(--text); }

/* =================== HERO =================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center; padding:120px 24px 80px;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 38%;
  animation:kenburns 34s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1.0); } to{ transform:scale(1.12); } }
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(12,7,5,0.58) 0%, rgba(12,7,5,0.36) 32%, rgba(12,7,5,0.74) 100%),
    linear-gradient(90deg, rgba(12,7,5,0.36), rgba(12,7,5,0.1) 30%, rgba(12,7,5,0.1) 70%, rgba(12,7,5,0.36));
}
.hero-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:26px; max-width:760px; }
.hero-eyebrow{ font-family:var(--font-label); font-size:13.5px; letter-spacing:0.32em; text-transform:uppercase; font-weight:800; color:#FFFFFF; text-shadow:0 1px 10px rgba(0,0,0,0.45); }
.hero-tag{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,4vw,44px); color:#F2F1EE; margin-top:14px; text-transform:uppercase; letter-spacing:0; }
.hero-sub{ font-family:var(--font-body); font-size:19px; color:#E9D9C6; max-width:640px; margin:16px auto 0; line-height:1.65; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.hero .corner{ color:#F4626F; }

/* =================== SECTION SHELL =================== */
section{ position:relative; padding:112px 0; }
.section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(34px,4.4vw,52px); font-weight:400; text-transform:uppercase; }
.section-head .eyebrow{ order:-1; }
.section-head--center{ align-items:center; text-align:center; }

/* =================== ABOUT (O NAS) =================== */
.about{ background:var(--surface); padding-top:150px; }
.about-row{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center; margin-bottom:96px; }
.about-row:last-child{ margin-bottom:0; }
.about-row.reverse{ direction:rtl; }
.about-row.reverse > *{ direction:ltr; }
.about-media{ position:relative; }
.about-media .frame-box{ position:relative; border:1px solid var(--line-strong); padding:16px; }
.about-media img{ width:100%; height:440px; object-fit:cover; }
.about-copy h3{ font-size:clamp(24px,3vw,32px); margin-bottom:20px; text-transform:uppercase; }
.about-copy p{ font-size:18px; color:var(--text-soft); margin-bottom:0; }

/* =================== HOME TEASER =================== */
.home-teaser{ background:var(--surface); text-align:center; }
.home-teaser blockquote{ font-family:var(--font-display); font-style:italic; font-size:clamp(20px,2.6vw,27px); color:var(--text); margin:30px 0 26px; }

/* =================== GALLERY =================== */
.gallery{ background:var(--ground); padding:64px 0; }
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.g-item{ position:relative; overflow:hidden; border-radius:1px; aspect-ratio:1/1; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform 0.9s cubic-bezier(.2,.8,.2,1); filter:saturate(1.05) contrast(1.03) brightness(var(--img-dim)); }
.g-item:hover img{ transform:scale(1.06); }
.g-item::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line); pointer-events:none; }
.g-cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px 12px;
  background:linear-gradient(0deg, rgba(10,5,3,0.8), transparent 85%);
  color:#F7ECDD; font-family:var(--font-label); font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700;
  opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease;
}
.g-item:hover .g-cap{ opacity:1; transform:translateY(0); }

/* =================== MENU =================== */
.menu{ background:var(--surface); padding-top:150px; }
.menu-intro{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.menu-tabs{ display:flex; justify-content:center; gap:10px; margin-top:52px; margin-bottom:32px; }
.menu-tab{
  font-family:var(--font-label); font-size:13px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700;
  padding:12px 26px; border:1px solid var(--line-strong); color:var(--text-soft);
  transition:all .3s ease; border-radius:2px;
}
.menu-tab.active{ background:var(--red); color:#F2F1EE; border-color:var(--red); font-weight:700; }
.menu-tab:hover:not(.active){ border-color:var(--red); color:var(--text); }

.menu-directory{ display:none; flex-wrap:wrap; gap:10px; justify-content:center; max-width:860px; margin:0 auto 44px; }
.menu-directory.active{ display:flex; }
.menu-directory a{
  font-family:var(--font-label); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
  padding:9px 18px; border:1px solid var(--line-strong); border-radius:999px; color:var(--text-soft);
  transition:all .25s ease;
}
.menu-directory a:hover{ border-color:var(--red); color:var(--text); background:var(--surface-2); }

.menu-layout{ max-width:760px; margin:36px auto 0; }
.menu-panel{ display:none; }
.menu-panel.active{ display:block; }

.menu-cat{ margin-bottom:48px; scroll-margin-top:110px; }
.menu-cat-head{ text-align:center; margin-bottom:22px; }
.menu-cat-head h3{ font-size:25px; font-weight:400; text-transform:uppercase; }
.menu-cat-note{ font-family:var(--font-label); font-size:13px; color:var(--text-mute); text-align:center; margin:-12px 0 20px; }

.menu-item{ padding:14px 0; border-bottom:1px solid var(--line); }
.menu-item:last-child{ border-bottom:none; }
.mi-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 16px; }
.mi-name{ flex:1 1 220px; min-width:0; font-family:var(--font-display); font-size:15px; font-weight:400; letter-spacing:0; text-transform:uppercase; color:var(--text); }
.mi-meta{ flex:none; display:flex; align-items:baseline; gap:12px; margin-left:auto; }
.mi-unit{ flex:none; min-width:58px; text-align:right; font-family:var(--font-label); font-size:11px; color:var(--text-mute); letter-spacing:0.02em; text-transform:none; }
.mi-desc{ font-size:14.5px; color:var(--text-soft); margin-top:4px; }
.mi-price{ flex:none; font-family:var(--font-body); font-size:15px; color:var(--red); white-space:normal; text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }
.mi-price small{ color:var(--text-mute); font-size:11px; margin-left:4px; font-weight:400; }

.subcat{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.subcat h4{ font-family:var(--font-label); font-size:12.5px; letter-spacing:0.2em; text-transform:uppercase; font-weight:700; color:var(--text-mute); margin-bottom:10px; text-align:center; }

.menu-foot-note{ margin-top:30px; text-align:center; font-family:var(--font-label); font-size:12px; letter-spacing:0.04em; color:var(--text-mute); font-style:italic; }

/* =================== KONTAKT =================== */
.visit{ background:var(--ground-2); color:var(--text); padding-top:150px; min-height:100vh; }
.visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.visit h2{ color:var(--text); }
.visit-copy p{ color:var(--text-soft); font-size:18px; margin-bottom:0; }
.visit-note{ margin-top:22px; font-size:16px; color:var(--text-soft); font-style:italic; }
.visit-list{ display:flex; flex-direction:column; gap:22px; margin-top:34px; }
.visit-row{ display:flex; gap:16px; align-items:flex-start; }
.visit-row .ico{ flex:none; width:22px; height:22px; color:var(--red); margin-top:3px; }
.visit-row .ico svg{ width:100%; height:100%; }
.visit-row .lbl{ font-family:var(--font-label); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--text-mute); margin-bottom:3px; }
.visit-row .val{ font-size:18px; }
.visit-row a.val:hover{ color:var(--red); }
.hours-grid{ display:grid; grid-template-columns:auto auto; column-gap:22px; row-gap:5px; margin-top:2px; }
.hours-row{ display:contents; }
.hours-row span:first-child{ font-size:15px; color:var(--text-soft); }
.hours-row span:last-child{ font-size:15px; color:var(--text); font-variant-numeric:tabular-nums; }

.map-panel{ border:1px solid var(--line-strong); padding:14px; display:flex; flex-direction:column; gap:14px; }
.map-frame{ position:relative; width:100%; height:420px; filter:saturate(0.9) contrast(1.05); }
.map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; }
.map-directions{ align-self:center; }

/* =================== FOOTER =================== */
footer{ background:var(--surface-2); padding:56px 0 30px; }
.foot-top{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid var(--line); }
.foot-brand{ display:flex; align-items:center; gap:12px; }
.foot-brand img{ height:38px; }
.foot-contact{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
.foot-contact a, .foot-contact .foot-hours{ display:flex; align-items:center; gap:8px; font-family:var(--font-label); font-size:12px; letter-spacing:0.04em; color:var(--text-soft); }
.foot-contact a:hover{ color:var(--red); }
.foot-contact svg{ width:15px; height:15px; flex:none; color:var(--red); }
.foot-social{ display:flex; gap:14px; }
.foot-social a{ width:36px; height:36px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-soft); transition:all .25s ease; }
.foot-social a:hover{ border-color:var(--red); color:var(--red); }
.foot-social svg{ width:16px; height:16px; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:22px; }
.foot-bottom p{ font-family:var(--font-label); font-size:11.5px; letter-spacing:0.04em; color:var(--text-mute); }

/* =================== RESPONSIVE =================== */
@media (max-width:980px){
  .about-row{ grid-template-columns:1fr; direction:ltr; gap:28px; margin-bottom:64px; }
  .about-row.reverse{ direction:ltr; }
  .about-media img{ height:320px; }
  .visit-grid{ grid-template-columns:1fr; gap:50px; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .main-nav, .header-actions .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .brand img{ height:46px; }
  section{ padding:78px 0; }
  .about, .menu, .visit{ padding-top:112px; }
  .map-frame{ height:280px; }
}

/* =================== COOKIE BANNER =================== */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--ground-2); border-top:1px solid var(--line);
  padding:18px 28px; display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; text-align:center;
  transform:translateY(110%); transition:transform .5s ease;
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-banner p{ font-size:14px; color:var(--text-soft); max-width:640px; margin:0; }
.cookie-banner .btn{ flex:none; }
@media (max-width:600px){
  .cookie-banner{ padding:16px 20px; }
}

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:70; background:var(--ground); display:flex; flex-direction:column;
  padding:26px 28px; gap:26px; transform:translateY(-100%); transition:transform .4s ease;
  overflow-y:auto;
}
.mobile-nav.open{ transform:translateY(0); }
.mobile-nav .close-row{ display:flex; justify-content:space-between; align-items:center; }
.mobile-nav a{ font-family:var(--font-display); font-weight:400; font-size:26px; text-transform:uppercase; color:var(--text); border-bottom:1px solid var(--line); padding-bottom:14px; }
.mobile-nav a.active{ color:var(--red); }