/* UI/UX: layout and responsive rules (mobile first). All colours come from tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:var(--font-body);line-height:1.6;color:var(--color-ink);background:var(--color-paper)}
img,svg{max-width:100%;height:auto}

.skip{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.6rem 1rem;background:var(--color-red);color:var(--color-paper);border-radius:.4rem;text-decoration:none}
.skip:focus{top:1rem}

:where(a,button,summary,input,select,textarea):focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;border-radius:.25rem}

.site-header{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1rem calc(.75rem + 6px);background:var(--color-surface);border-bottom:0}
/* Hungarian tricolour band: red, white, green */
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(var(--color-red) 0 33.4%,var(--color-surface) 33.4% 66.6%,var(--color-green) 66.6%);box-shadow:0 -1px 0 var(--color-border)}
.site-header .brand{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-heading);font-weight:700;font-size:1.15rem;color:var(--color-ink);text-decoration:none}
.nav-toggle{display:none;min-height:44px;padding:.4rem .9rem;font:inherit;color:inherit;background:transparent;border:2px solid currentColor;border-radius:.4rem;cursor:pointer}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.site-nav a{display:block;padding:.6rem .9rem;min-height:44px;color:var(--color-ink);text-decoration:none;border-radius:.4rem;border-bottom:3px solid transparent}
.site-nav a:hover{background:var(--color-sand)}
.site-nav a[aria-current="page"]{font-weight:700;border-bottom-color:var(--color-green)}

/* With JS, small screens get a toggle button */
.js .nav-toggle{display:inline-block}
.js .site-nav{flex-basis:100%}
.js .site-nav[hidden]{display:none}
.js .site-nav ul{flex-direction:column}

main{flex:1;width:100%;max-width:70rem;margin:0 auto;padding:1.5rem 1rem}
main h1{line-height:1.2}

.site-footer{border-top:6px solid var(--color-red);padding:1.25rem 1rem;text-align:center;font-size:.9rem;background:var(--color-green-dark);color:var(--color-paper)}
.site-footer a{color:inherit}
.site-footer p{margin:.25rem 0}

@media (min-width:48em){
  .site-header{padding:.75rem 2rem calc(.75rem + 6px)}
  .js .nav-toggle{display:none}
  .js .site-nav,.js .site-nav[hidden]{display:block;flex-basis:auto}
  .js .site-nav ul{flex-direction:row}
  main{padding:2.5rem 2rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}