@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900;1000&display=swap');
.site-header{max-width:1200px;min-height:116px;margin:0 auto;padding:0 36px;display:flex;align-items:center;justify-content:space-between;gap:28px;box-sizing:border-box}
.site-brand{display:flex;align-items:center;gap:12px;color:#0866a9;text-decoration:none;font-family:Nunito,'Trebuchet MS',sans-serif;font-weight:1000;line-height:1}
.site-brand img{display:block;width:76px;height:76px;object-fit:contain;flex:0 0 76px}
.site-brand>span{display:block;font-size:25px;letter-spacing:-.5px;white-space:nowrap}
.site-brand small{display:block;margin-top:8px;color:#0866a9;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:none}
.site-header .site-back{color:#0866a9;text-decoration:none;font-family:Nunito,'Trebuchet MS',sans-serif;font-size:14px;font-weight:900;white-space:nowrap}
.site-header .site-back:hover{text-decoration:underline}
.site-header nav{display:flex;align-items:center}
@media(max-width:850px){.site-header{padding:0 24px}}
@media(max-width:620px){.site-header{min-height:93px;padding:0 16px;gap:12px}.site-brand{gap:7px}.site-brand img{width:54px;height:54px;flex-basis:54px}.site-brand>span{font-size:19px}.site-brand small{margin-top:6px;font-size:11px;letter-spacing:0}.site-header .site-back{font-size:12px}}

@media(max-width:620px){
  .site-header{width:100%;max-width:100vw;min-width:0;overflow:hidden}
  .site-brand{min-width:0;flex:0 1 auto}
  .site-brand img{width:46px;height:46px;flex-basis:46px}
  .site-brand>span{font-size:17px}
  .site-header nav{min-width:0;gap:8px;flex:0 1 auto}
  .site-header nav a{font-size:11px;white-space:nowrap}
}
@media(max-width:480px){
  .site-header{padding-inline:12px;gap:8px}
  .site-brand{gap:6px}
  .site-brand small{display:none}
  .site-brand>span{font-size:16px}
  .site-header nav{gap:7px}
  .site-header nav a{font-size:10px}
}


/* 2026-09-13 · brand header polish */
.site-header{position:relative;min-height:104px}
.site-header::after{content:"";position:absolute;left:36px;right:36px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#d9e8f2 14%,#d9e8f2 86%,transparent)}
.site-brand img{filter:drop-shadow(0 7px 12px rgba(18,54,86,.10));transition:transform .2s ease}
.site-brand:hover img{transform:rotate(-3deg) scale(1.035)}
.site-brand>span{letter-spacing:-.65px}
.site-header nav{gap:8px}
.site-header nav a:not(.nav-yt){padding:9px 12px;border-radius:999px;transition:background .16s,color .16s,transform .16s}
.site-header nav a:not(.nav-yt):hover{background:#edf6fb;color:#0866a9;transform:translateY(-1px)}
.site-header .site-back{display:inline-flex;align-items:center;min-height:38px;padding:8px 13px;border:1px solid #d4e5ef;border-radius:999px;background:#fff;box-shadow:0 5px 14px rgba(18,54,86,.05);transition:.16s ease}
.site-header .site-back:hover{text-decoration:none;border-color:#9fc9df;transform:translateY(-1px)}
.site-header .nav-yt{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 21px;border-radius:100px;border:1.5px solid #123656!important;background:linear-gradient(180deg,#ffdc63,#ffcc35)!important;box-shadow:0 4px 0 rgba(18,54,86,.22)!important}
.site-header .nav-yt:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(18,54,86,.22)!important}
@media(max-width:850px){.site-header::after{left:24px;right:24px}}
@media(max-width:620px){
  .site-header{min-height:0;padding:10px 16px 12px;flex-wrap:wrap;gap:8px 12px;overflow:visible}
  .site-header::after{left:16px;right:16px}
  .site-brand{flex:1 1 auto}
  .site-brand img{width:50px;height:50px;flex-basis:50px}
  .site-brand>span{font-size:18px}
  .site-brand small{display:block;font-size:10px}
  .site-header nav{order:2;width:100%;min-width:0;display:flex;gap:7px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:3px 0 2px}
  .site-header nav::-webkit-scrollbar{display:none}
  .site-header nav a,.site-header nav a:not(.nav-yt){flex:0 0 auto;min-height:35px;display:inline-flex!important;align-items:center;padding:7px 10px!important;border:1px solid #d8e7f0;border-radius:999px;background:#f7fbfd;font-size:12px!important;white-space:nowrap}
  .site-header nav .nav-yt{border-color:#173a59!important;box-shadow:none!important}
  .site-header .site-back{font-size:12px;min-height:36px}
}
@media(max-width:420px){.site-brand small{display:none}.site-brand>span{font-size:17px}}

/* Shared navigation on all content pages. */
html{scroll-padding-top:125px}
.site-header{
  position:sticky;top:0;z-index:1000;width:100%;max-width:none;
  padding-inline:max(36px,calc((100vw - 1128px)/2));
  background:rgba(255,254,250,.97);box-shadow:0 3px 16px rgba(18,54,86,.07);
  font-family:Nunito,'Trebuchet MS',sans-serif;
}
.site-header nav{gap:6px}
.site-header nav a{color:#123656;text-decoration:none;font-size:15px;font-weight:900;white-space:nowrap}
@media(max-width:850px){.site-header{padding-inline:24px}}
@media(max-width:620px){
  html{scroll-padding-top:125px}
  .site-header{padding:9px 16px 10px}
  .site-header nav{gap:7px}
}


/* Compact sticky navigation on phones and tablets (2026-10-13). */
.mobile-menu-toggle{display:none}
@media(max-width:980px){
  html{scroll-padding-top:86px}
  .site-header.mobile-menu-ready{
    position:sticky;top:0;z-index:1000;box-sizing:border-box;
    width:100%;max-width:none;min-height:76px;
    padding:10px 24px;gap:12px;flex-direction:row;
    flex-wrap:nowrap;align-items:center;justify-content:space-between;
    overflow:visible;
  }
  .site-header.mobile-menu-ready::after{left:24px;right:24px}
  .site-header.mobile-menu-ready .site-brand{
    flex:0 1 auto;min-width:0;max-width:calc(100% - 126px);
    gap:9px;
  }
  .site-header.mobile-menu-ready .site-brand img{
    width:54px;height:54px;flex:0 0 54px;
  }
  .site-header.mobile-menu-ready .site-brand>span{
    min-width:0;font-size:19px;letter-spacing:-.5px;white-space:nowrap;
  }
  .site-header.mobile-menu-ready .site-brand small{
    display:block;font-size:10px;line-height:1.1;margin-top:6px;
  }
  .site-header .mobile-menu-toggle{
    flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    gap:9px;min-width:98px;min-height:44px;padding:9px 14px;
    border:1.5px solid #123656;border-radius:999px;
    background:#ffda52;color:#123656;
    box-shadow:0 3px 0 rgba(18,54,86,.17);
    font:900 14px/1.1 Nunito,'Trebuchet MS',sans-serif;
    white-space:nowrap;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .site-header .mobile-menu-toggle:focus-visible{outline:3px solid #0866a9;outline-offset:3px}
  .site-header .mobile-menu-icon{display:flex;flex-direction:column;justify-content:center;gap:4px;width:19px;height:19px}
  .site-header .mobile-menu-icon span{display:block;width:19px;height:2px;border-radius:2px;background:#123656;transition:transform .18s,opacity .18s}
  .site-header.mobile-menu-open .mobile-menu-icon span:first-child{transform:translateY(6px) rotate(45deg)}
  .site-header.mobile-menu-open .mobile-menu-icon span:nth-child(2){opacity:0}
  .site-header.mobile-menu-open .mobile-menu-icon span:last-child{transform:translateY(-6px) rotate(-45deg)}
  .site-header.mobile-menu-ready nav{
    position:absolute;top:calc(100% - 1px);right:24px;left:auto;
    order:0;width:min(440px,calc(100vw - 48px))!important;min-width:0;
    display:none!important;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px!important;align-items:stretch;justify-content:stretch;
    padding:16px!important;margin:0;box-sizing:border-box;
    max-height:calc(100dvh - 90px);overflow-x:hidden!important;overflow-y:auto!important;
    border:1px solid #d4e5ef;border-radius:0 0 20px 20px;
    background:rgba(255,254,250,.99);
    box-shadow:0 18px 32px rgba(18,54,86,.20);
    overscroll-behavior:contain;
  }
  .site-header.mobile-menu-ready.mobile-menu-open nav{display:grid!important}
  .site-header.mobile-menu-ready nav a,
  .site-header.mobile-menu-ready nav a:not(.nav-yt){
    display:flex!important;align-items:center;justify-content:center;
    width:100%;min-width:0;min-height:49px!important;
    padding:10px 10px!important;
    border:1px solid #d7e7f0!important;border-radius:13px!important;
    background:#f4f9fc;color:#123656;
    font-size:14px!important;font-weight:900;line-height:1.25;
    text-align:center;white-space:normal!important;
    box-shadow:none!important;box-sizing:border-box;
  }
  .site-header.mobile-menu-ready nav a.nav-about{display:flex!important}
  .site-header.mobile-menu-ready nav a.nav-yt{
    display:flex!important;border:1.5px solid #123656!important;
    background:linear-gradient(180deg,#ffdc63,#ffcc35)!important;
    color:#123656;box-shadow:none!important;
  }
}
@media(max-width:620px){
  .site-header.mobile-menu-ready{padding:9px 16px;min-height:72px}
  .site-header.mobile-menu-ready::after{left:16px;right:16px}
  .site-header.mobile-menu-ready nav{
    right:12px;left:12px;width:auto!important;
    padding:13px!important;gap:9px!important;
  }
  .site-header.mobile-menu-ready .site-brand>span{font-size:18px}
  .site-header.mobile-menu-ready .site-brand img{width:50px;height:50px;flex-basis:50px}
}
@media(max-width:360px){
  .site-header.mobile-menu-ready .site-brand small{display:none}
  .site-header.mobile-menu-ready .site-brand>span{font-size:16px}
  .site-header .mobile-menu-toggle{min-width:86px;padding-inline:10px;gap:6px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .site-header .mobile-menu-icon span{transition:none}
}


/* 2026-10-13 — fluid-media and responsive navigation safeguards on all site pages. */
body img,body video,body iframe{max-width:100%}
.site-header,.site-header .site-brand,.site-header nav{min-width:0}
@media(max-width:980px){
 .site-header.mobile-menu-ready .site-brand>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .site-header.mobile-menu-ready .site-brand small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:620px){
 body :is(h1,h2,h3){overflow-wrap:anywhere;hyphens:auto}
 body :is(main,section,article){min-width:0}
 .site-header.mobile-menu-ready{max-width:100%;min-width:0}
}

/* Keep the Mazsola Klub tagline visible in even the narrowest mobile header. */
@media(max-width:420px){
  .site-brand small,
  .site-header.mobile-menu-ready .site-brand small{display:block;font-size:10px;letter-spacing:0;line-height:1.1}
}
@media(max-width:360px){
  .site-header.mobile-menu-ready .site-brand>span{font-size:15px}
}
/* Unified YouTube, TikTok and Facebook social icons, 2026-10-30. */
.social-links{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:0}
.social-links--header{margin-left:7px;flex:0 0 auto}
.social-icon,.site-header nav a.social-icon{box-sizing:border-box;display:inline-grid!important;place-items:center;flex:0 0 auto;width:40px;height:40px;min-width:40px;min-height:40px;padding:0!important;border:2px solid #fff!important;border-radius:50%!important;color:#fff!important;text-decoration:none!important;line-height:1!important;box-shadow:0 3px 9px rgba(18,54,86,.18);transition:transform .18s ease,box-shadow .18s ease}
.social-icon svg{display:block;width:23px;height:23px;max-width:75%;max-height:75%;fill:currentColor}
.social-icon--youtube,.site-header nav .social-icon--youtube{background:linear-gradient(145deg,#ff364a,#d90022)!important}
.social-icon--tiktok,.site-header nav .social-icon--tiktok{background:linear-gradient(145deg,#333a44,#090b0f)!important}
.social-icon--facebook,.site-header nav .social-icon--facebook{background:linear-gradient(145deg,#3899ff,#1352b9)!important}
.social-icon--youtube svg{width:24px;height:24px}.social-icon--facebook svg{width:27px;height:27px}
.social-links .social-icon:hover,.site-header nav .social-links .social-icon:hover{transform:translateY(-3px)!important;box-shadow:0 7px 14px rgba(18,54,86,.22)!important}
.social-links .social-icon:focus-visible{outline:3px solid #074fbd;outline-offset:3px}
.social-links--footer{gap:10px;margin-right:8px}.social-links--footer .social-icon{width:42px;height:42px}
.social-links--legal{display:flex;justify-content:flex-start;gap:15px;margin:17px 0 7px}.social-links--legal .social-icon{width:53px;height:53px}
.social-links--legal .social-icon svg{width:28px;height:28px}
@media(max-width:980px){
.site-header.mobile-menu-ready nav .social-links--header{grid-column:1/-1;display:flex;justify-content:center;gap:18px;margin:3px 0 0;padding:14px 0 3px;border-top:1px solid #e0e9f0}
.site-header.mobile-menu-ready nav a.social-icon,.site-header.mobile-menu-ready nav a.social-icon:not(.nav-yt){width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;padding:0!important;border:2px solid #fff!important;border-radius:50%!important;color:#fff!important;box-shadow:0 3px 9px rgba(18,54,86,.17)!important;flex:0 0 48px!important}}
@media(max-width:620px){.social-links--footer{width:100%;justify-content:center;margin:0}}
@media(prefers-reduced-motion:reduce){.social-icon{transition:none!important}}