/* MARK-FLUID: font sizes are fluid, authored size up to 900px wide growing to 1.14x at 1920px. Source sizes live in git history. */
/* Shared header and footer for the Flex Space Portal and the Office Space Calculator.
   This file is identical in both repos (public/css/kf-chrome.css): change it in one, copy it to the other.
   Rules are prefixed with `html body` so they win over each site's own stylesheet whatever the load order. */

/* ---- Header ---- */
html body .topbar-main{
  position:sticky;top:0;z-index:500;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:52.2px;padding:0 21.6px;overflow:hidden;
  background:#FFFFFF;border-bottom:1.8px solid #A6192E;
}
html body .topbar-main .wordmark{display:flex;align-items:center;gap:12.6px;min-width:0;flex-shrink:1;cursor:pointer;}
html body .topbar-main .brand-logo{flex:none;display:block;height:27px;width:auto;object-fit:contain;}
/* The product name, in the brand serif after a short red rule. */
html body .topbar-main .wordmark .sub{
  position:relative;display:inline-flex;align-items:center;
  padding-left:14.4px;border-left:0;
  font-family:"Domaine Display Narrow","DomaineDisplayNarrow",Georgia,"Times New Roman",serif;
  font-size:18px;font-weight:500;line-height:1;letter-spacing:-0.005em;
  text-transform:none;color:#1A1A1A;white-space:nowrap;
}
html body .topbar-main .wordmark .sub::before{
  content:"";position:absolute;left:0;top:50%;width:1.8px;height:19.8px;margin-top:-8.25px;
  background:#A6192E;border-radius:0;
}
html body .topbar-main .main-nav{display:flex;align-items:center;gap:21.6px;flex-shrink:1;min-width:0;}
html body .topbar-main .nav-link{
  position:relative;display:inline-flex;align-items:center;min-height:39.6px;padding:0;
  border:0;background:transparent;color:#1A1A1A;cursor:pointer;white-space:nowrap;
  font-family:inherit;font-size:14px;font-weight:500;letter-spacing:-0.005em;
}
html body .topbar-main .nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:5.4px;height:1.8px;background:#A6192E;
  transform:scaleX(0);transform-origin:left;transition:transform 200ms cubic-bezier(0.4,0,0.2,1);
}
html body .topbar-main .nav-link:hover::after,
html body .topbar-main .nav-link.active::after,
html body .topbar-main .nav-link[aria-current]::after{transform:scaleX(1);}
html body .topbar-main .nav-link--icon{justify-content:center;line-height:1;color:#1A1A1A;}
html body .topbar-main .nav-link--icon svg{display:block;}
/* The admin gear stays hidden on both sites until Ctrl/Cmd+B reveals it (or the admin view is open). */
html body .topbar-main #navAdmin:not(.visible),
html body .topbar-main .topbar-gear:not(.visible):not([aria-current]){display:none !important;}
@media (max-width:520px){
  html body .topbar-main{padding:0 12.6px;gap:10.8px;}
  html body .topbar-main .main-nav{gap:14.4px;}
  html body .topbar-main .nav-link{font-size:13px;}
  html body .topbar-main .wordmark .sub{display:none;}
}

/* ---- Footer ---- */
/* Pinned to the bottom of the window on both sites: one slim 25.2px line, on a phone too. On a phone the
   wording shortens (.kf-long hides): "CEA L3005536J" and "Privacy" / "Terms". The licence number itself, a
   CEA disclosure, always shows in full. Light only: neither site has a dark theme (color-scheme below). */
:root{color-scheme:light;}
html body .kf-site-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:600;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:0 14.4px;
  height:25.2px;min-height:0;padding:0 86.4px 0 18px;
  background:#FFFFFF;border-top:1.8px solid #A6192E;
}
html body .kf-footer-inner{display:contents;}
html body .kf-footer-copy{
  display:block;flex:1 1 0;min-width:0;
  font-size:11px;line-height:1.2;color:#5E5D57;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
}
html body .kf-footer-links{display:flex;align-items:center;gap:7.2px;flex-shrink:0;}
html body .kf-footer-link{font-size:11px;font-weight:500;color:#5E5D57;text-decoration:none;white-space:nowrap;padding:3.6px 0;transition:color 150ms cubic-bezier(0.4,0,0.2,1);}
html body .kf-footer-link:hover{color:#A6192E;}
html body .kf-footer-sep{font-size:11px;color:#B7B4AE;}
/* Between a phone and a wide screen the copyright and the links meet: the long wording goes first (the year,
   "Licence No."), then the copyright line gives way with an ellipsis rather than running under the links. */
@media (max-width:1180px){
  html body .kf-site-footer .kf-long{display:none;}
  html body .kf-site-footer{padding-right:64px;}
  html body .kf-footer-links{gap:5px;}
}
@media (max-width:640px){
  html body .kf-site-footer{height:25.2px;padding:0 10.8px;gap:0 9px;}
  html body .kf-footer-copy,html body .kf-footer-link{font-size:11px;}
  html body .kf-footer-links{gap:4.5px;}
  html body .kf-site-footer .kf-long{display:none;}
}