:root{
  --bg-page:#e3e3e3;
  --text:#0f172a;

  --header:#f49c11;
  --header-text:#ffffff;

  --nav:#2980b9;
  --nav-text:#ffffff;

  --panel:#f4f4f4;
  --side-panel:#d4efdf;
  --footer:#27ae60;
  --footer-text:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6;
}

header,nav,main,aside,footer{
  border-radius:0;
  border:none;
  padding:16px;
}

.container{
  max-width:1200px;
  margin-inline:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
}

header{
  background:var(--header);
  color:var(--header-text);
  display:flex;
  align-items:center;
  gap:12px;
}
header .logo {
  font-size:16px;
  line-height:1;
  background-color: var(--panel);
  color: #616161;
  padding: 10px 16px;
  border-radius: 3px;
  font-weight: bold;
}
header h1{margin:0;font-weight:700;font-size:clamp(18px,4.2vw,28px)}

nav{
  background:var(--nav);
  color:var(--nav-text);
  display:flex;
  gap:12px;
  justify-content:center;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-block:12px;
}
nav a{
  color:var(--nav-text);
  text-decoration:none;
  white-space:nowrap;
  padding:10px 14px;
  border-radius:0;
  font-weight: bold;
}
nav a:hover,nav a:focus-visible{
  background:rgba(255,255,255,.15);
  outline:none;
}

main{
  background:var(--panel);
}
main h2{margin-top:.25rem;font-size:clamp(18px,3.8vw,22px)}
p{margin:.6rem 0 1rem}

aside{
  background:var(--side-panel);
  display:flex;
  flex-direction:column;
}
aside h3{margin-top:.2rem}
aside > div{
  margin-top:auto;
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  font-size:22px;
}
aside > div span{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  justify-content: center;
  padding:10px;
  font-size: 60px;
  background-color: transparent;
}

footer{
  background:var(--footer);
  color:var(--footer-text);
  text-align:center;
  font-weight:600;
}

@media (min-width:1024px){
  .container{
    display:grid;
    grid-template-columns:1fr 320px;
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:
      "header header"
      "nav    nav"
      "main   aside"
      "footer footer";
    min-height:100vh;
  }
  header{grid-area:header}
  nav{grid-area:nav}
  main{grid-area:main}
  aside{grid-area:aside; display:block}
  footer{grid-area:footer}

  nav{
    justify-content:flex-start;
    overflow:visible;
  }

  aside > div{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
    overflow:visible;
  }
  aside > div span{
    width:100%;
    background-color: transparent;
    font-size: 60px;
    padding: 5px;
  }
}

/* hamburger menu */

header{ position: relative; z-index: 1100; }
.menu-toggle{
  margin-left: auto;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--header-text);
}
.menu-toggle::before{
  content: "☰";
  font-size: 24px; line-height: 1;
}

nav{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--nav);
  color: var(--nav-text);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;

  opacity: 0;
  transform: translateY(-16px);     
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .28s ease,
    transform .32s cubic-bezier(.2,.6,.2,1),
    visibility 0s linear .32s;      
}


#nav-toggle:checked ~ nav{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity .28s ease,
    transform .36s cubic-bezier(.2,.8,.2,1),
    visibility 0s;                  
}


#nav-toggle:checked ~ nav a{
  color: var(--nav-text);
  text-decoration: none;
  font-size: 1.25rem;
  padding: 12px 18px;
}

#nav-toggle:checked ~ header .menu-toggle::before{
  content: "✕";
}

.container:has(#nav-toggle:checked){
  height: 100vh;
  overflow: hidden;
}

@media (min-width:1024px){
  .menu-toggle{ display: none; }

  nav{
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: none;

    display: flex;
    flex-direction: row;       /* w jednej linii */
    flex-wrap: nowrap;         /* bez zawijania */
    gap: 12px;
    justify-content: flex-start;
    background: var(--nav);
    color: var(--nav-text);
    padding-block: 12px;
    overflow-x: auto;        
    -webkit-overflow-scrolling: touch;
  }

  nav a{
    color: var(--nav-text);
    white-space: nowrap;      
    text-decoration: none;
    padding: 10px 14px;
  }

  #nav-toggle:checked ~ nav{
    position: static;
    inset: auto;
    display: flex;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
}