/* PI Data Hub site chrome. Applies to .site-header / .site-nav.
   Loaded after each page's inline <style> so these rules win.
   Keep this file minimal: only the nav/logo concerns. */

.site-header{
    display:flex;
    align-items:center;
    gap:32px;
}

.site-header .logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}

.site-header .logo .logo-icon{
    width:22px;
    height:22px;
    border-radius:6px;
    display:block;
    flex-shrink:0;
}

.site-nav{
    display:flex;
    align-items:center;
    gap:24px;
}

.site-nav a{
    white-space:nowrap;
    position:relative;
}

/* Active page: subtle green underline + brighter text.
   Set via [data-active] attribute by /js/site-chrome.js (or by an
   inline script on the page itself). */
.site-nav a[data-active]{
    color:#fff;
}
.site-nav a[data-active]:not(.nav-cta)::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-8px;
    height:2px;
    background:#22C55E;
    border-radius:2px;
}

/* Tablet: keep the link set legible. Shrink gap, never hide links
   on devices that can show them. */
@media (max-width: 1100px){
    .site-header{gap:20px}
    .site-nav{gap:16px}
}

@media (max-width: 880px){
    .site-header{gap:14px;padding-left:14px;padding-right:14px}
    .site-nav{gap:12px}
    /* On tablets and below, drop the "Sign In" link to keep the pill
       compact. The CTA still wins. */
    .site-nav a[href="/login"]{display:none}
}

@media (max-width: 720px){
    /* Phone-portrait: collapse to logo + CTA. Other links would
       force wrapping. */
    .site-nav a:not(.nav-cta){display:none}
}