/* Standard site header for pages with independent content styles. */
:where(.site-header) { font-family:"Bubblegum Sans",cursive; font-size:20px; line-height:1.6; }
:where(.site-header) .nav-links { margin:0; padding-left:0; }
:where(.site-header) { position:sticky; top:0; z-index:1000; background:rgba(244,252,252,.95); backdrop-filter:blur(10px); border-bottom:2px solid #35c9c5; }:where(.site-header) .nav-container { max-width:1200px; margin:auto; padding:20px 40px; display:flex; align-items:center; justify-content:space-between; position:relative; }:where(.site-header) .nav-actions { display:flex; align-items:center; gap:28px; }:where(.site-header) .logoMainPage { display:inline-flex; align-items:center; gap:26px; color:#075d73; font-size:30px; font-weight:700; text-decoration:none; transition:filter .2s; }:where(.site-header) .logoMainPage:hover { filter:drop-shadow(0 3px 3px rgba(8,74,94,.28)); }:where(.site-header) .logoMainPage img { width:170px; height:170px; object-fit:contain; }:where(.site-header) .nav-links { display:flex; gap:40px; list-style:none; }:where(.site-header) .nav-links a { color:#123f50; font-weight:600; text-decoration:none; transition:color .2s,text-shadow .2s,transform .2s; }:where(.site-header) .nav-links a:hover, :where(.site-header) .nav-links a.active { color:#06758b; }:where(.site-header) .nav-links a:hover { text-shadow:0 2px 3px rgba(8,74,94,.22); }:where(.site-header) .store-link { display:inline-block; padding:8px 18px; color:#123f50; font-weight:600; text-decoration:none; background:#c8f0ed; border:2px solid #123f50; border-radius:999px; transition:color .2s,transform .2s; }:where(.site-header) .store-link:hover { color:#123f50; background:#c8f0ed; text-shadow:none; transform:scale(1.05); }:where(.site-header) .menu-checkbox, :where(.site-header) .menu-label { display:none; }:where(.site-header) li a.home-link, :where(.site-header) li a.home-link:hover { color:#876400; }
@media(max-width:768px) {:where(.site-header) .nav-container { display:grid; grid-template-columns:auto 1fr; row-gap:15px; padding:15px 20px; }:where(.site-header) .logoMainPage { grid-column:1/-1; justify-self:center; gap:15px; font-size:25px; }:where(.site-header) .logoMainPage img { width:72px; height:72px; }:where(.site-header) .menu-label { display:block; cursor:pointer; font-size:30px; color:#075d73; grid-column:1; align-self:center; }:where(.site-header) .nav-actions { grid-column:2; justify-self:end; }:where(.site-header) .nav-links { position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; max-height:0; overflow:hidden; background:#176b87; border-bottom:2px solid #35c9c5; transition:max-height .3s ease-out; }:where(.site-header) .nav-links li { width:100%; text-align:center; }:where(.site-header) .nav-links a { display:block; padding:20px; border-bottom:1px solid rgba(6,182,212,.1); }:where(.site-header) .menu-checkbox:checked ~ .nav-actions .nav-links { max-height:calc(100dvh - 180px); overflow-y:auto; } }:where(.site-header) .store-link { display:inline-flex; align-items:center; gap:8px; }:where(.site-header) .store-link img { width:1.2em; height:1.2em; flex-shrink:0; }
/* Keep the additional navigation item comfortable on tablets. */
@media (min-width: 769px) { .nav-links { gap:clamp(.6rem, 1.8vw, 2rem); padding-left:0; } .nav-links a,.store-link { white-space:nowrap; } .nav-container { gap:1rem; } }
@media (min-width:769px) and (max-width:1250px) { .nav-container { flex-wrap:wrap; justify-content:center; } .logoMainPage img { width:100px; height:100px; } }
@media (max-width:768px) { .nav-links a { color:#fff; } .nav-links a.active,.nav-links a:hover { color:#b9ffef; } .nav-links a.home-link { color:#ffe69a; } }

@media (min-width:769px) { .site-header .nav-links { gap:clamp(12px, 1.8vw, 40px); } .site-header .nav-container { gap:20px; } }