/* Shared navigation: loaded after page styles; page themes must not restyle it. */
body{--tk-nav-surface:linear-gradient(180deg,#f4e8ccf5,#dcc499f5);--tk-nav-scrolled:linear-gradient(180deg,#e3cea9fa,#c6a674f5);--tk-nav-border:#b99867;--tk-nav-shadow:0 4px 12px #3e2b1629,0 8px 28px #3e2b1624,inset 0 1px 0 #fff8ec80}
body .custom-navbar{position:relative;top:auto;left:auto;transform:none;width:calc(100% - 64px);max-width:1440px;margin:18px auto 0;padding:8px 12px;border:1px solid var(--tk-nav-border);border-radius:10px;background:var(--tk-nav-surface);box-shadow:var(--tk-nav-shadow);z-index:200;min-height:58px}
.custom-navbar>.container-fluid{gap:18px;flex-wrap:nowrap}.tk-nav-brand{display:flex;align-items:center;gap:10px;color:#342115!important;font:22px Georgia,serif;letter-spacing:1px;white-space:nowrap;text-decoration:none}.tk-nav-brand>span{font:44px/1 Georgia,serif;color:#8d581c}.custom-navbar .navbar-nav{justify-content:center;gap:16px;align-items:center}.custom-navbar .nav-link,.custom-navbar .nav-link.active,.custom-navbar .nav-link:hover{font:14px/1.5 'Segoe UI',sans-serif;color:#483528!important;background:transparent!important;box-shadow:none!important;border-radius:0;padding:10px 2px!important;white-space:nowrap}.custom-navbar .nav-link.active{border-bottom:2px solid #9a652d}.custom-navbar .navbar-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:7px 20px;border:1px solid #a47740;border-radius:6px;background:linear-gradient(#b88748,#855015);color:#fffaf1;font:600 16px/1.4 Georgia,serif;box-shadow:none;white-space:nowrap}.custom-navbar .navbar-toggler{display:flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;min-width:46px;min-height:46px;padding:0!important;border:1px solid #bd945c!important;border-radius:50%!important;background:linear-gradient(135deg,#fffae9,#dfc497);box-shadow:0 3px 9px #6c46121a}.custom-navbar .navbar-icon{display:block;position:relative;width:20px;height:2px;background:#5b3c1f;border-radius:2px}.custom-navbar .navbar-icon:before,.custom-navbar .navbar-icon:after{content:'';position:absolute;left:0;width:20px;height:2px;background:#5b3c1f;border-radius:2px}.custom-navbar .navbar-icon:before{top:-6px}.custom-navbar .navbar-icon:after{top:6px}.custom-navbar :focus-visible{outline:3px solid #976325;outline-offset:4px}.custom-navbar .dropdown-menu{background:#fffaf2;border-color:#ddc39e}.custom-navbar .dropdown-item{color:#483528}
@media(min-width:992px) and (max-width:1199px){.tk-nav-brand{font-size:17px}.tk-nav-brand>span{font-size:36px}.custom-navbar .navbar-nav{gap:10px}.custom-navbar>.container-fluid{gap:12px}.custom-navbar .nav-link{font-size:12px}}
@media(max-width:991px){body .custom-navbar{width:calc(100% - 24px);margin:12px auto 0;padding:7px 4px;border-radius:14px}.custom-navbar>.container-fluid{flex-wrap:wrap;gap:0}.custom-navbar .tk-nav-brand{position:absolute;left:50%;transform:translateX(-50%);top:21px;font-size:15px;letter-spacing:.5px}.custom-navbar .tk-nav-brand>span{font-size:25px}.custom-navbar .navbar-nav{gap:0;align-items:stretch;padding:16px 4px 4px}.custom-navbar .nav-link{font-size:16px;padding:12px!important}.custom-navbar .nav-link.active{border-bottom:0;background:#ecddc5!important;border-radius:8px}.custom-navbar .navbar-button{padding:8px 12px;font-size:14px}.custom-navbar .dropdown-menu{text-align:center}}
@media(max-width:380px){.custom-navbar .tk-nav-brand{font-size:12px;gap:3px}.custom-navbar .tk-nav-brand>span{font-size:22px}}
body.sb-dark .custom-navbar{background:#20221f;border-color:#65665b}.sb-dark .custom-navbar .nav-link,.sb-dark .tk-nav-brand{color:#fff!important}.sb-dark .custom-navbar .nav-link.active{background:#3d3b30!important}.sb-dark .custom-navbar .dropdown-menu{background:#20221f}.sb-dark .custom-navbar .dropdown-item{color:#fff}
.tk-nav-brand>span{display:block;width:43px;height:43px;font-size:0!important;background:url('/images/home/crown.svg') center/contain no-repeat}.custom-navbar .nav-link:after{display:none}.custom-navbar .nav-link:hover,.custom-navbar .nav-link.active{transform:none}.custom-navbar .navbar-button{font-weight:400;margin-left:0}.custom-navbar>.container-fluid{position:static}
@media(max-width:991px){.custom-navbar .tk-nav-brand{top:18px;font-size:14px;gap:6px}.tk-nav-brand>span{width:27px;height:27px}.custom-navbar .navbar-button{font-size:13px;padding:7px 11px}}
@media(max-width:380px){.custom-navbar .tk-nav-brand{font-size:11px;gap:4px}.custom-navbar .tk-nav-brand>span{width:22px;height:22px}.custom-navbar .navbar-button{font-size:12px;padding:7px 9px}}
body:not(.tk-home):not(.songbook-page) .custom-navbar{position:fixed;top:0;left:50%;transform:translateX(-50%)}
body .custom-navbar.scrolled{background:var(--tk-nav-scrolled);box-shadow:var(--tk-nav-shadow)}
body.songbook-page.sb-dark .custom-navbar.scrolled{background:#20221f}

@media(max-width:991px){
 .custom-navbar .tk-nav-brand{position:static;transform:none;order:0;flex:1;justify-content:center;font-size:14px;min-width:0}
 .custom-navbar>.container-fluid>.d-lg-none{display:contents!important}
 .custom-navbar .mobile-nav-left{order:-1;flex-shrink:0}
 .custom-navbar .mobile-login{order:1;margin-left:0;flex-shrink:0}
 .custom-navbar .navbar-collapse{order:2}
 .custom-navbar .navbar-toggler:focus-visible{outline:3px solid #87551d!important;outline-offset:3px}
 body.sb-dark .custom-navbar .navbar-collapse{background:#20251f;border-color:#737d68;box-shadow:0 10px 30px #0008}
 body.sb-dark .custom-navbar .navbar-collapse .nav-link{color:#fff!important}
 body.sb-dark .custom-navbar .navbar-collapse .nav-link:hover,body.sb-dark .custom-navbar .navbar-collapse .nav-link.active{color:#fff!important;background:#3d4936!important}
}
@media(max-width:360px){.custom-navbar .tk-nav-brand{font-size:10px;gap:3px}.custom-navbar .tk-nav-brand>span{width:20px;height:24px}.custom-navbar .navbar-button{padding:7px 8px;font-size:12px}.custom-navbar>.container-fluid{padding-left:8px!important;padding-right:8px!important}}

/* Hover/focus states also belong to the shared theme. */
.custom-navbar .navbar-button:hover,.custom-navbar .navbar-button:focus{background:linear-gradient(#a57438,#71420f);border-color:#80531f;color:#fffaf1!important}
body.sb-dark .custom-navbar .nav-link:hover,body.sb-dark .custom-navbar .nav-link:focus-visible{color:#fff!important}

/* Rounded shared header attached to the viewport edge, on every page. */
body .navbar.custom-navbar{position:fixed;top:0;left:50%;transform:translateX(-50%);margin:0 auto;width:calc(100% - 48px);max-width:1280px;border-radius:50px;z-index:1100}
.custom-navbar .navbar-button{border-radius:999px}
body.songbook-page{padding-top:76px}

@media(max-width:991px){body .navbar.custom-navbar{width:calc(100% - 16px);border-radius:36px}body.songbook-page{padding-top:66px}}

.songbook-page .sb-collection{scroll-margin-top:96px}




/* Shared light surfaces and navigation — premium palette, September 2026. */
@media screen {
 body {--tk-nav-surface:linear-gradient(180deg,#f3ece0,#ede3d3);--tk-nav-scrolled:linear-gradient(180deg,#eee5d7,#e8ddcc);--tk-nav-border:#c9baa4;--tk-nav-shadow:0 5px 20px #302d2812}
 body:is(.tk-home,.songbook-page,.page-learning,.page-bijbelspellen,.page-adult-bible,[class*="page-entertainment"]):not(.sb-dark) {background:#f3efe7}
 .custom-navbar .navbar-button {background:#795738;border-color:#795738;color:#fff!important}
 .custom-navbar .navbar-button:hover,.custom-navbar .navbar-button:focus {background:#64462d;border-color:#64462d}
 .custom-navbar .navbar-toggler {background:#fffcf7;border-color:#c9baa4!important;box-shadow:none}
 body.sb-dark .navbar.custom-navbar,body.sb-dark .navbar.custom-navbar.scrolled {background:#242724;border-color:#555a50;box-shadow:0 5px 20px #0002}
 body.sb-dark .custom-navbar .navbar-button {background:#d7bb8d;border-color:#d7bb8d;color:#191b1a!important}
 body.sb-dark .custom-navbar .navbar-toggler {background:#2b2e2a;border-color:#727769!important}
 body.sb-dark .custom-navbar .navbar-icon,body.sb-dark .custom-navbar .navbar-icon:before,body.sb-dark .custom-navbar .navbar-icon:after {background:#f5f2eb}
 body.sb-dark .custom-navbar .navbar-collapse,body.sb-dark .custom-navbar .dropdown-menu {background:#242724;border-color:#555a50}
 body.sb-dark .custom-navbar .nav-link.active {background:#373c34!important;border-color:#d7bb8d}
}

/* Keep the animated menu icon legible in either theme. */
body .custom-navbar .navbar-toggler.open .navbar-icon {background:transparent}
body .custom-navbar .navbar-toggler.open .navbar-icon:before {top:0;transform:rotate(45deg)}
body .custom-navbar .navbar-toggler.open .navbar-icon:after {top:0;transform:rotate(-45deg)}

/* Compact opaque mobile menu; override legacy card-style navigation. */
@media (max-width:991px) {
 body .navbar.custom-navbar {--tk-menu-bg:#fffcf7;--tk-menu-text:#302d28;--tk-menu-line:#ded5c7;--tk-menu-active:#eee5d6;--tk-menu-accent:#795738}
 body.sb-dark .navbar.custom-navbar {--tk-menu-bg:#242724;--tk-menu-text:#f5f2eb;--tk-menu-line:#464a42;--tk-menu-active:#373c34;--tk-menu-accent:#d7bb8d}
 body .navbar.custom-navbar #navbarNav {
  top:calc(100% + 8px);left:0;width:100%;padding:10px;
  background:var(--tk-menu-bg)!important;opacity:1;
  border:1px solid var(--tk-menu-line);border-radius:22px;
  box-shadow:0 12px 32px #302d2824;backdrop-filter:none;-webkit-backdrop-filter:none;
  max-height:calc(100vh - 100px)!important;max-height:calc(100dvh - 100px)!important;
  overflow-y:auto;overscroll-behavior:contain;
 }
 body .navbar.custom-navbar #navbarNav::before,
 body .navbar.custom-navbar #navbarNav::after,
 body .navbar.custom-navbar #navbarNav .dropdown-menu::before {content:none;display:none}
 body .navbar.custom-navbar #navbarNav .navbar-nav {padding:0;margin:0!important;gap:3px;align-items:stretch}
 body .navbar.custom-navbar #navbarNav .nav-item {display:block;width:100%;margin:0;padding:0}
 body .navbar.custom-navbar #navbarNav .navbar-nav .nav-link {
  display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:48px;
  margin:0;padding:12px 16px!important;border:0!important;border-radius:12px;
  background:transparent!important;color:var(--tk-menu-text)!important;
  font:500 16px/1.45 'Segoe UI',sans-serif;text-align:left;white-space:normal;
  box-shadow:none!important;transform:none!important;
 }
 body .navbar.custom-navbar #navbarNav .navbar-nav .nav-link:hover,
 body .navbar.custom-navbar #navbarNav .navbar-nav .nav-link:focus-visible {background:var(--tk-menu-active)!important}
 body .navbar.custom-navbar #navbarNav .navbar-nav .nav-link.active {
  background:var(--tk-menu-active)!important;color:var(--tk-menu-text)!important;
  font-weight:650;box-shadow:inset 3px 0 0 var(--tk-menu-accent)!important;
 }
 body .navbar.custom-navbar #navbarNav .dropdown-menu {
  width:100%;margin:4px 0!important;padding:6px!important;background:var(--tk-menu-bg)!important;
  border:1px solid var(--tk-menu-line)!important;border-radius:14px;box-shadow:none!important;text-align:left;
 }
 body .navbar.custom-navbar #navbarNav .dropdown-item {
  min-height:44px;margin:0;padding:10px 12px!important;border:0;border-radius:8px;
  background:transparent;color:var(--tk-menu-text)!important;box-shadow:none;text-align:left;white-space:normal;
 }
 body .navbar.custom-navbar #navbarNav .dropdown-item:hover,
 body .navbar.custom-navbar #navbarNav .dropdown-item:focus-visible {background:var(--tk-menu-active)!important}
 body .navbar.custom-navbar #navbarNav :focus-visible {outline:2px solid var(--tk-menu-accent)!important;outline-offset:-2px}
}