/* Let2 spinning-house header lockup: cube + vertical bar + "Let2" wordmark.
 * Loaded after the theme stylesheet; overrides the old background-image logo.
 * Proportions signed off on the intra.net/let2-header-test mock-up. */

/* neutralise the old background-image logo and let the lockup lay itself out */
.site-branding .logo,
.site-branding.mobile .logo{
  background:none !important;
  width:auto !important;
  height:auto !important;
  display:flex;
  align-items:center;
  text-decoration:none;
}

/* the theme hides every <span> inside .logo (it hid the old site-name);
 * our wordmark IS spans, so explicitly show it */
.site-branding .logo .l2-word,
.site-branding .logo .l2-word span{ visibility:visible !important; }

/* the spinning house cube (sizes driven entirely from here, no inline --S) */
.site-branding .hc-cube        { --S:48px; }   /* desktop */
.site-branding.mobile .hc-cube { --S:42px; }   /* mobile  */
.scrolled header .hc-cube      { --S:33px; }   /* compact (scrolled) */

/* the vertical bar */
.l2-bar{
  width:3px; height:86px;
  background:#b4b3b3; border-radius:2px;
  flex-shrink:0;
  margin-left:16px; margin-right:11px;
}
.scrolled header .l2-bar{ height:56px; width:2px; }

/* the wordmark */
.l2-word{
  font-family:"Source Sans Pro","Avenir LT Std 65 Medium",Calibri,
              "Franklin Gothic Book",Verdana,Arial,sans-serif;
  font-weight:700; font-size:2.5rem; letter-spacing:-0.01em; line-height:1;
}
.l2-word .let{ color:#2b2b2b; }
.l2-word .two{ color:#6f6f6f; }
.scrolled header .l2-word{ font-size:1.6rem; }

/* mobile: a touch smaller bar + wordmark */
@media (max-width:1023px){
  .l2-bar{ height:64px; margin-left:13px; margin-right:9px; }
  .l2-word{ font-size:2rem; }
}

/* --- banner height: a little more whitespace above/below the bar ---
 * The header is position:fixed and the theme keeps #content's padding-top
 * equal to the header height (60 / 85 / 100 at these breakpoints); raise
 * both together or the taller header overlaps the page. */
header   { height:80px; }
#content { padding-top:80px; }
@media (min-width:768px){
  header   { height:96px; }
  #content { padding-top:96px; }
}
@media (min-width:1024px){
  header   { height:114px; }
  #content { padding-top:114px; }
}