/* header.st.css */
@namespace "Header";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    mobile-max,
    tablet,
    --font-family-base,
    --color-accent-1,
    --color-accent-4,
    --color-accent-6,
    --color-focus,
    --color-ui-inverse,
    --gutter-width-sm,
    --gutter-width-md,
    --gutter-width-lg;
}

/* Import style API */
:import {
  -st-from: "../../components/Header/header.st.css";
  -st-default: Header;
  -st-named: placeholder;
}

/* Mixins style from the components API */
:import {
  -st-from: "../../mixins/srOnly.st.css";
  -st-default: SrOnly;
}

:import {
  -st-from: "../../mixins/hoverUnderline.st.css";
  -st-default: HoverUnderline;
}

@st-scope Base {
  Header {
    /* Local vars which can be imported and overridden by the theme. */
    --accent-color: var(--color-accent-4);
    --secondary-accent-color: var(--color-accent-6);
    --background-color: var(--color-accent-1);
    --foreground-color: var(--color-ui-inverse);
    --height: 60px;
    --nav-link-active-color: var(--color-accent-4);
    --nav-link-hover-color: var(--color-accent-4);
    --nav-link-indicator-border-rad: 4px;
    --logo-height-sm: 30px;
    --logo-width-sm: auto;
    --logo-height-md: 30px;
    --logo-width-md: auto;
    --secondary-logo-height-sm: 22px;
    --secondary-logo-width-sm: auto;
    --secondary-logo-height-md: 22px;
    --secondary-logo-width-md: auto;
    /* This is required to reserve the space 
     * of the brand area for the overflow tabs 
     * to get the width right on first paint. 
     * and avoid overlapping. Not ideal as 
     * we are guestimating the slogan width as
     * 'Film'. */
    --overflow-tab-offset-margin-md: 285px;
    /* Styles */
    background-color: var(--background-color);
    font-family: var(--font-family-base);
    margin-bottom: var(--gutter-width-lg);
    transition: background-color .3s cubic-bezier(.215, .61, .355, 1), top .6s cubic-bezier(.215, .61, .355, 1);
    position: relative;
    z-index: 1000;
    -webkit-font-smoothing: antialiased;
    position: fixed;
    /* height 60px and the box-shadow 10px = 70px*/
    top: -70px;
    width: 100vw;
    box-shadow: 0px 0px 10px #ffffff6e;
    transition-delay: 0.2s;
  }

  Header:isHeaderVisible {
    top: 0;
    transition: top .3s cubic-bezier(.215, .61, .355, 1);
    transition-delay: 0.2s;
  }

  /**
   * Placeholder: Allow space for the header to be position 'fixed' on top. 
   * Note: We cannot use the height var as this placeholder does not
   * sit indie the component (cuase that would make it useless as a 
   * placeholder).
   */
  .placeholder {
    height: 60px;
  }

  Header::container {
    position: relative;
    /* Changing block to flex stops the overflow tabs from working. */
    display: block;
    width: 100%;
    height: var(--height);
  }

  Header::brandContainer {
    height: var(--height);
    float: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    z-index: 10;
  }

  Header::brand,
  Header::secondaryBrand {
    color: var(--foreground-color);
    margin-right: var(--gutter-width-sm);
  }

  Header::brandContainer {
    padding-left: var(--gutter-width-md);
    padding-right: var(--gutter-width-md);
  }

  Header::brand::image {
    width: var(--logo-width-sm);
    height: var(--logo-height-sm);
  }

  Header::secondaryBrand::image {
    width: var(--secondary-logo-width-sm);
    height: var(--secondary-logo-height-sm);
  }

  Header::slogan {
    font-size: 21px;
    font-weight: 600;
    color: var(--accent-color);
    padding: 0;
    margin: 0;
    line-height: 48px;
    display: block;
  }

  /* Mobile Menu - @todo mixins for this and search... */
  Header::menuToggle {
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
    position: absolute;
    top: 0;
    width: 45px;
    height: var(--height);
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    outline: none
  }

  Header::headerSearch::searchToggle {
    height: var(--height);
  }

  Header::menuToggle {
    right: 2px;
  }

  Header::menuToggle svg {
    position: relative;
    fill: none;
    stroke: var(--foreground-color);
  }

  Header::menuToggle:hover {
    cursor: pointer;
  }

  Header::overflowTabs::triggerIcon {
    transition: transform 250ms;
  }

  Header::overflowTabs:menuIsOpen::triggerIcon {
    transform: scaleY(-1);
    transform-origin: 0 12px;
  }
}

@st-scope [dir=rtl] Base {
  Header::brandContainer {
    float: right;
  }

  Header::menuToggle {
    right: auto;
    left: 2px;
  }

  Header::brand,
  Header::secondaryBrand {
    margin-right: auto;
    margin-left: var(--gutter-width-sm);
  }
}

/*= Menu */
@media value(mobile-max) {
  @st-scope Base {
    Header::menu {
      transition: .1s cubic-bezier(.215, .61, .355, 1);
      transform: translateX(100vw);
      position: fixed;
      width: 100vw;
      /* vh gives some oddness on device, sticking to %. */
      height: 100%;
      padding-top: var(--height);
      height: calc(100% - var(--height));
      background: var(--background-color);
    }

    Header::overflowTabs {
      margin: 0;
      padding-left: var(--gutter-width-md);
      padding-right: var(--gutter-width-md);
      padding-top: 20px;
      border-top: 1px solid var(--secondary-accent-color);
    }

    Header:isMenuOpen {
      position: fixed;
      width: 100%;
    }

    Header:isMenuOpen::headerSearch {
      display: none;
    }

    Header:isMenuOpen::menu {
      transition: .3s cubic-bezier(.215, .61, .355, 1);
      transform: translateX(0vw);
    }

    Header::headerSearch::searchForm {
      top: 12px;
    }

    Header::headerSearch::searchForm,
    Header::headerSearch::searchToggle {
      right: 40px;
    }
  }
}

