@layer general {
  #main-header {
    box-shadow: var(--shadow-sm);
  }
  #main-header ul {
    list-style: none;
  }
  #main-header button {
    background-color: transparent;
    border: none;
  }
  #main-header .nav-link {
    padding-block: calc(var(--global-space) / 2);
    padding-inline: var(--global-space);

    font-family: sans-serif;
    font-weight: bold;
  }
  #main-header .nav-link:hover {
    color: var(--clr-secondary-400);
  }
  #main-header .call-to-action a {
    text-align: center;
    text-decoration: none;
    font-weight: bold;

    background-color: var(--clr-secondary-400);
    color: var(--clr-neutral-100);

    padding-block: calc(var(--global-space) / 2);
  }
  #main-header .call-to-action > * {
    flex: 1 1 auto;
  }
  #main-header .contacts {
    padding-block: var(--global-space);
  }
  #main-header .contacts .wrapper {
    justify-content: flex-end;
    gap: var(--global-space);
  }
  #main-header .logo {
    align-items: center;
    gap: calc(var(--global-space) / 4);

    text-align: center;
  }
  @media screen and (width < 640px) {
    #main-header .logo :where(h1, p) {
      display: none;
    }
  }
  #main-header
    :where(
      .geo,
      .cta,
      #primary-navigation-toggle,
      #primary-navigation [data-with-dropdown] button
    ) {
    gap: calc(var(--global-space) / 2);

    padding-block: calc(var(--global-space) / 2);
    padding-inline: calc(var(--global-space) * 1.25);
  }
  #main-header :where(.geo, .cta) {
    font-family: serif;
  }
  #main-header :where(.geo, .cta) i {
    font-size: var(--fs-large);
  }
  #main-header :where(.geo, .cta):hover {
    filter: brightness(1.1);
  }
  #main-header .geo i {
    color: var(--clr-secondary-400);
  }
  #main-header .geo:hover i {
    color: var(--clr-secondary-300);
  }
  #main-header .cta {
    font-weight: bold;
    text-align: center;
    font-style: italic;
    color: var(--text-color-alternative);

    background-color: var(--clr-secondary-400);

    border-radius: var(--border-radius);

    box-shadow: var(--shadow-sm);
  }
  #main-header .cta p:nth-of-type(2) {
    font-size: var(--fs-large);
  }
  #primary-navigation-toggle {
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: bold;

    border-radius: var(--border-radius);
  }
  #primary-navigation-toggle:hover {
    background-color: var(--clr-neutral-200);
  }
  #primary-navigation-toggle i {
    font-size: var(--fs-xl);
  }
  #primary-navigation-toggle span {
    font-size: var(--fs-small);
  }
  #primary-navigation [data-with-dropdown="true"] button:hover {
    background-color: var(--clr-neutral-200);
  }
  #primary-navigation [data-with-dropdown="true"] button > span {
    display: block;
    width: min-content;
    height: min-content;

    margin-inline-start: auto;
  }
  #primary-navigation
    [data-with-dropdown="true"]
    button[aria-expanded="true"]
    > span {
    rotate: 0deg;
  }
  #primary-navigation
    [data-with-dropdown="true"]
    button[aria-expanded="false"]
    > span {
    rotate: 90deg;
  }
  @media screen and (width >= 768px) {
    #primary-navigation {
      --text-color-main: var(--clr-primary-400);

      background-color: var(--clr-primary-400);
      color: var(--text-color-alternative);
    }
    #primary-navigation .sub-menu {
      color: var(--text-color-main);

      box-shadow: var(--shadow-sm);
    }
    #primary-navigation .sub-menu > li {
      background-color: hsl(var(--hsl-neutral-100), 1);
    }
    #primary-navigation .sub-menu a {
      display: block;
    }
    #primary-navigation .sub-menu a:hover {
      background-color: var(--clr-neutral-200);
    }
  }
  @media screen and (width < 768px) {
    #main-header {
      background-color: var(--clr-neutral-100);
    }

    #primary-navigation {
      font-size: var(--fs-xl);
    }
    #primary-navigation .main-menu {
      box-shadow: var(--shadow-sm);
      background-color: hsl(var(--hsl-neutral-100), 0.95);
    }
    #primary-navigation .main-menu.wrapper {
      --inline-margin: 0em;
    }
    #primary-navigation .main-menu {
      padding-block-end: var(--global-space);

      border-block-start: 1px solid var(--clr-primary-400);
    }
    #primary-navigation .sub-menu {
      margin-inline: var(--global-space);
      margin-block-end: calc(var(--global-space) / 2);

      border-block-start: 1px solid var(--clr-primary-400);
    }
  }
}