/* The one site header (src/portal.mjs header()), shared by the portal, the marketplace and the studio pages.
   Loaded before each area's stylesheet. The element defaults below are scoped and zero-specificity (:where), so the
   area stylesheets (portal.css, site.css, marketplace.css) still win where they style the same elements. */
:root{--header:84px}
@media(max-width:760px){:root{--header:122px}}
.site-header{--navy:#10283f;font:15px/1.6 Geist,Arial,sans-serif}
:where(.site-header) *{box-sizing:border-box}
:where(.site-header) a{color:inherit;text-decoration:none}
:where(.site-header) img{display:block;max-width:100%}
:where(.site-header) svg{width:21px;height:21px;flex-shrink:0}
:where(.site-header) button,:where(.site-header) input{font:inherit;color:inherit}
:where(.site-header) button{cursor:pointer}
.skip-link{position:fixed;z-index:60;top:-80px;left:20px;background:white;color:#10283f;padding:12px 20px}
.skip-link:focus{top:12px}
.site-header{height:var(--header);position:sticky;top:0;z-index:10;background:var(--navy);color:#eaf5fa;box-shadow:0 1px 0 #ffffff10}
.header-inner{max-width:1376px;margin:0 auto;padding:0 48px;height:100%;display:flex;align-items:center;gap:38px}
.brand{display:flex;align-items:center;gap:15px;flex-shrink:0}
.brand img{width:182px;height:auto}
.brand-divider{width:1px;height:26px;background:#ffffff2a}
.brand-label{font-size:10px;letter-spacing:2px;color:#a3c8d8;font-weight:650}
.site-header nav{display:flex;align-items:center;gap:24px;white-space:nowrap}
.site-header nav>a{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;font-weight:600;color:#c6d7e3;transition:color .2s}
.site-header nav>a:hover,.site-header nav>a[aria-current]{color:#fff}
.favorite-count{min-width:19px;height:19px;justify-content:center;align-items:center;border-radius:6px;font-size:10px;background:#ffffff15}
.search{margin-left:auto;position:relative;display:flex;align-items:center;width:310px;color:#aac2d2}
.search>svg{position:absolute;left:14px;width:18px}
.search input{width:100%;height:43px;border:1px solid #ffffff1b;background:#ffffff08;border-radius:10px;color:#fff;padding:0 42px 0 42px;font-size:12px}
.search input::placeholder{color:#b4c7d4}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search input:focus{background:#ffffff10;outline-offset:2px}
.search-submit{position:absolute;right:3px;background:none;border:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:#b6dce8}
.search-submit svg{width:17px}
@media(max-width:1200px){.header-inner{padding-left:30px;padding-right:30px}
.header-inner{gap:24px}
.brand img{width:160px}
.brand{gap:12px}
.site-header nav{gap:18px}
.search{width:260px}}
@media(max-width:980px){.brand-label,.brand-divider{display:none}
.site-header nav>a{font-size:12px}
.header-inner{gap:28px}
.search{width:240px}}
@media(max-width:760px){.site-header{height:var(--header)}
.header-inner{position:relative;padding:0 20px;align-items:flex-start;justify-content:space-between;gap:12px}
.brand{height:65px}
.brand img{width:158px}
.site-header nav{height:65px;gap:15px}
.site-header nav>a{min-height:44px;font-size:11px;gap:5px}
.site-header nav svg{width:17px}
.favorite-count{display:none!important}
.search{position:absolute;left:20px;right:20px;top:68px;width:auto;margin:0}
.search input{height:39px;font-size:12px}
.search-submit{height:34px}}
@media(max-width:370px){.header-inner{padding-left:15px;padding-right:15px}
.search{left:15px;right:15px}
.brand img{width:130px}
.site-header nav{gap:10px}
.site-header nav span{font-size:10px}}
.portal-language{width:108px; min-height:44px; border:1px solid #ffffff24; border-radius:9px; padding:0 8px; background:#17354e; color:#e8f4fb; font:inherit; font-size:11px; cursor:pointer;}
.header-inner{gap:24px;}
.site-header nav{gap:18px;}
.site-header nav>a[aria-current=false]{color:#c6d7e3;}
.site-header nav>a[aria-current=page]{color:#fff;}
.brand img{width:172px;}
.search{width:290px; min-width:150px;}
.search input{font-size:13px;}
.search-submit{transition: transform 140ms ease, background-color 140ms ease, color 140ms ease;}
.search-submit:active{transform:scale(.94);}
.favorite-count{display:inline-flex;}
@media(max-width:1100px) and (min-width:761px){.header-inner{gap:15px;}
.brand img{width:145px;}
.site-header nav{gap:12px;}
.search{width:210px;}
.portal-language{width:91px;}}
@media(max-width:760px){.header-inner{align-items:center; justify-content:flex-start; gap:8px; height:65px; padding:0 16px;}
.brand{margin-right:auto; height:65px;}
.brand img{width:130px;}
.site-header nav{gap:0; height:65px;}
.site-header nav>a{padding:0 6px; min-width:38px; min-height:44px; justify-content:center;}
.site-header nav>a:not(:last-child)>span{position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden;}
.site-header nav>a:last-child{font-size:11px;}
.portal-language{width:54px; padding:0 3px; font-size:10px;}
.search{top:68px; left:16px; right:16px; min-width:0; width:auto;}}
@media(orientation:landscape) and (max-width:1000px){.header-inner{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#c6d7e3;cursor:pointer}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu[open] summary{color:#fff}
.nav-menu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:190px;display:flex;flex-direction:column;padding:8px;border-radius:12px;background:var(--navy);box-shadow:0 14px 40px #00102466}
.nav-menu-panel a{padding:12px 14px;border-radius:8px;font-size:14px;font-weight:650;color:#eaf5fa}
.nav-menu-panel a:hover,.nav-menu-panel a:focus-visible{background:#ffffff14}
@media(max-width:760px){.site-header nav>a.nav-blog,.site-header nav>a.nav-studio{display:none}
.nav-menu{display:block}}
body.has-stage .site-header{background:rgb(8 21 35/.22);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 -1px 0 rgb(255 255 255/.1);transition:background-color .35s,box-shadow .35s}
body.has-stage .site-header .search input{background:rgb(255 255 255/.1);border-color:rgb(255 255 255/.22)}
body.has-stage.stage-passed .site-header{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 0 #ffffff10}
body.has-stage.stage-passed .site-header .search input{background:#ffffff08;border-color:#ffffff1b}
@media(prefers-reduced-motion:reduce){body.has-stage .site-header{transition:none}}
.portal-language{-webkit-appearance:none;appearance:none;padding:0 26px 0 12px;font-weight:700;font-size:13px;background:rgb(255 255 255/.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23d7e5ef' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/10px 7px;border:1px solid rgb(255 255 255/.22);border-radius:10px;color:#fff}
.portal-language:hover{background-color:rgb(255 255 255/.14)}
.portal-language:focus-visible{outline:2px solid #8fe3ff;outline-offset:2px}
.portal-language option{color:#10283f;background:#fff}
@media(max-width:760px){.portal-language{width:66px;min-width:66px;font-size:16px;padding:0 22px 0 10px;background-position:right 8px center}}
.nav-biz{position:relative}
.nav-biz summary{list-style:none;display:flex;align-items:center;gap:7px;min-height:44px;font-size:13px;font-weight:600;color:#c6d7e3;cursor:pointer;transition:color .2s}
.nav-biz summary::-webkit-details-marker{display:none}
.nav-biz summary:after{content:'';width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-biz[open] summary:after{transform:translateY(1px) rotate(225deg)}
.nav-biz summary:hover,.nav-biz[open] summary,.nav-biz summary[aria-current]{color:#fff}
.nav-biz .nav-menu-panel{left:-14px;right:auto;min-width:250px}
.nav-menu-panel a[aria-current]{background:#ffffff14}
.nav-menu-label{margin:8px 14px 2px;font-size:10px;letter-spacing:1.4px;font-weight:750;text-transform:uppercase;color:#8fb3c6;white-space:normal}
.nav-menu-panel .nav-menu-label~a{font-size:13px;padding:9px 14px;white-space:normal}
@media(max-width:1100px) and (min-width:761px){.nav-biz summary{font-size:12px}
.site-header nav:has(.nav-biz)>a[data-explore]>span,.site-header nav:has(.nav-biz)>a[data-view-link]>span:not(.favorite-count){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
/* Tablets: Favourites, Blog and Studio move into ☰ below 1100 px, "For business" too below 980 px. */
@media(max-width:1100px) and (min-width:761px){.site-header nav>a.nav-fav,.site-header nav>a.nav-blog,.site-header nav>a.nav-studio{display:none}
.site-header .nav-menu{display:block}}
@media(max-width:980px) and (min-width:761px){.nav-biz{display:none}}
@media(max-width:760px){.nav-biz{display:none}
.nav-menu-panel{max-height:calc(100vh - 90px);overflow-y:auto;min-width:240px}}

/* Unified menu additions (05/11/2026): Marketplace as a main link, favourites move into ☰ on phones. */
@media(max-width:760px){.site-header nav>a.nav-fav{display:none}}
/* One header width on every page (was home-only in depth.css): wide container, fluid gutter; small phones. */
.header-inner{max-width:1600px; padding-inline:clamp(20px,3.5vw,56px);}
@media(max-width:760px){.header-inner{padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));}}
@media(max-width:380px){.header-inner{gap:4px;}
.brand img{width:96px;}
.site-header nav>a{min-width:44px; padding-inline:4px;}
.site-header nav>a:last-child{font-size:10px;}
}