/**
 * Header
 */

// Dependencies
@use 'sass:math';
@use 'config/grid' as *;
@use 'config/layouts';
@use 'config/media';
@use 'config/nav';
@use 'config/typography';

// Declarations
.o-header {
  width: 100%;

  @include layouts.wrap();

  padding-top: calc(var(--nyco-grid) * 4);
  padding-bottom: calc(var(--nyco-grid) * 4);

  *:last-child {
    margin-bottom: 0;
  }

  @include media.screen-and-min-width('tablet') {
    align-items: flex-start;
    display: flex;
  }

  @include media.screen-and-min-width('tablet') {
    padding-top: calc(var(--nyco-grid) * 7);
    padding-bottom: calc(var(--nyco-grid) * 9);
  }

  > div {
    width: 100%
  }
}

.o-header__title {
  margin-bottom: var(--nyco-typography-margin-bottom);
  margin-top: calc(var(--nyco-typography-margin-bottom) * 2);

  @include media.screen-and-min-width('mobile') {
    display: flex;
  }
}

.o-header__icon {
  display: block;
  margin-bottom: calc(var(--nyco-grid) * 1);
  margin-inline-end: calc(var(--nyco-grid) * 2);
  flex: none;

  width: calc(var(--nyco-grid) * 6) !important;
  height: calc(var(--nyco-grid) * 6) !important;

  @include media.screen-and-min-width('mobile') {
    margin-bottom: 0;
  }

  @include media.screen-and-min-width('desktop') {
    width: calc(var(--nyco-grid) * 7) !important;
    height: calc(var(--nyco-grid) * 7) !important;
  }
}

.o-header__heading {
  @include typography.set('h3');

  margin-top: 0;
  margin-bottom: 0;
}

.o-header__subtitle {
  @include typography.set('h5');
  font-weight: normal;

  margin-top: 0;
  margin-bottom: var(--nyco-typography-margin-bottom);
}

.o-header__supplementary {
  @include typography.set('small');

  margin-top: 0;
  margin-bottom: var(--nyco-typography-margin-bottom);
}

.o-header__breadcrumbs {
  @include typography.set('small');

  font-family: var(--nyco-fontFamily-primary);

  margin-top: 0;
  margin-bottom: var(--nyco-typography-margin-bottom);
}

.o-header__breadcrumbs-chevron {
  width: calc(var(--nyco-grid) * 2);
  height: calc(var(--nyco-grid) * 2);
  vertical-align: middle;
}

.o-header__tags {
  @include media.screen-and-min-width('desktop') {
    margin-inline-start: calc(var(--nyco-grid) * -2);
  }
}

.o-header__utility {
  @include typography.set('small');
  @include nav.inline();

  display: flex;
  justify-content: end;
}