// The very top of the site, element that usually includes
// the site navigation and search for example.
.site-header {
  align-items: flex-start;
  column-gap: var(--spacing-grid-gap);
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  max-width: $width-grid-base;
  padding-bottom: var(--spacing-site-header-padding-block);
  // stylelint-disable-next-line
  padding-left: 20px;
  // stylelint-disable-next-line
  padding-right: 20px;
  padding-top: var(--spacing-site-header-padding-block);
  position: relative;
  z-index: 15;
}

.site-title {
  line-height: 0;
  margin: 0;

  a {
    align-items: center;
    display: flex;
  }
}

// Delete the following styles when you start! (marked with --clip--)
// This is just dummy content and should be removed the instant you start!
// --clip--
.site-main {
  display: grid;
}

// Delete this too:
.site-main::after {
  align-items: center;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 3px 100%;
  // stylelint-disable-next-line
  border: 6px solid var(--color-black);
  color: var(--color-black);
  content: 'Build your website here!';
  display: flex;
  // stylelint-disable-next-line
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: var(--typography-weight-bold);
  justify-content: center;
  margin-bottom: var(--spacing-container-padding-block);
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(var(--spacing-container-padding-block) * 2);
  // stylelint-disable-next-line
  max-width: $width-grid-base - 40px;
  order: -1;
  // stylelint-disable-next-line
  padding: 40px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  // stylelint-disable-next-line
  width: calc(100% - 40px);
}

// Delete this too:
// stylelint-disable-next-line
.site-branding .site-title {
  display: none;
}

// Delete this too:
.site-branding::after {
  border: 4px solid var(--color-black);
  color: var(--color-black);
  content: 'Your logo here';
  // stylelint-disable-next-line
  font-size: 16px;
  font-weight: var(--typography-weight-bold);
  // stylelint-disable-next-line
  padding: 10px 20px;
  white-space: nowrap;

  @media (max-width: $width-max-mobile) {
    border-color: var(--color-white);
    color: var(--color-white);
  }
}

// And delete this as well:
.menu-items-wrapper:not(:has(.menu-items)) {
  display: flex;

  // Add pseudo menu
  &::before {
    align-self: center;
    color: var(--color-black);
    // Add pseudo content with non breaking spaces
    content: 'Your nav here \00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0 About\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0Services\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0Pricing\00A0\00A0\00A0\00A0\00A0\00A0\00A0 Contact';
    display: block;
    font-weight: var(--typography-weight-semibold);
    opacity: .2;
    // stylelint-disable-next-line
    padding: 15px 0;
  }
}

// And of course this:
// stylelint-disable-next-line
.site-footer {
  display: none;
}
// --clip--