@st-scope Base {
  Header::overflowTabs {
    color: var(--foreground-color);
  }

  Header::overflowTabs::anchor,
  Header::overflowTabs::trigger {
    -st-mixin: HoverUnderline;
    line-height: 22px;
    -webkit-font-smoothing: initial;
  }

  Header::overflowTabs::anchor {
    display: block;
    margin-bottom: var(--gutter-width-sm);
  }

  Header::overflowTabs::anchor::before,
  Header::overflowTabs::trigger::before {
    background-color: var(--nav-link-hover-color);
    border-radius: var(--nav-link-indicator-border-rad);
  }

  Header::overflowTabs::anchor:focus-visible::before {
    background-color: var(--color-focus);
  }

  Header::overflowTabs::anchor:focus-visible {
    color: var(--color-focus);
    background-color: transparent;
  }

  Header::overflowTabs::isActive {
    color: var(--nav-link-active-color);
    text-decoration: none;
  }

  Header::overflowTabs::isActive::before {
    transform: scaleX(1);
  }

  Header::overflowTabs::overflowMenu {
    background: var(--background-color);
    color: var(--foreground-color);
    padding: 10px 15px 15px;
    border-top: 1px solid var(--accent-color);
    font-weight: 400;
  }
}

@media value(mobile-max) {
  @st-scope Base {

    Header::overflowTabs::anchor:focus-visible,
    Header::overflowTabs::anchor:hover,
    Header::overflowTabs::anchor:active,
    Header::overflowTabs::isActive {
      text-decoration: none;
      padding-left: 12px;
    }
  }
}

@media value(mobile-max) {
  @st-scope [dir=rtl] Base {
    Header::menu {
      transform: translateX(-100vw);
    }

    Header:isMenuOpen::menu {
      transform: translateX(0);
    }

    Header::headerSearch::searchForm,
    Header::headerSearch::searchToggle {
      right: auto;
      left: 40px;
    }

    Header::overflowTabs::anchor::before {
      right: 0;
      left: auto;
    }

    Header::overflowTabs::anchor:focus-visible,
    Header::overflowTabs::anchor:hover,
    Header::overflowTabs::anchor:active,
    Header::overflowTabs::isActive {
      padding-right: 12px;
    }
  }
}

/* Tablets and above */
/* Had to keep it wide as design doesn't want scrolling or wrapping. */
@media value(tablet) {
  @st-scope Base {

    /* Menu Toggle hidden on desktops */
    Header::menuToggle {
      display: none;
    }

    /* Desktop menu */
    Header::container {
      margin: 0 auto;
      /* max-width: 1200px; */
      max-width: 1920px;
    }

    /* Brand Logo Slogan */
    Header::brandContainer {
      margin-right: 20px;
      /* height: 100%; */
      /* design nudge. */
      position: relative;
      top: 1px;
      z-index: 100;
    }

    Header::brand::image {
      width: var(--logo-width-md);
      height: var(--logo-height-md);
    }

    Header::secondaryBrand::image {
      width: var(--secondary-logo-width-md);
      height: var(--secondary-logo-height-md);
    }

    Header::menu {
      /* Allow moving menu nav to the edge, plus IE9 & 10 fix. */
      display: block;
      padding: 0;
      height: 60px;
      clear: none;
      background-color: transparent;
    }

    Header::menu {
      /* Allows for the search bar to be hidden when inactive with z-index. */
      position: relative;
      z-index: 10;
    }

    Header::overflowTabs {
      display: flex;
      justify-content: flex-end;
      margin-right: 70px;
      height: calc(100% - 0px);
      transition: opacity .3s cubic-bezier(.215, .61, .355, 1);
      /* Floats and measuring are not playing nice on first paint only. 
       * This reserves the space for the logo, tried to fix the logos 
       * size but the float seems to be the issue. */
      margin-left: var(--overflow-tab-offset-margin-md);
    }

    /* Dull down the main nav when search is on top. */
    Header:isSearchOpen::overflowTabs {
      opacity: 0.3;
    }

    /* Styles both nav and overflow menu items. */
    Header::overflowTabs::anchor,
    Header::overflowTabs::trigger {
      margin: 0;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      padding-left: 18px;
      padding-right: 18px;
    }

    Header::overflowTabs::anchor:focus,
    Header::overflowTabs::anchor:hover,
    Header::overflowTabs::isActive {
      padding-left: 18px;
    }

    Header::overflowTabs::anchor::before,
    Header::overflowTabs::trigger::before {
      height: 6px;
      bottom: 8px;
      left: 9px;
      width: calc(100% - 18px);
    }

    Header::overflowTabs::trigger {
      height: var(--height);
    }

    /* Nested item (in the overflow menu) overrides. */
    Header::overflowTabs::overflowMenu::anchor {
      height: 45px;
    }

    Header::overflowTabs::overflowMenu::anchor::before {
      bottom: 0;
    }
  }
}

@media value(tablet) {
  @st-scope [dir=rtl] Base {
    Header::overflowTabs {
      margin-right: 0;
      margin-left: 70px;
    }
  }
}