<header class="c-site-header c-site-header--home c-site-header--home--expanded">
  <div class="c-site-header__top">
    <div class="c-site-header__top-content">
      <div class="c-site-header__hamburger c-site-header__hamburger--top">
        {{> button primaryButtons.hamburger}}
      </div>
      <div class="c-site-header__logo c-site-header__logo--square">
        <a href="#" class="c-site-header__logo-link">
          <svg class="c-site-header__logo-art" pointer-events="none" focusable="false" aria-hidden="true">
            <use xlink:href="{{generatedSvgSpritePath}}#tgam-logo-boxed"></use>
          </svg>
          <h1 class="c-site-header__logo-text u-visually-hidden">The Globe and Mail</h1>
        </a>
      </div>
      <div class="c-site-header__logo c-site-header__logo--wide">
        <a href="#" class="c-site-header__logo-link">
          <svg class="c-site-header__logo-art" pointer-events="none" focusable="false" aria-hidden="true">
            <use xlink:href="{{generatedSvgSpritePath}}#tgam-logo-white"></use>
          </svg>
          <h1 class="c-site-header__logo-text u-visually-hidden">The Globe and Mail</h1>
        </a>
      </div>
      <div class="c-site-header__buttons">
        <div class="c-site-header__button-group">
          <div class="c-site-header__button">{{> button primaryButtons.subscribe}}</div>
          <div class="c-site-header__button">{{> button primaryButtons.register}}</div>
          <div class="c-site-header__button">{{> button primaryButtons.login}}</div>
          <div class="c-site-header__button c-site-header__button--search-top">{{> button primaryButtons.search}}</div>
          <div class="c-site-header__button">{{> button primaryButtons.adChoices}}</div>
        </div>
      </div>
    </div>
  </div>
  {{#if benefitsMenu}}
    <div id="site-header-menu-benefits"
      class="c-site-header__benefits c-site-header__benefits--hiding"
      aria-hidden="true" aria-expanded="false">
      {{> member-story-list benefitsMenu}}
    </div>
  {{/if}}
  <div class="c-site-header__bottom">
    <div class="c-site-header__bottom-content">
      <div class="c-site-header__hamburger c-site-header__hamburger--bottom">
        {{> button secondaryButtons.hamburger}}
      </div>
      {{> scroll-menu scrollMenu}}
      {{> button secondaryButtons.search}}
    </div>
  </div>
</header>

<div class="c-site-header__placeholder"></div>

<div class="c-site-header__menu-panel"{{#if menuPanelId}} id="{{menuPanelId}}"{{/if}} hidden>
  {{> menu-panel menuPanel}}
</div>
