@use '../globals/variables' as *;
@use '../globals/mixins' as *;
@use '../globals/typography' as *;

header[role="banner"] {
  .inner-container {
    padding: var(--gutter);
    display: grid;
    grid-template-columns: 313px auto 150px 150px;
    @media #{$media-mobile} {
      grid-template-columns: auto 60px;
    }
    grid-gap: var(--gutter);
    align-items: center;
  }

  .main-focus-menu {
    @include mobile-hidden();
    padding-left: var(--2x-gutter);
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      display: inline-block;
      font-weight: 700;
      margin-right: 24px;
    }
  }

  a {
    text-decoration: none;
  }

  .site-logo {
    @media #{$media-mobile} {

    }
    a {
      display: grid;
      justify-content: start;
      align-items: center;
      grid-gap: 0 var(--gutter);
      grid-template-areas:
        "shield logo-line-top"
        "shield logo-line-bottom";
      font-family: var(--heading-font-family);
    }
    .shield {
      grid-area: shield;
      img {
        height: 70px;
      }
    }
    .logo-line-top {
      grid-area: logo-line-top;
      font-size: 25px;
      align-self: center;
      @media #{$media-mobile} {
        font-size: 20px;
      }
    }
    .logo-line-bottom {
      grid-area: logo-line-bottom;
      font-weight: lighter;
      font-size: 22px;
      align-self: self-start;
      @media #{$media-mobile} {
        font-size: 18px;
      }
    }
  }

  .search-button-container {
    @include mobile-hidden();
  }

  button {
    border: solid 3px var(--yellow);
    background-image: url('/themes/custom/skrymten/assets/images/trfk-icons/search.svg');
    background-position: 30px 50%;
    background-repeat: no-repeat;
    border-radius: 30px;
    padding: var(--gutter);
    text-align: left;
    width: 100%;
    &.search {
      padding-left: 65px;
      &.js-shown {
        background-image: url('/themes/custom/skrymten/assets/images/trfk-icons/burger-close.svg');
      }
    }
    &.menu {
      padding-left: 75px;
      background-color: var(--yellow);
      background-image: url('/themes/custom/skrymten/assets/images/trfk-icons/burger.svg');
      &.js-shown {
        background-image: url('/themes/custom/skrymten/assets/images/trfk-icons/burger-close.svg');
      }
      @media #{$media-mobile} {
        --size: 60px;
        text-indent: -100000px;
        padding: 0;
        width: var(--size);
        height: var(--size);
        background-position: center;
      }
    }
  }
}

.layout-container.has-hero {
  position: relative;
  .region-content {
    margin-top: 300px;
  }
  .menu-expandable-container.js-shown {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
  }
  .site-logo a {
    color: var(--white);
  }
  .main-focus-menu {
    a {
      color: white;
    }
  }
  &::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 400px;
    background-image: linear-gradient(to bottom, black 0%, transparent 30%), var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
  }
}

.menu-expandable-container,
.search-expandable-container {
  background-color: var(--surface-primary);
  padding: var(--gutter) 0;
  display: none;
  &.js-shown {
    display: block;
  }
}

// Big header: if this is a "transportation page", or certain views, see preprocess_html.
body.has-submenu,
body.path-tannklinikker {
  .block-page-title-block,
  .block-system-breadcrumb-block,
  .block-menu {
    @media #{$media-tablet-desktop} {
      @include fallout-bg;
    }

    background-color: var(--surface-primary);
  }
  .block-menu {
    background-color: var(--surface-secondary);
  }
}