/* =============================================================================
   components/_header-main.scss — Icon‐Style Header Nav
   ============================================================================= */

.main-header {
  display: flex;
  align-items: center;
  padding: 30px 25px;
  background: var(--color-white);

  .site-title {
    flex-grow: 1;
    font-family: var(--font-heading);
    font-size: 30px;
    margin: 0;
    color: var(--color-text);
  }

  .nav-icons {
    display: flex;
    gap: 12px;

    a {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 8px;
      text-decoration: none;
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--color-text);
      transition: background 0.2s ease, color 0.2s ease;

      .icon {
        width: 20px;
        height: 20px;
        fill: var(--color-primary);
        transition: fill 0.2s ease;
      }

      &:hover {
        background: var(--gradient-primary);
        color: var(--color-white);

        .icon {
          fill: var(--color-white);
        }
      }
    }
  }
}
