/* Shared refinements for the VCB header bar and footer, loaded after page CSS.
   The bar is tagged .vcb-bar by js/vcb-chrome.js, so no page markup changes. */

.vcb-bar{transition:box-shadow .45s cubic-bezier(.2,.7,.3,1),background-color .45s,backdrop-filter .45s}
/* A hairline under the bar that catches light in the middle and fades at the edges. */
.vcb-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.22) 22%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.22) 78%,transparent 100%);
  opacity:.75;transition:opacity .45s}
.vcb-bar.vcb-light::after{background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 22%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.08) 78%,transparent 100%)}
/* Once the page moves, the bar settles into a denser glass with depth beneath it. */
.vcb-bar.is-scrolled{box-shadow:0 18px 40px -24px rgba(0,0,0,.75);-webkit-backdrop-filter:saturate(1.3) blur(18px);backdrop-filter:saturate(1.3) blur(18px)}
.vcb-bar.vcb-light.is-scrolled{box-shadow:0 16px 36px -24px rgba(15,23,42,.35)}
.vcb-bar.is-scrolled::after{opacity:1}
.vcb-bar img[src*="vcb-logo-on-"]{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.vcb-bar a:hover img[src*="vcb-logo-on-"]{transform:translateY(-1px)}

/* The VCB mark keeps its proportions: it never gives up width to a crowded bar. */
.vcb-bar img[src*="vcb-logo-on-"]{max-width:none!important;flex-shrink:0;aspect-ratio:543/360;object-fit:contain}
.vcb-bar a:has(>img[src*="vcb-logo-on-"]),.vcb-bar picture:has(>img[src*="vcb-logo-on-"]){flex-shrink:0}

/* Header links and buttons stay on one line; tighten the link padding before they would wrap. */
.vcb-bar a,.vcb-bar button{white-space:nowrap}
@media(max-width:1439px){.vcb-bar a.px-5{padding-left:.8rem;padding-right:.8rem}.vcb-bar a.px-6{padding-left:1rem;padding-right:1rem}}
@media(max-width:1199px){.vcb-bar a.tracking-widest{letter-spacing:.06em}}

/* Navbar dropdowns (generated by scripts/sync-nav.py): tighten with the links,
   open for keyboard focus as well as hover, and keep a readable panel width. */
@media(max-width:1439px){.vcb-bar .vcb-drop>button.px-5{padding-left:.8rem;padding-right:.8rem}}
@media(max-width:1199px){.vcb-bar .vcb-drop>button.tracking-widest{letter-spacing:.06em}}
.vcb-drop:focus-within>div{opacity:1;pointer-events:auto}
.vcb-drop:focus-within>button .material-symbols-sharp{transform:rotate(180deg)}
.vcb-drop-panel{min-width:300px}
.vcb-drop-icon{width:24px;height:24px;flex-shrink:0;object-fit:contain}
/* Icon glyphs are ligatures: until the icon font arrives they are words like
   "expand_more". Reserve a square so the bar never widens while it loads. */
.vcb-bar .material-symbols-sharp{display:inline-block;width:1em;overflow:hidden;white-space:nowrap;line-height:1;flex-shrink:0}

/* Footer logos: a quiet lift on hover, nothing more. */
footer a[aria-label="VCB-AI home"] img,.footer a[aria-label="VCB-AI home"] img{transition:opacity .3s,transform .3s}
footer a[aria-label="VCB-AI home"]:hover img{opacity:.85;transform:translateY(-1px)}

/* Room at the foot of the page, so the fixed Ask Tinman button never sits on footer links. */
body>footer:last-of-type,body>div>footer:last-of-type,.footer{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom,0px))!important}

@media(prefers-reduced-motion:reduce){.vcb-bar,.vcb-bar::after,.vcb-bar img,footer a img{transition:none!important}}